zhywpt-sp/subpackage/orders/equity/equityList.vue

<template>
	<navBar title="权益选购" :scrollTop="scrollTop" navbgClass="nav-bgXin" fontColor='#fff'></navBar>
	<view class="container">
		<view class="bg">
			<image mode="aspectFit" :src="`${$imgUrl}issuance/bj.png`" class="img"></image>
		</view>
		<view class="content">
			<view class="item-box" v-for='item in currentProductList.equityList'>
				<image mode="aspectFit" :src="`${$imgUrl}issuance/l-car.png`" class="l-img"></image>
				<view class="r-info">
					<view class="t-title">
						{{item.productName}}
					</view>
					<view class="tip-list">
						<view class="tip-item" v-for='ele in item.labels'>
							{{ele}}
						</view>
					</view>
					<view class="b-con">
						<view class="l-fee">
							<view class="t-price">
								<text>￥</text>
								<text class='fee'>{{item.discountPrice * 0.01 }}</text>
							</view>
							<view class="b-price">
								￥{{item.originalPrice * 0.01 }}
							</view>
						</view>
						<view class="r-btn" @click="savaHandle(item)">
							立即购买
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import navBar from "@/components/nav-bar/nav-bar2.vue";
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onPageScroll,
		onShow
	} from "@dcloudio/uni-app";
	import {
		getItem,
		setItem
	} from "@/utils/storage.ts";
	const sendParams = ref({})
	onLoad((e) => {
		if (e) {
			sendParams.value = e
		}
		currentProductList.value = getItem('currentProductList')
	})
	const currentProductList = ref({})
	const scrollTop = ref(0); //滚动距离
	//监听页面滚动
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
	const savaHandle = (val, idx) => {
		console.log("vAL", val)

		setItem("clientFee", currentProductList.value.clientFee);
		// setItem("promoteId", val.promoteId);
		// 产品金额+权益金额
		let fee = Number(currentProductList.value.fee) + Number(val.discountPrice);

		uni.navigateTo({
			url: `/subpackage/orders/equity/interestsList?equityId=${val.equityId}&userType=${sendParams.value.userType}&vanType=${sendParams.value.vanType}&cardType=${sendParams.value.cardType}&isValueCard=${sendParams.value.isValueCard}&fee=${fee}&signAgencyId=${currentProductList.value['deviceType']}&productId=${currentProductList.value['productId']}`,
		});
	};
</script>

<style scoped lang='scss'>
	.container {
		height: 100vh;
		width: 100%;
		position: relative;

		.bg {
			position: absolute;
			width: 100%;

			.img {
				height: 405rpx;
				width: 100%;
			}
		}

		.content {
			width: 100%;
			position: absolute;
			top: 365rpx;
			border-radius: 30rpx 30rpx 0 0;
			background-color: #fff;
			height: calc(100% - 365rpx);
			padding: 40rpx 30rpx 0;
			box-sizing: border-box;

			.item-box {
				display: flex;
				align-items: center;
				margin-bottom: 50rpx;

				.l-img {
					flex-shrink: 0;
					width: 180rpx;
					height: 164rpx;
				}

				.r-info {
					margin-left: 20rpx;
					flex: 1 1 auto;
					height: 164rpx;

					.t-title {
						font-family: SourceHanSansSC, SourceHanSansSC;
						font-size: 30rpx;
						color: #111111;
					}

					.tip-list {
						display: flex;
						margin: 10rpx 0;

						.tip-item {
							border-radius: 6rpx;
							border: 1rpx solid #CCB375;
							padding: 5rpx 8rpx;
							font-size: 20rpx;
							color: #CCB375;
							margin-right: 10rpx;
						}
					}

					.b-con {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.t-price {
							font-family: SourceHanSansSC, SourceHanSansSC;
							font-size: 22rpx;
							color: #CE1717;

							.fee {
								font-size: 30rpx;
							}
						}

						.b-price {
							text-decoration-line: line-through;
							font-size: 22rpx;
							color: #999999;
						}

						.r-btn {
							border-radius: 25rpx;
							background-color: #CCB375;
							font-family: MicrosoftYaHeiUI;
							font-size: 24rpx;
							color: #FFFFFF;
							width: 140rpx;
							height: 50rpx;
							text-align: center;
							line-height: 50rpx;
						}
					}

				}
			}
		}
	}
</style>