BD-LDBD-UNI/components/ActionSheet/index.vue

<template>
	<view>
		<view class="actionsheet-class actionsheet" :class="[show?'actionsheet-show':'']">
			<view class="tips">
				已选服务
			</view>
			<view class="actionsheet-body">
				<view class="actionsheet-view" v-for="(item, index) in list" :key="index">
					<view class="actionsheet-left">
						<view class="title">
							{{item.chooseName}}
						</view>
						<view class="menu" v-if="item.menu">
							{{item.menu}}
						</view>
						<view class="menu" v-else>
							个人套餐
						</view>
					</view>
					<image class="actionsheet-img" @click="deleteChoose(item)" :src="require('../../static/delete.png')"></image>
				</view>
				<view style="height: 200rpx;"></view>
			</view>

		</view>
		<view class="actionsheet-mask" :class="[show?'mask-show':'']" @tap="handleClickMask"></view>
	</view>
</template>

<script>
	export default {
		name: "actionsheet",
		props: {
			//点击遮罩 是否可关闭
			maskClosable: {
				type: Boolean,
				default: true
			},
			//显示操作菜单
			show: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array
			},
		},
		methods: {
			handleClickMask() {
				if (!this.maskClosable) return;
				this.handleClickCancel();
			},
			handleClickItem(e) {
				if (!this.show) return;
				const dataset = e.currentTarget.dataset;
				this.$emit('click', {
					index: dataset.index
				});
			},
			handleClickCancel() {
				this.$emit('showAction');
			},
			deleteChoose(item) {
				this.$emit('deleted', item);
			}
		}
	}
</script>

<style>
	.actionsheet {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9997;
		visibility: hidden;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
		-webkit-transform-origin: center;
		transform-origin: center;
		transition: all 0.3s ease-in-out;
		background: #FFFFFF;
		min-height: 100rpx;
	}

	.actionsheet-show {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	.actionsheet-left {
		float: left;
	}

	.tips {
		width: 100%;
		padding: 41rpx 36rpx;
		box-sizing: border-box;
		text-align: center;
		background: #fff;
		display: flex;
		align-items: center;
		/* justify-content: center; */
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 36rpx;
	}

	.actionsheet-body {
		overflow-y: auto;
		height: 917rpx;
	}

	.actionsheet-view {
		width: 687rpx;
		min-height: 154rpx;
		display: flex;
		border-bottom: 1px solid #E6E6E6;
		margin-left: 32rpx;
		align-items: center;
		justify-content: space-between;
	}

	.title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 36rpx;
		padding: 37rpx 35rpx 0 0;
	}

	.menu {
		width: 112rpx;
		height: 34rpx;
		background: #FFFFFF;
		border: 1px solid #FF6600;
		border-radius: 5rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF6600;
		line-height: 36rpx;
		text-align: center;
		margin: 15rpx 0 37rpx 0;
	}

	.actionsheet-img {
		width: 32rpx;
		height: 31rpx;
		float: right;
	}

	.actionsheet-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 9996;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.mask-show {
		opacity: 1;
		visibility: visible;
	}
</style>