logpm/pagesHome/pages/SetPrice/SetPrice.vue

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