renshou/mine/editAddress/editAddress.vue

<template>
<!--pages/editAddress/editAddress.wxml-->
<form @submit="formSubmit">
	<view class="list">
		<view class="li">
			<text>收货人</text>
			<view class="item">
				<input name="name" :value="form.userName" placeholder="请填写收货人姓名"></input>
			</view>
		</view>
		<view class="li">
			<text>手机号</text>
			<view class="item">
				<input name="phone" :value="form.telNumber" placeholder="请填写手机号"></input>
			</view>
		</view>
		<view class="li">
			<text>所在地区</text>
			<picker class="item" mode="region" @change="bindRegionChange" :value="region" :custom-item="customItem">
				<view class="picker">
					{{region.length > 0 ? region[0]+region[1]+region[2] : '请选择所在地区'}}
				</view>
			</picker>
			<!-- <image src="/static/pages/images/more.png" class="rico"></image> -->
			<image src="../static/mine/images/fbico2.png" class="loca" @click="chooseLocation()"></image>
		</view>
		<view class="li">
			<text>详细信息</text>
			<view class="item">
				<input name="house" :value="form.detailInfo" placeholder="如街道、门牌号"></input>
			</view>
		</view>
	</view>
	<view class="list moren">
		<view class="li">
			<text>设为默认</text>
			<view class="item she">
					<image :src="isDefault ? '/static/pages/images/gou_h.png' : '/static/pages/images/gou.png'" class="check" @tap="setDefault"></image>
			</view>
		</view>
	</view>
	<view class="btn dflex">
		<view class="del" @tap="deleteAddress">删除</view>
		<button class="submit" form-type="submit">确定</button>
	</view>
</form>
</template>

<script>
const req = require("../../utils/request.js"); // 引入SDK核心类
// 引入SDK核心类
var QQMapWX = require("../../utils/qqmap.js");

export default {
  data() {
    return {
      region: [],
      isDefault: false,
      isChoose: false,
      form: {},
      once: false,
      address: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    this.id = options.id;
    this.addressId = options.addressId;
    this.chooseAddress(); // 实例化API核心类

    QQMapWX.initMap('3OJBZ-EQEKO-PFNWC-SHHEK-CGWAJ-KRBF7');
  },
  methods: {
	  chooseLocation() {
	  	var tha = this;
	  	uni.chooseLocation({
	  		success: function(res) {
	  			if (res.name) {
	  				tha.form.detailInfo = res.name;
	  				tha.reverseGeocoder(res);
	  				console.log('地址数据》》》：', res);
	  			}
	  		}
	  	});
	  },
	  reverseGeocoder(location) {
	  	QQMapWX.initMap();
	  	QQMapWX.reverseGeocoder(location, data => {
	  		this.region = [data.ad_info.province, data.ad_info.city, data.ad_info.district]
	  		console.log('解析后的地址地址数据：', data);
	  	});
	  },
    bindRegionChange(event) {
      this.setData({
        region: event.detail.value
      });
    },

    setDefault() {
      this.setData({
        isDefault: !this.isDefault
      });
    },

    chooseAddress() {
      let _ts = this;

      req.getRequest('/api/address/get', {
        id: this.id
      }, res => {
        // console.log(res);
        const form = {
          id: res.id,
          userName: res.name,
          telNumber: res.phone,
          detailInfo: res.house
        };

        _ts.setData({
          form: form,
          isDefault: res.isDefault,
          region: res.region.split(',')
        });
      });
    },

    formSubmit(event) {
      let data = event.detail.value;
      if (!data.name) return req.msg('请填写收货人姓名');
      data.name = req.excludeSpecial(data.name);
      if (!data.phone) return req.msg('请填写手机号');
      if (this.region.length == 0) return req.msg('请选择收货人地区');
      data.address = this.region.join('');
      data.region = this.region.join(',');
      if (!data.house) return req.msg('请输入详细地址');
      data.isDefault = this.isDefault ? 1 : 0;
      let that = this; //进行地址解析

      data.id = this.form.id;
      QQMapWX.geocoder(data.address + data.house, res => {
        data.lat = res.location.lat;
        data.lng = res.location.lng;
        // if (res.deviation < 0 || res.reliability < 7) return req.msg('请输入详细的街道及门牌号');
        let isShowLoading = false;
        if (this.once) return false;
        this.setData({
          once: true
        });

        if (!isShowLoading) {
          req.loadIng('保存中');
          isShowLoading = true;
        }

        req.postRequest('/api/address/save', data, dto => {
          // 如果选择的地址和修改的地址一致就修改提交订单页面的地址
          if (this.addressId == this.id) {
            let pages = getCurrentPages();
            var prevPage = pages[pages.length - 3];
            prevPage.$vm.setData({
              address: data
            });
          }

          if (isShowLoading) {
            uni.hideLoading();
            uni.navigateBack();
            isShowLoading = false;
          }
        });
      });
    },

    deleteAddress() {
      let that = this;
      req.msgConfirm('确定删除该地址', () => {
        req.postRequest('/api/address/delete', {
          id: that.form.id
        }, () => {
          uni.navigateBack();
        });
      });
    }

  }
};
</script>
<style>
@import "./editAddress.css";
</style>