kaiguan-zfb/page_fenbao/statulist/taocanlist/index.vue

<template>
	<view class="page">
		<u-navbar title="套餐列表" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff" title-size='36'
			height='58'></u-navbar>
		<view class="box">
			<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" :key="index" @click="click(item)" @open="open" :options="options">
				<view class="boxlist" @click="btnedit(item)">
						<view class="toptime">
							<text>{{item.name}}（{{item.value}}分钟）</text> <text>￥{{item.price}}</text>
						</view>
						<view class="bumday">
							<text class="shi">{{item.description}}</text></text>
						</view>
				</view>
			</u-swipe-action>
			<view class="" v-if="list.length == 0" style="color: #ccc;font-size: 36rpx;margin-top: 200rpx;text-align: center;">
				该设备暂无套餐
			</view>
			<view class="xinz" @click="btnadd">
				新增套餐
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				deviceId:''
			};
		},
		onLoad(option) {
			console.log(option);
			this.deviceId = option.id
		},
		onShow() {
			this.getlist()
		},
		methods: {
			
			getlist(){
				this.$u.get(`/app/suit/listByDeviceId/${this.deviceId}`).then((res) => {
					if (res.code == 200) {
					    this.list = res.data
					}
				});
			},
			
			btnedit(item){
				uni.navigateTo({
					url:'/page_fenbao/statulist/taocanlist/addtaocan/index?id=' + this.deviceId + '&suitId=' + item.suitId
				})
			},
			
			click(item) { 
			    console.log(item);
				this.$u.delete(`/app/suit/${item.suitId}`).then((res) => {
					if (res.code == 200) {
					    this.$u.toast(`删除成功`);
						this.getlist()
					}
				});
				
			},
			open(index) {
				// this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			},
			btnadd(){
				uni.navigateTo({
					url:'/page_fenbao/statulist/taocanlist/addtaocan/index?id=' + this.deviceId
				})
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #8883F0 0%, rgba(255, 255, 255, 0) 100%);
	}

	.page {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;

		.box {
			width: 750rpx;
			height: 1440rpx;
			background: #F4F5F7;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding: 50rpx;
			.xinz{
				width: 368rpx;
				height: 84rpx;
				background: #8883F0;
				filter: blur(0px);
				text-align: center;
				line-height: 84rpx;
				font-size: 36rpx;
				color: #FFFFFF; 
				position: fixed;
				bottom: 76rpx;
				left: 50%;
				transform: translateX(-50%);
				border-radius: 50rpx;
			}
            .boxlist{
				padding: 40rpx 42rpx;
				box-sizing: border-box;
				.toptime{
					font-size: 32rpx;
					color: #000000;
					display: flex;
					justify-content: space-between;
				}
				.bumday{
					margin-top: 10rpx;
					text{
						font-size: 32rpx;
						color: #95989D;
					}
				}
			}
			/deep/ .u-swipe-action {
				margin-top: 30rpx;
				border-radius: 20rpx;
				width: 654rpx;
				height: 182rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
				filter: blur(0px);
				border: 0;
			}

			/deep/ .u-swipe-del {
				height: 190rpx;
			}
		}
	}
</style>