deming/pageB/components/sdetails/tloos.vue

<template>
    <view>
        <view class="tloos">
            <view class="navs">
                <image></image>
                店铺
            </view>
            <view class="navs" style="margin-right:30rpx">
                <image></image>
                客服
            </view>
            <view class="button" style="background:rgba(253,211,96,0.6);">试穿试送</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>
        <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:180rpx"></view>
                    </view>
        <u-toast ref="uToast" />

                </scroll-view>
            </u-popup>
    </view>
    
</template>
<script>
import guige from "./guige"
export default {
	name:"tloos",
	props: ['id','info'],
    components:{
        guige
    },
    data(){
        return {
            show:false,
            value:1,
            sel:"",
            quanxuan: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>
.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>