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-12位密码" class="input-card"
			v-model="info.password" maxlength="12" />
		<view class="card" style="margin-top: 40rpx;" @click="location">
			<view class="row">
				<view>{{areaStr}}</view>
				<view class="">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>

		<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>
	</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: "请选择配送区域"
			}
		},
		onLoad(e) {
			this.pageType = Number(e.type);
			if (this.pageType === 2) {
				uni.setNavigationBarTitle({
					title: "编辑信息"
				})
				this.info = JSON.parse(e.info);
				this.setSend()
			}
		},
		methods: {
			// 获取配送类型
			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() {
				this.$EventBus.$on('listenSetArea', (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>