fix: 更新 API 请求参数格式及优化组件样式

- 将 addEvaluation API 的参数从 params 修改为 data，以符合标准请求格式
- 在多个组件中调整样式，提升响应式布局和用户体验
- 优化商品详情页的倒计时显示，增强视觉效果
- 更新购物车操作按钮样式，提升一致性和可用性

seller/src/views/distribution/distributionGoods.vue

@@ -24,8 +24,8 @@
     </el-card>
 
     <el-card>
-      <div class="operation" style="margin: 10px 0">
-        <el-button type="primary" @click="delAll">批量下架</el-button>
+      <div class="operation">
+        <el-button type="primary" @click="add">添加</el-button>
       </div>
 
       <el-table
@@ -35,44 +35,35 @@
         :data="data"
         class="mt_10"
         style="width: 100%"
-        @selection-change="changeSelect"
       >
-        <el-table-column type="selection" width="55" align="center" fixed="left" />
-        <el-table-column label="商品图片" width="120" align="center" fixed="left">
+        <el-table-column label="商品名称" min-width="250">
           <template #default="{ row }">
-            <img
-              v-if="row"
-              :src="row.thumbnail || ''"
-              alt="商品图"
-              style="cursor: pointer; width: 80px; height: 60px; margin: 10px 0; object-fit: contain"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column label="商品名称" min-width="220" show-overflow-tooltip>
-          <template #default="{ row }">
-            <template v-if="row">
-              <div class="div-zoom">
-                <a class="link-text" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
-              </div>
-              <el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
-                <template #reference>
-                  <img
-                    src="../../assets/qrcode.svg"
-                    class="hover-pointer"
-                    width="20"
-                    height="20"
-                    alt="qrcode"
+            <div v-if="row" class="goods-msg">
+              <img :src="row.thumbnail" width="60" height="60" alt="" />
+              <div>
+                <div class="div-zoom">
+                  <a class="link-text" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
+                </div>
+                <el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
+                  <template #reference>
+                    <img
+                      src="../../assets/qrcode.svg"
+                      class="hover-pointer"
+                      width="20"
+                      height="20"
+                      alt="qrcode"
+                    />
+                  </template>
+                  <vue-qr
+                    :text="wapLinkTo(row.goodsId, row.skuId)"
+                    :margin="0"
+                    color-dark="#000"
+                    color-light="#fff"
+                    :size="150"
                   />
-                </template>
-                <vue-qr
-                  :text="wapLinkTo(row.goodsId, row.skuId)"
-                  :margin="0"
-                  color-dark="#000"
-                  color-light="#fff"
-                  :size="150"
-                />
-              </el-popover>
-            </template>
+                </el-popover>
+              </div>
+            </div>
           </template>
         </el-table-column>
         <el-table-column label="商品价格" min-width="110">
@@ -82,15 +73,16 @@
         </el-table-column>
         <el-table-column prop="quantity" label="库存" min-width="80" />
         <el-table-column prop="createTime" label="添加时间" min-width="160" />
-        <el-table-column prop="storeName" label="店铺名称" min-width="120" show-overflow-tooltip />
         <el-table-column label="佣金金额" min-width="110">
           <template #default="{ row }">
-            <span v-if="row" :style="{ color: $mainColor }">{{ $filters.unitPrice(row.commission, "￥") }}</span>
+            <span v-if="row" :style="{ color: $mainColor }">
+              {{ $filters.unitPrice(row.commission ?? 0, "￥") }}
+            </span>
           </template>
         </el-table-column>
         <el-table-column label="操作" min-width="100" align="center" fixed="right">
           <template #default="{ row }">
-            <a v-if="row" class="link-text" @click="remove(row)">下架</a>
+            <a v-if="row" class="link-text" @click="remove(row)">删除</a>
           </template>
         </el-table-column>
       </el-table>
@@ -99,7 +91,7 @@
         <el-pagination
           v-model:current-page="searchForm.pageNumber"
           v-model:page-size="searchForm.pageSize"
-          :page-sizes="[20, 50, 100]"
+          :page-sizes="[10, 20, 50]"
           :total="total"
           layout="total, sizes, prev, pager, next, jumper"
           size="small"
@@ -108,27 +100,67 @@
         />
       </div>
     </el-card>
