抽奖活动模块新增查看

src/router/index.js

@@ -274,7 +274,7 @@ export const constantRoutes = [
       },
       {
         path: 'query',
-        component: (resolve) => require(['@/views/business/marketing/add'], resolve),
+        component: (resolve) => require(['@/views/business/marketing/detail'], resolve),
         name: 'MarketingQuery',
         meta: { title: '抽奖活动详情' , activeMenu: '/marketing/marketing', noCache: true }
       }

src/views/business/marketing/add.vue

@@ -5,13 +5,13 @@
       <el-row :gutter="40" style="width: 600px">
         <el-col :span="23">
           <el-form-item label="活动名称:" prop="title">
-            <el-input v-model="addData.title" placeholder="输入活动名称" :readonly="readonly"/>
+            <el-input v-model="addData.title" placeholder="输入活动名称"/>
           </el-form-item>
         </el-col>
         <el-col :span="23">
           <el-form-item label="活动封面:" prop="picUrl">
             <image-upload
-              v-model="marketingPicUrl" :readonly="readonly"
+              v-model="marketingPicUrl"
               :limit="1"
               :file-size="0.2"
               @change="$refs.addItem.validateField(['picUrl'])"
@@ -20,20 +20,20 @@
         </el-col>
         <el-col>
           <el-form-item label="活动日期:" prop="dateValue">
-            <el-date-picker value-format="timestamp" v-model="addData.dateValue" type="datetimerange"  :readonly="readonly"
+            <el-date-picker value-format="timestamp" v-model="addData.dateValue" type="datetimerange"
                             range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"/>
           </el-form-item>
         </el-col>
         <el-col :span="16">
           <el-form-item label="初始用户数:">
-            <el-input v-model="addData.fakeNum" :readonly="readonly"/>
+            <el-input v-model="addData.fakeNum"/>
           </el-form-item>
         </el-col>
         <el-col :span="23">
           <el-form-item label="抽奖码获取方式:" prop="type">
             <el-col>邀请用户助力</el-col>
             <el-col>用户助力条件：
-              <el-radio-group v-model="labelRadio" :disabled="readonly">
+              <el-radio-group v-model="labelRadio" >
                 <el-radio :label="1">每个账号终身仅助力一次</el-radio>
                 <el-radio :label="2" disabled>无</el-radio>
               </el-radio-group>
@@ -63,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()" v-if="!readonly">保存</el-button>
+        <el-button type="primary" @click="update()">保存</el-button>
       </el-col>
     </el-row>
 
@@ -120,7 +120,6 @@ export default {
         picUrl: [{required: true, message: '请上传活动封面', trigger: 'change'}],
         dateValue: [{required: true, message: '请设置活动日期', trigger: 'change'}]
       },
