shop_app/pages/order/comment/success.vue

<template>
	<view class="order">
		<view class="order-icon">
			<up-icon name="checkmark-circle-fill" :color="Color" size="25" />
			<text>晒单已提交</text>
		</view>
		<view v-if="isReward == 1" style="margin-top: 30rpx;">
			您已获得<text :style="{color: Color}">{{couponData.amount}}元</text>优惠券
		</view>
		<view v-if="score_comment" style="margin-top: 30rpx;">
			您的晒单积分奖励已到账，积分<text :style="{color: Color}">+{{score_comment}}</text>
		</view>
		<view class="order-btn">
			<button @click="handleShare()" class="green">分享到群聊</button>
		</view>
	</view>
</template>

<script>
import { post } from '@/api/request.js'
import { ref, reactive, toRefs } from 'vue'
import { uniShare } from '@/components/common.js'

export default {
	setup() {
		const data = reactive({
			imageUrl: '',
			shareUrl: '',
			ids: '',
			id: '',
			isReward: '',
			couponData: {},
			score_comment: '',
			Color: uni.getStorageSync('theme_color')
		})
		
		function toHome() {
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
		
		function toOrder() {
			uni.redirectTo({
				url: '/pages/order/info/index?id=' + id.value
			})
		}

		// 获取是否设置优惠券
		const getShopBaskSetting = () => {
			post('/api/v1/Shop/getShopBaskSetting').then((res) => {
				data.isReward = res.data.is_reward
				data.couponData = res.data.shop_coupon
			})
		}
		
		// 获取分享图
		const getShareTemplate = () => {
			post('/api/v1/sales/share', { shop_goods_id: data.ids }).then((res) => {
				res.data.forEach((item) => {
					if (item.type === 4) {
						data.imageUrl = item.image
					}
				})
			})
		}
		
		// 分享路径
		const getShareUrl = () => {
			post('/api/v1/user/share', {
				page: 'pages/share/index',
				query: `id=${data.id}`
			}).then((res) => {
				data.shareUrl = res.data.path
			})
		}
		
		function handleShare() {
			let title = '本团已收到多个好评，快来看看吧！'
			let imageUrl = data.imageUrl
			let path = data.shareUrl
			uniShare(title, imageUrl, path)
		}

		return {
			uniShare,
			...toRefs(data),
			toHome,
			toOrder,
			getShareTemplate,
			getShareUrl,
			getShopBaskSetting,
			handleShare
		}
	},
	async onLoad(options) {
		this.id = options.id
		this.score_comment = options.score_comment || ''
		this.ids = parseInt(options.ids)
		await this.$onLaunched
		this.getShareTemplate()
		this.getShareUrl()
		this.getShopBaskSetting()
	}
}
</script>

<style lang="scss" scoped>
.green {
  background: v-bind('Color');
  color: #ffff;
  font-size: 32rpx;
  width: 80%;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
}
.order {
  text-align: center;
  padding: 50rpx 0;
  background-color: #fff;
  &-icon {
    display: flex;
    justify-content: center;
    font-size: 34rpx;
    text {
      margin-left: 10rpx;
      font-weight: bold;
    }
  }
  &-btn {
    display: flex;
    justify-content: center;
    margin-top: 60rpx;
    .btn1,
    .btn2 {
      font-size: 30rpx;
      width: 38%;
      height: 77rpx;
      line-height: 77rpx;
      border-radius: 49rpx;
    }
    .btn1 {
      border: 1px solid #98989f;
      margin-right: 40rpx;
    }
    .btn2 {
      color: #fff;
      background: $Color3;
    }
  }
}
</style>