适配重构促销

seller/src/views/promotion/coupon/coupon-publish.vue

@@ -6,10 +6,24 @@
           <h4>基本信息</h4>
           <div class="form-item-view">
             <FormItem label="活动名称" prop="promotionName">
-              <Input :disabled="disabled" type="text" v-model="form.promotionName" placeholder="活动名称" clearable style="width: 260px" />
+              <Input
+                :disabled="disabled"
+                type="text"
+                v-model="form.promotionName"
+                placeholder="活动名称"
+                clearable
+                style="width: 260px"
+              />
             </FormItem>
             <FormItem label="优惠券名称" prop="couponName">
-              <Input :disabled="disabled" type="text" v-model="form.couponName" placeholder="优惠券名称" clearable style="width: 260px" />
+              <Input
+                :disabled="disabled"
+                type="text"
+                v-model="form.couponName"
+                placeholder="优惠券名称"
+                clearable
+                style="width: 260px"
+              />
             </FormItem>
             <FormItem label="优惠券类型" prop="couponType">
               <Select :disabled="disabled" v-model="form.couponType" style="width: 260px">
@@ -18,11 +32,25 @@
               </Select>
             </FormItem>
             <FormItem label="折扣" prop="discount" v-if="form.couponType == 'DISCOUNT'">
-              <Input :disabled="disabled" type="number" v-model="form.couponDiscount" placeholder="折扣" clearable style="width: 260px" />
+              <Input
+                :disabled="disabled"
+                type="number"
+                v-model="form.couponDiscount"
+                placeholder="折扣"
+                clearable
+                style="width: 260px"
+              />
               <span class="describe">请输入0-10之间数字，可以输入一位小数</span>
             </FormItem>
             <FormItem label="面额" prop="price" v-if="form.couponType == 'PRICE'">
-              <Input :disabled="disabled" type="text" v-model="form.price" placeholder="面额" clearable style="width: 260px" />
+              <Input
+                :disabled="disabled"
+                type="text"
+                v-model="form.price"
+                placeholder="面额"
+                clearable
+                style="width: 260px"
+              />
             </FormItem>
             <FormItem label="活动类型" prop="getType">
               <Select :disabled="disabled" v-model="form.getType" style="width: 260px">
@@ -32,54 +60,132 @@
             </FormItem>
 
             <FormItem label="发放数量" v-if="form.getType == 'FREE'" prop="publishNum">
-              <Input :disabled="disabled" v-model="form.publishNum" placeholder="发放数量" style="width: 260px" />
+              <Input
+                :disabled="disabled"
+                v-model="form.publishNum"
+                placeholder="发放数量"
+                style="width: 260px"
+              />
               <span class="tips ml_10">如果发放数量为0时,则代表不限制发放数量</span>
             </FormItem>
           </div>
           <h4>使用限制</h4>
           <div class="form-item-view">
             <FormItem label="消费门槛" prop="consumeThreshold">
-              <Input :disabled="disabled" type="text" v-model="form.consumeThreshold" placeholder="消费门槛" clearable style="width: 260px" />
+              <Input
+                :disabled="disabled"
+                type="text"
+                v-model="form.consumeThreshold"
+                placeholder="消费门槛"
+                clearable
+                style="width: 260px"
+              />
             </FormItem>
-            <FormItem label="领取限制" v-if="form.getType == 'FREE'" prop="couponLimitNum">
-              <Input :disabled="disabled" v-model="form.couponLimitNum" placeholder="领取限制" clearable style="width: 260px" />
+            <FormItem
+              label="领取限制"
+              v-if="form.getType == 'FREE'"
+              prop="couponLimitNum"
+            >
+              <Input
+                :disabled="disabled"
+                v-model="form.couponLimitNum"
+                placeholder="领取限制"
+                clearable
+                style="width: 260px"
+              />
               <span class="tips ml_10">如果领取限制为0时,则代表不限制领取数量</span>
             </FormItem>
             <FormItem label="有效期" prop="rangeTime">
