Browse Source

添加优惠券

wenjie 1 year ago
parent
commit
5cdba2deda

BIN
dist.zip


+ 55 - 0
src/api/coupon.js

@@ -0,0 +1,55 @@
+/*
+ * @Author: wenjie 1454560336@qq.com
+ * @Date: 2024-05-20 16:59:06
+ * @LastEditors: wenjie 1454560336@qq.com
+ * @LastEditTime: 2024-05-22 14:56:56
+ * @FilePath: \admin-manage\src\api\coupon.js
+ * @Description: 
+ * 
+ * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
+ */
+import request from '@/utils/request'
+
+// 获取优惠券列表
+export function getCouponList(params) {
+  return request({
+    url: '/zswl-cloud-shop/couponInfo/search',
+    method: 'get',
+    params
+  })
+}
+
+// 获取优惠券详情
+export function detail(params) {
+  return request({
+    url: '/zswl-cloud-shop/couponInfo/detail',
+    method: 'get',
+    params
+  })
+}
+// 优惠券创建修改
+export function saveOrUpdate(data) {
+    return request({
+      url: '/zswl-cloud-shop/couponInfo/saveOrUpdate',
+      method: 'post',
+      data
+    })
+}
+
+// 优惠券删除
+export function delCoupon(params) {
+    return request({
+      url: '/zswl-cloud-shop/couponInfo/del',
+      method: 'get',
+      params
+    })
+}
+
+// 优惠券停止
+export function stop(params) {
+  return request({
+    url: '/zswl-cloud-shop/couponInfo/stop',
+    method: 'get',
+    params
+  })
+}

+ 22 - 1
src/router/index.js

@@ -2,7 +2,7 @@
  * @Author: wenjie 1454560336@qq.com
  * @Date: 2024-03-05 11:36:07
  * @LastEditors: wenjie 1454560336@qq.com
- * @LastEditTime: 2024-05-13 14:10:22
+ * @LastEditTime: 2024-05-22 15:29:51
  * @FilePath: \admin-manage\src\router\index.js
  * @Description: 
  * 
@@ -711,6 +711,27 @@ export let constantRoutes = [{
               icon: ''
             },
           },
+          {
+            id: 1,
+            path: '/operationManage/couponManage/discountCoupon',
+            name: '/operationManage/couponManage/discountCoupon',
+            component: () => import('@/views/operationManage/couponManage/discountCoupon.vue'),
+            meta: {
+              title: '满减优惠券',
+              icon: ''
+            },
+          },
+          {
+            id: 1,
+            path: '/operationManage/couponManage/refuelCoupon',
+            name: '/operationManage/couponManage/refuelCoupon',
+            component: () => import('@/views/operationManage/couponManage/refuelCoupon.vue'),
+            meta: {
+              title: '加油优惠券',
+              icon: ''
+            },
+          },
+          
         ]
       },
       

+ 1 - 1
src/utils/config.js

@@ -2,7 +2,7 @@
  * @Author: wj 1454560336@qq.com
  * @Date: 2024-01-05 16:08:18
  * @LastEditors: wenjie 1454560336@qq.com
- * @LastEditTime: 2024-05-06 09:13:39
+ * @LastEditTime: 2024-05-20 15:49:43
  * @FilePath: \admin-manage\src\utils\config.js
  * @Description: 124234
  * 

+ 793 - 0
src/views/operationManage/couponManage/discountCoupon.vue

