caimei-applets-hehe/pages/fight-order/fight-share-entry.vue

<template>
    <view class="fight-share-entry">
        <tui-skeleton v-if="isRequest" loadingType="2"></tui-skeleton>
        <view class="row">
            <!-- 商品信息 -->
            <cm-order-prodcut
                :countVisible="false"
                :goodsData="collageData"
                :normal="true"
                :tagsList="tagsList"
            ></cm-order-prodcut>

            <view class="service">
                <view class="iconfont icon-wuyoushouhou"><text>无忧退货</text></view>
                <view class="iconfont icon-wuyoushouhou"><text>快速退款</text></view>
                <view class="iconfont icon-wuyoushouhou"><text>正品保证</text></view>
            </view>

            <view class="grid t0b48"></view>

            <view class="fight-tip"
                >还差<text>{{ collageData.needNum }}</text
                >人，赶快邀请好友来拼单吧！</view
            >
            <!-- 倒计时 -->
            <countdown-box :countDownTime="countDownTime"></countdown-box>

            <!-- 操作 -->
            <view class="fight-control"> <button class="btn type1" @click="handleClick">立即参团</button> </view>

            <view class="grid t48b48"></view>
            <!-- 拼单用户列表 -->
            <user-list :memberNum="collageData.memberNum" :existNum="collageData.existNum"></user-list>
            <view class="line"></view>
            <view class="goods-info">
                <image :src="collageData.productImage" class="cover"></image>
                <view class="title" v-text="collageData.productName"></view>
            </view>
        </view>

        <!-- 购买数量弹窗 -->
        <cm-drawer :visible="countVisible" @close="drawerClose" position="bottom">
            <view class="count">
                <view class="top">
                    <image :src="collageData.productImage" class="cover"></image>
                    <view class="right">
                        <view class="number">
                            <text>数量：</text>
                            <cm-number-box
                                v-model="count"
                                :min="1"
                                :max="collageData.limitedNum"
                                :defaultVal="count"
                            ></cm-number-box>
                        </view>
                        <view class="single-price">
                            <text>单价：￥</text> <text class="price">{{ collageData.price | formatPrice }}</text>
                        </view>
                    </view>
                </view>
                <view class="btn" @click="buyGroupNow">确认</view>
            </view>
        </cm-drawer>

        <!-- 操作弹窗 -->
        <tui-modal
            :show="modal"
            :content="modalText"
            :size="32"
            :maskClosable="false"
            color="#333"
            shape="circle"
            @click="handleModalConfirm"
            :button="modalButton"
        ></tui-modal>
    </view>
</template>

<script>
import UserList from './components/user-list.vue'
import CountdownBox from './components/countdown-box.vue'
import CmOrderProdcut from '@/components/cm-module/cm-order-prodcut/cm-order-prodcut.vue'
import CmNumberBox from '@/components/cm-module/cm-number-box/cm-number-box.vue'
import CmDrawer from '@/components/cm-module/cm-drawer/cm-drawer.vue'
import { mapGetters, mapActions } from 'vuex'
export default {
    components: {
        UserList,
        CountdownBox,
        CmOrderProdcut,
        CmDrawer,
        CmNumberBox
    },
    computed: {
        ...mapGetters(['userId', 'hasLogin']),
        // 自定义标签
        tagsList() {
            return [`${this.collageData.memberNum}人拼团价`]
        }
    },
    data() {
        return {
            isRequest: true,
            collageId: '',
            initiatorId: '',
            collageData: {},
            // 倒计时
            countDownTime: {},
            timer: null,
            // 商品数量
            count: 1,
            countVisible: false,

            modal: false,
            modalText: '您已经参加过该拼团活动了，请前往订单详情查看订单',
            modalButton: [
                {
                    text: '取消',
                    type: 'danger',
                    plain: true //是否空心
                },
                {
                    text: '前往查看',
                    type: 'danger',
                    plain: false
                }
            ]
        }
    },
    watch: {
        hasLogin() {
            this.fetchOrderDetails()
        }
    },
    beforeDestroy() {
        clearTimeout(this.timer)
    },
    onShareTimeline(e) {
        // 加密参数
        const shareData = {
            type: 4,
            inviteUserId: this.userId
        }
        // 加密
        const state_str = encodeURIComponent(this.$crypto.encrypt(shareData))
        return {
            title: '哈喽，赶快来参团吧！这件商品拼团买更便宜~~',
            path: `pages/tabBar/index/index?state_str=${state_str}`,
            imageUrl: 'https://picsum.photos/400/400?random=3'
        }
    },
    onShareAppMessage(e) {
        // 加密参数
        const shareData = {
            type: 4,
            inviteUserId: this.userId
        }
        // 加密
        const state_str = encodeURIComponent(this.$crypto.encrypt(shareData))
        return {
            title: '哈喽，赶快来参团吧！这件商品拼团买更便宜~~',
            path: `pages/tabBar/index/index?state_str=${state_str}`,
            imageUrl: 'https://picsum.photos/400/400?random=3'
        }
    },
    onLoad(options) {
        this.collageId = options.collageId
        this.initiatorId = options.initiatorId
        this.fetchOrderDetails()
    },
    onShow() {
        !this.isRequest && this.countDown()
        this.fetchOrderDetails()
    },
    methods: {
        handleClick(type) {
            if (!this.hasLogin) {
                // 保存当前页面链接参数
                uni.setStorageSync(
                    'login_redirect_url',
                    `/pages/fight-order/fight-share-entry?type=share&collageId=${this.collageId}&initiatorId=${
                        this.initiatorId
                    }`
                )
                this.$api.navigateTo('/pages/authorize/login')
                return
            }

            if (this.collageData.orderId > 0) {
                this.modal = true
                return
            }

            this.countVisible = true
        },

        handleModalConfirm(e) {
            if (!e.index) return (this.modal = false)
            console.log('查看订单')
            uni.redirectTo({
                url: `/pages/order/order-detail?orderId=${this.collageData.orderId}`
            })
        },

        // 拼团购买
        buyGroupNow() {
            console.log('拼团购买')
            let productStp = {
                allPrice: this.count * this.collageData.price,
                allCount: this.count,
                productId: this.collageData.productId,
                productCount: this.count,
                heUserId: this.userId,
                collageFlag: 1,
                collageId: this.collageId
            }
            uni.setStorageSync('commitProductInfo', productStp)
            uni.redirectTo({ url: '/pages/order/order-create?type=prodcut' })
            this.countVisible = false
        },

        countDown() {
            const diffTime = new Date(this.collageData.endTime).getTime()
            const loadTime = new Date().getTime()

            this.timer && clearTimeout(this.timer)

            this.$util.countDown(diffTime, loadTime, {}, item => {
                this.countDownTime = item.conttainer
                this.timer = item.t
            })
        },
        // 获取拼单详情
        fetchOrderDetails() {
            this.FightService.OrderCollageDetails({
                collageId: this.collageId,
                userId: this.userId
            }).then(res => {
                this.collageData = res.data
                // 拼团已完成
                if (this.collageData.status === 2) {
                    this.$util.msg('拼团已结束')
                    setTimeout(() => {
                        uni.switchTab({ url: '/pages/tabBar/index/index' })
                    }, 2000)
                    return
                }
                // 拼团未完成
                this.countDown()
                this.isRequest = false
            })
        },

        // 购买数量弹窗关闭
        drawerClose() {
            this.count = 1
            this.countVisible = false
        }
    }
}
</script>

