209 lines
6.7 KiB
HTML
209 lines
6.7 KiB
HTML
<!--#
|
|
layout("/mobile/platform.html"){
|
|
#-->
|
|
|
|
<style>
|
|
.bth {
|
|
bottom: 0;
|
|
position: fixed;
|
|
height: 45px;
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.van-tag--large {
|
|
height: 30px;
|
|
width: 60px;
|
|
font-size: 25px;
|
|
margin-bottom: 10px;
|
|
margin-top: 10px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.van-cell {
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.van-cell-group {
|
|
margin: 10px 10px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="app" v-cloak>
|
|
|
|
<m-page-loading v-if="mLoading"></m-page-loading>
|
|
<van-nav-bar
|
|
title="我要捐款"
|
|
left-arrow
|
|
placeholder
|
|
fixed
|
|
@click-left="history.back()"
|
|
safe-area-inset-top
|
|
></van-nav-bar>
|
|
|
|
|
|
<van-form @submit="onSubmit">
|
|
|
|
<van-cell-group>
|
|
<van-row type="flex" gutter="20">
|
|
<van-col span="8" v-for="key in moneyData" @click="dateClick(key)"
|
|
style="text-align: center;border-radius: 20px;">
|
|
<van-tag :plain="activeDate!=key" size="large" type="primary">
|
|
<div style="position: absolute;left: 0;right: 0">{{key}}</div>
|
|
</van-tag>
|
|
</van-col>
|
|
</van-row>
|
|
<div class="van-hairline--top">
|
|
<van-field v-model="formData.money" label="捐赠金额" type="number" input-align="right"
|
|
placeholder="请输入捐赠金额" @input="moneyInput">
|
|
<template #button>
|
|
元
|
|
</template>
|
|
</van-field>
|
|
</div>
|
|
|
|
</van-cell-group>
|
|
<van-cell-group>
|
|
<van-field v-model="formData.username" label="真实姓名：" input-align="right" readonly>
|
|
</van-field>
|
|
<van-field v-model="formData.loginname" label="真实工号：" input-align="right" readonly>
|
|
</van-field>
|
|
<van-field v-model="formData.mobile" label="联系电话：" input-align="right"
|
|
placeholder="请输入手机号或电话号">
|
|
</van-field>
|
|
|
|
</van-cell-group>
|
|
<van-radio-group v-model="formData.payMode">
|
|
<van-cell-group>
|
|
<van-cell title="微信支付" clickable @click="formData.payMode = 'WeChat'"
|
|
icon="/assets/mobile/svg/wx.png">
|
|
<template #right-icon>
|
|
<van-radio name="WeChat"></van-radio>
|
|
</template>
|
|
</van-cell>
|
|
<van-cell title="支付宝支付" clickable @click="formData.payMode = 'Alipay'"
|
|
icon="/assets/mobile/svg/zfb.png">
|
|
<template #right-icon>
|
|
<van-radio name="Alipay"></van-radio>
|
|
</template>
|
|
</van-cell>
|
|
</van-cell-group>
|
|
</van-radio-group>
|
|
|
|
<van-cell-group>
|
|
<van-field name="files" label="捐款凭证" required style="flex-flow: column"
|
|
input-align="left">
|
|
<template #label>
|
|
<div class="mb10">捐款凭证</div>
|
|
</template>
|
|
<template #input>
|
|
<vant-file-upload :files.sync="formData.contributionFiles"></vant-file-upload>
|
|
</template>
|
|
</van-field>
|
|
</van-cell-group>
|
|
<div class="bth">
|
|
<van-row style="display: flex;padding-left: 15px;" type="flex" justify="space-between">
|
|
<van-col span="16" style="align-self:center;">合计:
|
|
<sapn style="color: red">{{formData.money?formData.money:0}}</sapn>
|
|
元
|
|
</van-col>
|
|
<van-col span="8" style="align-self:center;padding-right: 20px;">
|
|
<van-button plain type="info" style="float: right;border-radius: 15px;"
|
|
:color="themeColor">确认捐款
|
|
</van-button>
|
|
</van-col>
|
|
</van-row>
|
|
</div>
|
|
|
|
|
|
</van-form>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
mixins: [mobileMixins],
|
|
data() {
|
|
return {
|
|
activeDate: null,
|
|
moneyData: {
|
|
70: 70,
|
|
700: 700,
|
|
7000: 7000,
|
|
1952: 1952,
|
|
1975: 1975,
|
|
1987: 1987,
|
|
},
|
|
formData: {}
|
|
}
|
|
},
|
|
methods: {
|
|
dateClick(key) {
|
|
this.activeDate = key
|
|
this.formData.money = key
|
|
|
|
},
|
|
moneyInput(val) {
|
|
this.$set(this.formData, "money", val)
|
|
},
|
|
async onSubmit() {
|
|
if (!this.formData.money) {
|
|
this.$toast.fail('捐赠金额不能为空');
|
|
return
|
|
}
|
|
if (!this.formData.contributionFiles) {
|
|
this.$toast.fail('捐赠凭证不能为空');
|
|
return
|
|
}
|
|
const confirm = await vant.Dialog.confirm({
|
|
title: '请确认',
|
|
message: '确认要为' + this.formData.contributionName + '捐款吗？',
|
|
})
|
|
if (confirm === "confirm") {
|
|
const data = await $.post("/mobile/contribution/doContributionApply", {contributionApply: JSON.stringify(this.formData)})
|
|
if (data.code === 0) {
|
|
vant.Dialog.alert({
|
|
title: '提示',
|
|
message: '捐赠成功，已收到您为“' + this.formData.contributionName + '”捐赠的善款',
|
|
confirmButtonColor: '#1867b0'
|
|
}).then(() => {
|
|
window.history.back()
|
|
});
|
|
|
|
}
|
|
}
|
|
|
|
|
|
},
|
|
async init(id) {
|
|
const {data} = await $.post("/mobile/contribution/getContributionById", {id: id})
|
|
this.formData = {
|
|
contributionId: id,
|
|
username: "${@shiro.getPrincipalProperty('username')}",
|
|
loginname: "${@shiro.getPrincipalProperty('loginname')}",
|
|
mobile: "${@shiro.getPrincipalProperty('mobile')}",
|
|
payMode: "WeChat",
|
|
money: null,
|
|
contributionName: data.contributionName,
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
const id = this.GetQueryString("id")
|
|
this.init(id)
|
|
|
|
|
|
}
|
|
})
|
|
</script>
|
|
|
|
|
|
<!--#
|
|
}
|
|
#-->
|