caimei-applets-store/pages/views/share-buy/share-buy-success.vue

<template>
    <view class="share-buy-success">
        <!-- 拼单信息 && 拼单成功 -->
        <view class="message">恭喜您拼单成功！</view>
        <share-buy-member-info
            :hasShopInfo="false"
            :memberNum="collageData.memberNum"
            :existNum="collageData.existNum"
            :shopInfo="collageData"
        ></share-buy-member-info>
        <view class="control">
            <tui-button type="base" width="600rpx" height="90rpx" shape="circle" :size="30" @click="handleToHome">
                <text>去首页逛逛</text>
            </tui-button>
            <view class="line"></view>
            <tui-button
                type="base"
                width="600rpx"
                height="90rpx"
                shape="circle"
                :plain="true"
                :size="30"
                @click="handleToOrderDetail"
            >
                <text>查看订单详情</text>
            </tui-button>
            <view class="share">
                <view v-if="canShare" @click="onShare"><text class="btn-tip">点击分享可获得优惠券领取资格</text></view>
            </view>
        </view>

        <!-- 分享 -->
        <cm-share-popup ref="sharePopup" :data="posterData" type="normal" @share="onAfterShare"></cm-share-popup>
    </view>
</template>

<script>
import { orderShare } from '@/services/api/order.js'
import { fetchCouponDisplay } from '@/services/api/coupon.js'
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            collageData: {},
            posterData: {},
            couponTipStr: ''
        }
    },
    computed: {
        ...mapGetters(['userId']),
        canShare() {
            return this.collageData.shareFlag === 1 && this.couponTipStr.indexOf('3') > -1
        }
    },
    onLoad() {
        this.collageData = uni.getStorageSync('SHARE_BUY_COLLAGE_DATA')
        this.fetchCouponDisplay()
    },
    beforeDestroy() {
        uni.removeStorageSync('SHARE_BUY_COLLAGE_DATA')
    },
    methods: {
        // 去首页
        handleToHome() {
            this.$router.switchTab('home')
        },
        // 查看订单详情
        handleToOrderDetail() {
            this.$router.navigateTo('order/order-detail?orderId=' + this.collageData.orderId)
        },
        // 获取可领取优惠券类型
        async fetchCouponDisplay() {
            try {
                const res = await fetchCouponDisplay({ userId: this.userId })
                this.couponTipStr = res.data
            } catch (e) {
                console.log('获取优惠券类型失败')
            }
        },
        // 分享结束
        async onAfterShare() {
            try {
                await orderShare({ orderId: this.collageData.orderId, userId: this.userId })
                this.$toast('分享成功')
            } catch (e) {
                this.$toast('分享失败')
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.share-buy-success {
    background-color: #fff;
    padding: 32rpx 0;

    .message {
        font-size: 34rpx;
        color: #ff457b;
        font-weight: bold;
        text-align: center;
    }

    .control {
        @extend .cm-flex-center;
        flex-direction: column;

        .line {
            height: 24rpx;
        }
        .share {
            height: 90rpx;
            line-height: 90rpx;
            text-align: center;
            color: #ff457b;
            .btn-tip {
                font-size: 24rpx;
            }
        }
    }
}
</style>