commit
This commit is contained in:
@@ -0,0 +1 @@
|
||||
<svg t="1741604634908" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5087" width="32" height="32"><path d="M501.009067 0C224.50176 0 0.395947 229.198507 0.395947 512s224.105813 512 500.626773 512c276.514133 0 500.619947-229.198507 500.619947-512S777.434453 0 501.015893 0z m-39.103147 732.99968L257.938773 514.300587l52.210347-44.305067L428.168533 567.405227c48.011947-60.299947 155.56608-180.599467 303.506774-276.39808l12.417706 30.399146c-135.816533 131.50208-247.186773 316.798293-282.187093 411.600214z" fill="#06B464" p-id="5088"></path></svg>
|
||||
|
After Width: | Height: | Size: 596 B |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
@@ -1,15 +1,310 @@
|
||||
<!--#
|
||||
layout("/layouts/platform.html"){
|
||||
#-->
|
||||
<div id="app" v-cloak></div>
|
||||
<style>
|
||||
.payForm .el-form-item__label {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
<div id="app" v-cloak>
|
||||
<guava ref="guava">
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<div class="search">
|
||||
<div class="search-item">
|
||||
<div class="search-item-label">年度：</div>
|
||||
<div class="search-item-option">
|
||||
<el-date-picker
|
||||
:clearable="false"
|
||||
@change="doSearch();getProjectList()"
|
||||
placeholder="选择年度"
|
||||
type="year"
|
||||
style="width: 100%"
|
||||
v-model="pageForm.year"
|
||||
value-format="yyyy"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="never">
|
||||
<table-tool label="缴费列表" :app="this">
|
||||
<template #func>
|
||||
<el-radio-group @change="doSearch" class="mr10" size="small"
|
||||
v-model="pageForm.isPay">
|
||||
<el-radio-button :label="null">全部</el-radio-button>
|
||||
<el-radio-button :label="true">已缴</el-radio-button>
|
||||
<el-radio-button :label="false">未缴</el-radio-button>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
</table-tool>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:size="tableSize"
|
||||
@sort-change="pageOrder"
|
||||
class="vi-table"
|
||||
ref="table"
|
||||
row-key="id"
|
||||
style="width: 100%"
|
||||
v-loading="tableLoading"
|
||||
>
|
||||
<el-table-column
|
||||
:index="indexMethod"
|
||||
align="center"
|
||||
header-align="center"
|
||||
label="序号"
|
||||
type="index"
|
||||
width="80px"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
:sortable="column.sortable"
|
||||
align="center"
|
||||
header-align="center"
|
||||
show-overflow-tooltip
|
||||
v-for="column in tableColumns"
|
||||
>
|
||||
<template scope="{row}" v-if="column.prop==='isPayment'">
|
||||
<span style="color: #00aa3a" v-if="row.isPayment">已缴</span>
|
||||
<span style="color: red" v-else>未缴</span>
|
||||
</template>
|
||||
<template scope="{row}" v-else-if="column.prop==='paymentStartMonth'">
|
||||
{{row.paymentStartMonth}}至{{row.paymentEndMonth}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" header-align="center" label="操作"
|
||||
prop="userOnline" width="200px">
|
||||
<template scope="{row}">
|
||||
<el-button :disabled="row.isPayment" @click="openPay(row)"
|
||||
size="mini" type="primary">缴费
|
||||
</el-button>
|
||||
<el-button @click="openPay(row)"
|
||||
size="mini" type="primary">缴费
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--#include("/layouts/pagination.html"){}#-->
|
||||
</el-card>
|
||||
</template>
|
||||
</guava>
|
||||
|
||||
<el-diaLog :close-on-click-modal="false" :visible.sync="payVisible" title="缴费" width="50%"
|
||||
:before-close="clickClose">
|
||||
<el-form ref="form" :model="formData" :rules="formRules" label-width="170px"
|
||||
label-suffix="：" class="payForm">
|
||||
|
||||
<el-steps :active="payActive" finish-status="success">
|
||||
<el-step title="计算缴费金额"></el-step>
|
||||
<el-step title="生成缴费二维码"></el-step>
|
||||
<el-step title="完成"></el-step>
|
||||
</el-steps>
|
||||
<div v-if="payActive===0" class="mt25">
|
||||
<el-form-item label="缴费所属时间">
|
||||
<div>{{formData.paymentStartMonth}}至{{formData.paymentEndMonth}}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费标准">
|
||||
<div style="color: red"
|
||||
v-if="formData.payModeValueList&&formData.payModeValueList.length>0">
|
||||
(
|
||||
<template v-for="(o,i) in formData.payModeValueList">
|
||||
{{o.name}}
|
||||
<template v-if="i !=formData.payModeValueList.length-1">+</template>
|
||||
</template>
|
||||
) * 0.5% * {{formData.paymentMonth}}个月
|
||||
</div>
|
||||
<div v-else>固定金额缴费</div>
|
||||
</el-form-item>
|
||||
<!--如果是根据比例算的-->
|
||||
<div v-if="formData.payModeValueList&&formData.payModeValueList.length>0">
|
||||
|
||||
<template v-for="(o,i) in formData.payModeValueList" :key="i">
|
||||
<el-form-item :label="o.name">
|
||||
<el-input-number v-model="o.value" :min="0" :max="1000000"
|
||||
:precision="2"
|
||||
placeholder="请输入缴费金额"
|
||||
@change="changePayModeValue(o)"></el-input-number>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</div>
|
||||
<el-form-item label="支付金额">
|
||||
<div style="color: #2cd000;font-size: 25px">¥ {{formData.paymentMoney}}</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div v-if="payActive===1" class="mt25">
|
||||
<el-form-item label="商品订单">
|
||||
{{formData.tradingOrderNo}}
|
||||
</el-form-item>
|
||||
<el-form-item label="支付金额">
|
||||
<div style="color: #2cd000;font-size: 25px">¥ {{formData.paymentMoney}}</div>
|
||||
</el-form-item>
|
||||
<div style="width: 100%;">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" v-loading="qrcodeLoading">
|
||||
<div id="qrcode" style="width: 60%;left: 0;right: 0;margin: auto"></div>
|
||||
<div style="display: flex;justify-content: center">
|
||||
<span
|
||||
style="font-weight: bold;
|
||||
font-size: 15px;
|
||||
color: #fbfbfb;
|
||||
background-color: rgb(44, 208, 0);
|
||||
height: 30px;
|
||||
width: 60%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;">
|
||||
请打开手机微信，扫一扫完成支付</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div>
|
||||
<el-image src="/assets/mobile/svg/memberPay/wx_img.png"></el-image>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="payActive===3">
|
||||
|
||||
<div
|
||||
style="margin-top: 35px;background-color: RGB(245, 254, 243);height: 100px;display: flex;align-items: center;justify-content: center">
|
||||
<div>
|
||||
<el-image
|
||||
src="/assets/mobile/svg/memberPay/pcPaySuccess.svg"></el-image>
|
||||
</div>
|
||||
<div style="font-weight: bold;font-size: 25px">支付成功!</div>
|
||||
</div>
|
||||
<el-form-item label="商品订单">
|
||||
{{viewInfo.tradingOrderNo}}
|
||||
</el-form-item>
|
||||
<el-form-item label="支付金额">
|
||||
<div style="color: #2cd000;font-size: 25px">¥ {{viewInfo.paymentMoney}}</div>
|
||||
</el-form-item>
|
||||
|
||||
</div>
|
||||
</el-form>
|
||||
<div style="text-align: right">
|
||||
<span>
|
||||
<el-button @click="clickClose">关 闭</el-button>
|
||||
<el-button @click="next" v-if="payActive===0"
|
||||
type="primary">下一步</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</el-diaLog>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
new Vue({
|
||||
const vue = new Vue({
|
||||
el: "#app",
|
||||
mixins: [initTableMixins],
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
tableColumns: [
|
||||
{ prop: "year", label: "年度", sortable: true },
|
||||
{ prop: "projectName", label: "项目名称", sortable: true },
|
||||
{ prop: "startTime", label: "缴费开始时间", sortable: true },
|
||||
{ prop: "endTime", label: "缴费截止时间", sortable: true },
|
||||
{ prop: "paymentStartMonth", label: "缴费所属时间", sortable: true },
|
||||
{ prop: "isPayment", label: "是否缴费", sortable: true }
|
||||
],
|
||||
pageForm: {
|
||||
isPay: false,
|
||||
year: moment().format("YYYY")
|
||||
},
|
||||
payVisible: false,
|
||||
payActive: 0,
|
||||
intervalTimer: null,
|
||||
qrcodeLoading: false,
|
||||
payInfo: {}
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
created() {}
|
||||
methods: {
|
||||
clickClose() {
|
||||
if (this.payActive === 3) {
|
||||
this.payVisible = false
|
||||
} else {
|
||||
this.$confirm("您确定要关闭当前缴费吗?关闭后将不会保存当前数据", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
this.payVisible = false
|
||||
})
|
||||
}
|
||||
clearInterval(this.intervalTimer)
|
||||
},
|
||||
next() {
|
||||
this.$confirm("您确定要生成缴费二维码吗?当前需缴费【" + this.formData.paymentMoney + "】元", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(async () => {
|
||||
this.qrcodeLoading = true
|
||||
const paymentMoney = Math.floor(this.formData.paymentMoney * 100)
|
||||
this.payActive = this.payActive + 1
|
||||
const resp = await $.post("/platform/member/payment/mine/pcOrderPay", { paymentMoney })
|
||||
if (resp.code === 0) {
|
||||
const data = JSON.parse(resp.data)
|
||||
this.$nextTick(() => {
|
||||
$("#qrcode").html("")
|
||||
$("#qrcode").qrcode({ //设置css
|
||||
render: "canvas", //二维码的生成方式
|
||||
width: $("#qrcode").width(), //生成二维码的宽度
|
||||
height: $("#qrcode").width(), //生成二维码的高度
|
||||
text: data.code_url,
|
||||
correctLevel: 3 //容错级别，默认为2，最高为3，为了让用户扫码最快，容错级别应当设为最低
|
||||
})
|
||||
})
|
||||
await this.getIsPay()
|
||||
}
|
||||
this.qrcodeLoading = false
|
||||
})
|
||||
},
|
||||
async getIsPay() {
|
||||
this.intervalTimer = setInterval(async () => {
|
||||
const resp = await $.get(loc() + "/getIsPay", { paymentInfoId: this.formData.paymentInfoId })
|
||||
if (resp.code === 0) {
|
||||
if (resp.data) {
|
||||
this.payInfo = resp.data
|
||||
this.payActive = 3
|
||||
clearInterval(this.intervalTimer)
|
||||
}
|
||||
}
|
||||
|
||||
}, 4000)
|
||||
},
|
||||
changePayModeValue() {
|
||||
let paymentMoney = this.formData.payModeValueList.reduce((a, b) => {
|
||||
return a + b.value
|
||||
}, 0)
|
||||
this.$set(this.formData, "paymentMoney", parseFloat((paymentMoney * 0.005 * this.formData.paymentMonth).toFixed(2)))
|
||||
},
|
||||
openPay(row) {
|
||||
const payStandards = JSON.parse(row.payStandards)
|
||||
const payStandard = payStandards.find(p => p.payPersonnel === row.payPersonnel && p.personType === row.personType)
|
||||
this.$set(this.formData, "paymentMonth", row.paymentMonth)
|
||||
this.$set(this.formData, "paymentStartMonth", row.paymentStartMonth)
|
||||
this.$set(this.formData, "paymentEndMonth", row.paymentEndMonth)
|
||||
this.$set(this.formData, "paymentInfoId", row.id)
|
||||
if (payStandard.payModeValue) {
|
||||
this.$set(this.formData, "payModeValueList", [])
|
||||
this.$set(this.formData, "paymentMoney", payStandard.payModeValue)
|
||||
} else {
|
||||
this.$set(this.formData, "payModeValueList", payStandard.payModeValueList)
|
||||
this.$set(this.formData, "paymentMoney", 0)
|
||||
}
|
||||
|
||||
|
||||
this.payVisible = true
|
||||
},
|
||||
doSubmit() {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.pageData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<!--#
|
||||
|
||||
Reference in New Issue
Block a user