zhapp/pages/quote/selectDriving.vue

<template>
	<view class="page">
		<!-- 头部吸顶区域 -->
		<u-sticky zIndex="999" customNavHeight="0">
			<uni-NavBar headerTitle="选择驾意险" background="#fff" :isSlot="false" :rightIcon="false">
			</uni-NavBar>
		</u-sticky>
		<view class="body">
			<view class="drivingItem dis f-c j-s" v-for="(item,index) in dirvingList" :key="index">
				<text class="title">{{item.productName}} </text>
				<view class="dis a-c j-s mt-2">
					<text class="sum">￥{{item.premium}}</text>
					<u-number-box v-model="item.quantity" :min="item.selectedStatus == 2 ? 1 : 0">
						<view slot="minus" class="minus dis a-c j-c ">
							<u-icon name="minus" size="12" color="#333" bold></u-icon>
						</view>
						<text slot="input" class="input">
							{{item.quantity}}
						</text>
						<view slot="plus" class="plus dis a-c j-c ">
							<u-icon name="plus" color="#333" size="12" bold></u-icon>
						</view>
					</u-number-box>
				</view>

			</view>
		</view>
		<view class="footer dis a-c j-s">
			<view class="dis a-end">
				<text>￥</text>
				<text>{{totalCount}}</text>
			</view>
			<view class="btn dis a-c j-c " @click="submit">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 0,
				dirvingList: [],
			}
		},
		onShow() {

		},
		computed: {
			totalCount() {
				const total = this.dirvingList.reduce((sum, item) => sum + (item.quantity * item.premium), 0);
				return total
			}
		},
		onLoad(options) {
			if (options) {
				this.dirvingList = JSON.parse(options.list);
			}

		},
		methods: {
			submit() {
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.accidentalDrivingVo = this.dirvingList.filter(val => val.quantity > 0); //替换特约
				uni.navigateBack(-1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
		height: 100%;
	}

	.page {
		background-color: #f8f8f8;
		height: 100%;
	}

	.body {
		padding: 20rpx 30rpx 166rpx;
		box-sizing: border-box;

		.drivingItem {
			padding: 25rpx 30rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			margin-bottom: 20rpx;

			.title {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}

			.sum {
				font-size: 30rpx;
				color: #333;
			}
		}
	}

	.minus {
		padding: 6rpx;
		box-sizing: border-box;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 1rpx solid #FDE935;
	}

	.input {
		font-size: 30rpx;
		color: #333;
		padding: 0 20rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.plus {
		padding: 6rpx;
		box-sizing: border-box;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		background-color: #FDE935;
		border: 1rpx solid #FDE935;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 25rpx 30rpx 55rpx;
		box-sizing: border-box;
		background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 254, 245, 0.8) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		backdrop-filter: blur(12rpx);

		text:first-child {
			font-size: 28rpx;
			color: #FF540A;
			font-weight: bold;
		}

		text:last-child {
			font-size: 42rpx;
			color: #FF540A;
			font-weight: bold;
			line-height: 1.1;
		}

		.btn {
			width: 65%;
			background: #FDE935;
			border: 1rpx solid #FDE935;
			padding: 18rpx 20rpx;
			box-sizing: border-box;
			border-radius: 58rpx 58rpx 58rpx 58rpx;
			font-size: 36rpx;
			color: #1F1F1F;
			margin-left: 90rpx;
		}

	}
</style>