|
@@ -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=tenant'
|
|
|
+ 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>
|