caimei-applets-caimei/pages/user/coupon/coupon-details.vue

<template>
    <view class="container clearfix">
        <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true"
            :loadingType="5" />
        <view class="container-content tui-skeleton" v-else>
            <view class="empty-container" v-if="!coupon">
                <image class="empty-container-image" :src="StaticUrl + '/icon/icon-coupon-empty@2x.png'"></image>
                <text class="error-text">暂无优惠券~</text>
            </view>
            <template v-else>
                <view class="container-list">
                    <view class="coupon-list">
                        <view class="list-cell-le">
                            <view class="coupon-maxMoney"> <text class="small">￥</text> {{ coupon.couponAmount }}
                            </view>
                            <view class="coupon-minMoney"> 满{{ coupon.touchPrice }}可用 </view>
                        </view>
                        <view class="list-cell-ri">
                            <view class="list-cell-top">
                                <view class="list-cell-type">
                                    <view class="list-cell-tags">
                                        <template v-if="coupon.moneyCouponFlag == 1">
                                            <text class="tags"
                                                v-if="coupon.moneyCouponType == 1">意向{{ coupon.couponType | TypeFormat }}</text>
                                            <text class="tags" v-else>定向{{ coupon.couponType | TypeFormat }}</text>
                                        </template>
                                        <template v-else>
                                            <text class="tags">{{ coupon.couponType | TypeFormat }}</text>
                                        </template>
                                    </view>
                                    <view class="list-cell-texts">
                                        <text v-if="coupon.couponType == 0">
                                            {{
                								coupon.productType && coupon.productType == 1
                									? '全商城商品通用'
                									: '仅可购买指定商品'
                							}}
                                        </text>
                                        <text v-if="coupon.couponType == 1">
                                            {{ coupon.categoryType == 1 ? '仅限购买产品类商品' : '仅限购买仪器类商品' }}
                                        </text>
                                        <text v-if="coupon.couponType == 3">仅限购买店铺【{{ coupon.shopName }}】的商品</text>
                                        <text v-if="coupon.couponType == 4 || coupon.couponType == 2">全商城商品通用</text>
                                    </view>
                                </view>
                            </view>
                            <view class="list-cell-time">{{ coupon.startDate }} - {{ coupon.endDate }}</view>
                        </view>
                    </view>
                </view>
                <view class="container-button">
                    <view v-if="coupon.moneyCouponFlag === 1" class="button" @click="createCouponRecord(coupon)">
                        ￥{{ coupon.moneyCouponPrice }}购买</view>
                    <view v-else class="button" @click="handeleReceiveCoupon(coupon)">领取优惠券</view>
                </view>
            </template>
        </view>
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex'
    import wxLogin from '@/common/config/wxLogin.js'
    import authorize from '@/common/config/authorize.js'
    import { COUPON_TEXT_MAP } from '@/utils/coupon.share.js'
    import payMixins from '@/mixins/payMixins.js'
    export default {
        mixins: [payMixins],
        data() {
            return {
                StaticUrl: this.$Static,
                isIphoneX: this.$store.state.isIphoneX,
                coupon: {},
                coupinList: [],
                payAmount: 100, //支付金额
                skeletonShow: true,
                isReceiveLoading: false, //领券操作状态
                param: {
                    shareUserId: 0,
                    userId: 0,
                    couponId: 0,
                    source: 1
                }
            }
        },
        onLoad(option) {
            wxLogin.wxLoginAuthorize()
            this.param.shareUserId = option.shareUserId
            this.param.couponId = option.couponId
            // #ifdef MP-WEIXIN
            // 绑定分享参数
            console.log('绑定分享参数', { query: `couponId=${option.couponId}&shareUserId=${option.shareUserId}` })
            wx.onCopyUrl(() => {
                return { query: `couponId=${option.couponId}&shareUserId=${option.shareUserId}` }
            });
            // #endif
            this.initCouponDetail(this.param.couponId)
        },
        filters: {
            TypeFormat(value) {
                switch (value) {
                    case 0:
                        return '活动券'
                        break
                    case 1:
                        return '品类券'
                        break
                    case 2:
                        return '用户专享券'
                        break
                    case 3:
                        return '店铺券'
                        break
                    case 4:
                        return '新用户券'
                        break
                }
            }
        },
        computed: {
            ...mapState(['hasLogin', 'userInfo', ])
        },
        methods: {
            async initCouponDetail(couponId) {
                // 初始化优惠券信息
                try {
                    const res = await this.ProductService.QueryCouponDetail({ couponId: couponId })
                    this.coupon = res.data
                    setTimeout(() => {
                        this.skeletonShow = false
                    }, 500)

                } catch (e) {
                    console.log('初始化优惠券信息异常~')
                }
            },
            //购买优惠券
            createCouponRecord(coupon) {
                // 生成购买优惠券记录Id
                if (!this.hasLogin) {
                    const pages = getCurrentPages()
                    const page = pages[pages.length - 1]
                    uni.setStorageSync('LOGIN_REDIRECT_URL', page.$page.fullPath)
                    this.$api.redirectTo('/pages/login/login')

                } else {
                    this.WeChatCouponRecord(coupon)
                }
            },
            // 调用查询购买
            async WeChatCouponRecord(coupon) {
                try {
                    const userInfo = await this.$api.getStorage()
                    const data = await this.PayService.WeChatCouponRecord({ userId: userInfo.userId,
                        couponId: coupon.couponId })
                    this.MiniWxPayFor(data.data.couponRecordId)
                } catch (error) {
                   this.$util.msg(error.msg, 2000)
                }
            },
            // 购买优惠券支付
            async MiniWxPayFor(couponRecordId) {
                const wechatcode = await authorize.getCode('weixin')
                const userInfo = await this.$api.getStorage()
                const params = {
                    userId: userInfo.userId,
                    couponId: this.param.couponId,
                    couponRecordId: couponRecordId,
                    payType: 'XCX',
                    code: wechatcode,
                    source: 1 //支付来源 1 小程序 2 WWW
                }
                this.weChatMiniCouponWxPay(params, 'Um_Event_shareCouponPay', '分享优惠券', '线上支付优惠券', this.couponId,
                    this.userId)
            },
            async handeleReceiveCoupon(coupon) {
                // 点击优惠券领取按钮,
                if (this.hasLogin) {
                    if (this.isReceiveLoading) {
                        return
                    }
                    const userInfo = await this.$api.getStorage()
                    this.param.userId = userInfo.userId
                    this.getRceiveCoupon(this.param)
                } else {
                    const pages = getCurrentPages()
                    const page = pages[pages.length - 1]
                    uni.setStorageSync('LOGIN_REDIRECT_URL', page.$page.fullPath)
                    this.$api.redirectTo('/pages/login/login')
                }
            },
            // 执行领取优惠券
            async getRceiveCoupon(params) {
                try {
                    await this.ProductService.ReceiveCoupon(params)
                    this.isReceiveLoading = true
                    this.$util.msg('领取成功', 1500, true, 'success')
                    setTimeout(() => {
                        this.isReceiveLoading = false
                        this.$api.reLaunch('/pages/user/coupon/coupon')
                    }, 1500)
                } catch (error) {
                    this.$util.msg(error.msg, 2000)
                    this.isReceiveLoading = false
                }
            }
        },
        onShareAppMessage(res) {
            //分享优惠券
            if (res.from === 'button') {
                // 来自页面内转发按钮
            }
            const randomIndex = Math.floor(Math.random() * COUPON_TEXT_MAP.length);
            return {
                title: COUPON_TEXT_MAP[randomIndex],
                path: `pages/user/coupon/coupon-details?couponId=${this.param.couponId}&shareUserId=${this.param.shareUserId}`,
                imageUrl: 'https://static.caimei365.com/app/img/icon/icon-shareCoupon@2x.png'
            }
        },
        onHide() {
            // 取消绑定分享参数
            wx.offCopyUrl()
        },
        onShow() {

        }
    }
