📝 【TASK-20240808-03】TASK:地址页面增删改逻辑完善

src/pages/address/address.vue

@@ -7,13 +7,13 @@
     ></dHeader>
     <view class="container">
       <view class="address-list">
-        <view class="address-item" v-for="item in 3" :key="item">
+        <view class="address-item" v-for="item in addressList" :key="item.id">
           <view class="item-header">
-            <view class="item-name">张三</view>
-            <view class="item-phone">+86 18888888888</view>
+            <view class="item-name">{{ item.name }}</view>
+            <view class="item-phone">+{{ item.areaCode }}&ensp;{{ item.phone }}</view>
           </view>
           <view class="item-content">
-            辽宁省大连市甘井子区广贤路56号星光大道甘井子区广贤路56号星光大道
+            {{ item.address }}
           </view>
           <view class="item-footer">
             <view
@@ -25,18 +25,17 @@
                 ><radio
                   class="radio"
                   color="#ff4d4f"
-                  value="r1"
-                  :value="item + ''"
-                  :checked="check == item"
+                  :checked="check == item.id"
+                  :value="item.name"
                 />设为默认地址</label
               >
             </view>
             <view class="item-footer-right">
-              <view class="right-box" @click="toEditAddress">
+              <view class="right-box" @click="toEditAddress(item.id)">
                 <image class="item-img" src="../../static/img/edit.png"></image>
                 编辑</view
               >
-              <view class="right-box">
+              <view class="right-box" @click="deleteAddress(item.id)">
                 <image class="item-img" src="../../static/img/delete_pail.png"></image>
                 删除</view
               >
@@ -56,23 +55,68 @@ export default {
   },
   data() {
     return {
-      check: 1
+      check: null,
+      addressList: []
     }
   },
