c-zhangr1/zhgh_hrbnu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
Paidax
2024-07-22 17:36:03 +08:00
parent 03faa20548
commit 7e190d4ccc
24 changed files with 4001 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/views/mobile/memberCost/memberCostList.html
+357
View File
@@ -0,0 +1,357 @@
<!--#
layout("/mobile/platform.html"){
#-->
<style>
.module {
margin: 10px 10px 14px 10px;
box-shadow: 0 8px 12px #ebedf0;
border-radius: 10px;
}
.menu {
display: flex;
flex-wrap: wrap;
row-gap: 10px;
background-color: white;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 6px 0px;
}
.menu_img {
position: absolute;
right: 10px;
bottom: 0px;
}
.menu_img_yjf {
position: absolute;
right: 10px;
bottom: 10px;
width: 100px;
height: 60px;
}
.pay_img {
margin-right: 5px;
display: flex;
}
.member_cost .van-cell__title {
display: flex;
align-items: center;
}
</style>
<div id="app" v-cloak>
<van-sticky>
<van-nav-bar @click-left="history.go(-1)" left-arrow
title="会费支付"></van-nav-bar>
</van-sticky>
<div>
<van-tabs @change="pageData" v-model="memberActive">
<van-tab title="未缴费"></van-tab>
<van-tab title="已缴费"></van-tab>
</van-tabs>
<van-row class="module" v-for="p in payList">
<div class="menu">
<van-col :span="8" style="padding: 10px;">
<van-image
height="6rem"
round
src="/assets/mobile/svg/memberPay/hf.svg"
width="6rem"
></van-image>
</van-col>
<van-col :span="16" style="position: relative">
<div style="text-align: left; ">
会费项目：
<div style="font-weight: bold;font-size: 14px">{{p.projectName}}</div>
</div>
<div style="text-align: left; ">
会费标准：
<div v-if="p.selectMode==='1'" style="font-weight: bold;font-size: 14px">{{p.modeValue}}</div>
<div v-if="p.selectMode==='2'" style="font-weight: bold;font-size: 14px">{{p.modeValueName}}
</div>
</div>
<div style="text-align: left; " v-if="p.paymentMoney&&p.isPayment">
已缴费金额：{{p.paymentMoney}}
</div>
<div class="menu_img" v-if="!p.isPayment">
<van-button @click.stop="openAlipay(p)" color="#1867b0" round
size="mini"
style=" width: 75px; height: 30px;"
type="primary">
我要缴费
</van-button>
</div>
<div class="menu_img_yjf" v-if="p.isPayment">
<van-image src="/assets/mobile/svg/memberPay/yjf.svg"
></van-image>
</div>
</van-col>
<el-col span="2">
</el-col>
</div>
</van-row>
<van-action-sheet :close-on-click-overlay="false" :title="viewData.projectName"
style="height: 60%"
v-model="payShow">
<div class="member_cost">
<div v-if="viewData.selectMode==='2'">
<van-cell :value="costFormula" title="会费计算公式"></van-cell>
<van-cell-group>
<van-field :label="o.name" :placeholder="'请输入'+o.name"
@input="moneyInput"
input-align="right"
type="number" v-for="(o,index) in viewData.modeValueList"
v-model="o.value">
<template #left-icon>
<div class="pay_img">
<van-image src="/assets/mobile/svg/memberPay/money.svg"
></van-image>
</div>
</template>
</van-field>
</van-cell-group>
</div>
<div>
<van-radio-group checked-color="#1867b0" v-model="moneyModel">
<van-cell-group>
<van-cell @click="moneyModel = 1" clickable title="支付宝">
<template #icon>
<div class="pay_img">
<van-image src="/assets/mobile/svg/memberPay/zfb.svg"
></van-image>
</div>
</template>
<template #right-icon>
<van-radio :name="1"></van-radio>
</template>
</van-cell>
<van-cell @click="moneyModel = 2" clickable title="微信">
<template #icon>
<div class="pay_img">
<van-image src="/assets/mobile/svg/memberPay/wx.svg"
></van-image>
</div>
</template>
<template #right-icon>
<van-radio :name="2"></van-radio>
</template>
</van-cell>
</van-cell-group>
</van-radio-group>
</div>
</div>
<van-submit-bar
:loading="loading"
:price="money"
@submit="doAlipay"
button-color="#1867b0"
button-text="支付"
></van-submit-bar>
</van-action-sheet>
<van-popup :style="{ height: '100%', width: '100%'}" @close="imgClose" closeable
position="right"
v-model="zfImg">
<van-image src="/assets/mobile/svg/memberPay/zf_img.png"
style="margin-top: 40px; height: 95%;width: 100%"></van-image>
</van-popup>
<van-empty
class="custom-image"
description="暂无缴费记录"
image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
v-if="payList&&payList.length===0"
></van-empty>
</div>
</div>
<script>
const vue = new Vue({
el: '#app',
mixins: [mobileMixins],
data() {
return {
zfImg: false,
costFormula: "",
formData: {},
payShow: false,
loading: false,
moneyModel: "",
money: 0,
viewData: {},
configData: {},
payList: [],
memberActive: 0,
intervalTimer: null,
}
},
methods: {
imgClose() {
clearInterval(this.intervalTimer)
this.loading = false
this.zfImg = false
},
moneyInput() {
const moneys = this.viewData.modeValueList.map(m => Number(m.value))
let money = 0
moneys.forEach(m => {
money += m;
})
if (money <= 10) {
this.money = 1
} else {
money = money.toFixed(2)
this.money = Number(money.replace(".", "")) * 0.5 / 100
}
},
async doAlipay() {
this.doIsPaySuccess()
if (!this.money) {
vant.Toast('请计算会费金额')
return
}
if (!this.moneyModel) {
vant.Toast('请选择支付方式')
return
}
this.loading = true
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
let money = 0
if (this.viewData.selectMode === "1") {
money = this.viewData.modeValue
} else if (this.viewData.selectMode === "2") {
const moneys = this.viewData.modeValueList.map(m => Number(m.value))
moneys.forEach(m => {
money += m;
})
money = money * 0.5 / 100
money = money.toFixed(2)
}
if (this.moneyModel === 1) {
let use = window.navigator.userAgent.toLowerCase();
//是否微信浏览器
if (use.match(/MicroMessenger/i) && use.match(/MicroMessenger/i)[0] === "micromessenger") {
this.zfImg = true
return
} else {
if (this.moneyModel === 1) {
const resp = await $.get("/mobile/memberCost/AlipayClient/tradePagePay", {
money: money,
paymentProjectId: this.viewData.paymentProjectId,
})
const div = document.createElement('div');
div.innerHTML = resp; // data就是接口返回的form 表单字符串
document.body.appendChild(div);
//如果是ios，不新开页面直接跳转
if (isiOS) {
document.forms[0].submit();
} else {
document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
document.forms[0].submit();
}
}
}
} else {
}
},
async getConfig() {
const {data} = await $.get("/platform/member/payment/config/getPaymentConfig")
this.configData = data
},
async openAlipay(p) {
const data = clone(p)
this.money = 0
this.moneyModel = ""
this.viewData = data
if (this.viewData.selectMode === "1") {
this.money = Number(data.modeValue + "00")
}
if (this.viewData.selectMode === "2") {
const names = this.viewData.modeValueList.map(m => m.name)
this.costFormula = "（" + names.join("+") + "）" + "×0.5%"
}
this.payShow = true
},
async pageData() {
const resp = await $.post("/mobile/memberCost/list/pageData", {memberActive: this.memberActive})
if (resp.code === 0) {
const personType = "${@shiro.getPrincipalProperty('personType')}"
const payStandards = this.configData.payStandards
resp.data.forEach(r => {
payStandards.map(p => {
if (p.personTypes.includes(personType)) {
r.selectMode = p.payMode
if (p.payMode === "1") {
r.modeValue = p.payModeValue
} else {
r.modeValueList = p.payModeValueList
const names = r.modeValueList.map(m => m.name)
r.modeValueName = "(" + names.join("+") + ")" + "×0.5%"
}
}
})
})
this.payList = resp.data
}
},
doIsPaySuccess() {
this.intervalTimer = setInterval(async () => {
const resp = await $.get("/mobile/memberCost/list/getPayInfo", {id: this.viewData.id})
if (resp.data.isPayment === true) {
clearInterval(this.intervalTimer)
this.doSearch()
this.payShow = false
this.loading = false
this.zfImg = false
}
}, 4000)
}
},
async created() {
await this.getConfig()
await this.pageData()
}
})
</script>
<!--#
}
#-->
src/main/resources/views/mobile/memberCost/paySuccess.html
+134
View File
@@ -0,0 +1,134 @@
<!--#
layout("/mobile/platform.html"){
#-->
<style>
.head {
position: relative;
height: 300px;
background-color: #02be6e;
}
.head_img {
position: absolute;
top: 35%;
left: 54%;
transform: translate(-50%, -50%);
}
.head_zfcg {
position: absolute;
top: 63%;
left: 52%;
transform: translate(-50%, -50%);
font-size: 20px;
font-weight: 700;
color: #ffffff;
}
.head_xq {
position: absolute;
top: 70%;
left: 15%;
color: #ffffff;
}
.middle_zfxx {
background: radial-gradient(circle, transparent, transparent 8px, #FFFFFF 8px, #FFFFFF) 170px;
height: 20vh;
position: relative;
top: -25px;
margin-left: 25px;
margin-right: 25px;
}
.middle_x {
margin-right: 20px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.middle_jine {
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: 700;
font-size: 20px;
color: #02be6e;
}
.middle_zxxx {
position: absolute;
top: 55%;
line-height: 25px;
font-size: 13px;
width: 100%;
}
.app {
background-color: #f7f7f7;
}
</style>
<div id="app" v-cloak>
<div class="head">
<div>
<van-image class="head_img"
src="/assets/mobile/svg/memberPay/paySuccess.svg"></van-image>
<span class="head_zfcg">支付成功</span>
<span class="head_xq">您已付款成功，请返回查看会费情况</span>
</div>
</div>
<div class="middle_zfxx">
<div class="middle_jine">￥{{total_amount}}</div>
<div class="middle_x">
<van-divider dashed></van-divider>
</div>
<div class="middle_zxxx">
<van-row>
<van-col span="8" style="text-align: left;padding-left: 10px;">订单编号</van-col>
<van-col span="16" style="text-align: right;padding-right: 10px;">
{{out_trade_no}}
</van-col>
</van-row>
<van-row>
<van-col span="8" style="text-align: left;padding-left: 10px;">支付时间</van-col>
<van-col span="16" style="text-align: right;padding-right: 10px;">
{{timestamp}}
</van-col>
</van-row>
</div>
</div>
</div>
<script>
const vue = new Vue({
el: '#app',
mixins: [mobileMixins],
data() {
return {
out_trade_no: 0,
total_amount: 0,
timestamp: 0,
}
},
methods: {},
async created() {
this.out_trade_no = GetQueryString("out_trade_no")
this.total_amount = GetQueryString("total_amount")
this.timestamp = GetQueryString("timestamp").replace("+", " ")
}
})
</script>
<!--#
}
#-->