双十一活动

1

src/router/index.js

@@ -454,6 +454,8 @@ export const asyncRoutes = {
   couponDetail:()=>import ('@/views/couponManager/couponDetail'),
   // 优惠券明细
   activeMarketing:()=>import ('@/views/activityScheduling/activeMarketing'),
+  // 2021双11
+  '2021double11List':()=>import ('@/views/activityScheduling/2021double11List'),
 }
 
 export default router

src/store/modules/permission.js

@@ -607,7 +607,7 @@ function setDetailRoute(accessedRoutes) {
             noCache: '1',
             title: '2021十一活动详情',
             belongTopMenu: "/operateManager",
-            activeMenu: '/2021memeberActionManager',
+            activeMenu: '/activeMarketing',
             id: 'xx19'
           }
         },
@@ -624,6 +624,33 @@ function setDetailRoute(accessedRoutes) {
             id: 'xx19'
           }
         },
+        {
+          name: '2021memeberActionManager',
+          path: '/2021memeberActionManager',
+          component: () => import('@/views/2021memeberActionManager'),
+          hidden: true,
+          meta: {
+            noCache: '1',
+            title: '2021会员活动',
+            belongTopMenu: "/operateManager",
+            activeMenu: '/activeMarketing',
+            id: 'xx19'
+          }
+        },
+        {
+          name: '2021double11List',
+          path: '/2021double11List',
+          component: () => import('@/views/activityScheduling/2021double11List'),
+          hidden: true,
+          meta: {
+            noCache: '1',
+            title: '2021双十一活动',
+            belongTopMenu: "/operateManager",
+            activeMenu: '/activeMarketing',
+            id: 'xx19'
+          }
+        },
+
       ])
     }
     if (route.path == '/financialManager') {

src/views/2021memeberActionManager/index.vue

@@ -1,10 +1,14 @@
 <!--  -->
 <template>
   <div class="m-container">
-    <h2>
+    <el-page-header
+      @back="onCancel"
+      :content="'2021十一会员活动'"
+    ></el-page-header>
+    <!-- <h2>
       <div class="squrt"></div>
       2021十一会员活动
-    </h2>
+    </h2> -->
     <div class="m-core">
       <save-form
         :inline="true"
@@ -405,6 +409,10 @@ export default {
         "您确定导出会员活动列表?"
       );
     },
+    onCancel() {
+      this.$store.dispatch("delVisitedViews", this.$route);
+      this.$router.push("/activeMarketing");
+    },
   },
 };
 </script>

src/views/2021memeberActionManager/memberActiveDetail.vue

@@ -1,10 +1,7 @@
 <!--  -->
 <template>
   <div class="m-container">
-    <el-page-header
-      @back="onCancel"
-      :content="title"
-    ></el-page-header>
+    <el-page-header @back="onCancel" :content="title"></el-page-header>
     <div class="m-core">
       <save-form
         :inline="true"
@@ -85,7 +82,7 @@
         <el-form-item>
           <el-button native-type="submit" type="primary">搜索</el-button>
           <el-button native-type="reset" type="danger">重置</el-button>
-          <auth  auths='export/countCloudTeacherActiveDetail'></auth>
+          <auth auths="export/countCloudTeacherActiveDetail"></auth>
           <el-button type="primary" @click="onExport">导出</el-button>
         </el-form-item>
       </save-form>
@@ -124,16 +121,12 @@
             prop="subjectName"
             label="声部"
           ></el-table-column>
-          <el-table-column
-            align="center"
-            prop="currentGradeNum"
-            label="年级"
-          >
-          <template slot-scope="scope">
-            <div>
-              {{gradeList[scope.row.currentGradeNum]}}
-            </div>
-          </template>
+          <el-table-column align="center" prop="currentGradeNum" label="年级">
+            <template slot-scope="scope">
+              <div>
+                {{ gradeList[scope.row.currentGradeNum] }}
+              </div>
+            </template>
           </el-table-column>
           <el-table-column
             align="center"
@@ -173,7 +166,7 @@ import pagination from "@/components/Pagination/index";
 import load from "@/utils/loading";
 import { classStatus, courseViewTypeList } from "@/utils/searchArray";
 import { getType } from "@/api/buildTeam";
-import { getCloudTeacherActiveDetail,getGradeList } from "./api";
+import { getCloudTeacherActiveDetail, getGradeList } from "./api";
 import { Export } from "@/utils/downLoadFile";
 import cleanDeep from "clean-deep";
 import qs from "qs";
@@ -200,8 +193,8 @@ export default {
         page_size: [10, 20, 40, 50], // 选择限制显示条数
       },
       organId: "",
