xmhjc-applet/supplierPages/pages/supplier/base/SupplyDeclarationList.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;">
                    <checkbox :checked="item.check" @click="checkitem(item)"  shape="circle"></checkbox>
                </view>
                <view >
                    <u--image radius='16rpx' width="80rpx" height="80rpx" :src="item.pic" ></u--image>
                </view>
                <view class="box_right">
                    <view >
                        {{item.businessName}}
                    </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">
                    <view class="box_time">
                        时间: {{item.createTime}}
                    </view>
                    <view :class="'box_type'+item.static">
                        <text v-if="item.updownStatus == '0'">正在审核</text>
                        <text v-if="item.updownStatus == '1'">上架</text>
                        <text v-if="item.updownStatus == '2'">下架</text>
                        <text v-if="item.updownStatus == '3'">审核不通过</text>
                    </view>
                </view>
            </view>
            </template>
            <view v-if="showType == 0" class="btnBox">
                <view class="btn" @click="openFrom()">
                    添加供应申报
                </view>
            </view>
        </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(){
        let data = this.newsList.find(item => item.check == true);
        uni.setStorageSync('checkSupplierData',data)
        uni.navigateTo({
             url: '/supplierPages/pages/supplier/base/SupplyDeclarationFrom'
        });
    },
    async checkitem(item){
        console.log('item',item);
        this.newsList.forEach(Listitem => {
            if (Listitem.id == item.id) {
                Listitem.check = true
            }else{
                Listitem.check = false
            }
        });
	},
}
}
</script>

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

    display: flex;
    align-items: center;
}
.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;
}
.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;
}
</style>