258 lines
5.6 KiB
Vue
258 lines
5.6 KiB
Vue
<template>
|
||
<view class="c-card">
|
||
<view class="box" v-for="item in 1" :key="item">
|
||
<view class="base">
|
||
<view>
|
||
<view class="supplier"> 上海奉贤两网融合(大磅) </view>
|
||
</view>
|
||
</view>
|
||
<view class="flex-box1">
|
||
<view class="type">轻二</view>
|
||
<view class="btn">
|
||
<view
|
||
><u-tag
|
||
text="现场照片"
|
||
plain
|
||
shape="circle"
|
||
:bgColor="'rgba(237, 254, 255, 1)'"
|
||
></u-tag
|
||
></view>
|
||
<view
|
||
><u-tag
|
||
text="收货单作废"
|
||
plain
|
||
shape="circle"
|
||
:borderColor="'rgba(255, 147, 68, 1) !important'"
|
||
:bgColor="'rgba(255, 240, 229, 1)'"
|
||
:color="'rgba(255, 157, 85, 1) !important'"
|
||
></u-tag
|
||
></view>
|
||
<view
|
||
><u-tag
|
||
text="编辑信息"
|
||
plain
|
||
shape="circle"
|
||
:borderColor="'rgba(0, 238, 78, 1) !important'"
|
||
:bgColor="'rgba(227, 255, 236, 1)'"
|
||
:color="'rgba(0, 238, 78, 1) !important'"
|
||
></u-tag
|
||
></view>
|
||
</view>
|
||
</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">
|
||
<text v-if="item.name">{{ item.name }}:</text
|
||
><text
|
||
>{{ item.isBefore ? item.unit : "" }}
|
||
{{ item.num }}
|
||
{{ item.isBefore ? "" : item.unit }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="op-btn">
|
||
<view class="c-btn-review">
|
||
<view> 审核暂不支付 </view>
|
||
<view class="active"> 审核立即支付 </view>
|
||
</view>
|
||
<view>
|
||
<u-button
|
||
text="重新过皮"
|
||
plain
|
||
:customStyle="{
|
||
color: 'rgba(0, 220, 238, 1)',
|
||
border: '1px solid #00DCEE',
|
||
'border-radius': '43rpx',
|
||
}"
|
||
></u-button>
|
||
</view>
|
||
<view>
|
||
<u-button
|
||
text="打印"
|
||
type="primary"
|
||
:customStyle="{ 'border-radius': '43rpx' }"
|
||
></u-button>
|
||
</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,
|
||
},
|
||
]);
|
||
const handleScenePhoto = () => {
|
||
uni.navigateTo({
|
||
url: "/pages/scenePhoto/index", // 要跳转到的页面路径
|
||
});
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.c-card {
|
||
margin: 30rpx 25rpx;
|
||
.box {
|
||
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;
|
||
}
|
||
}
|
||
|
||
.flex-box1 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 20rpx 0rpx;
|
||
.type {
|
||
font-weight: 400;
|
||
font-size: 27rpx;
|
||
color: #ec0f3e;
|
||
}
|
||
.btn {
|
||
display: flex;
|
||
> view + view {
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
.op-btn {
|
||
width: 80%;
|
||
margin: 0px auto;
|
||
margin-top: 100rpx;
|
||
.c-btn-review {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: #f5f5f5;
|
||
border-radius: 38rpx;
|
||
text-align: center;
|
||
margin-bottom: 80rpx;
|
||
> view {
|
||
width: 50%;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
font-size: 27rpx;
|
||
color: #999999;
|
||
}
|
||
.active {
|
||
background: #00dcee;
|
||
border-radius: 38rpx;
|
||
font-weight: 500;
|
||
font-size: 27rpx;
|
||
color: #ffffff;
|
||
padding: 20rpx 30rpx;
|
||
}
|
||
}
|
||
> view + view {
|
||
margin-top: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|