shop_app/pages/success/two.vue

<template>
	<view class="payBox">
		<view class="buy" v-if="show">
			<up-icon name="checkmark-circle-fill" size="60" :color="Color" />
			<view class="title"><text>{{levelLink.customer_message}}</text></view>
			<view class="box">
				<image v-if="levelLink.add_customer == 1" :src="levelLink.crop_qr_code" show-menu-by-longpress @longtap="levelRecord('scan_qr_code')" mode="widthFix" class="img"></image>
				<image v-else :src="levelLink.jump_link_image" mode="widthFix" class="img" @click="toWeb"></image>
				<view v-if="levelLink.add_customer == 1" class="desc">长按识别二维码添加客服</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { get, post } from '@/api/request.js'
	
	export default {
		setup() {
			const data = reactive({
				show: false,
				id: '',
				type: '',
				pay_id: '',
				link_id: '',
				from: 0,
				Color: uni.getStorageSync('theme_color'),
				levelLink: {},
				goods: {},
				imageUrl: '',
				shareUrl: ''
			})
			
			async function getLevelLink() {
				await get(`/api/v1/goods/levelLink/${data.link_id}`).then((res) => {
					data.levelLink = res.data
					data.show = true
					if(res.data.add_customer == 1) {
						levelRecord('view_qr_code')
					}
				})
			}
			
			async function levelRecord(type) {
				let params = {
					level_link_id: data.link_id,
					type: type
				}
				await post(`/api/v1/levelLink/record`, params).then((res) => {
					
				})
			}
			
			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}`)
				}
				let price = 0
				if (data.type == 1) {
					let oeder = res.data.orders
					oeder.forEach((i) => {
						i.items.forEach((j) => {
							if (j.price * 1 > price) {
								price = j.price
								data.goods = j
							}
						})
					})
				} else {
					let list = res.data.items
					list.forEach((j) => {
						if (j.price > price) {
							price = j.price
							data.goods = j
						}
					})
				}
			}
			
			async function getShareTemplate() {
				await get(`/api/v1/goods/share/${data.goods.shop_goods_id}`, { type: 6 }).then((res) => {
					data.imageUrl = res.data.image
				})
			}
			
			async function getShareUrl() {
				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
				})
			}
			
			async function toWeb() {
				await levelRecord('click_link')
				if(data.levelLink.h5_link) {
					if(data.levelLink.link_type == 'customer') {
						uni.openCustomerServiceChat({
							extInfo: {url: data.levelLink.h5_link},
							corpId: 'ww5ea85f3dd28bd492',
							success(res) { console.log(res) }
						})
					} else if(data.levelLink.link_type == 'web') {
						uni.navigateTo({ url: '/pages/index/link?advUrl=' + encodeURIComponent(data.levelLink.h5_link) })
					} else if(data.levelLink.link_type == 'mini_program') {
						uni.reLaunch({url: data.levelLink.h5_link})
					}
				}
			}
			
			return {
				...toRefs(data),
				getShareTemplate,
				getShareUrl,
				getInfo,
				getLevelLink,
				levelRecord,
				toWeb
			}
		},
		async onLoad(options) {
			// await this.$onLaunched
			this.id = options.id
			this.type = options.type
			this.pay_id = options.pay_id || ''
			this.from = Number(options.from) || 0
			this.link_id = options.link_id || 0
			this.show = true
			await this.getLevelLink()
			await this.getInfo()
			this.getShareTemplate()
			this.getShareUrl()
		},
		onShareAppMessage() {
			return {
				title: '老板，跟团成功了，期待早日收到货~',
				imageUrl: this.imageUrl,
				path: this.shareUrl
			}
		}
	}
</script>

<style lang="scss" scoped>
	.payBox{
		display: flex;
		justify-content: center;
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding-top: 140rpx;
	}
	.buy {
		text-align: center;
		padding: 60rpx 0;
		background-color: #fff;
		width: 90%;
		border-radius: 14rpx;
		height: fit-content;
		.title {
			font-size: 36rpx;
			color: v-bind('Color');
			margin: 30rpx 0;
			line-height: 48rpx;
			text{
				// font-weight: 600;
			}
		}
		.box{
			.img{
				width: 440rpx;
				height: 440rpx;
			}
			.desc{
				color: #444;
				font-size: 30rpx;
				margin-top: 16rpx;
			}
		}
	}
</style>