caimei-applets-store/pages/views/order/pay-success.vue

<template>
    <view class="pay-result">
        <!-- 提示图标 -->
        <view class="tip-icon">
            <image class="icon" :src="staticUrl + 'icon-pay-success.png'"></image>
            <view class="tip">订单支付成功~~</view>
        </view>
        <!-- 支付金额 -->
        <view class="payAmount">
            <text class="label">支付金额：</text>
            <text class="price">￥{{ orderInfo.payableAmount | priceFormat }}</text>
        </view>
        <!-- 执行操作 -->
        <view class="control">
            <tui-button
                type="base"
                width="600rpx"
                height="90rpx"
                shape="circle"
                :size="28"
                @click="toBuy"
                v-if="!hasOtherSplitOrder"
            >
                继续购买
            </tui-button>
            <tui-button type="base" width="600rpx" height="90rpx" shape="circle" :size="28" @click="toRePay" v-else>
                继续支付
            </tui-button>
            <tui-button
                type="base"
                :plain="true"
                width="600rpx"
                height="90rpx"
                shape="circle"
                :size="28"
                @click="onSearch"
            >
                查看订单
            </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 { fetchCouponDisplay } from '@/services/api/coupon.js'
import { orderShare, fetchOrderDetail } from '@/services/api/order.js'
import { queryStringify } from '@/common/utils.js'
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            orderInfo: {},
            mapStateArr: [11, 12, 13, 21, 22, 23, 111],
            orderDetail: {},
            couponTipStr: '',
            posterData: {}
        }
    },
    computed: {
        ...mapGetters(['userId']),
        hasOtherSplitOrder() {
            return this.mapStateArr.includes(parseInt(this.orderDetail.status))
        },
        canShare() {
            return this.orderInfo.shareFlag === 1 && this.couponTipStr.indexOf('3') > -1
        }
    },
    beforeDestroy() {
        uni.removeStorageSync('PAY_ORDER_INFO')
    },
    onLoad() {
        this.orderInfo = uni.getStorageSync('PAY_ORDER_INFO')
        this.getOrderDetail()
        this.fetchCouponDisplay()
    },
    onShareAppMessage() {
        // 加密
        const state_str = encodeURIComponent(this.$crypto.encrypt({ type: 0 }))
        return {
            title: '护肤上颜选，正品有好货~',
            path: `/pages/index/index?state_str=${state_str}`,
            imageUrl: this.staticUrl + 'icon-share.png'
        }
    },
    methods: {
        // 分享结束
        async onAfterShare() {
            try {
                await orderShare({ orderId: this.orderInfo.orderId, userId: this.userId })
                this.$toast('分享成功')
            } catch (e) {
                this.$toast('分享失败')
            }
        },
        // 分享
        onShare() {
            this.posterData = { query: queryStringify({ type: 0 }) }
            this.$refs.sharePopup.open()
        },
        // 获取可领取优惠券类型
        async fetchCouponDisplay() {
            try {
                const res = await fetchCouponDisplay({ userId: this.userId })
                this.couponTipStr = res.data
            } catch (e) {
                console.log('获取优惠券类型失败')
            }
        },
        // 继续购买
        toBuy() {
            this.$router.switchTab('home')
        },
        // 订单列表
        onSearch() {
            this.$router.redirectTo(`order/order-detail?orderId=${this.orderInfo.orderId}`)
        },
        // 继续支付
        toRePay() {
            this.$router.redirectTo(`order/order-pay?orderId=${this.orderInfo.orderId}`)
        },
        // 获取订单支付列表
        async getOrderDetail() {
            try {
                const { data } = await fetchOrderDetail({ orderId: this.orderInfo.orderId })
                this.orderDetail = data.order
            } catch (e) {
                console.log('获取订单信息失败')
                console.log(e)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.pay-result {
    height: 100vh;
    .tip-icon {
        @extend .cm-flex-center;
        flex-direction: column;
        background-color: #fff;
        height: 340rpx;
        .icon {
            width: 210rpx;
            height: 210rpx;
        }
        .tip {
            margin-top: 24rpx;
            font-size: 28rpx;
            font-weight: bold;
            color: #666;
        }
    }

    .payAmount {
        @extend .cm-flex-between;
        height: 90rpx;
        padding: 0 24rpx;
        margin-top: 24rpx;
        background-color: #fff;
        font-size: 28rpx;
        .label {
            color: #333333;
        }

        .price {
            color: #666666;
        }
    }

    .control {
        @extend .cm-flex-between;
        flex-direction: column;
        height: 310rpx;
        margin-top: 150rpx;

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