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>1</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></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="2"></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>
    </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 } from 'vuex'
export default {
    components: {
        UserList,
        CountdownBox,
        CmOrderProdcut,
        CmDrawer,
        CmNumberBox
    },
    computed: {
        ...mapGetters(['userId', 'hasLogin'])
    },
    data() {
        return {
            isRequest: true,
            collageId: '',
            initiatorId: '',
            collageData: {},
            // 自定义标签
            tagsList: ['2人拼团价'],
            // 倒计时
            countDownTime: {},
            timer: null,
            // 商品数量
            count: 1,
            countVisible: false
        }
    },
    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
        setTimeout(() => {
            this.fetchOrderDetails()
        }, 2000)
    },
    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/login/login')
                return
            }

            if (this.userId == this.initiatorId) {
                this.$util.msg('您不能参与自己发起的拼团')
                return
            }

            this.countVisible = true
        },

        // 拼团购买
        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)
            this.$api.navigateTo('/pages/order/create-order?type=prodcut')
            this.countVisible = false
        },

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

            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.orderId) {
                    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>