smartswrtch-app/page_geren/addhuiyuan.vue

<template>
	<view>
		<u-navbar :title="tit" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='45'></u-navbar>
		<view class="box">
			<view class="ul">
				<view class="name">
					<text>*</text>会员卡名称
				</view>
				<input type="text" v-model="name" placeholder="请输入会员卡名称"/>
			</view>
			<view class="ul">
				<view class="name">
					会员卡原价/元
				</view>
				<input type="number" v-model="yuanjia" placeholder="请输入会员卡原价"/>
			</view>
			<view class="ul">
				<view class="name">
					<text>*</text>会员卡现价/元
				</view>
				<input type="number" v-model="xianjia" placeholder="请输入会员卡现价"/>
			</view>
			<view class="ul">
				<view class="name">
					<text>*</text>会员卡时长/天
				</view>
				<input type="number" v-model="qixian" placeholder="请输入会员卡时长"/>
			</view>
			<view class="ul">
				<view class="name">
					<text>*</text>会员卡折扣/折
				</view>
				<input type="text" v-model="zhekou" placeholder="请输入会员卡折扣"/>
			</view>
			<view class="ul">
				<view class="name">
					<text>*</text>会员卡使用次数/次
				</view>
				<input type="number" v-model="shangxian" placeholder="请输入会员卡使用次数"/>
			</view>
			<view class="ul" @click="show = true">
				<view class="name">
					是否上架
				</view>
				<view class="" style="color: rgb(128, 128, 128);">
					{{shangjia}}
					<u-icon name="arrow-right" color="rgb(128, 128, 128)" size="28"></u-icon>
				</view>
			</view>
			<view class="ul" @click="shows = true">
				<view class="name">
					使用限制
				</view>
				<view class="" style="color: rgb(128, 128, 128);">
					{{xianzhi}}
					<u-icon name="arrow-right" color="rgb(128, 128, 128)" size="28"></u-icon>
				</view>
			</view>
			<view class="ul" v-if="xianzhi != '不限制'">
				<view class="name">
					频率限制/次
				</view>
				<input type="number" v-model="cishu" placeholder="请输入限制次数"/>
			</view>
			<view class="ul" style="border: none;">
				<view class="name">
					描述
				</view>
				<input type="text" v-model="miaoshu" placeholder="请输入描述"/>
			</view>
		</view>
		
		<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
		<u-select v-model="shows" :list="lists" @confirm="confirms"></u-select>
		
		<view class="anniu">
			<view class="qx" @click="btnqx">
				{{deltit}}
			</view>
			<view class="qd" @click="btnadd">
				{{addtit}}
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
			    bgc: {
			    	backgroundColor: '#fff'
			    },
				tit:'',
				deltit:'',
				addtit:'',
				name:'',
				yuanjia:'',
				xianjia:'',
				qixian:'',
				zhekou:'',
				shangxian:'',
				day:'',
				miaoshu:'',
				cishu:'',
				show: false,
				list: [
					{
						value: '1',
						label: '上架'
					},
					{
						value: '2',
						label: '下架'
					}
				],
				shows: false,
				lists: [
					{
						value: '1',
						label: '不限制'
					},
					{
						value: '2',
						label: '每周'
					},
					{
						value: '3',
						label: '每30天'
					}
				],
				shangjia:'上架',
				shangjiaid:1,
				xianzhi:'不限制',
				xianzhiid:1,
				storeId:'',
				id:'',
				huiyuanobj:{}
			}
		},
		onLoad(option) {
			this.storeId = option.storeId
		    if(option.id){
				this.tit = '修改会员卡'
				this.deltit = '删除'
				this.addtit = '修改'
				this.id = option.id
				this.getxq()
			}else{
				this.tit = '新增会员卡'
				this.deltit = '取消'
				this.addtit = '新增'
			}
		},
		methods: {
			// 查询会员详情
			getxq(){
				this.$u.get(`/mch/vipLevel/${this.id}`).then((res) => {
					if (res.code == 200) {
						this.huiyuanobj = res.data
						this.xianjia = res.data.price
						this.qixian = res.data.time
						this.miaoshu = res.data.description
						this.xianzhiid = res.data.limitType
						if(res.data.limitType == 1){
							this.xianzhi = '不限制'
						}else if(res.data.limitType == 2){
							this.xianzhi = '每周'
						}else if(res.data.limitType == 3){
							this.xianzhi = '每30天'
						}
						this.cishu = res.data.limitCount
						this.name = res.data.name
						this.yuanjia = res.data.originalPrice
						this.shangxian = res.data.limitTotal
						this.mchId = res.data.mchId
						this.zhekou = res.data.discount
						this.shangjiaid = res.data.status
						if(res.data.status == 1){
							this.shangjia = '上架'
						}else{
							this.shangjia = '下架'
						}
					}
				})
			},
			// 点击是否上架
			confirm(e){
				this.shangjia = e[0].label
				this.shangjiaid = e[0].value
			},
			// 点击是否限制
			confirms(e){
				this.xianzhi = e[0].label
				this.xianzhiid = e[0].value
			},
			// 点击取消或者删除
			btnqx(){
				if(this.deltit == '取消'){
					uni.navigateBack()
				}else{
					let that = this
					uni.showModal({
						title: '温馨提示',
						content: '您是否要删除此会员卡？',
						showCancel: true,
						success: function(res) {
							if (res.confirm) {
								that.$u.delete(`/mch/vipLevel/${that.id}`).then(res =>{
									if(res.code == 200){
										uni.showToast({
											title: '删除成功',
											icon: 'success',
											duration: 2000
										})
										setTimeout(()=>{
											uni.navigateBack()
										},1000)
									}
								})
							} else if (res.cancel) {
							    console.log('取消')
							}
						}
					})
				}
			},
			// 点击新增或者修改
			btnadd(){
				let re = /^\d*\.?\d+$/
				if(!re.test(this.zhekou)){
					uni.showToast({
						title: '请输入整数或者小数',
						icon: 'none',
						duration: 2000
					})
				}else if(this.name.length > 7){
					uni.showToast({
						title: '名称过长，字符不能超过七位',
						icon: 'none',
						duration: 2000
					})
				}else if(this.addtit == '新增'){
					let data = {
						price:this.xianjia,
						time:this.qixian,
						description:this.miaoshu,
						limitType:this.xianzhiid,
						limitCount:this.cishu,
						name:this.name,
						originalPrice:this.yuanjia,
						limitTotal:this.shangxian,
						mchId:this.mchId,
						discount:this.zhekou,
						storeId:this.storeId,
						status:this.shangjiaid
					}
					this.$u.post(`/mch/vipLevel`,data).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '新增成功',
								icon: 'success',
								duration: 2000
							})
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}else{
					let data = {
						id:this.id,
						price:this.xianjia,
						time:this.qixian,
						description:this.miaoshu,
						limitType:this.xianzhiid,
						limitCount:this.cishu,
						name:this.name,
						originalPrice:this.yuanjia,
						limitTotal:this.shangxian,
						mchId:this.mchId,
						discount:this.zhekou,
						storeId:this.storeId,
						status:this.shangjiaid
					}
					this.$u.put(`/mch/vipLevel`,data).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '修改成功',
								icon: 'success',
								duration: 2000
							})
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}
			}
		}
	}
</script>																				

<style lang="less">
	.anniu{
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 0 60rpx;
		box-sizing: border-box;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 50rpx;
		.qx{
			width: 300rpx;
			height: 80rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 80rpx;
			background-color: #ccc;
			font-size: 32rpx;
		}
		.qd{
			width: 300rpx;
			height: 80rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 80rpx;
			background-color: #8883F0;
			font-size: 32rpx;
			color: #fff;
		}
	}
	.box{
		width: 680rpx;
		margin: auto;
		margin-top: 40rpx;
		border-radius: 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		.ul{
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 120rpx;
			line-height: 120rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #efefef;
			.sx{
				max-width: 460rpx; 
				display: flex;
				align-items: center;
				input{
					width: 60rpx; 
					height: 30rpx;
					border-bottom: 1px solid #efefef;
					text-align: right;
					margin-left: 20rpx;
					margin-right: 20rpx;
				}
			}
			.name{
				font-size: 28rpx;
                display: flex;
				align-items: center;
				text{
					color: red;
					margin-right: 10rpx;
				}
			}
			input{
				height: 120rpx;
				line-height: 120rpx;
				text-align: right;
			}
		}
	}
	
</style>