cashier_wx/groupBuying/confirm-order/confirm-order.vue

<template>
	<view class="min-page bg-f7 u-font-28 color-333 u-p-30">
		<view class="info">
			<view class="goods u-flex u-col-center u-p-t-22 u-p-b-22 u-border-bottom">
				<up-image width="158rpx" height="158rpx" radius="14rpx" :src="item.goodsImg"></up-image>
				<view class=" u-flex-1 u-p-l-16">
					<view class="u-flex u-col-center u-row-between">
						<view class="u-flex tuan-members">
							<image :src="imgs.pin" class="pin" mode=""></image>
							<text class="">{{item.groupPeopleNum}}人团</text>
						</view>
					</view>
					<view class="u-m-t-16 u-flex u-col-center u-row-between">
						<view style="max-width: 326rpx;">
							<view class="font-bold u-line-1" v-if="item">{{item.wareName}}</view>
							<view class="u-flex u-m-t-10 u-col-center ">
								<view class="price">
									<text class="u-font-30">¥</text>
									<text class="u-font-48 font-bold">{{item.groupPrice}} </text>
								</view>
								<view class="old-price u-m-l-32">
									<text>¥</text>
									<text>{{item.originalPrice}} </text>
								</view>
							</view>
						</view>
						<view class="u-p-l-10 color-333 no-wrap">
							数量：{{item.number}}
						</view>
					</view>
				</view>
			</view>


			<view class="shop ">
				<view class="u-flex">
					<text style="min-width: 180rpx;" class="color-666">可核销门店：</text>
					<text>{{item.shopName}}</text>
				</view>
				<view class="u-m-t-32 u-flex">
					<text style="min-width: 180rpx;" class="color-666">门店地址：</text>
					<text>{{item.shopAddress}}</text>
				</view>
			</view>

			<view class="u-m-t-20 u-p-t-28 u-p-b-28">
				<view class="u-flex u-row-between u-p-t-20 u-p-b-20">
					<text>商品总额</text>
					<text class="u-font-32">¥{{totalPayPrice}}</text>
				</view>
				<view class="u-flex u-row-between u-p-t-20 u-p-b-20">
					<text>支付方式</text>
					<text class="u-font-32">微信支付</text>
				</view>
			</view>

		</view>

		<view style="height: 100px;"></view>
		<view class="u-flex bottom">
			<view>
				<text class="color-666">合计：</text>
				<text class="price">¥{{totalPayPrice}}</text>
			</view>
			<view class="btn" @click="payExchange">去支付</view>
		</view>
	</view>
</template>

<script setup>
	import * as Api from '@/common/api/order/gbOrder.js'
	import {
		pay
	} from '@/utils/pay.js'
	import {
		getOpenId
	} from '@/utils/uniapp.js'

	const imgs = {
		bg: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/d21f2dfd7bec44618f2d5e4b88372b08.png',
		pin: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/3947892924dd481782331513aff00eb3.png'
	}

	const item = reactive({})
	onShow(() => {
		const data = uni.getStorageSync('group_buying_order')
		const wareImgs = data.wareImgs.split(',').filter(v => v)
		data.goodsImg = wareImgs[0]
		Object.assign(item, data)
		console.log(item)
	})

	function dingyue() {
		return new Promise((revlove, reject) => {
			uni.requestSubscribeMessage({
				tmplIds: ['JGPAGmqcPEgWB6mvAl0SC5cMqr5H5Qjcim8JCpHAZd0',
					'F4OyUhe_ZQ9BR731jlkaN2QXAUaA3HBZuUeVPfraSz0'
				],
				success(res) {},
				complete() {
					revlove()
				}
			})
		})

	}
	async function payExchange() {
		await dingyue();
		uni.showLoading({
			title: '支付中……'
		})
		const openId = await getOpenId()
		uni.hideLoading()
		if (openId) {
			Api.exchange({
				paramId: item.id,
				shopId: item.shopId,
				number: item.number,
				groupOrderNo: item.groupOrderNo || '',
				openId
			}).then(orderRes => {
				pay(orderRes.payInfo).then(res => {
					console.log(res)

					if (res) {
						uni.redirectTo({
							url: '/groupBuying/success/index?detailId=' + orderRes.record
								.id + '&shopId=' + orderRes.record.shopId
						})
					} else {
						uni.showToast({
							title: '开团失败',
							icon: 'none'
						})
					}

				})

			})
		} else {
			uni.showToast({
				title: '鉴权失败，开团失败',
				icon: 'none'
			})
		}
	}

	import {
		BigNumber
	} from "bignumber.js";
	const totalPrice = computed(() => {
		if (!item.groupPrice) {
			return 0;
		}
		return BigNumber(item.number).times(item.originalPrice).toNumber()
	})

	const totalPayPrice = computed(() => {
		if (!item.groupPrice) {
			return 0;
		}
		return BigNumber(item.number).times(item.groupPrice).toNumber()
	})


	let shareItem = null

	function share(item) {
		shareItem = item
	}
	onShareAppMessage(() => {
		console.log('onShareAppMessage')
		console.log(shareItem)
		const query = `groupOrderNo=${shareItem.groupOrderNo}&shopId=${shareItem.shopId}`
		return wxShare({
			title: shareItem.wareJson.wareName,
			imageUrl: shareItem.goodsImg,
			path: '/groupBuying/detail/index' + '?' + query,
			query,
		})
	})
</script>

<style lang="scss" scoped>
	.info {
		border-radius: 16rpx;
		background-color: #fff;
		padding: 0 24rpx;

		.goods {
			background-color: #fff;
			padding: 22rpx 0;

			.pin {
				width: 60rpx;
				height: 38rpx;
			}

			.tuan-members {
				padding: 0 16rpx 0 0;
				border-radius: 0 6rpx 6rpx 0;
				background: #4C2828;
				color: #f5d9ad;
				font-weight: 700;
			}

			.price {
				color: #ed5a2e;
			}

			.old-price {
				color: #666666;
				text-decoration-line: line-through;
			}
		}

		.u-font-48 {
			font-size: 48rpx;
		}

		.shop {
			padding: 22rpx 0;
		}
	}

	.bottom {
		padding: 42rpx 28rpx 60rpx 28rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;

		.price {
			color: #ed5a2e;
			font-size: 32rpx;
			font-weight: 700;
		}

		.btn {
			padding: 14rpx 70rpx;
			border-radius: 200rpx;
			background: #E8AD7B;
			font-size: 32rpx;
			color: #fff;
		}
	}
</style>