</script>

<style lang="scss">
    page {
        background-color: #FFFFFF;
    }

    .container {
        width: 100%;
        height: auto;
    }

    .empty-container-image {
        width: 260rpx;
        height: 260rpx;
        margin-top: -300rpx;
    }

    .container-list {
        box-sizing: border-box;
        padding: 24rpx;

        .toIndexPage {
            bottom: 390rpx;
        }

        .coupon-list {
            width: 100%;
            height: 200rpx;
            margin-bottom: 24rpx;
            box-sizing: border-box;
            background: url(https://static.caimei365.com/app/img/icon/icon-coupon-uesb@2x.png);
            background-size: cover;
            position: relative;

            .list-cell-le {
                width: 224rpx;
                height: 100%;
                box-sizing: border-box;
                padding: 37rpx 0;
                float: left;

                .coupon-maxMoney {
                    width: 100%;
                    height: 78rpx;
                    line-height: 78rpx;
                    font-size: 56rpx;
                    color: #ffffff;
                    text-align: center;

                    .small {
                        font-size: $font-size-24;
                    }
                }

                .coupon-minMoney {
                    width: 100%;
                    height: 33rpx;
                    line-height: 33rpx;
                    font-size: $font-size-24;
                    color: #ffffff;
                    text-align: center;
                }
            }

            .list-cell-ri {
                width: 478rpx;
                height: 100%;
                box-sizing: border-box;
                padding: 20rpx 24rpx 0 24rpx;
                float: right;

                .list-cell-top {
                    width: 100%;
                    height: 121rpx;
                    float: left;
                    border-bottom: 1px solid #e1e1e1;

                    .list-cell-type {
                        width: 286rpx;
                        height: 100%;
                        float: left;

                        .list-cell-tags {
                            width: 100%;
                            height: 32rpx;
                            margin-bottom: 7rpx;

                            .tags {
                                display: inline-block;
                                padding: 0 10rpx;
                                height: 32rpx;
                                line-height: 32rpx;
                                background-color: #ffdcce;
                                color: #f94b4b;
                                font-size: $font-size-20;
                                border-radius: 8rpx;
                                text-align: center;
                                float: left;
                            }
                        }

                        .list-cell-texts {
                            width: 100%;
                            height: auto;
                            line-height: 35rpx;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            word-break: break-all;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                            font-size: 26rpx;
                            color: #333333;
                        }
                    }

                    .list-cell-btn {
                        width: 128rpx;
                        height: 100%;
                        float: right;

                        .icon-used {
                            width: 100%;
                            height: 100%;
                            box-sizing: border-box;
                            padding-top: 57rpx;

                            .icon-used-btn {
                                width: 128rpx;
                                height: 48rpx;
                                border-radius: 28rpx;
                                line-height: 48rpx;
                                font-size: $font-size-24;
                                text-align: center;

                                &.receive {
                                    background-image: linear-gradient(270deg, #f94b4b 0%, #feb673 100%);
                                    color: #ffffff;
                                }

                                &.make {
                                    border: solid 1px #f94b4b;
                                    color: #f94b4b;
                                }
                            }
                        }
                    }
                }

                .list-cell-time {
                    width: 100%;
                    height: 58rpx;
                    line-height: 58rpx;
                    text-align: left;
                    font-size: $font-size-20;
                    color: #999999;
                }
            }
        }
    }

    .container-button {
        width: 100%;
        height: 90rpx;
        margin-top: 190rpx;

        .button {
            width: 600rpx;
            height: 90rpx;
            text-align: center;
            background: $btn-confirm;
            line-height: 90rpx;
            font-size: $font-size-30;
            color: #ffffff;
            margin: 0 auto;
            border-radius: 45rpx;
        }
    }
</style>