vue-insagent-app/pages/carInsure/customerInterest.vue

<template>
	<view class="cuetomerInterest">
		<view class="shopKeeper mt-2">
			<view class="item dis a-c j-s">
				<view class="dis a-c ">
					<text>优惠金额</text>
				</view>
				<view>{{ `￥${ discounts.toFixed(2) }` }}</view>
			</view>
			<view class="item dis a-c j-s" @click="handleSelectPeople()">
				<view class="dis a-c">
					<text>接收客户</text>
				</view>
				<view class="dis a-c j-s">
					<text>{{ acceptCustomer?`${acceptCustomer.name}-${acceptCustomer.mobile}`:'' }}</text>
					<image src="/static/image/my/right-jiantou.png" mode="" style="width: 15px;height: 15px;"></image>
				</view>
			</view>
		</view>
		<view class="interest">
			<view class="dis a-c j-s">
				<view>客户权益</view>
				<view class="select" @click="handleSelectInterest()">去选择</view>
			</view>
			<view class="tips">您可使用本次订单优惠金额为客户选择价值{{ interestItem.totalPackagePrice }}元的客户权益</view>
		</view>
		<view class="giveUp dis a-c j-s">
			<view>{{ interestItem?interestItem.equityPackageName:'' }}权益包</view>
			<view v-if="interestItem.localEquityPackageAssociationList" @click="handleGiveUp()" style="color: #343EEF;">放弃客户权益</view>
		</view>
		<view class="interestList">
			<view class="interestItem" v-for="(item, index) in interestItem.localEquityPackageAssociationList">
				<view class="dis a-c j-s">
					<view class="name">{{ item.rightsName }}</view>
					<view class="count">{{ item.number }}张</view>
				</view>
				<view class="canUse">使用1家门店</view>
				<view class="dis a-c j-f" style="flex-direction: row;">
					<view class="dis a-c j-s" style="width: calc(100% - 244rpx); background-color: #FFF3F3; height: 50rpx;">
						<view class="money">权益价：{{ item.settlePrice }}元</view>
						<view class="special">市场价{{ item.marketPrice }}元</view>
						<image class="myIcon" src="/static/image/interest/icon.png"></image>
					</view>
					<view class="omit">每单立省{{ item.marketPrice - item.settlePrice }}元</view>
				</view>
			</view>
		</view>
		<uni-popup ref='popup' type="bottom">
			<view class="popup">
				<view class="dis a-c j-c title">
					<view>选择接收客户</view>
					<view class="close" @click="closePopup()">
						<uni-icons type='closeempty' size='16'></uni-icons>
					</view>
				</view>
				<view class="list">
					<view class="dis a-c j-s radio" v-for="(item, index) in paramsObj.option" @click='handleAcceptCustomer(item, index)'>
						<view>
							<view>{{ item.type }}</view>
							<view>{{ `${item.name}-${item.mobile}` }}</view>
						</view>
						<radio :value="item.identifyNumber" :checked="acceptIndex === index" />
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniIcons from '../../components/uni-icons/components/uni-icons/uni-icons.vue'
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				paramsObj: null,
				acceptCustomer: null,
				acceptIndex: '',
				discounts: 0,
				interestItem: {
					localEquityPackageAssociationList: []
				}
			}
		},
		async onLoad(params) {
			this.paramsObj = JSON.parse(params.params)
			if(params.params) {
				let res = await this.$http.post('/equity/equityInfo', {
					pageNum: 1,
					pageSize: 10,
					companyId: this.paramsObj.companyId
				})
				if(res.code == 200) {
					let obj = res.data.feeOrderNewVo.exportFee.find(a => a.insuranceType === '合计')
					this.discounts = obj.totalAmount
					if(res.data.equityInfoVo) {
						this.interestItem = res.data.equityInfoVo
					} else {
						this.interestItem = res.data.pageResult.content.reduce((max, obj) => Math.max(max, obj.totalPackagePrice), -Infinity)
					}
					if(res.data.equity) {
						if(res.data.equity.receiveName && res.data.equity.receivePhone) {
							this.acceptCustomer = {
								name: res.data.equity.receiveName,
								mobile: res.data.equity.receivePhone,
								identifyNumber: res.data.equity.receiveIdentify
							}
						} else {
							this.acceptCustomer = null
						}
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: "error",
						duration: 3000
					});
				}
			}
		},
		methods: {
			handleSelectInterest() {
					if(this.acceptCustomer) {
						let params = JSON.stringify({
						...this.paramsObj,
						accept: { ...this.acceptCustomer }
					})
					uni.navigateTo({
						url: `/pages/carInsure/interest?params=${params}`
					})
				} else {
					uni.showToast({
						title: '请选择接收人',
						duration: 2000,
						icon: 'error'
					})
				}
			},
			handleGiveUp() {
				this.$http.post(`/equity/delEquity?companyId=${this.paramsObj.companyId}`).then(res => {
					if(res.code === 200) {
						let obj = res.data.feeOrderNewVo.exportFee.find(a => a.insuranceType === '合计')
						this.discounts = obj.totalAmount
						if(res.data.equityInfoVo) {
							this.interestItem = res.data.equityInfoVo
						} else {
							this.interestItem = res.data.pageResult.content.reduce((max, obj) => Math.max(max, obj.totalPackagePrice), -Infinity)
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						});
					}
				})
				this.interestItem.localEquityPackageAssociationList = []
			},
			handleSelectPeople() {
				this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
			},
			handleAcceptCustomer(item, index) {
				this.acceptIndex = index
				this.acceptCustomer = item
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	.cuetomerInterest{
		width: 100%;
		height: calc(100vh - 88rpx);
		background-color: #F8FAFE;
		overflow-y: auto;
		.shopKeeper {
			background-color: #ffffff;
			.item {
				padding: 25rpx 30rpx;
				color: #333;
				font-size: 28rpx;
				border-top: 1px solid #EEEEEE;
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		.interest{
			padding: 20rpx 30rpx;
			margin: 20rpx 0;
			background-color: #ffffff;
			color: #333333;
			font-size: 33rpx;
			.tips{
				text-align: left;
				color: #666666;
				font-size: 29rpx;
			}
			.select{
				background-color: #0052FF;
				color: #ffffff;
				padding: 4rpx 18rpx;
				border-radius: 4rpx;
				font-size: 29rpx;
			}
		}
		.giveUp{
			padding: 0 30rpx;
		}
		.interestList{
			padding: 20rpx 30rpx;
			margin-top: 20rpx;
			background-color: #ffffff;
			.interestItem{
				box-shadow: 0rpx 0rpx 17rpx 0rpx rgba(0,0,0,0.1);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				padding: 30rpx 20rpx;
				font-size: 31rpx;
				color: #333333;
				.count{
					font-size: 29rpx;
					color: #FF4141 ;
				}
				.canUse{
					font-size: 24rpx;
					color: #999999;
					margin: 10rpx 0;
				}
				.money{
					color: #FF4141;
					margin-right: 26rpx;
					padding-left: 10rpx;
				}
				.special{
					color: #FF4141;
					font-size: 24rpx;
				}
				.myIcon{
					width: 38rpx;
					height: 50rpx;
				}
				.omit{
					background-color: #FF4141;
					color: #ffffff;
					width: 244rpx;
					text-align: center;
				}
			}
		}
		.peoplePopup{
			height: 300rpx;
			background-color: #ffffff;
		}
		.popup{
			width: 100%;
			height: 600rpx;
			background-color: #ffffff;
			.title{
				padding: 27rpx 0;
				color: #333333;
				font-size: 34rpx;
				position: relative;
				.close{
					position: absolute;
					top: 20rpx;
					right: 20rpx;
				}
			}
			.list{
				height: calc(100% - 100rpx);
				overflow-y: auto;
				.radio{
					padding: 28rpx 20px;
					border-top: 1px solid #eeeeee;
				}
			}
		}
	}
</style>