-              <DatePicker :disabled="disabled" type="datetimerange" v-model="form.rangeTime" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择" :options="options" style="width: 260px">
+              <DatePicker
+                :disabled="disabled"
+                type="datetimerange"
+                v-model="form.rangeTime"
+                format="yyyy-MM-dd HH:mm:ss"
+                placeholder="请选择"
+                :options="options"
+                style="width: 260px"
+              >
               </DatePicker>
             </FormItem>
             <FormItem label="使用范围" prop="scopeType">
-              <RadioGroup  type="button" button-style="solid" v-model="form.scopeType">
+              <RadioGroup type="button" button-style="solid" v-model="form.scopeType">
                 <Radio :disabled="disabled" label="ALL">全品类</Radio>
                 <Radio :disabled="disabled" label="PORTION_GOODS">指定商品</Radio>
-                <Radio :disabled="disabled" label="PORTION_GOODS_CATEGORY">部分商品分类</Radio>
+                <Radio :disabled="disabled" label="PORTION_GOODS_CATEGORY"
+                  >部分商品分类</Radio
+                >
               </RadioGroup>
             </FormItem>
 
             <FormItem style="width: 100%" v-if="form.scopeType == 'PORTION_GOODS'">
               <div style="display: flex; margin-bottom: 10px">
-                <Button :disabled="disabled" type="primary" @click="openSkuList">选择商品</Button>
-                <Button :disabled="disabled" type="error" ghost style="margin-left: 10px" @click="delSelectGoods">批量删除</Button>
+                <Button :disabled="disabled" type="primary" @click="openSkuList"
+                  >选择商品</Button
+                >
+                <Button
+                  :disabled="disabled"
+                  type="error"
+                  ghost
+                  style="margin-left: 10px"
+                  @click="delSelectGoods"
+                  >批量删除</Button
+                >
               </div>
-              <Table class="mt_10" :disabled="disabled" border :columns="columns" :data="form.promotionGoodsList" @on-selection-change="changeSelect">
+              <Table
+                class="mt_10"
+                :disabled="disabled"
+                border
+                :columns="columns"
+                :data="form.promotionGoodsList"
+                @on-selection-change="changeSelect"
+              >
                 <template slot-scope="{ row }" slot="QRCode">
-                  <img :src="row.QRCode || '../../../assets/lili.png'" width="50px" height="50px" alt="" />
+                  <img
+                    :src="row.QRCode || '../../../assets/lili.png'"
+                    width="50px"
+                    height="50px"
+                    alt=""
+                  />
                 </template>
               </Table>
             </FormItem>
 
             <FormItem v-if="form.scopeType == 'PORTION_GOODS_CATEGORY'">
-              <Cascader :disabled="disabled" @on-change="getGoodsCategory" :data="goodsCategoryList" style="width:300px;" v-model="form.scopeIdGoods"></Cascader>
-
+              <Cascader
+                :disabled="disabled"
+                @on-change="getGoodsCategory"
+                :data="goodsCategoryList"
+                style="width: 300px"
+                v-model="form.scopeIdGoods"
+              ></Cascader>
             </FormItem>
 
             <FormItem label="范围描述" prop="description">
-              <Input :disabled="disabled" v-model="form.description" type="textarea" :rows="4" maxlength="50" show-word-limit clearable style="width: 260px" />
+              <Input
+                :disabled="disabled"
+                v-model="form.description"
+                type="textarea"
+                :rows="4"
+                maxlength="50"
+                show-word-limit
+                clearable
+                style="width: 260px"
+              />
             </FormItem>
             <div>
-              <Button :disabled="disabled" type="text" @click="$router.push({ name: 'coupon' })">返回</Button>
-              <Button :disabled="disabled" type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
+              <Button
+                :disabled="disabled"
+                type="text"
+                @click="$router.push({ name: 'coupon' })"
+                >返回</Button
+              >
+              <Button
+                :disabled="disabled"
+                type="primary"
+                :loading="submitLoading"
+                @click="handleSubmit"
+                >提交</Button
+              >
             </div>
           </div>
         </div>
