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>
							<template v-if="item.floolNum">
								<text>{{item.floolNum+' 楼'}}</text>
							</template>
							<template v-else-if="item.distance&&item.addvalueId=='2'">
								<text>{{item.distance+' km'}}</text>
							</template>
							<template v-else-if="item.distance">
								<text>{{item.distance||''+' m'}}</text>
							</template>
						</view>
						<view>{{item.fee||'0'}}元</view>
					</view>
					<view style="display: inline-flex;">
						<image @click="goValueaddedServicePage(item)" src="/pagesHome/static/editorder.png"></image>
						<view @click="removeItem(item)"
							style="background-color: #fff; color: #178af2; margin: 0 0 0  20px; border: 1px solid #178af2;">
							取消
						</view>
					</view>
				</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>
						<template v-if="Number(ite.conditions) !==3">
							<view>包条码：<text style="color: #8D97A3;">{{ite.orderPackageCode}}</text></view>
						</template>
						<template v-else>
							<view>件数：<text style="color: #8D97A3;">{{ite.quantity || 0}}</text></view>
						</template>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
	<tiplist ref="tiplists"></tiplist>
	<view class="butadd" @click="goaddserve">
		增加增值服务
	</view>
</template>

<script lang="ts" setup>
	import {
		addvalueaddvalueInfo,
		addvalueupdateAddvalueInfo
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
		onUnload,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import { reactive, ref } 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(() => {
		// #ifdef APP
		uni.$off('scancodedate')
		// #endif
		init()
	})

	onPullDownRefresh(() => {
		const timer = setTimeout(() => {
			init()
			uni.stopPullDownRefresh()
			clearTimeout(timer)
		}, 500)
	})

	const tiplists = ref(null)
	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)
		if (res.code !== 200) return
		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
		})
	}

	/**
	 * 取消任务
	 */
	function removeItem(_item : any) {
		console.log('_item :>> ', _item);
		tiplists.value.setdetails({
			title: `确认取消该${details.priceType[Number(_item.addvalueId) - 1].typename}服务`,
			isshow: true,
			tipstate: 2,
			list: [],
			inputtext: '',
			confirmTxt: '确认取消',
			isonecheck: true,
			success: async () => {
				const submitData = {
					reservationId: details.items.id,
					addvalueType: _item.addvalueId,
					addvalueDetailId: _item.addvalueDetailId,
					floolNum: '',
					distance: '',
					num: 0,
					packageEntityList: []
				}
				const res = await addvalueupdateAddvalueInfo(submitData)
				console.log('res :>> ', res);
				if (res.code === 200) uni.showToast({
					title: '删除成功',
					icon: 'none'
				})
				init()
				tiplists.value.setdetails({ isshow: false })
			},
			cancel: (details) => {
				tiplists.value.setdetails({ isshow: false })
			},
			close: (details) => {
				tiplists.value.setdetails({ isshow: false })
			}
		})
	}
</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;
							padding: 0 20upx;
							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>