货无忧
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

295 lines
0 B

2 years ago
<template>
<u-navbar title="客户签收" placeholder border=true :autoBack="true" leftIconSize='35'></u-navbar>
<view class="hedtopt">
<view class="typto">
<view>配车类型商配</view>
<view>配车状态装车中</view>
</view>
<view class="typto">
<view>车牌号川A88888</view>
<view>司机张琪罗翔</view>
</view>
<view class="typto">
<view>装卸班组A班组</view>
<view>备货是否完成</view>
</view>
<view class="kehupeison">
<view>
<view>配送客户数</view>
<view>15</view>
</view>
<view>
<view>订单总数</view>
<view>15</view>
</view>
<view>
<view>计划件数</view>
<view>15</view>
</view>
<view>
<view>装车件数</view>
<view>15</view>
</view>
</view>
</view>
<scroll-view scroll-y="true" class="scvbx">
<view class="mabx">
<view class="its" @click="gosindetascan" v-for="item in [1,2,3,4,5,6,67,1]">
<view class="title">
<view>客户张琪</view>
<view class="statetype">配送中</view>
</view>
<view class="conxb">
<view>
<view>订单总数</view>
<view>40</view>
</view>
<view>
<view>配送件数</view>
<view>20</view>
</view>
<view>
<view>扫描件数</view>
<view>0</view>
</view>
</view>
<view class="tbck">
<view>
<view>定位打卡</view>
<view @click.stop="gosinorderscan">签到扫描</view>
<view>上传签收图片</view>
</view>
<view>
批量签收
</view>
</view>
</view>
</view>
</scroll-view>
</template>
<script lang="ts" setup>
function gosindetascan(){
uni.navigateTo({
url:'/pagesHome/pages/SignDetailScan/SignDetailScan'
})
}
function gosinorderscan(){
uni.navigateTo({
url:'/pagesHome/pages/signOrderScan/signOrderScan'
})
}
</script>
<style lang="scss">
.scvbx{
width: 100%;
height: 60vh;
margin-top: 20upx;
.mabx{
display: flex;
flex-direction: column;
align-items: center;
>.its{
width: 686upx;
display: flex;
flex-direction: column;
margin-bottom: 20upx;
background: #FFFFFF;
border-radius: 8upx;
&:nth-last-child(1){
margin-bottom: 0;
}
>.title{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 34upx 24upx;
box-sizing: border-box;
border-bottom: 3upx solid #EEEEEE;
>view:nth-of-type(1){
font-size: 32rpx;
color: #092C4D;
}
>view:nth-of-type(2){
font-size: 32rpx;
color: #FA8C16;
}
}
>.conxb{
display: flex;
align-items: center;
justify-content: space-around;
padding: 38upx 0;
border-bottom: 3upx solid #EEEEEE;
box-sizing: border-box;
>view{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&:nth-of-type(1){
>view:nth-of-type(2){
color: #0086F1;
}
}
&:nth-of-type(2){
>view:nth-of-type(2){
color: #3AD8BC;
}
}
&:nth-of-type(3){
>view:nth-of-type(2){
color: #FA8C16;
}
}
>view:nth-of-type(2){
font-size: 36rpx;
font-weight: 400;
margin-top: 20upx;
}
}
}
.tbck{
display: flex;
flex-direction: column;
padding: 20upx;
>view:nth-of-type(1){
display: flex;
align-items: center;
justify-content: space-between;
width: 646rpx;
margin: auto;
margin-bottom: 20upx;
>view{
box-sizing: border-box;
}
>view:nth-of-type(1){
width: 210upx;
height: 64upx;
background: #FFFFFF;
border-radius: 8upx;
opacity: 1;
border: 2upx solid #0086F1;
display: flex;
align-items: center;
justify-content: center;
font-size: 28upx;
color: #0086F1;
}
>view:nth-of-type(2){
width: 210upx;
height: 64upx;
background: #FFFFFF;
border-radius: 8upx;
opacity: 1;
border: 2upx solid #D3832A;
display: flex;
align-items: center;
justify-content: center;
font-size: 28upx;
color: #D3832A;
}
>view:nth-of-type(3){
width: 210upx;
height: 64upx;
background: #FFFFFF;
border-radius: 8upx;
opacity: 1;
border: 2upx solid #D3832A;
display: flex;
align-items: center;
justify-content: center;
font-size: 28upx;
color: #D3832A;
}
}
>view:nth-of-type(2){
width: 646upx;
height: 64upx;
background: #FFFFFF;
border-radius: 8upx;
opacity: 1;
border: 2upx solid #D3832A;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #D3832A;
margin: auto;
box-sizing: border-box;
}
}
}
}
}
.hedtopt{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: #ffffff;
padding: 36upx 32upx;
box-sizing: border-box;
.typto{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
font-size: 28upx;
font-weight: 400;
color: #092C4D;
margin-bottom: 20upx;
&:nth-last-child(1){
margin-bottom: 0;
}
>view{
flex: 1;
}
}
.kehupeison{
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
margin-top: 20upx;
>view{
display: flex;
flex-direction: column;
align-items: center;
font-size: 28rpx;
font-weight: 400;
color: #092C4D;
&:nth-of-type(1){
>view:nth-of-type(2){
color: #092C4D;
}
}
&:nth-of-type(2){
>view:nth-of-type(2){
color: #0086F1;
}
}
&:nth-of-type(3){
>view:nth-of-type(2){
color: #3AD8BC;
}
}
&:nth-of-type(4){
>view:nth-of-type(2){
color: #FA8C16;
}
}
>view:nth-of-type(2){
font-size: 36rpx;
font-weight: 400;
color: #092C4D;
margin-top: 20upx;
}
}
}
}
</style>