zhywpt-h5/pages/equitySelection/equitySelection - 副本.vue

<template>
	<view>
		<custom-header :back="false" title="选择权益"></custom-header>
		<view style="padding: 20rpx 0 30rpx" class="product-content">
			<view
				class="product-car"
				v-for="(item, index) in rightsInterests"
				@click="handleProduct(item)"
				:key="index"
				:class="{ noClick: item.isClick === 1 }"
			>
				<view class="l-info">
					<view class="goods-name">
						{{ item.productName }}
					</view>
					<view class="goods-des">
						<u-collapse
							:head-style="{ fontSize: '28rpx', color: '#fff' }"
							arrow-color="#fff"
						>
							<u-collapse-item :title="item.productIntro">
								<view class="collapse-item">
									{{ item.productIntro }}
								</view>
							</u-collapse-item>
						</u-collapse>
					</view>
				</view>
				<!-- <view class="r-amount">￥: {{ handleAmount(item.discountPrice) }}</view> -->
				<view class="r-amount">￥{{ handleAmount(price) }}</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
import { unifyTemplate } from '@/hooks/unifyTemplate';
import { nextTick, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import handleAmount from '@/utils/handleAmount.js';
import { request } from '@/utils/network/request';
let config = ref<any>({
	submitName: '下一步',
	titleWidth: 160
});
const {
	CustomHeader, //头部组件
	initData, //初始化数据
	qdOrderVal, //qdOrder中数据 ref
	cusQdOrderVal
} = unifyTemplate(); //初始化数据
let show = ref(false);
let price = ref(0);
//获取页面配置
onLoad((opin) => {
	initData(opin, -2).then((data) => {
		console.log(data);
		if (opin && opin.price) {
			price.value = opin.price;
		}
		getList(data.qdOrder);
		// isShow.value = true
		delete data.config.tableConfig;
		config.value = Object.assign(data.config, config.value);
	});
});

// 权益数据
const rightsInterests = ref([]);
// 获取权益
function getList(qdOrder) {
	let query = {
		promoteId: cusQdOrderVal.value.promoteId
	};
	// request('58ac9653fdb24ee08409f94dde70dfa6', {
	console.log('请求参数', query);
	request('56db1aa8b9854f2f8c2428f3393e5045', {
		data: query
	}).then((res) => {
		if (res.statusCode === 0) {
			const bizContent = JSON.parse(res.bizContent);
			console.log(res, bizContent, '权益数据');
			rightsInterests.value = bizContent.data || [];
		}
	});
}
// 权益选择
function handleProduct(e) {
	if (e.isClick) {
		uni.showModal({
			title: '提示',
			content: e.noClickCase + '请选择其他权益',
		});
		return;
	}
	cusQdOrderVal.value.equityId = e.equityId;
	let { jumpPage } = config.value;
	uni.navigateTo({
		url: '/' + jumpPage,
		animationType: 'pop-in',
		animationDuration: 500
	});

}
</script>
<style lang="scss" scoped>
.product-car {
	margin: 30rpx 30rpx 0;
	width: calc(100% - 60rpx);
	// height: 170rpx;
	border-radius: 20rpx;
	background-color: #57aef9;
	display: flex;
	justify-content: space-between;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	align-items: center;
	padding: 20rpx 40rpx 10rpx;

	&.noClick {
		background-color: #bbb;
	}
	.l-info {
		color: #fff;
		width: calc(100% - 120rpx);
		.goods-name {
			// margin-bottom: 16rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

		.goods-des {
			font-size: 26rpx;
			width: 100%;
		}
	}

	.r-amount {
		flex-shrink: 0;
		font-size: 30rpx;
		color: #fff;
		font-weight: bold;
	}
}

.select-content {
	display: flex;
	align-items: center;
	padding: 30rpx;

	.fen {
		width: 2rpx;
		height: 150rpx;
		background-color: #eee;
	}

	.select-item {
		flex: 1 1 auto;
		text-align: center;

		.select-img {
			width: 120rpx;
			height: 120rpx;
			margin-bottom: 20rpx;
		}
	}
}
.collapse-item {
	font-size: 26rpx;
	color: #fff;
}
</style>