cashier_wx/groupBuying/detail/index.vue

<template>
	<view class="min-page bg-f7 color-333 u-font-28 relative">
		<view class="top" :style="topStyle">
			<up-navbar bg-color="transparent" :fixed="false" :placeholder="false" title="订单详情" left-icon-color="#fff"  @leftClick="uni.navigateBack()"
				title-color="#fff"></up-navbar>
			<view class="u-flex info u-col-center">
			</view>
		</view>
		<view class="bottom">
			<view class="time">
				<text class="color-666">剩余成团时间：</text>
				<view class="u-font-32">
					<text class="number">{{returnNum(0)}}</text>
					<text class="gap">：</text>
					<text class="number">{{returnNum(1)}}</text>
					<text class="gap">：</text>
					<text class="number">{{returnNum(2)}}</text>
				</view>
			</view>
			<view class="goods u-flex u-col-center">
				<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>
						<statusVue></statusVue>

					</view>
					<view class="u-m-t-16 u-flex u-col-center">
						<view style="width: 356rpx;">
							<view class="font-bold" v-if="item.wareJson">{{item.wareJson
.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.payAmount}} </text>
								</view>
								<view class="old-price u-m-l-32">
									<text>¥</text>
									<text>{{item.payAmount}} </text>
								</view>
							</view>
						</view>
						<view class="u-p-l-16 color-333">
							数量：{{item.num}}
						</view>
					</view>
				</view>
			</view>

			<view class="refund" v-if="item.status=='待退款'">已申请退款，需等待商家审核</view>
			<view class="shop-box">
				<view class="u-flex u-row-center u-flex-col u-col-center">
					<up-qrcode :val="item.verifyCode" :size="104"></up-qrcode>
					<view class="u-flex u-m-t-22 u-m-b-18 u-col-center">
						<text>{{item.verifyCode}}</text>
						<image @click="copyText(item.verifyCode)" class="copy" src="/groupBuying/static/image/copy.png">
						</image>
					</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>

			<view class="members">
				<view class="list">
					<view class="item" v-for="(user,index) in item.users" :key="index">
						<view class="box">
							<view class="u-flex  relative">
								<up-avatar size="140rpx" :src="user.userAvatar"></up-avatar>
								<view class="u-flex u-row-center absolute">
									<text class="tuanzhang" v-if="index==0">团长</text>
								</view>

							</view>
							<view class="u-line-1 u-m-t-16 color-000 text-center">{{user.userName}}</view>
						</view>

					</view>

					<view class="item">
						<view class="box">
							<view class="u-flex  relative">
								<view class="add-box u-flex u-row-center">
									<up-icon color="#D9D9D9" name="plus"></up-icon>
									<button open-type="share" class="share" @click="share(item)">分享</button>
								</view>
							</view>
							<view class="u-line-1 u-m-t-16 color-000 text-center">等待参团</view>
						</view>
					</view>
				</view>
				<view class="u-flex u-row-center">
					<view class="pin-btn">立即参与拼团</view>
				</view>
			</view>

			<view class="order">
				<view class="u-flex u-row-between">
					<view class="font-bold u-font-32">订单信息</view>

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

				<view class="u-m-t-16" v-if="showOrder">
					<view class="u-flex u-row-between item">
						<view class="color-666">商品总额</view>
						<view class="">¥99.99</view>
					</view>
					<view class="u-flex u-row-between item">
						<view class="color-666">实付金额</view>
						<view class="">¥{{item.payAmount}}</view>
					</view>
					<view class="u-flex u-row-between item">
						<view class="color-666">订单号</view>
						<view class="">{{item.orderNo}}</view>
					</view>
					<view class="u-flex u-row-between item">
						<view class="color-666">支付时间</view>
						<view class="">{{item.payTime}}</view>
					</view>
				</view>

			</view>
		</view>
		<view style="height: 100px;"></view>
		<view class="btns">
			<view class="btn" @click="refund(item)">申请退款</view>
			<button open-type="share" class="btn main" @click="share(item)">邀请好友</button>
		</view>
	</view>
</template>

