zhapp/pages/reward/customerBenefit.vue

<template>
	<view class="page">
		<u-sticky zIndex="999" customNavHeight="0">
			<uni-NavBar headerTitle="客户权益" background="#fff" :isSlot="false" :backKeySlot="true" :rightSlot="true"
				borderBottom="1rpx solid #eee" @backKeyChange="backKeyChange">
			</uni-NavBar>
			<!-- 客户信息 -->
			<view class="" style="background-color: #f8f8f8;">
				<view class="customerInfo dis a-c " @click="readOnly=='1'?'':receiverShow=true">
					<text class="title">接收客户</text>
					<text class="phone">{{customerInfo.name}}-{{customerInfo.mobile}}</text>
					<u-icon name="arrow-right" color="#333" size="12" :bold="true"></u-icon>
				</view>
				<view class="customerInfo  mt-2">
					<view class="dis a-c">
						<text class="title">出单费用</text>
						<text class="phone">￥{{insFeeOrders.totalExportPremium}}</text>
					</view>
					<view class="dis a-c" style="margin: 24rpx 0 ;">
						<text class="title">本次使用</text>
						<view class="editTag dis a-c " v-if="insFeeOrders.totalExportKeepPointPremium==0 &&  !readOnly"
							@click="adjustDiscountAmount">
							<image src="/static/icon/edit.png" mode=""></image>
							<text>修改</text>
						</view>
						<text class="phone">￥{{insFeeOrders.availableAmount}}</text>
					</view>
					<view class="dis a-c" style="margin-bottom: 24rpx;">
						<text class="title">已使用</text>
						<text class="phone">￥{{insFeeOrders.usedAmount}}</text>
					</view>
					<view class="dis a-c mb-1">
						<text class="title">剩余金额</text>
						<text class="phone">￥{{insFeeOrders.remainingAmount}}</text>
					</view>
					<text class="noteText">出单后，计算出可使用金额，录入本次使用金额，可使用该金额为用户购买权益，剩余金额会返回到钱包，可提现。</text>
				</view>
			</view>
		</u-sticky>
		<!-- 选中权益 -->
		<view class="" style="padding-bottom: 226rpx;">
			<view class="content-body mt-2">
				<view class="header dis a-c j-s mb-2">
					<text class="title">权益套餐</text>
					<view class="select-btn" v-if="!readOnly" @click="selectedBenefits('insOrderRightsList',1)">去选择
					</view>
				</view>
				<text class="noteText">使用可用金额，可为接收人选购权益套餐 和 权益单品，2选1</text>
				<!-- 权益列表 -->
				<view class="view-card dis f-c " v-for="(item,index) in insOrderRightsPackageList" :key="index">
					<!-- 权益信息 -->
					<view class="dis view-item">
						<!-- 图片 -->
						<image class="image" src="/static/image/banner.png" mode=""></image>
						<view class="content dis f-c j-s">
							<u--text :lines="1" :text="item.equityPackageName" color="#333" size="16" :bold="true"
								style="line-height: 1;flex:0  auto;"></u--text>
							<view class="sum dis a-c  ">
								<!-- 市场价/ 券数量 -->
								<text class="couponCount mr-2" v-if="item.totalNumber">券数量{{item.totalNumber}}张</text>
								<text class="marketPrice">市场价 {{item.totalPackagePrice}}</text>
								<u-number-box v-if="!readOnly" v-model="item.rightsCount" :min="0"
									style="margin-left: auto;"
									@change="val => onRightsCountChange(val, index, 'insOrderRightsPackageList', 'packagePrice',1)"
									:asyncChange="true">
									<view slot="minus" class="numberBoxMinus dis a-c j-c ">
										<u-icon name="minus" size="12" color="#333" bold></u-icon>
									</view>
									<text slot="input" class="numberBoxInput">
										{{ item.rightsCount }}
									</text>
									<view slot="plus" class="numberBoxPlus dis a-c j-c ">
										<u-icon name="plus" color="#333" size="12" bold></u-icon>
									</view>
								</u-number-box>
								<text v-else
									style="margin-left: auto;font-size: 30rpx;color: #333;">x{{item.rightsCount}}</text>
							</view>
							<view class=" dis a-c j-s ">
								<text class="plice">￥{{item.packagePrice}}</text>
								<view class="Detail  dis a-c " @click="rightsDetails(item,index)">
									<text>查看明细</text>
									<u-icon :name="item.vehicleTaxIsExpanded?'arrow-up':'arrow-down'" color="#FFAC1D"
										size="12"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<!-- 明细列表 -->
					<view class="Detail-list"
						v-if="item.vehicleTaxIsExpanded && item.rightsDetailsList && item.rightsDetailsList.length > 0">
						<view class="content">
							<view class="dis view-item" v-for="(DetailsItem, DetailsIndex) in item.rightsDetailsList"
								:key="DetailsIndex">
								<image class="image" :src="DetailsItem.rightsPicture" mode=""
									style="height: 116rpx;width: 116rpx;">
								</image>
								<view class="content dis f-c j-s ">
									<u--text :lines="1" :text="DetailsItem.rightsName" color="#333" size="16"
										:bold="true" style="line-height: 1;flex:0  auto;"></u--text>
									<view class="sum dis a-c  mt-1 mb-1">
										<text class="marketPrice">市场价 {{DetailsItem.marketPrice}}</text>
									</view>
									<text class="plice">￥{{DetailsItem.contractRate}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content-body mt-2">
				<view class="header dis a-c j-s mb-2">
					<text class="title">权益单品</text>
					<view class="select-btn" v-if="!readOnly" @click="selectedBenefits('insOrderRightsPackageList',2)">
						去选择</view>
				</view>
				<text class="noteText">使用可用金额，可为接收人选购权益套餐 和 权益单品，2选1</text>
				<!-- 权益列表 -->
				<view class="view-card dis f-c " v-for="(item,index) in insOrderRightsList" :key="index">
					<!-- 权益信息 -->
					<view class="dis view-item">
						<!-- 图片 -->
						<image class="image" :src="item.rightsPicture" mode=""></image>
						<view class="content dis f-c j-s">
							<u--text :lines="1" :text="item.rightsName" color="#333" size="16" :bold="true"
								style="line-height: 1;flex:0  auto;"></u--text>
							<view class="sum dis a-c  ">
								<!-- 市场价/ 券数量 -->
								<text class="couponCount mr-2" v-if="item.totalNumber">券数量{{item.totalNumber}}张</text>
								<text class="marketPrice">市场价 {{ item.marketPrice}}</text>
								<u-number-box v-if="!readOnly" v-model="item.rightsCount" :min="0"
									style="margin-left: auto;"
									@change="val => onRightsCountChange(val, index, 'insOrderRightsList', 'contractRate',2)"
									:asyncChange="true">
									<view slot="minus" class="numberBoxMinus dis a-c j-c ">
										<u-icon name="minus" size="12" color="#333" bold></u-icon>
									</view>
									<text slot="input" class="numberBoxInput">
										{{ item.rightsCount }}
									</text>
									<view slot="plus" class="numberBoxPlus dis a-c j-c ">
										<u-icon name="plus" color="#333" size="12" bold></u-icon>
									</view>
								</u-number-box>

							</view>
							<view class=" dis a-c j-s ">
								<text class="plice">￥{{item.contractRate}}</text>
								<text v-if="readOnly"
									style="margin-left: auto;font-size: 30rpx;color: #333;">x{{item.rightsCount}}</text>
							</view>
						</view>
					</view>
					<!-- 明细列表 -->
					<view class="Detail-list"
						v-if="item.vehicleTaxIsExpanded && item.rightsDetailsList && item.rightsDetailsList.length > 0">
						<view class="Detail-header"></view>
						<view class="content">
							<view class="dis view-item" v-for="(DetailsItem, DetailsIndex) in item.rightsDetailsList"
								:key="DetailsIndex">
								<image class="image" :src="DetailsItem.rightsPicture" mode=""
									style="height: 116rpx;width: 116rpx;">
								</image>
								<view class="content dis f-c j-s ">
									<u--text :lines="1" :text="DetailsItem.rightsName" color="#333" size="16"
										:bold="true" style="line-height: 1;flex:0  auto;"></u--text>
									<view class="sum dis a-c  mt-1 mb-1">
										<text class="marketPrice">市场价 {{DetailsItem.marketPrice}}</text>
									</view>
									<text class="plice">￥{{DetailsItem.contractRate}}</text>
								</view>
							</view>
						</view>
						<view class="Detail-footer"></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 接收人弹窗 -->
		<uni-Popup :show="receiverShow" @close='receiverShow=false' headerTitle="选择接收客户" overflow="auto"
			maxHeight="580rpx">
			<template #content>
				<view class="overflow">
					<view class="deptselect dis f-c ">
						<u-radio-group v-model="recipientradiovalue" placement="column" iconPlacement="right"
							@change="recipientchange">
							<view class="item dis a-c " v-for="(item, index) in recipientList" :key="index">
								<u-radio activeColor="#FDE935" iconColor='#333' :name="item.title" style="width: 100%;">
									<view class="textregion dis f-c ">
										<text>{{item.title}}</text>
										<text>{{item.name}}-{{item.mobile}}</text>
									</view>
								</u-radio>
							</view>
						</u-radio-group>
					</view>
				</view>

			</template>
		</uni-Popup>
		<!-- 权益优惠金额弹窗 -->
		<uni-Popup :show="discountAmountShow" @close="discountAmountShow=false" :closeable="false"
			:headerTitle="`优惠金额(可用${insFeeOrders.availableAmount})`" overflow="auto" :headerStyle="{fontSize:'36rpx'}"
			maxHeight="980rpx" mode="center" width="90%">
			<template #content>
				<view class="discountAmount">
					<text class="text ">本次订单共计优惠 <text
							style="color: #333;font-weight: bold;">{{insFeeOrders.availableAmount}}</text>元，您可使用部分优惠金额为客户购买车主服务。</text>
					<view class="input-text">
						<view class="dis a-c mt-3 ">
							<text>可用金额</text>
							<text>（{{insFeeOrders.availableAmount}}）</text>
						</view>
						<u--form labelPosition="left" errorType="message" :model="discountAmountForm" :rules="carRules"
							ref="uForm">
							<u-form-item prop="availableAmount">
								<u--input type="number" v-model="discountAmountForm.availableAmount"
									clearable></u--input>
							</u-form-item>
						</u--form>
					</view>
					<view class="btn dis f-c a-c mt-3">
						<u-button type="primary" shape="circle" text="确定" color="#FDE935"
							:customStyle="{color:'#1f1f1f'}" @click="adjustAmount"></u-button>
						<text class="footer-text">修改金额会清空您已选择的客户权益,请谨慎操作</text>
					</view>
				</view>
			</template>
		</uni-Popup>
		<!-- 自定义加载动画 -->
		<global-loading :show="loadingShow" :text="loadingText"></global-loading>
	</view>
</template>

<script>
	import Decimal from 'decimal.js';
	export default {
		data() {
			return {
				loadingShow: true, //加载
				loadingText: '加载中', //加载提示文字
				discountAmountShow: false, //优惠金额弹窗
				recipientradiovalue: "投保人",
				receiverShow: false, //接收人弹窗
				quantity: 0,
				vehicleTaxIsExpanded: false,
				recipientList: [], //接收人列表
				customerInfo: {},
				discountAmountForm: {
					availableAmount: null,
				},
				carRules: {
					availableAmount: [{
							required: true,
							message: '金额不能为空',
							trigger: ['blur', 'change'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								if (parseInt(value) < this.insFeeOrders.availableAmount) {
									return true
								} else {
									return false
								}
							},
							message: '可用金额不能大于或等于优惠金额',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}

					],
				},
				insOrderRightsPackageList: [], //权益套餐
				insOrderRightsList: [], //权益单品
				insFeeOrders: {}, //费用信息
				ordersNo: "",
				readOnly: "",
			}
		},
		onShow() {
			// 从权益选择页返回时，重新计算剩余金额：剩余 = 可用 - 已使用（高精度）
			if (this.insFeeOrders && this.insFeeOrders.availableAmount !== undefined) {
				const available = new Decimal(this.insFeeOrders.availableAmount || 0);
				const used = new Decimal(this.insFeeOrders.usedAmount || 0);
				this.$set(this.insFeeOrders, 'remainingAmount', available.minus(used).toString());
			}
		},
		computed: {
			//选中套餐售价总和
			totalPriceCount() {
				const total = this.insOrderRightsPackageList.reduce(
					(sum, item) => {
						// 计算当前项的 packagePrice * quantity（高精度乘法）
						const itemTotal = new Decimal(item.packagePrice).times(new Decimal(item.rightsCount));
						// 累加到总和
						return sum.plus(itemTotal);
					},
					new Decimal(0) // 初始值
				);
				const sum = new Decimal(total);
				return sum.toString(); // 返回字符串
			},
			//选中单品售价总和
			totalPriceCount1() {
				const total = this.insOrderRightsList.reduce(
					(sum, item) => {
						// 计算当前项的 packagePrice * quantity（高精度乘法）
						const itemTotal = new Decimal(item.contractRate).times(new Decimal(item.rightsCount));
						// 累加到总和
						return sum.plus(itemTotal);
					},
					new Decimal(0) // 初始值
				);
				const sum = new Decimal(total);
				return sum.toString(); // 返回字符串
			},
		},
		onLoad(options) {
			this.loadingShow = true;
			try {
				if (options) {
					console.log(options);
					if (options.readOnly && options.readOnly == 1) { //等于1页面只读
						this.readOnly = options.readOnly;
					}
					let data = JSON.parse(options.info)
					console.log(data);
					this.insFeeOrders = data.insFeeOrders || {}; //费用信息（防上游缺字段导致 undefined）
					this.ordersNo = data.ordersNo;
					this.insOrderRightsPackageList = data.insOrderRightsInfoVo.insOrderRightsPackageList;

					this.insOrderRightsList = data.insOrderRightsInfoVo.insOrderRightsList;
					this.recipientList = [{
						title: '车主',
						...data.ownersInfo
					}, {
						title: '投保人',
						...data.policyHolderInfo
					}, {
						title: '被保人',
						...data.insuredPersonInfo
					}]
					this.customerInfo = this.recipientList[1];
				}
				this.loadingShow = false;
			} catch (error) {
				this.loadingShow = false;
			}

		},
		methods: {
			// 权益数量变化监听
			onRightsCountChange(e, index, name, field, type) {
				if (e.value == 0) {
					return this[name].splice(index, 1);
				}
				// 获取当前项
				const item = this[name][index];
				// 获取当前数量和新数量
				const currentCount = item.rightsCount;
				const newCount = e.value;

				// 计算价格
				const price = parseFloat(item[field]);
				// 计算当前总价
				const currentTotalPrice = parseFloat(type == 1 ? this.totalPriceCount : this.totalPriceCount1);
				// 计算数量变化和价格变化
				const countChange = newCount - currentCount;
				const priceChange = countChange * price;
				// 计算新总价
				const newTotalPrice = currentTotalPrice + priceChange;

				// 如果是增加数量，检查是否超过可用金额
				if (countChange > 0 && newTotalPrice > this.insFeeOrders.availableAmount) {
					uni.showToast({
						title: `权益总价不能超过可用金额${this.insFeeOrders.availableAmount}元`,
						icon: 'none'
					});
				} else {
					// 无论是减少数量还是增加数量且未超过限制，都允许更新
					item.rightsCount = newCount;
				}
			},

			// 获取权益明细
			async rightsDetails(item, index) {
				if (!item.rightsDetailsList) {
					let res = await this.$http.get(`/rightsGrant/package/detail/${item.id}`);
					if (res.code == 200) {
						this.insOrderRightsPackageList[index].rightsDetailsList = res.data; //群益明细赋值对应套餐
						this.insOrderRightsPackageList[index].vehicleTaxIsExpanded = !this.insOrderRightsPackageList[
								index]
							.vehicleTaxIsExpanded; //展开收起
					}
				} else {
					this.insOrderRightsPackageList[index].vehicleTaxIsExpanded = !this.insOrderRightsPackageList[index]
						.vehicleTaxIsExpanded; //展开收起
				}

			},
			async adjustAmount() {
				this.$refs.uForm.validate().then(async formRes => {
					let res = await this.$http.post('/insFeeOrder/updateAvailableAmount', {
						orderNo: this.ordersNo,
						availableAmount: this.discountAmountForm.availableAmount,
					});
					if (res.code == 200) {
						let res = await this.$http.get('/supplementOrder/getOrderDetail?ordersNo=' + this
							.ordersNo);
						if (res.code == 200) {
							this.insFeeOrders = res.data.insFeeOrders;
							this.discountAmountShow = false;
							this.insOrderRightsPackageList = []; //权益套餐
							this.insOrderRightsList = []; //权益单品
						}

					}
				}).catch(errors => {

				})

			},
			adjustDiscountAmount() {
				if (this.insFeeOrders.totalExportKeepPointPremium == 0) {
					this.discountAmountShow = true
				}
			},
			//返回键事件
			backKeyChange() {
				let insOrderRightsInfoDto = {
					insOrderRightsPackageList: this.insOrderRightsPackageList,
					insOrderRightsList: this.insOrderRightsList,
					rightsGrantReceiverDTO: {
						receiverType: this.customerInfo.policyPersonType,
						receiverName: this.customerInfo.name,
						receiverMobile: this.customerInfo.mobile
					}
				}
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.insOrderRightsInfoDto = insOrderRightsInfoDto;
				uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
					delta: 1
				});
			},
			// 选择权益
			selectedBenefits(type, index) {
				if (this[type].length > 0) {
					return uni.showToast({
						title: '套餐和单品只能选择其中1种',
						icon: 'none'
					})
				}
				uni.navigateTo({
					url: `/pages/reward/${index==1?'benefitPackage':'benefitSingleItem'}?availableAmount=${this.insFeeOrders.availableAmount}`,
				})
			},
			recipientchange(item) {
				this.customerInfo = this.recipientList.find(val => val.title == item);
				this.receiverShow = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
	}

	.page {
		background-color: #f8f8f8;
	}

	.customerInfo {
		background-color: #fff;
		padding: 25rpx 30rpx;
		box-sizing: border-box;

		.title {
			margin-right: auto;
			font-size: 30rpx;
			color: #666;
		}

		.phone {
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
			margin-right: 10rpx;
		}

		.u-icon {
			margin-top: 4rpx;
		}

		.editTag {
			padding: 4rpx 20rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			margin-right: 4rpx;
			color: #333;
			background: rgba(253, 233, 53, 0.2);
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			border: 1rpx solid #FDE935;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}
		}

	}

	.noteText {
		font-size: 24rpx;
		color: #999;

	}

	.content-body {
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		position: relative;
		margin-bottom: 20rpx;

		.header {
			.title {
				font-size: 34rpx;
				color: #333;
				font-weight: bold;
			}

			.select-btn {
				padding: 8rpx 28rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				color: #1f1f1f;
				background: #FDE935;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
			}

		}

		.view-card {
			background-color: #fff;
			border-radius: 10rpx;
			border-bottom: 1rpx solid #eee;

			.view-item {
				padding: 30rpx 0;
				box-sizing: border-box;

				.image {
					width: 136rpx;
					height: 136rpx;
					border-radius: 10rpx;
					flex-shrink: 0;
					margin-right: 20rpx;
				}

				.content {
					flex: 1;
					min-width: 0;
					line-height: 1;

					.sum {
						text {
							font-size: 24rpx;
							color: #666;
						}
					}

					.plice {
						font-size: 30rpx;
						color: #FF540A;
						font-weight: bold;
						line-height: 1;
					}

					.Detail {
						font-size: 26rpx;
						color: #FFAC1D;
						line-height: 1.4;

						text {
							margin-right: 5rpx;
						}
					}
				}
			}




			.Detail-list {
				padding: 10rpx 20rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
				background-color: #f8f8f8;
				border-radius: 6rpx;

				.content {


					.view-item {
						padding: 20rpx 0;
						box-sizing: border-box;
						border-bottom: 1rpx solid #eee;

					}

					/* 为最后一个view-item去掉边框 */
					.view-item:last-child {
						border-bottom: none;
					}
				}

				.Detail-header {
					width: 100%;
					height: 30rpx;
					background: linear-gradient(0deg, #FFFCEA 0%, #FFFFFF 100%);
					border-radius: 6rpx 6rpx 0rpx 0rpx;
					border-top: 1rpx solid #FFE1A4;
				}

				.Detail-footer {
					width: 100%;
					height: 30rpx;
					background: linear-gradient(0deg, #FFFCEA 0%, #FFFFFF 100%);
					border-radius: 6rpx 6rpx 0rpx 0rpx;
					border-bottom: 1rpx solid #FFE1A4;
				}
			}
		}

		.view-card:last-child {
			border-bottom: none;

			>.view-item {
				padding-bottom: 0;
			}
		}
	}

	// 步进器自定义样式
	.numberBoxMinus {
		width: 32rpx;
		height: 32rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 1rpx solid #FDE935;
	}

	.numberBoxInput {
		font-size: 30rpx;
		color: #333;
		padding: 0 20rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.numberBoxPlus {
		width: 32rpx;
		height: 32rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		background-color: #FDE935;
		border: 1rpx solid #FDE935;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 18rpx 30rpx 48rpx;
		box-sizing: border-box;
		background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 254, 245, 0.7) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		backdrop-filter: blur(12rpx);

		.footer-item {
			text:first-child {
				font-size: 30rpx;
				color: #666;

			}

			text:last-child {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				margin-left: auto;
			}
		}

		.footer-item:last-child {
			text:last-child {
				color: #FF540A;
			}
		}
	}

	//出单机构选择
	.overflow {
		padding: 30rpx;
		box-sizing: border-box;

		.deptselect {
			.item {
				border-radius: 10rpx;
				border: 1px solid #EEEEEE;
				padding: 24rpx 25rpx;
				margin-bottom: 30rpx;
				width: 100%;
				box-sizing: border-box;

				image {
					width: 72rpx;
					height: 72rpx;
					margin-right: 20rpx;
				}

				.textregion {
					margin-right: auto;

					text:first-child {
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
					}

					text:last-child {
						font-size: 30rpx;
						color: #666;
					}
				}
			}
		}
	}

	.discountAmount {
		padding: 40rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #666;

		.input-text {
			.dis {
				text:first-child {
					font-size: 32rpx;
					color: #333;
				}

				text:last-child {
					font-size: 32rpx;
					color: #999;
				}
			}

		}

		.footer-text {
			margin-top: 10rpx;
			font-size: 24rpx;
			color: #f56c6c;
		}
	}
</style>