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 equityList' -->
				<image mode="aspectFit" :src="`${$imgUrl}issuance/l-car.png`" class="l-img"></image>
				<view class="r-info">
					<view class="t-title">
						{{equityList.productName}}
					</view>
					<view class="tip-list">
						<view class="tip-item" v-for='ele in equityList.labels'>
							{{ele}}
						</view>
					</view>
					<view class="b-con">
						<view class="l-fee">
							<view class="t-price">
								<text>￥</text>
								<!-- <text class='fee'>{{equityList.discountPrice * 0.01 }}</text> -->
								<text class='fee'>{{sendParams.amount * 0.01 }}</text>
							</view>
							<!-- <view class="b-price">
								￥{{equityList.originalPrice * 0.01 }}
							</view> -->
						</view>
						<view class="r-btn" @click="savaHandle(equityList)">
							立即购买
						</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";
	import {
		navTo
	} from "@/utils/utils";
	import {
		pageDetail
	} from "@/utils/network/api.js";
	import {
		requestNew
	} from "@/utils/network/request.js";
	const sendParams = ref({})
	onLoad((e) => {
		if (e) {
			sendParams.value = e
		}
		currentProductList.value = getItem('currentProductList')
		getPageData();
	})
	const currentProductList = ref({})
	const equityList = ref([]);
	const scrollTop = ref(0); //滚动距离
	//监听页面滚动
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});

	const getPageData = () => {
		let data = {
			"customerId": "",
			"releaseId": currentProductList.value.releaseId
		}
		const options = {
			data: data,
			method: "POST",
			showLoading: true,
		};
		requestNew(pageDetail, options).then((res) => {
			console.log("产品列表", res);
			equityList.value = res;
		});
	}

	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);
		navTo(
			`/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['releaseId']}&productIntro=${JSON.stringify(val.productIntro)}`
		)
		// 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>