<script setup>
	import statusVue from '@/groupBuying/components/status.vue'
	import * as Api from '@/common/api/order/gbOrder.js'
	import {
		wxShare
	} from '@/utils/share.js'
	import {
		computed,
		reactive
	} from 'vue'
	import {
		getRemainingHMS
	} from '@/utils/countdown.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 topStyle = {
		backgroundImage: 'url(' + imgs.bg + ')'
	}
	const showOrder = ref(true)

	function copyText(text) {
		uni.setClipboardData({
			data: text,
			success() {}
		})
	}
	const query = reactive({
		shopId: '',
		detailId: '',
	})

	function init(opt) {
		// 获取小程序进入场景和参数
		const launchOptions = uni.getLaunchOptionsSync();
		console.log(launchOptions);
		// 获取链接上的参数
		const launchOptionsQuery = launchOptions.query;
		console.log('launchOptionsQuery', launchOptionsQuery);
		Object.assign(query, launchOptionsQuery)
		console.log(opt)
		Object.assign(query, opt)
		console.log(query)
		getDetail()
	}
	const item = reactive({})

	function getDetail() {
		Api.recordDetail(query).then(res => {
			const wareJson = JSON.parse(res.wareJson)
			wareJson.wareImgs = wareJson.wareImgs.split(',').filter(v => v)
			res.wareJson = wareJson;
			res.goodsImg = wareJson.wareImgs[0];
			Object.assign(item, res)
			console.log('item', item)
		})
	}
	onLoad(init)

	let timer = null
	let nowTime = ref(Date.now())
	timer = setInterval(() => {
		nowTime.value = Date.now()
	}, 1000)

	const returnTime = computed(() => {
		nowTime.value
		return getRemainingHMS(item)
	})

	function returnNum(index) {
		return returnTime.value.split(':')[index]
	}


	function refund(item) {
		uni.showModal({
			title: '提示',
			content: '是否申请退款？',
			showCancel: true,
			success(res) {
				if (res.confirm) {
					Api.applyRefund({
						recordId: item.id,
						orderNo: item.orderNo,
					}).then(res => {
						if (res) {
							uni.showToast({
								title: '申请成功'
							})
							setTimeout(() => {
								getDetail()
							}, 1000)
						}
					})
				}
			}
		})
	}

	let shareItem = null

	function share(item) {
		shareItem = item
	}
	onShareAppMessage(() => {
		console.log('onShareAppMessage')
		return wxShare({
			title: shareItem.wareJson.wareName,
			imageUrl: shareItem.goodsImg,
			query: `detailId=${shareItem.id}&shopId=${shareItem.shopId}`,
			type: 2,
		})
	})
</script>

<style lang="scss" scoped>
	.top {
		height: 422rpx;
		background-size: cover;

		.info {
			padding: 32rpx 30rpx 0 30rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: 700;
		}


	}

	.bottom {
		margin: 0 28rpx;
		transform: translateY(-160rpx);

		.time {
			padding: 18rpx 24rpx;
			background: #FFF4E2;
			display: flex;
			align-items: center;
			border-radius: 16rpx 16rpx 0 0;

			.number {
				padding: 6rpx;
				border-radius: 16rpx;
				background: #ED5A2E;
				color: #fff;
				font-size: 32rpx;
				margin-left: 18rpx;
				margin-right: 18rpx;
			}

			.gap {
				font-size: 32rpx;
			}
		}

		.goods {
			background-color: #fff;
			padding: 22rpx 24rpx 0;
			border-radius: 0 0 16rpx 16rpx;

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

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

		.shop-box {
			background: #fff;
			padding: 32rpx 30rpx 28rpx 30rpx;
			border-radius: 0 0 16rpx 16rpx;
		}

		.copy {
			width: 22rpx;
			height: 22rpx;
			margin-left: 22rpx;
		}

		.shop {
			border-radius: 8rpx;
			background: #F8F8F8;
			padding: 16rpx 34rpx;
		}

		.relative {
			position: relative;
		}

		.members {
			padding: 26rpx 24rpx;
			border-radius: 16rpx;
			margin-top: 32rpx;
			background-color: #fff;

			.list {
				display: flex;
			}

			.item {
				width: calc(100% / 3);
				display: flex;

				.add-box {
					width: 140rpx;
					height: 140rpx;
					border: 2rpx dashed #D9D9D9;
					border-radius: 50%;
					overflow: hidden;
					position: relative;

					.share {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						opacity: 0;
					}
				}

				&:nth-of-type(2n) {
					justify-content: center;
				}

				&:nth-of-type(3n) {
					justify-content: flex-end;
				}

				.box {
					display: flex;
					flex-direction: column;
				}

				.absolute {
					bottom: 0;
					display: flex;
					justify-content: center;
					left: 0;
					right: 0;
				}

				.tuanzhang {
					padding: 8rpx 18rpx;
					border-radius: 20rpx;
					background: #ED5A2E;
					color: #fff;
					bottom: 0;
				}
			}
		}

		.order {
			padding: 32rpx 28rpx;
			border-radius: 16rpx;
			margin-top: 32rpx;
			background-color: #fff;

			.item {
				padding: 16rpx 0;
			}
		}
	}

	.btns {
		position: fixed;
		left: 87rpx;
		right: 87rpx;
		bottom: 0;
		padding-bottom: 60rpx;
		display: flex;
		gap: 40rpx;

		.btn {
			flex: 1;
			padding: 16rpx 28rpx;
			border-radius: 200rpx;
			text-align: center;
			font-size: 32rpx;
			line-height: 1;
			margin: 0;
			justify-content: center;
			border: 2rpx solid #E8AD7B;
			background: #FFF;
			color: #E8AD7B;

			&.main {
				background-color: #E8AD7B;
				color: #fff;
			}
		}
	}

	.guodu {
		transition: all .3s;
	}

	.pin-btn {
		padding: 14rpx 60rpx;
		border-radius: 200rpx;
		text-align: center;
		font-size: 32rpx;
		justify-content: center;
		border: 2rpx solid #E8AD7B;
		background: #E8AD7B;
		color: #fff;
		margin-top: 32rpx;
	}

	.rotate {
		transform: rotate(-90deg);
	}

	.refund {
		padding: 18rpx 164rpx;
		border-radius: 0 0 16rpx 16rpx;
		background: #FFF4E2;
		font-weight: 700;
		margin-bottom: 32rpx;
	}
</style>