first commit
This commit is contained in:
@@ -0,0 +1,208 @@
|
||||
<!--#
|
||||
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>
|
||||
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user