zhywpt-h5/pages/equitySelection/equitySelection - 副本 (2).vue

<template>
	<view style="height: 100%">
		<custom-header :back="false" title="选择权益"></custom-header>
		<view class="product-content" v-if="selectEquity.equityId">
			<scroll-view scroll-y="true" style="height: 100%">
				<view class="content-title">{{ selectEquity.productName }}</view>
				<view class="content-price">价格：￥{{ handleAmount(price) }}</view>
				<view class="content-desc">权益简介：</view>
				<u-parse
					:html="selectEquity.productIntro"
					style="padding-left: 10rpx"
				></u-parse>
			</scroll-view>
		</view>
		<view class="empty-con" v-else>
			<u-empty text="暂未选择权益" mode="data"></u-empty>
		</view>
		<view class="bottom-btn">
			<!-- 			<u-button
				@click="isPopupShow = true"
				:ripple="true"
				type="success"
				shape="circle"
				class="item-btn"
			>
				选择权益
			</u-button> -->
			<view class="l-icon" @click="isPopupShow = true">
				<u-icon name="shopping-cart"></u-icon>
				<view class="icon-text">
					{{ selectEquity.equityId ? selectEquity.productName : '选择权益' }}
				</view>
			</view>
			<u-button
				class="item-btn"
				@click="handleConfirm"
				:ripple="true"
				shape="circle"
			>
				确认申办该权益产品
			</u-button>
		</view>
		<u-popup mode="bottom" v-model="isPopupShow" height="60%">
			<view style="font-size: 40rpx; padding: 20rpx; text-align: center">
				选择权益
			</view>
			<view class="popup-content">
				<scroll-view scroll-y="true" style="height: 100%">
					<u-cell-group>
						<u-cell-item
							v-for="(item, index) in rightsInterests"
							:title="item.productName"
							:value="handleAmount(price)"
							:key="index"
							@click="handleProduct(item)"
							:class="{ noClick: item.isClick === 1 }"
						></u-cell-item>
					</u-cell-group>
				</scroll-view>
			</view>
		</u-popup>
	</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);
let promoteId =ref('')
//获取页面配置
onLoad((opin) => {
	initData(opin, -2).then((data) => {
		console.log(data);
		if (opin) {
			if(opin.price){
				price.value = opin.price;
			}
			if(opin.promoteId){
				promoteId.value = opin.promoteId
			}
		}
		
		getList(data.qdOrder);
		// isShow.value = true
		delete data.config.tableConfig;
		config.value = Object.assign(data.config, config.value);
	});
});
// const content = ref(
	'<p>测试</p><p><img src="https://qtzl.etcjz.cn/sett-minio/20240320/ef510b6e9bb94cbd8c63d56a_image.png"></p><p>测试</p><p><img src="https://qtzl.etcjz.cn/sett-minio/20240320/ef510b6e9bb94cbd8c63d56a_image.png"></p><p>测试</p><p><img src="https://qtzl.etcjz.cn/sett-minio/20240320/ef510b6e9bb94cbd8c63d56a_image.png"></p><p>测试</p><p><img src="https://qtzl.etcjz.cn/sett-minio/20240320/ef510b6e9bb94cbd8c63d56a_image.png"></p><p>测试</p><p><img src="https://qtzl.etcjz.cn/sett-minio/20240320/ef510b6e9bb94cbd8c63d56a_image.png"></p><p>测试</p><p><img src="https://qtzl.etcjz.cn/sett-minio/20240320/ef510b6e9bb94cbd8c63d56a_image.png"></p><p>测试</p><p><img src="https://qtzl.etcjz.cn/sett-minio/20240320/ef510b6e9bb94cbd8c63d56a_image.png"></p><p>测试</p><p><img src="https://qtzl.etcjz.cn/sett-minio/20240320/ef510b6e9bb94cbd8c63d56a_image.png"></p><p>测试</p><p><img src="https://qtzl.etcjz.cn/sett-minio/20240320/ef510b6e9bb94cbd8c63d56a_image.png"></p>'
// );
// 权益数据
const rightsInterests = ref([]);
// 获取权益
function getList(qdOrder) {
	let query = {
		promoteId: promoteId.value
	};
	// 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 || [];
		}
	});
}
const selectEquity = ref<any>({});
// 权益选择
function handleProduct(e) {
	isPopupShow.value = false;
	if (e.isClick) {
		uni.showModal({
			title: '提示',
			content: e.noClickCase + '请选择其他权益'
		});
		// return;
	}
	selectEquity.value = e;
	// cusQdOrderVal.value.equityId = e.equityId;
	// let { jumpPage } = config.value;
	// uni.navigateTo({
	// 	url: '/' + jumpPage,
	// 	animationType: 'pop-in',
	// 	animationDuration: 500
	// });
	// return
}
const isPopupShow = ref(false);
function handleConfirm() {
	if (!selectEquity.value.equityId) {
		uni.showModal({
			title: '提示',
			content: '请选择权益后点击确认',
			success() {
				isPopupShow.value = true;
			}
		});
		return;
	}
	if (selectEquity.value.isClick) {
		uni.showModal({
			title: '提示',
			content: selectEquity.value.noClickCase + '请选择其他权益',
			success() {
				isPopupShow.value = true;
			}
		});
		return;
	}
	cusQdOrderVal.value.equityId = selectEquity.value.equityId;
	let { jumpPage } = config.value;
	uni.navigateTo({
		url: '/' + jumpPage,
		animationType: 'pop-in',
		animationDuration: 500
	});
}
</script>
<style lang="scss" scoped>
.product-content {
	height: calc(100% - 45px);
	font-size: 32rpx;
	color: #666;
	padding: 20rpx;
	padding-bottom: 140rpx;
}
.content-title {
	font-size: 50rpx;
	font-weight: bold;
	color: #222;
}
.content-price {
	font-size: 36rpx;
	padding-top: 20rpx;
}
.content-desc {
	font-size: 36rpx;
	padding: 20rpx 0;
}
.bottom-btn {
	position: fixed;
	bottom: 20rpx;
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 20rpx;
	background: #fff;
	.l-icon {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 44rpx;
		width: 30%;
		.icon-text {
			text-align: center;
			width: 100%;
			font-size: 26rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
		}
	}
	.item-btn {
		width: 55%;
		// display: flex;
		// justify-content: flex-end;
		margin-right: 20rpx;
		background-color: #a2d7fa;
	}
}
.popup-content {
	height: calc(100% - 80rpx);
	padding-bottom: 30rpx;
	.noClick {
		background-color: #eee !important;
		color: #ccc;
	}
}
.empty-con {
	text-align: center;
	margin-top: 40rpx;
}
</style>