deming/pageB/components/sdetails/tloos.vue

<template>
    <view>
		<!-- 普通商品 tool -->
        <view class="tloos" v-if="type == 1">
            <view class="navs">
                <image src="/static/image/common/18.png"></image>
                店铺
            </view>
            <view class="navs" style="margin-right:30rpx">
                <image src="/static/image/common/19.png"></image>
                客服
            </view>
            <view class="button" style="background:rgba(253,211,96,0.6);" v-if="info.goods_try == 1">试穿试送</view>
            <view class="button" style="background:rgba(253,211,96,1);" @click="buy(2)">加入购物车</view>
            <view class="button" style="background:rgba(255,120,15,1);" @click="buy(1)">立即购买</view>
        </view>
		<!-- 拼团 tool -->
		<view class="group-tool" v-if="type==2">
			<view class="launch" @click="settlementOrder">发起拼团</view>
			<view class="involvement" @click="showGroupUser=true">参与拼团</view>
		</view>
		<!-- 秒杀 tool -->
		<view class="spike-tool" v-if="type==3">
			<view class="left">
				<view>
					<image src="/static/image/common/18.png"></image>
					<text>店铺</text>
				</view>
				<view>
					<image src="/static/image/common/19.png"></image>
					<text>客服</text>
				</view>
			</view>
			<view class="btn" v-if="groupbuyInfo.groupbuy_state == 20 && groupbuyInfo.inventory > groupbuyInfo.groupbuy_buy_quantity" @click="spikeGoods">立即秒杀</view>
			<view class="btn" :class="{'cannot': groupbuyInfo.groupbuy_state == 32 || groupbuyInfo.inventory == groupbuyInfo.groupbuy_buy_quantity}" v-else>
				{{ groupbuyInfo.groupbuy_state == 32 ? '时间已结束' : (groupbuyInfo.inventory > groupbuyInfo.groupbuy_buy_quantity ? '立即秒杀' : '已售空') }}
			</view>
		</view>
        <u-popup v-model="show" mode="bottom">
			<scroll-view scroll-y="true" class="popup">
				<view>
					<view class="head">
						<image class="image" :src="info.goods_image"></image>
						<view class="info">
							<text class="u-line-2">{{info.goods_name}}</text>
							<text>￥{{info.goods_price}}</text>
						</view>
					</view>
					<guige @sel="self" ref="guige" v-for="(item,index) in info.spec_value" :key="index" :title="info.spec_name[index]" :item="item"></guige>
					<view class="num">
						<text>购买数量</text>
						<u-number-box v-model="value" @change="valChange"></u-number-box>
					</view>
					<view style="height:100rpx"></view>
				</view>
				<u-toast ref="uToast" />
			</scroll-view>
        </u-popup>
    </view>
    
</template>
<script>
import guige from "./guige"
export default {
	name:"tloos",
	props: ['id', 'info', 'type'],
    components:{
		guige,
    },
    data(){
        return {
            show: false,
            value: 1,
            sel: "",
            quanxuan: false
        }
	},
	created() {
		this.show = false;
	},
	methods: {
        buy(type){
            let that = this;
            if(this.show){
                if(this.info.spec_value == null){
                    this.$emit("buy", { type, value: that.value })
                }else if(this.quanxuan){
                    this.$emit("buy", { type, value: that.value })
                }else{
                    this.$refs.uToast.show({
                        title: '请选择规格',
                        type:  'warning',
                    })
                }
            }else{
                this.show = true;
            }
            
        },
        valChange(e) {
            console.log(this.value)
        },
        self(){
            // console.log(this.$refs.guige)
            let index = 0;
            let arr = [];
            for(let i in this.info.spec_value){
                // console.log(i)
                // console.log(this.$refs.guige[index++].select)
                // index++;
                let sel = this.$refs.guige[index++].select
                if(sel != 0){
                    arr.push(sel)
                }
            }
            // console.log(arr.length)
            if(arr.length == index){
                this.sel = arr.join("|")
                this.quanxuan = true
                // console.log(this.sel)
            }
        }
    },
    watch:{
        sel(){
            console.log(this.sel)
            this.$emit('xuanze', this.sel)
        }
    }
}
</script>
<style lang="scss" scoped>
.group-tool {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 98rpx;
	display: flex;
	font-size: 32rpx;
	color: rgba(255,255,255,1);
	z-index: 99;
	.launch {
		flex: 1;
		background: rgba(253,211,96,1);
		line-height: 98rpx;
		text-align: center;
	}
	.involvement {
		flex: 1;
		background: rgba(255,120,15,1);
		line-height: 98rpx;
		text-align: center;
	}
}
.spike-tool {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 98rpx;
	display: flex;
	z-index: 99;
	.left {
		width: 190rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		> view {
			text-align: center;
			> image {
				width: 35rpx;
				height: 35rpx;
				margin-bottom: 15rpx;
			}
			> text {
				display: block;
				font-size: 24rpx;
				color: rgba(102,102,102,1);
			}
		}
	}
	.btn {
		flex: 1;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 32rpx;
		color: rgba(255,255,255,1);
		background: rgba(255,120,15,1);
	}
	.cannot {
		background: rgba(221,221,221,1);
	}
}
.tloos{
	background-color: #fff;
    display: flex;
    position: fixed;
    height: 98rpx;
    width: 100%;
    bottom:0;
    border-top: 1rpx solid #ececec;
    z-index: 1000000;
    .navs{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        color: #666;
        flex-shrink: 0;
        margin-left: 30rpx;
        >image{
            width: 35rpx;
            height: 35rpx;
            margin-bottom: 15rpx;
        }
        

    }
    .button{
        width: 100%;
        height: 100%;
        line-height: 98rpx;
        text-align: center;
        color: #fff;

    }
  
}
.popup{
	padding: 30rpx;
	box-sizing: border-box;
	max-height: 750rpx;
	.head{
		display: flex;
		margin-bottom: 30rpx;
		.image{
			width: 195rpx;
			height: 195rpx;
			border-radius: 10rpx;
			flex-shrink: 0;
		}
		.info{
			display: flex;
			padding: 21rpx 0;
			justify-content: space-between;
			margin-left: 27rpx;
			flex-direction: column;
			>text:first-child{
				font-size: 28rpx;
				color: #333;
			}
			>text:last-child{
				font-size: 30rpx;
				color: #ff3131;
			}
		}
	}

	.num{
		height: 84rpx;
		display: flex;
		border-bottom: #ececec solid 2rpx;
		justify-content: space-between;
		align-items: center;
		>text{
			font-size: 26rpx;
			color: #666;
		}
	}
}
</style>