logpm/pagesHome/pages/createAddServe/createAddServe.vue

<template>
	<u-navbar title="增值服务" bgColor='#D3832A' leftIconColor='#ffffff' titleStyle='color:#ffffff' placeholder
		:autoBack="true" leftIconSize='35'></u-navbar>
	<view class="select_top">
		<view class="selectlist">
			<view>增值服务类型</view>
			<view @click="showlist">
				<view>{{priceType[checkserveindex].typename}}</view>
				<image src="/static/rigthview.png"></image>
			</view>
		</view>
		<view class="inputtext" v-if="checkserve==2">
			<view>超区公里数(KM)</view>
			<view>
				<input placeholder="请输入" v-model="distance" />
			</view>
		</view>
		<view class="inputtext" v-if="checkserve==1">
			<view>上楼层数</view>
			<view>
				<input placeholder="请输入" v-model="floor" />
			</view>
		</view>
		<view class="inputtext" v-if="checkserve==3">
			<view>平移距离(米)</view>
			<view>
				<input placeholder="请输入" v-model="distance" />
			</view>
		</view>
		<view class="inputtext" v-if="typestate==2">
			<view>录入包条码</view>
			<view>
				<input placeholder="请输入" v-model="scancode" />
				<view @click="scandata(true)" class="">确认</view>
			</view>
		</view>
		<!-- <view class="selectlist">
			<view>楼层</view>
			<view>
				<view>请选择</view>
				<image src="/static/rigthview.png"></image>
			</view>
		</view> -->
		<view class="checktype">
			<view>包件类型</view>
			<view>
				<view @click="setdetails('typestate',1)" :class="typestate==1?'xz':''">
					<image :src="typestate==1?'/pagesHome/static/yescheckblue.png':'/pagesHome/static/nocheckblue.png'">
					</image>
					<view>全部</view>
				</view>
				<view v-if="checkserve!=2&&checkserve!=6" @click="setdetails('typestate',2)" :class="typestate==2?'xz':''">
					<image :src="typestate==2?'/pagesHome/static/yescheckblue.png':'/pagesHome/static/nocheckblue.png'">
					</image>
					<view>部分</view>
				</view>
			</view>
		</view>
	</view>
	<scroll-view scroll-y="true" class="scvbo">
		<view class="itemscbox" v-for="(item,index) in allpack" v-if="typestate==1">
			<view class="types1">
				<view>{{index+1}}</view>
				<view @click="removeitem(index)">移除</view>
			</view>
			<view class="types2">
				<image src="/pagesHome/static/scanicon1.png"></image>
				<view @click.stop="goorderdetail(item)">订单编号：{{item.orderCode}}</view>
			</view>
			<view class="types2">
				<image src="/pagesHome/static/scanicon1.png"></image>
				<template v-if="Number(item.conditions) !== 3">
					<view>包件码：{{item.orderPackageCode}}</view>
				</template>
				<!-- 零担 -->
				<template v-else>
					<view>总数：{{item.maxQuantity}}</view>
				</template>
			</view>
			<template v-if="Number(item.conditions) === 3">
				<view class="zeroSignboard">
					<view>
						零担
					</view>
				</view>
			</template>
		</view>
		<view class="itemscbox" v-for="(item,index) in scanpack" v-if="typestate==2">
			<view class="types1">
				<view>{{index+1}}</view>
				<view @click="removeitem(index)">移除</view>
			</view>
			<view class="types2">
				<image src="/pagesHome/static/scanicon1.png"></image>
				<view @click.stop="goorderdetail(item)">订单编号：{{item.orderCode}}</view>
			</view>
			<view class="types2">
				<image src="/pagesHome/static/scanicon1.png"></image>
				<template v-if="Number(item.conditions) !== 3">
					<view>包件码：{{item.orderPackageCode}}</view>
				</template>
				<!-- 零担 -->
				<template v-else>
					<view style="display: flex;">
						<view>数量：</view>
						<input type="number" v-model="item.zeroQuantity" @input="inputNum(item)">
					</view>
				</template>
			</view>
			<template v-if="Number(item.conditions) === 3">
				<view class="zeroSignboard">
					<view>
						零担
					</view>
				</view>
			</template>
		</view>
	</scroll-view>
	<!-- 提交增值服务 -->
	<view class="submitqrs" @click="submitpackge">确定</view>
	<tiplist ref="tiplists"></tiplist>
	<!-- #ifdef APP -->
	<saomiao2 :ishidestop="scanState !== 0"></saomiao2>
	<!-- #endif -->
</template>