-      title:'',
-      gradeList:{}
+      title: "",
+      gradeList: {},
     };
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -209,16 +202,16 @@ export default {
   //生命周期 - 挂载完成（可以访问DOM元素）
   async mounted() {
     this.organId = this.$route.query.organId;
-    try{
-     const res = await getGradeList({id:this.organId})
-     this.gradeList = res.data
-    }catch(e){
-      console.log(e)
+    try {
+      const res = await getGradeList({ id: this.organId });
+      this.gradeList = res.data;
+    } catch (e) {
+      console.log(e);
     }
     if (this.$route.query.organName) {
-      this.title = `${this.$route.query.organName}分部会员活动详情`
-    }else{
-        this.title = `分部会员活动详情`
+      this.title = `${this.$route.query.organName}分部会员活动详情`;
+    } else {
+      this.title = `分部会员活动详情`;
     }
     getType({ rows: 1000 }).then((res) => {
       if (res.code == 200) {
@@ -259,12 +252,13 @@ export default {
       });
     },
     onCancel() {
-      this.$router.push("/2021memeberActionManager");
+      this.$store.dispatch("delVisitedViews", this.$route);
+      this.$router.push("/operateManager/2021memeberActionManager");
     },
     async onExport() {
       let obj = {
         organIds: this.organId,
-          ...this.searchForm,
+        ...this.searchForm,
       };
       await Export(
         this,

src/views/activityScheduling/2021double11List.vue

@@ -0,0 +1,443 @@
+<!--  -->
+<template>
+  <div class="m-container">
+    <el-page-header
+      @back="onCancel"
+      :content="'202双1十一活动'"
+    ></el-page-header>
+    <!-- <h2>
+      <div class="squrt"></div>
+      2021十一会员活动
+    </h2> -->
+    <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>
+          <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>
+          <auth auths="export/countCloudTeacherActive">
+            <el-button type="primary" @click="onExport">导出</el-button>
+          </auth>
+        </el-form-item>
+      </save-form>
+      <!-- <div style="font-size: 14px; color: #f85043; padding-bottom: 10px"> -->
+        <!-- 应收总金额：{{ totalExpectAmount }}元 &nbsp;&nbsp;&nbsp;&nbsp;
+        现金实收总额：{{ totalActualAmount }}元 &nbsp;&nbsp;&nbsp;&nbsp;
+        余额实收总额：{{ Number((totalExpectAmount - totalActualAmount).toFixed(2)) }}元 -->
+        <!-- 营收金额=2-3
+        实收金额=应收总额（包含余额支付）
+        预收金额=充值总额（发生消费，记负数）
+        预收余额=充值总余额 -->
+        <!-- 总金额：{{ head.buyAmount | moneyFormat }}元<i
+          style="width: 10px; display: inline-block"
+        ></i>
+        目标总金额：{{ head.targetAmount | moneyFormat }}元<i
+          style="width: 10px; display: inline-block"
+        ></i>
+        目标金额达成率：{{ head.targetAmountFinishScale }}%<i
+          style="width: 10px; display: inline-block"
+        ></i>
+
+        购买人数：{{ head.buyNum }}人<i
+          style="width: 10px; display: inline-block"
+        ></i>
+        人均购买金额：{{ head.avgBuyAmount | moneyFormat }}元<i
+          style="width: 10px; display: inline-block"
+        ></i>
+        目标人数：{{ head.targetNum }}人<i
+          style="width: 10px; display: inline-block"
+        ></i>
+        目标达成率：{{ head.targetFinishScale }}%<i
+          style="width: 10px; display: inline-block"
+        ></i> -->
+
+        <!-- 购买总金额：{{ head.buyAmount | moneyFormat }}元<i
+          style="width: 10px; display: inline-block"
+        ></i> -->
+
+        <!-- 购买率：{{ head.buyScale }}%
+        <i style="width: 10px; display: inline-block"></i> -->
+
+        <!-- 总人数：{{ head.totalNum }}元<i
+          style="width: 10px; display: inline-block"
+        ></i> -->
+      </div>
+      <div class="tableWrap">
+        <el-table
+          style="width: 100%"
+          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+          :data="tableList"
+          @sort-change="sortChang"
+
+        >
+        <!--   :default-sort="{
+            prop: 'targetFinishScale',
+            order: 'descending',
+          }" -->
+          <!-- <el-table-column
+            align="center"
+            prop="targetNum"
+            label="排名"
+          ></el-table-column> -->
+          <el-table-column align="center" label="排名" type="index" width="50">
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="organName"
+            label="分部"
+            width="170px"
+          ></el-table-column>
+          <el-table-column align="center" prop="buyAmount" label="总金额">
+            <template slot-scope="scope">
+              <div>{{ scope.row.buyAmount | moneyFormat }}元</div>
+            </template></el-table-column
+          >
+          <el-table-column
+            align="center"
+            prop="targetAmount"
+            sortable="custom"
+            label="目标金额"
+            width="150px"
+          >
+            <template slot-scope="scope">
+              <div>{{ scope.row.targetAmount | moneyFormat }}元</div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="targetAmountFinishScale"
+            sortable="custom"
+            width="170px"
+          >
+            <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.targetAmountFinishScale }}%</div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="buyNum"
+            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.buyNum }}人</div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="avgBuyAmount"
+            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.avgBuyAmount }}元</div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="targetNum"
+            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">
+                    进行中非会员乐团-已上乐团课小于等于4节学员-非本活动购买会员-弦乐声部学员
+                  </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.targetNum }}人</div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="targetFinishScale"
+            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">
+                    该分部实际交易成功人数 / 目标人数*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.targetFinishScale }}%</div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="详情" align="left">
+            <template slot-scope="scope">
+              <div>
+                <el-button type="text" @click="gotoDetail(scope.row)"
+                  >详情</el-button
+                >
+              </div>
+            </template>
+          </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>
+    <qr-code v-model="qrcodeStatus" title="统计二维码" :codeUrl="codeUrl" />
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import { getToken } from "@/utils/auth";
+import pagination from "@/components/Pagination/index";
+import QrCode from "@/components/QrCode/index";
+import { vaildTeachingUrl } from "@/utils/validate";
+import { getDoubleElevenList } from "./api";
+import { Export } from "@/utils/downLoadFile";
+import cleanDeep from "clean-deep";
+import qs from "qs";
+export default {
+  components: { pagination, QrCode },
+  data() {
+    return {
+      searchForm: {
+        organId: null,
+      },
+      searchList: { sort: "targetFinishScale", order: "DESC" },
+      head: {
+        avgBuyAmount: null,
+        buyAmount: null,
+        buyNum: null,
+        buyScale: null,
+        targetAmount: null,
+        targetFinishScale: null,
+        targetNum: null,
+        totalNum: null,
+      },
+      tableList: [],
+      organList: [],
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50], // 选择限制显示条数
+      },
+      qrcodeStatus: false,
+      codeUrl: "",
+    };
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  async mounted() {
+    // 获取分部
+    await this.$store.dispatch("setBranchs");
+    this.init();
+  },
+  methods: {
+    init() {
+      this.getList();
+    },
+    async getList() {
+      try {
+        const res = await getDoubleElevenList({
+          organId: this.searchForm.organId,
+
+        });
+        //   ...this.searchList,
+        this.tableList = res.data.resultList;
+        // this.head = res.data.head;
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    search() {
+      this.rules.page = 1;
+      this.getList();
+    },
+    onReSet() {
+      this.searchForm.organId = null;
+      this.searchList = { sort: "targetFinishScale", order: "DESC" };
+      this.search();
+    },
+    sortChang(val) {
+      const dates = {
+        ascending: "ASC",
+        descending: "DESC",
+      };
+      this.searchList = {};
+      if (val.prop && val.order) {
+        this.searchList = { sort: val.prop, order: dates[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({
+        path: "/operateManager/memberActiveDetail",
+        query: { organId: row.organId, organName: row.organName },
+      });
+    },
+    async onExport() {
+      let obj = {
+        organIds: this.searchForm.organId,
+        ...this.searchList,
+      };
+      await Export(
+        this,
+        {
+          url: "/api-web/export/organDoubleEleven2021Statis",
+          fileName: "2021双十一活动.xls",
+          method: "post",
+          params: qs.stringify(cleanDeep(obj)),
+        },
+        "您确定导出双十一活动列表?"
+      );
+    },
+    onCancel() {
+      this.$store.dispatch("delVisitedViews", this.$route);
+      this.$router.push("/activeMarketing");
+    },
+  },
+};
+</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/activityScheduling/activeMarketing.vue

@@ -178,6 +178,8 @@ export default {
         this.$router.push('/2021memeberActionManager')
 
       } else if (row.id == 2) {
+        this.$router.push('/2021double11List')
+
         console.log("id为2");
       }
     },

src/views/activityScheduling/api.js

@@ -32,4 +32,13 @@ export function marketActivityQueryPage (data) {
         method: 'get',
         params: data
     })
-}
+}
+
+// 双十一活动列表
+export function getDoubleElevenList (data) {
+  return request({
+      url: '/api-web/vipGroupActivity/organDoubleEleven2021Statis',
+      method: 'get',
+      params: data
+  })
+}