zh_order_food_xcx/pages-buy/group-pay.vue

<template>
	<view class="flex-common-css iPhone-bottom box-border-box">
		<Nav title='提交订单' bgckgroundBox='transparent'></Nav>
		<scroll-view :scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
			<view class="p-24 box-border-box bgc-f b-rad-20 mb-20">
				<view class="align-items-flex-end flex-justify-space p-b-20 b-b-F9F9F9 mb-20">
					<view class="align-items-flex-start">
						<image :src="goods_info.cover_img" mode="scaleToFill" class="goods-img mr-18"></image>
						<view class="">
							<view class="fs-32 w-150 text-overflow-ellipsis-one mb-10">
								{{goods_info.title}}
							</view>
							<view class="mb-10 fs-22 fc-9">
								可用时间：
								{{goods_info.usable_time == 1?'24小时可用':goods_info.timeData}}
							</view>
							<view class="fs-22 fc-9 mb-10">
								{{goods_info.is_quota == 0?'不限购':'限购'+ goods_info.quota_num +'张'}} .
								{{goods_info.pre_book == 1?'无需预约':'需预约'}}
							</view>
							<view class="fs-22 fc-9">
								随时退 . 过期自动退
							</view>
						</view>
					</view>
					<view class="">
						<view class="align-items-center mb-10 flex-justify-end">
							<view class="fs-22 fc-9 mr-6 sc-class">
								{{goods_info.line_price}}
							</view>
							<view class="goods_info.price fs-22">
								现价￥<span class="fs-28">{{goods_info.price}}</span>
							</view>
						</view>
						<view class="align-items-center">
							<image src="@/static/img/takeout/j.png" mode="" class="j" @click="setNum(1)"></image>
							<input type="number" v-model="fromData.number" class="input" @blur='blur' />
							<image src="@/static/img/takeout/add.png" mode="" class="j" @click="setNum(2)"></image>
						</view>
					</view>
				</view>
				<view class="text-align-center flex-justify-end">
					<view class="fs-28 mr-20">
						优惠 <span
							class="fc-41ABF5 fs-28">￥{{((Number(goods_info.line_price) - Number(goods_info.price)) * Number(fromData.number)).toFixed(2)}}</span>
					</view>
					<view class="fs-28">
						小计 <span
							class="fc-41ABF5 fs-28 fw-600">￥{{(Number(goods_info.price) * Number(fromData.number)).toFixed(2)}}</span>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="but-box align-items-center flex-justify-space bgc-f p-24 box-border-box">
			<view class="">
				<view class="fs-34 fw-600 fc-41ABF5">
					<span class="fs-24 fc-41ABF5 fw-400 mr-12">合计</span><span
						class="fs-20 fw-600 fc-41ABF5">￥</span>{{(Number(goods_info.price) * Number(fromData.number)).toFixed(2)}}
				</view>
				<view class="fc-9">
					<span
						class="mr-12">共{{fromData.number}}件</span>已优惠￥{{((Number(goods_info.line_price) - Number(goods_info.price)) * Number(fromData.number)).toFixed(2)}}
				</view>
			</view>
			<view class="but bgc-41ABF5 fc-f b-rad-200 text-align-center fs-34" @click="toSave()">
				立即支付
			</view>
		</view>
	</view>
</template>