<script lang="ts" setup>
	import {
		addvaluegetAllPackageList,
		addvaluesaveAddvalueInfo,
		addvaluescanAddvaluePackage,
		addvalueaddvalueInfo,
		addvalueeditAddvalueInfo,
		addvalueupdateAddvalueInfo,
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from '@dcloudio/uni-app';
	import { reactive, ref, toRefs, watchEffect } from "vue";
	import utils from '@/utils/utils';
	import useSystemSettingsStore from '@/store/useSystemSettingsStore';
	import { storeToRefs } from 'pinia';
	const { scanState } = storeToRefs(useSystemSettingsStore())
	const tiplists = ref(null)
	let details = reactive({
		typestate: 1,
		priceType: [
			{ typename: '上楼', type: 1 },
			{ typename: '超区', type: 2 },
			{ typename: '平移', type: 3 },
			{ typename: '搬运', type: 4 },
			{ typename: '分拣入户', type: 5 },
			{ typename: '专车', type: 6 },
		],
		checkserveindex: 0,
		checkserve: 1,
		allpack: [],
		scanpack: [],
		reservationId: '',
		floor: '',
		distance: '',
		scancode: '',
		deliveryId: '',
		editId: '',
		addvalueType: '',
		addvalueDetailId: ''
	})
	onLoad((op) => {
		details.reservationId = op.reservationId
		details.deliveryId = op.deliveryId
		details.editId = op.editId
		details.addvalueType = op.addvalueType
		if (details.addvalueType) {
			details.typestate = Number(details.addvalueType)
		}
		// details.reservationId='1704046446615171074'
	})
	function goorderdetail(item) {
		uni.navigateTo({
			url: '/pagesHome/pages/orderDetails/orderDetails?orderCode=' + item.orderCode
		})
	}
	onShow(async () => {
		// #ifdef APP
		uni.$off('scancodedate')
		uni.$on('scancodedate', function (code) {
			if (code) {
				// console.log(code);
				details.scancode = code
				scandata()
			}
		})
		// #endif
		// 有修改id时
		if (details.editId) {
			await getallpack()
			await init()
		}
		else await getallpack()
	})
	/* 	onHide(() => {
			uni.$off('scancodedate')
		}) */
	watchEffect(() => {
		details.checkserve = details.priceType[details.checkserveindex].type
	})
	async function init() {
		let data = {
			reservationId: details.reservationId,
			addvalueType: details.addvalueType,
		}
		let res = await addvalueeditAddvalueInfo(data)
		console.log(res);
		console.log('details.allpack :>> ', details.allpack);
		if (res.code !== 200) return
		if (res.data.addvalueDetailId) {
			details.addvalueDetailId = res.data.addvalueDetailId
		}
		if (res.data.addvalueId) {
			details.checkserveindex = Number(res.data.addvalueId) - 1
		}
		console.log(details.checkserveindex);
		if (res.data.floolNum) {
			details.floor = res.data.floolNum
		}
		if (res.data.distance) {
			details.distance = res.data.distance
		}
		if (res.data.isAll === 1) {
			details.typestate = 1
		} else {
			details.typestate = 2
			details.scanpack = res.data.packageEntityList
			console.log('details.scanpack :>> ', details.scanpack);
			details.scanpack.forEach(val => val.zeroQuantity = val.quantity)
		}
	}
	async function scandata(isManual ?: boolean) {
		// 包件类型 -- 全部不支持请求
		if (details.typestate == 1) return

		// 包件类型 -- 部分
		let list = []

		const _flag = details.scanpack.every(item => {
			if (item.orderPackageCode === details.scancode) {
				uni.showToast({
					title: '重复扫描',
					icon: 'none'
				})
				// #ifdef APP
				utils.ttsspke('重复扫描')
				// #endif
				return false
			}
			list.push(item.id)
			return true
		})

		if (!_flag) return
		let data = {
			reservationId: details.reservationId,
			barcode: details.scancode,
			packageListIds: [],
			isManual: 1,
			deliveryId: details.deliveryId,
		}
		// 手输
		if (isManual) {
			data.isManual = 2
			data.packageListIds = list
		}
		// 请求数据
		let response = await addvaluescanAddvaluePackage(data)
		if (response.code !== 200) return
		details.scanpack = details.scanpack.concat(response.obj)
	}

	/**
	 * 移除
	 */
	function removeitem(index : number) {
		if (details.typestate == 1) {
			details.allpack.splice(index, 1)
		} else if (details.typestate == 2) {
			details.scanpack.splice(index, 1)
		}
	}

	/**
	 * 设置details
	 */
	function setdetails<T>(uname : string, value : T) : void {
		details[uname] = value
	}

	async function submitpackge() {
		let response = null
		// 修改提交
		if (details.editId) response = await handleEditSubmit()
		// 新增提交
		else response = await handleNewSubmit()
		console.log('res >>', response);
		if (response.code !== 200) return
		// 返回上一页
		uni.navigateBack()
	}
	/**
	 * 新增提交
	 */
	async function handleNewSubmit() {
		if ((details.checkserve == 2 || details.checkserve == 3) && !details.distance) {
			uni.showToast({
				title: '请输入距离',
				icon: 'none'
			})
			return
		} else if (details.checkserve == 1 && !details.floor) {
			uni.showToast({
				title: '请输入楼层数',
				icon: 'none'
			})
			return
		}
		let data = {
			addvalueType: details.checkserve,
			floolNum: details.checkserve == 1 ? details.floor : '',
			distance: details.checkserve != 1 ? details.distance : '',
			num: details.allpack.length,
			reservationId: details.reservationId,
			packageEntityList: details.allpack,
		}
		// 包件类型 -- 部分
		if (details.typestate == 2) {
			data.packageEntityList = details.scanpack.map(val => {
				val.quantity = val.zeroQuantity
				return val
			})
		} else {
			data.packageEntityList.forEach(val => {
				if (Number(val.conditions) === 3) {
					val.zeroQuantity = val.maxQuantity
					val.quantity = val.maxQuantity
				}
			})
		}
		let response = await addvaluesaveAddvalueInfo(data)
		return response
	}
	/**
	 * 修改提交
	 */
	async function handleEditSubmit() {
		if ((details.checkserve == 2 || details.checkserve == 3) && !details.distance) {
			uni.showToast({
				title: '请输入距离',
				icon: 'none'
			})
			return
		} else if (details.checkserve == 1 && !details.floor) {
			uni.showToast({
				title: '请输入楼层数',
				icon: 'none'
			})
			return
		}
		let data = {
			addvalueType: details.checkserve,
			floolNum: details.checkserve == 1 ? details.floor : '',
			distance: details.checkserve != 1 ? details.distance : '',
			num: details.allpack.length,
			reservationId: details.reservationId,
			packageEntityList: details.allpack,
			addvalueDetailId: details.addvalueDetailId
		}
		// 包件类型 -- 部分
		if (details.typestate == 2) {
			data.packageEntityList = details.scanpack.map(val => {
				val.quantity = val.zeroQuantity
				return val
			})
		} else {
			data.packageEntityList.forEach(val => val.zeroQuantity = val.quantity)
		}
		const response = await addvalueupdateAddvalueInfo(data)
		return response
	}
	function showlist() {
		let list = []
		details.priceType.map(item => {
			list.push(item.typename)
		})
		tiplists.value.setdetails({
			title: '请选择增值服务类型',
			isshow: true,
			tipstate: 2,
			list,
			checklist: [details.checkserveindex],
			inputtext: '',
			confirmTxt: '确认选择',
			isonecheck: true,
			success: (deta) => {
				if (deta.checklist.length == 0) {
					uni.showToast({
						title: '请选择增值服务类型',
						icon: 'none'
					})
					return
				}
				details.checkserveindex = deta.checklist[0]
				if (details.checkserveindex == 1 || details.checkserveindex == 5) {
					details.typestate = 1
				}
				tiplists.value.setdetails({ isshow: false })
			},
			cancel: (details) => {
				tiplists.value.setdetails({ isshow: false })
			},
			close: (details) => {
				tiplists.value.setdetails({ isshow: false })
			}
		})
	}
	async function getallpack() {
		let data = {
			reservationId: details.reservationId,
			packageListIds: [],
		}
		let response = await addvaluegetAllPackageList(data)
		console.log('response :>> ', response);
		details.allpack = response.data
		details.scanpack = []
		details.allpack.forEach(val => {
			if (Number(val.conditions) === 3) {
				val.zeroQuantity = 0
				details.scanpack.push(val)
			}
		})
		console.log('details.scanpack :>> ', details.scanpack);
		return response
	}

	/**
	 * 输入框事件
	 */
	let timer : any = null
	function inputNum(item) {
		if (timer) clearTimeout(timer)
		timer = setTimeout(() => {
			console.log('item :>> ', item);
			let _value = parseInt(item.zeroQuantity)
			if (_value < 0) _value = 0
			else if (_value > item.maxQuantity) _value = item.maxQuantity
			else if (_value !== _value) _value = 0
			item.zeroQuantity = _value
			clearTimeout(timer)
		}, 200)
	}
	const {
		scancode,
		distance,
		floor,
		allpack,
		scanpack,
		typestate,
		priceType,
		checkserveindex,
		checkserve
	} = toRefs(details)
</script>

<style lang="scss" scoped>
	$subjectColor: #d3832a;

	.submitqrs {
		width: 686upx;
		height: 100upx;
		background: #D3832A;
		border-radius: 16upx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: auto;
		color: #FFFFFF;
		font-size: 32upx;
		font-weight: 400;
	}

	.scvbo {
		width: 100%;
		height: 58vh;
		margin-top: 15upx;
		margin-bottom: 15upx;

		.itemscbox {
			width: 686upx;
			background: #FFFFFF;
			border-radius: 16upx;
			margin: auto;
			margin-bottom: 16upx;
			padding: 0 30upx;
			box-sizing: border-box;
			position: relative;
			overflow: hidden;
			// background: linear-gradient(45deg, $subjectColor 1%, #fff);

			.types2 {
				display: flex;
				align-items: center;
				padding: 25upx 0;
				border-bottom: 1upx solid #EEEEEE;

				&:nth-last-child(1) {
					border-bottom: none;
				}

				>image {
					width: 32upx;
					height: 32upx;
					margin-right: 14upx;
				}

				>view {
					font-size: 28rpx;
					font-weight: 400;
					color: #020B18;
				}
			}

			.types1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 25upx 0;
				border-bottom: 1upx solid #EEEEEE;

				>view:nth-of-type(1) {
					width: 48upx;
					height: 48upx;
					background-color: #e7f3fd;
					color: #178AF2;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				>view:nth-of-type(2) {
					width: 84upx;
					height: 64upx;
					background: rgba(248, 84, 75, 0.102);
					border-radius: 4upx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28upx;
					font-weight: 400;
					color: #F8544B;
				}
			}
		}
	}

	.select_top {
		width: 750upx;
		// height: 420upx;
		background: #FFFFFF;
		padding: 20upx 46upx;
		box-sizing: border-box;

		>.checktype {
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 20upx 0;
			padding-bottom: 10upx;
			padding-top: 25upx;

			>view:nth-of-type(1) {
				font-size: 32upx;
				font-weight: 400;
				color: #092C4D;
			}

			>view:nth-of-type(2) {
				display: flex;
				align-items: center;

				.xz {
					>view {
						color: #0086F1 !important;
					}
				}

				>view {
					font-size: 28upx;
					font-weight: 400;
					color: #AFB5BE;
					display: flex;
					align-items: center;
					margin-right: 20upx;

					&:nth-last-child(1) {
						margin-right: 0 !important;
					}

					>image {
						width: 32upx;
						height: 32upx;
						margin-right: 10upx;
					}

					>view {
						font-size: 32upx;
						font-weight: 400;
						color: #020B18;
					}
				}
			}
		}

		>.inputtext {
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 20upx 0;
			border-bottom: 1upx solid #EEEEEE;

			>view:nth-of-type(1) {
				font-size: 32upx;
				font-weight: 400;
				color: #092C4D;
			}

			>view:nth-of-type(2) {
				flex: 1;
				margin-left: 30upx;
				text-align: right;
				display: flex;
				align-items: center;

				>input {
					flex: 1;

				}

				>view {
					width: 100upx;
					height: 45upx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26upx;
					color: #D3832A;
					border: 1upx solid #D3832A;
					border-radius: 5upx;
					margin-left: 20upx;
				}
			}
		}

		>.selectlist {
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 20upx 0;
			border-bottom: 1upx solid #EEEEEE;

			>view:nth-of-type(1) {
				font-size: 32upx;
				font-weight: 400;
				color: #092C4D;
			}

			>view:nth-of-type(2) {
				display: flex;
				align-items: center;

				>view {
					font-size: 28upx;
					font-weight: 400;
					color: #AFB5BE;
				}

				>image {
					width: 24upx;
					height: 32upx;
				}
			}
		}
	}

	// 零担标识
	.zeroSignboard {
		position: absolute;
		top: 50%;
		left: -20upx;
		transform: translateY(-50%);
		border: 1upx solid #47a2f4;
		padding: 10upx;
		border-radius: 50%;

		view {
			width: 80upx;
			height: 80upx;
			border: 1upx solid #47a2f4;
			border-radius: 50%;
			color: #47a2f4;
			line-height: 80upx;
			text-align: center;
		}
	}
</style>