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="dizhi.name"></tm-input>
					<tm-input title="手机号码" placeholder="填写收件人手机号码" v-model="dizhi.mobile"></tm-input>
					<tm-pickersCity @confirm="dateSe_3" :default-value="d_3" btn-color="bg-gradient-deep-purple-accent"
						style="margin:0 16px 0px;box-sizing: border-box;">
						<tm-button class="xuanze" theme="bg-gradient-deep-purple-accent"
							style="padding-left: 0px!important;margin-left:0px;border-bottom: 1px solid  #303030!important;">
							<tm-input style="padding: 0px 60px 0px 0px!important;margin-left: 0!important;" title="所在地区"
								placeholder="省市区县、乡镇等" v-model="dizhi.region" @click="dateSe_3">
							</tm-input>
						</tm-button>
					</tm-pickersCity>
					<tm-input title="详细地址" placeholder="街道、楼牌号等" v-model="dizhi.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">{{dizhi.label}}</tm-button> -->
						<tm-button class="ml-20" :round="10" v-model="sel" :theme="sel==index?'blue':'gray'" size="s"
							v-for="(item,index) in tags" @click="selectTag(index)">{{item.name}}</tm-button>
						<tm-button class="ml-20" :round="10" theme="gray" size="s" @click="addTag">+</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="redact" v-if="isSave">修改</tm-button>
			<tm-button :round="24" class="sao mb-40 mt-40" block @click="saveAdd" v-else>保存</tm-button>
		</div>
		<!-- 弹出层消息 -->
		<tm-message ref="toast"></tm-message>
	</view>
</template>
<script>
	import {
		myRequest
	} from '@/api/request.js'
	export default {
		data() {
			return {
				tags: [{
					name: '家庭'
				}, {
					name: '学校'
				}, {
					name: '公司'
				}],
				isAdd: false,
				isSave: false,
				on: false,
				sel: -1,
				dizhi: {
					name: '',
					mobile: '',
					region: '',
					address: '',
					label: '',
					isdefault: 0,
				},
				d_3: [],
			};
		},
		onLoad(op) {
			if (Object.keys(op).length != 0) {
				this.isSave = true;
				this.dizhi.id = op.id;
			}
		},
		created() {
			var that = this;
			setTimeout(function() {
				if (uni.getStorageSync("token") == "") {
					uni.redirectTo({
						url: "/pages/login/index"
					})
				}
			}, 1000)
			this.sys = uni.getSystemInfoSync();
			if (that.dizhi.id) {
				this.getAddDetail()
			}
		},
		methods: {
			// 选择标签
			selectTag(index) {
				this.sel = index;
				this.dizhi.label = this.tags[index].name;
				console.log(this.dizhi.label, '33');
			},
			// 新增标签
			addTag() {

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

			// 获取地址详情
			getAddDetail() {
				let that = this;
				myRequest({
					url: '/api/Address/getAddressDetails',
					method: 'post',
					data: {
						id: that.dizhi.id,
					}
				}).then(res => {
					console.log(res.data);
					if (res.data.code == 200) {
						// that.dizhi = res.data.data;
						that.dizhi.name=res.data.data.name;
						that.dizhi.mobile=res.data.data.mobile;
						that.dizhi.region=res.data.data.region;
						that.dizhi.address=res.data.data.address;
						that.dizhi.label=res.data.data.label;
						that.dizhi.isdefault=res.data.data.default_address;
						this.tags.forEach((item, index) => {
							if (that.dizhi.label == item.name) {
								that.sel = index;
							}
						})
						if (res.data.data.default_address == 1) {
							that.on = true;
						}
					} else {
						that.$refs.toast.show({
							model: 'error',
							label: res.data.msg
						})
					}
				})
			},
			redact() {
				let that = this;
				myRequest({
					url: '/api/Address/updateAddress',
					method: 'post',
					data: {
						id: that.dizhi.id,
						name: that.dizhi.name,
						mobile: that.dizhi.mobile,
						region: that.dizhi.region,
						address: that.dizhi.address,
						label: that.dizhi.label,
						default_address: that.dizhi.isdefault
					}
				}).then(res => {
					console.log(res.data);
					if (res.data.code == 200) {
						uni.showToast({
							title: res.data.msg,
							icon: 'success'
						})
						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 !important;
	}

	/deep/.tm-button .tm-button-btn uni-button.wn[data-v-dae977ca] {
		padding-left: 0px !important;
	}

	.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>