user_mobile_front/src/pages/inexpress.vue

<template>
	<div class="content">
		<div class="jjinfo">
			<van-field ref="searchRef" :value="recipientsName" @focus="onFocus" name="phone" label="收件人姓名"
				placeholder="请输入收件人姓名" :rules="[{ required: true }]" />
			<van-field :value="recipientsPhone" @focus="onFocusPhone" name="phone" label="收件人手机号"
				placeholder="请输入手机号后四位" :rules="[{ required: true }]" />
			<van-field :value="groupValue.departmentName" readonly name="phone" label="收件人部门" placeholder="自动填充" />
			<van-field :value="groupValue.seatNo" readonly name="phone" label="收件人座位" placeholder="自动填充" />
		</div>

		<!-- 寄件属性 -->
		<div class="choose">
			<div>
				<div class="type_wp">
					<div>
						<p>物品类型</p>
						<p v-if="wptype == ''" @click="wpshow = true">请选择</p>
						<p v-else @click="wpshow = true">{{ wptype }}</p>
					</div>
					<div>
						<p>
							<template>重量(公斤)</template>

						</p>
						<p>
							<van-field name="Kilogram" style="padding: 0px;">
								<template #input>
									<van-stepper v-model="Kilogram" :max="100"></van-stepper>
								</template>
							</van-field>
						</p>
					</div>
					<div>
						<p>
							<template>数量(件数)</template>
						</p>
						<p>
							<van-field name="stepper" style="padding: 0px;">
								<template #input>
									<van-stepper v-model="stepper" :max="100"></van-stepper>
								</template>
							</van-field>
						</p>
					</div>
				</div>
			</div>
		</div>

		<!--商品订单编号-->
		<div class="bz" style="padding-bottom: 0;" v-show="this.accountType == 1">
			<div>
				<van-field maxlength="50" v-model="goodOrderNo" name="调拨单号" label="调拨单号" placeholder="请输入调拨单号" />
			</div>
		</div>

		<!-- 备注 -->
		<div class="bz">
			<div>
				<van-field v-model="bz" name="备注" label="备注" placeholder="包装运输等要求" />
			</div>
		</div>
		<!-- 我同意 -->
		<div class="check">
			<van-checkbox icon-size=".24rem" v-model="check" shape="">我同意《电子运单契约条款》</van-checkbox>
		</div>
		<!-- 寄件 -->
		<div class="btn-jj">
			<van-button type="info" color="#00c4b8" @click="printer()">立即寄件</van-button>
		</div>
		<!-- 弹窗物品类型 -->
		<van-popup v-model="wpshow" position="bottom">
			<van-picker title="物品类型" show-toolbar :columns="wplist" @confirm="onConfirm1" @cancel="wpshow = false" />
		</van-popup>



		<!-- 姓名输入后弹出 -->
		<van-popup v-model="nameShowA" :style="{ height: '100%', width: '100%', }">
			<div style="display: flex; justify-content: space-between;">
				<van-search ref="searchNameRef" style="width: 100%;" @search="searchCrux" v-model="searchKey"
					placeholder="请输入搜索关键词" />
			</div>
			<div style="height: calc(100vh - 105px); overflow-y: auto; padding: 0 20px;">
				<van-cell-group class="vanPopup" @click="onGroup(item)" v-for="(item, index) in searchNameList"
					:key="index" inset>
					<van-cell :value="item.departmentName">{{ item.name }}- {{ item.departmentName }} - {{ item.seatNo
						}}</van-cell>
				</van-cell-group>
			</div>
			<van-button class="goback" @click="nameShowA = false" type="info">
				退出
			</van-button>
		</van-popup>
		<!-- 手机号输入后弹出 -->
		<van-popup v-model="nameShowB" :style="{ height: '100%', width: '100%', }">
			<div style="display: flex; justify-content: space-between;">
				<van-search ref="searchPhoneRef" style="width: 100%;" @search="searchCruxPhone" v-model="searchKeyPhone"
					placeholder="请输入手机后四位" />
			</div>
			<div style="height: calc(100vh - 105px); overflow-y: auto; padding: 0 20px;">
				<van-cell-group class="vanPopup" @click="onGroupPhone(item)"
					v-for="(item, index) in searchNameListPhone" :key="index" inset>
					<van-cell :value="item.departmentName">{{ item.name }}- {{ item.phone }} - {{ item.departmentName
						}}</van-cell>
				</van-cell-group>
			</div>
			<van-button class="goback" @click="nameShowB = false" type="info">
				退出
			</van-button>
		</van-popup>

		<!-- 打印机选择器 -->
		<van-popup v-model="printerShow" position="bottom">
			<van-picker show-toolbar :columns="getPrintersList" @confirm="onPrinter" @cancel="printerShow = false">
				<template v-slot:option="value">
					{{ value.printerName }}
				</template>
			</van-picker>
		</van-popup>
	</div>
