适配重构促销

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

@@ -0,0 +1,410 @@
+<template>
+  <div class="wrapper">
+    <Card>
+      <Form ref="form" :model="form" :rules="formRule">
+        <div class="base-info-item">
+          <h4>添加积分商品</h4>
+          <div class="form-item-view">
+            <FormItem astyle="width: 100%">
+              <div style="display: flex; margin-bottom: 10px">
+                <Button type="primary" @click="openSkuList">选择商品</Button>
+                <Button
+                  type="error"
+                  ghost
+                  style="margin-left: 10px"
+                  @click="delSelectGoods"
+                  >批量删除</Button
+                >
+              </div>
+              <Table
+                border
+                v-if="showTable"
+                :columns="columns"
+                :data="promotionGoodsList"
+                @on-selection-change="changeSelect"
+              >
+                <template slot-scope="{ row }" slot="skuId">
+                  <div>{{ row.skuId }}</div>
+                </template>
+
+                <template slot-scope="{ index }" slot="settlementPrice">
+                  <Input
+                    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
+                    >
+                  </Select>
+                </template>
+                <template slot-scope="{ index }" slot="activeStock">
+                  <Input type="number" v-model="promotionGoodsList[index].activeStock" />
+                </template>
+                <template slot-scope="{ index }" slot="points">
+                  <Input type="number" v-model="promotionGoodsList[index].points" />
+                </template>
+              </Table>
+            </FormItem>
+
+            <FormItem label="兑换时间" prop="time">
+              <DatePicker
+                type="datetime"
+                v-model="form.startTime"
+                format="yyyy-MM-dd HH:mm:ss"
+                placeholder="请选择"
+                :options="options"
+                clearable
+                style="width: 200px"
+              >
+              </DatePicker>
+              -
+              <DatePicker
+                type="datetime"
+                v-model="form.endTime"
+                format="yyyy-MM-dd HH:mm:ss"
+                :options="options"
+                placeholder="请选择"
+                clearable
+                style="width: 200px"
+              >
+              </DatePicker>
+            </FormItem>
+            <div>
+              <Button type="text" @click="closeCurrentPage">返回</Button>
+              <Button type="primary" :loading="submitLoading" @click="handleSubmit"
+                >提交</Button
+              >
+            </div>
+          </div>
+        </div>
+      </Form>
+    </Card>
+    <sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
+  </div>
+</template>
+
+<script>
+import { addPointsGoods, getPointsGoodsCategoryList } from "@/api/promotion";
+import { regular } from "@/utils";
+import skuSelect from "@/views/lili-dialog";
+export default {
+  name: "addPoinsGoods",
+  components: {
+    skuSelect,
+  },
+  data() {
+    const isLtEndDate = (rule, value, callback) => {
+      if (new Date(value).getTime() > new Date(this.form.endTime).getTime()) {
+        callback(new Error());
+      } else {
+        callback();
+      }
+    };
+    const isGtStartDate = (rule, value, callback) => {
+      if (new Date(value).getTime() < new Date(this.form.startTime).getTime()) {
+        callback(new Error());
+      } else {
+        callback();
+      }
+    };
+    return {
+      form: {
+        promotionGoodsList: [], // 活动商品列表
+      },
+      showTable: true,
+      promotionGoodsList: [], // 活动商品列表
+      categoryList: [], // 分类列表
+      submitLoading: false, // 添加或编辑提交状态
+      selectedGoods: [], // 已选商品列表，便于删除
+      formRule: {
+        startTime: [
+          {
+            required: true,
+            type: "date",
+            message: "请选择开始时间",
+          },
+          {
+            trigger: "change",
+            message: "开始时间要小于结束时间",
+            validator: isLtEndDate,
+          },
+        ],
+        endTime: [
+          {
+            required: true,
+            type: "date",
+            message: "请选择结束时间",
+          },
+          {
+            trigger: "change",
+            message: "结束时间要大于开始时间",
+            validator: isGtStartDate,
+          },
+        ],
+        discount: [
+          { required: true, message: "请输入折扣" },
+          {
+            pattern: regular.discount,
+            message: "请输入0-10的数字,可有一位小数",
+          },
+        ],
+        sellerCommission: [
+          { required: true, message: "请输入店铺承担比例" },
+          { pattern: regular.rate, message: "请输入0-100的正整数" },
+        ],
+        publishNum: [
+          { required: true, message: "请输入发放数量" },
+          { pattern: regular.Integer, message: "请输入正整数" },
+        ],
+        couponLimitNum: [
+          { required: true, message: "请输入领取限制" },
+          { pattern: regular.Integer, message: "请输入正整数" },
+        ],
+        description: [{ required: true, message: "请输入范围描述" }],
+      },
+      columns: [
+        {
+          type: "selection",
+          width: 60,
+          align: "center",
+        },
+        {
+          title: "商品名称",
+          key: "goodsName",
+          minWidth: 120,
+          render: (h, params) => {
+            return h("div", params.row.goodsSku.goodsName);
+          },
+        },
+        {
+          title: "SKU编码",
+          slot: "skuId",
+          minWidth: 120,
+        },
+        {
+          title: "店铺名称",
+          key: "storeName",
+          minWidth: 60,
+          render: (h, params) => {
+            return h("div", params.row.goodsSku.storeName);
+          },
+        },
+        {
+          title: "商品价格",
+          key: "price",
+          minWidth: 40,
+          render: (h, params) => {
+            return h(
+              "div",
+              this.$options.filters.unitPrice(params.row.goodsSku.price, "￥")
+            );
+          },
+        },
+        {
+          title: "库存",
+          key: "quantity",
+          minWidth: 20,
+          render: (h, params) => {
+            return h("div", params.row.goodsSku.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;
+        },
+      },
+    };
+  },
+  async mounted() {
+    await this.getCategory();
+  },
+  methods: {
+    // 获取商品分类
+    async getCategory() {
+      let res = await getPointsGoodsCategoryList();
+      this.categoryList = res.result.records;
+    },
+    /** 保存积分商品 */
+    handleSubmit() {
+      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);
+
+          if (!params || params.length == 0) {
+            this.$Modal.warning({ title: "提示", content: "请选择指定商品" });
+            return;
+          }
+
+          this.submitLoading = true;
+          params = params.map((j) => {
+            j.startTime = start;
+            j.endTime = end;
+            return j;
+          });
+          addPointsGoods(params).then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("积分商品创建成功");
+              this.closeCurrentPage();
+            }
+          });
+        }
+      });
+    },
+    // 关闭当前页面
+    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;
+    },
+    // 变更选中状态
+    changeSelect(e) {
+      // 已选商品批量选择
+      this.selectedGoods = e;
+    },
+    delSelectGoods() {
+      // 多选删除商品
+      if (this.selectedGoods.length <= 0) {
+        this.$Message.warning("您还未选择要删除的数据");
+        return;
+      }
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "您确认要删除所选商品吗?",
+        onOk: () => {
+          let ids = [];
+          this.selectedGoods.forEach(function (e) {
+            ids.push(e.id);
+          });
+          this.promotionGoodsList = this.promotionGoodsList.filter((item) => {
+            return !ids.includes(item.id);
+          });
+        },
+      });
+    },
+    delGoods(index) {
+      // 删除商品
+      this.promotionGoodsList.splice(index, 1);
+    },
+    openSkuList() {
+      // 显示商品选择器
+      this.$refs.skuSelect.open("goods");
+      let data = JSON.parse(JSON.stringify(this.promotionGoodsList));
+      data.forEach((e) => {
+        e.id = e.skuId;
+      });
+      this.$refs.skuSelect.goodsData = data;
+    },
+    selectedGoodsData(item) {
+      // 回显已选商品
+      let list = [];
+      item.forEach((e) => {
+        const obj = {
+          settlementPrice: e.settlementPrice || 0,
+          pointsGoodsCategoryId: e.pointsGoodsCategoryId || 0,
+          pointsGoodsCategoryName: e.pointsGoodsCategoryName || "",
+          activeStock: e.activeStock || 0,
+          points: e.points || 0,
+          skuId: e.id,
+          goodsId: e.goodsId,
+          originalPrice: e.price || 0,
+          thumbnail: e.thumbnail || "",
+          goodsName: e.goodsName || "",
+          goodsSku: e,
+        };
+        list.push(obj);
+      });
+      this.promotionGoodsList = list;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scpoed>
+h4 {
+  margin-bottom: 10px;
+  padding: 0 10px;
+  border: 1px solid #ddd;
+  background-color: #f8f8f8;
+  font-weight: bold;
+  color: #333;
+  font-size: 14px;
+  line-height: 40px;
+  text-align: left;
+}
+.describe {
+  font-size: 12px;
+  margin-left: 10px;
+  color: #999;
+}
+.wrapper {
+  min-height: 800px;
+}
+</style>

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

@@ -0,0 +1,365 @@
+<template>
+  <div>
+    <Card>
+      <Form ref="form" :model="form" :label-width="120" :rules="formRule">
+        <div class="base-info-item">
+          <h4>积分商品信息</h4>
+          <div class="form-item-view">
+            <FormItem label="商品名称">
+              <div>{{ form.goodsSku.goodsName }}</div>
+            </FormItem>
+            <FormItem label="SKU编码">
+              <div>{{ form.goodsSku.id }}</div>
+            </FormItem>
+            <FormItem label="店铺名称">
+              <div>{{ form.goodsSku.storeName }}</div>
+            </FormItem>
+            <FormItem label="商品价格">
+              <div>{{ form.goodsSku.price | unitPrice('￥') }}</div>
+            </FormItem>
+            <FormItem label="库存">
+              <div>{{ form.goodsSku.quantity }}</div>
+            </FormItem>
+            <FormItem label="结算价格" prop="settlementPrice">
+              <Input
+                type="num"
+                v-model="form.settlementPrice"
+                placeholder="请填写结算价格"
+                clearable
+                style="width: 260px"
+              />
+            </FormItem>
+            <FormItem label="分类" prop="pointsGoodsCategoryId">
+              <Select
+                v-model="form.pointsGoodsCategoryId"
+                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
+                >
+              </Select>
+            </FormItem>
+            <FormItem label="活动库存" prop="activeStock">
+              <Input
+                type="number"
+                v-model="form.activeStock"
+                placeholder="请填写活动库存"
+                clearable
+                style="width: 260px"
+              />
+            </FormItem>
+            <FormItem label="兑换积分" prop="points">
+              <Input
+                type="number"
+                v-model="form.points"
+                placeholder="请填写兑换积分"
+                clearable
+                style="width: 260px"
+              />
+            </FormItem>
+            <FormItem label="活动开始时间" prop="startTime">
+              <DatePicker
+                type="datetime"
+                v-model="form.startTime"
+                format="yyyy-MM-dd HH:mm:ss"
+                :options="options"
+                placeholder="请选择"
+                clearable
+                style="width: 200px"
+              >
+              </DatePicker>
+              -
+              <DatePicker
+                type="datetime"
+                v-model="form.endTime"
+                format="yyyy-MM-dd HH:mm:ss"
+                :options="options"
+                placeholder="请选择"
+                clearable
+                style="width: 200px"
+              >
+              </DatePicker>
+            </FormItem>
+          </div>
+          <div class="footer">
+            <Button @click="closeCurrentPage" style="margin-right: 5px">返回</Button>
+            <Button
+              type="primary"
+              :loading="submitLoading"
+              @click="handleSubmit"
+              >保存</Button
+            >
+          </div>
+        </div>
+      </Form>
+    </Card>
+  </div>
+</template>
+
+<script>
+import {
+  updatePointsGoods,
+  getPointsGoodsById,
+  getPointsGoodsCategoryList,
+} from "@/api/promotion";
+
+export default {
+  name: "editPointsGoods",
+  data() {
+    return {
+      form: {
+        /** 活动名称 */
+        promotionName: "",
+        /** 报名截止时间 */
+        applyEndTime: "",
+        /** 活动开始时间 */
+        startTime: "",
+        /** 抢购时间段 */
+        seckillPeriod: [],
+        /** 申请规则 */
+        seckillRule: "",
+        goodsSku: {},
+        promotionStatus: "NEW",
+      },
+      categoryList: [], // 分类列表
+      id: this.$route.query.id, // 活动id
+      submitLoading: false, // 添加或编辑提交状态
+      formRule: {
+        settlementPrice: [{ required: true, message: "请填写结算价格" }],
+        pointsGoodsCategoryId: [
+          { required: true, message: "请选择积分商品分类" },
+        ],
+        points: [{ required: true, message: "请填写兑换积分" }],
+        startTime: [{ required: true, message: "请填写活动开始时间" }],
+      },
+    };
+  },
+  async mounted() {
+    await this.getCategory();
+    // 如果id不为空则查询信息
+    if (this.id) {
+      this.getData();
+    }
+  },
+  methods: {
+    // 关闭当前页面
+    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;
+          this.form = data;
+        }
+      });
+    },
+    // 获取分类
+    async getCategory() {
+      let res = await getPointsGoodsCategoryList();
+      this.categoryList = res.result.records;
+    },
+    /** 保存 */
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          const start = this.$options.filters.unixToDate(
+            this.form.startTime / 1000
+          );
+          const end = this.$options.filters.unixToDate(
+            this.form.endTime / 1000
+          );
+          this.form.startTime = start;
+          this.form.endTime = end;
+          this.submitLoading = true;
+          updatePointsGoods(this.form).then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("积分商品修改成功");
+              this.closeCurrentPage();
+            }
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/*编辑基本信息*/
+.el-form {
+  padding-bottom: 80px;
+
+  .el-form-item {
+    width: 100%;
+    color: gray;
+    text-align: left;
+  }
+}
+
+/*平铺*/
+div.base-info-item > div {
+  margin-left: 5%;
+}
+
+div.base-info-item {
+  margin-bottom: 10px;
+
+  h4 {
+    margin-bottom: 10px;
+    padding: 0 10px;
+    border: 1px solid #ddd;
+    background-color: #f8f8f8;
+    font-weight: bold;
+    color: #333;
+    font-size: 14px;
+    line-height: 40px;
+    text-align: left;
+  }
+
+  .form-item-view {
+    display: flex;
+    flex-direction: column;
+    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*/
+  /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;
+  right: 0;
+  text-align: center;
+  z-index: 9999;
+}
+
+/*图片上传组件第一张图设置封面*/
+.goods-images {
+  /deep/ li.el-upload-list__item:first-child {
+    position: relative;
+  }
+
+  /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

@@ -0,0 +1,349 @@
+<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: 200px"
+            />
+          </Form-item>
+          <Form-item label="积分区间">
+            <Input
+              type="text"
+              v-model="searchForm.pointsS"
+              placeholder="请输入开始区间"
+              clearable
+              style="width: 200px"
+            />
+            -
+            <Input
+              type="text"
+              v-model="searchForm.pointsE"
+              placeholder="请输入结束区间"
+              clearable
+              style="width: 200px"
+            />
+          </Form-item>
+          <Form-item label="状态">
+            <Select v-model="searchForm.promotionStatus" style="width: 200px">
+              <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: 200px"
+            />
+          </Form-item>
+          <Button
+            @click="handleSearch"
+            type="primary"
+            icon="ios-search"
+            class="search-btn"
+            >搜索</Button
+          >
+        </Form>
+      </Row>
+      <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">
+                <vue-qr
+                  :text="wapLinkTo(row.goodsId, row.skuId)"
+                  :margin="0"
+                  colorDark="#000"
+                  colorLight="#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>{{ row.originalPrice | unitPrice("￥") }}</div>
+        </template>
+        <template slot-scope="{ row }" slot="settlementPrice">
+          <div>{{ row.settlementPrice | unitPrice("￥") }}</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">
+          <Button
+            v-if="row.promotionStatus == 'NEW'"
+            type="info"
+            size="small"
+            @click="edit(row.id)"
+            style="margin-right: 5px"
+            >编辑</Button
+          >
+          <Button
+            v-if="row.promotionStatus == 'START'"
+            type="warning"
+            size="small"
+            @click="statusChanged(row.id, 'CLOSE')"
+            style="margin-right: 5px"
+            >关闭</Button
+          >
+          <Button
+            v-if="row.promotionStatus == 'CLOSE'"
+            type="warning"
+            size="small"
+            @click="statusChanged(row.id, 'START')"
+            style="margin-right: 5px"
+            >开启</Button
+          >
+          <Button type="error" size="small" @click="close(row.id)">删除</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>
+      </Row>
+    </Card>
+  </div>
+</template>
+
+<script>
+import {
+  getPointsGoodsList,
+  editPointsGoodsStatus,
+  deletePointsGoodsStatus,
+} from "@/api/promotion";
+import vueQr from "vue-qr";
+import { promotionsStatusRender } from "@/utils/promotions";
+
+export default {
+  name: "pointsGoods",
+  components: {
+    "vue-qr": vueQr,
+  },
+  data() {
+    return {
+      loading: true, // 表单加载状态
+      searchForm: {
+        // 搜索框初始化对象
+        pageNumber: 1, // 当前页数
+        pageSize: 10, // 页面大小
+        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, // 表单数据总数
+    };
+  },
+  methods: {
+    // 初始化数据
+    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 = 10;
+      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;
+        }
+      });
+    },
+    // 编辑
+    edit(id) {
+      this.$router.push({ name: "edit-points-goods", query: { id: id } });
+    },
+    // 启用 停用积分商品
+    statusChanged(id, status, startTime, endTime) {
+      let text = "";
+      let params = {};
+      if (status == "START") {
+        text = "开启";
+        params = {
+          startTime: startTime,
+          endTime: endTime,
+        };
+      } else if (status == "CLOSE") {
+        text = "关闭";
+      }
+      this.$Modal.confirm({
+        title: "确认" + text,
+        content: "您确认要" + text + "此积分商品?",
+        loading: true,
+        onOk: () => {
+          editPointsGoodsStatus(id, params).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success(text + "成功");
+              this.getDataList();
+            }
+          });
+        },
+      });
+    },
+    // 删除积分商品
+    close(id) {
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "您确认要删除此积分商品?",
+        loading: true,
+        onOk: () => {
+          // 删除
+          deletePointsGoodsStatus(id).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("操作成功");
+              this.getDataList();
+            }
+          });
+        },
+      });
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
+</script>