powerbank/page_user/jifei.vue

<template>
	<view class="page">
		<u-navbar title="计费规则" :border-bottom="false" :background="bgc" title-color='#000' back-icon-color="#000" title-size='36' height='50'></u-navbar>
		<view class="box">
			<view class="listobj">
				<view class="inps">
					<view class="">计费模式</view>
					<view class=""><u-radio-group>
							<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name"
								active-color="#25CE88" :disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group></view>
				</view>
				<view class="inp">
					计费金额 <input type="text" v-model="jfmoney" placeholder="请输入计费金额" /> 元/小时
				</view>
				<!-- <view class="inp">
					 封顶金额 <input type="text" v-model="rmoney" placeholder="请输入总封顶金额" /> 元/天
				</view> -->
				<view class="inp">
					<text style="margin-right: 28rpx;">总封顶</text> <input type="text" v-model="fdmoney" placeholder="请输入封顶金额" /> 元
				</view>
				<view class="inp">
					免费时长 <input type="text" v-model="time" placeholder="请输入免费时长" /> 分钟
				</view>
			</view>
			<view class="baocun" @click="btnbc">
				保存
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vipflag: false,
				list: [{
						name: '半小时',
						disabled: false
					},
					{
						name: '一小时',
						disabled: false
					}
				],
				value: '',
				storeId: '',
				jfmoney: '',
				fdmoney: '',
				time: '',
				rmoney:''
			}
		},
		onLoad(option) {
			this.storeId = option.storeId
		},
		methods: {
			radioChange(e) {
				if (e == '半小时') {
					this.value = 1
				} else if (e == '一小时') {
					this.value = 2
				}
				console.log(e, this.value, this.storeId);
			},
			btnbc() {
				if(this.value == ''){
					uni.showToast({
						title: '请选择计费模式',
						icon: 'none',
						duration: 1000
					})
				}else if (this.jfmoney == '') {
					uni.showToast({
						title: '计费金额不能为空',
						icon: 'none',
						duration: 1000
					})
				} else if (this.fdmoney == '') {
					uni.showToast({
						title: '封顶金额不能为空',
						icon: 'none',
						duration: 1000
					})
				} else if (this.time == '') {
					uni.showToast({
						title: '免费时长不能为空',
						icon: 'none',
						duration: 1000
					})
				} else {
					let data = {
						storeId: this.storeId,
						feeMode: this.value,
						feePrice: this.jfmoney,
						feeMaxPrice: this.fdmoney,
						feeFreeTime: this.time,
					}
					this.$u.put('/agent/store', data).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '保存成功',
								icon: 'success',
								duration: 1000
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						} else if (res.code == 500) {
							uni.showToast({
								title: '请输入整数',
								icon: 'none',
								duration: 1000
							})
						}
					})
				}


			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-title,
	/deep/ .uicon-nav-back {
		padding-bottom: 22rpx;
	}
	
	page {
		background: linear-gradient(180deg, #25CE88 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-top: 40rpx;

			.mask {
				width: 750rpx;
				height: 100vh;
				background: #000000;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 0.2;
				z-index: 1;
				position: fixed;
				top: 0;
				left: 0;
			}

			.tanc {
				width: 610rpx;
				height: 282rpx;
				background: #FFFFFF;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				position: fixed;
				top: 628rpx;
				left: 50%;
				transform: translateX(-50%);
				z-index: 2;

				.tit {
					width: 100%;
					text-align: center;
					margin-top: 28rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #3D3D3D;
				}

				input {
					width: 504rpx;
					height: 62rpx;
					background: #EEEEEE;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					margin: auto;
					margin-top: 22rpx;
					padding-left: 20rpx;
				}

				.xian {
					width: 610rpx;
					height: 2rpx;
					background: #D8D8D8;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					margin-top: 26rpx;
				}

				.anniu {
					display: flex;
					justify-content: space-between;
					height: 98rpx;

					text {
						padding: 24rpx;
						text-align: center;
						box-sizing: border-box;
						font-weight: 500;
						font-size: 36rpx;
						color: #3D3D3D;
						display: inline-block;
						width: 100%;
						height: 100rpx;
					}
				}
			}

			.baocun {
				width: 584rpx;
				height: 90rpx;
				background: linear-gradient(270deg, #54DAA1 0%, #19CD82 100%);
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				margin: auto;
				text-align: center;
				line-height: 90rpx;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
				position: fixed;
				bottom: 458rpx;
				left: 50%;
				transform: translateX(-50%);
			}

			.listobj {
				width: 680rpx;
				height: 450rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin: auto;
				padding: 22rpx 48rpx;
				box-sizing: border-box;

				.vipry {
					margin-top: 106rpx;
					text-align: center;
					overflow-y: scroll;
					height: 220rpx;

					.tit {
						font-size: 32rpx;
						color: #3D3D3D;
					}

					.listvip {
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;
						color: #808080;
						margin-top: 28rpx;
					}
				}

				.xian {
					width: 680rpx;
					height: 2rpx;
					background: #F0F0F0;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					position: fixed;
					left: 37rpx;
					margin-top: 76rpx;
				}

				.addvip {
					display: flex;
					justify-content: space-between;
					margin-top: 74rpx;

					view {
						width: 250rpx;
						height: 86rpx;
						background: #D8D8D8;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						text-align: center;
						line-height: 86rpx;
						font-size: 32rpx;
						color: #3D3D3D;
					}
				}

				.inps {
					display: flex;
					justify-content: space-between;
					margin-top: 28rpx;
					font-size: 28rpx;
					color: #3D3D3D;
					line-height: 50rpx;
				}

				.inp {
					display: flex;
					margin-top: 28rpx;
					font-size: 28rpx;
					color: #3D3D3D;
					line-height: 50rpx;

					input {
						width: 313rpx;
						height: 50rpx;
						margin-left: 20rpx;
						margin-right: 20rpx;
						background: #F0F0F0;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						padding-left: 14rpx;
					}
				}
			}
		}
	}
</style>