@@ -152,10 +258,7 @@ export default {
         promotionName: [{ required: true, message: "活动名称不能为空" }],
         couponName: [{ required: true, message: "优惠券名称不能为空" }],
         couponLimitNum: [{ required: true, message: "领取限制不能为空" }],
-        price: [
-          { required: true, message: "请输入面额" },
-          { validator: checkPrice },
-        ],
+        price: [{ required: true, message: "请输入面额" }, { validator: checkPrice }],
         consumeThreshold: [
           { required: true, message: "请输入消费门槛" },
           { validator: checkWeight },
@@ -198,10 +301,7 @@ export default {
           key: "price",
           minWidth: 40,
           render: (h, params) => {
-            return h(
-              "div",
-              this.$options.filters.unitPrice(params.row.price, "￥")
-            );
+            return h("div", this.$options.filters.unitPrice(params.row.price, "￥"));
           },
         },
         {
@@ -284,7 +384,9 @@ export default {
           data.scopeIdGoods = prevCascader;
         }
         data.rangeTime = [];
-        data.rangeTime.push(new Date(data.startTime), new Date(data.endTime));
+        if (data.startTime && data.endTime) {
+          data.rangeTime.push(new Date(data.startTime), new Date(data.endTime));
+        }
         this.form = data;
       });
     },
@@ -307,8 +409,7 @@ export default {
           let scopeId = [];
           if (
             params.scopeType == "PORTION_GOODS" &&
-            (!params.promotionGoodsList ||
-              params.promotionGoodsList.length == 0)
+            (!params.promotionGoodsList || params.promotionGoodsList.length == 0)
           ) {
             this.$Modal.warning({ title: "提示", content: "请选择指定商品" });
             return;
@@ -402,11 +503,9 @@ export default {
           this.selectedGoods.forEach(function (e) {
             ids.push(e.id);
           });
-          this.form.promotionGoodsList = this.form.promotionGoodsList.filter(
-            (item) => {
-              return !ids.includes(item.id);
-            }
-          );
+          this.form.promotionGoodsList = this.form.promotionGoodsList.filter((item) => {
+            return !ids.includes(item.id);
+          });
         },
       });
     },
@@ -520,4 +619,3 @@ h4 {
   color: #999;
 }
 </style>
-

seller/src/views/promotion/coupon/coupon.vue

@@ -2,12 +2,29 @@
   <div class="search">
     <Card>
       <Row>
-        <Form ref="searchForm" :model="searchForm" inline :label-width="100" class="search-form">
+        <Form
+          ref="searchForm"
+          :model="searchForm"
+          inline
+          :label-width="100"
+          class="search-form"
+        >
           <Form-item label="优惠券名称">
-            <Input type="text" v-model="searchForm.couponName" placeholder="请输入优惠券名称" clearable style="width: 200px" />
+            <Input
+              type="text"
+              v-model="searchForm.couponName"
+              placeholder="请输入优惠券名称"
+              clearable
+              style="width: 200px"
+            />
           </Form-item>
           <Form-item label="活动状态" prop="promotionStatus">
-            <Select v-model="searchForm.promotionStatus" placeholder="请选择" clearable style="width: 200px">
+            <Select
+              v-model="searchForm.promotionStatus"
+              placeholder="请选择"
+              clearable
+              style="width: 200px"
+            >
               <Option value="NEW">未开始</Option>
               <Option value="START">已开始/上架</Option>
               <Option value="END">已结束/下架</Option>
@@ -15,26 +32,71 @@
             </Select>
           </Form-item>
           <Form-item label="活动时间">
-            <DatePicker v-model="selectDate" type="daterange" clearable placeholder="选择起始时间" style="width: 200px"></DatePicker>
+            <DatePicker
+              v-model="selectDate"
+              type="daterange"
+              clearable
+              placeholder="选择起始时间"
+              style="width: 200px"
+            ></DatePicker>
           </Form-item>
