xingmingyi_applet/components/y-action-sheet/y-action-sheet.vue

<template>
	<u-popup ref="popup" :show="show" closeable type="bottom">
		<view class="content">
			<view v-if="data.title" class="cell bold center title">
				<text>{{ data.title }}</text>
			</view>
			<view class="cell list dfsb" @click="change(item, index)" v-for="(item, index) in data.list" :key="index">
				<text class="flex1">{{ item.text }}</text>
				<image v-if="sel != index" class="icon" src="/static/img/pro/wxz.png" mode=""></image>
				<image v-if="sel == index" class="icon" src="/static/img/pro/xuanzhong.png" mode=""></image>
			</view>
			<view class="cell center cancel-btn" @click="confirm"><text>确定</text></view>
		</view>
	</u-popup>
</template>

<script>
/**
 * 底部选择菜单
 */
export default {
	data() {
		return {
			show: false,
			sel: 0,
			selItem: 0,
			data: {}
		};
	},
	methods: {
		change(item, ind) {
			this.sel = ind;
			this.selItem = item;
		},
		//选择回调
		confirm() {
			this.$util.throttle(() => {
				this.$emit('onConfirm', this.selItem);
			});
			this.close();
		},
		open(data) {
			this.data = data;
			this.show = true;
		},
		close() {
			this.show = false;
		}
	}
};
</script>

<style scoped lang="scss">
.content {
	background-color: #fff;
	border-radius: 16rpx 16rpx 0 0;
	overflow: hidden;
}
.list {
	padding: 0 30rpx;
}
.cell {
	min-height: 88rpx;
	font-size: 32rpx;
	color: #333;
	position: relative;
	width: 100%;

	&:after {
		position: absolute;
		z-index: 3;
		left: 0;
		top: auto;
		bottom: 0;
		right: 0;
		height: 0;
		content: '';
		transform: scaleY(0.5);
	}
	&:last-child {
		color: #fff;
		width: 750rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #ffac4c 0%, #ff8a00 100%);
		line-height: 100rpx;
		border-top: 12rpx solid #f7f7f7;
	}
	&.title {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 36rpx;
	}
	.icon {
		width: 36rpx;
		height: 36rpx;
	}
}
</style>