CarRental/pages_store/Operator/RuleList.vue

<template>
	<view class="page">
		<u-navbar title="收费模板" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='45'></u-navbar>
		<view class="modelCard" v-for="(item, index) in list" :key="index">
			<view class="tit">
				【收费规则】
			</view>
			<view class="line" style="margin-bottom: 18rpx;"></view>
			<view class="info">

				<view class="lis">
					<view class="info_li">
						收费价格：{{ item.price }}元/1{{ timetype(item.rentalUnit) }}
					</view>
					<view class="info_li">
						超出费用：超出每{{ timetype(item.outUnit) }}收费{{ item.outPrice }}元
					</view>
					<view class="info_li" v-if="item.explain">
						简介： {{ item.explain }}
					</view>

				</view>
			</view>
			<view class="line" style="margin-top: 26rpx;"></view>
			<view class="btn_li">
				<view class="btn1" @click="del(item)">
					删除
				</view>
				<view class="btn2" @click="todetail(item)">
					编辑
				</view>
			</view>
		</view>
		<view class="btn" @click="addmodel()">
			添加收费模版

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

<script>
export default {
	data() {
		return {
			bgc: {
				backgroundColor: "#fff",
			},
			list: []
		}
	},
	onShow() {
		this.getModelList()
	},
	methods: {
		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 '年'
			}
		},
		addmodel() {
			uni.navigateTo({
				url: '/pages_store/Operator/ruleMt'
			})
		},
		del(item) {
			// 显示确认删除的提示框
			uni.showModal({
				title: '确认删除',
				content: '确定删除该车型？',
				success: (res) => {
					if (res.confirm) {
						// 如果用户点击了确认，执行删除操作
						this.$u.delete(`/appVerify/rule/` + item.ruleId).then((res) => {
							if (res.code == 200) {
								this.getModelList(); // 刷新列表
							} else {
								// 处理接口返回错误的情况
								uni.showToast({
									title: '删除失败，请稍后再试',
									icon: 'none'
								});
							}
						}).catch(error => {
							// 处理接口请求失败的情况
							uni.showToast({
								title: '请求失败，请稍后再试',
								icon: 'none'
							});
						});
					} else if (res.cancel) {
						// 用户取消删除操作
						console.log('用户取消删除');
					}
				}
			});
		},
		todetail(item) {
			// uni.navigateTo({
			// 	url:'/pages_store/Operator/modelMt?modelId='+item.modelId
			// })
			uni.navigateTo({
				url: '/pages_store/Operator/ruleMt?ruleId=' + item.ruleId
			})
		},
		getModelList() {

			this.$u.get(`/appVerify/ruleList`).then((res) => {
				if (res.code == 200) {
					this.list = res.data
				} else {
					// 处理接口返回错误的情况
				}
			}).catch(error => {
				// 处理接口请求失败的情况
			});
		},
	}
}
</script>

<style lang="scss" scoped>
page {}

.page {
	padding-bottom: 170rpx;

	.modelCard {
		margin-top: 22rpx;
		width: 750rpx;
		padding-bottom: 12rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.info {
			margin-left: 42rpx;
			display: flex;
			flex-wrap: nowrap;
			// align-items: center;
			align-items: stretch;

			/* 让左右两边的高度一致 */
			.img {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #EFEFEF;
				border-radius: 10rpx;
				width: 218rpx;

				min-height: 134rpx;

				image {
					width: 173.59rpx;
					height: 133.22rpx;
				}
			}

			.lis {
				margin-left: 60rpx;

				.info_li {
					margin-top: 8rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #808080;

					span {
						color: #808080;
					}
				}

			}

		}

		.tit {
			padding: 24rpx 32rpx;

			font-weight: 600;
			font-size: 32rpx;
			color: #3D3D3D;
		}

		.line {
			width: 100%;
			height: 1rpx;
			background: #D8D8D8;
		}

		.btn_li {
			margin-top: 16rpx;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;

			.btn1 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50%;
				height: 67rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #FF1C1C;
				border-right: 1rpx solid #FF1C1C;
			}

			.btn2 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50%;
				height: 67rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #3D3D3D;
				// border-right: 1rpx solid #FF1C1C ;
			}
		}

		.txt_li {

			margin-top: 8rpx;
			width: 100%;
			display: flex;
			flex-wrap: nowrap;

			.li {

				width: 50%;
				padding-left: 28rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #808080;

				span {
					color: #808080;
				}
			}
		}
	}

	.btn {
		position: fixed;
		left: 40rpx;
		bottom: 48rpx;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		width: 672rpx;
		height: 100rpx;
		background: #4C97E7;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		font-weight: 500;
		font-size: 40rpx;
		color: #FFFFFF;
	}
}
</style>