hwnc/pagesD/pages/mall/joinGroup.vue

<template>
    <view class="box" :class="[AppTheme]" v-if="cache">
        <view class="information">
            <image :src=" apppic" ></image>
            <view class="text">
                <p class="title">{{ cache.name }}</p>
                <p>{{ cache.peoplenum }}人团· 已团{{ cache.sells }}件</p>
                <p>
                    <span>¥{{ cache.price }}</span>
                    /{{ cache.unit }} 拼团省{{ cache.oprice - cache.price }}元
                </p>
            </view>
        </view>
        <view class="tag">
            <view class="tag_item">
                <u-icon name="checkmark-circle" color="red"></u-icon>
				<view class="">全程包邮</view>
            </view>
            <view class="tag_item">
                <u-icon name="checkmark-circle" color="red"></u-icon>
				<view class="">24小时发货</view>
            </view>
            <view class="tag_item">
                <u-icon name="checkmark-circle" color="red"></u-icon>
				<view>假一赔十</view>
            </view>
        </view>
        <view class="invite_msg">
            <view class="my_team">
                <view class="member captain">
                    <span class="bg-primary">团长</span>
                    <image :src="vip.headimgurl" mode=""></image>
                </view>
                <view class="member" v-if="member" v-for="item in member" :key="item.headimgurl"><image :src="item.headimgurl" mode=""></image></view>
                <view class="member" v-if="group.left != 0"><image :src="settingFile.root_img+'/static/app/cart/6.png'" mode=""></image></view>
            </view>
            <view class="b_text">
                仅剩
                <span>{{ group.left }}</span>
                个名额,
                <u-count-down :time="group.rtime > timestamp ? group.rtime - timestamp : 0" font-size="28"></u-count-down>
                后结束
            </view>
        </view>
        <view class="invite_bth bg-linear-gradient" @click="fastbuy">一键参团</view>
        
        
        <view class="access">
            <span>拼团须知</span>
            <view class="text">
                好友参团·人满发货·人不满退款
                <u-icon name="arrow-right"></u-icon>
            </view>
        </view>
    </view>
</template>

<script>
import mall from '@/api/mall/index.js';
// import siteinfo from '@/siteinfo.js'
export default {
    data() {
        return {
            primary:this.$theme.primary,
            cache: '',
            vip: '',
            group: '',
            apppic: '',
            member: '',
            timestamp: '',
            data: '',
            settingFile:getApp().globalData.siteinfo
        };
    },
    onLoad(option) {
        console.log(option);
        this.timestamp = Date.parse(new Date()) / 1000;
        mall.joinGroup({ id: option.id }).then(res => {
            
            this.data = res.data;
            this.cache = res.data.cache;
            this.vip = res.data.vip;
            this.group = res.data.group;
            this.apppic = res.data.apppic;
            this.member = res.data.member;
        });
    },
    methods: {
        fastbuy() {
            var goodsnum = this.cache.num;
            var num = 1;
            var goodsid = this.cache.id;
            var vipid = uni.getStorageSync('userInfo').id
            var groupid = this.data.group.id;
			var goodstype= this.cache.type;
            this.$store.state.groupid = groupid;
      
            if (goodsnum - num <= 0) {
                this.$refs.uTips.show({
                    title: '该产品库存不足！请调整购买量或选择其他属性！',
                    type: 'error',
                    duration: '2300'
                });
                return;
            }
            let obj = {
                sid: 0,
                goodsid,
                vipid,
                num,
				goodstype,
                isact: 1,
                groupid
            };
            mall.fastbuys(obj).then(res => {
                
                if (res.status == 200) {
                    uni.showToast({
                        icon: 'loading',
                        title: '生成订单',
                        duration: 2000
                    });
                    setTimeout(() => {
                        this.$u.route('/pagesD/pages/order/createOrder', {
                            sid: 0,	
							isact: 1,
							goodstype:this.cache.type,
                            lasturl: this.data.lasturl
                        });
                    }, 2000);
                } else {
                    this.$u.toast(res.data);
                }
            });
        }
    }
};
</script>

<style lang="scss">
.information {
    padding: 30rpx;
    display: flex;
    align-items: center;
	justify-content: space-around;
    image {
		width: 250rpx;
		height: 165rpx;
		margin-right: 15rpx;
		border-radius: 10rpx;
    }
    p {
        margin-left: 25rpx;
		
        color: #999999;
        &:nth-child(1) {    
            // font-size: 17rpx * 2;
            color: black;
			margin-bottom: 20rpx;
			line-height: 40rpx;
			font-weight: bold;
        }
        &:nth-child(2) {
            margin-top: 10rpx;
        }
        &:nth-child(3) {
            margin-top: 10rpx;
            span {
                color: red;
                font-size: 18rpx * 2;
            }
        }
    }
}
.tag {
    height: 80rpx;
    width: 100%;
    padding: 20rpx 0rpx;
    background-color: #f6f6f6;
    display: flex;
    justify-content: space-around;
    align-items: center;
	.tag_item{
		display: flex;
		align-items: center;
	}
}
.invite_msg {
    margin-top: 150rpx;
    width: 100%;
    height: 400rpx;
    .my_team {
        height: 200rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        .member {
            margin: 0 10rpx;
            width: 120rpx;
            height: 120rpx;
            position: relative;
            image {
                border-radius: 100%;
                width: 100%;
                height: 100%;
            }
        }
        .captain {
            span {
                position: absolute;
                font-size: 24rpx;
                border-radius: 30rpx;
                padding: 0 10rpx;
                border: 4rpx solid #fff;
                line-height: 1.4;
                color: #666;
                z-index: 10;
            }
        }
    }
    .b_text {
        text-align: center;
        font-size: 16rpx * 2;
        span {
            color: red;
        }
    }
}
.invite_bth {
    width: 95%;
    border-radius: 20rpx;
    margin: 0 auto;
    text-align: center;
    line-height: 37rpx * 2;
    height: 37rpx * 2;
    color: #ffffff;
}
.access {
    width: 100%;
    height: 45rpx ;
	line-height: 45rpx;
    padding: 30rpx 20rpx;
    margin-top: 50rpx;
    border: 1px solid #d9d9d9;
    display: flex;
    justify-content: space-between;
    > view {
		display: flex;
		align-items: center;
        color: #999999;
		margin-right: 30rpx;
    }
}
</style>