191 lines
4.0 KiB
Vue
191 lines
4.0 KiB
Vue
<template>
|
||
<view class="c-card">
|
||
<view class="search">
|
||
<u-search
|
||
placeholder="请输入供应商名称"
|
||
v-model="keyword"
|
||
:showAction="false"
|
||
:bgColor="'#fff'"
|
||
:borderColor="'rgba(0, 0, 0, 0.1)'"
|
||
:placeholderColor="'#C1C1C1'"
|
||
></u-search>
|
||
</view>
|
||
|
||
<view class="box" v-for="item in 10" :key="item">
|
||
<view class="base">
|
||
<view>
|
||
<view class="no"> 收货单号：SHD20230901132333 </view>
|
||
<view class="supplier"> 上海奉贤两网融合（大磅） </view>
|
||
</view>
|
||
<view>
|
||
<text class="btn" @click="handleScenePhoto">现场照片</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="name">吴小勇</view>
|
||
<view class="type">轻二</view>
|
||
<view class="flex-box">
|
||
<text>定价人：谭兵</text>
|
||
<text>过磅时间：2023-09-01 13:23:33</text>
|
||
</view>
|
||
|
||
<view class="more">
|
||
<view v-for="(item, index) in gridList1" :key="index" :style="item.isCustomStyle ? 'font-size: 22rpx;color:#999' : ''">
|
||
<text v-if="item.name">{{ item.name }}：</text
|
||
><text
|
||
>{{ item.isBefore ? item.unit : "" }}
|
||
{{ item.num }}
|
||
{{ item.isBefore ? "" : item.unit }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script setup lang="ts">
|
||
const keyword = ref("");
|
||
const gridList1 = reactive([
|
||
{
|
||
name: "毛重",
|
||
num: "4080.00",
|
||
unit: "KG",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "皮重",
|
||
num: "3450.00",
|
||
unit: "KG",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "扣杂",
|
||
num: "640.00",
|
||
unit: "KG",
|
||
isBefore: false,
|
||
},
|
||
{},
|
||
{
|
||
name: "净重",
|
||
num: "640.00",
|
||
unit: "KG",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "单价",
|
||
num: "2.48",
|
||
unit: "元/千克",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "结算总价",
|
||
num: "2.48",
|
||
unit: "元",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "实际总价",
|
||
num: "2.48",
|
||
unit: "元",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "作废人",
|
||
num: "谭兵",
|
||
unit: "",
|
||
isBefore: false,
|
||
isCustomStyle: true
|
||
},
|
||
{
|
||
name: "过皮",
|
||
num: "2023-09-01 13:23:33",
|
||
unit: "",
|
||
isBefore: false,
|
||
isCustomStyle: true
|
||
},
|
||
]);
|
||
const handleScenePhoto = () => {
|
||
uni.navigateTo({
|
||
url: "/pagesScenePhoto/index", // 要跳转到的页面路径
|
||
});
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.c-card {
|
||
margin: 30rpx 25rpx;
|
||
|
||
.box {
|
||
margin-top: 30rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
|
||
border-radius: 13rpx;
|
||
padding: 30rpx;
|
||
.base {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.no {
|
||
font-weight: 400;
|
||
font-size: 21rpx;
|
||
color: #000000;
|
||
}
|
||
.supplier {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #000000;
|
||
}
|
||
.btn {
|
||
border-radius: 24rpx;
|
||
border: 1px solid #00dcee;
|
||
padding: 10rpx 30rpx;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #00dcee;
|
||
line-height: 41rpx;
|
||
}
|
||
}
|
||
.name {
|
||
font-weight: 400;
|
||
font-size: 27rpx;
|
||
color: #000000;
|
||
margin: 15rpx 0rpx;
|
||
text {
|
||
background-color: #ffaf75;
|
||
font-weight: 500;
|
||
font-size: 16rpx;
|
||
color: #ffffff;
|
||
padding: 5rpx 20rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
.type {
|
||
font-weight: 400;
|
||
font-size: 27rpx;
|
||
color: #ec0f3e;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.flex-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
border-bottom: 1rpx solid rgba(233, 233, 233, 0.76);
|
||
padding-bottom: 20rpx;
|
||
}
|
||
}
|
||
.more {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
flex: 1;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #000000;
|
||
padding: 25rpx 0rpx 0rpx 0rpx;
|
||
> view {
|
||
line-height: 50rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|