@@ -0,0 +1,793 @@
+
+<template>
+  <div class="discountCoupon app-container">
+    <el-form
+      :model="setQuery"
+      ref="setQuery"
+      :rules="rules"
+      label-width="130px"
+      :disabled="mode == 'detail'"
+      v-loading="pageLoading"
+    >
+      <el-form-item label="优惠券名称:" prop="couponName">
+        <el-input
+          v-model="setQuery.couponName"
+          size="small"
+          class="item-width-300"
+          :maxlength="20"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item label="优惠券内容:" required>
+        <div class="flex">
+          <div class="flex">
+            <el-radio v-model="radio1" label="1">满</el-radio>
+            <el-form-item prop="couponCondition">
+              <el-input
+                v-model="setQuery.couponCondition"
+                size="small"
+                class="item-width-200"
+              >
+                <template slot="append">元</template>
+              </el-input>
+            </el-form-item>
+          </div>
+          <div class="label">,减</div>
+          <div class="flex">
+            <el-form-item prop="couponDiscount">
+              <el-input
+                v-model="setQuery.couponDiscount"
+                size="small"
+                class="item-width-200"
+              >
+                <template slot="append">元</template>
+              </el-input>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="flex" :span="24">
+          <el-radio v-model="radio1" label="2">无门槛,立减</el-radio>
+          <el-form-item prop="couponDiscount">
+            <el-input
+              v-model="setQuery.couponDiscount"
+              size="small"
+              class="item-width-200"
+            >
+              <template slot="append">元</template>
+            </el-input>
+          </el-form-item>
+        </div>
+      </el-form-item>
+
+      <el-form-item label="使用日期:" prop="contactName">
+        <div class="flex">
+          <el-radio v-model="radio2" label="1">{{ "" }}</el-radio>
+          <el-form-item prop="useStartTime">
+            <el-date-picker
+              v-model="date"
+              size="small"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              :default-time="['00:00:00', '23:59:59']"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :picker-options="pickerOptions"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </div>
+        <div class="flex">
+          <el-radio v-model="radio2" label="2">领券后</el-radio>
+          <el-select
+            v-model="setQuery.claimCalmDay"
+            size="small"
+            class="item-width-200"
+            placeholder="请选择"
+          >
+            <el-option label="立即生效" :value="0"> </el-option>
+            <el-option
+              :disabled="disabled"
+              :label="setQuery.claimCalmDay + '天生效'"
+              :value="setQuery.claimCalmDay"
+            >
+              <el-input
+                v-model.number="setQuery.claimCalmDay"
+                type="number"
+                size="small"
+                class="item-width-150"
+                @blur.stop="disabled = false"
+                @focus.stop="disabled = true"
+              >
+                <template slot="append">天</template>
+              </el-input>
+              生效
+            </el-option>
+          </el-select>
+          <div class="label">有效期</div>
+
+          <el-form-item prop="claimValidDay">
+            <el-input
+              v-model.number="setQuery.claimValidDay"
+              size="small"
+              type="number"
+              class="item-width-150"
+            >
+              <template slot="append">天</template>
+            </el-input>
+          </el-form-item>
+        </div>
+        <div class="notice">
+          例:用户在 1月1日9:00 领券,则该券的可用时间为 6月23日00:00:00 至
+          6月23日23:59:59(按自然天计算)
+        </div>
+      </el-form-item>
+      <el-form-item label="发放数量:" prop="limitNum" required>
+        <el-input
+          v-model.number="setQuery.limitNum"
+          type="number"
+          size="small"
+          class="item-width-300"
+        >
+          <template slot="append">张</template>
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="使用说明:" prop="usrDetail">
+        <el-input
+          v-model="setQuery.usrDetail"
+          class="item-width-300"
+          type="textarea"
+          :maxlength="100"
+          show-word-limit
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="适用商品:" prop="usrDetail">
+        <el-radio v-model="radio5" label="1">全部商品</el-radio>
+        <el-radio v-model="radio5" label="2">指定商品</el-radio>
+        <div class="box" style="width: 600px" v-if="radio5 == 2">
+          <div class="tab-box">
+            <el-button size="small" @click="handleChoose">选择商品</el-button>
+            <el-button size="small" @click="tableData1 = []">全部删除</el-button>
+          </div>
+
+          <el-table
+            :data="list"
+            tooltip-effect="dark"
+            border
+            v-loading="loading1"
+            style="width: 100%"
+          >
+            <el-table-column
+            align="center"
+            label="商品图"
+            prop="couponName"
+            show-overflow-tooltip
+            >
+            <template slot-scope="scope">
+                <img class="icon" :src="scope.row.goodsImg" alt="" />
+            </template>
+            </el-table-column>
+
+            <el-table-column
+            prop="goodsName"
+            align="center"
+            label="商品名称"
+            show-overflow-tooltip
+            >
+            </el-table-column>
+
+            <el-table-column
+              prop="address"
+              width="180px"
+              fixed="right"
+              align="center"
+              label="操作"
+            >
+              <template slot-scope="scope">
+                <el-button type="text" size="small" @click="handleDel(scope.row.goodsId)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="page-box">
+            <el-pagination
+              @current-change="handleCurrentChange1"
+              background
+              :current-page="chooseQuery.currentPage"
+              :page-sizes="[10]"
+              :page-size="chooseQuery.pageSize"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="tableData1.length"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </el-form-item>
+      <el-form-item label="领取限制:" prop="claimNum">
+        <el-radio v-model="radio3" label="1">不限制</el-radio>
+        <el-radio v-model="radio3" label="2">限制</el-radio>
+        <div v-if="radio3 == 2">
+          <el-input
+            v-model.number="setQuery.claimNum"
+            size="small"
+            class="item-width-300"
+          >
+            <template slot="append">次</template>
+          </el-input>
+        </div>
+      </el-form-item>
+      <el-form-item label="领取用户限制:" prop="claimUser">
+        <el-radio v-model="radio4" label="1">不限制</el-radio>
+        <el-radio v-model="radio4" label="2">限制分类用户领取</el-radio>
+        <div v-if="radio4 == 2">
+          <el-checkbox-group v-model="setQuery.claimUser">
+            <el-checkbox label="99">非会员</el-checkbox>
+            <el-checkbox
+              :label="item.value"
+              v-for="item in comboList"
+              :key="item.value"
+              >{{ item.label }}</el-checkbox
+            >
+          </el-checkbox-group>
+        </div>
+      </el-form-item>
+      <el-form-item label="展示位置:" prop="showType">
+        <el-checkbox-group v-model="setQuery.showType">
+          <el-checkbox label="1">领取中心</el-checkbox>
+          <el-checkbox label="2">店铺首页</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+    </el-form>
+
+    <div class="btn-group">
+      <el-button>取 消</el-button>
+      <el-button type="primary" :loading="loading" @click="save"
+        >确 定</el-button
+      >
+    </div>
+
+    <el-dialog title="指定商品" top="30px" width="900px" :visible.sync="dialogTableVisible">
+      <div class="search">
+        <div>
+
+            <el-input
+            v-model="query.goodsName"
+            size="small"
+            placeholder="请输入商品名称"
+            class="item-width-200"
+            ></el-input>
+            <el-select
+            v-model="query.goodsType"
+            size="small"
+            clearable
+            class="item-width-200 ml10"
+            placeholder="请选择类型"
+            >
+            <el-option
+                v-for="item in typeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+            >
+            </el-option>
+            </el-select>
+            <el-select
+            v-model="query.shopId"
+            size="small"
+            class="item-width-200 ml10"
+            placeholder="请搜索并选择店铺"
+            :remote-method="getShopList"
+            :loading="shopLoading"
+            clearable
+            filterable
+            remote
+            >
+            <el-option
+                v-for="item in shopOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+            >
+            </el-option>
+            </el-select>
+            <el-button
+            class="ml10"
+            type="primary"
+            size="small"
+            icon="el-icon-search"
+            @click="handleSearch"
+            >
+            搜索
+            </el-button>
+        </div>
+      </div>
+      <el-table
+        :data="tableData"
+        tooltip-effect="dark"
+        border
+        v-loading="loading1"
+        style="width: 100%"
+        ref="multipleTable"
+         @selection-change="handleSelectionChange"
+      >
+       <el-table-column
+        type="selection"
+        width="40">
+        </el-table-column>
+        <el-table-column
+          align="center"
+          label="商品图"
+          prop="couponName"
+          show-overflow-tooltip
+        >
+          <template slot-scope="scope">
+            <img class="icon" :src="scope.row.goodsImg" alt="" />
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          prop="goodsName"
+          align="center"
+          label="商品名称"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="goodsName"
+          align="center"
+          label="商品分类"
+          show-overflow-tooltip
+        >
+          <template slot-scope="scope">
+            {{ goodsTypeObj[scope.row.goodsType] || "-" }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="shopName"
+          align="center"
+          label="店铺"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+      </el-table>
+      <div class="page-box">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          background
+          :current-page="query.currentPage"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="query.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+      <!-- <div class="btn-group">
+      <el-button @click="dialogTableVisible = false">取 消</el-button>
+      <el-button type="primary" @click="saveChoose"
+        >确 定</el-button
+      >
+    </div> -->
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getSetMealNameAndId } from "@/api/common";
+import { saveOrUpdate, detail } from "@/api/coupon";
+import { goodsList } from "@/api/goods";
+import { getList } from "@/api/shop";
+import { debounce } from "@/utils/index";
+
+export default {
+  data() {
+    var validateLimit = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请输入"));
+      } else if (value > 100000000 || value < 1) {
+        callback(new Error("应在~100000000之间"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      mode: "add",
+      radio: 1,
+      radio1: "1",
+      radio2: "1",
+      radio3: "1",
+      radio4: "1",
+      radio5: "1",
+      setQuery: {
+        claimCalmDay: 1,
+        claimNum: 0,
+        claimUser: [],
+        claimValidDay: 0,
+        couponCondition: 0,
+        couponDiscount: 0,
+        couponName: "",
+        couponType: 1,
+        id: 0,
+        limitNum: 0,
+        maxDiscount: 0,
+        shopId: "",
+        showType: [],
+        useEndTime: "",
+        useGoodsRang: "",
+        useStartTime: "",
+        usrDetail: "",
+      },
+      date: [],
+      disabled: false,
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() < Date.now() - 1000 * 60 * 60 * 24;
+        },
+      },
+      rules: {
+        couponName: [
+          { required: true, message: "请输入优惠券名称", trigger: "blur" },
+        ],
+        couponDiscount: [{ validator: this.validateMoney, trigger: "blur" }],
+        limitNum: [{ validator: validateLimit, trigger: "blur" }],
+      },
+      comboList: [],
+      loading: false,
+      tableData: [],
+      tableData1: [],
+      chooseList: [],
+      chooseQuery:{
+        currentPage:1,
+        pageSize: 10,
+
+      },
+      loading1: false,
+      pageLoading: false,
+      shopLoading: false,
+      dialogTableVisible: false,
+      goodsTypeObj: JSON.parse(sessionStorage.getItem("goodsTypeObj")),
+      typeOptions:[],
+      shopOptions:[],
+      query: {
+        applyState: "",
+        status: "3",
+        shopId: "",
+        goodsName: "",
+        currentPage: 1,
+        pageSize: 10,
+      },
+      total: 0,
+    };
+  },
+  watch: {
+    date(val) {
+      if (val == null) {
+        this.setQuery.useStartTime = "";
+        this.setQuery.useEndTime = "";
+      } else {
+        this.setQuery.useStartTime = val[0];
+        this.setQuery.useEndTime = val[1];
+      }
+    },
+    radio1: {
+      handler: function (val) {
+        if (val == 1) {
+          this.$set(this.rules, "couponCondition", [
+            { validator: this.validateMoney, trigger: "blur" },
+          ]);
+        } else {
+          delete this.rules.couponCondition;
+          this.$refs.setQuery.clearValidate("couponCondition");
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+    radio2: {
+      handler: function (val) {
+        if (val == 1) {
+          this.$set(this.rules, "useStartTime", [
+            { required: true, message: "请选择使用时间", trigger: "change" },
+          ]);
+          delete this.rules.claimCalmDay;
+          delete this.rules.claimValidDay;
+        } else {
+          delete this.rules.useStartTime;
+          this.$refs.setQuery.clearValidate("useStartTime");
+          this.$set(this.rules, "claimCalmDay", [
+            { required: true, message: "请输入生效时间", trigger: "blur" },
+            { validator: this.validateNum, trigger: "blur" },
+          ]);
+          this.$set(this.rules, "claimValidDay", [
+            { required: true, message: "请输入有效天数", trigger: "blur" },
+            { validator: this.validateNum, trigger: "blur" },
+          ]);
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+    // radio3:{
+    //   handler: function (val) {
+    //     if(val == 1){
+    //         delete this.rules.claimNum
+
+    //     }else{
+    //         this.rules.claimNum = [
+    //           { validator: validateNum, trigger: 'blur' }
+    //         ]
+    //     }
+    //    },
+    //   deep: true,
+    //   immediate: true
+    // },
+    radio4: {
+      handler: function (val) {
+        if (val == 1) {
+          delete this.rules.claimUser;
+        } else {
+          this.rules.claimUser = [
+            {
+              required: true,
+              message: "请选择领取用户限制",
+              trigger: "change",
+            },
+          ];
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  computed: {
+    list() {
+        return this.tableData1.slice((this.chooseQuery.currentPage-1)*this.chooseQuery.pageSize,this.chooseQuery.currentPage*this.chooseQuery.pageSize)
+    }
+  },
+  methods: {
+    handleDel(id){
+        this.tableData1.map((item,index)=>{
+            if(item.goodsId == id){
+                return this.tableData1.splice(index,1)
+            }
+        })
+    },
+    // 勾选变化
+    handleSelectionChange(val){
+        console.log(val);
+        this.chooseList = val
+         this.tableData1 = this.tableData1.concat(JSON.parse(JSON.stringify(this.chooseList)) ) 
+         this.tableData1 = Array.from(new Set(this.tableData1.map(JSON.stringify))).map(JSON.parse)
+        this.chooseList = []
+    },
+    saveChoose(){
+        this.dialogTableVisible = false
+       
+    },
+    handleChoose(){
+        this.dialogTableVisible = true
+        this.handleSearch()
+    },
+    handleSearch(){
+      this.query.currentPage = 1;
+      this.getGoodsList();
+    },
+    handleSizeChange(val) {
+      this.query.currentPage = 1;
+      this.query.pageSize = val;
+      this.getGoodsList();
+    },
+    handleCurrentChange(val) {
+      this.query.currentPage = val;
+      this.getGoodsList();
+    },
+    // 静态表格手动分页
+    handleCurrentChange1(val) {
+      this.chooseQuery.currentPage = val;
+    },
+    getGoodsList() {
+      this.loading1 = true;
+      goodsList(this.query).then((res) => {
+        this.loading1 = false;
+        if (res.state == "Success") {
+          this.tableData = res.content.records;
+          this.total = res.content.total;
+        }
+      });
+    },
+    validateNum(rule, value, callback) {
+      if (value > 100 || value < 1) {
+        callback(new Error("应在1~2000之间"));
+      } else {
+        callback();
+      }
+    },
+    validateMoney(rule, value, callback) {
+      if (Number(value).toString() == "NaN") {
+        callback(new Error("请输入数字"));
+      } else if (value > 100000 || value < 0.01) {
+        callback(new Error("金额应在0.01~100000.00之间"));
+      } else {
+        callback();
+      }
+    },
+    // 获取套餐列表
+    getSetMealNameAndId() {
+      getSetMealNameAndId().then((res) => {
+        if (res.state == "Success") {
+          for (const key in res.content) {
+            if (res.content.hasOwnProperty.call(res.content, key)) {
+              this.comboList.push({
+                label: res.content[key],
+                value: key,
+              });
+            }
+          }
+        }
+      });
+    },
+    // 获取店铺列表
+    getShopList:debounce(function(val) {
+        if(val){
+            getList({shopNameOrPhoneNum: val,
+              currentPage: 1,
+              pageSize: 20}).then((res) => {
+              this.shopLoading = false;
+              if (res.state == "Success") {
+                 this.shopOptions = []
+                res.content.records.map(item=>{
+                    this.shopOptions.push({
+                        label:item.shopName,
+                        value:item.shopId
+                    })
+                })
+              }
+            });
+        }else{
+            this.shopOptions = []
+        }
+    }),
+    getDetail(id) {
+      this.pageLoading = true;
+      detail({ id }).then((res) => {
+        this.pageLoading = false;
+        if (res.state == "Success") {
+          let obj = JSON.parse(JSON.stringify(res.content));
+          if (obj.showType == 3) {
+            obj.showType = ["1", "2"];
+          } else if (obj.showType) {
+            obj.showType = [obj.showType.toString()];
+          } else {
+            obj.showType = [];
+          }
+
+          if (obj.couponCondition) {
+            this.radio1 = "1";
+          } else {
+            this.radio1 = "2";
+          }
+          obj.claimCalmDay = obj.claimCalmDay || 1;
+          obj.claimValidDay = obj.claimValidDay || 0;
+          if (obj.claimValidDay > 0) {
+            this.radio2 = "2";
+          } else if (obj.useStartTime && obj.useEndTime) {
+            this.radio2 = "1";
+            this.date = [obj.useStartTime, obj.useEndTime];
+          }
+
+          if (obj.claimNum == 0) {
+            this.radio3 = "1";
+          } else {
+            this.radio3 = "2";
+          }
+
+          if (obj.claimUser == 0) {
+            this.radio4 = "1";
+            obj.claimUser = [];
+          } else {
+            this.radio4 = "2";
+            obj.claimUser = obj.claimUser.split(",");
+          }
+
+          this.setQuery = obj;
+        }
+      });
+    },
+    save() {
+      this.$refs.setQuery.validate((v) => {
+        if (v) {
+          let query = JSON.parse(JSON.stringify(this.setQuery));
+          if (this.radio2 == 1) {
+            delete query.claimCalmDay;
+            delete query.claimValidDay;
+          } else {
+            delete query.useStartTime;
+            delete query.useEndTime;
+          }
+          if (this.radio3 == 1) {
+            query.claimNum = 0;
+          }
+          if (this.radio4 == 1) {
+            query.claimUser = 0;
+          } else {
+            query.claimUser.join();
+          }
+
+          if (query.showType.length == 2) {
+            query.showType = 3;
+          } else if (query.showType.length == 1) {
+            query.showType = query.showType[0];
+          } else if (!query.showType.length) {
+            delete query.showType;
+          }
+
+          if (!query.id) {
+            delete query.id;
+          }
+          this.loading = true;
+          saveOrUpdate(query).then((res) => {
+            this.loading = false;
+            if (res.state == "Success") {
+              this.$notify({
+                title: "成功",
+                message: "操作成功",
+                type: "success",
+              });
+
+              this.$router.push("/operationManage/couponManage/index");
+            }
+          });
+        }
+      });
+    },
+  },
+  created() {
+    this.mode = this.$route.query.mode || "add";
+    if (this.$route.query.id) {
+      this.getDetail(this.$route.query.id);
+    }
+    this.getSetMealNameAndId();
+    for (const key in this.goodsTypeObj) {
+        if (Object.hasOwnProperty.call(this.goodsTypeObj, key)) {
+            this.typeOptions.push({
+                label:this.goodsTypeObj[key],
+                value:key
+            })
+            
+        }
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.discountCoupon {
+    .icon{
+        width: 50px;
+        height: 50px;
+    }
+  .label {
+    font-size: 14px;
+    color: #606266;
+    height: 32px;
+    align-self: flex-start;
+    padding: 0 10px;
+  }
+  .flex {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+  .notice {
+    font-size: 12px;
+    color: #aaa;
+    margin-top: 10px;
+  }
+  .btn-group {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>

+ 149 - 80
src/views/operationManage/couponManage/index.vue

@@ -1,6 +1,52 @@
 
 <template>
   <div class="couponManage app-container">
+
+    <div class="type-box">
+      <div class="type">
+        <div class="title">满减券</div>
+        <div class="desc">例:满100元减20元 </div>
+        <div class="desc">便于合理控制活动成本</div>
+         <el-button
+          class="add-btn"
+          type="primary"
+          size="small"
+          @click="handleAdd('/operationManage/couponManage/refuelCoupon')"
+        >
+          立即添加
+        </el-button>
+      </div>
+
+      <div class="type">
+        <div class="title">满减券</div>
+        <div class="desc">例:满100元打8折</div>
+        <div class="desc">便于合理控制活动成本</div>
+         <el-button
+          class="add-btn"
+          type="primary"
+          size="small"
+          @click="handleAdd(1)"
+        >
+          立即添加
+        </el-button>
+      </div>
+
+      <div class="type">
+        <div class="title">小桔加油券</div>
+        <div class="desc">小桔加油券</div>
+        <div class="desc">丰富会员权益增加会员价值</div>
+         <el-button
+          class="add-btn"
+          type="primary"
+          size="small"
+          @click="handleAdd('/operationManage/couponManage/refuelCoupon')"
+        >
+          立即添加
+        </el-button>
+      </div>
+
+    </div>
+
     <div class="search">
       <div>
         <el-input
@@ -20,7 +66,7 @@
           end-placeholder="结束日期">
         </el-date-picker>
         <el-select
-          v-model="query.shopMenuId"
+          v-model="query.couponType"
           size="small"
           clearable
           class="item-width-200 ml10"
@@ -35,7 +81,7 @@
           </el-option>
         </el-select>
         <el-select
-          v-model="query.state"
+          v-model="query.status"
           size="small"
           class="item-width-200 ml10"
           placeholder="请选择状态"
@@ -58,16 +104,6 @@
         搜索
       </el-button>
       </div>
-
-      <el-button
-        class="add-btn"
-        type="primary"
-        size="small"
-        @click="handleAdd(0)"
-      >
-        添加
-      </el-button>
-  
     </div>
 
     <el-table
@@ -80,49 +116,44 @@
       <el-table-column
         align="center"
         label="优惠券名称"
-        prop="shopName"
+        prop="couponName"
         show-overflow-tooltip
       >
       </el-table-column>
       
       <el-table-column
-        prop="shopMenuId"
+        prop="couponType"
         align="center"
         label="优惠券类型"
         show-overflow-tooltip
       >
+       <template slot-scope="scope">
+        {{scope.row.couponType|filterType}}
+       </template>
       </el-table-column>
-
       <el-table-column
-        prop="shopMainName"
-        align="center"
-        label="优惠内容"
-        show-overflow-tooltip
-      >
-      </el-table-column>
-      <el-table-column
-        prop="shopId"
+        prop="limitNum"
         align="center"
         label="发放数量"
         show-overflow-tooltip
       >
       </el-table-column>
       <el-table-column
-        prop="applyTime"
+        prop="claimNum"
         align="center"
         label="已领取"
         show-overflow-tooltip
       >
       </el-table-column>
       <el-table-column
-        prop="applyTime"
+        prop="surplusNum"
         align="center"
         label="剩余数量"
         show-overflow-tooltip
       >
       </el-table-column>
       <el-table-column
-        prop="applyTime"
+        prop="useNum"
         align="center"
         label="已使用"
         show-overflow-tooltip
@@ -138,7 +169,7 @@
      
       <el-table-column
         align="center"
-        prop="state"
+        prop="status"
         label="状态"
         show-overflow-tooltip
       >
@@ -149,20 +180,18 @@
           <el-button
             type="text"
             size="small"
-            @click="handleDetail(scope.row)"
+            @click="handleDetail(scope.row,'detail')"
             >查看</el-button
           >
            <el-button
             type="text"
             size="small"
-            @click="handleDetail(scope.row)"
+            @click="handleDetail(scope.row,'edit')"
             >编辑</el-button
           >
         
-           <el-button type="text" size="small" @click="handle(scope.row)">{{
-            scope.row.state == 1 ? "停止" : "启用"
-          }}</el-button>
-          <el-button type="text" size="small" @click="handleDel(scope.row.shopId)"
+           <el-button type="text" size="small" v-if="scope.row.status == '进行中'" @click="handle(scope.row.id)">停止</el-button>
+          <el-button type="text" size="small" v-else @click="handleDel(scope.row.id)"
             >删除</el-button
           >
         </template>
@@ -186,10 +215,7 @@
   
   <script>
 import { debounce } from "@/utils/index";
-import { getList, updateState } from "@/api/shop";
-import {getMenuName} from '@/api/appConfig';
-import axios from 'axios'
-const BASE_URL = require('@/utils/config')
+import { getCouponList, delCoupon,stop } from "@/api/coupon";
 export default {
   name: "couponManage",
   data() {
@@ -197,29 +223,31 @@ export default {
       tableData: [],
       options: [],
       options1: [
-        {
-          value: null,
-          label: "全部状态",
-        },
         {
           value: "1",
-          label: "启用",
+          label: "未开始",
         },
         {
-          value: "4",
-          label: "禁用",
+          value: "2",
+          label: "进行中",
+        },
+         {
+          value: "3",
+          label: "已停止",
         },
       ],
       loading: false,
       query: {
-        state: null,
-        province: "",
+        couponName:'',
+        couponType: '',
+        status:'',
         startTime:'',
         endTime:'',
         currentPage: 1,
         pageSize: 10,
       },
       total: 0,
+      date:[]
     };
   },
   watch: {
@@ -233,32 +261,36 @@ export default {
       }
     }
   },
+  filters: {
+    filterType: function(value) {
+      if(value == 1){
+        return '满减券';
+      }else if(value == 2){
+        return '打折券';
+      }else if(value == 3){
+        return '加油券';
+      }
+    }
+  },
   methods: {
     handleSearch(){
       this.query.currentPage = 1
       this.getList();
 
     },
-    handleAdd(val) {
+    handleAdd(path) {
       this.$router.push({
-        path: "/operationManage/couponManage/shopAdd" + (val || ""),
+        path: path,
       });
     },
-    handle(row) {
-      let msg;
-      if (row.state == 1) {
-        msg = "禁用";
-      } else {
-        msg = "启用";
-      }
-      this.$confirm(`此操作将${msg}该商铺, 是否继续?`, "提示", {
+    handle(id) {
+      this.$confirm(`此操作将停止该优惠券活动, 是否继续?`, "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
       }).then(() => {
-        updateState({
-          shopId: row.shopId,
-          state: row.state == 1 ? 4 : 1,
+        stop({
+          id
         }).then((res) => {
           if (res.state == "Success") {
             this.$notify({
@@ -266,39 +298,38 @@ export default {
               message: "操作成功",
               type: "success",
             });
-            this.getList();
+            this.handleSearch();
           }
         });
       });
     },
-    handleEdit(id) {
-      this.$router.push({
-        path: "/operationManage/couponManage/shopAdd",
-        query: {
-          title: "店铺编辑",
-          id,
-        },
-      });
-    },
-    handleDetail(id,title) {
+    handleDetail(row,mode) {
+      let url
+      if(row.couponType == 1){
+        url = 'discountCoupon'
+      }else if(row.couponType == 2){
+        url = ''
+      }else if(row.couponType == 3){
+        url = 'refuelCoupon'
+      }
       this.$router.push({
-        path: "/operationManage/couponManage/shopAdd",
+        path: "/operationManage/couponManage/"+url,
         query: {
-          title: "店铺详情",
-          id,
+          id:row.id,
+          mode,
+          status:row.status
         },
       });
     },
 
-    handleDel(shopId){
-      this.$confirm(`此操作将删除该商铺, 是否继续?`, "提示", {
+    handleDel(id){
+      this.$confirm(`此操作将删除该优惠券活动, 是否继续?`, "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
       }).then(() => {
-        updateState({
-          shopId,
-          state: 3,
+        delCoupon({
+          id
         }).then((res) => {
           if (res.state == "Success") {
             this.$notify({
@@ -306,7 +337,7 @@ export default {
               message: "操作成功",
               type: "success",
             });
-            this.getList();
+            this.handleSearch();
           }
         });
       });
@@ -324,7 +355,15 @@ export default {
 
     getList() {
       this.loading = true;
-      getList(this.query).then((res) => {
+      let query = JSON.parse(JSON.stringify(this.query))
+      if(!query.status){
+        delete query.status
+      }
+      if(!query.couponType){
+        delete query.couponType
+      }
+      
+      getCouponList(query).then((res) => {
         this.loading = false;
         if (res.state == "Success") {
           this.tableData = res.content.records;
@@ -341,6 +380,36 @@ export default {
   
 <style lang="scss" scoped>
 .couponManage {
+  .type-box{
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    .type{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      background: rgba(244, 248, 253, 1);
+      border-radius: 8px;
+      padding: 20px;
+      width: 250px;
+      .title{
+        font-size: 20px;
+        color: #222;
+        font-weight: bold;
+        margin-bottom: 10px;
+      }
+        .desc{
+          color: #aaa;
+          font-size: 14px;
+        }
+        .add-btn{
+          margin-top: 10px;
+        }
+    }
+    .type+.type{
+      margin-left: 20px;
+    }
+  }
   .search {
     justify-content: space-between;
     .add-btn {

+ 492 - 0
src/views/operationManage/couponManage/refuelCoupon.vue

@@ -0,0 +1,492 @@
+<template>
+  <div class="refuelCoupon app-container">
+    <el-form
+      :model="setQuery"
+      ref="setQuery"
+      :rules="rules"
+      label-width="130px"
+      :disabled="mode == 'detail'"
+      v-loading="pageLoading"
+    >
+      <el-form-item label="优惠券名称:" prop="couponName">
+        <el-input
+          v-model="setQuery.couponName"
+          size="small"
+          class="item-width-300"
+          :maxlength="20"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item label="优惠券内容:" required>
+        <div class="flex">
+            <div class="flex">
+            <el-radio v-model="radio1" label="1">满</el-radio>
+            <el-form-item prop="couponCondition">
+                <el-input
+                v-model.number="setQuery.couponCondition"
+                type="number"
+                size="small"
+                class="item-width-200"
+                >
+                <template slot="append">元</template>
+                </el-input>
+            </el-form-item>
+            </div>
+              <div class="label"> ,减</div>
+            <div class="flex">
+            <el-form-item prop="couponDiscount">
+                <el-input
+                v-model.number="setQuery.couponDiscount"
+                size="small"
+                class="item-width-200"
+                >
+                <template slot="append">元</template>
+                </el-input>
+            </el-form-item>
+            </div>
+        </div>
+         <div class="flex" :span="24">
+            <el-radio v-model="radio1" label="2">无门槛,立减</el-radio>
+            <el-form-item prop="couponDiscount">
+                <el-input
+                v-model.number="setQuery.couponDiscount"
+                size="small"
+                class="item-width-200"
+                >
+                <template slot="append">元</template>
+                </el-input>
+            </el-form-item>
+            </div>
+      </el-form-item>
+
+      
+
+      <el-form-item label="使用日期:" prop="contactName">
+        <div class="flex">
+            <el-radio v-model="radio2" label="1">{{''}}</el-radio>
+             <el-form-item prop="useStartTime">
+                    <el-date-picker
+                        v-model="date"
+                        size="small"
+                        type="datetimerange"
+                        range-separator="至"
+                        value-format="yyyy-MM-dd HH:mm:ss"
+                        :default-time="['00:00:00', '23:59:59']"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期"
+                        :picker-options="pickerOptions"
+                    >
+                    </el-date-picker>
+            </el-form-item>
+            
+        </div>
+        <div class="flex">
+            <el-radio v-model="radio2" label="2">领券后</el-radio>
+            <el-select v-model="setQuery.claimCalmDay" size="small" class="item-width-200"  placeholder="请选择">
+                  <el-option
+                    label="立即生效"
+                    :value="0">
+                  </el-option>
+                <el-option
+                :disabled="disabled"
+                :label="setQuery.claimCalmDay+'天生效'"
+                :value="setQuery.claimCalmDay">
+                  <el-input
+                    v-model.number="setQuery.claimCalmDay"
+                    type="number"
+                    size="small"
+                    class="item-width-150"
+                    @blur.stop="disabled = false"
+                    @focus.stop="disabled = true"
+                    >
+                    <template slot="append">天</template>
+                    </el-input>
+                    生效
+                </el-option>
+            </el-select>
+              <div class="label">有效期</div>
+                
+                 <el-form-item prop="claimValidDay">
+                    <el-input
+                    v-model.number="setQuery.claimValidDay"
+                    size="small"
+                    type="number"
+                    class="item-width-150"
+                    >
+                    <template slot="append">天</template>
+                    </el-input>
+                </el-form-item>
+        </div>
+        <div class="notice">例:用户在 1月1日9:00 领券,则该券的可用时间为 6月23日00:00:00 至 6月23日23:59:59(按自然天计算)</div>
+       
+      </el-form-item>
+      <el-form-item label="发放数量:" prop="limitNum" required>
+        <el-input
+          v-model.number="setQuery.limitNum"
+          type="number"
+          size="small"
+          class="item-width-300"
+        >
+          <template slot="append">张</template>
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="使用说明:" prop="usrDetail">
+        <el-input
+          v-model="setQuery.usrDetail"
+          class="item-width-300"
+          type="textarea"
+          :maxlength="100"
+          show-word-limit
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="领取限制:" prop="claimNum">
+        <el-radio v-model="radio3" label="1">不限制</el-radio>
+        <el-radio v-model="radio3" label="2">限制</el-radio>
+        <div v-if="radio == 2">
+          <el-input
+            v-model.number="setQuery.claimNum"
+            size="small"
+            class="item-width-300"
+          >
+            <template slot="append">次</template>
+          </el-input>
+        </div>
+      </el-form-item>
+      <el-form-item label="领取用户限制:" prop="claimUser" >
+        <el-radio v-model="radio4" label="1">不限制</el-radio>
+        <el-radio v-model="radio4" label="2">限制分类用户领取</el-radio>
+        <div v-if="radio4 == 2">
+          <el-checkbox-group v-model="setQuery.claimUser">
+            <el-checkbox label="99">非会员</el-checkbox>
+            <el-checkbox :label="item.value" v-for="item in comboList" :key="item.value">{{item.label}}</el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </el-form-item>
+      <el-form-item label="展示位置:" prop="showType">
+        <el-checkbox-group v-model="setQuery.showType">
+          <el-checkbox label="1">领取中心</el-checkbox>
+          <el-checkbox label="2">店铺首页</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+    </el-form>
+
+    <div class="btn-group">
+      <el-button>取 消</el-button>
+      <el-button type="primary" :loading="loading" @click="save"
+        >确 定</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import { getSetMealNameAndId } from "@/api/common";
+import {saveOrUpdate,detail} from '@/api/coupon'
+export default {
+  data() {
+     
+      var validateLimit = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请输入'));
+        } else if(value>100000000||value<1) {
+          callback(new Error('应在~100000000之间'));
+        }else{
+          callback();
+        }
+      };
+    return {
+      mode:'add',
+      radio: 1,
+      radio1:'1',
+      radio2:'1',
+      radio3:'1',
+      radio4:'1',
+      setQuery: {
+        "claimCalmDay": 1,
+        "claimNum": 0,
+        "claimUser": [],
+        "claimValidDay": 0,
+        "couponCondition": 0,
+        "couponDiscount": 0,
+        "couponName": "",
+        "couponType": 3,
+        "id": 0,
+        "limitNum": 0,
+        "maxDiscount": 0,
+        "shopId": "",
+        "showType": [],
+        "useEndTime": "",
+        "useGoodsRang": "",
+        "useStartTime": "",
+        "usrDetail": ""
+        },
+      date:[],
+      disabled:false,
+      pickerOptions: {
+          disabledDate(time) {
+            return time.getTime() < Date.now()-1000*60*60*24;
+          },
+        },
+      rules: {
+          couponName: [
+            { required: true, message: '请输入优惠券名称', trigger: 'blur' }
+          ],
+          couponDiscount: [
+            { validator: this.validateMoney, trigger: 'blur' }
+          ],
+          limitNum: [
+            { validator: validateLimit, trigger: 'blur' }
+          ],
+        
+      },
+      comboList:[],
+      loading: false,
+      pageLoading: false,
+    };
+  },
+  watch: {
+    date(val) {
+      if (val == null) {
+        this.setQuery.useStartTime = "";
+        this.setQuery.useEndTime = "";
+      } else {
+        this.setQuery.useStartTime = val[0];
+        this.setQuery.useEndTime = val[1];
+      }
+    },
+    radio1:{
+      handler: function (val) { 
+        if(val == 1){
+          this.$set(this.rules,'couponCondition',[
+            { validator: this.validateMoney, trigger: 'blur' }
+          ])
+         
+        }else{
+            delete this.rules.couponCondition
+            this.$refs.setQuery.clearValidate('couponCondition')
+        }
+       },
+      deep: true,
+      immediate: true
+    },
+    radio2:{
+      handler: function (val) { 
+         if(val == 1){
+          this.$set(this.rules,'useStartTime',[
+              { required: true, message: '请选择使用时间', trigger: 'change' }
+            ])
+            delete this.rules.claimCalmDay
+            delete this.rules.claimValidDay
+        
+        }else{
+            delete this.rules.useStartTime
+            this.$refs.setQuery.clearValidate('useStartTime')
+             this.$set(this.rules,'claimCalmDay',[
+               { required: true, message: '请输入生效时间', trigger: 'blur' },
+               { validator: this.validateNum, trigger: 'blur' }
+               
+            ])
+             this.$set(this.rules,'claimValidDay',[
+              { required: true, message: '请输入有效天数', trigger: 'blur' },
+              { validator: this.validateNum, trigger: 'blur' }
+            ])
+           
+        }
+       },
+      deep: true,
+      immediate: true
+    },
+    // radio3:{
+    //   handler: function (val) { 
+    //     if(val == 1){
+    //         delete this.rules.claimNum
+        
+    //     }else{
+    //         this.rules.claimNum = [
+    //           { validator: validateNum, trigger: 'blur' }
+    //         ]
+    //     }
+    //    },
+    //   deep: true,
+    //   immediate: true
+    // },
+     radio4:{
+      handler: function (val) { 
+        if(val == 1){
+            delete this.rules.claimUser
+        
+        }else{
+            this.rules.claimUser = [
+            { required: true, message: '请选择领取用户限制', trigger: 'change' }
+          ]
+        }
+       },
+      deep: true,
+      immediate: true
+    },
+  },
+  methods: {
+    validateNum (rule, value, callback) {
+         if(value>100||value<1) {
+          callback(new Error('应在1~2000之间'));
+        }else{
+          callback();
+        }
+      },
+    validateMoney (rule, value, callback) {
+        if ( Number(value).toString() == 'NaN') {
+          callback(new Error('请输入数字'));
+        } else if(value>100000||value<0.01) {
+          callback(new Error('金额应在0.01~100000.00之间'));
+        }else{
+          callback();
+        }
+      },
+    getSetMealNameAndId() {
+        getSetMealNameAndId().then((res) => {
+          if (res.state == "Success") {
+            for (const key in res.content) {
+                if (res.content.hasOwnProperty.call(res.content, key)) {
+                    this.comboList.push( {
+                        label:res.content[key],
+                        value:key
+                    })
+                }
+            }
+          }
+        });
+    },
+    getDetail(id){
+      this.pageLoading = true
+      detail({id}).then(res=>{
+          this.pageLoading = false
+          if (res.state == "Success") {
+            let obj = JSON.parse(JSON.stringify(res.content))
+            if(obj.showType == 3 ){
+              obj.showType = ['1','2']
+            }else if(obj.showType){
+              obj.showType = [obj.showType.toString()]
+            }else{
+              obj.showType = []
+            }
+
+            if(obj.couponCondition){
+              this.radio1 = '1'
+            }else{
+              this.radio1 = '2'
+            }
+            obj.claimCalmDay = obj.claimCalmDay || 1
+            obj.claimValidDay = obj.claimValidDay || 0
+            
+            if(obj.claimValidDay>0){
+              this.radio2 = '2'
+            }else if(obj.useStartTime&&obj.useEndTime){
+              this.radio2 = '1'
+              this.date = [obj.useStartTime,obj.useEndTime]
+            }
+            
+
+            if(obj.claimNum == 0){
+              this.radio3 = '1'
+            }else{
+              this.radio3 = '2'
+            }
+
+            if(obj.claimUser == 0){
+              this.radio4 = '1'
+              obj.claimUser = []
+            }else{
+              this.radio4 = '2'
+              obj.claimUser = obj.claimUser.split(",")
+            }
+
+            this.setQuery = obj
+            
+          }
+      })
+    },
+    save() {
+      this.$refs.setQuery.validate((v) => {
+        if (v) {
+          let query = JSON.parse(JSON.stringify(this.setQuery)) 
+          if(this.radio2 == 1){
+              delete query.claimCalmDay
+              delete query.claimValidDay
+          }else{
+              delete query.useStartTime
+              delete query.useEndTime
+          }
+          if(this.radio3 == 1){
+              query.claimNum = 0
+          }
+          if(this.radio4 == 1){
+              query.claimUser = 0
+          }else{
+            query.claimUser.join()
+          }
+
+          if(query.showType.length == 2){
+            query.showType = 3
+          }else if(query.showType.length == 1){
+            query.showType = query.showType[0]
+          }else if(!query.showType.length){
+            delete query.showType
+          }
+
+          if(!query.id){
+            delete query.id
+          }
+          this.loading = true
+            saveOrUpdate(query).then(res=>{
+                this.loading = false
+                if (res.state == "Success") {
+                  this.$notify({
+                    title: "成功",
+                    message: "操作成功",
+                    type: "success",
+                  });
+
+                  this.$router.push("/operationManage/couponManage/index");
+                } 
+            })
+        }
+      });
+    },
+  },
+  created () {
+    this.mode = this.$route.query.mode || 'add'
+    if(this.$route.query.id){
+      this.getDetail(this.$route.query.id)
+    }
+    this.getSetMealNameAndId();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.refuelCoupon {
+  .label{
+    font-size: 14px;
+    color: #606266;
+    height: 32px;
+    align-self: flex-start;
+    padding: 0 10px;
+  }
+    .flex{
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+    }
+    .notice{
+        font-size: 12px;
+        color: #aaa;
+        margin-top: 10px;
+    }
+  .btn-group {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>