pet_server/pages/Delivery/create.vue

<template>
	<view class="content">
		<view class="card">
			<view class="row">
				<view>
					运送方式（多选）
				</view>
				<u-checkbox-group>
					<u-checkbox shape="square" v-for="(item,index) in send" :name="item.name" v-model="item.checked"
						:key="index" color="#F6B301">{{item.name}}</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<input type="text" placeholder="请输入公司名称" class="input-card" v-model="info.company" />
		<input type="text" placeholder="请输入姓名" class="input-card" v-model="info.name" />
		<input type="number" maxlength="11" placeholder="请输入联系方式" class="input-card" v-model="info.mobile" />
		<input type="text" placeholder="请输入账号" class="input-card" v-model="info.username" />
		<input type="password" v-if="pageType === 1" placeholder="请输入8-16位密码" class="input-card" v-model="info.password"
			maxlength="12" />
		<!-- <picker mode="region" @change="location" level="city"> -->
		<view class="card" style="margin-top: 40rpx;" @click="show = true">
			<view class="row">
				<view>{{areaStr}}</view>
				<view class="">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<!-- </picker> -->
		<view class="bottom-btn">
			<view class="buttom-dom" @click="create" v-if="pageType === 1">
				创建配送员
			</view>
			<view class="buttom-dom" @click="edit" v-if="pageType === 2">
				确认编辑
			</view>
		</view>
		<u-select v-model="show" :list="citylist" mode="mutil-column-auto" value-name="value" label-name="label"
			child-name="children" @confirm="location"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 运送类型
				type: [],
				// 1添加 2修改
				pageType: 1,
				// 编辑的信息
				info: {},
				// 配送类型
				send: [{
						name: '快车',
						value: 'fast',
						checked: false,
					},
					{
						name: '空运',
						value: 'air',
						checked: false,
					},
					{
						name: '专车',
						value: 'special',
						checked: false,
					},
				],
				// 选中区域
				areaStr: "请选择配送区域",
				citylist: [],
				show: false
			}
		},
		onLoad(e) {
			this.pageType = Number(e.type);
			this.getcity()
			if (this.pageType === 2) {
				uni.setNavigationBarTitle({
					title: "编辑信息"
				})
				this.info = JSON.parse(e.info);
				this.areaStr = this.info.area[0].parent.name + " " + this.info.area[0].name
				this.info.area = [this.info.area[0].id]
				console.log(this.info);
				this.setSend()
			}
		},
		methods: {
			getcity() {
				this.request("/common/area_tree").then(res => {
					res.data.forEach(val => {
						var arr = []
						val.children.forEach(item => {
							arr.push({
								value: item.value,
								label: item.label
							})
						})
						this.citylist.push({
							value: val.value,
							label: val.label,
							children: arr
						})
					})
				})
			},
			// 获取配送类型
			setSend() {
				let data = this.info.send
				for (let s of data) {
					if (s.type === "air") {
						this.send[1].checked = true
					}
					if (s.type === "fast") {
						this.send[0].checked = true
					}
					if (s.type === "special") {
						this.send[2].checked = true
					}
				}
				this.$forceUpdate()
			},
			// 点击配送区域
			location(e) {

				var arr = []
				arr.push(e[0].label)
				arr.push(e[1].label)
				var arr1 = []
				// arr1.push(e[0].value)
				arr1.push(e[1].value)
				this.areaStr = arr.join(" ")
				this.info.area = arr1
				console.log(this.info);
				// this.$EventBus.$on('listenSetArea', (res) => {
				// 	console.log(res);
				// 	let data = this.info;
				// 	data.area = res.data;
				// 	this.info = data
				// 	this.areaStr = res.areaStr
				// 	this.$forceUpdate()
				// })
				// // 新增
				// if (this.pageType === 1) {
				// 	uni.navigateTo({
				// 		url: "./location"
				// 	})
				// }
				// // 编辑
				// if (this.pageType === 2) {
				// 	uni.navigateTo({
				// 		url: "./location?area=" + JSON.stringify(this.info.area)
				// 	})
				// }
			},
			// 确认新增
			create() {
				let data = [];
				for (let s of this.send) {
					if (s.checked) {
						data.push(s.value)
					}
				}
				this.info.send = data;
				this.$forceUpdate()

				console.log(this.info)
				if (this.info.send.length === 0) {
					this.$u.toast('请选择运送方式')
					return false
				}
				if (!this.info.area || this.info.area.length === 0) {
					this.$u.toast('请选择配送区域')
					return false
				}
				if (this.info.company === '' || this.info.company === undefined) {
					this.$u.toast('请填写公司名称')
					return false
				}
				if (this.info.name === '' || this.info.name === undefined) {
					this.$u.toast('请填写姓名')
					return false
				}
				if (this.info.mobile === '' || this.info.mobile === undefined) {
					this.$u.toast('请填写联系方式')
					return false
				}
				if (this.info.username === '' || this.info.username === undefined) {
					this.$u.toast('请填写账号')
					return false
				}
				if (this.info.password === '' || this.info.password === undefined) {
					this.$u.toast('请填写密码')
					return false
				}
				if (this.info.password.length > 16 || this.info.password.length < 8 || this.info.password === undefined) {
					this.$u.toast('密码长度在8-16之间')
					return false
				}
				this.request("/admin_user/store", this.info, "POST").then(res => {
					if (res.code === 1) {
						this.$u.toast('添加成功')
						this.info = {}
						uni.navigateBack({
							delta: res
						})
					}
				})
			},
			// 确认修改
			edit() {
				console.log(this.info, 2222)
				let send = [];
				for (let s of this.send) {
					if (s.checked) {
						send.push(s.value)
					}
				}

				let area = [];
				console.log(typeof this.info.area[0])
				if (typeof this.info.area[0] === 'object') {
					for (let s of this.info.area) {
						area.push(s.id)
					}
				} else {
					// 没有修改区域
					area = this.info.area
				}
				let data = {};
				this.$forceUpdate()
				if (send.length === 0) {
					this.$u.toast('请选择运送方式')
					return false
				}
				if (!this.info.area || this.info.area.length === 0) {
					this.$u.toast('请选择配送区域')
					return false
				}
				if (this.info.company === '') {
					this.$u.toast('请填写公司名称')
					return false
				}
				if (this.info.name === '') {
					this.$u.toast('请填写姓名')
					return false
				}
				if (this.info.mobile === '') {
					this.$u.toast('请填写联系方式')
					return false
				}
				if (this.info.username === '') {
					this.$u.toast('请填写账号')
					return false
				}
				data = {
					id: this.info.id,
					send: send,
					company: this.info.company,
					name: this.info.name,
					mobile: this.info.mobile,
					username: this.info.username,
					area: area,
				}
				this.request("/admin_user/store", data, "POST").then(res => {
					console.log(res)
					if (res.code === 1) {
						this.$u.toast('操作成功')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 2000)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-top: 40rpx;
		background-color: #F8F8F8;
	}

	.card {
		background-color: #FFFFFF;
		width: 93%;
		padding: 30rpx;
		margin: 0 auto;
		margin-bottom: 40rpx;
		border-radius: 30rpx;
	}

	.input-card {
		background-color: #fff;
		width: 90%;
		height: 80rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		padding: 10rpx 0;
		padding-left: 1em;
	}

	.bottom-btn {
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 10vh;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.buttom-dom {
			height: 80rpx;
			width: 93%;
			background-color: #F6B301;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
			color: #FFFFFF;
			border-radius: 80rpx;
		}
	}
</style>