评论需要添加功能，提交订单有问题

2025-12-26 02:15:32 +08:00
parent 1aab94bbc3
commit bb02cb22c0
32 changed files with 2844 additions and 117 deletions
--- a/pages/address/add.vue
+++ b/pages/address/add.vue
@@ -1,13 +1,29 @@
 <script setup>
+  import { onLoad } from '@dcloudio/uni-app'
  import { reactive, ref } from 'vue'
+  import { PHONE_REGEX } from '@/utils/validate'
+  import {
+    addUserAddress,
+    updateUserAddress,
+    getUserAddressDetail
+  } from '@/api'
+  import { navigateBack } from '@/utils/router'
+
+  const props = defineProps({
+    type: {
+      type: String,
+      default: 'add'
+    }
+  })

  const formRef = ref(null)
  const formData = reactive({
+    id: '',
    name: '',
    phone: '',
    address: '',
-    /** 省市区选择 */
-    selectAddress: '',
+    /** 门牌号 */
+    houseNum: '',
    /** 是否默认地址 */
    defaultAddress: false
  })
@@ -27,26 +43,60 @@
          errorMessage: '手机号不能为空'
        },
        {
-          format: 'number',
-          errorMessage: '手机号只能输入数字'
+          validateFunction: (rule, value, data, callback) => {
+            if (!PHONE_REGEX.test(value)) {
+              callback('手机号格式不正确')
+              return false
+            }
+            return true
+          }
        }
      ]
    },
-    selectAddress: {
+    houseNum: {
      rules: [
        {
          required: true,
-          errorMessage: '所在地区不能为空'
+          errorMessage: '门牌号不能为空'
        }
      ]
    }
  }

  const submitForm = () => {
-    formRef.value.validate().then(res => {
-      console.log(res, '校验通过')
+    formRef.value.validate().then(async () => {
+      const data = {
+        houseNum: formData.houseNum,
+        name: formData.name,
+        phone: formData.phone,
+        address: formData.address,
+        defaultAddress: formData.defaultAddress ? 1 : 0
+      }
+      // updateUserAddress
+      if (props.type === 'edit') {
+        await updateUserAddress({ id: formData.id, ...data })
+      } else {
+        await addUserAddress(data)
+      }
+      navigateBack()
    })
  }
+
+  const getData = async id => {
+    const { data } = await getUserAddressDetail(id)
+    formData.id = data.id
+    formData.name = data.name
+    formData.phone = data.phone
+    formData.houseNum = data.houseNum
+    formData.address = data.address
+    formData.defaultAddress = data.defaultAddress == 1
+  }
+
+  onLoad(e => {
+    if (props.type === 'edit') {
+      getData(e.id)
+    }
+  })
 </script>

 <template>
@@ -75,6 +125,7 @@
        :rules="rules"
        :modelValue="formData"
        label-width="150rpx"
+        class="address-form"
      >
        <uni-forms-item label="收件人" required name="name">
          <uni-easyinput
@@ -88,10 +139,10 @@
            placeholder="请输入手机号"
          />
        </uni-forms-item>
-        <uni-forms-item label="所在地区" required name="selectAddress">
+        <uni-forms-item label="门牌号" required name="houseNum">
          <uni-easyinput
-            v-model="formData.selectAddress"
-            placeholder="请选择地区"
+            v-model="formData.houseNum"
+            placeholder="请输入门牌号"
          />
        </uni-forms-item>
        <uni-forms-item label="详细地址" name="address">
@@ -163,5 +214,11 @@
        }
      }
    }
+
+    .address-form {
+      :deep(.uni-easyinput__content) {
+        border-radius: 34rpx;
+      }
+    }
  }
 </style>
--- a/pages/address/edit.vue
+++ b/pages/address/edit.vue
@@ -1,7 +1,11 @@
-<script setup></script>
+<script setup>
+  import EditBox from './add.vue'
+</script>

 <template>
-  <view class="address-edit">修改地址</view>
+  <view class="address-edit">
+    <EditBox type="edit"></EditBox>
+  </view>
 </template>

 <style lang="scss" scoped></style>