-          <Button @click="handleSearch" type="primary" class="search-btn" icon="ios-search">搜索</Button>
+          <Button
+            @click="handleSearch"
+            type="primary"
+            class="search-btn"
+            icon="ios-search"
+            >搜索</Button
+          >
           <Button @click="handleReset" class="search-btn">重置</Button>
         </Form>
       </Row>
       <Row class="operator padding-row">
         <Button @click="add" type="primary">添加</Button>
-        <Button @click="delAll" class="ml_10">批量下架</Button>
+        <Button @click="delAll" class="ml_10">批量关闭</Button>
       </Row>
-      <Table class="mt_10" :loading="loading" border :columns="columns" :data="data" ref="table" @on-selection-change="changeSelect">
+      <Table
+        class="mt_10"
+        :loading="loading"
+        border
+        :columns="columns"
+        :data="data"
+        ref="table"
+        @on-selection-change="changeSelect"
+      >
         <template slot-scope="{ row }" slot="action">
-          <Button v-if="row.promotionStatus === 'NEW' || row.promotionStatus === 'CLOSE'" type="info" size="small"  @click="see(row)">编辑</Button>
-          <Button v-else type="default" size="small"  @click="see(row,'only')">查看</Button>
-          <Button v-if="row.promotionStatus !== 'END'" type="error" size="small" :style="{'marginLeft':'5px'}" @click="remove(row)">下架</Button>
+          <Button
+            v-if="row.promotionStatus === 'NEW' || row.promotionStatus === 'CLOSE'"
+            type="info"
+            size="small"
+            @click="see(row)"
+            >编辑</Button
+          >
+          <Button v-else type="default" size="small" @click="see(row, 'only')"
+            >查看</Button
+          >
+          <Button
+            v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
+            type="error"
+            size="small"
+            :style="{ marginLeft: '5px' }"
+            @click="remove(row)"
+            >关闭</Button
+          >
         </template>
       </Table>
       <Row type="flex" justify="end" class="mt_10">
-        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
-          size="small" show-total show-elevator show-sizer></Page>
+        <Page
+          :current="searchForm.pageNumber"
+          :total="total"
+          :page-size="searchForm.pageSize"
+          @on-change="changePage"
+          @on-page-size-change="changePageSize"
+          :page-size-opts="[10, 20, 50]"
+          size="small"
+          show-total
+          show-elevator
+          show-sizer
+        ></Page>
       </Row>
     </Card>
   </div>
@@ -42,12 +104,13 @@
 
 <script>
 import { getShopCouponList, updateCouponStatus } from "@/api/promotion";
