wardrobe/pages/shouhuodi/index.vue

<template>
	<view :style="{ minHeight: sys.windowHeight + 'px' }" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
		<tm-menubars title="消息列表" :shadow="0" :showback="true"></tm-menubars>
		<div>
			<tm-sheet class="kuang" style="padding-bottom: 40px !important;">
				<view style="width: 94%;margin:0 auto;">
					<tm-input title="收货人" placeholder="请填写收货人姓名" v-model="name"></tm-input>
					<tm-input title="手机号码" placeholder="填写收件人手机号码" v-model="mobile"></tm-input>
					<tm-input title="所在地区" placeholder="省市区县、乡镇等" v-model="region" @click="dateSe_3"></tm-input>
					<tm-input title="详细地址" placeholder="街道、楼牌号等" v-model="address"></tm-input>
				</view>
			</tm-sheet>
			<tm-sheet class="kuang" style="padding-bottom: 20px !important;">
				<view style="width: 94%;margin:0 auto;padding-top:15px;">
					<view class="fl text-white mt-10" style="width: 15%;">标签</view>
					<view class="fl" style="width: 80%;">
						<tm-button class="ml-20" :round="10" theme="gray" size="s">{{label}}</tm-button>
						<!-- <tm-button class="ml-20" :round="10" theme="gray" size="s">学校</tm-button>
						<tm-button class="ml-20" :round="10" theme="gray" size="s">学校</tm-button>
						<tm-button class="ml-20" :round="10" theme="gray" size="s">学校</tm-button>
						<tm-button class="ml-20" :round="10" theme="gray" size="s">学校</tm-button> -->
						<tm-button class="ml-20" :round="10" theme="gray" size="s">+</tm-button>
					</view>
					<view style="clear: both;"></view>
					<tm-listitem title="设置为默认地址" @click="btnClick">
						<template v-slot:rightIcon="">
							<tm-switch offBgcolor="yellow text-black" :text="['','']" color="primary" v-model="on">
							</tm-switch>
						</template>
					</tm-listitem>
				</view>
			</tm-sheet>
			<tm-button :round="24" class="sao mb-40 mt-40" block @click="saveAdd">保存</tm-button>
		</div>
		<!-- 弹出层消息 -->
		<tm-message ref="toast"></tm-message>
		<!-- 地区选择 -->
		<tm-pickersCity @confirm="dateSe_3" btn-color="bg-gradient-deep-purple-accent" v-model="isAdd">
			<!-- <tm-button theme="bg-gradient-deep-purple-accent">地区选择</tm-button> -->
		</tm-pickersCity>

	</view>
</template>
<script>
	import {
		myRequest
	} from '@/api/request.js'
	export default {
		data() {
			return {
				isAdd: false,
				on: false,
				name: '',
				mobile: '',
				region: '',
				address: '',
				label: '学校',
				isdefault: 0,
				d_3: [],
			};
		},
		onLoad() {

		},
		created() {
			var that = this;
			setTimeout(function() {
				if (uni.getStorageSync("token") == "") {
					uni.redirectTo({
						url: "/pages/login/index"
					})
				}
			}, 1000)
			this.sys = uni.getSystemInfoSync();
		},
		methods: {
			dateSe_3(e) {
				this.isAdd = true;
				if (this.d_3 != null) {
					this.d_3 = e;
					this.region = this.d_3.join('');
					console.log(this.d_3, this.region, '地区');
				}
			},
			// 设置默认地址
			btnClick() {
				if (this.on) {
					this.isdefault = 1;
				} else {
					this.isdefault = 0;
				}
			},
			// 保存地址
			saveAdd() {
				let that = this;
				let phone = /^1[3456789]\d{9}$/;
				let reg = phone.test(that.mobile);
				if (that.name == '') {
					uni.showToast({
						title: '姓名不能为空',
						icon: 'none'
					})
				} else if (that.mobile == '' || reg == false) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
				} else if (that.region == '') {
					uni.showToast({
						title: '地区不能为空',
						icon: 'none'
					})
				} else if (that.address == '') {
					uni.showToast({
						title: '详细地址不能为空',
						icon: 'none'
					})
				} else {
					myRequest({
						url: '/api/Address/addAddress',
						method: 'post',
						data: {
							name: that.name,
							mobile: that.mobile,
							region: that.region,
							address: that.address,
							label: that.label,
							default_address: that.isdefault
						}
					}).then(res => {
						console.log(res.data);
						if (res.data.code == 200) {
							that.$refs.toast.show({
								model: 'successs',
								label: res.data.msg
							})
							setTimeout(()=>{
								uni.navigateTo({
									url:'/pages/dizhi/index'
								})
							},800)
						} else {
							that.$refs.toast.show({
								model: 'error',
								label: res.data.msg
							})
						}
					})
				}
			},
		},
	}
</script>

<style lang="scss">
	/deep/ .tm-menubars .body {
		background-color: #1b1b1b !important;
	}

	/deep/ .kuang {
		margin: 0 !important;
		padding: 0px !important;
		margin-top: 10px !important;
	}

	/deep/ .border-grey-darken-4-b-1 {
		border-bottom: solid 1px #303030;
	}

	.sao {
		width: 88%;
		margin: 0 auto;
		margin-top: 30px;
	}

	/deep/ .tm-button-label {
		color: white;
	}

	/deep/ .tm-listitem {
		border-top: 1px solid #303030;
		margin-top: 15px;
	}
</style>