123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479 |
- <!-- -->
- <template>
- <div class="m-container">
- <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 }}元
- 现金实收总额:{{ totalActualAmount }}元
- 余额实收总额:{{ Number((totalExpectAmount - totalActualAmount).toFixed(2)) }}元 -->
- <!-- 营收金额=2-3
- 实收金额=应收总额(包含余额支付)
- 预收金额=充值总额(发生消费,记负数)
- 预收余额=充值总余额 -->
- 购买人数:{{ head.buyNum | moneyFormat }}元<i
- style="width: 10px; display: inline-block"
- ></i>
- 人均购买金额:{{ head.avgBuyAmount | moneyFormat }}元<i
- style="width: 10px; display: inline-block"
- ></i>
- 目标总金额:{{ head.targetAmount | moneyFormat }}元<i
- style="width: 10px; display: inline-block"
- ></i>
- 购买总金额:{{ head.buyAmount | moneyFormat }}元<i
- style="width: 10px; display: inline-block"
- ></i>
- 目标人数:{{ head.targetNum }}人<i
- style="width: 10px; display: inline-block"
- ></i>
- <!-- 购买率:{{ head.buyScale }}%
- <i style="width: 10px; display: inline-block"></i> -->
- 目标达成率:{{ head.targetFinishScale }}%<i
- style="width: 10px; display: inline-block"
- ></i>
- 目标金额达成率:{{ head.targetAmountFinishScale }}%<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="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="totalNum"
- 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.totalNum }}人</div>
- </template>
- </el-table-column> -->
- <!-- <el-table-column
- align="center"
- prop="buyScale"
- 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.buyScale }}%</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
- 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 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 { getCountCloudTeacherList } 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 getCountCloudTeacherList({
- organIds: 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/countCloudTeacherActive",
- fileName: "2021十一会员活动.xls",
- method: "post",
- params: qs.stringify(cleanDeep(obj)),
- },
- "您确定导出会员活动列表?"
- );
- },
- },
- };
- </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>
|