CarRental/pages_store/Operator/ruleMt.vue

<template>
	<view class="page">
		<u-navbar title="收费模版" :border-bottom="false" :background="background" title-color='#000' title-size='36'
			height='45' back-icon-color='#000'></u-navbar>
		<view class="rule_box">
			<view class="title">
				收费设置
			</view>
			<view class="rule_list">
				<view class="unit">
					消费每
				</view>
				<view class="select_box" @click="chooseUnit()" style="margin-right: 32rpx;color: #4297F3 ;">
					{{ timetype(data.rentalUnit) }} <view class="iconfont icon-xiangxia1"></view>
				</view>
				<view class="input_box">
					<input v-model="data.price" placeholder="请输入价格" placeholder-class="input-placeholder" />

				</view>
				<view class="unit">
					元
				</view>
				

			</view>
			
			<view class="rule_list">
				<view class="unit">
					超出每
				</view>
				<view class="select_box" @click="chooseUnit2()" style="margin-right: 32rpx;color: #4297F3 ;">
					{{ timetype(data.outUnit) }} <view class="iconfont icon-xiangxia1"></view>
				</view>
				
				<view class="input_box" >
					<input v-model="data.outPrice" placeholder="请输入价格" placeholder-class="input-placeholder" />

				</view>
				<view class="unit">
					元
				</view>

			</view>
			<view class="title" style="margin-top: 40rpx;">
				价格说明
			</view>
			<view class="explain_box">
				<textarea v-model="data.explain" placeholder="请输入价格说明" placeholder-class="input-placeholder" />
			</view>
		</view>
		<view class="btn_box" @click="sub">
			确定
		</view>
		<u-select v-model="showadd" :list="list" title='选择时间' @confirm="confirm"></u-select>
		<u-select v-model="showadd2" :list="list" title='选择时间' @confirm="confirm2"></u-select>
	</view>
</template>

<script>
export default {
	data() {
		return {
			background: {
				backgroundColor: " ",
			},
			sn: '',
			ruleList: [],
			modelIds: [],
			data: {
				rentalUnit: 'hours',
				price: 0,
				outUnit: 'hours',
				explain: '',
				outPrice: 0,
			},
			showadd: false,
			showadd2: false,
			list: [
				{
					value: 'hours',
					label: '小时'
				},
				{
					value: 'day',
					label: '天'
				},
				{
					value: 'week',
					label: '周'
				},
				{
					value: 'month',
					label: '月'
				},
				{
					value: 'quarter',
					label: '季度'
				},
				{
					value: 'year',
					label: '年'
				}
			]
		}
	},
	onLoad(e) {
		if (e.ruleId) {
			this.data.ruleId = e.ruleId
			this.getRule()
		}
	},
	onShow() {

	},
	methods: {
		getRule() {
			this.$u.get(`/appVerify/rule/${this.data.ruleId}`).then((res) => {
				if (res.code == 200) {
					this.data = res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			})
		},
		sub() {
			if (!this.data.price) {
				uni.showToast({
					title: '请输入价格',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if (!this.data.outPrice) {
				uni.showToast({/////
					title: '请输入超时费用',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if (this.data.ruleId) {
				this.$u.put("/appVerify/rule", this.data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'none',
							duration: 1000
						});
						setTimeout(() => {
							uni.navigateBack()
						}, 1200)
					}
				})
			} else {
				this.$u.post("/appVerify/rule", this.data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'none',
							duration: 1000
						});
						setTimeout(() => {
							uni.navigateBack()
						}, 1200)
					}
				})
			}

		},
		chooseUnit() {
			this.showadd = true
		},
		chooseUnit2() {
			this.showadd2 = true
		},
		confirm(e) {
			this.data.rentalUnit = e[0].value

		},
		confirm2(e) {
			this.data.outUnit = e[0].value
		},
		timetype(time) {
			if (time == 'hours') {
				return '小时'
			} else if (time == 'day') {
				return '天'
			} else if (time == 'week') {
				return '周'
			} else if (time == 'month') {
				return '月'
			} else if (time == 'quarter') {
				return '季度'
			} else if (time == 'year') {
				return '年'
			}
		},
	}
}
</script>

<style lang="scss">
page {
	overflow-y: auto;
	background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uYRs7Cv2Pbp95w3KjGO3');
	background-size: cover;
	/* 背景图片等比缩放以覆盖整个容器 */
	background-position: center;
	/* 背景图片居中显示 */
	background-repeat: no-repeat;
	/* 防止背景图片重复 */
	min-height: 100vh;
	/* 确保页面至少有 100% 的视窗高度，避免高度不足导致无法滚动 */

}

.page {
	.btn_box {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		left: 42rpx;
		bottom: 64rpx;
		width: 672rpx;
		height: 92rpx;
		background: #4297F3;
		box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-weight: 700;
		font-size: 40rpx;
		color: #FFFFFF;
	}

	.rule_box {
		padding: 24rpx 32rpx;
		width: 672rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.07);
		border-radius: 10rpx 10rpx 10rpx 10rpx;

		.title {
			font-weight: 700;
			font-size: 36rpx;
			color: #3D3D3D;
		}

		.explain_box {
			margin-top: 40rpx;
			margin-left: 32rpx;
			padding: 12rpx 16rpx;
			width: 552rpx;
			height: 212rpx;
			background: #EFEFEF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;

			textarea {
				width: 100%;
				height: 100%;
			}
		}

		.rule_list {
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			margin-top: 40rpx;

			.select_box {
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				margin-left: 32rpx;
				padding: 10rpx 20rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 2rpx solid #444C5E;
			}

			.input_box {
				margin-right: 32rpx;
				width: 200rpx;
				height: 60rpx;
				background: #D8D8D8;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				padding: 8rpx 16rpx;
				// .input-placeholder{
				// 	text-align: center;
				// 	font-size: 24rpx;
				// 	color: #999999;
				// }
			}

		}
	}

}
</style>