feat: 更新 API 请求参数与组件样式优化

- 在 account.js 和 member.js 中添加 loading 和 skipMessage 参数，提升 API 调用的用户体验。 - 在 ShowGoods.vue 中优化商品详情展示样式，增强可读性和交互性。 - 在 Cart.vue 中重构购物车商品列表结构，提升布局一致性。 - 在多个页面中修复了提示信息的内容，确保用户操作的清晰反馈。
2026-09-21 20:32:03 +08:00 · 2026-07-06 16:33:21 +08:00
parent e13ca6281d
commit 297bdd95dd
28 changed files with 689 additions and 259 deletions
--- a/buyer/src/pages/home/memberCenter/ComplainList.vue
+++ b/buyer/src/pages/home/memberCenter/ComplainList.vue
@@ -109,7 +109,7 @@ export default {
    cancel (id) { // 取消投诉
      this.$Modal.confirm({
        title: '取消投诉',
-        content: '<p>确定取消投诉吗？</p>',
+        content: '确定取消投诉吗？',
        onOk: () => {
          clearComplain(id).then((res) => {
            if (res.success) {
--- a/buyer/src/pages/home/memberCenter/Distribution.vue
+++ b/buyer/src/pages/home/memberCenter/Distribution.vue
@@ -362,18 +362,36 @@ export default {
        }
      });
    },
+    normalizeWithdrawError (message) {
+      if (!message) return '提现失败，请稍后重试';
+      const text = String(message);
+      if (text.includes('最少提现金额为1元')) {
+        return '提现金额单次最少提现金额为1元';
+      }
+      const colonIndex = text.indexOf(':');
+      if (colonIndex > -1 && colonIndex < text.length - 1) {
+        return text.slice(colonIndex + 1).trim();
+      }
+      return text;
+    },
    withdraw() {
-      // 申请提现
+      const price = Number(this.withdrawPrice);
+      if (!price || price < 1) {
+        this.$Message.error('提现金额单次最少提现金额为1元');
+        return;
+      }
      distCash({ price: this.withdrawPrice }).then((res) => {
-        this.withdrawApplyModal = false;
-        this.price = 0;
        if (res.success) {
-          this.$Message.success("申请已提交，请等待审核");
+          this.withdrawApplyModal = false;
+          this.withdrawPrice = 0;
+          this.$Message.success('申请已提交，请等待审核');
          this.distribution();
          this.getLog();
        } else {
-          this.$Message.error(res.message);
+          this.$Message.error(this.normalizeWithdrawError(res.message));
        }
+      }).catch((err) => {
+        this.$Message.error(this.normalizeWithdrawError(err?.message || err?.data?.message));
      });
    },
    qrcodeData(data64) {
--- a/buyer/src/pages/home/memberCenter/Favorites.vue
+++ b/buyer/src/pages/home/memberCenter/Favorites.vue
@@ -146,8 +146,8 @@ export default {
    cancel(id) { // 取消收藏
      let typeName = this.params.type === 'GOODS' ? '商品' : '店铺'
      this.$Modal.confirm({
-        title: 'Title',
-        content: `<p>确定取消收藏该${typeName}吗？</p>`,
+        title: '取消收藏',
+        content: `确定取消收藏该${typeName}吗？`,
        onOk: () => {
          cancelCollect(this.params.type, id).then(res => {
            if (res.success) {
@@ -160,8 +160,8 @@ export default {
    cancelStore(id) { // 取消收藏
      let typeName = this.params.type === 'GOODS' ? '商品' : '店铺'
      this.$Modal.confirm({
-        title: 'Title',
-        content: `<p>确定取消收藏该${typeName}吗？</p>`,
+        title: '取消收藏',
+        content: `确定取消收藏该${typeName}吗？`,
        onOk: () => {
          cancelStoreCollect(this.params.type, id).then(res => {
            if (res.success) {
--- a/buyer/src/pages/home/memberCenter/ModifyPwd.vue
+++ b/buyer/src/pages/home/memberCenter/ModifyPwd.vue
@@ -139,6 +139,13 @@ export default {
    this.status = this.$route.query.status
  },
  methods: {
+    normalizePwdError (message) {
+      if (!message) return '修改失败，请稍后重试';
+      if (String(message).includes('旧密码') || String(message).includes('密码不正确')) {
+        return '旧密码不正确';
+      }
+      return message;
+    },
    // 修改
    handleRegist () {
      this.$refs['formRegister'].validate((valid) => {
@@ -146,7 +153,7 @@ export default {
          const {newPassword, againPassword, password} = this.formRegister
          if (newPassword !== againPassword) {
            this.$Message.error({
-              content: '新旧密码不一致'
+              content: '新密码和确认密码不一致'
            });
            return
          }
@@ -154,10 +161,14 @@ export default {
          params.newPassword = md5(newPassword)
          params.password = md5(password)
          editPwd(params).then(res => {
-            if (res.message === 'success' && res.result) {
+            if (res.success && res.result) {
              this.$Message.success('修改密码成功');
              this.$router.push('/home')
+            } else {
+              this.$Message.error(this.normalizePwdError(res.message));
            }
+          }).catch((err) => {
+            this.$Message.error(this.normalizePwdError(err?.message || err?.data?.message));
          });
        }
      })
@@ -183,7 +194,7 @@ export default {
          }
          if (newPassword !== againPassword) {
            this.$Message.error({
-              content: '新旧密码不一致'
+              content: '新密码和确认密码不一致'
            });
            return
          }
--- a/buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
+++ b/buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
@@ -37,26 +37,30 @@
          <div>
            <el-input type="textarea" maxlength="500" show-word-limit :rows="4" v-model="orderGoods.content" />
          </div>
-          <div style="display:flex;align-items:center;">
-            <div class="demo-upload-list" v-for="(img, index) in orderGoods.uploadList" :key="index">
-              <img :src="img">
-              <div class="demo-upload-list-cover">
+          <div class="upload-section">
+            <div class="upload-row">
+              <div class="demo-upload-list" v-for="(img, index) in orderGoods.uploadList" :key="index">
+                <img :src="img">
+                <div class="demo-upload-list-cover">
                  <el-icon @click="handleView(img)"><View /></el-icon>
                  <el-icon @click="handleRemove(index)"><Delete /></el-icon>
+                </div>
              </div>
-            </div>
-            <el-upload
-                :show-upload-list="false"
+              <el-upload
+                class="upload-trigger"
+                :show-file-list="false"
                :on-success="handleSuccess"
                :before-upload="handleBeforeUpload"
                :format="['jpg','jpeg','png']"
                :action="action"
                :headers="accessToken"
-                style="display: inline-block;width:58px;">
-                <div class="hover-pointer icon-upload" style="">
+              >
+                <div class="hover-pointer icon-upload">
                  <el-icon :size="20"><Camera /></el-icon>
                </div>
-            </el-upload>
+              </el-upload>
+            </div>
+            <div class="describe">上传评价图片，最多9张</div>
          </div>
        </div>
      </li>
@@ -165,7 +169,7 @@ export default {
      this.$forceUpdate()
    },
    handleBeforeUpload () { // 上传之前钩子
-      const check = this.orderGoods.uploadList.length < 10;
+      const check = this.orderGoods.uploadList.length < 9;
      if (!check) {
        this.$Notice.warning({
          title: '最多可以上传九张图片'
@@ -237,7 +241,7 @@ export default {
 }

 .demo-upload-list{
-  display: inline-block;
+  display: block;
  width: 60px;
  height: 60px;
  text-align: center;
@@ -248,8 +252,7 @@ export default {
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0,0,0,.2);
-  margin-right: 4px;
-  margin-top: 10px;
+  flex-shrink: 0;
 }
 .demo-upload-list img{
  width: 100%;
@@ -274,17 +277,47 @@ export default {
  margin: 0 2px;
 }
 .icon-upload {
-  width: 58px;
-  height:58px;
-  line-height: 58px;
-  text-align:center;
-  display: inline-block;
-  border:1px dashed #999;
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed #999;
  border-radius: 4px;
-  margin-top: 10px;
+  box-sizing: border-box;
  &:hover{
    cursor: pointer;
    border-color: $theme_color;
  }
 }
+
+.upload-section {
+  margin-top: 10px;
+}
+
+.upload-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.upload-trigger {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+
+  :deep(.el-upload) {
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
+.describe {
+  font-size: 12px;
+  color: #999;
+  margin-top: 8px;
+}
 </style>
--- a/buyer/src/pages/home/orderCenter/AddAddress.vue
+++ b/buyer/src/pages/home/orderCenter/AddAddress.vue
@@ -26,9 +26,9 @@
        </el-form-item>
      </el-form>
    </div>
-    <div class="mt_20">
-      <el-button type="primary" class="mr_10" :loading="loading" @click="save">保存收货地址</el-button>
+    <div class="action-bar mt_20">
      <el-button @click="$router.back()">返回</el-button>
+      <el-button type="primary" class="ml_10" :loading="loading" @click="save">保存收货地址</el-button>
    </div>
    </UserCenterLayout>

@@ -153,4 +153,9 @@ export default {
 .add-box {
  margin: 40px 0;
 }
+
+.action-bar {
+  display: flex;
+  justify-content: flex-end;
+}
 </style>
--- a/buyer/src/pages/home/orderCenter/AfterSale.vue
+++ b/buyer/src/pages/home/orderCenter/AfterSale.vue
@@ -39,7 +39,7 @@
              </div>
            </div>
            <div>
-              <span @click="shopPage(order.shopId)">{{ order.storeName }}</span>
+              <span @click="shopPage(order.storeId)">{{ order.storeName }}</span>
            </div>
            <div class="order-actions">
              <!-- 订单基础操作 -->
@@ -89,7 +89,7 @@
            </div>
            <div class="mt_10">
              <span class="global_color"
-              >{{ $filters.unitPrice(singleOrder.flowPrice, "￥") }} </span>x {{ singleOrder.num }}
+              >{{ $filters.unitPrice(singleOrder.flowPrice, "￥") }} </span> x {{ singleOrder.num }}
            </div>
          </div>
        </div>
@@ -173,7 +173,7 @@ export default {
    cancel(sn) { // 取消售后申请
      this.$Modal.confirm({
        title: '取消',
-        content: '<p>确定取消此次售后申请吗？</p>',
+        content: '确定取消此次售后申请吗？',
        onOk: () => {
          cancelAfterSale(sn).then(res => {
            if (res.success) {
--- a/buyer/src/pages/home/orderCenter/AfterSaleDetail.vue
+++ b/buyer/src/pages/home/orderCenter/AfterSaleDetail.vue
@@ -4,8 +4,12 @@
    <!-- 操作按钮 -->
    <el-card class="mb_10" shadow="never" v-if="(afterSale.serviceStatus == 'PASS' &&
          afterSale.serviceType != 'RETURN_MONEY') || (afterSale.afterSaleAllowOperationVO && afterSale.afterSaleAllowOperationVO.cancel)">
-      <el-button type="success" @click="openModal" v-if="afterSale.serviceStatus == 'PASS' &&
-          afterSale.serviceType != 'RETURN_MONEY'" size="small">提交物流</el-button>&nbsp;
+      <el-button
+        @click="openModal"
+        v-if="afterSale.serviceStatus == 'PASS' && afterSale.serviceType != 'RETURN_MONEY'"
+        size="small"
+        class="submit-logistics-btn"
+      >提交物流</el-button>&nbsp;
      <el-button type="danger" @click="cancel(afterSale.sn)" v-if="afterSale.afterSaleAllowOperationVO && afterSale.afterSaleAllowOperationVO.cancel" size="small">取消售后</el-button>
    </el-card>
    <div class="order-card">
@@ -302,4 +306,17 @@ table{
    padding: 5px;
  }
 }
+
+:deep(.submit-logistics-btn) {
+  background-color: #ff9900 !important;
+  border-color: #ff9900 !important;
+  color: #fff !important;
+
+  &:hover,
+  &:focus {
+    background-color: #e68a00 !important;
+    border-color: #e68a00 !important;
+    color: #fff !important;
+  }
+}
 </style>
--- a/buyer/src/pages/home/orderCenter/Complain.vue
+++ b/buyer/src/pages/home/orderCenter/Complain.vue
@@ -17,10 +17,12 @@

      <div class="eval-con">
        <div class="eval-form">
-          <span class="color999">投诉主题：</span>
-          <el-select v-model="form.complainTopic" style="width:260px;margin-bottom:10px">
-            <el-option v-for="item in reasonList" :value="item.reason" :key="item.id">{{ item.reason }}</el-option>
-          </el-select>
+          <div class="topic-row">
+            <span class="color999 topic-label">投诉主题：</span>
+            <el-select v-model="form.complainTopic" class="topic-select">
+              <el-option v-for="item in reasonList" :value="item.reason" :key="item.id">{{ item.reason }}</el-option>
+            </el-select>
+          </div>
          <el-input type="textarea" maxlength="500" show-word-limit :rows="4" placeholder="请输入投诉内容" v-model="form.content" />
        </div>
        <div class="upload-section">
@@ -186,6 +188,22 @@ export default {
  }
 }

+.topic-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.topic-label {
+  flex-shrink: 0;
+  margin-right: 8px;
+}
+
+.topic-select {
+  width: 200px;
+  flex-shrink: 0;
+}
+
 .demo-upload-list{
  display: block;
  width: 60px;
--- a/buyer/src/pages/home/orderCenter/OrderDetail.vue
+++ b/buyer/src/pages/home/orderCenter/OrderDetail.vue
@@ -174,17 +174,6 @@
            <td>{{ $filters.unitPrice(goods.refundPrice, "￥") }}</td>
            <td>{{ $filters.unitPrice((goods.goodsPrice * goods.num), "￥") }}</td>
            <td class="order-item-actions">
-              <el-button
-                v-if="
-                  goods.afterSaleStatus.includes('NOT_APPLIED') ||
-                  goods.afterSaleStatus.includes('PART_AFTER_SALE')
-                "
-                @click="applyAfterSale(goods.sn)"
-                type="default"
-                size="small"
-                class="order-item-action-btn mb_5"
-                >申请售后</el-button
-              >
              <el-button
                v-if="goods.commentStatus == 'UNFINISHED'"
                @click="comment(order.order.sn, goodsIndex)"
@@ -201,6 +190,17 @@
                size="small"
                >投诉</el-button
              >
+              <el-button
+                v-if="
+                  goods.afterSaleStatus.includes('NOT_APPLIED') ||
+                  goods.afterSaleStatus.includes('PART_AFTER_SALE')
+                "
+                @click="applyAfterSale(goods.sn)"
+                type="default"
+                size="small"
+                class="order-item-action-btn mb_5"
+                >申请售后</el-button
+              >
            </td>
          </tr>
        </tbody>
@@ -256,7 +256,7 @@
    </el-dialog>

    <!--查询物流-->
-    <el-dialog v-model="logisticsModal" width="40">
+    <el-dialog v-model="logisticsModal" width="40%">
      <template #header><p><span>查询物流</span></p></template>
      <div class="layui-layer-wrap">
        <dl>
--- a/buyer/src/pages/home/userCenter/MyTracks.vue
+++ b/buyer/src/pages/home/userCenter/MyTracks.vue
@@ -22,11 +22,15 @@
    </ul>
    <!-- 分页 -->
    <div class="page-size">
-      <el-pagination         :total="total"
+      <el-pagination
+        :total="total"
+        :current-page="params.pageNumber"
+        :page-size="params.pageSize"
+        :page-sizes="[10, 20, 30, 40, 50, 100]"
+        layout="sizes, prev, pager, next, jumper"
        @current-change="changePageNum"
        @size-change="changePageSize"
-        :page-size="params.pageSize"
-       layout="sizes, prev, pager, next, jumper"></el-pagination>
+      />
    </div>
    </UserCenterLayout>
  </div>
@@ -44,7 +48,7 @@ export default {
      spinShow: false, // 控制loading是否加载
      params: {
        pageNumber: 1,
-        pageSize: 30,
+        pageSize: 10,
        order: "desc",
        sort: "updateTime",
      },