tire_parts_shop_applets/pages/tabBar/activity/details.vue

<template>
	<view>
		<view>
			<image style="width: 100%;height:350rpx;" :src="form.url" mode="scaleToFill"></image>
		</view>
		<view class="time-crad">
			<view class="time-head">
				<view class="time-title">
					活动时间
				</view>
				<view class="time-content">
					<view class="time-text">
						开始
						<view class="time-text2" style="margin-right: 12rpx;">
							{{form.startDate?form.startDate.slice(0,10):''}}
						</view>
					</view>
					<image style="width:50rpx;height:8rpx;" src="/static/images/tabBar/1258.png" mode="scaleToFill">
					</image>
					<view class="time-text" style="margin-left: 20rpx;">
						结束
						<view class="time-text2">
							{{form.endDate?form.endDate.slice(0,10):''}}
						</view>
					</view>
				</view>

			</view>
			<view class="time-foot">
				<view class="time-text">
					距离活动结束还剩
				</view>
				<uni-countdown :font-size="32" :day="days" :hour="hours" :minute="minutes" :second="seconds"
					color="#FFFFFF" background-color="#E75F37" />
			</view>
		</view>
		<scroll-view scroll-y="true" style="max-height: 28vh;">
			<view class="card" v-for="(item,index) in form.activityItemsList" :key="index">
				<view style="margin-left: 20rpx;">
					<u-checkbox-group v-model="item.select" placement="column" @change="rowSelect($event,item)"
						:size='15'>
						<u-checkbox activeColor="#E75F37" shape="circle" :customStyle="{marginBottom: '8px'}" label="选择"
							:name="true" labelSize="28rpx" labelColor='#3B3B3B'></u-checkbox>
					</u-checkbox-group>
				</view>
				<view style="background: #FCF7F5;padding:40rpx 20rpx;border-radius: 10rpx;">
					<view style="display: flex;align-items: center;">
						<view style="width: 120rpx;height: 120rpx;">
							<image :src="item.url"
								style="width: 120rpx;height: 120rpx;border-radius: 20rpx;border: 2rpx solid #EEEEEE;">
							</image>
						</view>
						<view style="width: 100%;display: flex;margin-left: 8rpx;">
							<view>
								<u--text :text="item.cname" size="24rpx" color='#797979' lines="1"></u--text>
								<view style="color: #E75F37;font-size: 32rpx;">特价:￥{{item.priceOne}}</view>
								<view style="color: #797979;font-size: 24rpx;">原价:￥{{item.priceOnePrimary}}</view>
							</view>
							<view style="display: flex;justify-content: space-between;margin-top: 20rpx;">

								<view>
									<u-number-box v-model="item.purchaseQuantity" :min="item.minQuantity"
										:max="item.maxQuantity" buttonSize="53rpx" color="#414141" bgColor="#FCF7F5"
										iconStyle="color:#A4A4A4" @change="rowNumber($event,item)"></u-number-box>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="submitBar">
			<view style="margin:20rpx 47rpx;">
				<view
					style="display: flex;justify-content: space-between;align-items: flex-end;padding: 28rpx 0 28rpx 28rpx;">
					<u-checkbox-group v-model="selectAll" placement="column" @change="selectAllChange" :size='15'>
						<u-checkbox label="全选" name="全选" activeColor="#E75F37" shape="circle" labelSize="28rpx"
							labelColor='#3B3B3B'></u-checkbox>
					</u-checkbox-group>
					<view style="font-size: 24rpx;">合计:<text style="color: #E75F37;">￥</text><text
							style="font-size: 42rpx;color: #E75F37;">{{numMoney}}</text></view>
				</view>
				<view style="height: 2rpx;width: 100%;background: #EEEEEE;">
				</view>
				<view
					style="display: flex;justify-content:space-between;align-items: center;padding: 28rpx 0 28rpx 28rpx;">
					<view style="font-size: 24rpx;">
						<view style="color:#A3A3A3">共计:<text style="color: #E75F37;">{{numStrip}}条</text></view>
					</view>
					<view style="display: flex;">
						<view v-if='new Date().getTime()<new Date(form.startDate).getTime()' class="left-btn">
							活动未开始
						</view>
						<view v-else-if='new Date().getTime()>new Date(form.startDate).getTime()&&new Date().getTime()<new Date(form.endDate).getTime()' class="right-btn" @click.stop="immediatePayment('W06')">立即支付
						</view>
						<view v-else class="left-btn">
							活动已结束
						</view>
					</view>
				</view>
				<view style="height: 2rpx;width: 100%;background: #EEEEEE;">
				</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: '', // 公司名称
				days: 0,
				hours: 0,
				minutes: 0,
				seconds: 0,
			}
		},
		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 => {
					const now = new Date();
					const end = new Date(res.data.endDate ? res.data.endDate.slice(0, 10) + ' 00:00:00' : null);
					let diff = end - now
					if (diff > 0) {
						this.days = Math.floor(diff / (1000 * 60 * 60 * 24))
						this.hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // 时
						this.minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); // 分
						this.seconds = Math.floor((diff % (1000 * 60)) / 1000);
					}
					this.form = res.data

					// days:0,
					// hours:0,
					// minutes:0,
					// seconds:0,
					for (let item of this.form.activityItemsList) {
						this.$set(item, 'select', []) // 是否选择
						item.purchaseQuantity = item.minQuantity // 当前选择数据的数量
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.time-crad {
		background-color: #fff;
		// width: 100%;
		margin-top: 20rpx;
		padding: 32rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.time-head {
			width: 650rpx;
			height: 104rpx;
			background: #FAE5DF;
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 22rpx;

			.time-title {
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 34rpx;
				color: #E75F37;
				line-height: 38rpx;
			}

			.time-content {
				display: flex;
				align-items: center;
				padding-top: 30rpx;

				.time-text {
					display: flex;
					align-items: center;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 26rpx;
					color: #E75F37;

					.time-text2 {
						margin: 0 8rpx;
						width: 183rpx;
						height: 39rpx;
						border-radius: 20rpx;
						border: 2rpx solid #E75F37;
						text-align: center;
					}
				}
			}
		}

		.time-foot {
			display: flex;
			flex-direction: column;
			align-items: center;

			.time-text {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 34rpx;
				color: #959595;
				line-height: 38rpx;
				margin: 24rpx 0 16rpx 0;
			}
		}
	}

	.card {
		background: #FFFFFF;
		padding: 32rpx;
		margin: 20rpx 0;

		::v-deep .u-checkbox__icon-wrap {
			border-color: #E75F37 !important;
		}

		::v-deep .u-number-box {
			border: 2rpx #E1E1E1 solid;
			border-radius: 8rpx;
		}

		::v-deep .u-number-box__minus {
			border-right: 2rpx #E1E1E1 solid;
		}

		::v-deep .u-number-box__plus {
			border-left: 2rpx #E1E1E1 solid;
		}
	}

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

		::v-deep .u-checkbox__icon-wrap {
			border-color: #E75F37 !important;
		}

		.left-btn {
			background-color: #c8c9cc;
			color: #fff;
			font-size: 26rpx;
			width: 180rpx;
			height: 65rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 33rpx;
		}

		.right-btn {
			background-color: #E75F37;
			color: #fff;
			font-size: 26rpx;
			width: 180rpx;
			height: 65rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 33rpx;
		}
	}
</style>