+import { promotionsStatusRender, promotionsScopeTypeRender } from "@/utils/promotions";
 
 export default {
   name: "coupon",
   data() {
     return {
-      selectDate:[],
+      selectDate: [],
       loading: true, // 表单加载状态
       searchForm: {
         // 搜索框初始化对象
@@ -84,7 +147,7 @@ export default {
             if (params.row.price) {
               return h(
                 "div",
-                this.$options.filters.unitPrice((params.row.price || 0), "￥")
+                this.$options.filters.unitPrice(params.row.price || 0, "￥")
               );
             } else {
               return h("div", (params.row.couponDiscount || 0) + "折");
@@ -98,7 +161,9 @@ export default {
           render: (h, params) => {
             return h(
               "div",
-              params.row.receivedNum + "/" + (params.row.publishNum === 0 ? '不限制' : params.row.publishNum)
+              params.row.receivedNum +
+                "/" +
+                (params.row.publishNum === 0 ? "不限制" : params.row.publishNum)
             );
           },
         },
@@ -118,32 +183,24 @@ export default {
         {
           title: "品类描述",
           key: "scopeType",
-          width: 100,
+          width: 120,
           render: (h, params) => {
-            let text = "未知";
-            if (params.row.scopeType == "ALL") {
-              text = "全品类";
-            } else if (params.row.scopeType == "PORTION_GOODS_CATEGORY") {
-              text = "商品分类";
-            } else if (params.row.scopeType == "PORTION_SHOP_CATEGORY") {
-              text = "店铺分类";
-            } else if (params.row.scopeType == "PORTION_GOODS") {
-              text = "指定商品";
-            }
-            return h("div", [text]);
+            return promotionsScopeTypeRender(h, params);
           },
         },
         {
           title: "活动时间",
 
           render: (h, params) => {
-            if (params.row.rangeDayType !== "FIXEDTIME") {
+            if (
+              params?.row?.getType === "ACTIVITY" &&
+              params?.row?.rangeDayType === "DYNAMICTIME"
+            ) {
               return h("div", "长期有效");
-            } else {
+            } else if (params?.row?.startTime && params?.row?.endTime) {
               return h("div", {
                 domProps: {
-                  innerHTML:
-                    params.row.startTime + "<br/>" + params.row.endTime,
+                  innerHTML: params.row.startTime + "<br/>" + params.row.endTime,
                 },
               });
             }
@@ -155,33 +212,8 @@ export default {
           key: "promotionStatus",
           fixed: "right",
           render: (h, params) => {
-            let text = "未知",
-              color = "red";
-            if (params.row.promotionStatus == "NEW") {
-              text = "未开始";
-              color = "default";
-            } else if (params.row.promotionStatus == "START") {
-              text = "已开始";
-              color = "green";
-            } else if (params.row.promotionStatus == "END") {
-              text = "已结束";
-              color = "red";
-            } else if (params.row.promotionStatus == "CLOSE") {
-              text = "已关闭";
-              color = "red";
-            }
-            return h("div", [
-              h(
-                "Tag",
-                {
-                  props: {
-                    color: color,
-                  },
-                },
-                text
-              ),
-            ]);
-          }
+            return promotionsStatusRender(h, params);
+          },
         },
         {
           title: "操作",
@@ -256,34 +288,10 @@ export default {
       this.loading = false;
     },
     // 跳转编辑优惠券页面
-    see(v,only) {
-      let data 
-      only ? data = { onlyView : true,id: v.id } : data  = { id: v.id } 
-      this.$router.push({ name: "add-coupon", query:data});
-    },
-    
-    // 开启优惠券
-    open(v) {
-      this.$Modal.confirm({
-        title: "确认",
-        content: "确认要上架此优惠券么?",
-        loading: true,
-        onOk: () => {
-          this.loading = false;
-          let params = {
-            couponIds: v.id,
-            promotionStatus: "START",
-          };
-          updateCouponStatus(params).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("上架成功");
-              this.clearSelectAll();
-              this.getDataList();
-            }
-          });
-        },
-      });
+    see(v, only) {
+      let data;
+      only ? (data = { onlyView: true, id: v.id }) : (data = { id: v.id });
+      this.$router.push({ name: "add-coupon", query: data });
     },
     // 下架优惠券
     remove(v) {
@@ -295,7 +303,6 @@ export default {
           this.loading = false;
           let params = {
             couponIds: v.id,
-            promotionStatus: "CLOSE",
           };
           updateCouponStatus(params).then((res) => {
             this.$Modal.remove();
@@ -312,12 +319,12 @@ export default {
     // 批量下架
     delAll() {
       if (this.selectCount <= 0) {
-        this.$Message.warning("您还未选择要下架的优惠券");
+        this.$Message.warning("您还未选择要关闭的优惠券");
         return;
       }
       this.$Modal.confirm({
-        title: "确认下架",
-        content: "您确认要下架所选的 " + this.selectCount + " 条数据?",
+        title: "确认关闭",
+        content: "您确认要关闭所选的 " + this.selectCount + " 条数据?",
         loading: true,
         onOk: () => {
           let ids = [];
@@ -327,7 +334,6 @@ export default {
 
           let params = {
             couponIds: ids.toString(),
-            promotionStatus: "CLOSE",
           };
           updateCouponStatus(params).then((res) => {
             this.$Modal.remove();