<script>
	import {
		groupInfo,
		groupCreate
	} from '@/api/group.js'
	import {
		groupPay
	} from '@/api/groupOrder.js';
	import tools from '@/service/tools';
	export default {
		components: {},
		data() {
			return {
				fromData: {
					id: 0,
					shop_id: 0,
					number: 1
				},
				goods_info: {},
				usable_time: '',
				isAJAX: false
			};
		},
		onLoad(data) {
			console.log(data);
			if (data) {
				this.fromData.id = data.goods_id
				this.fromData.shop_id = data.shop_id
				this.groupInfo()
			}
		},
		mounted() {},
		methods: {
			toSave() {
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true;
				this.fromData.school_id = uni.getStorageSync('school_id');
				groupCreate(this.fromData).then((res) => {
					if (res.code === 1) {
						groupPay({
							order_id: res.data.order_id
						}).then((ret) => {
							if (ret.code === 1) {
								uni.requestPayment({
									provider: "wxpay", //支付类型-固定值
									timeStamp: ret.data.wx_pay.timeStamp + "", // 时间戳（单位：秒）
									nonceStr: ret.data.wx_pay.nonceStr, // 随机字符串
									package: ret.data.wx_pay.package, // 固定值
									signType: ret.data.wx_pay.signType, //固定值
									paySign: ret.data.wx_pay.paySign, //签名
									success: (ren) => {
										this.isAJAX = false;
										tools.success("支付成功");
										uni.setStorageSync('orderPayType', 3)
										setTimeout(() => {
											uni.switchTab({
												url: "/pages/order/index"
											})
										}, 1000)
									},
									fail: (err) => {
										this.isAJAX = false;
										tools.error("支付失败");
										uni.setStorageSync('orderPayType', 3)
										setTimeout(() => {
											uni.switchTab({
												url: "/pages/order/index"
											})
										}, 1000)
									},
								});
							} else {
								this.isAJAX = false;
								tools.error("支付失败");
								uni.setStorageSync('orderPayType', 3)
								setTimeout(() => {
									uni.switchTab({
										url: "/pages/order/index"
									})
								}, 1000)
							}
						})
					} else {
						this.isAJAX = false;
						tools.error(res.msg);
					}
				})
			},
			scrolltolower() {
				console.log('触底');
			},
			blur() {
				if (this.goods_info.is_quota == 1) {
					if (this.fromData.number >= this.goods_info.quota_num) {
						tools.error('限购'+ this.goods_info.quota_num + '张')
						this.fromData.number = this.goods_info.quota_num
					}
				}
				if (this.fromData.number >= 99) {
					tools.error('购买数量最大为99')
					this.fromData.number = 99
				} else if (this.fromData.number <= 0) {
					tools.error('购买数量最少为1')
					this.fromData.number = 1
				}
			},
			setNum(num) {
				if (num === 1) {
					// 减
					if (this.fromData.number <= 1) {
						tools.error('购买数量最少为1')
						return
					}
					--this.fromData.number
				} else {
					// 加
					if (this.goods_info.is_quota == 1) {
						if (this.fromData.number >= this.goods_info.quota_num) {
							tools.error('限购'+ this.goods_info.quota_num + '张')
							return
						} else if (this.fromData.number >= 99) {
							tools.error('购买数量已达最大值')
							return
						}
					}
					++this.fromData.number
				}
			},
			setTimeData(timeData) {
				let time = ''
				let array = ''
				timeData.forEach((v, k) => {
					v.forEach((i, j) => {
						let timeTwo = ''
						if (j == 0 || j == 3) {
							timeTwo = i + '-'
						} else {
							timeTwo = i
						}
						array = array + timeTwo
					})
					if (timeData.length === k + 1) {
						time = time + array + ''
					} else {
						time = time + array + ' / '
					}
					array = ''
				})
				console.log(time);
				return time
			},
			groupInfo() {
				groupInfo({
					id: this.fromData.id,
					shop_id: this.fromData.shop_id
				}).then((res) => {
					if (res.code === 1) {
						if (res.data.usable_time === 2) {
							res.data.timeData = this.setTimeData(res.data.usable_time_arr)
						}
						this.goods_info = res.data
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.sc-class {
		text-decoration: line-through
	}

	.goods-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
	}

	.but {
		width: 40%;
		height: 80rpx;
		line-height: 80rpx;
	}

	.w-150 {
		width: 340rpx;
	}

	.j {
		width: 40rpx;
		height: 40rpx;
	}

	.input {
		max-width: 50rpx;
		margin: 0 10rpx;
		text-align: center;
	}
</style>