zhywpt-h5/pages/productSelection/productSelection - 副本.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 productList"
				@click="handleProduct(item)"
				:key="index"
				:class="{ isWing: item.status === '已支付' }"
			>
				<view class="l-info">
					<view class="goods-name">
						{{ item.promoteName }}
					</view>
					<view class="goods-des">
						{{ item.cardTypeArr }}
					</view>
				</view>
				<!-- <view class="r-amount">￥: {{ item.fee * 0.01 }}</view> -->
			</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';
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(e) {
	cusQdOrderVal.value.promoteId = e.promoteId;
	// let { jumpPage } = config.value;
	uni.navigateTo({
		url: '/pages/equitySelection/equitySelection?price=' + e.fee,
		animationType: 'pop-in',
		animationDuration: 500
	});
	// let userAgent = navigator.userAgent.toLowerCase();
	// console.log(userAgent, 'userAgent');
	// if (
	// 	userAgent.indexOf('miniprogram') > -1 ||
	// 	userAgent.indexOf('webview') > -1
	// ) {
	// 	// 小程序环境
	// 	console.log('小程序环境');
	// 	if (userAgent.indexOf('wechat') > -1 || userAgent.indexOf('wx') > -1) {
	// 		// 微信小程序
	// 		console.log('微信小程序');

	// 	}
	// 	//else{
	// 	// 	// this.juti = '其他小程序'
	// 	// }
	// }
}
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>
.product-content {
}
.empty{
	text-align: center;
	margin-top: 40rpx;
}
.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: 0 40rpx;

	.l-info {
		color: #fff;

		.goods-name {
			margin-bottom: 16rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

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

	.r-amount {
		font-size: 38rpx;
		color: #fff;
		padding-left: 20rpx;
		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;
		}
	}
}
</style>