货无忧
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.

309 lines
6.6 KiB

2 years ago
<template>
<u-navbar title="装车扫描" placeholder border=true :autoBack="true" leftIconSize='35'></u-navbar>
<view class="schbox">
<view>配车日期</view>
<view @click.stop='showtime(true)' class="inputsr">
<input :value='datatime' disabled placeholder="请选择时间"/>
<view @click.stop="">
<u-icon @click.stop='showtime(true)' style="margin-right: 10rpx;" v-if="!datatime" name="calendar" color="#999999" size="50"></u-icon>
<u-icon @click.stop="cleartime" style="margin-right: 10rpx;" v-else name="close-circle" color="#999999" size="40"></u-icon>
</view>
</view>
<view>
查询
</view>
</view>
<scroll-view scroll-y="true" class="scvbx">
<view class="mabxslist">
<view class="item" v-for="item in recordsList">
<view class="headtop">
<view class="type1s">
<view>
<text style="color: #90A0AF;">配车类型</text>{{item.type}}
</view>
<view>
<text style="color: #90A0AF;">配车状态</text>待配车
</view>
</view>
<view class="type1s">
<view>
<text style="color: #90A0AF;">车牌号</text>川A88888
</view>
<view>
<text style="color: #90A0AF;">司机</text>张琪罗翔
</view>
</view>
<view class="type1s">
<view>
<text style="color: #90A0AF;">装御班组</text>A班组
</view>
<view class="bhcolor">
<text style="color: #90A0AF;">备货是否完成</text>备货完成
</view>
</view>
<view class="type1s">
<view>
<text style="color: #90A0AF;">制单时间</text>2023-06-05 15:12:13
</view>
</view>
<view class="type1s">
<view>
<text style="color: #90A0AF;">任务时间</text>2023-06-05 15:12:13
</view>
</view>
<view class="liebs">
<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>
<view class="buts">
<view @click="">发车</view>
<view @click="goselscan">装车扫描</view>
</view>
</view>
</view>
</scroll-view>
<u-datetime-picker :show="show" mode="datetime" @cancel="showtime(false)" @confirm="checktime"
itemHeight='80'></u-datetime-picker>
</template>
<script lang="ts" setup>
import {
onLoad,
onShow,
onHide,
onUnload
} from '@dcloudio/uni-app'
import { deliverypage } from '@/api/user.js'
import { detailType } from '@/interfaces/pagesHome/LoadingScan'
import { reactive, toRefs } from "vue";
let details = reactive<detailType>({
datatime: '',
show: false,
recordsList:[]
})
onLoad(()=>{
initpage()
})
function showtime(value : boolean) {
console.log(value);
details.show = value
}
async function initpage(){
let data={
current:1,
size:10
}
let response=await deliverypage(data)
console.log(response);
details.recordsList=response.data.records
}
function checktime(event : any) {
console.log(event);
details.datatime = (uni as any).$u.timeFormat(event.value, 'yyyy-mm-dd');
details.show = false
console.log(details.datatime);
}
function goselscan() {
uni.navigateTo({
url: '/pagesHome/pages/DeliveryCustomerScan/DeliveryCustomerScan'
})
}
function cleartime(){
console.log(cleartime);
details.datatime=''
}
const { datatime, recordsList, show } = toRefs(details)
</script>
<style lang="scss">
.inputsr{
width: 420rpx;
height: 64rpx;
background: #F5F5F6;
border-radius: 8rpx 8rpx 8rpx 8rpx;
opacity: 1;
border: 2rpx solid #EEEEEE;
padding: 16upx 18upx;
box-sizing: border-box;
padding-right: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
font-weight: 400;
color: #092C4D;
}
.scvbx {
width: 100%;
height: 81vh;
margin-top: 20upx;
.mabxslist {
display: flex;
flex-direction: column;
align-items: center;
>.item {
width: 686upx;
// height: 610upx;
background: #FFFFFF;
border-radius: 8upx;
padding: 20upx 0;
box-sizing: border-box;
margin-bottom: 20upx;
>.headtop {
display: flex;
flex-direction: column;
padding: 24upx;
>.type1s {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20upx;
box-sizing: border-box;
font-size: 28upx;
font-weight: 400;
color: #092C4D;
>view {
flex: 1;
}
.bhcolor{
color: #0086F1;
}
}
>.liebs {
display: flex;
align-items: center;
justify-content: space-around;
>view {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20upx;
&: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(1) {
font-size: 28upx;
font-weight: 400;
color: #092C4D;
}
>view:nth-of-type(2) {
font-size: 36upx;
font-weight: 400;
margin-top: 20upx;
}
}
}
}
>.buts {
border-top: 3upx solid #EEEEEE;
display: flex;
align-items: center;
justify-content: space-around;
padding-top: 20upx;
>view {
width: 204upx;
height: 64upx;
border-radius: 8upx;
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 28upx;
}
>view:nth-of-type(1) {
border: 2upx solid #0086F1;
color: #0086F1;
}
>view:nth-of-type(2) {
border: 2upx solid #D3832A;
color: #D3832A;
}
}
}
}
}
.schbox {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15upx 32upx;
box-sizing: border-box;
background-color: #ffffff;
>view:nth-of-type(1) {
// width: 150upx;
font-size: 28upx;
font-weight: 400;
color: #092C4D;
}
>view:nth-of-type(2) {
width: 380upx;
// height: 64upx;
}
>view:nth-of-type(3) {
width: 128upx;
height: 64upx;
background: #D3832A;
border-radius: 8upx;
display: flex;
align-items: center;
justify-content: center;
font-size: 32upx;
font-weight: 400;
color: #FFFFFF;
}
}
</style>