-      readonly: this.$route.name === 'MarketingQuery',
       // 奖级列表
       awardsList: [
         {

src/views/business/marketing/detail.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="app-container goods-add">
+    <el-divider content-position="left">基础信息</el-divider>
+    <el-form ref="addItem"  :model="addData" label-width="120px">
+      <el-row :gutter="40" style="width: 600px">
+        <el-col :span="23">
+          <el-form-item label="活动名称:" prop="title">
+            <el-input v-model="addData.title" placeholder="输入活动名称" readonly />
+          </el-form-item>
+        </el-col>
+        <el-col :span="23">
+          <el-form-item label="活动封面:" >
+            <el-image
+              style="width: 110px;"
+              :src="addData && addData.picUrl"
+              :preview-src-list="[addData && addData.picUrl]"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col>
+          <el-form-item label="活动日期:" prop="dateValue">
+            <el-date-picker value-format="timestamp" v-model="addData.dateValue" type="datetimerange" readonly
+                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="16">
+          <el-form-item label="初始用户数:">
+            <el-input v-model="addData.fakeNum" readonly />
+          </el-form-item>
+        </el-col>
+        <el-col :span="23">
+          <el-form-item label="抽奖码获取方式:" prop="type">
+            <el-col>邀请用户助力</el-col>
+            <el-col>用户助力条件：
+              <el-radio-group v-model="labelRadio" >
+                <el-radio :label="1">每个账号终身仅助力一次</el-radio>
+                <el-radio :label="2" disabled>无</el-radio>
+              </el-radio-group>
+            </el-col>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-divider content-position="left">奖品设置</el-divider>
+      <el-row>
+        <el-col :span="22">
+          <el-form-item label="">
+            <!-- 奖级列表 -->
+            <div class="prize" v-for="(item, index) in awardsList" :key="index">
+              <div class="prize-top">
+                <div>奖级：{{ item.name }}</div>
+                <div>名额：{{item.quantity}}</div>
+                <div>内部名额：{{item.insideNum}}</div>
+              </div>
+              <div class="prize-table">
+                <el-table :data="item.prizeList" class="el-table">
+                  <el-table-column label="奖品图片" align="center">
+                    <template slot-scope="scope">
+                      <el-image
+                        style="width: 70px; height: 70px"
+                        :src="scope.row.picUrl"
+                        :preview-src-list="[scope.row.picUrl]"
+                      >
+                      </el-image>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="奖品名称" prop="title" align="center" />
+                  <el-table-column label="奖品类型" align="center">
+                    <template slot-scope="scope">
+                      <div v-if="scope.row.prizeType == 'goods'">商品</div>
+                      <div v-if="scope.row.prizeType == 'coupon'">券</div>
+                      <div v-if="scope.row.prizeType == 'coupon_pkg'">券包</div>
+                      <div v-if="scope.row.prizeType == 'coin'">盲豆</div>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </div>
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-divider content-position="left">活动详情</el-divider>
+      <el-row>
+        <el-col :span="22">
+          <el-form-item label="" prop="description">
+            <div v-html="addData.description"></div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <el-row>
+      <el-col :span="24" style="text-align: center">
+        <el-button type="info" @click="$router.replace('/marketing/marketing')">取消</el-button>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { publicFileGetUrl } from "@/api/common";
+import {getMarketingDetail, addMarketing} from '@/api/business/marketing'
+import Upload from '@/components/DragImageUpload'
+import WangEditor from '@/components/WangEditor'
+
+export default {
+  name: "add",
+  components: {
+    Upload,
+    WangEditor,
+  },
+  data() {
+    return {
+      id: this.$route.query.id,
+      addData: {
+        picUrl: '',//活动主图
+        startTime: '',//开始时间
+        endTime: '',//结束时间
+        fakeNum: 0,//初始用户数
+        description: '',//活动详情
+        awardsList: [],//奖级列表
+      },
+      labelRadio: 1,//单选框
+
+      // 奖级列表
+      awardsList: [],
+      dateValue: [],//开始与结束日期
+    }
+  },
+  computed: {
+  },
+  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: publicFileGetUrl + picUrl, fakeNum, realNum, description, awardsList, id }
+        if(awardsList){
+          awardsList.forEach((item) => {
+            item.prizeList.forEach((ele) => {
+              (ele.picUrl = publicFileGetUrl + ele.picUrl.split(',')[0]),
+                (ele.prizeType = JSON.parse(ele.prizeType).value);
+            });
+          });
+          this.awardsList = awardsList
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.goods-add {
+  .tip {
+    font-size: 12px;
+    color: #999;
+  }
+
+  .el-divider {
+    .is-left {
+      color: #409EFF;
+      font-size: 20px;
+      font-weight: bolder;
+      left: 10px;
+    }
+  }
+}
+.prize {
+  width: 1000px;
+  margin-bottom: 50px;
+  background: #f9f9f9;
+  border: 1px solid #bbbbbb;
+  font-size: 14px;
+  &-top {
+    padding: 10px 20px;
+    margin-bottom: 10px;
+    display: flex;
+    align-content: center;
+    justify-content: space-around;
+    border-bottom: 1px solid #bbbbbb;
+    div {
+      line-height: 36px;
+    }
+  }
+  &-btn {
+    border-top: 1px solid #bbbbbb;
+    padding: 10px;
+  }
+}
+</style>

src/views/business/marketing/index.vue

@@ -63,10 +63,10 @@
         <template slot-scope="{row}">
           <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>
+          <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:queryData']" 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:marketing: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:marketing:off']" type="text" @click="setStatus(row, 'off')">关闭</el-button>
+          <el-button v-if=" JSON.parse(row.status).value === 0 " v-hasPermi="['business:marketing:remove']" class="del" type="text" @click="del(row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>