cbz/page_shop/pages/address/add.vue

<template>
	<view class="content vflex jbetween">
		<view class="form">
			<view class="hflex acenter jbetween item">
				<view class="left">收货人</view>
				<u-input v-model="name" border="none" placeholder="请填写收货人姓名"></u-input>
			</view>
			<view class="hflex acenter jbetween item">
				<view class="left">手机号码</view>
				<u-input v-model="phone" border="none" placeholder="请填写收货人手机号码"></u-input>
			</view>
			<picker @change="bindPickerChange" mode="region">
				<view class="hflex acenter jbetween item">
					<view class="left">所在地区</view>
					<u-input v-model="areas" border="none" placeholder="请选择所在地区"></u-input>
					<u-icon name="map-fill" color="#506DFF" size="13"></u-icon>
				</view>
			</picker>
			<view class="hflex acenter jbetween item">
				<view class="left">详细地址</view>
				<u-input v-model="address" border="none" placeholder="请输入街道、楼牌号"></u-input>
			</view>
			<view class="hflex acenter jbetween item">
				<view class="left">设为默认地址</view>
				<u-switch v-model="is_active" activeColor="#506dff" @change="change"></u-switch>
			</view>
		</view>
		<view class="btn" v-if="is_edit == 0" @click="addAddress">保存</view>
		<view class="bottom hflex acenter jbetween" v-else>
			<view class="del_btn" @click="deleteAdd">删除</view>
			<view class="save_btn" @click="editAddress">保存</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				name: '',
				phone: '',
				province: '',
				city: '',
				area: '',
				areas: '',
				address: '',
				is_active: false,
				is_edit: 0,
				id: ''
			}
		},
		onLoad(options) {
			that = this
			if(options.index) {
				that.getPredata(options.index)
				
			}
		},
		methods: {
			getPredata(index) {
				that.is_edit = 1
				var pages = getCurrentPages()
				var prePage = pages[pages.length - 2]
				var data = prePage.$vm.pageList[index]
				that.name = data.name
				that.phone = data.phone
				that.province = data.province
				that.city = data.city
				that.area = data.area
				that.areas = data.province + that.city + that.area
				that.address = data.address
				
				that.id = data.id
				if(data.type) {
					that.is_active = true
				} else {
					that.is_active = false
				}
			},
			
			// 选择地区
			bindPickerChange(e) {
				console.log(e);
				that.province = e.detail.value[0]
				that.city = e.detail.value[1]
				that.area = e.detail.value[2]
				that.areas = e.detail.value[0] + e.detail.value[1] + e.detail.value[2]
			},
			// 设置默认地址
			change(e) {
				that.is_active = e
			},
			// 添加收获地址
			addAddress() {
				if($api.formCheck(that.name,'required') && $api.formCheck(that.phone,'phone') && $api.formCheck(that.area,'required') && $api.formCheck(that.address,'required')) {
					$api.req({
						url: '/data/api.User/add_address',
						data: {
							type: that.is_active?1:0,
							name: that.name,
							phone: that.phone,
							province: that.province,
							city: that.city,
							area: that.area,
							address: that.address
						}
					}, function(res) {
						$api.info(res.info)
						if(res.code == 1) {
							$api.jump(1,-1)
						}
					})
				}
				
			},
			// 修改地址
			editAddress() {
				if($api.formCheck(that.name,'required') && $api.formCheck(that.phone,'phone') && $api.formCheck(that.area,'required') && $api.formCheck(that.address,'required')) {
					$api.req({
						url: '/data/api.User/save_address',
						data: {
							type: that.is_active?1:0,
							name: that.name,
							phone: that.phone,
							province: that.province,
							city: that.city,
							area: that.area,
							address: that.address
						}
					}, function(res) {
						$api.info(res.info)
						if(res.code == 1) {
							$api.jump(1,-1)
						}
					})
				}
			},
			deleteAdd() {
				$api.req({
					url: '/data/api.User/del_address',
					data: {
						id: that.id
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
						$api.jump(-1)
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 30rpx;
		.form {
			margin-top: 22rpx;
			.item {
				padding: 26rpx 0;
			}
			.left {
				width: 200rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
			}
		}
		.btn {
			width: 100%;
			height: 84rpx;
			background: #506DFF;
			border-radius: 42rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 84rpx;
			margin-bottom: 66rpx;
		}
		.bottom {
			width: 100%;
			margin-bottom: 66rpx;
			.del_btn {
				width: 230rpx;
				height: 88rpx;
				border-radius: 44rpx;
				border: 1px solid #506DFF;
				text-align: center;
				line-height: 88rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #506DFF;
			}
			.save_btn {
				width: 430rpx;
				height: 88rpx;
				background: #506DFF;
				border-radius: 44rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>