zhapp/pages/reward/benefitPackage.vue

<template>
	<view class="page">
		<!-- 头部切换 -->
		<u-sticky zIndex="999" customNavHeight="0">
			<uni-NavBar headerTitle="权益套餐" background="#fff" :isSlot="false" :rightSlot="true"
				borderBottom="1rpx solid #eee">
			</uni-NavBar>
			<uni-dropdown :close-on-click-mask="mask" ref="uDropdown" :activeColor="activeColor" border-radius="10"
				menuIcon="arrow-down-fill" :borderBottom="borderBottom" @menuClick="menuClick">
				<uni-dropdown-item :title="location.cityName || '地区'"></uni-dropdown-item>
				<uni-dropdown-item title="价格区间">
					<view class="slotArea">
						<view class="p-3">
							<!-- 双边滑动选择器 -->
							<view class="slider-header dis a-c j-s ">
								<text>价值</text>
								<text>{{ queryInfo.minPrice }}-{{ queryInfo.maxPrice }}元</text>
							</view>
							<view style="padding: 0 40rpx;">
								<uni-tianzai-slider-range :step="50" :min="0" :max="1000"
									:value="[queryInfo.minPrice, queryInfo.maxPrice]" @change="onChange" @end="onEnd">
								</uni-tianzai-slider-range>
							</view>
							<view class="options dis a-c f-wrap mt-3">
								<view class="options-card  dis a-c j-c"
									:class="item.label == priceRangeName ? 'active' : ''"
									v-for="(item, index) in priceRangeOptions" :key="index"
									@click="filterCriteriaClick(item)">
									{{ item.label }}
								</view>
							</view>
						</view>
						<!-- 按钮 -->
						<view class="slider-btn dis a-c j-s">
							<view class="btn dis a-c j-c mr-3" @click="clearForm">
								清空
							</view>
							<view class="btn btns dis a-c j-c" @click="querySearch">
								确定
							</view>
						</view>
					</view>
				</uni-dropdown-item>
				<uni-dropdown-item title="默认排序">
					<view class="slotArea">
						<view class="sort">
							<view class="item dis a-c  " @click="sortItem(item.value)"
								v-for="(item, index) in sortOrderOptions" :key="index">
								<text class="text" :class="{ 'sort-active': item.value === queryInfo.sortType }">{{
									item.label }}</text>
								<view class="slice dis a-c j-c " v-if="item.value === queryInfo.sortType">
									<u-icon name="checkmark" color="#333" size="11" :bold="true"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</uni-dropdown-item>
			</uni-dropdown>
		</u-sticky>
		<!-- 内容 -->
		<view class="content-body">
			<!-- 权益列表 -->
			<view class="view-card dis f-c " v-for="(item, index) in benefitPackageList" :key="index"
				v-if="benefitPackageList.length">
				<!-- 权益信息 -->
				<view class="dis view-header">
					<!-- 图片 -->
					<image class="image" :src="item.packageImage" 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">券数量{{ item.totalNumber }}张</text>
							<text class="marketPrice">市场价 {{ item.totalPackagePrice }}</text>
							<u-number-box v-model="item.rightsCount" :min="0" style="margin-left: auto;"
								@change="val => onRightsCountChange(val, index, 'benefitPackageList', 'packagePrice')"
								: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.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="view">
						<view class="dis view-header" 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>
		<u-empty v-if="benefitPackageList.length == 0" mode="car" icon="/static/image/Empty1.png"
			text="没有可用的权益券，换个地区试试~" width="120" height="120">
		</u-empty>
		<!-- 底部样式 -->
		<view class="footer dis a-c">
			<!-- 图标 -->
			<view class="icon-view dis f-c a-c ">
				<view class="">
					<image src="/static/icon/balance/balance.png" mode=""></image>
					<u-badge numberType="overflow" :max="99" :value="selectedCount" :absolute="true" color="#fff"
						bgColor="#FF4545" :offset="[-5, -5]" style="font-size: 18rpx;"></u-badge>
				</view>
				<text>已选</text>
			</view>
			<!-- 价格 -->
			<view class="dis f-c a-start">
				<view class="price">
					<text>￥</text>
					<text>{{ totalPriceCount }}</text>
				</view>
				<text class="marketPrice">市场价：{{ totalMarketPriceCount }}</text>
			</view>
			<view class="footer-btn" @click="userRightsSubmit">
				立即发放
			</view>
		</view>
		<!-- 省市区组件 -->
		<uni-areaCascadePicker :show="addressPickershow" @confirm="addressConfirm" @close="areaCascadeClose"
			@cancel="addressPickershow = false"></uni-areaCascadePicker>
		<!-- 自定义加载动画 -->
		<u-overlay :show="loadingShow" style="background-color: rgba(255, 255, 255, 0.6);">
			<view class="dis f-c a-c j-c " style="height: 100%;">
				<u-loading-icon></u-loading-icon>
				<text style="color: #909399;" class="mt-1">{{ loadingText }}</text>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import LocationService from '@/utils/location';
	import Decimal from 'decimal.js';
	export default {
		data() {
			return {
				availableAmount: 0, //可用金额
				loadingShow: true, //加载
				loadingText: '加载中', //加载提示文字
				vehicleTaxIsExpanded: false, //明细 展开收起
				// 位置信息
				location: {
					cityName: "",
				},
				benefitPackageList: [], //权益套餐列表
				privilegeItem: [], //权益单品列表
				// 页面初始化查询信息
				queryInfo: {
					countryAll: "", //省市区
					minPrice: 0,
					maxPrice: 1000,
					sortType: 0, //排序  0 默认 1低价  2高价
					pageNo: 1,
					pageSize: 20,
				},
				addressPickershow: false, //省市区组件
				mask: true, //点遮罩关闭
				borderBottom: true,
				activeColor: '#333', //下拉菜单选中激活项
				doubleResult: null,
				singleResult: null,
				statusCurrent: 1, //状态tabs切换
				statusList: [{
						name: "权益套餐",
					},
					{
						name: "权益单品",
					},
				],

				// 排序
				sortOrderOptions: [{
						label: '默认排序',
						value: 0,
					},
					{
						label: '低价优先',
						value: 1,
					},
					{
						label: '高价优先',
						value: 2,
					}
				],
				priceRangeName: "", //区间选中
				// 价格区间列表
				priceRangeOptions: [{
						label: "100元以下",
						value: [0, 100]
					},
					{
						label: "100-200元",
						value: [100, 200]
					},
					{
						label: "200-300元",
						value: [200, 300]
					},
					{
						label: "300-400元",
						value: [300, 400]
					},
					{
						label: "400-500元",
						value: [400, 500]
					},
					{
						label: "500-1000元",
						value: [500, 1000]
					},
				],
			}
		},
		onShow() {

		},
		async onLoad(options) {
			this.loadingShow = true;
			try {
				if (options) {
					// this.availableAmount = options.availableAmount;
				}
				// 获取定位城市信息
				const locationData = await LocationService.initLocation();
				if (locationData.provinceCode) {
					this.queryInfo.countryAll =
						`${locationData.provinceCode},${locationData.cityCode},${locationData.districtCode}`; //
					this.location.cityName =
						`${locationData.provinceName}-${locationData.cityName}-${locationData.districtName}`;
				}

				await this.getbenefitPackageList(); //权益套餐列表
				await this.getprivilegeItem(); //权益单品列表
				this.loadingShow = false;
			} catch (error) {
				this.loadingShow = false;
			}


		},
		computed: {
			selectedCount() {
				const total = this.benefitPackageList.reduce(
					(sum, item) => sum.plus(new Decimal(item.rightsCount)),
					new Decimal(0)
				);
				const sum = new Decimal(total);
				return sum.toString();
			},
			//选中售价总和
			totalPriceCount() {
				const total = this.benefitPackageList.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(); // 返回字符串
			},
			//选中市场价总和
			totalMarketPriceCount() {
				const total = this.benefitPackageList.reduce(
					(sum, item) => {
						// 计算当前项的 packagePrice * quantity（高精度乘法）
						const itemTotal = new Decimal(item.totalPackagePrice).times(new Decimal(item.rightsCount));
						// 累加到总和
						return sum.plus(itemTotal);
					},
					new Decimal(0) // 初始值
				);
				const sum = new Decimal(total);
				return sum.toString(); // 返回字符串
			}

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

				// 计算价格
				const price = parseFloat(item[field]);
				// 计算当前总价
				const currentTotalPrice = parseFloat(this.totalPriceCount);

				// 计算数量变化和价格变化
				const countChange = newCount - currentCount;
				const priceChange = countChange * price;
				// 计算新总价
				const newTotalPrice = currentTotalPrice + priceChange;

				// 如果是增加数量，检查是否超过可用金额
				if (countChange > 0 && newTotalPrice > this.availableAmount) {
					uni.showToast({
						title: `权益总价不能超过可用金额${this.availableAmount}元`,
						icon: 'none'
					});
				} else {
					// 无论是减少数量还是增加数量且未超过限制，都允许更新
					item.rightsCount = newCount;
				}
			},
			// 确认选择
			async userRightsSubmit() {
				// 验证是否有选择权益
				if (parseInt(this.selectedCount) === 0) {
					uni.showToast({
						title: '请至少选择一项权益',
						icon: 'none'
					});
					return;
				}
				// 收集选择的权益套餐
				const selectedPackages = this.benefitPackageList
					.filter(item => item.rightsCount > 0)
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.insOrderRightsPackageList = selectedPackages; //选中权益列表
				uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
					delta: 1
				});
			},
			//获取权益套餐列表
			async getbenefitPackageList() {
				let res = await this.$http.post('/rightsGrant/package/list', this.queryInfo);
				if (res.code == 200) {
					res.data.records.map(val => {
						val.vehicleTaxIsExpanded = false;
						return val;
					})
					this.benefitPackageList = res.data.records;
				}
			},
			// 获取权益明细
			async rightsDetails(item, index) {
				if (!item.rightsDetailsList) {
					let res = await this.$http.get(`/rightsGrant/package/detail/${item.id}`);
					if (res.code == 200) {
						this.benefitPackageList[index].rightsDetailsList = res.data; //群益明细赋值对应套餐
						this.benefitPackageList[index].vehicleTaxIsExpanded = !this.benefitPackageList[index]
							.vehicleTaxIsExpanded; //展开收起
					}
				} else {
					this.benefitPackageList[index].vehicleTaxIsExpanded = !this.benefitPackageList[index]
						.vehicleTaxIsExpanded; //展开收起
				}

			},

			// 省市区选择回调
			async addressConfirm(e) {
				this.queryInfo.countryAll = e.codes.join(',') || "";
				this.location.cityName = e.fullAddress;
				this.addressPickershow = false;
				this.$refs.uDropdown.close();
				await this.getbenefitPackageList();
			},
			// 查看明细
			detailClick() {

			},
			async querySearch() {
				console.log(this.statusCurrent);
				this.$refs.uDropdown.close();

				await this.getbenefitPackageList();
			},
			//清空价格区间
			async clearForm() {
				this.queryInfo.minPrice = 0;
				this.queryInfo.maxPrice = 1000;
				this.priceRangeName = "";
				this.$refs.uDropdown.close();
				await this.getbenefitPackageList();
			},
			filterCriteriaClick(item) {
				this.priceRangeName = item.label;
				this.queryInfo.minPrice = item.value[0];
				this.queryInfo.maxPrice = item.value[1];
			},
			//排序选择
			async sortItem(value) {
				this.queryInfo.sortType = value;
				this.$refs.uDropdown.close();
				await this.getbenefitPackageList();
			},
			// 价格区间选择
			onChange(values) {
				this.queryInfo.minPrice = values[0];
				this.queryInfo.maxPrice = values[1];
			},
			// 下拉菜单选项事件
			menuClick(value) {
				if (value == 0) {
					this.addressPickershow = true;
				}
			},
			onEnd(event) {
				console.log('最终选择:', event.values);
			},
			areaCascadeClose() {
				this.addressPickershow = false;
				this.$refs.uDropdown.close();
			},

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F8F8F8;
		height: 100vh;
	}

	.container {
		padding: 20rpx;
	}

	.dropdown-title {
		font-size: 32rpx;
		color: #333;
	}

	.reward-tabs {
		margin-right: 48rpx;
		flex: 1;
	}

	/* 自定义tab滑块样式 */
	::v-deep .u-tabs__wrapper__nav__line {
		background-color: transparent !important;
		font-size: 30px;
	}

	::v-deep .u-tabs__wrapper__nav__item__text {
		font-size: 32rpx;
	}

	.slotArea {
		background-color: #FFFFFF;
		border-top: 1rpx solid #eee;

		.slider-header {
			text:first-child {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}

			text:last-child {
				font-size: 28rpx;
				color: #333;
			}
		}

		.slider-btn {
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			border-top: 1rpx solid #EEEEEE;
			padding: 30rpx 44rpx;
			box-sizing: border-box;

			.btn {
				padding: 18rpx 30rpx;
				box-sizing: border-box;
				width: 50%;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				border: 1rpx solid #FDE935;
				font-size: 30rpx;
				color: #333;
			}

			.btns {
				width: 50%;
				background: #FDE935;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
			}
		}

		.sort {
			padding: 30rpx;
			box-sizing: border-box;
			display: grid;
			grid-template-columns: repeat(1, 1fr);
			grid-template-rows: auto;
			row-gap: 30rpx;

			.item {
				text {
					font-size: 30rpx;
					color: #333;
				}

				.slice {
					margin-left: auto;
					width: 32rpx;
					height: 32rpx;
					background: #FDE935;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}

			}

			.sort-active {
				font-weight: bold;
			}

		}

		.item-box {
			margin-bottom: 50rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				border: 1px solid #f2f2f2;
				color: #333;
				padding: 8rpx 40rpx;
				border-radius: 100rpx;
				margin-top: 30rpx;
			}

			.active {
				color: #FFFFFF;
				background-color: #000;
			}
		}

		.options {
			display: grid;
			/* 启用网格布局 */
			grid-template-columns: repeat(3, 1fr);
			/* 3 列，每列等宽 */
			grid-template-rows: auto;
			/* 行高自适应 */
			row-gap: 30rpx;
			/* 只设置行间距（上下） */
			column-gap: 20rpx;
			/* 列间距设为 0（可选） */
		}

		.options-card {
			padding: 11rpx 24rpx;
			box-sizing: border-box;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			border: 1rpx solid #EEEEEE;
			font-size: 28rpx;
			color: #666;
		}

		.active {
			background-color: rgba(253, 233, 53, 0.2);
			border: 1rpx solid #FDE935;
			color: #333;
		}
	}

	.content-body {
		padding: 20rpx 30rpx 166rpx;
		box-sizing: border-box;
		position: relative;

		.view-card {
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			.view-header {
				padding: 25rpx 30rpx;
				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: 0 30rpx 25rpx;
				box-sizing: border-box;

				.view {
					background-color: #f8f8f8;
					border-radius: 6rpx;
					padding: 10rpx 20rpx;

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

					.view-header:last-child {
						border-bottom: none;
					}
				}
			}
		}
	}

	// 步进器自定义样式
	.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: 25rpx 30rpx 55rpx;
		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);

		.icon-view {
			margin-right: 30rpx;

			>view {
				position: relative;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}



			text {
				font-size: 20rpx;
				color: #333;
			}
		}

		.price {
			text:nth-child(1) {
				font-size: 28rpx;
				color: #FF540A;
			}

			text:nth-child(2) {
				font-size: 42rpx;
				color: #FF540A;
			}

		}

		.marketPrice {
			font-size: 20rpx;
			color: #999;
			letter-spacing: 1rpx;
			margin-left: 4rpx;
		}

		.footer-btn {
			padding: 20rpx 68rpx;
			box-sizing: border-box;
			background: #FDE935;
			border-radius: 58rpx 58rpx 58rpx 58rpx;
			font-size: 36rpx;
			color: #1F1F1F;
			font-weight: bold;
			margin-left: auto;
		}
	}

	.tabView {
		padding: 20rpx 0;
		box-sizing: border-box;
		background-color: #fff;
	}

	.u-empty {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* 反向偏移自身宽高的50% */
	}
</style>