index.vue

<template>
    <div class="popup-wrap">
        
        <van-popup 
            :show="productDialogStatus"
            position="bottom"
            :overlay="true"
            @close="close"
            custom-style="height:399px;border-top-left-radius: 16px;border-top-right-radius: 16px;z-index:100;"
            lock-scoll= "true"
        >
            
                <div class="product-title" v-if="productList.length">商品列表({{productList.length}})</div>
                
                <div class="product-list" v-if="productList.length">
                    <div class="item" v-for="(item,index) in productList" :key="index">
                        <div class="item-index">{{item.number}}</div>
                        <div class="item-img">
                            <image :src="item.productImgUrl" mode="aspectFill" alt=""></image>
                        </div>
                        <div class="item-detail">
                            <div class="product-name text-overflow2">
                                {{item.productName}}
                            </div>
                            <div class="product-bottom">
                                <div class="product-price">￥{{item.minPrice}}</div>
                                <div 
                                    class="product-do product-up" 
                                    @click="setProductStatus(1,item.productId,item)" 
                                    v-if="item.upperScreenState == 0 || item.upperScreenState == 2"
                                >
                                上屏
                                </div>
                                <div 
                                    class="product-do product-down" 
                                    @click="setProductStatus(0,item.productId,item)" 
                                    v-if="item.upperScreenState == 1"
                                >
                                下屏
                                </div>
                            </div>
                        </div>
                        <van-divider customStyle="height:1px;margin:0"></van-divider>
                    </div>
                </div>

                <div class="product-no-list" v-else >
                    暂无商品
                </div>
        </van-popup>
        
    </div>
</template>

<script>
export default {
    props:{
        productDialogStatus:{
            type:Boolean,
            default:false
        },
        productList:{
            type:Array,
            default:null
        }
    },
    data(){
        return {
            list : [],
        }
    },
    watch:{
        productList(newVal){
            this.productList = newVal
        }
    },
    created(){
        
    },
    methods:{
        close(){
            this.$emit('hideProductPopup',false)
        },
        setProductStatus(type,id,item,index){
            this.$emit('changeProduct',type,id,item)
        }
    }
}
</script>

<style scoped lang="scss">
    .popup-wrap{
        position: relative;
        z-index: 100;
    }

    .product-title{
        width: 100%;
        height: 45px;
        line-height: 45px;
        font-size: 16px;
        color: #333333;
        padding-left: 16.5px;
        box-sizing: border-box;
    }
    .product-list{
        width: 100%;
        height: 350px;
        overflow-y: auto;
        .item{
            display: flex;
            justify-content: space-between;
            padding: 16px 16.5px;
            border-bottom: 1rpx solid #EEEEED;
            position: relative;
            .item-index{
                position: absolute;
                width: 19px;
                height: 16px;
                color: white;
                text-align: center;
                line-height: 16px;
                background-color: #999;
                border-top-left-radius: 4px;
                border-bottom-right-radius: 4px;
                font-size: 12px;
            }
            .item-img{
                width: 90px;
                height: 90px;
                border-radius:4px;
                background-color: #B1B1B1;
                margin-right: 16.5px;
                overflow: hidden;
                image{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .item-detail{
                width: 220.5px;
                position: relative;
                .product-name{
                    font-size: 15px;
                    color: #333333;
                }
                .product-bottom{
                    width: 100%;
                    margin-top: 25px;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    .product-price{
                        font-size: 18px;
                        color: #FF0000;
                        float: left;
                    }  
                    .product-do{
                        width: 64px;
                        height: 24px;
                        text-align: center;
                        line-height: 24px;
                        border-radius: 12px;
                        font-size: 15px;
                        box-sizing: border-box;
                        float: right;
                    } 
                    .product-up{
                        color: white;
                        background-image:-webkit-linear-gradient(to right,#FF877D, #FB566D);
                        background-image:-moz-linear-gradient(to right,#FF877D, #FB566D);
                        background-image:-o-linear-gradient(to right,#FF877D, #FB566D);
                        background-image: linear-gradient(to right,#FF877D, #FB566D);
                    }
                    .product-down{
                        color: #FF4240;
                        border: 1px solid #FF4240;
                    }
                }
            }
        }
    }
    .product-no-list{
        text-align: center;
        padding-top: 40px;
        line-height: 18px;
        color: #999;
    }
</style>