zhywpt-h5/pages/productSelection/productSelection.vue

<template>
	<view class="bgbeijing">
		<!-- <custom-header :back="false" title="选择产品"></custom-header> -->
		<view class="content-title">请选择办理产品类型</view>
		<view class="product-content">
			<scroll-view scroll-y="true" style="height: 100%">
				<view style="padding-top: 30rpx"></view>
				<view
					class="product-car"
					v-for="item in productList"
					:key="item.promoteId"
				>
					<view class="product-car-top">
						<view class="car-title">{{ item.promoteName }}</view>
						<view class="car-type">{{ item.cardTypeArr }}</view>
					</view>
					<!-- <view class="equity-car" @click="handleProduct(item, equityItem)"> -->
					<view
						class="equity-car"
						@click="handleProduct(item, equityItem)"
						v-for="(equityItem, index) in item.releaseProductStandards
							.equityList"
						:key="index"
						:class="{ noClick: equityItem.isClick === 1 }"
					>
						<view class="l-info">
							<view class="info-top">
								<view class="equity-title">
									{{ equityItem.productName }}
									<!-- 途虎无忧套餐 -->
								</view>
								<u-icon
									name="arrow-right"
									size="28"
									style="flex-shrink: 0"
								></u-icon>
							</view>
							<view class="selling-point">{{ equityItem.sellingPoint }}</view>
							<!-- <view class="selling-point">尊享套餐330元汽车养美服务</view> -->
						</view>
						<view class="r-price">
							￥{{ handleAmount(equityItem.discountPrice) }}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="empty" v-if="!loaing && productList.length === 0">
			暂无办理产品，请敬请期待
		</view>
		<u-modal
			v-model="show"
			:show-confirm-button="false"
			title="请选择办理车辆类型"
		>
			<view class="slot-content">
				<view class="select-content">
					<view class="select-item" @click="handleVanType(1)">
						<image
							:src="fileURL + 'image/index/icon-car.png'"
							mode="aspectFit"
							class="select-img"
						></image>
						<view>客车办理</view>
					</view>
					<view class="fen"></view>
					<view class="select-item" @click="handleVanType(2)">
						<image
							:src="fileURL + 'image/index/icon-truck.png'"
							mode="aspectFit"
							class="select-img"
						></image>
						<view>货车办理</view>
					</view>
				</view>
			</view>
		</u-modal>
		<u-modal
			v-model="isUserTypeshow"
			:show-confirm-button="false"
			title="请选择ETC用户类型"
		>
			<view class="slot-content">
				<view class="select-content">
					<view class="select-item" @click="handleUserType(1)">
						<image
							:src="fileURL + 'image/index/icon-personal.png'"
							mode="aspectFit"
							class="select-img"
						></image>
						<view>个人办理</view>
					</view>
					<view class="fen"></view>
					<view class="select-item" @click="handleUserType(2)">
						<image
							:src="fileURL + 'image/index/icon-unit.png'"
							mode="aspectFit"
							class="select-img"
						></image>
						<view>单位办理</view>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>
