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(item)" 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 @click.stop="goorderdetail(item)">订单号：<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,
		onPullDownRefresh
	} 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()
	})

	onPullDownRefresh(() => {
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 1000)
	})

	function goorderdetail(item) {
		uni.navigateTo({
			url: '/pagesHome/pages/orderDetails/orderDetails?orderCode=' + item.orderCode
		})
	}
	async function init() {
		let data = {
			reservationId: details.items.id
		}
		let res = await addvalueaddvalueInfo(data)
		details.priceList = res.data
	}
	function goValueaddedServicePage(item : any) {
		uni.navigateTo({
			url: '/pagesHome/pages/createAddServe/createAddServe?reservationId='
				+ details.items.id
				+ '&deliveryId=' + details.reservationId
				+ '&editId=' + item.addvalueDetailId
				+ '&addvalueType=' + item.addvalueId
		})
	}
	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>