feat(client): 地址接口联调，待完善

src/PageMine/address/editAddress.vue

@@ -1,11 +1,11 @@
 <template>
   <view class="editAddress">
-    <page-navbar bgColor="#fff" title="新增地址"></page-navbar>
+    <page-navbar bgColor="#fff" :title="getTitle"></page-navbar>
     <base-card padding="24rpx">
       <view class="f-s-32 text-333 u-m-b-24 text-bold"> 地址信息</view>
       <u--form
         labelPosition="left"
-        :model="userInfo"
+        :model="addressInfo"
         :rules="rules"
         ref="uForm"
         labelWidth="80"
@@ -13,23 +13,28 @@
       >
         <u-form-item label="用户名" prop="receiveName" borderBottom required>
           <u--input
-            v-model="userInfo.receiveName"
+            v-model="addressInfo.receiveName"
             border="none"
             placeholder="请输入用户名"
           ></u--input>
         </u-form-item>
         <u-form-item label="联系方式" prop="phone" borderBottom required>
           <u--input
-            v-model="userInfo.phone"
+            v-model="addressInfo.phone"
             border="none"
             placeholder="请输入联系方式"
           ></u--input>
         </u-form-item>
 
-        <u-form-item label="所属地区" prop="regionArea" borderBottom required>
+        <u-form-item
+          label="所属地区"
+          prop="regionArea"
+          borderBottom
+          required
+          @click="orientation"
+        >
           <u--input
-            v-model="userInfo.regionArea"
-            disabled
+            v-model="addressInfo.regionArea"
             disabledColor="#ffffff"
             placeholder="请选择所属地区"
             border="none"
@@ -37,33 +42,32 @@
           <u-icon slot="right" name="arrow-right" color="#999999" size="12"></u-icon>
         </u-form-item>
 
-        <u-form-item label="详细地址" prop="detailAddress" borderBottom required>
+        <u-form-item
+          label="详细地址"
+          prop="detailAddress"
+          borderBottom
+          required
+          @click="orientation"
+        >
           <u--input
-            v-model="userInfo.detailAddress"
-            disabled
+            v-model="addressInfo.detailAddress"
             disabledColor="#ffffff"
             placeholder="请输入详情地址"
             border="none"
           ></u--input>
-          <u-icon
-            slot="right"
-            name="map"
-            color="#000"
-            size="20"
-            @click="orientation"
-          ></u-icon>
+          <u-icon slot="right" name="map" color="#000" size="20"></u-icon>
         </u-form-item>
 
         <u-form-item>
           <view class="fl-flex-item">
             <view class="f-s-28 text-primary">设置为默认地址</view>
-            <u-switch></u-switch>
+            <u-switch v-model="addressInfo.defaultStatus"></u-switch>
           </view>
         </u-form-item>
       </u--form>
     </base-card>
     <view class="editAddress-bottom">
-      <base-button text="保存" @click="handleSave"></base-button>
+      <base-button text="保存" :loading="loading" @click="handleSave"></base-button>
     </view>
     <region-picker :show="show"></region-picker>
   </view>
@@ -71,21 +75,30 @@
 
 
 <script>
