tire_parts_shop_applets/pages/tabBar/activity/details.vue

<template>
	<view>
		<view class="imgaeBox">
			<image style="width: 100%;height: 100%;" :src="form.url" mode=""></image>
		</view>
		<view class="cardBox textBox">
			<view class="textBox_title">{{form.activityName}}</view>
			<view class="textBox_text">{{form.activityDescription}}</view>
		</view>
		<view class="bottomBox">
			<view style="margin-bottom: 20rpx;">活动起止时间</view>
			<view class="cardBox timeBox">
				<view>{{form.startDate?form.startDate.slice(0,10):''}}开始</view>
				<view>
					<view class="iconRight"><u-icon name="arrow-right" bold color="#fff" size="14"></u-icon></view>
				</view>
				<view>{{form.endDate?form.endDate.slice(0,10):''}}结束</view>
			</view>
			<view class="cardBox timeBox" style="display: block;">
				<view v-for="item of form.activityItemsList" :key="item.id">
					<view class="selectAllBox">
						<u-checkbox-group v-model="item.select" placement="column" @change="rowSelect($event,item)">
							<u-checkbox label="选择" :name="true" activeColor="#FD4B09" shape="circle"></u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="forBox">
						<view class="forBox_img">
							<image style="width: 100%;height: 100%;" :src="item.url" mode=""></image>
						</view>
						<view class="forBox_text">
							<view class="">{{item.cname}}</view>
							<view>原价:{{item.priceOnePrimary}}元</view>
							<view class="specialOffer">特价:{{item.priceOne}}元</view>
							<view class="timerBox">
								<u-number-box v-model="item.purchaseQuantity" :min="item.minQuantity"
									:max="item.maxQuantity" buttonSize="40rpx"
									@change="rowNumber($event,item)"></u-number-box>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 140rpx;"></view>
		<view class="bottomPurchase">
			<view class="bottomPurchase_flex">
				<view style="display: flex;align-items: center;">
					<view>
						<u-checkbox-group v-model="selectAll" placement="column" @change="selectAllChange">
							<u-checkbox label="全选" name="全选" activeColor="#FD4B09" shape="circle"></u-checkbox>
						</u-checkbox-group>
					</view>
					<view style="margin-left: 20rpx;">
						<view>总计:￥{{numStrip}}条</view>
						<view>￥{{numMoney}}元</view>
					</view>
				</view>

				<view>
					<view v-if='new Date().getTime()<new Date(form.startDate).getTime()' class="noPaymentButton">
						活动未开始
					</view>
					<view
						v-else-if='new Date().getTime()>new Date(form.startDate).getTime()&&new Date().getTime()<new Date(form.endDate).getTime()'
						class="paymentButton" @click.stop="immediatePayment('W06')">
						立即支付
					</view>
					<view v-else class="noPaymentButton">
						活动已结束
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		activityDetail,
		activityGenerateOrder
	} from '@/api/tabBar/activity.js'
	import {
		getCorpsAddr,
		paramserviceDetail
	} from '@/api/tabBar/shoppingCart.js'
	import {
		userDept,
	} from '@/api/tabBar/home.js'
	export default {
		data() {
			return {
				form: {},
				selectAll: [null], // 全选参数
				numStrip: 0, // 总条
				numMoney: 0, // 总钱
				addres: {}, // 地址
				corporateName: '', // 公司名称
			}
		},
		onLoad(value) {
			console.log(value);
			this.activityDetailfun(value.id)
			// 获取地址
			getCorpsAddr().then(res => {
				this.addres = res.data
			})
			//获取公司名称
			userDept().then(res => {
				this.corporateName = res.data.fullName
			})
		},
		methods: {
			// 立即支付
			immediatePayment(payType) {
				if (this.numStrip == 0) {
					uni.showToast({
						title: "请选择支付的商品",
						icon: 'none'
					});
					return
				}
				let arr = []
				for (let item of this.form.activityItemsList) {
					if (item.select[0]) {
						item.goodsNum = item.purchaseQuantity
						item.price = item.priceOne
						arr.push(item)
					}
				}
				let data = [{
					name: this.corporateName,
					list: arr
				}]
				console.log(this.form, 105);
				console.log(data, 120);
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				activityGenerateOrder({
					payType: payType,
					address: this.addres.belongtoarea + this.addres.detailedAddress,
					list: data,
				}).then(res => {
					let generateOrderData = res.data
					paramserviceDetail({
						paramKey: 'cashier.payment'
					}).then(res => {
						let paramservice = res.data
						// 判断是调支付台的接口还是微信支付的接口
						if (paramservice && paramservice.paramValue == '1') {
							// uni.hideLoading();
							let obj = {
								appId: 'wxef277996acc166c3',
								extraData: {
									cusid: generateOrderData.cusid,
									appid: generateOrderData.appid,
									orgid: generateOrderData.orgid,
									version: generateOrderData.version,
									trxamt: generateOrderData.trxamt,
									reqsn: generateOrderData.reqsn,
									notify_url: generateOrderData.notify_url,
									body: generateOrderData.body,
									remark: generateOrderData.remark,
									validtime: generateOrderData.validtime,
									limit_pay: generateOrderData.limit_pay,
									randomstr: generateOrderData.randomstr,
									paytype: generateOrderData.paytype,
									signtype: generateOrderData.signtype,
									sign: generateOrderData.sign,
								},
							}
							console.log(obj);
							if (!generateOrderData.reqsn) {
								uni.showToast({
									title: '当前订单号为空，请联系供应商！！！',
									icon: 'none',
									mask: true,
									duration: 2000
								});
								// 详情调用

								return
							}
							wx.openEmbeddedMiniProgram({
								appId: 'wxef277996acc166c3',
								extraData: {
									cusid: generateOrderData.cusid,
									appid: generateOrderData.appid,
									orgid: generateOrderData.orgid,
									version: generateOrderData.version,
									trxamt: generateOrderData.trxamt,
									reqsn: generateOrderData.reqsn,
									notify_url: generateOrderData.notify_url,
									body: generateOrderData.body,
									remark: generateOrderData.remark,
									validtime: generateOrderData.validtime,
									// limit_pay: generateOrderData.limit_pay,
									limit_pay: "",
									randomstr: generateOrderData.randomstr,
									paytype: generateOrderData.paytype,
									signtype: generateOrderData.signtype,
									sign: generateOrderData.sign,
								},
								success: (a) => {
									uni.hideLoading();
								},
								fail: (err) => {
									uni.hideLoading();
								}
							})
						} else {
							if (payType && (payType == 'W01' || payType == 'U01' || payType == 'A01' ||
									payType == 'S01')) {
								console.log(generateOrderData, 321);
								// 订单详情接口
								this.qrcodeurl = generateOrderData.url
								appDetail({
									id: generateOrderData.id
								}).then(res => {
									uni.hideLoading();
									this.qrcodeshow = true
									this.qrcodeData = res.data
									console.log(res.data);
								})
							} else {
								uni.requestPayment({
									provider: "wxpay",
									appId: generateOrderData.appId,
									timeStamp: generateOrderData.timeStamp,
									nonceStr: generateOrderData.nonceStr,
									package: generateOrderData.package,
									signType: generateOrderData.signType,
									paySign: generateOrderData.paySign,
									success(res) {
										uni.showToast({
											title: '支付成功',
											mask: true,
											duration: 2000
										});
										setTimeout(function() {
											uni.hideLoading();
											// this_.refresh(res.data.data.id)
										}, 1000);
									},
									fail(e) {
										console.log(e);
										uni.showToast({
											title: "支付失败",
											icon: 'none',
											mask: true
										});
										setTimeout(function() {
											uni.hideLoading();
											// this_.refresh(res.data.id)
										}, 1000);
									}
								})
							}

						}
					})
				}).catch(err => {
					uni.hideLoading();
				})
			},
			// 步进器
			rowNumber(value, row) {
				row.purchaseQuantity = value.value
				this.numStrip = 0
				this.numMoney = 0
				for (let item of this.form.activityItemsList) {
					if (item.select[0]) {
						this.numStrip += Number(item.purchaseQuantity)
						this.numMoney += Number(item.purchaseQuantity) * Number(item.priceOne)
					}
				}
			},
			// 单条选择监听
			rowSelect(value, row) {
				row.select = value
				this.numStrip = 0
				this.numMoney = 0
				for (let item of this.form.activityItemsList) {
					if (item.select[0]) {
						this.numStrip += Number(item.purchaseQuantity)
						this.numMoney += Number(item.purchaseQuantity) * Number(item.priceOne)
					}
				}
			},
			// 全选按钮监听
			selectAllChange(value) {
				this.numStrip = 0
				this.numMoney = 0
				if (value[0]) {
					this.selectAll = ['全选']
					for (let item of this.form.activityItemsList) {
						this.$set(item, 'select', [true])
						this.numStrip += Number(item.purchaseQuantity)
						this.numMoney += Number(item.purchaseQuantity) * Number(item.priceOne)
					}
				} else {
					this.selectAll = null
					for (let item of this.form.activityItemsList) {
						this.$set(item, 'select', [])
					}
				}
			},
			// 详情数据
			activityDetailfun(id) {
				activityDetail({
					id: id
				}).then(res => {
					this.form = res.data
					for (let item of this.form.activityItemsList) {
						this.$set(item, 'select', []) // 是否选择
						item.purchaseQuantity = item.minQuantity // 当前选择数据的数量
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.imgaeBox {
		width: 100%;
		height: 300rpx;
		margin-bottom: 20rpx;
	}

	.cardBox {
		background: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.textBox {
		padding-right: 60rpx;
		padding-left: 60rpx;

		.textBox_title {
			text-align: center;
			font-weight: 500;
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}

		.textBox_text {
			font-size: 28rpx;
			color: #8b8b8b;
		}
	}

	.bottomBox {
		width: 90%;
		margin: 0 auto;
		margin-top: 20rpx;
		font-size: 30rpx;

		.timeBox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 10rpx;

			.iconRight {
				background: #000;
				border-radius: 50%;
				color: #fff;
				width: 35rpx;
				height: 35rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
			}
		}
	}

	.selectAllBox {
		margin-bottom: 20rpx;
	}

	.forBox {
		display: flex;
		margin-bottom: 20rpx;

		.forBox_img {
			flex: 1;
			width: 180rpx;
			height: 180rpx;
		}

		.forBox_text {
			flex: 2;
			margin-left: 20rpx;
			width: 100%;

			.specialOffer {
				color: #dd451b;
				font-size: 40rpx;
				font-weight: 500;
			}

			.timerBox {
				display: flex;
				justify-content: flex-end;
			}
		}
	}

	.bottomPurchase {
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		z-index: 10;

		.bottomPurchase_flex {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 40rpx;
			height: 120rpx;
			box-sizing: border-box;

			.paymentButton {
				background: #dd451b;
				display: flex;
				align-items: center;
				padding: 20rpx 30rpx;
				color: #fff;
				border-radius: 40rpx;
			}

			.noPaymentButton {
				background: #999;
				filter: grayscale(50%);
				display: flex;
				align-items: center;
				padding: 20rpx 30rpx;
				color: #fff;
				border-radius: 40rpx;
			}
		}
	}
</style>