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

<template>
	<view class="interest">
		<view class="giftList dis a-c j-f">
			<view :class="{ 'active':giftIndex === index, 'giftItem':giftIndex!=index }"
				v-for="(item, index) in giftList" :key="item.id" @click="handleSelectGift(item, index)">
				<view class="dis a-c j-c" style="font-size: 21rpx; color: #FF4141;">
					<view class="special">{{ item.totalPackagePrice }}</view>元
				</view>
				<view class="triangle">
					<view class="border"></view>
					<view class="text">{{ item.equityPackageName }}</view>
				</view>
			</view>
		</view>
		<view class="dis a-c j-s tips">
			<view>
				<view>掌柜生活积分</view>
				<view>积分可兑换金豆，金豆可做下单时抵现消费。</view>
			</view>
			<view>{{ integral.toFixed(2) }}</view>
		</view>
		<view class="interestList">
			<view class="interestItem" v-for="(item, index) in 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>
		<view class="footer dis a-c j-s" v-if="showBtn">
			<view>已选{{ giftList.length>0?giftList[giftIndex].totalPackagePrice:0 }}元权益包</view>
			<view class="submit" @click="handleConfirm()">确认选择</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				giftList: [],
				giftIndex: 0,
				paramsObj: null,
				integral: 0,
				interestObj: null,
				localEquityPackageAssociationList: [],
				showBtn: true
			}
		},
		async onLoad(params) {
			if (params.params) {
				this.paramsObj = JSON.parse(params.params)
				console.log(11111111, this.paramsObj)
				let res = await this.$http.post('/equity/equityInfo', {
					pageNum: 1,
					pageSize: 99999,
					companyId: this.paramsObj.companyId
				})
				if (res.code == 200) {
					this.interestObj = res.data
					this.giftList = res.data.pageResult.content
					let obj = res.data.feeOrderNewVo.exportFee.find(a => a.insuranceType === '合计')
					this.integral = (obj.totalAmount - this.giftList[this.giftIndex].threeSettlementPrice) * res.data.pointProportion
					this.localEquityPackageAssociationList = this.giftList[this.giftIndex]
						.localEquityPackageAssociationList
						if (res.data.equityInfoVo) {
							if (res.data.pageResult.content && res.data.pageResult.content.length > 0) {
								res.data.pageResult.content.forEach((item, index) => {
									if (res.data.equityInfoVo.id == item.id) {
										this.giftIndex = index
									}
								})
							}
						}
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 3000
					});
				}
			}
			if (params.id) {
				this.showBtn = false
				let res = await this.$http.post('/equity/equityInfo', {
					pageNum: 1,
					pageSize: 99999,
					companyId: params.id
				})
				if (res.code == 200) {
					this.interestObj = res.data
					this.giftList = res.data.pageResult.content
					let obj = res.data.feeOrderNewVo.exportFee.find(a => a.insuranceType === '合计')
					this.integral = (obj.totalAmount - this.giftList[this.giftIndex].threeSettlementPrice) * res.data.pointProportion
					this.localEquityPackageAssociationList = this.giftList[this.giftIndex]
						.localEquityPackageAssociationList
					if (res.data.equityInfoVo) {
						if (res.data.pageResult.content && res.data.pageResult.content.length > 0) {
							res.data.pageResult.content.forEach((item, index) => {
								if (res.data.equityInfoVo.id == item.id) {
									this.giftIndex = index
								}
							})
						}
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 3000
					});
				}
			} else {
				this.showBtn = true
			}
		},
		methods: {
			handleSelectGift(item, index) {
				if (this.showBtn) {
					this.giftIndex = index
					let obj = this.interestObj.feeOrderNewVo.exportFee.find(a => a.insuranceType === '合计')
					this.integral = (obj.totalAmount - this.giftList[this.giftIndex].threeSettlementPrice) * this.interestObj.pointProportion
					this.localEquityPackageAssociationList = this.giftList[this.giftIndex]
						.localEquityPackageAssociationList
				}
			},
			handleConfirm() {
				let params = JSON.stringify(this.paramsObj)
				let item = JSON.stringify(this.giftList[this.giftIndex])
				let obj = this.interestObj.feeOrderNewVo.exportFee.find(a => a.insuranceType === '合计')
				this.$http.post('/equity/saveEquity', {
					companyId: this.paramsObj.companyId,
					receiveType: this.paramsObj.accept.type === '车主' ? 2 : this.paramsObj.accept.type === '投保人' ?
						0 : 1,
					receiveName: this.paramsObj.accept.name,
					receivePhone: this.paramsObj.accept.mobile,
					receiveIdentify: this.paramsObj.accept.identifyNumber,
					orderMoney: obj.totalAmount,
					point: this.integral.toFixed(2),
					equityInfo: this.giftList[this.giftIndex]
				}).then(res => {
					if (res.code === 200) {
						uni.navigateTo({
							url: `/pages/carInsure/premiumCalc?orderno=${this.paramsObj.orderno}`
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3000
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.interest {
		width: 100%;
		height: calc(100vh - 88rpx);
		background-color: #F8FAFE;
		overflow-y: auto;

		.giftList {
			padding: 20rpx 30rpx;
			width: 100%;
			overflow-x: auto;
			flex-wrap: nowrap;

			.giftItem {
				width: 158rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				background-color: #FFF3EA;
				flex: 0 0 auto;
				text-align: center;
				opacity: .8;

				.special {
					font-size: 42rpx;
					color: #FF4141;
				}

				.triangle {
					background-color: #FF4141;
					height: 60rpx;
					color: #ffffff;
					border-radius: 0 0 10rpx 10rpx;

					.border {
						width: 0;
						height: 0;
						border-top: 10rpx solid #FFF3EA;
						border-bottom: 0 solid transparent;
						border-left: 79rpx solid transparent;
						border-right: 79rpx solid transparent;
					}

					.text {
						font-size: 24rpx;
						line-height: 50rpx;
					}
				}
			}

			.active {
				width: 154rpx;
				border-radius: 10rpx;
				border: 4rpx solid #FF4141;
				margin-right: 20rpx;
				background-color: #FFF3EA;
				flex: 0 0 auto;
				text-align: center;

				.special {
					font-size: 42rpx;
					color: #FF4141;
				}

				.triangle {
					background-color: #FF4141;
					height: 56rpx;
					color: #ffffff;

					.border {
						width: 0;
						height: 0;
						border-top: 10rpx solid #FFF3EA;
						border-bottom: 0 solid transparent;
						border-left: 74rpx solid transparent;
						border-right: 74rpx solid transparent;
					}

					.text {
						font-size: 24rpx;
						line-height: 48rpx;
					}
				}
			}
		}

		.tips {
			padding: 20rpx 30rpx;
			margin-top: 20rpx;
			background-color: #ffffff;
		}

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

		.footer {
			width: 100%;
			padding: 20rpx 30rpx;
			margin-top: 20rpx;
			background-color: #ffffff;
			position: fixed;
			bottom: 0;
			left: 0;
			border-top: 1rpx solid #eeeeee;

			.submit {
				background-color: #0052FF;
				color: #ffffff;
				padding: 4rpx 18rpx;
				border-radius: 4rpx;
				font-size: 29rpx;
			}
		}
	}
</style>