kuaiyidian-HD/pages/billing/addUser.vue

<!-- 新增供应商和客户 -->
<template>
	<view>
		<view class="formBox">
			<uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="85px">

				<uni-forms-item label="姓名" name="consigneeName">
					<uni-easyinput type="text" v-model="formData.consigneeName" placeholder="请输入人员姓名" />
				</uni-forms-item>
				<uni-forms-item label="手机号码" name="consigneeMobile">
					<uni-easyinput type="number" v-model="formData.consigneeMobile" placeholder="请输入手机号码" />
				</uni-forms-item>
				<uni-forms-item label="地址" name="address1">
					<view class="input selectcity" @tap="openPicker">
						<input placeholder="请选择省市区" disabled type="text" v-model="formData.address1"></input>
					</view>
				</uni-forms-item>
				<uni-forms-item label="详细地址" name="address">
					<uni-easyinput type="textarea" v-model="formData.address" />
				</uni-forms-item>
			</uni-forms>
			<view class="tui-tabbar">
				<view class="tui-btn-mr" v-if="type=='edit'" @tap.stop="del()">删除人员</view>
				<view class="tui-btn-mr" @tap.stop="submit()">提交</view>
			</view>
			<!-- 省市区选择 show:是否显示  @sureSelectArea：确认事件 @hideShow：隐藏事件-->
			<cc-selectDity :show="show" @sureSelectArea="onsetCity" @hideShow="onhideShow"></cc-selectDity>
		</view>
		<u-modal :show="delShow" :title="'删除'" :content="'是否确认删除此用户？'" showCancelButton="true" @cancel="delShow = false"
			@confirm="delItemModal"></u-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				userInfo: '',
				show: false,
				delShow: false,
				addressObj: {},
				type:'',
				popleType:'',
				formData: {
					consigneeMobile: '',
					consigneeName: '',
					address1: '',
					address: '',
					province: '',
					city: '',
					area: '',
					id: ''
				},
				// 单选数据源
				sexs: [{
					text: '男',
					value: '男'
				}, {
					text: '女',
					value: '女'
				}],
				rules: {
					consigneeName: {
						rules: [{
								required: true,
								errorMessage: '请输入姓名',
							}
						]
					},
					consigneeMobile: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}, {
							minLength: 11,
							maxLength: 11,
							errorMessage: '手机号为11个字符',
						}]
					},
					address1: {
						rules: [{
							required: true,
							errorMessage: '请选择地址',
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '请输入详细地址',
						}]
					},
				},
			};
		},
		computed: {
			...mapState(['shopName', 'shopIndex'])
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad(option) {
			this.popleType = option.popleType
			this.type=option.type
			if (option.type = "edit") {
				this.formData.address1 = data.province + data.city + data.area
				this.formData.address = data.address
				this.formData.area = data.area
				this.formData.city = data.city
				this.formData.province = data.province
				this.formData.id = data.id
				this.formData.consigneeMobile = data.consigneeMobile
				this.formData.consigneeName = data.consigneeName
			}
		},
		methods: {
			del() {
				this.delShow = true;
			},
			delItemModal() {
				this.delShow = false;
				this.tui.request("/app/supplier/delByIds", "post", {
					ids: this.formData.id,
				}, false, true).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: "删除成功",
							icon: 'none'
						})
						uni.navigateBack()
					} else {
						uni.showToast({
							title: "删除失败",
							icon: 'none'
						})
					}
				})
			},
			nameBlur() {
				this.formData.username = this.formData.phone;
			},
			openPicker() {
				this.show = true
			},

			onhideShow() {
				this.show = false
			},
			//选中省市区
			onsetCity(e) {
				let data = e.detail.target.dataset;
				let address = data.province + data.city + data.area;
				this.show = false
				this.formData.address1 = address;
				this.addressObj = {
					province: data.province,
					city: data.city,
					area: data.area,
				}
			},
			// 触发提交表单
			submit() {
				let that = this;
				this.$refs.form.validate().then(res => {
					if(this.popleType == 'khName'){
						that.tui.request("/app/customer/save", "post", {
							name:this.formData.consigneeName,
							phone:this.formData.consigneeMobile,
							address:this.formData.address,
							province:this.addressObj.province,
							city:this.addressObj.city,
							area:this.addressObj.area,
							userName:this.formData.consigneeMobile
						}, false,true).then((res) => {
							if (res.code == 200) {
								uni.showToast({
									title: "添加成功",
									icon: 'none'
								})
								let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
								let prevPage = pages[pages.length - 2]; //上一页页面实例
								prevPage.$vm.popleType = 'khName'
								uni.navigateBack({
									delta: 1
								})
							} else {
								uni.showToast({
									title: "添加失败",
									icon: 'none'
								})
							}
						})
					}else{
						that.tui.request("/app/supplier/save", "post", Object.assign(that.addressObj, res), false,
							true).then((res) => {
							if (res.code == 200) {
								uni.showToast({
									title: "添加成功",
									icon: 'none'
								})
								let pages =
							getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
								let prevPage = pages[pages.length - 2]; //上一页页面实例
								prevPage.$vm.popleType = 'gysName'
								uni.navigateBack({
									delta: 1
								})
							} else {
								uni.showToast({
									title: "添加失败",
									icon: 'none'
								})
							}
						})
					}

				}).catch(err => {
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.formBox {
		margin: 20rpx;
		padding: 20rpx;
		background-color: #fff;
	}

	.tui-tabbar {
		width: 100%;
		height: 98rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 26rpx;
		box-shadow: 0 0 1px rgba(0, 0, 0, .3);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 996;
		padding: 0 20rpx;

		.tui-btn-mr {
			width:130rpx;
			height: 60rpx;
			background: #088FEB;
			color: #fff;
			border-radius: 10px;
			line-height: 60rpx;
			text-align: center;
			margin-right: 30rpx;
		}
	}
</style>