+
+    <liliDialog ref="liliDialog" @selectedGoodsData="selectedGoodsData" />
+
+    <el-dialog
+      v-model="modalVisible"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+      append-to-body
+    >
+      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+        <el-form-item label="分销佣金" prop="commission">
+          <el-input v-model="form.commission" clearable placeholder="请输入分销佣金" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { delDistributionGoods, getDistributionGoods } from "@/api/distribution";
+import {
+  getDistributionGoods,
+  distributionGoodsCancel,
+  distributionGoodsCheck,
+} from "@/api/distribution";
+import liliDialog from "@/views/lili-dialog";
 import vueQr from "vue-qr";
 
 export default {
   name: "distributionGoods",
-  components: { vueQr },
+  components: { liliDialog, vueQr },
   data() {
     return {
+      modalVisible: false,
+      modalTitle: "添加分销商品",
+      submitLoading: false,
       loading: true,
       searchForm: {
         pageNumber: 1,
-        pageSize: 20,
+        pageSize: 10,
         sort: "createTime",
         order: "desc",
       },
-      selectList: [],
-      selectCount: 0,
+      form: {
+        commission: 1,
+      },
+      skuId: 0,
+      formValidate: {
+        commission: [
+          { required: true, message: "请输入大于1小于9999的合法佣金金额", trigger: "blur" },
+          {
+            pattern: /^[1-9]\d{0,3}(\.\d{1,2})?$/,
+            message: "请输入大于1小于9999的合法佣金金额",
+            trigger: "blur",
+          },
+        ],
+      },
       data: [],
       total: 0,
     };
@@ -137,72 +169,74 @@ export default {
     init() {
       this.getDataList();
     },
+    add() {
+      this.$refs.liliDialog.goodsData = [];
+      this.$refs.liliDialog.open("goods", "single");
+    },
+    selectedGoodsData(selected) {
+      if (!selected?.length) return;
+      this.modalVisible = true;
+      this.form.commission = 1;
+      this.modalTitle = "添加分销商品";
+      this.skuId = selected[0].id;
+    },
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (!valid) return;
+        this.submitLoading = true;
+        distributionGoodsCheck(this.skuId, this.form)
+          .then((res) => {
+            if (res?.success || res?.message === "success") {
+              this.$Message.success("添加成功");
+            }
+            this.modalVisible = false;
+            this.getDataList();
+          })
+          .finally(() => {
+            this.submitLoading = false;
+          });
+      });
+    },
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
-      this.clearSelectAll();
     },
     changePageSize(v) {
       this.searchForm.pageSize = v;
+      this.searchForm.pageNumber = 1;
       this.getDataList();
     },
     handleSearch() {
       this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
       this.getDataList();
     },
-    clearSelectAll() {
-      this.$refs.table?.clearSelection();
-    },
-    changeSelect(e) {
-      this.selectList = e;
-      this.selectCount = e.length;
-    },
     getDataList() {
       this.loading = true;
       getDistributionGoods(this.searchForm)
         .then((res) => {
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
+          if (res?.success) {
+            const page = res.result || {};
+            this.data = page.records || [];
+            this.total = page.total || 0;
+          } else {
+            this.data = [];
+            this.total = 0;
           }
         })
         .finally(() => {
           this.loading = false;
         });
     },
-    remove(v) {
+    remove(row) {
       this.$Modal.confirm({
-        title: "确认下架",
-        content: "您确认要下架么?",
+        title: "确认删除",
+        content: "您确认要删除此分销商品吗?",
         loading: true,
         onOk: () => {
-          delDistributionGoods(v.id).then((res) => {
+          distributionGoodsCancel(row.id).then((res) => {
             this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("下架成功");
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-    delAll() {
-      if (this.selectCount <= 0) {
-        this.$Message.warning("您还未选择要下架的数据");
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认下架",
-        content: "您确认要下架所选的 " + this.selectCount + " 条数据?",
-        loading: true,
-        onOk: () => {
-          const ids = this.selectList.map((item) => item.id);
-          delDistributionGoods(ids.toString()).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("下架成功");
-              this.clearSelectAll();
+            if (res?.success) {
+              this.$Message.success("删除成功");
               this.getDataList();
             }
           });
@@ -217,21 +251,39 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.operation {
+  margin: 10px 0;
+}
+
+.goods-msg {
+  display: flex;
+  align-items: flex-start;
+  gap: 13px;
+  padding: 5px 0;
+
+  img {
+    object-fit: contain;
+  }
+}
+
 .link-text {
   color: #409eff;
   cursor: pointer;
   text-decoration: none;
 }
+
 .div-zoom {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   margin-bottom: 4px;
 }
+
 .hover-pointer {
   cursor: pointer;
   vertical-align: middle;
 }
+
 .mt_10 {
   margin-top: 10px;
 }