更新

src/utils/request2.js

@@ -74,7 +74,10 @@ const service = axios.create({
 service.interceptors.request.use(
   config => {
     // do something before request is sent
-    showFullScreenLoading()
+    let hideLoading = config.hideLoading || false
+    if(!hideLoading) {
+      showFullScreenLoading()
+    }
     if (store.getters.token) {
       // let each request carry token
       // ['X-Token'] is a custom headers key

src/views/resetTeaming/api.js

@@ -123,9 +123,21 @@ export const getAllmemberRank = (data) => request2({
 
 // 查询未激活团练宝用户
 export const queryInactive = (data) => request2({
-  url: '/api-web//cloudTeacherOrder/queryInactive',
+  url: '/api-web/cloudTeacherOrder/queryInactive',
   method: 'post',
   data
 })
 
+// 激活团练宝用户
+export const cloudPay = (data) => request2({
+  url: '/api-web/cloudTeacherOrder/pay',
+  method: 'post',
+  data
+})
 
+export const cloudPayCheck = (data) => request2({
+  url: '/api-web/cloudTeacherOrder/payCheck',
+  method: 'get',
+  hideLoading: true,
+  params: data
+})

src/views/resetTeaming/components/giveMemberList.vue

@@ -3,10 +3,10 @@
     <el-form :inline="true" :model="searchForm">
       <el-form-item>
         <el-input
-          v-model.trim="searchForm.search"
-          @keyup.enter.native="search"
+          v-model.trim="searchForm.queryCondition"
+          @keyup.enter.native="queryCondition"
           clearable
-          placeholder="学生编号"
+          placeholder="学生姓名/编号/电话"
         ></el-input>
       </el-form-item>
       <el-form-item>
@@ -51,7 +51,7 @@
         ></el-table-column>
         <el-table-column align="center" prop="name" label="学员姓名">
         </el-table-column>
-        <el-table-column align="center" prop="phone" label="联系电话">
+        <el-table-column align="center" prop="phone" label="手机号">
         </el-table-column>
         <el-table-column
           align="center"
@@ -64,7 +64,7 @@
           label="团练宝类型"
         >
           <template slot-scope="scope">
-            {{ scope.row.type | cloudGroupActive }}
+            {{ scope.row.type | memberEnumType }}
           </template>
         </el-table-column>
         <el-table-column
@@ -100,20 +100,32 @@
         @pagination="getList"
       />
     </div>
+
+    <el-dialog
+      title="激活会员"
+      :visible.sync="giveMemberVisible"
+      width="1000px"
+      v-if="giveMemberVisible"
+      append-to-body
+    >
+      <giveMemberModel :tableList="selectStudentList" @getList="getList" @close="giveMemberVisible = false" />
+    </el-dialog>
   </div>
 </template>
 <script>
 import pagination from "@/components/Pagination/index";
 import { findSound } from '@/api/buildTeam'
 import { queryInactive } from '../api'
+import giveMemberModel from "../modals/giveMemberModel";
 export default {
-  components: { pagination },
+  components: { pagination, giveMemberModel },
   data() {
     let musicGroupId = this.$route.query.id;
     return {
       musicGroupId,
+      giveMemberVisible: false,
       searchForm: {
-        search: "",
+        queryCondition: "",
         subjectId: "",
       },
       soundList: [],
@@ -125,6 +137,7 @@ export default {
         total: 0, // 总条数
         page_size: [10, 20, 40, 50], // 选择限制显示条数
       },
+      selectStudentList: [], // 选中的学生列表
     };
   },
   mounted() {
@@ -144,19 +157,32 @@ export default {
       try {
         const res = await queryInactive({
           ...this.searchForm,
+          musicGroupId: this.musicGroupId,
           page: this.rules.page,
           rows: this.rules.limit,
         });
-        console.log(res)
         this.rules.total = res.data.total;
         this.tableList = res.data.rows;
       } catch (e) { }
       queryInactive
     },
-    handleSelectionChange(val) {},
-    search() {},
-    onReSet() {},
-    addMember(){}
+    handleSelectionChange(val) {
+      this.selectStudentList = val || []
+    },
+    search() {
+      this.rules.page = 1;
+      this.getList();
+    },
+    onReSet() {
+      this.searchForm = { search: "", subjectId: "" };
+    },
+    addMember(){
+      if(this.selectStudentList.length <= 0) {
+        this.$message.error('至少选择一名学生')
+        return
+      }
+      this.giveMemberVisible = true
+    }
   },
 };
-</script>
+</script>

src/views/resetTeaming/modals/giveMemberModel.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="chioseWrap">
+    <p>您将为以下<span>{{tableList.length}}</span>位学员激活团练宝，激活金额<span>{{ selectStudentMoney | moneyFormat }}</span>元</p>
+    <el-form :inline="true" ref="payForm" :model="payForm">
+      <el-form-item prop="payType" :rules="[{required: true, message: '请选择支付方式', trigger: 'change'}]">
+        <el-select
+          v-model.trim="payForm.payType"
+          style="width: 180px"
+          clearable
+          filterable
+          placeholder="请选择支付方式"
+        >
+          <el-option label="支付宝支付" value="alipay_qr"></el-option>
+          <el-option label="微信支付" value="wx_pub"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <el-table
+      style="width: 100%"
+      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+      :data="tableList"
+    >
+      <el-table-column align="center" prop="name" label="学员姓名">
+      </el-table-column>
+      <el-table-column align="center" prop="phone" label="手机号">
+      </el-table-column>
+      <el-table-column
+        align="center"
+        prop="type"
+        label="团练宝类型"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.type | memberEnumType }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        prop="time"
+        label="数量"
+      ></el-table-column>
+      <el-table-column
+        align="center"
+        label="缴费金额(元)"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.amount | hasMoneyFormat }}
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="$listeners.close();$listeners.getList()">取 消</el-button>
+      <el-button @click="onMemberPay" type="primary">确 定</el-button>
+    </span>
+
+    <el-dialog
+      title="激活会员"
+      :visible.sync="payMentVisible"
+      :before-close="onClose"
+      v-if="payMentVisible"
+      width="500px"
+      append-to-body
+    >
+      <giveMemberPayment :tableList="tableList" :orderNo="orderNo" :codeUrl="codeUrl" @close="onPaymentClose" />
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { cloudPay } from '../api'
+import { vaildStudentUrl } from '@/utils/validate'
+import giveMemberPayment from '@/views/resetTeaming/modals/giveMemberPayment'
+export default {
+  props: ["tableList"],
+  components: { giveMemberPayment },
+  data() {
+    return {
+      payForm: {
+        payType: null,
+      },
+      pay_channel: null, //支付渠道
+      selectStudentMoney: 0, // 选中学生金额
+      payMentVisible: false,
+      codeUrl: null,
+      orderNo: null,
+    };
+  },
+  async mounted() {
+    let tableList = this.tableList || []
+    for(let i of tableList) {
+      this.selectStudentMoney += parseFloat(i.amount)
+    }
+  },
+  methods: {
+    onMemberPay() {
+      this.$refs.payForm.validate(async (_) => {
+        if(_) {
+          try {
+            const res = await cloudPay(this.tableList)
+            console.log(res)
+            const payForm = this.payForm
+            // // 二维码页面， 唤起支付页面
+            const { orderNo, sign, amount, orderBody, orderSubject } = res.data.payMap
+            this.orderNo = orderNo
+            this.codeUrl = vaildStudentUrl() + '/#/payCenter?orderNo=' + orderNo + '&sign=' + sign + '&amount=' + amount + '&payType=' + payForm.payType + '&orderBody=' + orderBody + '&orderSubject=' + orderSubject + '&platform=web'
+            console.log(this.codeUrl, 'codeUrl')
+            this.payMentVisible = true
+          } catch(e) {}
+        }
+      })
+    },
+    onClose(done) {
+      this.onPaymentClose(false, done)
+    },
+    onPaymentClose(hideTip = false, callBack) {
+      if(hideTip) {
+        this.payMentVisible = false
+        this.$emit('close')
+        this.$emit('getList')
+        return
+      }
+      this.$confirm(`是否放弃支付`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(async (res) => {
+        if(typeof callBack == 'function') {
+          callBack()
+        }
+        this.payMentVisible = false
+      });
+    }
+  },
+};
+</script>
+<style lang="less" scoped>
+.chioseWrap {
+  font-size: 16px;
+  > p {
+    font-weight: 500;
+    padding-bottom: 15px;
+    span {
+      color: red;
+      padding: 0 3px;
+    }
+  }
+}
+.dialog-footer {
+  text-align: right;
+  display: block;
+  padding-top: 15px;
+}
+</style>

src/views/resetTeaming/modals/giveMemberPayment.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="chioseWrap">
+    <p>您将为<span>{{tableList.length}}</span>位学员激活会员<br />共需支付<span>{{ selectStudentMoney | moneyFormat }}</span>元</p>
+    <p>请扫描二维码支付，支付功能后学员团练宝即刻激活</p>
+
+    <vue-qr :text="codeUrl" style="width: 250px" :margin="0"></vue-qr>
+  </div>
+</template>
+<script>
+import VueQr from 'vue-qr'
+import { cloudPayCheck } from '../api'
+export default {
+  props: {
+    tableList: {
+      type: Array,
+      default: []
+    },
+    orderNo: {
+      type: String
+    },
+    codeUrl: {
+      type: String
+    },
+  },
+  components: { VueQr },
+  data() {
+    return {
+      payForm: {
+        payType: null,
+      },
+      selectStudentMoney: 0, // 选中学生金额
+      orderTimer: null
+    };
+  },
+  async mounted() {
+    let tableList = this.tableList || []
+    for(let i of tableList) {
+      this.selectStudentMoney += parseFloat(i.amount)
+    }
+    setTimeout(() => {
+      this.getPaymentStatus()
+    }, 3000)
+  },
+  methods: {
+    async getPaymentStatus() {
+      let orderTimer = setInterval(async () => {
+        this.orderTimer = orderTimer
+        try {
+          const res = await cloudPayCheck({ orderNo: this.orderNo })
+          if(res.data) {
+            clearInterval(orderTimer)
+            this.$message.success('您已成功缴费')
+            this.$emit('close', true)
+          }
+        } catch(e) {
+          clearInterval(orderTimer)
+        }
+      }, 5000);
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.orderTimer)
+  }
+};
+</script>
+<style lang="less" scoped>
+.chioseWrap {
+  text-align: center;
+  font-size: 16px;
+  > p {
+    font-weight: 600;
+    padding-bottom: 15px;
+    line-height: 1.5;
+    span {
+      color: red;
+      padding: 0 3px;
+    }
+  }
+}
+.dialog-footer {
+  text-align: right;
+  display: block;
+  padding-top: 15px;
+}
+</style>