<script setup lang="ts">
import { unifyTemplate } from '@/hooks/unifyTemplate';
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { request } from '@/utils/network/request';
import { fileURL } from '@/utils/network/api.js';
import handleAmount from '@/utils/handleAmount.js';
let config = ref<any>({
	submitName: '下一步',
	titleWidth: 160
});
const {
	CustomHeader, //头部组件
	initData, //初始化数据
	qdOrderVal, //qdOrder中数据 ref
	cusQdOrderVal
} = unifyTemplate(); //初始化数据
let show = ref(false);
//获取页面配置
onLoad((opin) => {
	initData(opin, -2).then((data) => {
		console.log(data);
		// getLoti()
		if (data.qdOrder.vanType === undefined) {
			// 不存在客户类型，开启弹窗
			setTimeout(() => {
				show.value = true;
			}, 200);
		} else {
			setTimeout(() => {
				show.value = false;
			}, 200);
			handleUserTypeShow();
		}
		// isShow.value = true
		delete data.config.tableConfig;
		config.value = Object.assign(data.config, config.value);
	});
});
const productList = ref([]);
const loaing = ref(true);
// 获取产品
function getList() {
	// 请求数据
	let data = {
		// type: 1,
		// agencyId: '52010188919'
		agencyId: qdOrderVal.value.promoterChannelNum,
		vanType: qdOrderVal.value.vanType || cusQdOrderVal.value.vanType,
		userType: qdOrderVal.value.userType || cusQdOrderVal.value.userType
	};
	// request('58ac9653fdb24ee08409f94dde70dfa6', {
	console.log('请求参数', data);
	request('f01002fa6ded4162afaec1139e503641', {
		data
	})
		.then((res) => {
			if (res.statusCode === 0) {
				const data = JSON.parse(res.bizContent);
				console.log(res, data, '产品数据');

				let opt = {
					1: '记账卡',
					2: '储值卡',
					3: '记存卡'
				};
				let proList = data.list || [];
				proList.forEach((ele) => {
					let cardTypeArr = '';
					ele.releaseProductStandards.productStandards.cardType.forEach(
						(item) => {
							cardTypeArr = cardTypeArr + ' ' + opt[item];
							console.log(opt[item]);
						}
					);
					ele.cardTypeArr = cardTypeArr;
				});
				productList.value = proList;
			}
		})
		.finally(() => {
			loaing.value = false;
		});
}
// 客货类型选择
function handleVanType(type) {
	console.log(type);
	cusQdOrderVal.value.vanType = type;
	handleUserTypeShow();
	show.value = false;
}

let isUserTypeshow = ref(false);
function handleUserTypeShow() {
	if (!qdOrderVal.value.userType) {
		isUserTypeshow.value = true;
	} else {
		getList();
	}
}
// 用户类型选择
function handleUserType(val) {
	cusQdOrderVal.value.userType = val;
	isUserTypeshow.value = false;
	getList();
}

// 产品选择
function handleProduct(product, equityItem) {
	// let { jumpPage } = config.value;
	if (equityItem.isClick) {
		uni.showModal({
			title: '提示',
			content: equityItem.noClickCase + '请选择其他权益'
		});
		return;
	}
	cusQdOrderVal.value.promoteId = product.promoteId;
	cusQdOrderVal.value.productIntro = equityItem.productIntro;
	uni.navigateTo({
		url:
			'/pages/equitySelection/equitySelection?equityId=' + equityItem.equityId,
		animationType: 'pop-in',
		animationDuration: 500
	});
}
function getLoti() {
	console.log('获取经纬度111');
	uni.getLocation({
		type: 'gcj02',
		// type: 'wgs84',
		accuracy: 'best',
		isHighAccuracy: true,

		success: function (res) {
			console.log('当前位置的经度高德：' + res.longitude);
			console.log('当前位置的纬度高德：' + res.latitude);
			console.log(res);
		},
		fail: (error) => {
			console.error('err:', error);
		}
	});
}
</script>
<style lang="scss" scoped>
.content-title {
	font-size: 38rpx;
	font-weight: bold;
	height: 510rpx;
	box-sizing: border-box;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 10rpx;
}
.product-content {
	padding: 0 44rpx 30rpx;
	height: calc(100% - 512rpx);
	box-sizing: border-box;
	overflow: hidden;
}
.empty {
	text-align: center;
	margin-top: 40rpx;
}
.product-car:nth-child(n + 3) {
	margin-top: 40rpx;
}
.product-car {
	overflow: hidden;
	padding: 50rpx 26rpx;
	// border: 1rpx solid rgba(187, 187, 187, 1);
	background-color: rgba(255, 255, 255, 1);
	border-radius: 14rpx;

	.product-car-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 30rpx;
		.car-title {
			font-size: 45rpx;
			font-weight: bold;
		}
	}
	.equity-car {
		&.noClick {
			background-color: #bbb;
			color: #fff;
		}
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #fff;
		background-color: #4095e5;
		margin-top: 30rpx;
		padding: 30rpx 20rpx;
		border-radius: 16rpx;
		.l-info {
			flex-grow: 1;
			.info-top {
				display: flex;
				align-items: center;
				font-size: 34rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
				.equity-title {
					margin-right: 5rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
			}
			.selling-point {
				font-size: 26rpx;
			}
		}
		.r-price {
			font-size: 34rpx;
			color: #ffbf6b;
			font-weight: bold;
			padding-left: 20rpx;
			flex-shrink: 0;
		}
	}
}
.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;
		}
	}
}
</style>