+  onShow() {
+    this.getAddressList()
+  },
   methods: {
     toAddressAdd() {
       uni.navigateTo({
         url: '/pages/address_add/address_add'
       })
     },
-    toEditAddress() {
+    toEditAddress(id) {
       uni.navigateTo({
-        url: '/pages/address_edit/address_edit'
+        url: '/pages/address_edit/address_edit?id=' + id
       })
     },
     // 切换默认地址
-    bindCheck(e, item) {
-      this.check = item
+    async bindCheck(e, item) {
+      this.check = item.id
+      try {
+        await this.$request.post('/app-api/member/user-address/update', {
+          ...item,
+          isDefault: 0
+        })
+      } catch (err) {}
+    },
+    // 获取地址列表
+    async getAddressList() {
+      try {
+        const id = this.$store.getters.id
+        const { code, data } = await this.$request.get('/app-api/member/user-address/member/list', {
+          id
+        })
+        if (code == 0 && data) {
+          // console.log(data)
+          this.addressList = data
+          const i = this.addressList.findIndex((item) => item.isDefault === 0)
+          if (i >= 0) this.check = this.addressList[i].id
+        }
+      } catch (err) {}
+    },
+    // 删除地址
+    async deleteAddress(id) {
+      const that = this
+      uni.showModal({
+        title: that.$lang.lang.notices.notice,
+        content: that.$lang.lang.notices.delAddress,
+        success: async (res) => {
+          if (res.confirm) {
+            try {
+              const { code } = await that.$request.post(
+                `/app-api/member/user-address/delete?id=${id}`
+              )
+              if (code == 0) {
+                that.getAddressList()
+              }
+            } catch (err) {}
+          }
+        }
+      })
     }
   }
 }

src/pages/address_add/address_add.vue

@@ -3,18 +3,23 @@
     <dHeader :title="$lang.lang.addressInfo.addInfo"></dHeader>
     <view class="container">
       <uni-forms ref="form" :model="form" :label-width="80" :rules="rules">
-        <uni-forms-item :label="$lang.lang.addressInfo.consignee" required name="consignee">
+        <uni-forms-item :label="$lang.lang.addressInfo.consignee" required name="name">
           <uni-easyinput
             class="input"
             :trim="true"
             :inputBorder="false"
-            v-model="form.consignee"
+            v-model="form.name"
             :placeholder="$lang.lang.notices.consignee"
           />
         </uni-forms-item>
         <uni-forms-item :label="$lang.lang.addressInfo.phone" required name="phone">
           <view class="phone-box">
-            <view class="phone-code">+86</view>
+            <picker :value="areaIndex" :range="areaName" @change="areaChange">
+              <view class="phone-code">
+                +{{ areaCode }}
+                <uni-icons type="down" class="code-icon" size="10"></uni-icons>
+              </view>
+            </picker>
             <uni-easyinput
               class="input"
               :trim="true"
@@ -28,7 +33,7 @@
           class="item"
           :label="$lang.lang.addressInfo.fullAddress"
           required
-          name="fullAddress"
+          name="address"
         >
           <view class="textarea-box">
             <uni-easyinput
@@ -38,7 +43,7 @@
               autoHeight
               :inputBorder="false"
               :maxlength="100"
-              v-model.trim="form.fullAddress"
+              v-model.trim="form.address"
               :placeholder="$lang.lang.notices.fullAddress"
             >
             </uni-easyinput>
@@ -60,22 +65,31 @@ export default {
   data() {
     return {
       form: {
-        consignee: '',
+        name: '',
         phone: '',
-        fullAddress: ''
-      }
+        address: ''
+      },
+      areaCode: this.$store.getters.areaCode,
+      areaIndex: 0,
+      areaName: []
     }
   },
   computed: {
     rules() {
       return {
-        consignee: {
+        name: {
           rules: [{ required: true, errorMessage: this.$lang.lang.notices.consignee }]
         },
         phone: {
-          rules: [{ required: true, errorMessage: this.$lang.lang.notices.phone }]
+          rules: [
+            { required: true, errorMessage: this.$lang.lang.notices.phone },
+            {
+              validateFunction: (rule, value) => /^\d+$/.test(value),
+              errorMessage: this.$lang.lang.notices.nophone
+            }
+          ]
         },
-        fullAddress: {
+        address: {
           rules: [
             { required: true, errorMessage: this.$lang.lang.notices.fullAddress },
             { maxLength: 100, errorMessage: this.$lang.lang.notices.fullAddressLength }
@@ -84,12 +98,55 @@ export default {
       }
     }
   },
+  created() {
+    this.getCountry()
+  },
   methods: {
     saveAddress() {
-      // console.log(this.form)
-      this.$refs.form.validate().then((res) => {
-        console.log(res)
+      this.$refs.form.validate().then(async (valid) => {
+        if (valid) {
+          try {
+            const params = {
+              ...this.form,
+              areaCode: this.areaCode,
+              memberId: this.$store.getters.id
+            }
+            const { code, data } = await this.$request.post(
+              '/app-api/member/user-address/create',
+              params
+            )
+            if (code == 0) {
+              this.$router.back()
+            }
+          } catch (error) {}
+        }
       })
+    },
+    // 获取国家区号
+    async getCountry() {
+      try {
+        const { code, data } = await this.$request.get('/app-api/ecw/country/list-all')
+        if (code == 0 && data.length > 0) {
+          // 查询用户区号下标
+          const i = data.findIndex((item) => {
+            return item.tel == this.areaCode
+          })
+          if (i >= 0) this.areaIndex = i
+          data.forEach((item) => {
+            const str = item.tel + ' ' + item.nameZh
+            if (this.$lang.locale == 'zh') {
+              this.areaName.push(str)
+            } else {
+              this.areaName.push(str)
+            }
+          })
+        }
+      } catch (error) {}
+    },
+    // 区号选择切换
+    areaChange(e) {
+      this.areaIndex = e.detail.value
+      this.areaCode = this.areaName[this.areaIndex].split(' ')[0]
     }
   }
 }
@@ -134,12 +191,17 @@ page {
   align-items: center;
 }
 .phone-code {
+  display: flex;
+  align-items: center;
   margin-right: 10upx;
   padding-right: 10upx;
   border-right: 1px solid #e6e6e6;
   font-size: 24upx;
   color: #000;
 }
+.code-icon {
+  margin-left: 6upx;
+}
 .btn {
   width: 100%;
   height: 80upx;

src/pages/address_edit/address_edit.vue

@@ -3,12 +3,12 @@
     <dHeader :title="$lang.lang.addressInfo.editInfo"></dHeader>
     <view class="container">
       <uni-forms ref="form" :model="form" :label-width="80" :rules="rules">
-        <uni-forms-item :label="$lang.lang.addressInfo.consignee" required name="consignee">
+        <uni-forms-item :label="$lang.lang.addressInfo.consignee" required name="name">
           <uni-easyinput
             class="input"
             :trim="true"
             :inputBorder="false"
-            v-model="form.consignee"
+            v-model="form.name"
             :placeholder="$lang.lang.notices.consignee"
           />
         </uni-forms-item>
@@ -28,7 +28,7 @@
           class="item"
           :label="$lang.lang.addressInfo.fullAddress"
           required
-          name="fullAddress"
+          name="address"
         >
           <view class="textarea-box">
             <uni-easyinput
@@ -38,7 +38,7 @@
               autoHeight
               :inputBorder="false"
               :maxlength="100"
-              v-model.trim="form.fullAddress"
+              v-model.trim="form.address"
               :placeholder="$lang.lang.notices.fullAddress"
             >
             </uni-easyinput>
@@ -60,22 +60,31 @@ export default {
   data() {
     return {
       form: {
-        consignee: '',
+        name: '',
         phone: '',
-        fullAddress: ''
+        address: ''
       }
     }
   },
+  onLoad(route) {
+    this.getAddress(route.id)
+  },
   computed: {
     rules() {
       return {
-        consignee: {
+        name: {
           rules: [{ required: true, errorMessage: this.$lang.lang.notices.consignee }]
         },
         phone: {
-          rules: [{ required: true, errorMessage: this.$lang.lang.notices.phone }]
+          rules: [
+            { required: true, errorMessage: this.$lang.lang.notices.phone },
+            {
+              validateFunction: (rule, value) => /^\d+$/.test(value),
+              errorMessage: this.$lang.lang.notices.nophone
+            }
+          ]
         },
-        fullAddress: {
+        address: {
           rules: [
             { required: true, errorMessage: this.$lang.lang.notices.fullAddress },
             { maxLength: 100, errorMessage: this.$lang.lang.notices.fullAddressLength }
@@ -87,9 +96,28 @@ export default {
   methods: {
     saveAddress() {
       // console.log(this.form)
-      this.$refs.form.validate().then((res) => {
-        console.log(res)
+      this.$refs.form.validate().then(async (res) => {
+        if (res) {
+          try {
+            const { code } = await this.$request.post(
+              '/app-api/member/user-address/update',
+              this.form
+            )
+            if (code == 0) {
+              this.$router.back()
+            }
+          } catch (err) {}
+        }
       })
+    },
+    // 获取地址信息 回显
+    async getAddress(id) {
+      try {
+        const { code, data } = await this.$request.get('/app-api/member/user-address/get', { id })
+        if (code == 0 && data) {
+          this.form = data
+        }
+      } catch (err) {}
     }
   }
 }

src/pages/index/index.vue

@@ -381,6 +381,10 @@ export default {
             // #endif
           }
           that.userInfo = res.data
+          // 存储信息节点
+          const { id, areaCode } = res.data
+          that.$store.commit('SET_ID', id)
+          that.$store.commit('SET_AREACODE', areaCode)
         }
       })
     },

src/pages/site/site.vue

@@ -233,6 +233,7 @@
 </template>
 
 <script>
+import storage from '../../utils/storage'
 export default {
   data() {
     return {
@@ -445,6 +446,7 @@ export default {
     },
     loginOut() {
       uni.removeStorageSync('Authorization')
+      storage.clean()
       uni.navigateTo({
         url: '../login/login'
       })
@@ -564,6 +566,7 @@ export default {
           if (res.confirm) {
             that.$request.deleted('/app-api/member/member/cancellation').then((res) => {
               if (res.code == 0 && res.data) {
+                storage.clean()
                 uni.showToast({
                   title: that.$lang.lang.site.offSuccess,
                   icon: 'none'

src/static/lang/en.js

@@ -134,7 +134,8 @@ export default {
     country: 'Please select a country',
     city: 'Please select a city',
     fullAddress: 'Please enter the detailed address',
-    fullAddressLength: 'Enter up to 100 words'
+    fullAddressLength: 'Enter up to 100 words',
+    delAddress: 'Are you sure you want to delete the address?'
   },
   auth: {
     auth: 'Real-name certification',

src/static/lang/zh.js

@@ -133,7 +133,8 @@ export default {
     country: '请选择国家',
     city: '请选择城市',
     fullAddress: '请输入详细地址',
-    fullAddressLength: '最多输入100字'
+    fullAddressLength: '最多输入100字',
+    delAddress: '确定删除地址吗?'
   },
   auth: {
     auth: '实名认证',

src/store/index.js

 import Vue from 'vue'
 import Vuex from 'vuex'
 import http from '@/utils/request'
-
+import user from './modules/user'
+import storage from '../utils/storage'
 Vue.use(Vuex)
 
 let userInfo = null
@@ -16,13 +17,14 @@ try {
 const store = new Vuex.Store({
   state: {
     userInfo: userInfo || null,
-		config: null,
+    config: null
   },
   mutations: {
     logout(state) {
       state.userInfo = null
-			uni.removeStorageSync('userInfo');
-			uni.removeStorageSync('token');
+      uni.removeStorageSync('userInfo')
+      uni.removeStorageSync('token')
+      storage.clean()
       // uni.switchTab({
       // 	url: '/pages/tabbar/user/user.vue'
       // })
@@ -38,16 +40,24 @@ const store = new Vuex.Store({
     }
   },
   actions: {
-		updateUserInfo({
-			commit
-		}) {
-			http.get("/profile").then(res => {
+    updateUserInfo({ commit }) {
+      http
+        .get('/profile')
+        .then((res) => {
           console.log('更新用户信息', res)
           commit('setUser', res.data)
-			}).catch(res => {
-				console.log("更新用户信息error", res)
+        })
+        .catch((res) => {
+          console.log('更新用户信息error', res)
         })
     }
+  },
+  getters: {
+    id: (state) => state.user.id,
+    areaCode: (state) => state.user.areaCode
+  },
+  modules: {
+    user
   }
 })
 export default store