manager 升级到vue3

manager/src/views/promotions/points-goods/points-goods-add.vue

@@ -1,100 +1,122 @@
 <template>
   <div class="wrapper">
-    <Card>
-      <Form ref="form" :model="form" :rules="formRule">
+    <el-card>
+      <el-form ref="form" :model="form" :rules="formRule" label-width="120px">
         <div class="base-info-item">
           <div class="form-item-view">
-            <FormItem astyle="width: 100%">
+            <el-form-item style="width: 100%">
               <div style="display: flex; margin-bottom: 10px">
-                <Button type="primary" @click="openSkuList">选择商品</Button>
-                <Button
-                  type="error"
-                  ghost
+                <el-button type="primary" @click="openSkuList">选择商品</el-button>
+                <el-button
+                  type="danger"
+                  plain
                   style="margin-left: 10px"
                   @click="delSelectGoods"
-                >批量删除
-                </Button
-                >
+                >批量删除</el-button>
               </div>
-              <Table
+              <el-table
                 border
                 v-if="showTable"
-                :columns="columns"
                 :data="promotionGoodsList"
-                @on-selection-change="changeSelect"
+                style="width: 100%"
+                @selection-change="changeSelect"
               >
-                <template slot-scope="{ row }" slot="skuId">
-                  <div>{{ row.skuId }}</div>
-                </template>
-
-                <template slot-scope="{ index }" slot="settlementPrice">
-                  <InputNumber
-                    :min="0"
-                    type="number"
-                    v-model="promotionGoodsList[index].settlementPrice"
-                  />
-                </template>
-
-                <template slot-scope="{ row, index }" slot="pointsGoodsCategory">
-                  <Select
-                    v-model="promotionGoodsList[index].pointsGoodsCategoryId"
-                    :transfer="true"
-                    :label-in-value="true"
-                    @on-change="
-                      (val) => {
-                        changeCategory(val, index);
-                      }
-                    "
-                  >
-                    <Option
-                      v-for="item in categoryList"
-                      :value="item.id"
-                      :key="item.id"
-                    >{{ item.name }}
-                    </Option
+                <el-table-column type="selection" width="60" align="center" />
+                <el-table-column prop="goodsName" label="商品名称" min-width="120" show-overflow-tooltip />
+                <el-table-column label="SKU编码" min-width="120">
+                  <template #default="{ row }">
+                    <span v-if="row">{{ row.skuId }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="storeName" label="店铺名称" min-width="100" show-overflow-tooltip />
+                <el-table-column label="商品价格" width="110">
+                  <template #default="{ row }">
+                    <span v-if="row" :style="{ color: $mainColor }">
+                      {{ $filters.unitPrice(row.price, "￥") }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="库存" width="90">
+                  <template #default="{ row }">
+                    <span v-if="row">{{ row.quantity }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="结算价格" min-width="130">
+                  <template #default="{ $index }">
+                    <el-input-number
+                      :min="0"
+                      v-model="promotionGoodsList[$index].settlementPrice"
+                      style="width: 110px"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="分类" min-width="160">
+                  <template #default="{ $index }">
+                    <el-select
+                      v-model="promotionGoodsList[$index].pointsGoodsCategoryId"
+                      @change="(val) => changeCategory(val, $index)"
+                      style="width: 140px"
                     >
-                  </Select>
-                </template>
-                <template slot-scope="{ index }" slot="activeStock">
-                  <InputNumber
-                    :min="0"
-                    type="number"
-                    v-model="promotionGoodsList[index].activeStock"
-                  />
-                </template>
-                <template slot-scope="{ index }" slot="points">
-                  <InputNumber
-                    :min="0"
-                    type="number"
-                    v-model="promotionGoodsList[index].points"
-                  />
-                </template>
-              </Table>
-            </FormItem>
+                      <el-option
+                        v-for="item in categoryList"
+                        :value="item.id"
+                        :key="item.id"
+                        :label="item.name"
+                      />
+                    </el-select>
+                  </template>
+                </el-table-column>
+                <el-table-column label="活动库存" min-width="130">
+                  <template #default="{ $index }">
+                    <el-input-number
+                      :min="0"
+                      v-model="promotionGoodsList[$index].activeStock"
+                      style="width: 110px"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="兑换积分" min-width="130">
+                  <template #default="{ $index }">
+                    <el-input-number
+                      :min="0"
+                      v-model="promotionGoodsList[$index].points"
+                      style="width: 110px"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" width="100" align="center">
+                  <template #default="{ $index }">
+                    <el-button type="danger" size="small" plain @click="delGoods($index)">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-form-item>
 
-            <FormItem label="活动时间" prop="rangeTime">
-              <DatePicker type="datetimerange" v-model="form.rangeTime" format="yyyy-MM-dd HH:mm:ss"
-                          placeholder="请选择" :options="options" style="width: 260px">
-              </DatePicker>
-            </FormItem>
+            <el-form-item label="活动时间" prop="rangeTime">
+              <el-date-picker
+                type="datetimerange"
+                v-model="form.rangeTime"
+                format="YYYY-MM-DD HH:mm:ss"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                placeholder="请选择"
+                :disabled-date="options.disabledDate"
+                style="width: 260px"
+              />
+            </el-form-item>
             <div>
-              <Button type="text" @click="closeCurrentPage">返回</Button>
-              <Button type="primary" :loading="submitLoading" @click="handleSubmit"
-              >提交
-              </Button
-              >
+              <el-button link @click="closeCurrentPage">返回</el-button>
+              <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
             </div>
           </div>
         </div>
-      </Form>
-    </Card>
+      </el-form>
+    </el-card>
     <sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
   </div>
 </template>
 
 <script>
-import {addPointsGoods, getPointsGoodsCategoryList} from "@/api/promotion";
-import {regular} from "@/utils";
+import { addPointsGoods, getPointsGoodsCategoryList } from "@/api/promotion";
 import skuSelect from "@/components/lili-dialog";
 
 export default {
@@ -105,105 +127,17 @@ export default {
   data() {
     return {
       form: {
-        rangeTime: ["",""],
-        promotionGoodsList: [], // 活动商品列表
+        rangeTime: ["", ""],
+        promotionGoodsList: [],
       },
       showTable: true,
-      promotionGoodsList: [], // 活动商品列表
-      categoryList: [], // 分类列表
-      submitLoading: false, // 添加或编辑提交状态
-      selectedGoods: [], // 已选商品列表，便于删除
+      promotionGoodsList: [],
+      categoryList: [],
+      submitLoading: false,
+      selectedGoods: [],
       formRule: {
-        rangeTime: [{required: true, message: "请选择活动时间"}],
+        rangeTime: [{ required: true, message: "请选择活动时间" }],
       },
-      columns: [
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-        },
-        {
-          title: "商品名称",
-          key: "goodsName",
-          minWidth: 120,
-          render: (h, params) => {
-            return h("div", params.row.goodsName);
-          },
-        },
-        {
-          title: "SKU编码",
-          slot: "skuId",
-          minWidth: 120,
-        },
-        {
-          title: "店铺名称",
-          key: "storeName",
-          minWidth: 60,
-          render: (h, params) => {
-            return h("div", params.row.storeName);
-          },
-        },
-        {
-          title: "商品价格",
-          key: "price",
-          minWidth: 40,
-          render: (h, params) => {
-            return h("priceColorScheme", {props: {value: params.row.price, color: this.$mainColor}});
-          },
-        },
-        {
-          title: "库存",
-          key: "quantity",
-          minWidth: 20,
-          render: (h, params) => {
-            return h("div", params.row.quantity);
-          },
-        },
-        {
-          title: "结算价格",
-          slot: "settlementPrice",
-          minWidth: 40,
-        },
-        {
-          title: "分类",
-          slot: "pointsGoodsCategory",
-          minWidth: 60,
-        },
-        {
-          title: "活动库存",
-          slot: "activeStock",
-          minWidth: 40,
-        },
-        {
-          title: "兑换积分",
-          slot: "points",
-          minWidth: 40,
-        },
-        {
-          title: "操作",
-          key: "action",
-          minWidth: 50,
-          align: "center",
-          render: (h, params) => {
-            return h(
-              "Button",
-              {
-                props: {
-                  size: "small",
-                  type: "error",
-                  ghost: true,
-                },
-                on: {
-                  click: () => {
-                    this.delGoods(params.index);
-                  },
-                },
-              },
-              "删除"
-            );
-          },
-        },
-      ],
       options: {
         disabledDate(date) {
           return date && date.valueOf() < Date.now() - 86400000;
@@ -215,23 +149,21 @@ export default {
     await this.getCategory();
   },
   methods: {
-    // 获取商品分类
     async getCategory() {
       let res = await getPointsGoodsCategoryList();
       this.categoryList = res.result.records;
     },
-    /** 保存积分商品 */
     handleSubmit() {
-      this.form.startTime=this.form.rangeTime[0]
-      this.form.endTime=this.form.rangeTime[1]
+      this.form.startTime = this.form.rangeTime[0];
+      this.form.endTime = this.form.rangeTime[1];
       this.$refs.form.validate((valid) => {
         if (valid) {
           let params = this.promotionGoodsList;
-          const start = this.$options.filters.unixToDate(this.form.startTime / 1000);
-          const end = this.$options.filters.unixToDate(this.form.endTime / 1000);
+          const start = this.$filters.unixToDate(this.form.startTime / 1000);
+          const end = this.$filters.unixToDate(this.form.endTime / 1000);
 
           if (!params || params.length === 0) {
-            this.$Modal.warning({title: "提示", content: "请选择指定商品"});
+            this.$Modal.warning({ title: "提示", content: "请选择指定商品" });
             return;
           }
 
@@ -251,23 +183,19 @@ export default {
         }
       });
     },
-    // 关闭当前页面
     closeCurrentPage() {
       this.$store.commit("removeTag", "add-points-goods");
       localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
       this.$router.go(-1);
     },
-    // 选择分类
-    changeCategory(val, index) {
-      this.promotionGoodsList[index].pointsGoodsCategoryName = val.label;
+    changeCategory(categoryId, index) {
+      const item = this.categoryList.find((c) => c.id === categoryId);
+      this.promotionGoodsList[index].pointsGoodsCategoryName = item ? item.name : "";
     },
-    // 变更选中状态
     changeSelect(e) {
-      // 已选商品批量选择
       this.selectedGoods = e;
     },
     delSelectGoods() {
-      // 多选删除商品
       if (this.selectedGoods.length <= 0) {
         this.$Message.warning("您还未选择要删除的数据");
         return;
@@ -287,11 +215,9 @@ export default {
       });
     },
     delGoods(index) {
-      // 删除商品
       this.promotionGoodsList.splice(index, 1);
     },
     openSkuList() {
-      // 显示商品选择器
       this.$refs.skuSelect.open("goods");
       let data = JSON.parse(JSON.stringify(this.promotionGoodsList));
       data.forEach((e) => {
@@ -300,7 +226,6 @@ export default {
       this.$refs.skuSelect.goodsData = data;
     },
     selectedGoodsData(item) {
-      // 回显已选商品
       let list = [];
       item.forEach((e) => {
         const obj = {
@@ -316,7 +241,7 @@ export default {
           goodsName: e.goodsName || "",
           quantity: e.quantity || "",
           storeName: e.storeName || "",
-          price: e.price || ""
+          price: e.price || "",
         };
         list.push(obj);
       });

manager/src/views/promotions/points-goods/points-goods-edit.vue

@@ -1,86 +1,84 @@
 <template>
   <div>
-    <Card>
-      <Form ref="form" :model="form" :label-width="120" :rules="formRule">
+    <el-card>
+      <el-form ref="form" :model="form" label-width="120px" :rules="formRule">
         <div class="base-info-item">
           <h4>积分商品信息</h4>
           <div class="form-item-view">
-            <FormItem label="商品名称">
+            <el-form-item label="商品名称">
               <div>{{ form.goodsSku.goodsName }}</div>
-            </FormItem>
-            <FormItem label="SKU编码">
+            </el-form-item>
+            <el-form-item label="SKU编码">
               <div>{{ form.goodsSku.id }}</div>
-            </FormItem>
-            <FormItem label="店铺名称">
+            </el-form-item>
+            <el-form-item label="店铺名称">
               <div>{{ form.goodsSku.storeName }}</div>
-            </FormItem>
-            <FormItem label="商品价格">
+            </el-form-item>
+            <el-form-item label="商品价格">
               <div>
-                <priceColorScheme :value="form.goodsSku.price" :color="$mainColor"></priceColorScheme>
+                <priceColorScheme :value="form.goodsSku.price" :color="$mainColor" />
               </div>
-            </FormItem>
-            <FormItem label="库存">
+            </el-form-item>
+            <el-form-item label="库存">
               <div>{{ form.goodsSku.quantity }}</div>
-            </FormItem>
-            <FormItem label="结算价格" prop="settlementPrice">
-              <Input
+            </el-form-item>
+            <el-form-item label="结算价格" prop="settlementPrice">
+              <el-input
                 type="number"
                 v-model="form.settlementPrice"
                 placeholder="请填写结算价格"
                 clearable
                 style="width: 260px"
               />
-            </FormItem>
-            <FormItem label="分类" prop="pointsGoodsCategoryId">
-              <Select
+            </el-form-item>
+            <el-form-item label="分类" prop="pointsGoodsCategoryId">
+              <el-select
                 v-model="form.pointsGoodsCategoryId"
-                :label-in-value="true"
-                @on-change="changeCategory"
+                placeholder="请选择分类"
+                style="width: 260px"
+                @change="changeCategory"
               >
-                <Option v-for="item in categoryList" :value="item.id" :key="item.id">{{
-                  item.name
-                }}</Option>
-              </Select>
-            </FormItem>
-            <FormItem label="活动库存" prop="activeStock">
-              <Input
+                <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="活动库存" prop="activeStock">
+              <el-input
                 type="number"
                 v-model="form.activeStock"
                 placeholder="请填写活动库存"
                 clearable
                 style="width: 260px"
               />
-            </FormItem>
-            <FormItem label="兑换积分" prop="points">
-              <Input
+            </el-form-item>
+            <el-form-item label="兑换积分" prop="points">
+              <el-input
                 type="number"
                 v-model="form.points"
                 placeholder="请填写兑换积分"
                 clearable
                 style="width: 260px"
               />
-            </FormItem>
-            <FormItem label="活动开始时间">
-              <DatePicker
-                type="datetimerange"
+            </el-form-item>
+            <el-form-item label="活动开始时间">
+              <el-date-picker
                 v-model="form.rangeTime"
-                format="yyyy-MM-dd HH:mm:ss"
-                placeholder="请选择"
-                :options="options"
-                style="width: 260px"
-              >
-              </DatePicker>
-            </FormItem>
+                type="datetimerange"
+                format="YYYY-MM-DD HH:mm:ss"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                :disabled-date="disabledDate"
+                style="width: 360px"
+              />
+            </el-form-item>
           </div>
           <div class="footer">
-            <Button @click="closeCurrentPage" style="margin-right: 5px">返回</Button>
-            <Button type="primary" :loading="submitLoading" @click="handleSubmit"
-              >保存</Button
-            >
+            <el-button @click="closeCurrentPage" style="margin-right: 5px">返回</el-button>
+            <el-button type="primary" :loading="submitLoading" @click="handleSubmit">保存</el-button>
           </div>
         </div>
-      </Form>
-    </Card>
+      </el-form>
+    </el-card>
   </div>
 </template>
 
@@ -95,92 +93,84 @@ export default {
   name: "editPointsGoods",
   data() {
     return {
-      pointsGoodsCategoryId:'',
-      pointsGoodsCategoryName:'',
+      pointsGoodsCategoryId: "",
+      pointsGoodsCategoryName: "",
       form: {
-
-        /** 活动名称 */
         promotionName: "",
-        /** 报名截止时间 */
         applyEndTime: "",
-        /** 活动开始时间 */
         startTime: "",
-        /** 抢购时间段 */
         seckillPeriod: [],
-        /** 申请规则 */
         seckillRule: "",
         goodsSku: {},
         promotionStatus: "NEW",
-
+        rangeTime: [],
       },
-      categoryList: [], // 分类列表
-      id: this.$route.query.id, // 活动id
-      submitLoading: false, // 添加或编辑提交状态
+      categoryList: [],
+      id: this.$route.query.id,
+      submitLoading: false,
       formRule: {
         settlementPrice: [{ required: true, message: "请填写结算价格" }],
         pointsGoodsCategoryId: [{ required: true, message: "请选择积分商品分类" }],
         points: [{ required: true, message: "请填写兑换积分" }],
         activeStock: [{ required: true, message: "请填写库存" }],
       },
-      options: {
-        disabledDate(date) {
-          return date && date.valueOf() < Date.now() - 86400000;
-        },
-      },
     };
   },
   async mounted() {
     await this.getCategory();
-    // 如果id不为空则查询信息
     if (this.id) {
       this.getData();
     }
   },
   methods: {
-    // 分类
-    changeCategory(v){
-      console.log(v);
-      this.pointsGoodsCategoryId=v.value
-      this.pointsGoodsCategoryName=v.label
+    disabledDate(date) {
+      return date && date.getTime() < Date.now() - 86400000;
+    },
+    changeCategory(id) {
+      const item = this.categoryList.find((c) => c.id === id);
+      this.pointsGoodsCategoryId = id;
+      this.pointsGoodsCategoryName = item ? item.name : "";
     },
-    // 关闭当前页面
     closeCurrentPage() {
       this.$store.commit("removeTag", "edit-points-goods");
       localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
       this.$router.go(-1);
     },
-    // 获取商品数据
     getData() {
       getPointsGoodsById(this.id).then((res) => {
         if (res.success) {
-          let data = res.result;
+          const data = res.result;
           this.form = data;
           data.rangeTime = [];
           if (data.startTime && data.endTime) {
-            data.rangeTime.push(new Date(data.startTime), new Date(data.endTime));
+            data.rangeTime = [data.startTime, data.endTime];
+          }
+          if (data.pointsGoodsCategoryId) {
+            this.changeCategory(data.pointsGoodsCategoryId);
           }
         }
       });
     },
-    // 获取分类
     async getCategory() {
-      let res = await getPointsGoodsCategoryList();
+      const res = await getPointsGoodsCategoryList();
       this.categoryList = res.result.records;
     },
-    /** 保存 */
     handleSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
-          const start = this.$options.filters.unixToDate(this.form.rangeTime[0] / 1000);
-          const end = this.$options.filters.unixToDate(this.form.rangeTime[1] / 1000);
-          this.form.startTime = start;
-          this.form.endTime = end;
-          this.submitLoading = true;
-          let params={
-            ...this.form,
-            pointsGoodsCategoryId: this.pointsGoodsCategoryId,
-            pointsGoodsCategoryName:this.pointsGoodsCategoryName
+          if (!this.form.rangeTime || this.form.rangeTime.length !== 2) {
+            this.$Message.error("请选择活动时间");
+            return;
           }
+          this.form.startTime = this.form.rangeTime[0];
+          this.form.endTime = this.form.rangeTime[1];
+          this.submitLoading = true;
+          const params = {
+            ...this.form,
+            pointsGoodsCategoryId: this.pointsGoodsCategoryId || this.form.pointsGoodsCategoryId,
+            pointsGoodsCategoryName:
+              this.pointsGoodsCategoryName || this.form.pointsGoodsCategoryName,
+          };
           updatePointsGoods(params).then((res) => {
             this.submitLoading = false;
             if (res.success) {
@@ -196,7 +186,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/*编辑基本信息*/
 .el-form {
   padding-bottom: 80px;
 
@@ -207,7 +196,6 @@ export default {
   }
 }
 
-/*平铺*/
 div.base-info-item > div {
   margin-left: 5%;
 }
@@ -233,129 +221,17 @@ div.base-info-item {
     align-items: flex-start;
     justify-content: space-between;
     padding-left: 80px;
-
-    .shop-category-text {
-      font-size: 12px;
-    }
-  }
-
-  .item-goods-properts-row {
-    display: flex;
-    flex-direction: row;
-    word-break: break-all;
-    white-space: normal;
-    width: 300px;
-    height: 100px;
-  }
-
-  .item-goods-properts {
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 10px;
-  }
-
-  .form-item {
-    display: flex;
-    align-items: center;
-  }
-
-  /** 审核信息-拒绝原因 */
-  .auth-info {
-    color: red;
-  }
-
-  .el-form-item {
-    width: 30%;
-    min-width: 300px;
-  }
-
-  .goods-name-width {
-    width: 50%;
-    min-width: 300px;
-  }
-
-  .el-form-item__content {
-    margin-left: 120px;
-    text-align: left;
-  }
-
-  p.goods-group-manager {
-    padding-left: 7.5%;
-    text-align: left;
-    color: #999;
-    font-size: 13px;
-  }
-
-  /*teatarea*/
-  ::v-deep .el-textarea {
-    width: 150%;
-  }
-
-  .seo-text {
-    width: 150%;
   }
 }
 
-/*商品描述*/
-.goods-intro {
-  line-height: 40;
-}
-
-/** 底部步骤 */
 .footer {
   width: 100%;
   padding: 10px;
   background-color: #ffc;
   position: fixed;
-  bottom: 0px;
+  bottom: 0;
   right: 0;
   text-align: center;
   z-index: 9999;
 }
-
-/*图片上传组件第一张图设置封面*/
-.goods-images {
-  ::v-deep li.el-upload-list__item:first-child {
-    position: relative;
-  }
-
-  ::v-deep li.el-upload-list__item:first-child:after {
-    content: "封";
-    color: #fff;
-    font-weight: bold;
-    font-size: 12px;
-    position: absolute;
-    left: -15px;
-    top: -6px;
-    width: 40px;
-    height: 24px;
-    padding-top: 6px;
-    background: #13ce66;
-    text-align: center;
-    -webkit-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-    -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
-    box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
-  }
-}
-
-.el-form-item__label {
-  word-break: break-all;
-}
-
-.step-view {
-  width: 33%;
-  height: 40px;
-  font-size: 19px;
-  text-align: center;
-  display: flex;
-  background-color: #fff;
-  justify-content: center;
-  align-items: center;
-}
-
-.page {
-  margin-top: 2vh;
-  margin-bottom: 5vh;
-}
 </style>

manager/src/views/promotions/points-goods/points-goods.vue

@@ -1,146 +1,167 @@
 <template>
   <div class="search">
-    <Card>
-      <Row>
-        <Form
-          ref="searchForm"
-          :model="searchForm"
-          inline
-          :label-width="70"
-          class="search-form"
-        >
-          <Form-item label="商品名称">
-            <Input
-              type="text"
-              v-model="searchForm.goodsName"
-              placeholder="请输入商品名称"
-              clearable
-              style="width: 240px"
+    <el-card>
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        inline
+        label-width="70px"
+        class="search-form"
+        @keyup.enter="handleSearch"
+      >
+        <el-form-item label="商品名称">
+          <el-input
+            v-model="searchForm.goodsName"
+            placeholder="请输入商品名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="积分区间">
+          <el-input
+            v-model="searchForm.pointsS"
+            placeholder="请输入开始区间"
+            clearable
+            style="width: 110px"
+          />
+          <span style="margin: 0 6px">-</span>
+          <el-input
+            v-model="searchForm.pointsE"
+            placeholder="请输入结束区间"
+            clearable
+            style="width: 110px"
+          />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="searchForm.promotionStatus" clearable style="width: 240px">
+            <el-option
+              v-for="item in statusList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
             />
-          </Form-item>
-          <Form-item label="积分区间">
-            <Input
-              type="text"
-              v-model="searchForm.pointsS"
-              placeholder="请输入开始区间"
-              clearable
-              style="width: 240px"
-            />
-            -
-            <Input
-              type="text"
-              v-model="searchForm.pointsE"
-              placeholder="请输入结束区间"
-              clearable
-              style="width: 240px"
-            />
-          </Form-item>
-          <Form-item label="状态">
-            <Select v-model="searchForm.promotionStatus" style="width: 240px">
-              <Option v-for="item in statusList" :value="item.value" :key="item.value">{{
-                item.label
-              }}</Option>
-            </Select>
-          </Form-item>
-          <Form-item label="SKU编码">
-            <Input
-              type="text"
-              v-model="searchForm.skuId"
-              placeholder="请输入SKU编码"
-              clearable
-              style="width: 240px"
-            />
-          </Form-item>
-          <Button
-            @click="handleSearch"
-            type="primary"
-            icon="ios-search"
-            class="search-btn"
-            >搜索</Button
-          >
-        </Form>
-      </Row>
-      </Card>
-    <Card>
-      <Row class="operation padding-row">
-        <Button @click="addPointsGoods" type="primary">添加积分商品</Button>
-      </Row>
-      <Table :loading="loading" border :columns="columns" :data="data" ref="table">
-        <template slot-scope="{ row }" slot="goodsName">
-          <div>
-            <a class="mr_10" @click="linkTo(row.goodsId, row.skuId)">{{
-              row.goodsName
-            }}</a>
-            <Poptip trigger="hover" title="扫码在手机中查看" transfer>
-              <div slot="content">
+          </el-select>
+        </el-form-item>
+        <el-form-item label="SKU编码">
+          <el-input
+            v-model="searchForm.skuId"
+            placeholder="请输入SKU编码"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card>
+      <div class="operation padding-row">
+        <el-button type="primary" @click="addPointsGoods">添加积分商品</el-button>
+      </div>
+
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        class="mt_10"
+        style="width: 100%"
+      >
+        <el-table-column label="商品名称" min-width="200" fixed="left" show-overflow-tooltip>
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text mr_10" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
+              <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"
-                  colorDark="#000"
-                  colorLight="#fff"
+                  color-dark="#000"
+                  color-light="#fff"
                   :size="150"
-                ></vue-qr>
-              </div>
-              <img
-                src="../../../assets/qrcode.svg"
-                style="vertical-align: middle"
-                class="hover-pointer"
-                width="20"
-                height="20"
-                alt=""
-              />
-            </Poptip>
-          </div>
-        </template>
-        <template slot-scope="{ row }" slot="price">
-          <div>
-            <priceColorScheme :value="row.originalPrice" :color="$mainColor"></priceColorScheme>
-          </div>
-        </template>
-        <template slot-scope="{ row }" slot="settlementPrice">
-          <div>
-            <priceColorScheme :value="row.settlementPrice" :color="$mainColor"></priceColorScheme>
-          </div>
-        </template>
-        <template slot-scope="{ row }" slot="quantity">
-          <div>{{ row.activeStock }}</div>
-        </template>
-        <template slot-scope="{ row }" slot="startTime">
-          <div>{{ row.startTime }}</div>
-          <div>{{ row.endTime }}</div>
-        </template>
-        <template slot-scope="{ row }" slot="action">
-          <a
-            v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
-            style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:5px"
-            @click="edit(row.id)"
-            >编辑</a>
-          <span
-            v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
-            style="margin:0 8px;color:#dcdee2"
-            >|</span>
-          <a
-            v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
-            style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:5px"
-            @click="statusChanged(row.id, 'CLOSE')"
-            >关闭</a>
-        </template>
-      </Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
+                />
+              </el-popover>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="市场价" width="110">
+          <template #default="{ row }">
+            <span v-if="row" :style="{ color: $mainColor }">
+              {{ $filters.unitPrice(row.originalPrice, "￥") }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="结算价" width="110">
+          <template #default="{ row }">
+            <span v-if="row" :style="{ color: $mainColor }">
+              {{ $filters.unitPrice(row.settlementPrice, "￥") }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="库存数量" width="100">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.activeStock }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="activeStock" label="活动剩余库存" width="130" />
+        <el-table-column prop="points" label="兑换积分" width="100" />
+        <el-table-column prop="storeName" label="所属店铺" width="120" show-overflow-tooltip />
+        <el-table-column label="活动开始时间" min-width="160">
+          <template #default="{ row }">
+            <template v-if="row">
+              <div>{{ row.startTime }}</div>
+              <div>{{ row.endTime }}</div>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="100">
+          <template #default="{ row }">
+            <el-tag v-if="row" :type="promotionStatusTagType(row.promotionStatus)">
+              {{ promotionStatusText(row.promotionStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="pointsGoodsCategoryName" label="分类" width="100" show-overflow-tooltip />
+        <el-table-column label="操作" width="150" align="center" fixed="right">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a
+                v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
+                class="link-text"
+                @click="edit(row.id)"
+              >
+                编辑
+              </a>
+              <template v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'">
+                <span class="op-split">|</span>
+                <a class="link-text" @click="statusChanged(row.id, 'CLOSE')">关闭</a>
+              </template>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
           :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
@@ -151,156 +172,94 @@ import {
   deletePointsGoodsStatus,
 } from "@/api/promotion";
 import vueQr from "vue-qr";
-import { promotionsStatusRender } from "@/utils/promotions";
 
 export default {
   name: "pointsGoods",
-  components: {
-    "vue-qr": vueQr,
-  },
+  components: { vueQr },
   data() {
     return {
-      loading: true, // 表单加载状态
-        searchForm: {
-          // 搜索框初始化对象
-          pageNumber: 1, // 当前页数
-          pageSize: 20, // 页面大小
-          sort: "createTime",
-          order: "desc", // 默认排序方式
-        },
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
+      },
       statusList: [
-        // 活动状态
         { label: "未开始", value: "NEW" },
         { label: "已开始", value: "START" },
         { label: "已结束", value: "END" },
         { label: "已关闭", value: "CLOSE" },
       ],
-      columns: [
-        // 表头
-        {
-          title: "商品名称",
-          slot: "goodsName",
-          minWidth: 150,
-          fixed: "left",
-          tooltip: true,
-        },
-        {
-          title: "市场价",
-          slot: "price",
-          width: 100,
-        },
-        {
-          title: "结算价",
-          slot: "settlementPrice",
-          width: 100,
-        },
-        {
-          title: "库存数量",
-          slot: "quantity",
-          width: 100,
-        },
-        {
-          title: "活动剩余库存",
-          key: "activeStock",
-          width: 150,
-        },
-        {
-          title: "兑换积分",
-          key: "points",
-          width: 100,
-        },
-        {
-          title: "所属店铺",
-          key: "storeName",
-          width: 100,
-        },
-        {
-          title: "活动开始时间",
-          slot: "startTime",
-          minWidth: 150,
-        },
-        {
-          title: "状态",
-          key: "promotionStatus",
-          width: 100,
-          render: (h, params) => {
-            return promotionsStatusRender(h, params);
-          },
-        },
-        {
-          title: "分类",
-          key: "pointsGoodsCategoryName",
-          width: 100,
-        },
-        {
-          title: "操作",
-          slot: "action",
-          align: "center",
-          fixed: "right",
-          width: 150,
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      data: [],
+      total: 0,
     };
   },
   methods: {
-    // 初始化数据
+    promotionStatusText(status) {
+      const map = {
+        NEW: "未开始",
+        START: "已开始",
+        END: "已结束",
+        CLOSE: "已关闭",
+      };
+      return map[status] || "未知";
+    },
+    promotionStatusTagType(status) {
+      const map = {
+        NEW: "info",
+        START: "success",
+        END: "danger",
+        CLOSE: "danger",
+      };
+      return map[status] || "danger";
+    },
     init() {
       this.getDataList();
     },
-    // 跳转添加商品页面
     addPointsGoods() {
       this.$router.push({ name: "add-points-goods" });
     },
-    // 分页 修改页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
     },
-    // 分页 修改页数
     changePageSize(v) {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
-      handleSearch() {
-        this.searchForm.pageNumber = 1;
-        this.searchForm.pageSize = 20;
-        if (this.searchForm.pointsS) {
-          this.searchForm.points =
-            this.searchForm.pointsS +
-            "_" +
-            (this.searchForm.pointsE ? this.searchForm.pointsE : "");
-        }
-        this.getDataList();
-      },
-    // 获取列表数据
+    handleSearch() {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = 20;
+      if (this.searchForm.pointsS) {
+        this.searchForm.points =
+          this.searchForm.pointsS + "_" + (this.searchForm.pointsE ? this.searchForm.pointsE : "");
+      }
+      this.getDataList();
+    },
     getDataList() {
       this.loading = true;
-      getPointsGoodsList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
+      getPointsGoodsList(this.searchForm)
+        .then((res) => {
+          if (res.success) {
+            this.data = res.result.records;
+            this.total = res.result.total;
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
-    // 编辑
     edit(id) {
-      this.$router.push({ name: "edit-points-goods", query: { id: id } });
+      this.$router.push({ name: "edit-points-goods", query: { id } });
     },
-    // 启用 停用积分商品
     statusChanged(id, status, startTime, endTime) {
       let text = "";
       let params = {};
       if (status == "START") {
         text = "开启";
-        params = {
-          startTime: startTime,
-          endTime: endTime,
-        };
+        params = { startTime, endTime };
       } else if (status == "CLOSE") {
         text = "关闭";
       }
@@ -319,14 +278,12 @@ export default {
         },
       });
     },
-    // 删除积分商品
     close(id) {
       this.$Modal.confirm({
         title: "确认删除",
         content: "您确认要删除此积分商品?",
         loading: true,
         onOk: () => {
-          // 删除
           deletePointsGoodsStatus(id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
@@ -343,3 +300,28 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+.mr_10 {
+  margin-right: 10px;
+}
+.hover-pointer {
+  cursor: pointer;
+  vertical-align: middle;
+}
+.op-split {
+  margin: 0 8px;
+  color: #dcdee2;
+}
+.padding-row {
+  margin-bottom: 10px;
+}
+.mt_10 {
+  margin-top: 10px;
+}
+</style>