</template>

<script>
import areaList from "@/script/areas.js"
import { Stepper, Toast } from 'vant';
import { saveInternal, getUserByName, getListOfPrinters } from '../api/index'
export default {
	data() {
		return {
			titlename: "内部件",
			wptype: "产品",//物品类型
			wpshow: false,//物品类型弹窗显示
			wplist: ["产品", "文件"],
			pricetype: "",//付款类型
			stepper: '',//件数
			Kilogram: '',//重量
			max: '',
			name: "",
			phone: "",
			index: "",
			jjadd: "",
			sjname: "",
			sjadd: "",
			bz: "",
			check: false,
			showPicker: false,//快递
			value: "",
			columns: [],
			columns2: ["个人件", "公司件"],
			user: {},
			expressInfoShow: "",//快递公司展示
			expressPhone: "",//快递公司电话传值
			expressInfo: "",//快递公司传值
			showPicker2: false,
			mainType: '',
			jjaddress: '',//寄件个人地址
			dsList: [],//代收人列表
			userId: "",
			sjInfo: {},
			declaredValue: '',
			innerType: '可销品',//内部调拨
			wpshow2: false,//内部类型弹窗显示
			innerlist: ['可销品', '非卖品'],
			addresstype: "办公室",//地址类型
			addressTypeSend: '',//上传地址类型字段
			addressshow: false,//地址类型弹窗显示
			addlist: ['办公室', '仓库', '店铺调拨'],//
			goodOrderNo: '',
			accountType: '',//账号类型
			// searchQuery: '',
			// showDropdown: false,
			// vanListLoading: false,
			// finished: false,
			// searchResults: [],
			searchKey: '',//姓名搜索结果
			searchKeyPhone: '',//手机搜索结果
			recipientsName: '',//收件人姓名
			recipientsPhone: '',//收件人手机号
			recipientsDoor: '',//部门
			recipientsSet: '',//座位
			nameShowA: false,  // 姓名点击聚焦
			nameShowB: false,  // 手机号点击聚焦
			searchNameList: [],//搜索后的数据
			searchNameListPhone: [],//手机号搜索后的数据
			groupValue: {},//点击后的数据

			getPrintersList: [],// 打印机列表
			printerShow: false
		}
	},
	created: function () {
		this.userId = localStorage.getItem("userId");
		this.accountType = localStorage.getItem("accountType")
	},
	mounted() {
		// this.$refs.searchRef.focus();
	},
	methods: {

		//姓名点击聚焦
		onFocus() {
			this.nameShowA = true
			this.$nextTick(() => {
				if (this.$refs.searchNameRef) {
					const inputEle = this.$refs.searchNameRef.querySelector("input")
					inputEle.focus()
				}
			})
		},
		// 手机号点击聚焦
		onFocusPhone() {
			this.nameShowB = true
			this.$nextTick(() => {
				if (this.$refs.searchPhoneRef) {
					const inputEle = this.$refs.searchPhoneRef.querySelector("input")
					inputEle.focus()
				}
			})

		},
		// 搜索关键
		async searchCrux() {
			const res = await getUserByName({ NAME: this.searchKey }, { loading: true })
			if (res.userByName != '' && res.userByName != undefined && res.userByName != null) {
				if (res.msg == 'success') {
					this.searchNameList = res.userByName
				}
			} else {
				Toast('没有此数据')
			}
		},
		// 手机号搜索关键
		async searchCruxPhone() {
			if (!/^\d{4}$/.test(this.searchKeyPhone)) {
				return Toast('请输入手机号后四位')
			}
			const res = await getUserByName({ PHONE: this.searchKeyPhone }, { loading: true })
			if (res.userByName != '' && res.userByName != undefined && res.userByName != null) {
				if (res.msg == 'success') {
					this.searchNameListPhone = res.userByName
				}
			} else {
				Toast('没有此数据')
			}

		},

		// 点击回显
		onGroup(value) {
			this.groupValue = value
			this.recipientsName = value.name
			this.recipientsPhone = value.phone
			this.nameShowA = false
		},
		// 手机号点击回显
		onGroupPhone(value) {
			this.groupValue = value
			this.recipientsName = value.name
			this.recipientsPhone = value.phone
			this.nameShowB = false
		},

		// 选择快递公司
		onConfirm(e) {
			this.expressInfoShow = e.text
			this.expressInfo = e.id
			this.expressPhone = e.phone
			this.showPicker = false
		},
		onConfirm0(e) {
			this.mainType = e
			this.showPicker2 = false
		},
		// 选择物品确定
		onConfirm1(e) {//确定
			if (e == '产品') {
				this.innerlist = ['可销品', '非卖品']
				this.innerType = '可销品'
			} else {
				this.innerlist = ["小样", "物料"]
				this.innerType = '小样'
			}

			this.wptype = e
			this.wpshow = false
		},
		// 选择内部确定
		onConfirm11(e) {//确定
			this.innerType = e
			this.wpshow2 = false
		},


		// 地址簿跳转
		link(obj) {
			this.$router.push({ path: '/Inaddressbook', query: { active: obj } })
		},
		async printer() {
			const getPrinters = await getListOfPrinters({})
			if (getPrinters.code == 0) {
				this.getPrintersList = getPrinters.data.map((item) => {
					return { printerName: item.printerName, id: item.id }
				})
				if (this.getPrintersList.length === 1) {
					this.save(this.getPrintersList[0].id)
					return
				}
				this.printerShow = true
			} else {
				Toast('系统异常')
			}
			return
		},
		async onPrinter(e) {
			const printerId = e.id;
			this.save(printerId)

		},
		//立即寄件交互
		async save(printerId) {

			if (this.recipientsName == '' || this.recipientsName == undefined) {
				return Toast('请输入收件人姓名')
			}

			if (this.wptype == '' || this.wptype == undefined) {
				Toast('请选择物品类型')
				return
			}

			if (this.stepper == '' || this.stepper == undefined) {
				Toast('请选择数量')
				return
			}

			if (this.check == false) {
				Toast('请点击同意《电子运单契约条款》')
				return
			}


			const toast = Toast.loading({
				message: '保存中...',
				forbidClick: true,
				duration: 0
			});
			let wptypeValue = ''
			if (this.wptype == "产品") {
				wptypeValue = 2
			} else {
				wptypeValue = 1
			}
			let parmas = {
				addresseeId: this.groupValue.userId,
				expressType: wptypeValue, //快件类型 1-文件 2-物品
				expressNum: this.stepper, //快递数量
				expressRemark: this.bz,//快递备注
				expressWeight: this.Kilogram,//公斤
				printId: printerId

			}
			const res = await saveInternal({ ...parmas })
			if (res.msg == 'success') {
				this.$router.push('/')
				Toast('寄件成功')
			} else {
				Toast(res.error)
			}
			toast.clear()

		}
	},
	computed: {
		areaList() {
			return areaList
		}
	}
}
</script>