--- a/pages/address/index.vue
+++ b/pages/address/index.vue
@@ -1,7 +1,198 @@
-<script setup></script>
+<script setup>
+  import { navigateTo } from '@/utils/router'
+  import { onShow } from '@dcloudio/uni-app'
+  import { getUserAddress, updateUserAddress, deleteUserAddress } from '@/api'
+  import { ref } from 'vue'
+  import { useUI } from '@/utils/use-ui'
+
+  const { showDialog, showToast } = useUI()
+
+  const listData = ref([])
+  const getData = async () => {
+    const res = await getUserAddress({ pageNum: 1, pageSize: 99 })
+    listData.value = res.rows
+  }
+
+  const onAdd = () => {
+    navigateTo('/pages/address/add')
+  }
+
+  const onGo = id => {
+    navigateTo('/pages/address/edit', { id })
+  }
+
+  const onDefault = async item => {
+    const show = await showDialog('提示', '确定要设为默认地址吗？')
+    if (show) {
+      const data = {
+        id: item.id,
+        houseNum: item.houseNum,
+        name: item.name,
+        phone: item.phone,
+        address: item.address,
+        defaultAddress: 1
+      }
+      await updateUserAddress(data)
+      await showToast('设置成功', 'success')
+      getData()
+    }
+  }
+
+  const onDelete = async item => {
+    const show = await showDialog('提示', '确定要删除吗？')
+    if (show) {
+      await deleteUserAddress(item.id)
+      await showToast('删除成功', 'success')
+      getData()
+    }
+  }
+
+  onShow(() => {
+    getData()
+  })
+</script>

 <template>
-  <view class="address-index">地址列表</view>
+  <view class="address-index">
+    <nav-bar isTopBg isPlaceholder title="我的地址">
+      <template #right>
+        <text class="top-right-name" @click="onAdd">添加地址</text>
+      </template>
+    </nav-bar>
+    <view class="address-list">
+      <uni-swipe-action>
+        <uni-swipe-action-item v-for="item in listData" :key="item.id">
+          <view class="card-box" @click="onGo(item.id)">
+            <view class="left-box">
+              <text class="address">{{ item.address }}</text>
+              <text class="name">{{ item.houseNum }}</text>
+              <view class="bottom">
+                <text>{{ item.name }}</text>
+                <text>{{ item.phone }}</text>
+                <text
+                  v-if="item.defaultAddress == 1"
+                  class="default-text"
+                >
+                  默认地址
+                </text>
+              </view>
+            </view>
+
+            <uni-icons type="compose" size="20"></uni-icons>
+          </view>
+          <template v-slot:right>
+            <view class="swipe-box">
+              <view
+                v-if="item.defaultAddress == 0"
+                class="btn-box"
+                @click="onDefault(item)"
+              >
+                <uni-icons
+                  type="checkbox"
+                  size="18"
+                  color="#ffffff"
+                ></uni-icons>
+                <text class="iocn-name">设为默认</text>
+              </view>
+              <view class="btn-box" @click="onDelete(item)">
+                <uni-icons
+                  type="trash"
+                  size="18"
+                  color="#ffffff"
+                ></uni-icons>
+                <text class="iocn-name">删除</text>
+              </view>
+            </view>
+          </template>
+        </uni-swipe-action-item>
+      </uni-swipe-action>
+    </view>
+  </view>
 </template>

-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  .top-right-name {
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    font-size: 28rpx;
+    color: #00d993;
+    text-align: center;
+    font-style: normal;
+    text-transform: none;
+  }
+  .address-list {
+    // padding: 32rpx;
+
+    .card-box {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 22rpx;
+      border-bottom: 2rpx solid #f4f4f4;
+      // margin-bottom: 22rpx;
+      // padding-bottom: 22rpx;
+      .left-box {
+        display: flex;
+        flex-direction: column;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+
+        font-style: normal;
+        text-transform: none;
+        .address {
+          font-size: 24rpx;
+          color: #999999;
+        }
+        .name {
+          font-size: 32rpx;
+          color: #333333;
+          margin: 10rpx 0;
+        }
+
+        .bottom {
+          display: flex;
+          align-items: center;
+          text + text {
+            margin-left: 26rpx;
+          }
+          text {
+            font-size: 24rpx;
+            color: #999999;
+          }
+          .default-text {
+            font-size: 24rpx;
+            background: #00d993;
+            color: #ffffff;
+            padding: 2rpx 6rpx;
+            border-radius: 8rpx;
+          }
+        }
+      }
+    }
+    .swipe-box {
+      display: flex;
+      .btn-box {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background: rgb(47, 194, 17);
+        width: 130rpx;
+        .iocn-name {
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 500;
+          font-size: 28rpx;
+          color: #fff;
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+        }
+
+        // 最后一个
+        &:last-child {
+          background: rgb(206, 59, 22);
+        }
+      }
+    }
+  }
+</style>