feat(地址): 添加地址选择页面及功能

- 新增地址选择页面(address.vue)及相关样式文件 - 在pages.json中注册新页面路由 - 修改首页地址选择功能，跳转到新地址页面 - 添加地址管理相关API调用逻辑 - 实现地址选择、默认地址设置功能
3 days ago · a5bfcd816f
5 changed files with 302 additions and 10 deletions
--- a/pages.json
+++ b/pages.json
@ -60,6 +60,12 @@
      "style": {
        "navigationBarTitleText": ""
      }
+    },
+    {
+      "path": "pages/address/address",
+      "style": {
+        "navigationBarTitleText": ""
+      }
    }
  ],
  "tabBar": {
--- a/pages/address/address.scss
+++ b/pages/address/address.scss
@ -0,0 +1,94 @@
+/* pages/selectAddress/selectAddress.wxss */
+.content {
+  margin: 21rpx 14rpx 0 14rpx;
+  padding-bottom: 200rpx;
+}
+
+.list {
+  background: #FFFFFF;
+  box-shadow: 0rpx 3rpx 14rpx 0rpx rgba(54, 77, 65, 0.1);
+  border-radius: 14rpx;
+  display: flex;
+  align-items: center;
+  margin-bottom: 20rpx;
+  padding: 42rpx 33rpx;
+  box-sizing: border-box;
+}
+
+.list .left {
+  flex: 1;
+  margin-right: 10rpx;
+}
+
+.list .left .top {
+  display: flex;
+  align-items: center;
+}
+
+.list .left .top .warehouse {
+  font-weight: 500;
+  font-size: 29rpx;
+  color: #06CA64;
+}
+
+.list .left .top .name {
+  font-weight: 400;
+  font-size: 29rpx;
+  color: #333333;
+  margin-left: 51rpx;
+}
+
+.list .left .top .phone {
+  font-weight: 400;
+  font-size: 29rpx;
+  color: #333333;
+  margin-left: 51rpx;
+}
+
+.list .left .under {
+  font-weight: 400;
+  font-size: 29rpx;
+  color: #333333;
+  margin-top: 45rpx;
+}
+
+.list .right {}
+
+.btn-box {
+  position: fixed;
+  left: 0;
+  bottom: 56rpx;
+  width: 100%;
+  padding: 0 34rpx;
+  box-sizing: border-box;
+}
+
+.btn-box .btn {
+  background: #06CA64;
+  border-radius: 80rpx;
+  text-align: center;
+  color: #fff;
+  font-weight: 400;
+  font-size: 33rpx;
+  padding: 26rpx 0;
+  box-sizing: border-box;
+}
+
+.not-data{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 160rpx;
+}
+
+.not-data .icon {
+  width: 373rpx;
+  height: 254rpx;
+}
+
+.not-data .text {
+  margin-top: 24rpx;
+  font-weight: 400;
+  font-size: 29rpx;
+  color: #666666;
+}
--- a/pages/address/address.vue
+++ b/pages/address/address.vue
@ -0,0 +1,193 @@
+<script setup>
+import { onShow } from "@dcloudio/uni-app";
+import { ref } from "vue";
+import navv from "@/components/nav/nav.vue";
+import TopTitle from "@/components/topTitle/topTitle.vue";
+import {
+  editDefaultAddressApi,
+  getMyAreaApi,
+  getUserInfoApi,
+} from "@/libs/api";
+import store from "@/store";
+
+/**
+ * 下拉列表的数据
+ */
+const selectData = ref([]);
+/**
+ * 选择的下拉列表下标
+ */
+const index = ref("");
+/**
+ * 选择的地址
+ */
+const selectAddress = ref({});// 选择的地址
+
+/**
+ * 获取用户信息
+ */
+async function getUserInfo() {
+  const res = await getUserInfoApi();
+  if (res.code === "0") {
+    if (!res.data.company) {
+      uni.showModal({
+        title: "提示",
+        content: "请先添加企业",
+        complete: (res) => {
+          if (res.confirm) {
+            //       uni.navigateTo({
+            //         url: "../../enterprise/pages/joinEnterprise/joinEnterprise",
+            //       });
+          }
+        },
+      });
+    }
+    getMyArea();
+  }
+  else if (res.code === "4") {
+    uni.showModal({
+      title: "提示",
+      content: "请先登录",
+      complete: (res) => {
+        if (res.confirm) {
+          uni.navigateTo({
+            url: "/pages/login/login",
+          });
+        }
+      },
+    });
+  }
+}
+
+/**
+ * 获取我的地址
+ */
+async function getMyArea() {
+  const res = await getMyAreaApi({
+    warehouseid: "",
+    isEnabled: 1,
+  });
+  if (res.code !== "0")
+    return;
+
+  res.data.list = res.data.list.map(each => ({ ...each, phone: maskMiddle(each.phone) }));
+  selectAddress.value = res.data.list.find(each => each.isLastDefaultAddr) || res.data.list[0];
+  uni.setStorageSync("warehousId", selectAddress.value.warehousId);
+  uni.setStorageSync("addressId", selectAddress.value.addrId);
+  if (selectAddress.value.addrId) {
+    await editDefaultAddress();
+  }
+  selectData.value = res.data.list;
+}
+
+/**
+ * 修改默认收货地址
+ */
+async function editDefaultAddress() {
+  const res = await editDefaultAddressApi({
+    addrId: uni.getStorageSync("addressId"),
+  });
+  if (res.code !== "0") {
+    uni.showToast({
+      title: res.message,
+      duration: 3000,
+    });
+  }
+  else {
+    // store.changeCartList([]);
+    store.cartList = [];
+    uni.navigateBack({
+      delta: 1,
+      fail() {
+        uni.switchTab({
+          url: "/pages/home/home",
+        });
+      },
+    });
+  }
+}
+
+// 手机号加密
+function maskMiddle(phone) {
+  if (!phone || typeof phone !== "string")
+    return "";
+  return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
+}
+
+/**
+ * 选择地址
+ */
+function optionTap(e) {
+
+}
+
+/**
+ * 跳转添加地址
+ */
+function onGotoAdd() {
+  uni.navigateTo({
+    url: "/pages/addAddress/addAddress",
+  });
+}
+
+onShow(async () => {
+  await getUserInfo();
+});
+</script>
+
+<template>
+  <navv>
+    <!-- <template> -->
+    <TopTitle title="选择地址" />
+    <view class="content">
+      <block
+        v-for="(item, index) in selectData" :key="index"
+      >
+        <view
+          v-if="item.addrId != null"
+          class="list"
+          @click="optionTap"
+        >
+          <view class="left">
+            <view class="top">
+              <text class="warehouse">
+                {{ item.warehousName }}
+              </text>
+              <text class="name">
+                {{ item.receiverName }}
+              </text>
+              <text class="phone">
+                {{ item.telephone }}
+              </text>
+            </view>
+            <view class="under">
+              {{ item.address }}
+            </view>
+          </view>
+          <view class="right">
+            <radio value="r1" checked="{{item.addrId==selectAddress.addrId}}" color="#06CA64" />
+          </view>
+        </view>
+      </block>
+      <!-- <view
+        v-if="selectData?.[0]?.addrId == null"
+        class="not-data"
+      >
+        <image class="icon" src="/static/address/four.png" mode="widthFix" />
+        <text class="text">
+          您还没有添加收货地址哦！
+        </text>
+      </view> -->
+      <view class="btn-box" @click="onGotoAdd">
+        <view class="btn">
+          +添加收货地址
+        </view>
+      </view>
+    </view>
+    <!-- </template> -->
+  </navv>
+</template>
+
+<style scoped lang="scss">
+@import "./address.scss";
+</style>
--- a/pages/home/home.vue
+++ b/pages/home/home.vue
@ -1,5 +1,5 @@
 <script setup>
-import { onLoad, onShow } from "@dcloudio/uni-app";
+import { onLoad } from "@dcloudio/uni-app";
 // import moment from "moment";
 import { nextTick, ref } from "vue";
 import customTabBar from "@/components/custom-tab-bar/my-tab-bar.vue";
@ -276,10 +276,12 @@ function changeSwiper(e) {
 /**
 * 选择地址
 */
-function chooseAddress() {
-  uni.showToast({
-    title: "待完善",
-    icon: "none",
+function onGotoSelectAddress() {
+  uni.navigateTo({
+    url: "/pages/address/address",
+    fail(error) {
+      console.log(error, 3333);
+    },
  });
 }
 /**
@ -403,11 +405,8 @@ onLoad(() => {
  // #ifdef APP
  uni.hideTabBar();
  // #endif
-
  getIosShow();
-});

-onShow(() => {
  store.fontScale = uni.getStorageSync("fontScale") || 1;
  // uni.hideTabBar();
  getBanner();
@ -464,8 +463,8 @@ onShow(() => {
          :style="{ height: locationBarHeight ? `${locationBarHeight}px` : 'auto' }"
        >
          <!-- left -->
-          <!-- TODO: chooseAddress -->
-          <view class="left" @click="chooseAddress">
+          <!-- TODO: onGotoSelectAddress -->
+          <view class="left" @click="onGotoSelectAddress">
            <text class="iconfont icon-positioning" />
            <text class="address">
              {{ selectAddress?.street ?? '待完善' }}
--- a/static/address/four.png
+++ b/static/address/four.png