<style lang="scss" scoped>
/* scss中可以用mixin来扩展 */
@mixin ellipsis($line: 1) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
}

.flex-center-box {
    display: flex;
    justify-content: center;
    align-items: center;
}
.fight-share-entry {
    background: #f7f7f7;
    min-height: 100vh;

    .row {
        padding-top: 48rpx;
        background: #fff;
        overflow: hidden;
    }

    .service {
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #ff457b;
        width: 750rpx;
        height: 72rpx;
        padding: 0 24rpx;
        margin-top: 64rpx;
        background: #fff8fd;
        opacity: 1;
        box-sizing: border-box;

        .iconfont {
            font-size: 24rpx;
            line-height: 24rpx;
            text {
                color: #ff457b;
                margin-left: 4rpx;
            }
        }
    }

    .fight-tip {
        @extend .flex-center-box;
        margin-top: 48rpx;
        margin-bottom: 32rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: #333333;
        text {
            color: #ff457b;
        }
    }

    .fight-control {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-top: 40rpx;
        margin-bottom: 48rpx;

        .link {
            margin-top: 24rpx;
            font-size: 26rpx;
            line-height: 38rpx;
            color: #999999;
        }
        .btn {
            @extend .flex-center-box;
            width: 600rpx;
            height: 90rpx;
            border-radius: 45rpx;
            box-sizing: border-box;
            font-size: 30rpx;

            &.type1 {
                color: #ffffff;
                background: linear-gradient(90deg, #fc32b4 0%, #f83c6c 100%);
            }
            &.type2 {
                margin-top: 24rpx;
                color: #ff457b;
                border: 1px solid #ff457b;
            }
        }
    }

    .grid {
        width: 750rpx;
        height: 20rpx;
        background: #f7f7f7;
        &.t48b48 {
            margin-top: 48rpx;
            margin-bottom: 48rpx;
        }

        &.t0b48 {
            margin-top: 0;
            margin-bottom: 48rpx;
        }
    }

    .line {
        width: 702px;
        height: 1px;
        margin: 32rpx auto 24rpx auto;
        background: #e1e1e1;
    }

    .goods-info {
        @extend .flex-center-box;
        padding: 0 24rpx 40rpx;
        .cover {
            width: 80rpx;
            height: 80rpx;
            background: eee;
            border: 1rpx solid #e1e1e1;
            border-radius: 8rpx;
            border: 50%;
        }
        .title {
            flex: 1;
            margin-left: 24rpx;
            word-break: break-word;
            font-size: 26rpx;
            line-height: 1.6;
            color: #333333;
            text-align: justify;
            @include ellipsis(2);
        }
    }
}
.count {
    padding: 60rpx 0;
    .top {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 60rpx;
        .cover {
            width: 104rpx;
            height: 104rpx;
        }
        .right {
            margin-left: 24rpx;
            font-size: 24rpx;
            color: #333;
            .single-price {
                color: #ff457b;
                margin-top: 24rpx;
            }
            .number {
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }
        }
    }
    .btn {
        width: 100%;
        height: 88rpx;
        margin-top: 32px;
        background: #ff457b;
        line-height: 88rpx;
        text-align: center;
        color: #ffffff;
        font-size: 28rpx;
        border-radius: 44rpx;
    }
}
</style>