+import { getCurrentLocation } from '@/api/client/home';
+import ADDRESS_API from '@/api/client/address.js';
+// detail
 export default {
   name: 'editAddress',
   data() {
     return {
-      personalInfo: {
+      addressInfo: {
         receiveName: '', //收货人名称
         phone: '', //收件人联系电话
-        defaultStatus: '', //是否为默认地址 0-否 1-是
+        defaultStatus: false, //是否为默认地址
+        detailAddress: '', //详细地址(街道)
+        regionArea: '', //所属地区【页面渲染】
+        longitude: 0,
+        latitude: 0,
         postCode: '', //邮政编码
-        city: '', //省份/直辖市
+        province: '', //省份/直辖市
+        city: '', //城市
         region: '', //区
-        detailAddress: '', //详细地址(街道)
-        regionArea: '', //所属地区 页面渲染
       },
-      show: true,
+      show: false,
+      boolean: false,
+      addressId: '', //地址ID
+      title: '', //地址标题
       rules: {
         receiveName: {
           type: 'string',
@@ -93,6 +106,18 @@ export default {
           message: '请输入用户',
           trigger: ['blur', 'change'],
         },
+        detailAddress: {
+          type: 'string',
+          required: true,
+          message: '请选择详情地址',
+          trigger: ['blur', 'change'],
+        },
+        regionArea: {
+          type: 'string',
+          required: true,
+          message: '请选择属于地区',
+          trigger: ['blur', 'change'],
+        },
         phone: [
           {
             required: true,
@@ -108,28 +133,91 @@ export default {
           },
         ],
       },
-      radio: '',
-      switchVal: false,
     };
   },
   onReady() {
     this.$refs.uForm.setRules(this.rules);
   },
-  onShow() {},
+  onLoad(options) {
+    if (options.addressId) {
+      this.addressId = options.addressId;
+    }
+  },
   computed: {
     labelStyle() {
       return {
         height: '50rpx',
       };
     },
+    getTitle() {
+      return this.title ? '新增地址' : '编辑地址';
+    },
+  },
+  onShow() {
+    if (this.addressId) {
+      this.getInitDetail(this.addressId);
+    }
   },
   methods: {
-    orientation() {
-      this.getOrientationInfo();
+    getInitDetail(data) {
+      ADDRESS_API.detail(data).then(res => {
+        let { province, region, city } = res;
+        this.addressInfo = Object.assign(this.addressInfo, {
+          ...res,
+          regionArea: `${province}·${region}·${city}`,
+        });
+      });
     },
     handleSave() {
-      this.$refs.uForm.validate().then(res => {
-        console.log(res);
+      this.loading = true;
+      this.$refs.uForm.validate().then(val => {
+        if (!val) return;
+        if (this.addressId) {
+          /* 编辑 */
+          console.log(this.addressInfo, 'this.addressInfo');
+          ADDRESS_API.update(this.addressId, this.addressInfo).then(res => {
+            this.loading = false;
+            this.$u.toast('保存成功');
+            setTimeout(() => {
+              uni.navigateBack(-1);
+            }, 1500);
+          });
+        } else {
+          /* 新增 */
+          ADDRESS_API.add(this.addressInfo).then(res => {
+            this.loading = false;
+            this.$u.toast('保存成功');
+            setTimeout(() => {
+              uni.navigateBack(-1);
+            }, 1500);
+          });
+        }
+      });
+    },
+    orientation() {
+      uni.chooseLocation({
+        type: 'gcj02',
+        success: res => {
+          let { longitude, latitude } = res;
+          let point = `${latitude},${longitude}`;
+          getCurrentLocation({ point }).then(res => {
+            if (res.code === 'OK') {
+              this.mapLocationInfo = res.data;
+              let { longitude, latitude, address, name, id, province, district, city } =
+                this.mapLocationInfo;
+              this.addressInfo = Object.assign(this.addressInfo, {
+                longitude,
+                latitude,
+                detailAddress: address,
+                regionArea: name,
+                postCode: id,
+                province: province.name,
+                city: city.name,
+                region: district.name,
+              });
+            }
+          });
+        },
       });
     },
   },

src/PageMine/address/index.vue

@@ -4,26 +4,30 @@
     <base-card
       padding="24rpx"
       marginBottom="24rpx"
-      v-for="(item, index) in 5"
+      v-for="(item, index) in initList"
       :key="index"
     >
       <view class="fl-flex u-m-b-16">
-        <view class="f-s-28 text-primary u-m-r-16">王忠青</view>
-        <view class="f-s-28 text-primary">18286672345</view>
+        <view class="f-s-28 text-primary u-m-r-16">{{ item.receiveName }}</view>
+        <view class="f-s-28 text-primary">{{ item.phone }}</view>
       </view>
-      <view class="address-detail">贵州省贵阳市观山湖区高新区联合广场</view>
+      <view class="address-detail">{{ item.detailAddress }}</view>
       <view class="fl-flex">
-        <u-radio-group v-model="value" iconSize="10">
-          <u-radio shape="circle" label="设为默认"></u-radio>
+        <u-radio-group
+          v-model="item.defaultStatus"
+          iconSize="10"
+          @click="defaultStatus(item)"
+        >
+          <u-radio shape="circle" label="设为默认" name="设为默认"></u-radio>
         </u-radio-group>
         <view class="fl-flex">
           <view class="fl-flex">
             <u-icon name="edit-pen" color="#0c1223" size="16"></u-icon>
-            <view class="f-s-24 text-666 u-m-l-8">编辑</view>
+            <view class="f-s-24 text-666 u-m-l-8" @click="handelEdit(item)">编辑</view>
           </view>
           <view class="fl-flex u-m-l-24">
             <u-icon name="trash" color="#0c1223" size="16"></u-icon>
-            <view class="f-s-24 text-666 u-m-l-8">删除</view>
+            <view class="f-s-24 text-666 u-m-l-8" @click="handelDelete(item)">删除</view>
           </view>
         </view>
       </view>
@@ -35,6 +39,13 @@
         @click="handleAddress"
       ></base-button>
     </view>
+
+    <popup-confirm
+      :show="confirmShow"
+      text="您确定删除当前地址吗？"
+      @close="handleClose"
+      @confirm="handleConfirm"
+    ></popup-confirm>
   </view>
 </template>
 
@@ -44,7 +55,9 @@ export default {
   name: 'address',
   data() {
     return {
-      value: '',
+      initList: [],
+      confirmShow: false,
+      deletedData: {},
     };
   },
   onShow() {
@@ -54,6 +67,7 @@ export default {
     getAddressList() {
       ADDRESS_API.list().then(res => {
         console.log(res, '地址');
+        this.initList = res || [];
       });
     },
     handleAddress() {
@@ -61,6 +75,40 @@ export default {
         url: '/PageMine/address/editAddress',
       });
     },
+    /* 编辑*/
+    handelEdit(item = {}) {
+      uni.$u.route('/PageMine/address/editAddress', {
+        addressId: item.id,
+      });
+    },
+
+    /* 修改默认地址 */
+    defaultStatus(item = {}) {
+      ADDRESS_API.update(item.id, item).then(res => {
+        this.loading = false;
+        this.$u.toast('修改成功');
+        setTimeout(() => {
+          uni.navigateBack(-1);
+        }, 1500);
+      });
+    },
+
+    /* 删除 */
+    handelDelete(item) {
+      this.confirmShow = true;
+      this.deletedData = item;
+    },
+
+    handleConfirm() {
+      ADDRESS_API.delete(this.deletedData.id).then(res => {
+        this.confirmShow = false;
+        this.getAddressList();
+      });
+    },
+
+    handleClose(val) {
+      this.confirmShow = val;
+    },
   },
 };
 </script>

src/api/client/address.js

@@ -17,6 +17,19 @@ const ADDRESS_API = {
       },
     });
   },
+  /**
+   * 用户常用地址接口 - x详情
+   * @returns
+   */
+  detail: id => {
+    return request({
+      url: basePath + `queryById/${id}`,
+      method: 'get',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+    });
+  },
   /**
    * 用户常用地址接口 - 新增用户常用地址
    * @param {*} data
@@ -49,10 +62,11 @@ const ADDRESS_API = {
    * @param {*} id
    * @returns
    */
-  update: id => {
+  update: (id, data) => {
     return request({
       url: basePath + `update/${id}`,
       method: 'put',
+      data,
     });
   },
 };

src/components/region-picker/region-picker.vue

@@ -4,8 +4,10 @@
       :show="show"
       ref="uPicker"
       :columns="columns"
+      :value="defaultIndex"
       @confirm="confirm"
       @change="changeHandler"
+      keyName="name"
     ></u-picker>
   </view>
 </template>
@@ -22,42 +24,45 @@ export default {
   },
   data() {
     return {
-      columns: [
-        ['中国', '美国'],
-        ['深圳', '厦门', '上海', '拉萨'],
-      ],
+      columns: [],
+      defaultIndex: ['44444444', '7777777', '9999999999'],
       columnData: [
         ['深圳', '厦门', '上海', '拉萨'],
         ['得州', '华盛顿', '纽约', '阿拉斯加'],
       ],
     };
   },
-  created() {
+  mounted() {
     this.getInitRegion();
   },
   methods: {
     getInitRegion() {
       COMMON_API.queryByLevel({ level: 1 }).then(res => {
-        console.log(res.data, 'data');
+        if (res && res.length) {
+          const provinceData = res.map(item => item.name);
+          const provinceDataIndex = res.map(item => item.id);
+          this.columns.push(provinceData);
+          this.defaultIndex.push(provinceDataIndex);
+        }
       });
     },
-    // getCOMMON_API queryRegion
     changeHandler(e) {
-      const {
-        columnIndex,
-        value,
-        values, // values为当前变化列的数组内容
-        index,
-        // 微信小程序无法将picker实例传出来，只能通过ref操作
-        picker = this.$refs.uPicker,
-      } = e;
-      // 当第一列值发生变化时，变化第二列(后一列)对应的选项
-      if (columnIndex === 0) {
-        // picker为选择器this实例，变化第二列对应的选项
-        picker.setColumnValues(1, this.columnData[index]);
-      }
+      console.log(e, '改变后的数据');
+      console.log(this.$refs.uPicker, 'this.$refs.uPicker');
+      // const {
+      //   columnIndex,
+      //   value,
+      //   values, // values为当前变化列的数组内容
+      //   index,
+      //   // 微信小程序无法将picker实例传出来，只能通过ref操作
+      //   picker = this.$refs.uPicker,
+      // } = e;
+      // // 当第一列值发生变化时，变化第二列(后一列)对应的选项
+      // if (columnIndex === 0) {
+      //   // picker为选择器this实例，变化第二列对应的选项
+      //   picker.setColumnValues(1, this.columnData[index]);
+      // }
     },
-    // 回调参数为包含columnIndex、value、values
     confirm(e) {
       console.log('confirm', e);
       this.show = false;

src/pagesHome/homeAddress/index.vue

@@ -34,23 +34,39 @@
       <view
         style="border-bottom: 1rpx solid #d8d8d8"
         class="u-p-b-24 u-m-t-24"
-        v-for="(item, index) in 4"
+        v-for="(item, index) in initList"
         :key="index"
+        @click="handelChangeAddress(item)"
       >
         <view class="fl-flex u-m-b-16">
-          <view class="f-s-28 text-primary u-m-r-16">王忠青</view>
-          <view class="f-s-28 text-primary u-m-r-8">18285564342</view>
-          <base-text text="常用" padding="3rpx" fontSize="24rpx"></base-text>
+          <view class="f-s-28 text-primary u-m-r-16">{{ item.receiveName }}</view>
+          <view class="f-s-28 text-primary u-m-r-16">{{ item.phone }}</view>
+          <base-text
+            text="常用"
+            padding="3rpx"
+            fontSize="24rpx"
+            v-if="item.defaultStatus"
+          ></base-text>
         </view>
-        <view class="f-s-24 text-666">中国科学院近代物理研究所-东门【详情地址】</view>
+        <view class="f-s-24 text-666">{{ item.detailAddress }}</view>
       </view>
     </base-card>
   </view>
 </template>
 
 <script>
+import ADDRESS_API from '@/api/client/address.js';
+
 export default {
   name: 'home-address',
+  onShow() {
+    this.getAddressList();
+  },
+  data() {
+    return {
+      initList: [],
+    };
+  },
   methods: {
     handelManual() {
       uni.chooseLocation({
@@ -82,6 +98,24 @@ export default {
         },
       });
     },
+    getAddressList() {
+      ADDRESS_API.list().then(res => {
+        console.log(res, '地址');
+        this.initList = res || [];
+      });
+    },
+    /* 切换为选择得地址 */
+    handelChangeAddress(item = {}) {
+      let { longitude, latitude } = item;
+      let data = { longitude, latitude };
+      this.$store.dispatch('getLocationNow', data).then(res => {
+        setTimeout(() => {
+          uni.navigateTo({
+            url: '/pages/home/index',
+          });
+        }, 500);
+      });
+    },
   },
 };
 </script>

src/utils/request.js

@@ -11,9 +11,9 @@ import {
 
 // 每次请求都创建一个新的实例
 const instance = axios.create({
-  baseURL: 'https://test.api.chelvc.com',
+  // baseURL: 'https://test.api.chelvc.com',
   // baseURL: "http://192.168.68.77:11000",
-  // baseURL: "http://localhost:11000",
+  baseURL: 'http://localhost:11000',
   timeout: 10000,
   adapter: UniAdapter,
 });