shop_app/pages/success/index.vue

<template>
	<view class="pay order">
		<view class="pay-info">
			<view style="text-align: center;">
				<up-icon class="icon" name="checkmark-circle-fill" :color="Color" size="50" />
			</view>
			
			<view class="title">订单支付成功</view>
			<view class="pay-info-text">
				<text>下单时间</text>
				<text class="text">{{item.created_at}}</text>
			</view>
			<view class="pay-info-text">
				<text>支付方式</text>
				<text class="text">支付宝支付</text>
			</view>
			<view class="row">
				<view class="pay-info-text">
					<text>支付金额</text>
					<text class="text">¥{{item.total_price}}</text>
				</view>
				<view class="vip_desc" v-if="vipSave * 100 > 0">会员本单为您节省{{vipSave}}元</view>
			</view>
			<view class="pay-info-text">
				<text>支付状态</text>
				<text class="text">成功</text>
			</view>
		</view>
		<view class="pay-btn">
			<text class="btn2" @click="toWeb(0)" v-if="is_subscribe == 0">关注公众号 订阅物流</text>
			<text class="btn2" @click="toWeb(1)" v-else-if="is_subscribe == 1">逛逛首页</text>
			<text class="btn1" @click="toOrder">查看订单</text>
		</view>
		
		<buy-succsess :showBuy="showBuy" @close="showBuy = false" :payPrice="item.total_price" :from="from" :link_id="link_id" @share="shareSuccess"></buy-succsess>
		
		<!-- 隐私协议弹窗 -->
		<privacy-popup :show-dialog="showPrivacy" @close="showPrivacy = false" @agree="agreePrivacy()" @refuse="refusePrivacy()"></privacy-popup>
		
		<!-- 为你推荐 -->
		<view class="forYou" v-if="hotList.length">
			<image class="pic" src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/06/04/46htQZUX302oWnlo09LHUlbUL0gt1VaWftK34mUl.png"></image>
			<view class="groupBox">
				<view v-for="item in hotList" :key="item.id" class="item" @click.stop="hanleJump(item.id)">
					<image :src="item.face_img" class="img" mode="aspectFill"></image>
					<view class="zong">
						<view class="tit">{{item.title}}</view>
						<view class="number">
							<text class="icon">￥</text>
							<text v-if="item.price > 0">{{item.price}}</text>
							<block v-else>
								<text v-if="item.max_price == item.min_price">{{item.min_price}}</text>
								<text v-else>{{item.min_price}}~{{item.max_price}}</text>
							</block>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom" v-if="page >= lastPage">— 没有更多啦 —</view>
		</view>
		
		<up-popup :show="showCase" :customStyle="customStyle" catchtouchmove="preventD" :closeOnClickOverlay="false" mode="center">
			<view class="caseBox">
				<view class="title">您的跟团分享社群积分已到账</view>
				<view class="num">积分<text>+{{scoreShareInfo.share_score * 1}}</text></view>
				<view class="copycase" @click="showCase = false">知道了</view>
			</view>
		</up-popup>
		
	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { get, post } from '@/api/request.js'
	import buySuccsess from '@/components/buy/BuySuccess.vue'
	import privacyPopup from '@/components/privacyPopup/index.vue'
	import { Style } from '@/utils/list.js'
	import { uniShare } from '@/components/common.js'
	
	export default {
		components: {
			buySuccsess,
			privacyPopup
		},
		setup() {
			const data = reactive({
				customStyle: {
					width: '86%',
					'border-radius': '10px'
				},
				showBuy: false,
				id: '',
				type: '',
				item: {},
				goods: {},
				shareUrl: '',
				imageUrl: '',
				pay_id: '',
				role: Number(uni.getStorageSync('role')) !== 1,
				score_on: Number(uni.getStorageSync('score_on')) === 1,
				from: 0,
				link_id: 0,
				Color: uni.getStorageSync('theme_color'),
				priceColor: Style[uni.getStorageSync('theme_index') * 1].priceColor,
				needPrivacy: false,
				showPrivacy: false,
				is_subscribe: -1,
				page: 1,
				lastPage: 0,
				hotList: [],
				scoreShareInfo: {},
				showCase: false,
				showDing: false,
				vipSave: 0
			})
			
			async function getInfo() {
				let res = ''
				if (data.type == 1) {
					res = await get(`/api/v1/orderMain/${data.id}`)
				} else {
					res = await get(`/api/v1/order/${data.id}`)
				}
				data.item = res.data
				let price = 0
				let am = 0
				if (data.type == 1) {
					let oeder = res.data.orders
					oeder.forEach((i) => {
						if(i.orderVipSaved && i.orderVipSaved.total_saved_money * 100 > 0) {
							am += i.orderVipSaved.total_saved_money * 100
						}
						i.items.forEach((j) => {
							if (j.price * 1 > price) {
								price = j.price
								data.goods = j
							}
						})
					})
				} else {
					if(res.data.orderVipSaved && res.data.orderVipSaved.total_saved_money * 100 > 0) {
						am = res.data.orderVipSaved.total_saved_money * 100
					}
					let list = res.data.items
					list.forEach((j) => {
						if (j.price > price) {
							price = j.price
							data.goods = j
						}
					})
				}
				data.vipSave = (am / 100).toFixed(2)
			}

			function toOrder() {
				uni.redirectTo({
					url: '/pages/order/list/index'
				})
			}

			// 分享路径
			async function getShareUrl() {
				if(data.link_id) {
					let query = `id=${data.goods.shop_goods_id}&pay_id=${data.pay_id}&link_id=${data.link_id}`
					await post('/api/v1/user/share', {
						page: 'pages/smallshop/classTwo',
						query: query
					}).then((res) => {
						data.shareUrl = res.data.path
					})
				} else if (data.goods.shop_group_goods_id != 0) {
					let query = `id=${data.goods.shop_group_goods_id}`
					if(data.role && data.score_on && !data.from) {
						query = `id=${data.goods.shop_group_goods_id}&pay_id=${data.pay_id}`
					}
					await post('/api/v1/user/share', {
						page: 'pages/groups/index',
						query: query
					}).then((res) => {
						data.shareUrl = res.data.path
					})
				} else {
					let query = `id=${data.goods.shop_goods_id}`
					if(data.role && data.score_on && !data.from) {
						query = `id=${data.goods.shop_goods_id}&pay_id=${data.pay_id}`
					}
					await post('/api/v1/user/share', {
						page: 'pages/productDetails/index',
						query: query
					}).then((res) => {
						data.shareUrl = res.data.path
					})
				}
				console.log('分享链接', data.shareUrl, data.goods.shop_group_goods_id)
			}
			
			const toWeb = (val) => {
				if(val == 0) {
					uni.navigateTo({
						url: '/pages/article/index'
					})
				} else if(val == 1) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			}
			
			// 获取分享图
			async function getShareTemplate() {
				await get(`/api/v1/goods/share/${data.goods.shop_goods_id}`, { type: 6 }).then((res) => {
					data.imageUrl = res.data.image
				})
			}
			
			function completeAvatar() {
				data.showBuy = true
			}
			
			function getShowPrivacy() {
				if(uni.getPrivacySetting) {
					uni.getPrivacySetting({
						success: res => {
							console.log("是否需要授权:", res.needAuthorization, ", 隐私协议的名称为:", res.privacyContractName)
							if (res.needAuthorization) {
								data.needPrivacy = true
							} else{
								data.needPrivacy = false
							}
						},
						fail: () => { },
						complete: () => { },
				  })
				} else {
				  // 低版本基础库不支持 wx.getPrivacySetting 接口，隐私接口可以直接调用
				  data.needPrivacy = false
				}
			}
			
			function refusePrivacy() {
				data.showPrivacy = false
				data.needPrivacy = true
			}
			
			function agreePrivacy() {
				data.showPrivacy = false
				data.needPrivacy = false
			}
			
			function getUserInfo() {
				get('/api/v1/shopScore/user').then((res) => {
					data.is_subscribe = res.data.user && res.data.user.is_subscribe
					uni.setStorageSync('subscribe', data.is_subscribe)
				})
			}
			
			const getHotGroup = () => {
				get('/api/v1/special/hot', { page: data.page }).then((res) => {
					data.hotList = data.hotList.concat(res.data)
					data.lastPage = res.meta.last_page
				})
			}
			
			const hanleJump = (id) => {
				uni.navigateTo({
					url: '/pages/groups/index?id=' + id
				})
			}
			
			function receiveScoreShare() {
				post('/api/v1/shopScore/share/receive', { pay_id: data.pay_id }).then((res) => {
					// 1下单人 2下单人当前销售 其他人返回值为空数组
					if(res.data.length === 0) {
						
					} else {
						data.scoreShareInfo = res.data
						data.showCase = true
					}
				})
			}
			
			function shareSuccess() {
				data.showBuy = false
				let title = '老板，跟团成功了，期待早日收到货~'
				let imageUrl = data.imageUrl
				let path = data.shareUrl
				uniShare(title, imageUrl, path)
				receiveScoreShare()
			}
			
			return {
				uniShare,
				...toRefs(data),
				getInfo,
				toOrder,
				getShareUrl,
				toWeb,
				getShareTemplate,
				completeAvatar,
				getUserInfo,
				getShowPrivacy,
				refusePrivacy,
				agreePrivacy,
				getHotGroup,
				hanleJump,
				receiveScoreShare,
				shareSuccess
			}
		},
		async onLoad(options) {
			// await this.$onLaunched
			this.id = options.id
			this.link_id = options.link_id || 0
			this.type = options.type
			this.pay_id = options.pay_id || ''
			this.from = Number(options.from) || 0
			await this.getInfo()
			setTimeout(async() => {
				await this.getShareUrl()
			}, 500)
			await this.getShareTemplate()
			if(uni.getStorageSync('is_default_avatar')) {
				
			} else {
				this.showBuy = true
			}
			this.getShowPrivacy()
			this.getHotGroup()
		},
		onShow() {
			this.getUserInfo()
		},
		onReachBottom() {
			if (this.page < this.lastPage) {
				this.page++
				this.getHotGroup()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay {
		margin: 100rpx 24rpx;
		box-sizing: border-box;
		&-info {
			position: relative;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 30rpx;
			box-sizing: border-box;
			.icon {
				position: absolute;
				top: -50rpx;
				left: 50%;
				transform: translate(-50%);
			}
			.title {
				text-align: center;
				font-size: 34rpx;
				font-weight: bold;
				padding: 30rpx 0 15rpx;
			}
			&-text {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;
				padding: 24rpx 0;
				.text {
					font-size: 26rpx;
					color: #555555;
				}
			}
			&-text:not(:last-child) {
				border-bottom: 2rpx solid #e5e5e5;
			}
			.row{
				padding: 24rpx 0;
				border-bottom: 2rpx solid #e5e5e5;
				.pay-info-text{
					border-bottom: none;
					padding: 0;
				}
			}
			.vip_desc{
				color: #FFA953;
				text-align: right;
				font-size: 26rpx;
				margin-top: 10rpx;
			}
		}

		&-btn {
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-top: 40rpx;
			.btn1,
			.btn2 {
				font-size: 30rpx;
				width: 100%;
				height: 77rpx;
				line-height: 77rpx;
				border-radius: 49rpx;
				text-align: center;
				margin-top: 30rpx;
			}
			.btn1 {
				border: 1px solid #98989f;
				margin-right: 40rpx;
				background-color: #fff;
			}
			.btn2 {
				color: #fff;
				background: v-bind('Color');
			}
		}
	}

	.order {
		&-icon {
			display: flex;
			justify-content: center;
			font-size: 34rpx;
			text {
				margin-left: 10rpx;
			}
		}
		&-text {
			color: #666666;
			font-size: 26rpx;
			margin-top: 20rpx;
		}
		.popup {
			padding: 100rpx 0;
			text-align: center;
			image {
				width: 335rpx;
				height: 335rpx;
				background: #bbbbbb;
				border-radius: 8rpx;
			}
		}
	}
	.forYou{
		padding-top: 80rpx;
		.pic{
			width: 180px;
			height: 18px;
			display: block;
			margin: 20rpx auto;
		}
		.groupBox{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			text-align: center;
			padding: 20rpx 0;
			box-sizing: border-box;
			.item{
				width: 48.5%;
				margin-bottom: 20rpx;
				background: #fff;
				border-radius: 10rpx;
				.img{
					width: 100%;
					height: 343rpx;
					border-radius: 8rpx 8rpx 0 0;
				}
				.zong {
					padding: 0 20rpx;
					box-sizing: border-box;
					padding-bottom: 20rpx;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					height: 200rpx;
					.tit{
						margin: 10rpx 0;
						text-align: left;
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						overflow: hidden !important;
						text-overflow: ellipsis !important;
						display: -webkit-box !important;
						-webkit-line-clamp: 2 !important;
						-webkit-box-orient: vertical !important;
					}
					.number{
						text-align: left;
						margin-bottom: 10rpx;
						color: v-bind('priceColor');
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
				}
			}
		}
		.bottom {
			text-align: center;
			font-size: 24rpx;
			color: #999999;
			padding: 0 0 60rpx;
		}
	}
	.caseBox{
		padding: 40rpx;
		box-sizing: border-box;
		.tit{
			font-size: 30rpx;
			color: #000;
			font-weight: 600;
			padding: 40rpx;
			text-align: center;
			line-height: 50rpx;
		}
		.copycase{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 80rpx;
			width: 100%;
			border-radius: 8rpx;
			background: v-bind('Color');
			font-size: 26rpx;
			color: #fff;
		}
		.title{
			font-size: 30rpx;
			color: #000;
			font-weight: 600;
			padding: 20rpx 0 40rpx;
			text-align: center;
		}
		.num{
			text-align: center;
			font-size: 28rpx;
			padding-bottom: 40rpx;
			text{
				color: v-bind('Color');
				font-weight: 600;
				font-size: 36rpx;
			}
		}
	}
</style>