<style scoped lang="less">
.vanPopup {

	border-bottom: 1px solid #eaeaea;
	padding: 12px 0;
	border-radius: 0px;

	.van-cell {
		padding: 0;
	}

	.van-cell::after {
		border: none;
	}
}

.content {
	.jjinfo {
		font-size: .24rem;
		color: #999999;
		padding: .33rem;
		word-break: break-word;

		// >div {
		// 	background: white;
		// 	border-radius: .05rem;
		// 	padding: .1rem .3rem;

		// 	.jj {
		// 		display: flex;
		// 		justify-content: space-between;
		// 		padding: .2rem 0rem;

		// 		.jjaddress {
		// 			display: flex;
		// 			padding: .1rem 0rem;

		// 			>p {
		// 				font-size: .24rem;
		// 				font-weight: bold;
		// 				display: inline-block;
		// 				width: .5rem;
		// 				height: .5rem;
		// 				background: #00c4b8;
		// 				text-align: center;
		// 				line-height: .5rem;
		// 				color: white;
		// 				border-radius: 50%;
		// 				margin-right: .3rem;
		// 			}

		// 			div {
		// 				//font-weight: bold;
		// 				max-width: 4.2rem;

		// 				p:nth-of-type(1) {
		// 					font-size: .24rem;
		// 					color: #333;
		// 					margin-bottom: .2rem;
		// 				}

		// 				p:nth-of-type(2) {
		// 					font-size: .3rem;
		// 				}
		// 			}
		// 		}

		// 		.dzb {
		// 			text-align: center;
		// 			border-left: .01rem solid #ededed;
		// 			padding-left: .3rem;

		// 			img {
		// 				width: .39rem;
		// 				height: .42rem;
		// 				padding-top: .2rem;
		// 			}

		// 			p {
		// 				font-size: .2rem;
		// 			}

		// 		}
		// 	}
		// }

	}

	.kdshow {
		font-size: .3rem;
		padding: .3rem 0px;
		width: 6.84rem;
		background: white;
		// border-radius: .05rem;
		margin: 0rem auto .2rem;

		/deep/.van-cell {
			padding: 0px .3rem;
			overflow: unset;

			input {
				text-align: right;
				height: .5rem;
				padding-right: .25rem;
			}
		}

		/deep/.van-cell::after {
			content: "";
			display: inline-block;
			border-right: .01rem solid #b0b0b0;
			border-bottom: .01rem solid #b0b0b0;
			transform: rotate(-45deg);
			left: unset;
			position: absolute;
			right: .3rem;
			bottom: .15rem;
			width: .2rem;
			height: .2rem;
		}
	}

	.choose {
		font-size: .3rem;
		color: #999999;
		font-weight: bold;
		padding: 0rem .33rem;

		>div {
			background: white;

			padding: .3rem .3rem;
			// border-radius: .05rem;

			.type_wp {
				display: flex;
				justify-content: center;

				div {
					flex: 1;
					text-align: center;

					p:nth-of-type(2) {
						color: #333;
						margin-top: .2rem;
						font-size: .36rem;
						//position: relative;
					}

				}

				div:nth-of-type(1) {
					border-right: .01rem solid #ededed;

					p:nth-of-type(2):after {
						content: "";
						display: inline-block;
						width: .15rem;
						height: .15rem;
						border-bottom: .01rem solid #999;
						border-right: .01rem solid #999;
						transform: rotate(45deg);
						margin-left: .15rem;
						position: relative;
						top: -.08rem;
					}
				}
			}

			.type_inner {
				display: flex;
				justify-content: center;

				div {
					flex: 1;
					text-align: center;

					p:nth-of-type(2) {

						color: #333;
						margin-top: .2rem;
						font-size: .36rem;
						//position: relative;
					}

					p:nth-of-type(2):after {
						content: "";
						display: inline-block;
						width: .15rem;
						height: .15rem;
						border-bottom: .01rem solid #999;
						border-right: .01rem solid #999;
						transform: rotate(45deg);
						margin-left: .15rem;
						position: relative;
						top: -.08rem;
					}

					/* .inner_p{

							color: black;
							margin-top: .2rem;
							font-size: .36rem;
						} */

				}

				div:nth-of-type(2) {
					border-right: .01rem solid #ededed;

					p:nth-of-type(2):after {
						content: "";
						display: inline-block;
						width: .15rem;
						height: .15rem;
						border-bottom: .01rem solid #999;
						border-right: .01rem solid #999;
						transform: rotate(45deg);
						margin-left: .15rem;
						position: relative;
						top: -.08rem;
					}
				}
			}

		}

	}

	.bz {
		padding: .33rem;
		font-size: .3rem;

		/deep/.van-field__value {
			input {
				text-align: right;
			}

		}
	}

	.check {
		font-size: .24rem;

		text-align: center;

		/deep/.van-checkbox {
			justify-content: center;

			.van-checkbox__label {
				color: #999;
			}
		}
	}

	.btn-jj {
		padding: .33rem;

		button {
			width: 100%;
		}
	}
}

.goback {
	position: fixed;
	height: 50px;
	width: 100%;
	bottom: 0;
	left: 0;
}


.whrite_add {
	width: 6.6rem;
	padding: .4rem .2rem;

	/deep/.van-field__value {
		input {
			text-align: right;
		}

	}

	/deep/.van-popup__close-icon--top-right {
		top: 5px;
		right: 10px;
	}
}
</style>