抽奖活动模块新增页面及组件

src/api/business/marketing.js

@@ -9,4 +9,66 @@ export function addMarketing(data) {
   })
 }
 
+//查询列表
+export function getMarketingList(urlParams, data) {
+  return request({
+    url: '/api/v1/mp/admin/marketing/list',
+    method: 'post',
+    data,
+    urlParams
+  })
+}
+//查询详情
+export function getMarketingDetail(id) {
+  return request({
+    url: `/api/v1/mp/admin/marketing/detail/${id}`,
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+  })
+}
 
+//删除
+export function delMarketing(Id) {
+  return request({
+    url: `/api/v1/mp/admin/marketing/delete/${Id}`,
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+  })
+}
+
+//开启活动
+export function setMarketingStatus(data) {
+  return request({
+    url: `/api/v1/mp/admin/marketing/on/${data}`,
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+  })
+}
+
+//关闭活动
+export function setMarketingStatusOff(data) {
+  return request({
+    url: `/api/v1/mp/admin/marketing/off/${data}`,
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+  })
+}
+
+//查询活动数据列表
+export function getMarketingData(id) {
+  return request({
+    url: `/api/v1/mp/admin/marketing/data/${id}`,
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+  })
+}

src/views/business/marketing/add.vue

@@ -9,12 +9,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="23">
-          <!--          <el-form-item label="活动封面:" prop="picUrl">-->
-          <!--            <Upload v-model="addData.picUrl" :limit="1" />-->
-          <!--          </el-form-item>-->
           <el-form-item label="活动封面:" prop="picUrl">
             <image-upload
-              v-model="marketingPicUrl"
+              v-model="marketingPicUrl" :readonly="readonly"
               :limit="1"
               :file-size="0.2"
               @change="$refs.addItem.validateField(['picUrl'])"
@@ -23,7 +20,7 @@
         </el-col>
         <el-col>
           <el-form-item label="活动日期:" prop="dateValue">
-            <el-date-picker value-format="timestamp" v-model="addData.dateValue" type="datetimerange"
+            <el-date-picker value-format="timestamp" v-model="addData.dateValue" type="datetimerange"  :readonly="readonly"
                             range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"/>
           </el-form-item>
         </el-col>
@@ -49,7 +46,7 @@
         <el-col :span="22">
           <el-form-item label="" prop="awardsList">
             <!-- 奖级列表 -->
-            <awards-list ref="awards" v-model="awardsList" @handleCommand="handleCommand" @close="close"/>
+            <awards-list ref="awards" v-model="awardsList"  @handleCommand="handleCommand" @close="close"/>
           </el-form-item>
         </el-col>
       </el-row>
@@ -66,7 +63,7 @@
     <el-row>
       <el-col :span="24" style="text-align: center">
         <el-button type="info" @click="$router.replace('/marketing/marketing')">取消</el-button>
-        <el-button type="primary" @click="update()">保存</el-button>
+        <el-button type="primary" @click="update()" v-if="!readonly">保存</el-button>
       </el-col>
     </el-row>
 
@@ -85,7 +82,8 @@
 </template>
 
 <script>
-import {getGoodsDetail, addMarketing} from '@/api/business/marketing'
+import { publicFileGetUrl } from "@/api/common";
+import {getMarketingDetail, addMarketing} from '@/api/business/marketing'
 import Upload from '@/components/DragImageUpload'
 import WangEditor from '@/components/WangEditor'
 import AwardsList from "./components/AwardsList"
@@ -105,24 +103,9 @@ export default {
     CouponPkgAdd,
     CoinAdd,
   },
