CarRental/pages_store/Operator/chooseRule.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_list">
			<view class="rule_item" v-for="item in ruleList" :key="item.ruleId" @click="choose(item)">
				<view class="rule_item_top">
					<view class="rule_item_top_left">
						收费规则
					</view>
					<view class="rule_item_top_right" @click.stop="choose(item)">
						<view class="choose_icon" v-if="isItemSelected(item)">
							<image src="https://lxnapi.ccttiot.com/bike/img/static/uInnAvscagZBEWdWEUm5"></image>
						</view>
						<view class="nochoose_icon" v-else></view>
					</view>
				</view>
				<view class="txt">
					收费价格：{{ item.price }}元/1{{ timetype(item.rentalUnit) }}
				</view>
				<view class="txt">
					超出费用：超出每{{ timetype(item.outUnit) }}收费{{ item.outPrice }}元
				</view>
			</view>
		</view>
		<view class="btn" @click="confirmSelect">
			确定
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			background: {
				backgroundColor: " ",
			},
			sn: '',
			ruleList: [],
			modelIds: []
		}
	},
	onLoad(e) {
		if (e.modelIds) {
			// 将字符串转换为数组后，再将每项转换为数字
			this.modelIds = e.modelIds.split(',').map(Number);
			console.log(this.modelIds, 'this.modelIds');
		}
	},
	onShow() {
		this.getRuleList()
	},
	methods: {

		isItemSelected(item) {
			return item && item.ruleId && this.modelIds.includes(item.ruleId);
		},
		getRuleList() {
			this.$u.get("/appVerify/ruleList").then((res) => {
				if (res.code == 200) {
					this.ruleList = res.data
				}
			});
		},
		choose(item) {
			if (!item || !item.ruleId) return;

			const ruleId = Number(item.ruleId);  // 转换为数字
			const index = this.modelIds.indexOf(ruleId);
			if (index === -1) {
				// 如果不存在，添加
				this.modelIds.push(ruleId);
			} else {
				// 如果存在，移除
				this.modelIds.splice(index, 1);
			}
			console.log(this.modelIds, 'after choose');  // 调试用
		},

		isItemSelected(item) {
			return item && item.ruleId && this.modelIds.includes(Number(item.ruleId));
		},

		confirmSelect() {
			const pages = getCurrentPages();
			const prevPage = pages[pages.length - 2];

			if (prevPage) {
				// 确保传递的是数字数组
				prevPage.$vm.data.feeRulesIds = this.modelIds;
			}

			uni.navigateBack({
				delta: 1
			});
		},
		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 {
	image {
		width: 750rpx;
		height: 1994rpx;
	}

	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 40rpx;
		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: 500;
		font-size: 40rpx;
		color: #FFFFFF;
	}

	.rule_list {
		.rule_item {
			margin: 24rpx auto;
			width: 672rpx;

			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.07);
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			padding: 24rpx 32rpx;

			.txt {
				font-weight: 400;
				font-size: 32rpx;
				color: #3D3D3D;
			}

			.rule_item_top {
				display: flex;
				flex-wrap: nowrap;
				margin-bottom: 24rpx;

				.rule_item_top_left {
					font-weight: 400;
					font-size: 32rpx;
					color: #3D3D3D;
				}

				.rule_item_top_right {
					width: 42rpx;
					height: 42rpx;
					margin-left: auto;
					display: flex;
					flex-wrap: nowrap;

					.choose_icon {
						image {
							width: 42rpx;
							height: 42rpx;
						}

					}

					.nochoose_icon {
						width: 37rpx;
						height: 37rpx;
						border: 1rpx solid #3D3D3D;
						border-radius: 50%;
					}
				}
			}
		}

	}
}
</style>