货无忧
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
6.6 KiB

<template>
<u-navbar title="增值服务"
bgColor='#D3832A' leftIconColor='#ffffff'
titleStyle='color:#ffffff' placeholder
:autoBack="true" leftIconSize='35'></u-navbar>
<view class="bgcolo"></view>
<view class="card_use">
<view class="card_top">
<view>
<view>客户</view>
<view>{{details.items.consignee}}</view>
</view>
<view>
<view>签收状态</view>
<view style="color: #0086F1;">{{details.items.deliveryStatus}}</view>
</view>
</view>
<view class="card-content">
<view>
<view>订单总数</view>
<view>{{details.items.ordNub}}</view>
</view>
<view>
<view>配送件数</view>
<view>{{details.items.reservationNum}}</view>
</view>
<view>
<view>扫描件数</view>
<view>{{details.items.signNub}}</view>
</view>
</view>
</view>
<scroll-view scroll-y="true" class="scvs">
<view class="maboxsw">
<view class="itemboxs" v-for="item in details.priceList">
<view class="topdivs">
<view>
<view>{{details.priceType[Number(item.addvalueId)-1].typename}}</view>
<view>{{item.floolNum?item.floolNum+' 楼':item.distance&&item.addvalueId=='2'?item.distance+' km':item.distance+' m'}}</view>
<view>{{item.fee||'0'}}元</view>
</view>
<image @click="goValueaddedServicePage" src="/pagesHome/static/editorder.png"></image>
</view>
<view class="titlor">
订单列表
</view>
<view class="orderlists">
<view class="minitem" v-for="ite in item.packageEntityList">
<view>货物名称:<text style="color: #8D97A3;">{{ite.materialName}}</text></view>
<view>订单号:<text style="color: #8D97A3;">{{ite.orderCode}}</text></view>
<view>包条码:<text style="color: #8D97A3;">{{ite.orderPackageCode}}</text></view>
</view>
</view>
</view>
</view>
</scroll-view>
<view class="butadd" @click="goaddserve">
增加增值服务
</view>
</template>
<script lang="ts" setup>
import {
addvalueaddvalueInfo
} from '@/api/user.js'
import {
onLoad,
onShow,
onHide,
onUnload
} from '@dcloudio/uni-app'
import { reactive } from "vue";
let details=reactive({
reservationId:'',
items:{} as any,
priceType:[
{typename:'上楼',type:1},
{typename:'超区',type:2},
{typename:'平移',type:3},
{typename:'搬运',type:4},
{typename:'分拣入户',type:5},
{typename:'专车',type:6},
],
priceList:[]
})
onLoad((op)=>{
details.reservationId=op.reservationId
details.items=JSON.parse(op.item)
})
onShow(()=>{
init()
})
async function init(){
let data={
reservationId:details.items.id
}
let res=await addvalueaddvalueInfo(data)
details.priceList=res.data
}
function goValueaddedServicePage(){
uni.navigateTo({
url:'/pagesHome/pages/createAddServe/createAddServe?reservationId='+details.items.id
+'&deliveryId='+details.reservationId
})
}
function goaddserve(){
uni.navigateTo({
url:'/pagesHome/pages/createAddServe/createAddServe?reservationId='+details.items.id
+'&deliveryId='+details.reservationId
})
}
</script>
<style lang="scss">
.butadd{
width: 686upx;
height: 100upx;
background: #D3832A;
border-radius: 16upx;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
margin-top: 30upx;
font-size: 32upx;
font-weight: 400;
color: #FFFFFF;
}
.bgcolo{
width: 750upx;
height: 200upx;
background: linear-gradient(180deg, #D3832A 0%, rgba(211,131,42,0) 100%);
border-radius: 0upx 0upx 0upx 0upx;
opacity: 1;
position: absolute;
left: 0;
}
.card_use{
width: 686upx;
height: 280upx;
background: #FFFFFF;
border-radius: 16upx;
position: relative;
margin: auto;
margin-top: 40upx;
padding: 26upx 22upx;
box-sizing: border-box;
.card_top{
display: flex;
align-items: center;
>view{
width: 50%;
display: flex;
align-items: center;
>view:nth-of-type(1){
font-size: 32upx;
font-weight: 400;
color: #8D97A3;
margin-right: 30upx;
}
>view:nth-of-type(2){
font-size: 32upx;
font-weight: 500;
color: #092C4D;
}
}
}
.card-content{
width: 640upx;
height: 160upx;
background: #F5F7FB;
border-radius: 8upx;
margin-top: 24upx;
display: flex;
align-items: center;
justify-content: space-around;
>view{
display: flex;
flex-direction: column;
align-items: center;
.blue{
}
>view:nth-of-type(1){
font-size: 28upx;
font-weight: 400;
color: #020B18;
}
>view:nth-of-type(2){
font-size: 36upx;
font-weight: 400;
color: #178AF2;
margin-top: 20upx;
}
}
}
}
.scvs{
width: 100%;
height: 52vh;
margin-top: 15px;
.maboxsw{
.itemboxs{
width: 686upx;
// height: 640upx;
background: #FFFFFF;
border-radius: 16upx;
margin: auto;
box-sizing: border-box;
margin-bottom: 16upx;
&:nth-last-child(1){
margin-bottom: 0;
}
.topdivs{
width: 100%;
height: 88upx;
background: linear-gradient(133deg, rgba(250,140,22,0.2) 0%, rgba(250,140,22,0) 100%);
opacity: 1;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20upx 30upx;
box-sizing: border-box;
border-radius: 16upx 16upx 0 0;
>image{
width: 40upx;
height: 40upx;
}
>view{
display: flex;
align-items: center;
font-size: 28upx;
>view:nth-of-type(1){
width: 96upx;
height: 48upx;
background: #FA8C16;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6upx;
margin-right: 20upx;
}
>view:nth-of-type(2){
font-size: 28upx;
font-weight: 400;
color: #8D97A3;
border-right: 1upx solid #8D97A3;
padding-right: 12upx;
}
>view:nth-of-type(3){
font-size: 28upx;
font-weight: 400;
color: #F8544B;
margin-left: 12upx;
}
}
// border: 2upx solid #FFFFFF;
}
.titlor{
font-size: 34upx;
font-weight: 600;
color: #092C4D;
padding: 20upx 32upx;
box-sizing: border-box;
}
.orderlists{
display: flex;
flex-direction: column;
width: 630upx;
margin: auto;
>.minitem{
display: flex;
flex-direction: column;
border-bottom: 1upx solid #EEEEEE;
padding-bottom: 30upx;
padding-top: 20upx;
&:nth-last-child(1){
border-bottom: none;
}
>view{
font-size: 28upx;
font-weight: 400;
color: #092C4D;
margin-bottom: 10upx;
}
}
}
}
}
}
</style>