QianNiaoShop/pagesT/order/AddShippingAddress.vue

<template>
	<view class="detail-view">
		<u-form label-width="140" :model="add_form" ref="uForm">
			<view class="form-model-view">
				<u-form-item required label="收货人" prop="name">
					<u-input type="text" v-model="add_form.name" placeholder="收货人名称" />
				</u-form-item>
				<u-form-item required label="收货地址">
					<u-input v-model='area' class="dis-input" @click="region_show = true" disabled
						placeholder="请选择所属区域" />
					<u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
				</u-form-item>
				<u-form-item required label-position="top" label="详细地址" prop="address">
					<u-input v-model="add_form.address" type="textarea" placeholder="详细地址,例如楼牌,门号" />
				</u-form-item>
				<u-form-item required label="联系电话">
					<u-input v-model="add_form.mobile" type="number" placeholder="填写收货人联系电话" />
				</u-form-item>
			</view>
		</u-form>
		<view class="detail-bottom">
			<view class="handel-btn" @click="addSupplier">提交</view>
		</view>
		<RegionSel v-model="region_show" @confirm="confirm" @cancel="region_show = false" />
	</view>
</template>

<script>
	import RegionSel from '@/components/region/RegionSel.vue';
	export default {
		components: {
			RegionSel
		},
		data() {
			return {
				area: '',
				add_form: {
					name: '',
					provinceCode: '',
					cityCode: '',
					districtCode: '',
					address: '',
					mobile: '',
				},
				region_show: false,
				rules: {
					name: [{
						required: true,
						message: "请填写收货人",
						trigger: "blur"
					}, ],
					address: [{
						required: true,
						message: "请输入详细地址",
						trigger: "blur"
					}, ],
				},
				customerId: ''
			};
		},
		onLoad(options) {
			if (options.customerId) {
				this.customerId = options.customerId
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			addSupplier() {
				if (!this.add_form.name.trim() ||
					!this.area.trim() ||
					!this.add_form.mobile.trim() ||
					!this.add_form.address.trim()) {
					this.$u.toast('必填项不能为空')
					return
				}
				if (!this.$u.test.mobile(this.add_form.mobile)) {
					this.$u.toast('手机号格式有误，请重新输入!')
					return
				}
				this.$u.api.addShippingAddress({
					name: this.add_form.name,
					mobile: this.add_form.mobile,
					provinceCode: this.add_form.provinceCode,
					cityCode: this.add_form.cityCode,
					districtCode: this.add_form.districtCode,
					address: this.add_form.address,
					defaultStatus: 5,
					customerId: this.customerId,
				}).then(res => {
					this.$u.toast('新增成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				})
			},
			confirm(val) {
				this.add_form.provinceCode = val[0].value;
				this.add_form.cityCode = val[1].value;
				this.add_form.districtCode = val[2].value;
				let name = '';
				val.forEach(item => {
					name += item.label;
				});
				this.area = name;
			},
		}
	}
</script>

<style lang="scss">

</style>