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

<template>
     <view style="background: #f6f6f6;height: 100vh;">
        <view class="popupTitle">供应商品</view>
        <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_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>
    </view>
</template>
<script>
import {vendorDeclareList} from '@/http/api/common.js'
export default {
    components: {
    },
data() {
return {
    newsList:[],
    selectData:null,
    showFrom:false,
}
},
async onLoad(e) {
    uni.setNavigationBarTitle({
        title: e.name
    })
    let res = await vendorDeclareList(e.id)
    this.newsList = res.data.data.rows

},
methods: {
    
}
}
</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: 160rpx;
    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;
}
.popupTitle{
    font-size: 32rpx;
    font-weight: 700;
    text-align: left;
    color: #000000;
    margin-left: 24rpx;
}
</style>