cashier_wx/userPackage/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 ">
				<view class="img-box">
					<up-image width="158rpx" height="158rpx" radius="14rpx" :src="item.goodsImg"></up-image>
					<view class="tag" v-if="item.tieredDiscount&&item.tieredDiscount.length>0">阶梯优惠</view>
				</view>
				<view class=" u-flex-1 u-p-l-16 u-flex u-row-between u-col-center">
					<view>
						<view class="font-bold u-line-2 u-font-32">{{item.packageName}}</view>
						<view style="max-width: 336rpx;" class="u-line-1 u-m-t-10 color-666">{{item.description}}</view>

					</view>
					<view class="u-p-l-10 ">
						<!-- <view class="color-333 no-wrap">
							数量：{{item.number}}
						</view> -->
						<view class=" font-bold price ">
							<text class="u-font-26"> ¥</text>
							<text class="u-font-40">{{item.price}}</text>
						</view>
						<view class="  old-price">
							¥{{item.originPrice}}
						</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-32 up-border-top u-p-t-28 u-p-b-28">

				<view class="u-flex u-row-between u-p-t-16 u-p-b-16">
					<text class="u-font-32 font-bold">支付方式</text>
					<text class="">微信支付</text>
				</view>
			</view>

		</view>




		<view class="desc" v-if="item.tieredDiscount&&item.tieredDiscount.length>0">

			<view class="u-flex u-row-between ">
				<view class="name">分享说明</view>
				<view class="u-flex color-666" @click="showDesc=!showDesc" style="align-items: baseline;">
					<text class="u-m-r-18">{{showDesc?'收起':'展开'}}</text>
					<view class="guodu" :class="{rotate:!showDesc}">
						<up-icon name="arrow-down" bold></up-icon>
					</view>
				</view>

			</view>
			<template v-if="showDesc">
				<view class="u-m-t-26 text-center table" v-if="item.tieredDiscount">
					<view class="u-flex header color-666">
						<view class="u-flex-1 u-p-t-32 u-p-b-32">分享人数</view>
						<view class="u-flex-1 u-p-t-32 u-p-b-32">购买价格（元）</view>
					</view>
					<view class="u-flex row" v-for="(step,index) in item.tieredDiscount" :key="index">
						<view class="u-flex-1 u-p-t-32 u-p-b-32">{{step.peopleNum}}</view>
						<view class="u-flex-1 u-p-t-32 u-p-b-32">¥{{step.price}}</view>
					</view>
				</view>

				<view class="u-m-t-26">
					<view>
						分享期限（小时）：{{item.expireHours}}
					</view>
					<view class="u-m-t-10">
						规定期限内的助力才会被计入
					</view>
					<view class="u-m-t-40">
						如何才是分享成功？被分享人只需要点击《助力》，提示助力成功后即可
					</view>

				</view>
			</template>




		</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/market/package.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 showDesc = ref(true)

	const item = reactive({})
	onShow(() => {
		const data = uni.getStorageSync('group_buying_order')
		data.goodsImg = data.images[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: '支付中……'
		})
		let paramId = item.paramId
		if (!paramId) {
			paramId = await Api.createOrder({
				packageId: item.id,
				shopId: item.shopId,
			})
		}
		if (!paramId) {
			return uni.showToast({
				title: '创建订单失败',
				icon: 'none'
			})
		}

		const openId = await getOpenId()
		uni.hideLoading()
		if (openId) {
			Api.ppOrderPay({
				paramId,
				shopId: item.shopId,
				number: item.number,
				openId
			}).then(orderRes => {
				pay(orderRes.payInfo).then(res => {
					console.log(res)

					if (res) {
						uni.redirectTo({
							url: '/userPackage/order/detail?orderId=' + paramId + '&shopId=' +
								item.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.price) {
			return 0;
		}
		return BigNumber(item.number).times(item.price).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: 16rpx 34rpx;
			margin: 32rpx 30rpx;
			background-color: #F8F8F8;
		}
	}

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

	.img-box {
		position: relative;

		.tag {
			position: absolute;
			left: 0;
			top: 0;
			background: #4C2828;
			border-radius: 12rpx 0 16rpx 0;
			color: #faeac6;
			font-size: 24rpx;
			font-weight: 700;
			padding: 4rpx 12rpx;
		}
	}

	.desc {
		padding: 32rpx 46rpx;
		background-color: #fff;
		margin-top: 32rpx;

		.name {
			font-weight: 700;
			font-size: 32rpx;
		}

		.table {
			border: 2rpx solid #EDEDED;
			border-radius: 8rpx;
			margin: 0 52rpx;

			.header {
				background: #f8f8f88f;
			}

			.row {
				border-top: 2rpx solid #EDEDED;

				&:first-child {
					border-top: none;
				}
			}
		}

		.rotate {
			transform: rotate(-90deg);
		}
	}
</style>