index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479
  1. <!-- -->
  2. <template>
  3. <div class="m-container">
  4. <h2>
  5. <div class="squrt"></div>
  6. 2021十一会员活动
  7. </h2>
  8. <div class="m-core">
  9. <save-form
  10. :inline="true"
  11. :model="searchForm"
  12. @submit="search"
  13. @reset="onReSet"
  14. >
  15. <el-form-item prop="organId">
  16. <el-select
  17. class="multiple"
  18. style="width: 180px !important"
  19. v-model.trim="searchForm.organId"
  20. filterable
  21. clearable
  22. placeholder="请选择分部"
  23. >
  24. <el-option
  25. v-for="(item, index) in selects.branchs"
  26. :key="index"
  27. :label="item.name"
  28. :value="item.id"
  29. ></el-option>
  30. </el-select>
  31. </el-form-item>
  32. <el-form-item>
  33. <el-button native-type="submit" type="primary">搜索</el-button>
  34. <el-button native-type="reset" type="danger">重置</el-button>
  35. </el-form-item>
  36. <el-form-item>
  37. <el-button type="primary" @click="onCreateQRCode"
  38. >H5统计链接</el-button
  39. >
  40. </el-form-item>
  41. <el-form-item>
  42. <auth auths="export/countCloudTeacherActive">
  43. <el-button type="primary" @click="onExport">导出</el-button>
  44. </auth>
  45. </el-form-item>
  46. </save-form>
  47. <div style="font-size: 14px; color: #f85043; padding-bottom: 10px">
  48. <!-- 应收总金额:{{ totalExpectAmount }}元 &nbsp;&nbsp;&nbsp;&nbsp;
  49. 现金实收总额:{{ totalActualAmount }}元 &nbsp;&nbsp;&nbsp;&nbsp;
  50. 余额实收总额:{{ Number((totalExpectAmount - totalActualAmount).toFixed(2)) }}元 -->
  51. <!-- 营收金额=2-3
  52. 实收金额=应收总额(包含余额支付)
  53. 预收金额=充值总额(发生消费,记负数)
  54. 预收余额=充值总余额 -->
  55. 购买人数:{{ head.buyNum | moneyFormat }}元<i
  56. style="width: 10px; display: inline-block"
  57. ></i>
  58. 人均购买金额:{{ head.avgBuyAmount | moneyFormat }}元<i
  59. style="width: 10px; display: inline-block"
  60. ></i>
  61. 目标总金额:{{ head.targetAmount | moneyFormat }}元<i
  62. style="width: 10px; display: inline-block"
  63. ></i>
  64. 购买总金额:{{ head.buyAmount | moneyFormat }}元<i
  65. style="width: 10px; display: inline-block"
  66. ></i>
  67. 目标人数:{{ head.targetNum }}人<i
  68. style="width: 10px; display: inline-block"
  69. ></i>
  70. <!-- 购买率:{{ head.buyScale }}%
  71. <i style="width: 10px; display: inline-block"></i> -->
  72. 目标达成率:{{ head.targetFinishScale }}%<i
  73. style="width: 10px; display: inline-block"
  74. ></i>
  75. 目标金额达成率:{{ head.targetAmountFinishScale }}%<i
  76. style="width: 10px; display: inline-block"
  77. ></i>
  78. <!-- 总人数:{{ head.totalNum }}元<i
  79. style="width: 10px; display: inline-block"
  80. ></i> -->
  81. </div>
  82. <div class="tableWrap">
  83. <el-table
  84. style="width: 100%"
  85. :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
  86. :data="tableList"
  87. @sort-change="sortChang"
  88. :default-sort="{
  89. prop: 'targetFinishScale',
  90. order: 'descending',
  91. }"
  92. >
  93. <!-- <el-table-column
  94. align="center"
  95. prop="targetNum"
  96. label="排名"
  97. ></el-table-column> -->
  98. <el-table-column align="center" label="排名" type="index" width="50">
  99. </el-table-column>
  100. <el-table-column
  101. align="center"
  102. prop="organName"
  103. label="分部"
  104. width="170px"
  105. ></el-table-column>
  106. <el-table-column
  107. align="center"
  108. prop="buyNum"
  109. sortable="custom"
  110. width="150px"
  111. >
  112. <template slot="header" slot-scope="slot">
  113. <div class="titleCell">
  114. <span>购买人数</span>
  115. <el-tooltip placement="top" popper-class="mTooltip">
  116. <div slot="content">本次活动交易成功总人数(去重)</div>
  117. <i
  118. class="el-icon-question micon el-tooltip"
  119. style="
  120. font-size: 18px;
  121. color: #f56c6c;
  122. top: 2px;
  123. position: relative;
  124. "
  125. ></i>
  126. </el-tooltip>
  127. </div>
  128. </template>
  129. <template slot-scope="scope">
  130. <div>{{ scope.row.buyNum }}人</div>
  131. </template>
  132. </el-table-column>
  133. <el-table-column
  134. align="center"
  135. prop="avgBuyAmount"
  136. sortable="custom"
  137. width="150px"
  138. >
  139. <template slot="header" slot-scope="slot">
  140. <div class="titleCell">
  141. <span>人均购买金额</span>
  142. <el-tooltip placement="top" popper-class="mTooltip">
  143. <div slot="content">总金额 / 购买人数</div>
  144. <i
  145. class="el-icon-question micon el-tooltip"
  146. style="
  147. font-size: 18px;
  148. color: #f56c6c;
  149. top: 2px;
  150. position: relative;
  151. "
  152. ></i>
  153. </el-tooltip>
  154. </div>
  155. </template>
  156. <template slot-scope="scope">
  157. <div>{{ scope.row.avgBuyAmount }}元</div>
  158. </template>
  159. </el-table-column>
  160. <!-- <el-table-column
  161. align="center"
  162. prop="totalNum"
  163. sortable="custom"
  164. width="140px"
  165. >
  166. <template slot="header" slot-scope="slot">
  167. <div class="titleCell">
  168. <span>总人数</span>
  169. <el-tooltip placement="top" popper-class="mTooltip">
  170. <div slot="content">
  171. 进行中乐团在读学员+VIP、网管有课学员总数(除弦乐声部、去重)
  172. </div>
  173. <i
  174. class="el-icon-question micon el-tooltip"
  175. style="
  176. font-size: 18px;
  177. color: #f56c6c;
  178. top: 2px;
  179. position: relative;
  180. "
  181. ></i>
  182. </el-tooltip>
  183. </div>
  184. </template>
  185. <template slot-scope="scope">
  186. <div>{{ scope.row.totalNum }}人</div>
  187. </template>
  188. </el-table-column> -->
  189. <!-- <el-table-column
  190. align="center"
  191. prop="buyScale"
  192. sortable="custom"
  193. width="150px"
  194. >
  195. <template slot="header" slot-scope="slot">
  196. <div class="titleCell">
  197. <span>购买率</span>
  198. <el-tooltip placement="top" popper-class="mTooltip">
  199. <div slot="content">实际交易成功人数 / 目标购买人数*100%</div>
  200. <i
  201. class="el-icon-question micon el-tooltip"
  202. style="
  203. font-size: 18px;
  204. color: #f56c6c;
  205. top: 2px;
  206. position: relative;
  207. "
  208. ></i>
  209. </el-tooltip>
  210. </div>
  211. </template>
  212. <template slot-scope="scope">
  213. <div>{{ scope.row.buyScale }}%</div>
  214. </template>
  215. </el-table-column> -->
  216. <el-table-column
  217. align="center"
  218. prop="targetNum"
  219. sortable="custom"
  220. width="150px"
  221. >
  222. <template slot="header" slot-scope="slot">
  223. <div class="titleCell">
  224. <span>目标人数</span>
  225. <el-tooltip placement="top" popper-class="mTooltip">
  226. <div slot="content">
  227. 进行中非会员乐团-已上乐团课小于等于4节学员-非本活动购买会员-弦乐声部学员
  228. </div>
  229. <i
  230. class="el-icon-question micon el-tooltip"
  231. style="
  232. font-size: 18px;
  233. color: #f56c6c;
  234. top: 2px;
  235. position: relative;
  236. "
  237. ></i>
  238. </el-tooltip>
  239. </div>
  240. </template>
  241. <template slot-scope="scope">
  242. <div>{{ scope.row.targetNum }}人</div>
  243. </template>
  244. </el-table-column>
  245. <el-table-column
  246. align="center"
  247. prop="targetFinishScale"
  248. sortable="custom"
  249. width="150px"
  250. >
  251. <template slot="header" slot-scope="slot">
  252. <div class="titleCell">
  253. <span>目标达成率</span>
  254. <el-tooltip placement="top" popper-class="mTooltip">
  255. <div slot="content">
  256. 该分部实际交易成功人数 / 目标人数*100%
  257. </div>
  258. <i
  259. class="el-icon-question micon el-tooltip"
  260. style="
  261. font-size: 18px;
  262. color: #f56c6c;
  263. top: 2px;
  264. position: relative;
  265. "
  266. ></i>
  267. </el-tooltip>
  268. </div>
  269. </template>
  270. <template slot-scope="scope">
  271. <div>{{ scope.row.targetFinishScale }}%</div>
  272. </template>
  273. </el-table-column>
  274. <el-table-column
  275. align="center"
  276. prop="targetAmount"
  277. sortable="custom"
  278. label="目标金额"
  279. width="150px"
  280. >
  281. <template slot-scope="scope">
  282. <div>{{ scope.row.targetAmount | moneyFormat }}元</div>
  283. </template>
  284. </el-table-column>
  285. <el-table-column
  286. align="center"
  287. prop="targetAmountFinishScale"
  288. sortable="custom"
  289. width="170px"
  290. >
  291. <template slot="header" slot-scope="slot">
  292. <div class="titleCell">
  293. <span>目标达金额成率</span>
  294. <el-tooltip placement="top" popper-class="mTooltip">
  295. <div slot="content">总成交额/目标总额*100%</div>
  296. <i
  297. class="el-icon-question micon el-tooltip"
  298. style="
  299. font-size: 18px;
  300. color: #f56c6c;
  301. top: 2px;
  302. position: relative;
  303. "
  304. ></i>
  305. </el-tooltip>
  306. </div>
  307. </template>
  308. <template slot-scope="scope">
  309. <div>{{ scope.row.targetAmountFinishScale }}%</div>
  310. </template>
  311. </el-table-column>
  312. <el-table-column label="详情" align="left">
  313. <template slot-scope="scope">
  314. <div>
  315. <el-button type="text" @click="gotoDetail(scope.row)"
  316. >详情</el-button
  317. >
  318. </div>
  319. </template>
  320. </el-table-column>
  321. </el-table>
  322. <!-- <pagination
  323. sync
  324. :total.sync="rules.total"
  325. :page.sync="rules.page"
  326. :limit.sync="rules.limit"
  327. :page-sizes="rules.page_size"
  328. @pagination="getList"
  329. /> -->
  330. </div>
  331. </div>
  332. <qr-code v-model="qrcodeStatus" title="统计二维码" :codeUrl="codeUrl" />
  333. </div>
  334. </template>
  335. <script>
  336. import axios from "axios";
  337. import { getToken } from "@/utils/auth";
  338. import pagination from "@/components/Pagination/index";
  339. import QrCode from "@/components/QrCode/index";
  340. import { vaildTeachingUrl } from "@/utils/validate";
  341. import { getCountCloudTeacherList } from "./api";
  342. import { Export } from "@/utils/downLoadFile";
  343. import cleanDeep from "clean-deep";
  344. import qs from "qs";
  345. export default {
  346. components: { pagination, QrCode },
  347. data() {
  348. return {
  349. searchForm: {
  350. organId: null,
  351. },
  352. searchList: { sort: "targetFinishScale", order: "DESC" },
  353. head: {
  354. avgBuyAmount: null,
  355. buyAmount: null,
  356. buyNum: null,
  357. buyScale: null,
  358. targetAmount: null,
  359. targetFinishScale: null,
  360. targetNum: null,
  361. totalNum: null,
  362. },
  363. tableList: [],
  364. organList: [],
  365. rules: {
  366. // 分页规则
  367. limit: 10, // 限制显示条数
  368. page: 1, // 当前页
  369. total: 0, // 总条数
  370. page_size: [10, 20, 40, 50], // 选择限制显示条数
  371. },
  372. qrcodeStatus: false,
  373. codeUrl: "",
  374. };
  375. },
  376. //生命周期 - 创建完成(可以访问当前this实例)
  377. created() {},
  378. //生命周期 - 挂载完成(可以访问DOM元素)
  379. async mounted() {
  380. // 获取分部
  381. await this.$store.dispatch("setBranchs");
  382. this.init();
  383. },
  384. methods: {
  385. init() {
  386. this.getList();
  387. },
  388. async getList() {
  389. try {
  390. const res = await getCountCloudTeacherList({
  391. organIds: this.searchForm.organId,
  392. ...this.searchList,
  393. });
  394. this.tableList = res.data.resultList;
  395. this.head = res.data.head;
  396. } catch (e) {
  397. console.log(e);
  398. }
  399. },
  400. search() {
  401. this.rules.page = 1;
  402. this.getList();
  403. },
  404. onReSet() {
  405. this.searchForm.organId = null;
  406. this.searchList = { sort: "targetFinishScale", order: "DESC" };
  407. this.search();
  408. },
  409. sortChang(val) {
  410. const dates = {
  411. ascending: "ASC",
  412. descending: "DESC",
  413. };
  414. this.searchList = {};
  415. if (val.prop && val.order) {
  416. this.searchList = { sort: val.prop, order: dates[val.order] };
  417. // this.searchList[val.prop] = dates[val.order];
  418. }
  419. this.rules.page = 1;
  420. this.getList();
  421. },
  422. onCreateQRCode(row) {
  423. // 生成报名二维码
  424. this.qrcodeStatus = true;
  425. this.codeUrl = vaildTeachingUrl() + "/#/statisticOctober1st";
  426. },
  427. gotoDetail(row) {
  428. // console.log('跳转详情')
  429. this.$router.push({
  430. path: "/operateManager/memberActiveDetail",
  431. query: { organId: row.organId, organName: row.organName },
  432. });
  433. },
  434. async onExport() {
  435. let obj = {
  436. organIds: this.searchForm.organId,
  437. ...this.searchList,
  438. };
  439. await Export(
  440. this,
  441. {
  442. url: "/api-web/export/countCloudTeacherActive",
  443. fileName: "2021十一会员活动.xls",
  444. method: "post",
  445. params: qs.stringify(cleanDeep(obj)),
  446. },
  447. "您确定导出会员活动列表?"
  448. );
  449. },
  450. },
  451. };
  452. </script>
  453. <style lang='scss' scoped>
  454. .titleCell {
  455. display: inline-block;
  456. }
  457. .tableWrap {
  458. margin-top: 20px;
  459. }
  460. .qrcode {
  461. display: flex;
  462. flex-direction: column;
  463. align-items: center;
  464. img {
  465. width: 200px;
  466. height: 200px;
  467. margin: 0 auto;
  468. }
  469. }
  470. .code-url {
  471. font-size: 18px;
  472. text-align: center;
  473. padding: 15px 15px 0 15px;
  474. }
  475. </style>