xmhjc-applet/supplierPages/pages/supplier/base/marketItem.vue

<template>
    <view>
        <view >
            <template v-if="showType == 0">
            <view v-for="(item,index) in newsList" :key="index" class="box" >
                <view style="margin-left: 24rpx;margin-top: 24rpx;width: 640rpx;" class="box_BOTTOM" >
                    <view class="box_time">
                        <u--image radius='16rpx' width="48rpx" height="48rpx" src="/static/supplier/icon_gonyings.png" ></u--image>
                        <text style="margin-left: 16rpx;">{{item.name}}</text> 
                    </view>
                    <view class="flexac" @click="openFrom(item)">
                        <text style="margin-right: 16rpx;font-size: 28rpx;color: #999;">查看详情</text> 
                        <u--image radius='16rpx' width="48rpx" height="48rpx" src="/static/myinfo/btn_right.png" ></u--image>
                    </view>
                </view>
                <view class="divider"></view>
                <view class="PICbox">
                    <view style="margin-left: 24rpx;" v-for="picItem in item.declareList" :key="picItem.id">
                        <view >
                            <u--image radius='16rpx' width="128rpx" height="128rpx" :src="picItem.pic" ></u--image>
                        </view>
                    </view>
                </view>
                
            </view>
            </template>
            <template v-if="showType == 1">
            <view v-for="(item,index) in newsList" :key="index" class="box2" >
                <view class="box_TOP">
                    <view >
                        <u--image radius='16rpx' width="128rpx" height="128rpx" :src="item.pic" ></u--image>
                    </view>
                    <view class="box_right">
                        <view class="box_title2">
                            {{item.supplierName}}
                        </view>
                        <!-- <view class="box_specifications">
                            规格：{{item.price}} g/只
                        </view> -->
                        <view class="box_num">
                            <view class="box_num_item">
                                <text>售价：</text><text style="color:#333;">{{'￥' + item.price}}</text>
                            </view>
                            <view class="box_num_item">
                                <text>数量：</text><text style="color:#333;">{{item.num + '个'}}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="divider"></view>
                <view class="box_BOTTOM" @click="openFrom(item)">
                    <view class="box_time">
                        <u--image radius='16rpx' width="48rpx" height="48rpx" src="/static/supplier/icon_gonyings.png" ></u--image>
                        <text style="margin-left: 16rpx;">{{item.vendorName}}</text> 
                    </view>
                    <view>
                        <u--image radius='16rpx' width="48rpx" height="48rpx" src="/static/myinfo/btn_right.png" ></u--image>
                    </view>
                </view>
            </view>
            </template>
        </view>
    </view>
</template>
<script>
export default {
    components: {
    },
    props: {
        listdata: {
            type: Array,
            default: [],
        },
        showType: {
            type: Number,
            default: 0,
        },
},
watch:{
    listdata: {
        immediate: true,
        handler(val) {
           console.log(val);
           this.newsList = val
        },
    }
},
data() {
return {
    newsList:[],
    selectData:null,
    showFrom:false,
}
},
onLoad(e) {
    
},
methods: {
    openFrom(item){
        let id = item?.id || item?.vendorId;
        let name = item?.name || item?.vendorName;
        uni.navigateTo({
             url: '/supplierPages/pages/supplier/base/SupplypProductDetails?id=' + id + '&name=' + name,
        });
    },
   
}
}
</script>

<style lang="less" scoped>
.box{
    width: 700rpx;
    height: 274rpx;
    background: #ffffff;
    border-radius: 16rpx;
    margin: 24rpx;

    display: flex;
    flex-direction: column;
}
.box_right{
    width: 500rpx;
    margin-left: 24rpx;
}
.box2{
    width: 700rpx;
    height: 273rpx;
    background: #ffffff;
    border-radius: 16rpx;
    margin: 24rpx;

    
}
.box_TOP{
    width: 676rpx;
    height: 152rpx;
    display: flex;
    align-items: center;
    margin-left: 12rpx;
}
.box_BOTTOM{
    width: 666rpx;
    display: flex;
    align-items: center;
    margin-left: 12rpx;
    justify-content: space-between;
}

.box_title2{
    font-size: 28rpx;
    font-weight: 500;
    text-align: left;
    color: #333333;
}
.box_specifications{
    margin-top: 6rpx;
    font-size: 24rpx;
    font-weight: 500;
    text-align: left;
    color: #999999;
}
.box_num{
    margin-top: 10rpx;
    display: flex;
    justify-content: space-between;
}

.box_num_item{
    display: flex;
    font-size: 28rpx;
    color: #999999;
}
.box_time{
    font-size: 28rpx;
    font-weight: 400;
    text-align: left;
    color: #999999;
    display: flex;
    align-items: center;
}
.box_type1{
    width: 140rpx;
    height: 56rpx;
    background: #ffedec;
    border-radius: 8rpx;

    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: left;
    color: #ff655b;
    line-height: 56rpx;
    text-align: center;
}
.box_type2{
    width: 140rpx;
    height: 56rpx;
    background: #deeefc;
    border-radius: 8rpx;

    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: left;
    color: #0084FF;
    line-height: 56rpx;
    text-align: center;
}
.box_type3{
    width: 140rpx;
    height: 56rpx;
    background: #eee;
    border-radius: 8rpx;

    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: left;
    color: #999;
    line-height: 56rpx;
    text-align: center;
}

.btnBox{
    width: 750rpx;
    height: 100rpx;
    background: #FFFFFF;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
}
.btn{
    width: 702rpx;
    height: 80rpx;
    background: #46A6FF;
    border-radius: 64rpx 64rpx 64rpx 64rpx;
    opacity: 1;

    font-weight: 500;
    color: #FFFFFF;
    line-height: 80rpx;
    text-align: center;
}
.divider{
    width: 100%;
    border-top: 1rpx solid #eee;
    margin: 20rpx 0;
}
.PICbox{
    margin-left: 24rpx;
    display: flex;
}
</style>