活动提交一下

1

src/router/index.js

@@ -46,8 +46,7 @@ export const constantRoutes = [
     path: '/instructions', // 侧边栏
     component: Layout,
     hidden: true,
-    children: [
-    {
+    children: [{
       name: '说明文档',
       path: 'instructions',
       component: () => import('@/layout/components/fullPageIns'),
@@ -78,8 +77,7 @@ export const constantRoutes = [
     path: '/setSilder', // 侧边栏
     component: Layout,
     hidden: true,
-    children: [
-    {
+    children: [{
       name: '提交表单',
       path: 'save-form',
       component: () => import('@/views/save-form-test'),
@@ -237,14 +235,14 @@ export const asyncRoutes = {
   // 全局乐团设置
   globalMusicGroup: () => import('@/views/categroyManager/globalMusicGroup'),
   // 全局产品设置
-  productSystem:()=>import('@/views/categroyManager/productSystem'),
+  productSystem: () => import('@/views/categroyManager/productSystem'),
   // 侧边栏管理
   setSilder: () => import('@/views/setSilder/addSilder'),
   // 乐团老师点名记录
   teamTeacherRecord: () => import('@/views/teamDetail/components/teamTeacherRecord'),
   // 乐团筹备中 报名中
   signupList: () => import('@/views/teamBuild/signupList'),
-  remedy:() => import('@/views/teamBuild/signupList'),
+  remedy: () => import('@/views/teamBuild/signupList'),
   // 乐团筹备设置 (班级 老师 小课)
   teamSeting: () => import('@/views/teamBuild/teamSeting/'),
   //乐团详情
@@ -387,7 +385,7 @@ export const asyncRoutes = {
   // 训练管理
   workManager: () => import('@/views/courseListManager'),
   // 老师管理
- teacherManager: () => import('@/views/courseListManager'),
+  teacherManager: () => import('@/views/courseListManager'),
   // 学生管理
   studentManager: () => import('@/views/courseListManager'),
   // 订单管理
@@ -401,53 +399,54 @@ export const asyncRoutes = {
   // 参数设置
   parameter: () => import('@/views/courseListManager'),
   // 抽奖活动
-  luckyDraw:()=>import('@/views/courseListManager'),
+  luckyDraw: () => import('@/views/courseListManager'),
   // 乐团管理
-  teamMananger:()=>import('@/views/courseListManager'),
+  teamMananger: () => import('@/views/courseListManager'),
   // vip管理
-  vipManager:()=>import('@/views/courseListManager'),
+  vipManager: () => import('@/views/courseListManager'),
   // 网管课管理
-  accompanyManager:()=>import('@/views/courseListManager'),
+  accompanyManager: () => import('@/views/courseListManager'),
   // 乐团管理
   // 评论管理
-  commentManagerWrap:()=>import('@/views/courseListManager'),
+  commentManagerWrap: () => import('@/views/courseListManager'),
   // 课外训练
-  afterSchoolManagerWrap:()=>import('@/views/courseListManager'),
+  afterSchoolManagerWrap: () => import('@/views/courseListManager'),
   //
-  serverIndexManager:()=>import('@/views/courseListManager'),
-  reportFormCenter:()=>import('@/views/courseListManager'),
+  serverIndexManager: () => import('@/views/courseListManager'),
+  reportFormCenter: () => import('@/views/courseListManager'),
   // 乐器维护
-  musicalManager:()=>import('@/views/musicalManager'),
+  musicalManager: () => import('@/views/musicalManager'),
   // 服务指标明细
-  branchActiveManager:()=>import('@/views/courseListManager'),
+  branchActiveManager: () => import('@/views/courseListManager'),
   // vip活动管理
-  vipActiveManager:()=>import('@/views/courseListManager'),
+  vipActiveManager: () => import('@/views/courseListManager'),
   // 乐团缴费
-  teamPayInfo:()=>import('@/views/courseListManager'),
-  serverDetail:()=>import('@/views/serverDetail'),
+  teamPayInfo: () => import('@/views/courseListManager'),
+  serverDetail: () => import('@/views/serverDetail'),
   // 未在班级学员
-  notClassStudent:()=>import('@/views/main/notClassStudent'),
+  notClassStudent: () => import('@/views/main/notClassStudent'),
   // 报表中心 下载列表
-  downList:()=>import('@/views/reportForm/downList'),
+  downList: () => import('@/views/reportForm/downList'),
   // 乐器置换
-  reaplceMusicPlayer:()=>import('@/views/reaplceMusicPlayer'),
-  answerList:()=>import('@/views/reaplceMusicPlayer/answerList'),
+  reaplceMusicPlayer: () => import('@/views/reaplceMusicPlayer'),
+  answerList: () => import('@/views/reaplceMusicPlayer/answerList'),
   // 问卷管理
   setQuestions: () => import('@/views/setQuestions'),
   questionOperation: () => import('@/views/setQuestions/operation'),
   // 21暑期考级
-  childrensDay:()=>import('@/views/childrensDay'),
+  childrensDay: () => import('@/views/childrensDay'),
   // 考级详情
-  childrensdayDetail:()=>import('@/views/childrensDay/detail'),
+  childrensdayDetail: () => import('@/views/childrensDay/detail'),
   // 异常数据
-  indexErrDataRecord:()=>import('@/views/indexErrDataRecord'),
-  dictionaryManager:()=>import('@/views/dictionaryManager'),
+  indexErrDataRecord: () => import('@/views/indexErrDataRecord'),
+  dictionaryManager: () => import('@/views/dictionaryManager'),
   // 会员排课列表
-  memberClassList:()=>import('@/views/teamDetail/components/memberClassList'),
+  memberClassList: () => import('@/views/teamDetail/components/memberClassList'),
   // 设备号管理
-  deviceNum:()=>import('@/views/deviceNumManager'),
+  deviceNum: () => import('@/views/deviceNumManager'),
   // 乐团会员列表
-  teamMemberList:()=>import('@/views/studentManager/memberList')
+  teamMemberList: () => import('@/views/studentManager/memberList'),
+  memeberActionManager: () => import('@/views/2021memeberActionManager'),
 }
 
 export default router

src/store/modules/permission.js

@@ -585,7 +585,19 @@ function setDetailRoute(accessedRoutes) {
             id: 'xx19'
           }
         },
-        // /operateManager/setQuestions /questionOperation   operateManager
+        {
+          name: 'memberActiveDetail',
+          path: 'memberActiveDetail',
+          component: () => import('@/views/2021memeberActionManager/memberActiveDetail'),
+          hidden: true,
+          meta: {
+            noCache: '1',
+            title: '2021十一活动详情',
+            belongTopMenu: "/operateManager",
+            activeMenu: '/2021memeberActionManager',
+            id: 'xx19'
+          }
+        },
       ])
     }
     if (route.path == '/financialManager') {

src/views/2021memeberActionManager/index.vue

@@ -18,6 +18,7 @@
             style="width: 180px !important"
             v-model.trim="searchForm.organId"
             filterable
+            clearable
             placeholder="请选择分部"
           >
             <el-option
@@ -32,29 +33,217 @@
           <el-button native-type="submit" type="primary">搜索</el-button>
           <el-button native-type="reset" type="danger">重置</el-button>
         </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onCreateQRCode">H5统计链接</el-button>
+        </el-form-item>
+            <el-form-item>
+          <el-button type="primary">导出</el-button>
+        </el-form-item>
       </save-form>
       <div class="tableWrap">
         <el-table
           style="width: 100%"
           :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
           :data="tableList"
+          @sort-change="sortChang"
+          :default-sort="{
+            prop: 'cloudStudyUseStudentDuty',
+            order: 'descending',
+          }"
         >
           <el-table-column
             align="center"
             prop="studentId"
+            label="排名"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="studentId"
             label="分部"
           ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="cloudStudyUseStudentDuty"
+            sortable="custom"
+            width="150px"
+          >
+            <template slot="header" slot-scope="slot">
+              <div class="titleCell">
+                <span>购买人数</span>
+                <el-tooltip placement="top" popper-class="mTooltip">
+                  <div slot="content">本次活动交易成功总人数（去重）</div>
+                  <i
+                    class="el-icon-question micon el-tooltip"
+                    style="
+                      font-size: 18px;
+                      color: #f56c6c;
+                      top: 2px;
+                      position: relative;
+                    "
+                  ></i>
+                </el-tooltip>
+              </div>
+            </template>
+            <template slot-scope="scope">
+              <div>{{ scope.row.cloudStudyUseStudentDuty }}人</div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="cloudStudyUseStudentDuty"
+            sortable="custom"
+            width="150px"
+          >
+            <template slot="header" slot-scope="slot">
+              <div class="titleCell">
+                <span>人均购买金额</span>
+                <el-tooltip placement="top" popper-class="mTooltip">
+                  <div slot="content">总金额 / 购买人数</div>
+                  <i
+                    class="el-icon-question micon el-tooltip"
+                    style="
+                      font-size: 18px;
+                      color: #f56c6c;
+                      top: 2px;
+                      position: relative;
+                    "
+                  ></i>
+                </el-tooltip>
+              </div>
+            </template>
+            <template slot-scope="scope">
+              <div>{{ scope.row.cloudStudyUseStudentDuty }}元</div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="cloudStudyUseStudentDuty"
+            sortable="custom"
+            width="140px"
+          >
+            <template slot="header" slot-scope="slot">
+              <div class="titleCell">
+                <span>总人数</span>
+                <el-tooltip placement="top" popper-class="mTooltip">
+                  <div slot="content">
+                    进行中乐团在读学员+VIP、网管有课学员总数（除弦乐声部、去重）
+                  </div>
+                  <i
+                    class="el-icon-question micon el-tooltip"
+                    style="
+                      font-size: 18px;
+                      color: #f56c6c;
+                      top: 2px;
+                      position: relative;
+                    "
+                  ></i>
+                </el-tooltip>
+              </div>
+            </template>
+            <template slot-scope="scope">
+              <div>{{ scope.row.cloudStudyUseStudentDuty }}人</div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="cloudStudyUseStudentDuty"
+            sortable="custom"
+            width="140px"
+          >
+            <template slot="header" slot-scope="slot">
+              <div class="titleCell">
+                <span>购买率</span>
+                <el-tooltip placement="top" popper-class="mTooltip">
+                  <div slot="content">实际交易成功人数 / 目标购买人数*100%</div>
+                  <i
+                    class="el-icon-question micon el-tooltip"
+                    style="
+                      font-size: 18px;
+                      color: #f56c6c;
+                      top: 2px;
+                      position: relative;
+                    "
+                  ></i>
+                </el-tooltip>
+              </div>
+            </template>
+            <template slot-scope="scope">
+              <div>{{ scope.row.cloudStudyUseStudentDuty }}%</div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="cloudStudyUseStudentDuty"
+            sortable="custom"
+            width="140px"
+          >
+            <template slot="header" slot-scope="slot">
+              <div class="titleCell">
+                <span>目标人数</span>
+                <el-tooltip placement="top" popper-class="mTooltip">
+                  <div slot="content">各分部目标人数之和</div>
+                  <i
+                    class="el-icon-question micon el-tooltip"
+                    style="
+                      font-size: 18px;
+                      color: #f56c6c;
+                      top: 2px;
+                      position: relative;
+                    "
+                  ></i>
+                </el-tooltip>
+              </div>
+            </template>
+            <template slot-scope="scope">
+              <div>{{ scope.row.cloudStudyUseStudentDuty }}人</div>
+            </template>
+          </el-table-column>
+                   <el-table-column
+            align="center"
+            prop="cloudStudyUseStudentDuty"
+            sortable="custom"
+            width="140px"
+          >
+            <template slot="header" slot-scope="slot">
+              <div class="titleCell">
+                <span>目标达成率</span>
+                <el-tooltip placement="top" popper-class="mTooltip">
+                  <div slot="content">各分部目标人数之和</div>
+                  <i
+                    class="el-icon-question micon el-tooltip"
+                    style="
+                      font-size: 18px;
+                      color: #f56c6c;
+                      top: 2px;
+                      position: relative;
+                    "
+                  ></i>
+                </el-tooltip>
+              </div>
+            </template>
+            <template slot-scope="scope">
+              <div>{{ scope.row.cloudStudyUseStudentDuty }}%</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="详情"  align="center">
+              <template slot-scope="scope">
+                <div>
+                  <el-button type="text" @click="gotoDetail(scope.row)">详情</el-button>
+                </div>
+              </template>
+          </el-table-column>
         </el-table>
-        <pagination
+        <!-- <pagination
           sync
           :total.sync="rules.total"
           :page.sync="rules.page"
           :limit.sync="rules.limit"
           :page-sizes="rules.page_size"
           @pagination="getList"
-        />
+        /> -->
       </div>
     </div>
+    <qr-code v-model="qrcodeStatus" title="统计二维码" :codeUrl="codeUrl" />
   </div>
 </template>
 
@@ -62,16 +251,17 @@
 import axios from "axios";
 import { getToken } from "@/utils/auth";
 import pagination from "@/components/Pagination/index";
-import load from "@/utils/loading";
+import QrCode from "@/components/QrCode/index";
+import { vaildTeachingUrl } from "@/utils/validate";
 export default {
-  components: { pagination },
+  components: { pagination,QrCode },
   data() {
     return {
       searchForm: {
         search: null,
       },
 
-      tableList: [],
+      tableList: [{}],
       organList: [],
       rules: {
         // 分页规则
@@ -80,14 +270,16 @@ export default {
         total: 0, // 总条数
         page_size: [10, 20, 40, 50], // 选择限制显示条数
       },
+       qrcodeStatus: false,
+       codeUrl:''
     };
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
+  async mounted() {
     // 获取分部
-
+    await this.$store.dispatch("setBranchs");
     this.init();
   },
   methods: {
@@ -98,8 +290,53 @@ export default {
       this.getList();
     },
     onReSet() {},
+    sortChang(val) {
+      const dates = {
+        ascending: "ASC",
+        descending: "DESC",
+      };
+      this.searchList = {};
+      if (val.prop && val.order) {
+        this.searchList[val.prop] = dates[val.order];
+      }
+      this.rules.page = 1;
+      this.getList();
+    },
+        onCreateQRCode(row) {
+      // 生成报名二维码
+      this.qrcodeStatus = true;
+      this.codeUrl =
+        vaildTeachingUrl() +
+        "/#/statisticOctober1st"
+    },
+    gotoDetail(row){
+      // console.log('跳转详情')
+      this.$router.push('/operateManager/memberActiveDetail')
+    }
   },
 };
 </script>
 <style lang='scss' scoped>
+.titleCell {
+  display: inline-block;
+}
+.tableWrap {
+  margin-top: 20px;
+}
+  .qrcode {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    img {
+      width: 200px;
+      height: 200px;
+      margin: 0 auto;
+    }
+  }
+  .code-url {
+    font-size: 18px;
+    text-align: center;
+    padding: 15px 15px 0 15px;
+  }
+
 </style>

src/views/2021memeberActionManager/memberActiveDetail.vue

@@ -0,0 +1,145 @@
+<!--  -->
+<template>
+  <div class="m-container">
+    <el-page-header
+      @back="onCancel"
+      content="2021十一会员活动"
+    ></el-page-header>
+    <div class="m-core">
+      <save-form
+        :inline="true"
+        :model="searchForm"
+        @submit="search"
+        @reset="onReSet"
+      >
+        <el-form-item prop="organId">
+          <el-select
+            class="multiple"
+            style="width: 180px !important"
+            v-model.trim="searchForm.organId"
+            filterable
+            clearable
+            placeholder="请选择分部"
+          >
+            <el-option
+              v-for="(item, index) in selects.branchs"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="courseViewType">
+          <el-select
+            v-model.trim="searchForm.courseViewType"
+            filterable
+            clearable
+            placeholder="请选择乐团模式"
+          >
+            <el-option
+              :label="item.label"
+              :value="Number(item.value)"
+              v-for="item in courseViewTypeList"
+              :key="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+                <el-form-item prop="subjectId">
+          <el-select
+            class="multiple"
+            style="width: 180px !important"
+            v-model.trim="searchForm.subjectId"
+            filterable
+            clearable
+            placeholder="请选择声部"
+          >
+            <el-option
+              v-for="(item, index) in selects.subjects"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button native-type="submit" type="primary">搜索</el-button>
+          <el-button native-type="reset" type="danger">重置</el-button>
+        </el-form-item>
+      </save-form>
+      <div class="tableWrap">
+        <el-table
+          style="width: 100%"
+          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+          :data="tableList"
+        >
+          <el-table-column
+            align="center"
+            prop="studentId"
+            label="分部"
+          ></el-table-column>
+        </el-table>
+        <pagination
+          sync
+          :total.sync="rules.total"
+          :page.sync="rules.page"
+          :limit.sync="rules.limit"
+          :page-sizes="rules.page_size"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import { getToken } from "@/utils/auth";
+import pagination from "@/components/Pagination/index";
+import load from "@/utils/loading";
+import { classStatus, courseViewTypeList } from "@/utils/searchArray";
+export default {
+  components: { pagination },
+  data() {
+    return {
+      searchForm: {
+        search: null,
+      },
+      courseViewTypeList,
+      tableList: [],
+      organList: [],
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50], // 选择限制显示条数
+      },
+    };
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  async mounted() {
+    // 获取分部
+
+    await this.$store.dispatch("setBranchs");
+    await this.$store.dispatch("setSubjects");
+
+    this.init();
+  },
+  methods: {
+    init() {},
+    getList() {},
+    search() {
+      this.rules.page = 1;
+      this.getList();
+    },
+    onReSet() {},
+    onCancel() {
+      this.$router.push("/2021memeberActionManager");
+    },
+  },
+};
+</script>
+<style lang='scss' scoped>
+</style>