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">
			<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>移除</view>
			</view>
			<view class="types2">
				<image src="/pagesHome/static/scanicon1.png"></image>
				<view>订单编号：{{item.orderCode}}</view>
			</view>
			<view class="types2">
				<image src="/pagesHome/static/scanicon1.png"></image>
				<view>包件码：{{item.orderPackageCode}}</view>
			</view>
		</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>订单编号：{{item.orderCode}}</view>
			</view>
			<view class="types2">
				<image src="/pagesHome/static/scanicon1.png"></image>
				<view>包件码：{{item.orderPackageCode}}</view>
			</view>
		</view>
	</scroll-view>
	<view class="submitqrs" @click="submitpackge">确定</view>
	<tiplist ref="tiplists"></tiplist>
	<saomiao2></saomiao2>
</template>

<script lang="ts" setup>
	import {
		addvaluegetAllPackageList, addvaluesaveAddvalueInfo, addvaluescanAddvaluePackage
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from '@dcloudio/uni-app';
	import { reactive, ref, toRefs, watchEffect } from "vue";
	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:'',
	})
	onLoad((op)=>{
		details.reservationId=op.reservationId
		details.deliveryId=op.deliveryId
		// details.reservationId='1704046446615171074'
		getallpack()
	})
	onShow(()=>{
		uni.$on('scancodedate', function (code) {
			if (code) {
				// console.log(code);
				details.scancode = code
				scandata()
			}
		})
	})
	onHide(()=>{
		uni.$off('scancodedate')
	})
	watchEffect(()=>{
		details.checkserve=details.priceType[details.checkserveindex].type
	})
	async function scandata(isManual?:boolean){
		if(isManual){
			if(details.typestate==1){
				
			}else if(details.typestate==2){
				let list=[]
				details.scanpack.map(item=>{
					list.push(item.id)
				})
				let data={
					reservationId:details.reservationId,
					barcode:details.scancode,
					packageListIds:list,
					isManual:2,
					deliveryId:details.deliveryId,
				}
				let response=await addvaluescanAddvaluePackage(data)
				if(response.code==200){
					details.scanpack=details.scanpack.concat(response.obj)
				}
			}
		}else {
			if(details.typestate==1){
				
			}else if(details.typestate==2){
				let list=[]
				details.scanpack.map(item=>{
					list.push(item.id)
				})
				let data={
					reservationId:details.reservationId,
					barcode:details.scancode,
					packageListIds:[],
					isManual:1,
					deliveryId:details.deliveryId,
				}
				let response=await addvaluescanAddvaluePackage(data)
				if(response.code==200){
					details.scanpack=details.scanpack.concat(response.obj)
				}
			}
		}
		
	}
	function removeitem(index:number){
		details.scanpack.splice(index,1)
	}
	function setdetails<T>(uname: string, value: T): void {
	  details[uname]=value
	}
	async function submitpackge(){
		if(details.typestate==1){
			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.floor,
				distance:details.distance,
				num:details.allpack.length,
				reservationId:details.reservationId,
				packageEntityList:details.allpack,
				
			}
			let response=await addvaluesaveAddvalueInfo(data)
			console.log(response);
			if(response.code==200){
				
			}
		}else if(details.typestate==2){
			
		}
	}
	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)
		details.allpack=response.data
	}
	const {
		scancode,
		distance,
		floor,
		allpack,
		scanpack,
		typestate,
		priceType,
		checkserveindex,
		checkserve
	}=toRefs(details)
</script>

<style lang="scss">
	
	.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;
			.types2{
				display: flex;
				align-items: center;
				padding: 25upx 0;
				border-bottom: 1upx solid #EEEEEE;
				&:nth-last-child(1){
					border-bottom: none;
				}
				>image{
					width: 64upx;
					height: 64upx;
					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;
				}
			}
		}
	}
</style>