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'>
				<view class="left-amount">
					￥: {{ item.fee * 0.01 }}
				</view>
				<view class="r-info">
					<view class="goods-name">
						{{ item.promoteName }}
					</view>
					<view class="goods-des">
						{{ item.cardTypeArr }}
					</view>
				</view>
			</view>
		</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>
	</view>
</template>
<script setup lang='ts'>
	import {
		unifyTemplate
	} from '@/hooks/unifyTemplate'
	import {
		nextTick,
		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);
			if (data.qdOrder.vanType === undefined) {
				// 不存在客户类型，开启弹窗
				setTimeout(() => {
					show.value = true
				}, 200)
			} else {
				setTimeout(() => {
					show.value = false
				}, 200)
				getList(data.qdOrder.vanType > 2 ? 2 : data.qdOrder.vanType)
			}
			// isShow.value = true
			delete data.config.tableConfig
			config.value = Object.assign(data.config, config.value)
		})
	})
	const productList = ref([])
	// 获取产品
	function getList(vanType) {
		let data = {
			type: vanType,
			agencyId: qdOrderVal.value.promoterChannelNum
		}
		request('58ac9653fdb24ee08409f94dde70dfa6', {
			data
		}).then((res) => {
			if (res.statusCode === 0) {
				const data = JSON.parse(res.bizContent);
				console.log(res, data);
				let cardTypeArr = ''
				let opt = {
					1: '记账卡',
					2: '储值卡',
					3: '记存卡'
				}
				data.csmsnPromoteDistPro.forEach(ele => {
					ele.cardType.forEach(item => {
						cardTypeArr = cardTypeArr + ' ' + opt[item]
						console.log(opt[item]);
					})
					ele.cardTypeArr= cardTypeArr
				})
				productList.value = data.csmsnPromoteDistPro || []

			}
		})
	}
	// 客货类型选择
	function handleVanType(type) {
		console.log(type);
		cusQdOrderVal.value.vanType = type
		getList(type)
		show.value = false
		// let {
		// 	jumpPage
		// } = config.value
		// uni.navigateTo({
		// 	url: '/' + jumpPage,
		// 	animationType: 'pop-in',
		// 	animationDuration: 500
		// })
	}
	// 产品选择
	function handleProduct(e) {
		cusQdOrderVal.value.promoteId = e.promoteId
		let {
			jumpPage
		} = config.value
		uni.navigateTo({
			url: '/' + jumpPage,
			animationType: 'pop-in',
			animationDuration: 500
		})
		// return
		// request(commitInterface || '198172b1858d474fa8e35225d65014d7', {
		// 	data,
		// }).then((res) => {
		// 	if (res.statusCode === 0) {
		// 		uni.navigateTo({
		// 			url: '/' + jumpPage,
		// 			animationType: 'pop-in',
		// 			animationDuration: 500
		// 		})
		// 	}
		// })
	}
</script>
<style lang='scss' scoped>
	.product-content {}

	.product-car {
		margin: 30rpx 30rpx 0;
		width: calc(100% - 60rpx);
		height: 200rpx;
		border-radius: 20rpx;
		background-color: #73acf9;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left-amount {
			font-size: 70rpx;
			color: #fff;
			padding-left: 20rpx;
		}

		.r-info {
			padding-right: 20rpx;
			text-align: right;
			color: #fff;

			.goods-name {
				margin-bottom: 20rpx;
				font-size: 32rpx;
			}

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

	.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>