|
@@ -1,7 +1,12 @@
|
|
<template>
|
|
<template>
|
|
<div class="chioseWrap">
|
|
<div class="chioseWrap">
|
|
<el-form :inline="true" ref="payForm" :model="payForm">
|
|
<el-form :inline="true" ref="payForm" :model="payForm">
|
|
- <el-form-item prop="payType" :rules="[{required: true, message: '请选择支付方式', trigger: 'change'}]">
|
|
|
|
|
|
+ <el-form-item
|
|
|
|
+ prop="payType"
|
|
|
|
+ :rules="[
|
|
|
|
+ { required: true, message: '请选择支付方式', trigger: 'change' }
|
|
|
|
+ ]"
|
|
|
|
+ >
|
|
<el-select
|
|
<el-select
|
|
v-model.trim="payForm.payType"
|
|
v-model.trim="payForm.payType"
|
|
style="width: 180px"
|
|
style="width: 180px"
|
|
@@ -18,7 +23,11 @@
|
|
:header-cell-style="{ background: '#EDEEF0', color: '#444' }"
|
|
:header-cell-style="{ background: '#EDEEF0', color: '#444' }"
|
|
:data="tableList"
|
|
:data="tableList"
|
|
>
|
|
>
|
|
- <el-table-column align="center" prop="platformServeName" label="产品名称">
|
|
|
|
|
|
+ <el-table-column
|
|
|
|
+ align="center"
|
|
|
|
+ prop="platformServeName"
|
|
|
|
+ label="产品名称"
|
|
|
|
+ >
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="学员上限">
|
|
<el-table-column align="center" label="学员上限">
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
@@ -32,34 +41,43 @@
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="num" label="数量">
|
|
<el-table-column align="center" prop="num" label="数量">
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column
|
|
|
|
- align="center"
|
|
|
|
- label="原价(元)"
|
|
|
|
- >
|
|
|
|
|
|
+ <el-table-column align="center" label="原价(元)">
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.rechargeAmount | hasMoneyFormat }}
|
|
{{ scope.row.rechargeAmount | hasMoneyFormat }}
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column
|
|
|
|
- align="center"
|
|
|
|
- label="支付价格(元)"
|
|
|
|
- >
|
|
|
|
|
|
+ <el-table-column align="center" label="支付价格(元)">
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
- <span style="color: red;">{{ scope.row.value | hasMoneyFormat }}</span>
|
|
|
|
|
|
+ <span style="color: red;">{{
|
|
|
|
+ scope.row.value | hasMoneyFormat
|
|
|
|
+ }}</span>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
|
|
|
|
- <el-form-item prop="checked" :rules="[{required: true, message: '请阅读并同意协议', trigger: 'change'}]">
|
|
|
|
|
|
+ <el-form-item
|
|
|
|
+ prop="checked"
|
|
|
|
+ :rules="[
|
|
|
|
+ { required: true, message: '请阅读并同意协议', trigger: 'change' }
|
|
|
|
+ ]"
|
|
|
|
+ >
|
|
<el-checkbox v-model="payForm.checked" @change="onCheckChange">
|
|
<el-checkbox v-model="payForm.checked" @change="onCheckChange">
|
|
</el-checkbox>
|
|
</el-checkbox>
|
|
- <span style="color: #606266; padding-left: 5px;cursor: pointer;" @click="onCheckBox">我已阅读并同意</span>
|
|
|
|
- <span @click.stop="onLookContract" style="color: #01C1B5;cursor: pointer;">《产品及服务协议》</span>
|
|
|
|
|
|
+ <span
|
|
|
|
+ style="color: #606266; padding-left: 5px;cursor: pointer;"
|
|
|
|
+ @click="onCheckBox"
|
|
|
|
+ >我已阅读并同意</span
|
|
|
|
+ >
|
|
|
|
+ <span
|
|
|
|
+ @click.stop="onLookContract"
|
|
|
|
+ style="color: #01C1B5;cursor: pointer;"
|
|
|
|
+ >《产品及服务协议》</span
|
|
|
|
+ >
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<span slot="footer" class="dialog-footer">
|
|
- <el-button @click="$listeners.close();">取 消</el-button>
|
|
|
|
|
|
+ <el-button @click="$listeners.close()">取 消</el-button>
|
|
<el-button @click="onMemberPay" type="primary">确 定</el-button>
|
|
<el-button @click="onMemberPay" type="primary">确 定</el-button>
|
|
</span>
|
|
</span>
|
|
|
|
|
|
@@ -85,17 +103,23 @@
|
|
width="500px"
|
|
width="500px"
|
|
append-to-body
|
|
append-to-body
|
|
>
|
|
>
|
|
- <payment :tableList="tableList" :orderNo="orderNo" v-on="$listeners" :codeUrl="codeUrl" @close="onPaymentClose" />
|
|
|
|
|
|
+ <payment
|
|
|
|
+ :tableList="tableList"
|
|
|
|
+ :orderNo="orderNo"
|
|
|
|
+ v-on="$listeners"
|
|
|
|
+ :codeUrl="codeUrl"
|
|
|
|
+ @close="onPaymentClose"
|
|
|
|
+ />
|
|
</el-dialog>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
// import { recharge } from '../api'
|
|
// import { recharge } from '../api'
|
|
-import { vaildStudentUrl } from '@/utils/validate'
|
|
|
|
-import payment from '@/views/productService/model/payment'
|
|
|
|
|
|
+import { vaildStudentUrl } from "@/utils/validate";
|
|
|
|
+import payment from "@/views/productService/model/payment";
|
|
import previewProtocol from "@/views/tenantSetting/model/previewProtocol";
|
|
import previewProtocol from "@/views/tenantSetting/model/previewProtocol";
|
|
-import { tenantInfoRePay, getContract } from '../api'
|
|
|
|
-import { getTenantId } from '@/utils/auth'
|
|
|
|
|
|
+import { tenantInfoRePay, getContract } from "../api";
|
|
|
|
+import { getTenantId } from "@/utils/auth";
|
|
export default {
|
|
export default {
|
|
props: ["value", "tenantInfo"],
|
|
props: ["value", "tenantInfo"],
|
|
components: { payment, previewProtocol },
|
|
components: { payment, previewProtocol },
|
|
@@ -103,7 +127,7 @@ export default {
|
|
return {
|
|
return {
|
|
payForm: {
|
|
payForm: {
|
|
payType: null,
|
|
payType: null,
|
|
- checked: null,
|
|
|
|
|
|
+ checked: null
|
|
},
|
|
},
|
|
fileContent: null,
|
|
fileContent: null,
|
|
lookVisible: false,
|
|
lookVisible: false,
|
|
@@ -116,90 +140,130 @@ export default {
|
|
};
|
|
};
|
|
},
|
|
},
|
|
async mounted() {
|
|
async mounted() {
|
|
- if(this.value) {
|
|
|
|
- const { contractPrice, originalPrice, ...res } = this.tenantInfo
|
|
|
|
- this.tableList = [{
|
|
|
|
- ...res,
|
|
|
|
- num: this.value,
|
|
|
|
- rechargeAmount: this.value * originalPrice,
|
|
|
|
- value: this.value * contractPrice
|
|
|
|
- }]
|
|
|
|
|
|
+ if (this.value) {
|
|
|
|
+ const { contractPrice, originalPrice, ...res } = this.tenantInfo;
|
|
|
|
+ this.tableList = [
|
|
|
|
+ {
|
|
|
|
+ ...res,
|
|
|
|
+ num: this.value,
|
|
|
|
+ rechargeAmount: this.value * originalPrice,
|
|
|
|
+ value: this.value * contractPrice
|
|
|
|
+ }
|
|
|
|
+ ];
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
onCheckChange() {
|
|
onCheckChange() {
|
|
- if(!this.payForm.checked) {
|
|
|
|
- this.payForm.checked = null
|
|
|
|
|
|
+ if (!this.payForm.checked) {
|
|
|
|
+ this.payForm.checked = null;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
onCheckBox() {
|
|
onCheckBox() {
|
|
- if(this.payForm.checked) {
|
|
|
|
- this.payForm.checked = null
|
|
|
|
|
|
+ if (this.payForm.checked) {
|
|
|
|
+ this.payForm.checked = null;
|
|
} else {
|
|
} else {
|
|
- this.payForm.checked = true
|
|
|
|
|
|
+ this.payForm.checked = true;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
onMemberPay() {
|
|
onMemberPay() {
|
|
- this.$refs.payForm.validate(async (_) => {
|
|
|
|
- if(_) {
|
|
|
|
|
|
+ this.$refs.payForm.validate(async _ => {
|
|
|
|
+ if (_) {
|
|
try {
|
|
try {
|
|
- console.log(this.value, 'this.value')
|
|
|
|
- const res = await tenantInfoRePay({ id: getTenantId(), val: this.value })
|
|
|
|
|
|
+ console.log(this.value, "this.value");
|
|
|
|
+ const res = await tenantInfoRePay({
|
|
|
|
+ id: getTenantId(),
|
|
|
|
+ val: this.value
|
|
|
|
+ });
|
|
// console.log(res)
|
|
// console.log(res)
|
|
- if(res.data.amount == 0 && res.data.orderNo) {
|
|
|
|
- this.$message.success('您已成功缴费')
|
|
|
|
- this.onPaymentClose(true)
|
|
|
|
- this.$listeners.getList()
|
|
|
|
- return
|
|
|
|
|
|
+ if (res.data.amount == 0 && res.data.orderNo) {
|
|
|
|
+ this.$message.success("您已成功缴费");
|
|
|
|
+ this.onPaymentClose(true);
|
|
|
|
+ this.$listeners.getList();
|
|
|
|
+ return;
|
|
}
|
|
}
|
|
- const payForm = this.payForm
|
|
|
|
|
|
+ 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) {}
|
|
|
|
|
|
+ const {
|
|
|
|
+ orderNo,
|
|
|
|
+ sign,
|
|
|
|
+ amount,
|
|
|
|
+ orderBody,
|
|
|
|
+ orderSubject,
|
|
|
|
+ tenantId,
|
|
|
|
+ returnUrl,
|
|
|
|
+ notifyUrl
|
|
|
|
+ } = 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" +
|
|
|
|
+ "&tenantId=" +
|
|
|
|
+ tenantId +
|
|
|
|
+ "&returnUrl=" +
|
|
|
|
+ returnUrl +
|
|
|
|
+ "¬ifyUrl=" +
|
|
|
|
+ notifyUrl;
|
|
|
|
+ console.log(this.codeUrl, "codeUrl");
|
|
|
|
+ this.payMentVisible = true;
|
|
|
|
+ } catch (e) {}
|
|
}
|
|
}
|
|
- })
|
|
|
|
|
|
+ });
|
|
},
|
|
},
|
|
onClose(done) {
|
|
onClose(done) {
|
|
- this.onPaymentClose(false, done)
|
|
|
|
|
|
+ this.onPaymentClose(false, done);
|
|
},
|
|
},
|
|
async onLookContract() {
|
|
async onLookContract() {
|
|
// 如果有协议则不需要重新请求
|
|
// 如果有协议则不需要重新请求
|
|
- if(!this.fileContent) {
|
|
|
|
|
|
+ if (!this.fileContent) {
|
|
try {
|
|
try {
|
|
- const tenantId = this.$helpers.tenantId
|
|
|
|
- const res = await getContract({ id: tenantId, type: 1, renewCount: this.value })
|
|
|
|
- this.fileContent = res.data
|
|
|
|
- } catch(e) {}
|
|
|
|
|
|
+ const tenantId = this.$helpers.tenantId;
|
|
|
|
+ const res = await getContract({
|
|
|
|
+ id: tenantId,
|
|
|
|
+ type: 1,
|
|
|
|
+ renewCount: this.value
|
|
|
|
+ });
|
|
|
|
+ this.fileContent = res.data;
|
|
|
|
+ } catch (e) {}
|
|
}
|
|
}
|
|
- this.lookVisible = true
|
|
|
|
|
|
+ this.lookVisible = true;
|
|
},
|
|
},
|
|
onPaymentClose(hideTip = false, callBack) {
|
|
onPaymentClose(hideTip = false, callBack) {
|
|
- if(hideTip) {
|
|
|
|
- this.payMentVisible = false
|
|
|
|
- this.$emit('close')
|
|
|
|
- return
|
|
|
|
|
|
+ if (hideTip) {
|
|
|
|
+ this.payMentVisible = false;
|
|
|
|
+ this.$emit("close");
|
|
|
|
+ return;
|
|
}
|
|
}
|
|
this.$confirm(`是否支付完成?`, "提示", {
|
|
this.$confirm(`是否支付完成?`, "提示", {
|
|
confirmButtonText: "已完成支付",
|
|
confirmButtonText: "已完成支付",
|
|
cancelButtonText: "未完成支付",
|
|
cancelButtonText: "未完成支付",
|
|
- type: "warning",
|
|
|
|
- }).then(async (res) => {
|
|
|
|
- if(typeof callBack == 'function') {
|
|
|
|
- callBack()
|
|
|
|
- }
|
|
|
|
- this.payMentVisible = false
|
|
|
|
- }).catch(e => {
|
|
|
|
- if(typeof callBack == 'function') {
|
|
|
|
- callBack()
|
|
|
|
- }
|
|
|
|
- this.payMentVisible = false
|
|
|
|
- });
|
|
|
|
|
|
+ type: "warning"
|
|
|
|
+ })
|
|
|
|
+ .then(async res => {
|
|
|
|
+ if (typeof callBack == "function") {
|
|
|
|
+ callBack();
|
|
|
|
+ }
|
|
|
|
+ this.payMentVisible = false;
|
|
|
|
+ })
|
|
|
|
+ .catch(e => {
|
|
|
|
+ if (typeof callBack == "function") {
|
|
|
|
+ callBack();
|
|
|
|
+ }
|
|
|
|
+ this.payMentVisible = false;
|
|
|
|
+ });
|
|
}
|
|
}
|
|
- },
|
|
|
|
|
|
+ }
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|