kaiguan-zfb/page_fenbao/statulist/taocanlist/addtaocan/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='50'></u-navbar>
		<view class="box">
			<view class="list">
				<view class="" style="display: flex;
                        justify-content: space-between;
                        width: 100%;
                        align-items: center;">
					<view class="title">
						套餐名称
					</view>
					<input type="text" style="padding-right: 28rpx;box-sizing: border-box;" v-model="name" placeholder="输入套餐名称" />
				</view>
				<view class="" style="display: flex;
                        justify-content: space-between;
                        width: 100%;
                        align-items: center;margin-top: 30rpx;">
					<view class="title">
						价格（元）
					</view>
					<input type="text" style="padding-right: 28rpx;box-sizing: border-box;" v-model="price" placeholder="输入价格" />
				</view>
			<view class="" style="display: flex;
                        justify-content: space-between;
                        width: 100%;
                        margin-top: 30rpx;
						height: 50rpx;
						line-height: 50rpx;">
				<view class="title">
					通电时长
				</view>
				<view class="" style="display: flex;justify-content: space-between;position: relative;">
					<input type="number" style="height: 50rpx;
						line-height: 50rpx;" v-model="value" placeholder="输入通电时长" />
					<view class="picker" @click="btnxz">
						{{array[index]}} <u-icon v-if="arrflag" name="arrow-down" color="#000" size="24"></u-icon>
						<u-icon v-else name="arrow-right" color="#000" size="24"></u-icon>
					</view>
					<view class="arr_list" v-if="arrflag">
						<view class="arr_item" v-for="(item,index) in array" :key="index" @click="btnxl(index)">
							{{item}}
						</view>
					</view>
				</view>
			</view>
				<view class="title" style="margin-top: 30rpx;margin-bottom: 20rpx;">
					详细说明
				</view>
				<textarea v-model="description" placeholder="输入说明解释" auto-height="true" />
			</view>

			<!-- 应用设备 -->
			<view class="shebei">
				<view class="sbtit">应用设备</view>
				<view class="sbarr">
					<view class="sbarrval" v-for="(item,index) in deviceList" :key="index">
						<text style="">{{item.deviceName}}</text> 
						<text style="font-size: 45rpx;" @click="sbdel(item.deviceId)">×</text>
					</view>
				</view>
				<view class="btnsbadd" @click="btnaddsb">
					+
				</view>
			</view>

			<view class="trues" @click="btnadd">
				{{title}}
			</view>
			<view v-if="title == '修改'" class="truess" @click="btndel">
				删除
			</view>
			<view v-else class="trueqx" @click="btnqx">
				取消
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				deviceId: '',
				name: '',
				value: '',
				description: '',
				price: '',
				title: '',
				suitId: '',
				array: ['天', '时', '分钟', '秒'],
				index: 2,
				timewz: '',
				arrflag: false,
				bgc: {
					backgroundColor: "#8883f0",
				},
				deviceList:[],
				
				list: '',
				loading: false,
				disabled: false,
				btnWidth: 180,
				show: false,
				activeid: '',
				checkboxes: [],
				tcidlist: [],
				titaoc: [],
				newobj: [],
				listflag:false
			}
		},
		onLoad(option) {
			if (option.suitId) {
				this.deviceId = option.id
				this.title = '修改'
				this.suitId = option.suitId
			} else {
				this.deviceId = option.id
				this.title = '确定'
			}
		},
		onShow() {
			if(uni.getStorageSync('tcidlist')){
				this.deviceList = uni.getStorageSync('tcidlist')
			}
			setTimeout(()=>{
				if (this.suitId) {
					this.gettaocan(this.suitId)
				} else {
					
				}
			},1)
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '创想物联',
				path: '/pages/shouye/index'
			}
		},

		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创想物联',
				query: '',
				path: '/pages/shouye/index'
			}
		},
		onUnload(){
			uni.removeStorageSync('tcidlist')
		},
		 onHide(){
			 uni.removeStorageSync('tcidlist')
		 },
		methods: {
			// 点击删除套餐里面的设备
			sbdel(id){
				if(this.title == '确定'){
					
					this.deviceList = this.deviceList.filter(item => item.deviceId !== id)
				}else{
					const indexInTcidList = this.tcidlist.indexOf(id);
					if (indexInTcidList !== -1) {
						this.tcidlist.splice(indexInTcidList, 1);
					} else {
						this.tcidlist.push(id);
					}
					let that = this
					uni.showModal({
						title: '提示',
						content: '您是否要将应用此套餐设备删除？',
						success: function(res) {
							if (res.confirm) {
								let data = {
									deviceIds: that.tcidlist,
									suitId: that.suitId
								}
								that.$u.put(`/app/suit`, data).then((res) => {
									if (res.code == 200) {
										uni.showToast({
											title: res.msg,
											icon: 'success',
											duration: 1000,
										})
										that.gettaocan(that.suitId)
									}
								})
							} else if (res.cancel) {
								
							}
						}
					})
				}
			},
			
			btnqx(){
				uni.removeStorageSync('tcidlist')
				uni.navigateBack()
			},
			// bindPickerChange(e) {
			// 	this.index = e.detail.value
			// },
			// 跳转选择设备
			btnaddsb(){
				uni.navigateTo({
					url:'/page_components/shebeixz?id=' + this.suitId + '&title=' + this.title 
				})
			},
			btnxl(index) {
				this.index = index
				this.arrflag = false
			},
			btnxz() {
				if (this.arrflag == true) {
					this.arrflag = false
				} else {
					this.arrflag = true
				}
			},

			gettaocan(suitId) {
				this.$u.get(`/app/suit/${suitId}`).then((res) => {
					if (res.code == 200) {
						this.name = res.data.name
						this.price = res.data.price
						this.value = res.data.value
						this.description = res.data.description
						this.deviceList = res.data.deviceList
						this.index = Number(res.data.timeUnit) - 1
						this.deviceList.forEach(item => {
							this.tcidlist.push(item.deviceId)
						})
					}
				})
			},
			btndel() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '您确定要删除该套餐吗？',
					success: function(res) {
						if (res.confirm) {
							that.$u.delete(`/app/suit/${that.suitId}`).then((res) => {
								if (res.code == 200) {
									uni.showToast({
										title: '删除成功',
										icon: 'success',
										duration: 1000,
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 1000)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 1000,
									})
								}
							})
						} else if (res.cancel) {
				
						}
					}
				})
			},

			btnadd() {
				let regex = /^\d+(\.\d{1,2})?$/
				let regexs = /^\d+$/
				if (this.name == '') {
					uni.showToast({
						title: '套餐名称不能为空',
						icon: 'none',
						duration: 1000,
					})
				} else if (this.price == '') {
					uni.showToast({
						title: '价格不能为空',
						icon: 'none',
						duration: 1000,
					})
				} else if (!regex.test(this.price)) {
					uni.showToast({
						title: '价格必须是数字且小数点只能两位',
						icon: 'none',
						duration: 2000,
					})
				} else if (this.value == '') {
					uni.showToast({
						title: '时长不能为空',
						icon: 'none',
						duration: 1000,
					})
				} else if (!regexs.test(this.value)) {
					uni.showToast({
						title: '时长必须是整数',
						icon: 'none',
						duration: 2000,
					})
				} else if (this.description == '') {
					uni.showToast({
						title: '详细说明不能为空',
						icon: 'none',
						duration: 1000,
					})
				} else {
					if (this.title == '确定') {
						let arrs = [...this.deviceList.map(item => item.deviceId)]
						let data = {
							// deviceId: this.deviceId,
							name: this.name,
							value: this.value,
							price: this.price,
							description: this.description,
							timeUnit: Number(this.index) + 1,
							deviceIds:arrs
						}
						this.$u.post('/app/suit', data).then((res) => {
							if (res.code == 200) {
								uni.removeStorageSync('tcidlist')
								uni.showToast({
									title: '新建套餐成功',
									icon: 'success',
									duration: 1000,
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1000)
							}
						})
					} else {
						let data = {
							suitId: this.suitId,
							// deviceId: this.deviceId,
							name: this.name,
							value: this.value,
							price: this.price,
							description: this.description,
							timeUnit: Number(this.index) + 1
						}
						this.$u.put('/app/suit', data).then((res) => {
							if (res.code == 200) {
								uni.showToast({
									title: '修改套餐成功',
									icon: 'success',
									duration: 1000,
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1000)
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1000,
								})
							}
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-title {
		padding-bottom: 22rpx;
	}

	/deep/ .u-icon__icon {
		padding-bottom: 22rpx;
	}

	.shebei {
		width: 654rpx;
		max-height: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
		-webkit-filter: blur(0px);
		filter: blur(0px);
		margin: auto;
		border-radius: 30rpx;
		padding: 28rpx 38rpx;
		box-sizing: border-box;
		margin-top: 150rpx;

		.sbtit {
			font-size: 32rpx;
			color: #000000;
			font-weight: 600;
		}
		.sbarr{
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			justify-content: space-between;
			.sbarrval{
				width: 48%;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #8883F0;
				color: #fff;
				text-align: right;
				border-radius: 30rpx;
				margin-top: 20rpx;
				font-size: 30rpx;
				text-align: right;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				padding: 0 20rpx;
				box-sizing: border-box;
			}
		}
		.btnsbadd{
			width: 48%;
			height: 80rpx;
			line-height: 70rpx;
			background-color: #8883F0;
			color: #fff;
			text-align: center;
			border-radius: 30rpx;
			margin-top: 20rpx;
			font-size: 65rpx;
		}
		
	}

	page {
		background: linear-gradient(180deg, #8883F0 0%, rgba(255, 255, 255, 0) 100%);
	}
     @keyframes fadeIn {
       from { opacity: 0; }
       to { opacity: 1; }
     }
	.arr_list {
		position: absolute;
		top: 50rpx;
		right: -20rpx;
		background: #FFFFFF;
		width: 140rpx;
		height: 245rpx;
		box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
		padding: 5rpx 0;
		box-sizing: border-box;
		border-radius: 10rpx;
		z-index: 99;
        opacity: 0;
          animation-name: fadeIn;
          animation-duration: .5s; 
          animation-fill-mode: forwards;
		.arr_item:last-child {
			border: none !important;
		}

		.arr_item {
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			border-bottom: 1px solid #ccc;
		}
	}

	.picker {
		// margin-top: 30rpx;
		margin-left: 20rpx;
	}

	.page {
		width: 750rpx;
		.box {
			width: 750rpx;
			background: #F4F5F7;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding-top: 32rpx;
            padding-bottom: 400rpx;
            box-sizing: border-box;
            height: 100vh;
            overflow: scroll;
            overflow: hidden;
			.list {
				width: 654rpx;
				max-height: 100%;
				background: #FFFFFF;
				box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
				filter: blur(0px);
				margin: auto;
				border-radius: 30rpx;
				padding: 30rpx 38rpx;
				box-sizing: border-box;

				.title {
					font-size: 32rpx;
					color: #000000;
					font-weight: 600;
				}

				input {
					// margin-top: 30rpx;
					// padding-left: 100rpx;
					text-align: right;
				}
			}

			.trues {
				width: 290rpx;
				height: 84rpx;
				background: #8883F0;
				filter: blur(0px);
				text-align: center;
				line-height: 84rpx;
				position: fixed;
				bottom: 76rpx;
				left: 75%;
				transform: translateX(-50%);
				font-size: 36rpx;
				color: #FFFFFF;
				border-radius: 50rpx;
			}

			.truess {
				width: 290rpx;
				height: 84rpx;
				background: red;
				filter: blur(0px);
				text-align: center;
				line-height: 84rpx;
				position: fixed;
				bottom: 76rpx;
				right: 33%;
				transform: translateX(-50%);
				font-size: 36rpx;
				color: #FFFFFF;
				border-radius: 50rpx;
			}
			.trueqx {
				width: 290rpx;
				height: 84rpx;
				background: #ccc;
				filter: blur(0px);
				text-align: center;
				line-height: 84rpx;
				position: fixed;
				bottom: 76rpx;
				right: 33%;
				transform: translateX(-50%);
				font-size: 36rpx;
				color: #FFFFFF;
				border-radius: 50rpx;
			}
		}
	}
</style>