-  computed: {
-    marketingPicUrl: {
-      get() {
-        return this.addData.picUrl ? this.addData.picUrl.split(',').map(item => {
-          return {
-            fileName: item
-          }
-        }) : []
-      },
-      set(val) {
-        this.$set(this.addData, 'picUrl', val.map(item => {
-          return item.fileName
-        }).toString())
-      }
-    },
-  },
   data() {
     return {
+      id: this.$route.query.id,
       addData: {
         picUrl: '',//活动主图
         startTime: '',//开始时间
@@ -139,7 +122,43 @@ export default {
       },
       readonly: this.$route.name === 'MarketingQuery',
       // 奖级列表
-      awardsList: [],
+      awardsList: [
+        {
+          name: "一等奖",
+          sort: 1,
+          quantity: 0,
+          prizeList: [],
+          insideNum: 0,
+        },
+        {
+          name: "二等奖",
+          sort: 2,
+          quantity: 0,
+          prizeList: [],
+          insideNum: 0,
+        },
+        {
+          name: "三等奖",
+          sort: 3,
+          quantity: 0,
+          prizeList: [],
+          insideNum: 0,
+        },
+        {
+          name: "四等奖",
+          sort: 4,
+          quantity: 0,
+          prizeList: [],
+          insideNum: 0,
+        },
+        {
+          name: "五等奖",
+          sort: 5,
+          quantity: 0,//名额数量
+          prizeList: [],//列表
+          insideNum: 0,//内定数量
+        }
+      ],
       goodsTableVisible: false, // 添加商品弹框
       couponTitle: "", // 券名称
       couponTableVisible: false, // 添加卡券弹框
@@ -152,30 +171,66 @@ export default {
       dateValue: [],//开始与结束日期
     }
   },
+  computed: {
+    marketingPicUrl: {
+      get() {
+        return this.addData.picUrl ? this.addData.picUrl.split(',').map(item => {
+          return {
+            fileName: item
+          }
+        }) : []
+      },
+      set(val) {
+        this.$set(this.addData, 'picUrl', val.map(item => {
+          return item.fileName
+        }).toString())
+      }
+    },
+  },
+  created() {
+    if (this.id) {
+      getMarketingDetail(this.id).then(res => {
+        const { startTime, endTime, description, fakeNum,picUrl, realNum, title, awardsList, id } = res.data
+        this.addData = { title, dateValue:[startTime,endTime], picUrl, fakeNum, realNum, description, awardsList, id }
+        if(description) {
+          this.$refs.editor.setContent(description)
+        }
+        if(awardsList){
+          awardsList.forEach((item) => {
+              item.prizeList.forEach((ele) => {
+                (ele.picUrl = publicFileGetUrl + ele.picUrl.split(',')[0]),
+                  (ele.prizeType = JSON.parse(ele.prizeType).value);
+              });
+          });
+          this.$nextTick(() => {
+            this.$refs.awards.add(3, awardsList)
+          })
+          this.awardsList = awardsList
+        }
+      })
+    }
+  },
   methods: {
     // 保存
     update() {
       this.$refs.addItem.validate((valid, items) => {
         if (valid) {
-          if(this.awardsList.length < 2) {
-            this.msgError('请至少设置两个奖级的的奖品！')
+          if(this.awardsList.length < 1) {
+            this.msgError('请至少设置一个奖级的的奖品！')
             return;
           }
-          console.log(this.awardsList)
           // 判断没有设置奖品的奖级
           let prizeIndex = this.awardsList.findIndex((item) => {
             return !item.prizeList.length;
           });
-
           if (prizeIndex != -1) {
             this.$message.error(
-              `请至少设置两个奖级的的奖品！`
+              `请至少设置一个奖级的的奖品！`
             );
             return;
           }
           // 判断内定名额大于奖品名额
           let quantityIndex = this.awardsList.findIndex((item) => {
-            console.log(item)
             return item.insideNum > item.quantity;
           });
           if (quantityIndex != -1) {
@@ -184,12 +239,21 @@ export default {
             );
             return;
           }
+          let quantityIndexTwo = this.awardsList.findIndex((item) => {
+            return item.prizeList.length != 0 && item.quantity == 0;
+          });
+          if (quantityIndexTwo != -1) {
+            this.$message.error(
+              `${this.awardsList[quantityIndexTwo].name}的名额不能为0，请重新设置！`
+            );
+            return;
+          }
 
           this.awardsList.forEach((item) => {
             item.prizeList = item.prizeList.map((ele) => {
               return {
                 ...ele,
-                refId: ele.goodsId || ele.couponId || ele.id,
+                refId: ele.refId || ele.goodsId || ele.couponId || ele.id ,
                 prizeType: ele.prizeType,
                 quantity: ele.quantity,
                 value: Number(ele.coinValue),
@@ -202,10 +266,10 @@ export default {
             title,
             description: encodeURI(description),
             fakeNum,
-            startTime: this.addData.dateValue[1],
-            endTime: this.addData.dateValue[0],
+            startTime: this.addData.dateValue[0],
+            endTime: this.addData.dateValue[1],
             awardsList: this.awardsList,
-            picUrl,
+            picUrl, id:this.addData.id?this.addData.id:"",
           }).then(res => {
             if (res.code === 0) {
               this.$message({

src/views/business/marketing/components/ActivityTable.vue

@@ -1,39 +1,39 @@
 <template>
   <div>
     <el-dialog
-      title="添加券"
+      :title="this.ids.title"
       width="1000px"
       :visible.sync="dialogVisible"
       :before-close="close"
     >
       <div class="dialog-search">
-        <div>参与用户数量：{{}}</div>
+        <div>参与用户数量：{{this.ids.realNum}}</div>
         <div class="ge"></div>
-        <div>抽奖码数量：{{}}</div>
+        <div>抽奖码数量：{{marketingTotal}}</div>
       </div>
       <el-table
         v-loading="loading"
-        :data="couponList"
+        :data="marketingList"
         @selection-change="handleSelectionCoupon"
         class="el-table"
       >
-        <el-table-column label="用户编号" prop="couponId" min-width="80" />
-        <el-table-column label="用户昵称" prop="title" min-width="80" />
-        <el-table-column label="抽奖码" prop="title" min-width="80" />
-        <el-table-column label="抽奖码获取时间" min-width="85">
-          <template slot-scope="scope">
-            <div>{{ scope.row.type.desc }}</div>
+        <el-table-column label="用户编号" prop="userId" min-width="80" />
+        <el-table-column label="用户昵称" prop="nickName" min-width="80" />
+        <el-table-column label="抽奖码" prop="code" min-width="80" />
+        <el-table-column label="抽奖码获取时间" prop="createdTime" min-width="85">
+          <template slot-scope="row">
+            <div>{{ parseTime(row.createdTime) }}</div>
           </template>
         </el-table-column>
-        <el-table-column label="奖级" prop="title" min-width="50" />
-        <el-table-column label="奖品名称" prop="title" min-width="85" />
+        <el-table-column label="奖级" prop="awardsName" min-width="50" />
+        <el-table-column label="奖品名称" prop="prizeName" min-width="85" />
       </el-table>
       <pagination
-        v-show="couponTotal > 0"
-        :total="couponTotal"
+        v-show="marketingTotal > 0"
+        :total="marketingTotal"
         :page.sync="pageParams.pageNum"
         :limit.sync="pageParams.pageSize"
-        @pagination="getCouponList"
+        @pagination="getMarketingData"
       />
       <div class="dialog-btn">
         <el-button size="small" @click="close"> 关 闭 </el-button>
@@ -43,7 +43,7 @@
 </template>
 <script>
 import { publicFileGetUrl } from "@/api/common";
-import { getCouponList } from "@/api/business/coupon";
+import { getMarketingData } from '@/api/business/marketing'
 export default {
   name: "CouponAdd",
   props: {
@@ -52,16 +52,16 @@ export default {
       default: false,
     },
     ids: {
-      type: Array,
+      type: Object,
       default: () => []
     }
   },
   data() {
     return {
       loading: false,
-      couponTitle: "", // 券名称
-      couponList: [], // 卡券列表
-      couponTotal: 0, // 卡券总数
+      marketingTitle: "", // 券名称
+      marketingList: [], // 卡券列表
+      marketingTotal: 0, // 卡券总数
       selectCouponList: [], // 选中卡券
       pageParams: {
         pageNum: 1,
@@ -70,29 +70,16 @@ export default {
     };
   },
   created() {
-    this.getCouponList();
+    this.getMarketingData();
   },
   methods: {
     // 卡券列表
-    getCouponList() {
+    getMarketingData() {
       this.loading = true;
-      getCouponList(
-        "pageNum=" +
-        this.pageParams.pageNum +
-        "&pageSize=" +
-        this.pageParams.pageSize +
-        "&",
-        { title: this.couponTitle, status: "on", excludeCouponIds: this.ids }
-      ).then((res) => {
-        this.couponList = res.rows.map((item) => {
-          return {
-            ...item,
-            type: JSON.parse(item.type),
-            useArea: JSON.parse(item.useArea),
-            picUrl: publicFileGetUrl + item.picUrl,
-          };
-        });
-        this.couponTotal = res.total;
+      getMarketingData(this.ids.id ).then((res) => {
+        console.log(res.rows)
+        this.marketingList = res.rows
+        this.marketingTotal = res.total;
         this.loading = false;
       });
     },

src/views/business/marketing/components/AwardsList.vue

@@ -46,19 +46,6 @@
                 <div v-if="scope.row.prizeType == 'coin'">盲豆</div>
               </template>
             </el-table-column>
-            <el-table-column label="排序" prop="sortWeight">
-              <template slot-scope="scope">
-                <div>
-                  <el-input-number
-                    v-model="scope.row.sortWeight"
-                    controls-position="right"
-                    :min="0"
-                    size="small"
-                  ></el-input-number>
-                </div>
-              </template>
-            </el-table-column>
-
             <el-table-column label="操作" align="center">
               <template slot-scope="scope">
                 <el-button
@@ -73,7 +60,7 @@
         </div>
         <div class="prize-btn">
           <el-dropdown @command="handleCommand($event, index)">
-            <el-button type="primary" size="small">
+            <el-button type="primary" size="small" >
               添加奖品<i class="el-icon-arrow-down el-icon--right"></i>
             </el-button>
             <el-dropdown-menu slot="dropdown">
@@ -118,16 +105,16 @@ export default {
         {
           name: "三等奖",
           sort: 3,
-          quantity: 0,//名额数量
-          prizeList: [],//列表
-          insideNum: 0,//内定数量
+          quantity: 0,
+          prizeList: [],
+          insideNum: 0,
         },
         {
           name: "四等奖",
           sort: 4,
-          quantity: 0,//名额数量
-          prizeList: [],//列表
-          insideNum: 0,//内定数量
+          quantity: 0,
+          prizeList: [],
+          insideNum: 0,
         },
         {
           name: "五等奖",

src/views/business/marketing/index.vue

@@ -10,12 +10,9 @@
         />
       </el-form-item>
       <el-form-item label="活动状态">
-        <el-select v-model="queryParams.status" placeholder="请选择活动状态" clearable @change="queryParams.pageNum = 1;getList()">
+        <el-select v-model="queryParams.isOn" placeholder="请选择活动状态" clearable @change="queryParams.pageNum = 1;getList()">
           <el-option label="全部" value="" />
-          <el-option label="进行中" value="init" />
-          <el-option label="已结束" value="on" />
-          <el-option label="草稿" value="off" />
-          <el-option label="未开始" value="off" />
+          <el-option v-for="(item,index) in marketingStatusList"  :label="item.dictLabel" :value="Number(item.dictValue)" :key="index"/>
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -44,41 +41,41 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
     <el-table v-loading="loading" :data="tableData">
-      <el-table-column label="活动编号" prop="couponId" width="80" />
+      <el-table-column label="活动编号" prop="id" width="80" />
       <el-table-column label="活动名称" prop="title" />
-      <el-table-column label="参与人数" prop="discount"/>
-      <el-table-column label="开始时间" prop="type" >
+      <el-table-column label="参与人数" prop="realNum"/>
+      <el-table-column label="开始时间" prop="startTime" >
         <template slot-scope="{row}">
-          {{ JSON.parse(row.type).desc }}
+          {{ parseTime(row.startTime) }}
         </template>
       </el-table-column>
-      <el-table-column label="结束时间" prop="type" >
+      <el-table-column label="结束时间" prop="endTime" >
         <template slot-scope="{row}">
-          {{ JSON.parse(row.type).desc }}
+          {{ parseTime(row.endTime) }}
         </template>
       </el-table-column>
       <el-table-column label="状态" prop="status">
         <template slot-scope="{row}">
-          <el-tag :type="JSON.parse(row.status).value === 'on' ? 'success' : 'info'">{{ JSON.parse(row.status).desc }}</el-tag>
+          <el-tag :type="JSON.parse(row.status).value === 4 || JSON.parse(row.status).value === -1 ? 'info' : 'success'">{{ JSON.parse(row.status).desc }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column fixed="right" align="right" label="操作" width="240">
         <template slot-scope="{row}">
-          <el-button v-hasPermi="['business:marketing:query']" type="text" @click="$router.push({ name: 'MarketingQuery', query: { id: row.couponId } })">查看</el-button>
-          <el-button v-if="JSON.parse(row.status).value === 'init'" v-hasPermi="['business:marketing:edit']" type="text" @click="$router.push({ name: 'MarketingEdit', query: { id: row.couponId } })">编辑</el-button>
-          <el-button v-if="JSON.parse(row.status).value === 'init'" v-hasPermi="['business:marketing:edit']" type="text"  @click="activityTableVisible = true">活动数据</el-button>
-          <el-button v-if="JSON.parse(row.status).value === 'off' || JSON.parse(row.status).value === 'init'" v-hasPermi="['business:coupon:on']" type="text" @click="setStatus(row, 'on')">开启</el-button>
-          <el-button v-if="JSON.parse(row.status).value === 'on'" v-hasPermi="['business:coupon:off']" type="text" @click="setStatus(row, 'off')">关闭</el-button>
-          <el-button v-if="JSON.parse(row.status).value === 'init'" v-hasPermi="['business:coupon:remove']" class="del" type="text" @click="del(row)">删除</el-button>
+          <el-button v-hasPermi="['business:marketing:query']" type="text" @click="$router.push({ name: 'MarketingQuery', query: { id: row.id } })">查看</el-button>
+          <el-button v-if=" JSON.parse(row.status).value === 3 || JSON.parse(row.status).value === 0 || JSON.parse(row.status).value === 2 " v-hasPermi="['business:marketing:edit']" type="text" @click="$router.push({ name: 'MarketingEdit', query: { id: row.id } })">编辑</el-button>
+          <el-button v-if=" JSON.parse(row.status).value === 3 || JSON.parse(row.status).value === 4 || JSON.parse(row.status).value === -1 " v-hasPermi="['business:marketing:edit']" type="text"  @click="activityTableVisible = true, ids = { id:row.id, title:row.title, realNum:row.realNum }">活动数据</el-button>
+          <el-button v-if=" JSON.parse(row.status).value === 0 " v-hasPermi="['business:coupon:on']" type="text" @click="setStatus(row, 'on')">开启</el-button>
+          <el-button v-if=" JSON.parse(row.status).value === 3 || JSON.parse(row.status).value === 2 " v-hasPermi="['business:coupon:off']" type="text" @click="setStatus(row, 'off')">关闭</el-button>
+          <el-button v-if=" JSON.parse(row.status).value === 0 " v-hasPermi="['business:coupon:remove']" class="del" type="text" @click="del(row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
     <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList()" />
-    <activity-table :dialog-visible="activityTableVisible"  @close="activityTableVisible = false" v-if="activityTableVisible"></activity-table>
+    <activity-table :dialog-visible="activityTableVisible" :ids="ids" @close="activityTableVisible = false" v-if="activityTableVisible"></activity-table>
   </div>
 </template>
 <script>
-import { getCouponList, delCoupon, setCouponStatus } from '@/api/business/coupon'
+import { getMarketingList, delMarketing, setMarketingStatus, setMarketingStatusOff, } from '@/api/business/marketing'
 import ActivityTable from "./components/ActivityTable";
 import { accDiv } from '@/utils/util'
 export default {
@@ -93,11 +90,14 @@ export default {
       tableData: [],
       queryParams: {},
       total: 0,
+      ids: {},
       activityTableVisible: false,
+      marketingStatusList: []
     }
   },
   created() {
     this.getList(true)
+    this.getMarketingStatus()
   },
   methods: {
     getList(reset) {
@@ -108,7 +108,7 @@ export default {
       if (reset) {
         this.queryParams = { pageNum: 1, pageSize: 20 }
       }
-      getCouponList('pageNum='+this.queryParams.pageNum + '&pageSize='+this.queryParams.pageSize+'&', this.queryParams).then(res => {
+      getMarketingList('pageNum='+this.queryParams.pageNum + '&pageSize='+this.queryParams.pageSize+'&', this.queryParams).then(res => {
         this.loading = false
         if (res.code === 0) {
           this.tableData = res.rows
@@ -118,30 +118,41 @@ export default {
         this.loading = false
       })
     },
+    getMarketingStatus(){
+      this.getDicts('marketing_status').then(res=>{
+        this.marketingStatusList = res.data
+      })
+    },
     setStatus(item, status) {
-      this.$confirm(`确认${status === 'on' ? '上架' : '下架'}券 “${item.title}” 吗？`, `${status === 'on' ? '上架' : '下架'}券`, {
+      this.$confirm(`确认${status === 'on' ? '开启' : '关闭'}活动 “${item.title}” 吗？`, `${status === 'on' ? '开启' : '关闭'}活动`, {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        setCouponStatus({
-          couponId: item.couponId,
-          status
-        }).then(res => {
-          if (res.code === 0) {
-            this.$message.success('操作已完成！')
-            this.getList()
-          }
-        })
+        if (status === 'on'){
+          setMarketingStatus(item.id).then(res => {
+            if (res.code === 0) {
+              this.$message.success('开启已完成！')
+              this.getList()
+            }
+          })
+        }else{
+          setMarketingStatusOff(item.id).then(res => {
+            if (res.code === 0) {
+              this.$message.success('关闭已完成！')
+              this.getList()
+            }
+          })
+        }
       })
     },
     del(item) {
-      this.$confirm(`确认删除券 “${item.title}” 吗？`, '删除券', {
+      this.$confirm(`确认删除活动 “${item.title}” 吗？`, '删除活动', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        delCoupon(item.couponId).then(res => {
+        delMarketing(item.id).then(res => {
           if (res.code === 0) {
             this.$message.success('操作已完成！')
             this.getList()
@@ -152,7 +163,7 @@ export default {
 
     // 导出订单
     handleExportDraw() {
-      this.$confirm("是否确认导出订单?", "提示", {
+      this.$confirm("是否确认导出活动数据?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
@@ -160,7 +171,7 @@ export default {
         .then(() => {
           this.vloading = this.$loading({
             lock: true,
-            text: "正在导出订单.....",
+            text: "正在导出活动数据.....",
             background: "rgba(0, 0, 0, 0.7)",
           });
           return ticketOrderExport(this.queryParams);