freight-web/src/pages/review/index.vue

258 lines
5.6 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>