..
This commit is contained in:
那些花儿
+115
@@ -0,0 +1,115 @@
|
||||
const applyForm = {
|
||||
template: /*language=HTML*/ `
|
||||
<div>
|
||||
<van-action-sheet :close-on-click-overlay="false" title="捐助信息" v-model="visible">
|
||||
<van-form ref="formRef" class="form-container">
|
||||
<van-cell-group title="基本信息" class="form-section">
|
||||
<van-field label="姓名" readonly v-model="formData.userName"></van-field>
|
||||
<van-field label="单位" readonly v-model="formData.unitName"></van-field>
|
||||
<van-field label="工会" readonly v-model="formData.unionName"></van-field>
|
||||
<van-field label="电话" v-model="formData.mobile" placeholder="请输入电话" type="number"
|
||||
required :rules="[{ required: true }]" name="digit">
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
|
||||
<van-cell-group title="支付信息" class="form-section">
|
||||
<van-field v-model="formData.money" label="捐助金额" type="number" placeholder="请输入捐助金额"
|
||||
required :rules="[{ required: true }]" name="money">
|
||||
<template #button>
|
||||
元
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field label="捐助方式" required :rules="[{ required: true }]" name="payMode" >
|
||||
<template #input>
|
||||
<van-radio-group v-model="formData.payMode" direction="horizontal">
|
||||
<van-radio name="WeChat">
|
||||
<van-icon size="18" name="wechat-pay"></van-icon>
|
||||
微信
|
||||
</van-radio>
|
||||
<van-radio name="Alipay">
|
||||
<van-icon size="18" name="alipay"></van-icon>
|
||||
支付宝
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
</template>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
|
||||
<van-cell-group title="捐助凭证" class="form-section">
|
||||
<van-field name="contributionFiles" label="捐助凭证" required :rules="[{ required: true }]">
|
||||
<template #input>
|
||||
<h5-file-upload
|
||||
slot="input"
|
||||
:value.sync="formData.contributionFiles"
|
||||
:upload_number="5"
|
||||
upload_result_category="array"
|
||||
complete_result
|
||||
></h5-file-upload>
|
||||
</template>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
|
||||
<div class="form-actions">
|
||||
<van-button @click="onSubmit" round type="info">提交</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</van-action-sheet>
|
||||
</div>
|
||||
`,
|
||||
store,
|
||||
data() {
|
||||
return {
|
||||
visible:false,
|
||||
row: {},
|
||||
formData: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onOpen(row) {
|
||||
this.row = row
|
||||
if(row && row.applyId) {
|
||||
this.formData = clone(row)
|
||||
} else {
|
||||
this.init()
|
||||
}
|
||||
this.visible = true
|
||||
},
|
||||
init() {
|
||||
this.$set(this.formData, 'contributionId', this.row.id)
|
||||
this.$set(this.formData, 'contributionName', this.row.contributionName)
|
||||
this.$set(this.formData, 'userId', this.$store.state.user.id)
|
||||
this.$set(this.formData, 'sex', this.$store.state.user.sex)
|
||||
this.$set(this.formData, 'userName', this.$store.state.user.username)
|
||||
this.$set(this.formData, 'loginName', this.$store.state.user.loginname)
|
||||
this.$set(this.formData, 'unitId', this.$store.state.user?.unit?.id)
|
||||
this.$set(this.formData, 'unitName', this.$store.state.user?.unit?.name)
|
||||
this.$set(this.formData, "unionId", this.$store.state.user?.union?.id)
|
||||
this.$set(this.formData, "unionName", this.$store.state.user?.union?.name)
|
||||
this.$set(this.formData, 'mobile', this.$store.state.user.mobile)
|
||||
},
|
||||
onSubmit() {
|
||||
this.$refs.formRef.validate().then(() => {
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
message: "您确定要提交吗？"
|
||||
}).then(() => {
|
||||
const formData = clone(this.formData)
|
||||
formData.contributionFiles = JSON.stringify(formData.contributionFiles)
|
||||
this.$axios.post("/platform/contribution/list/h5/submit", formData).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$toast(res.msg)
|
||||
this.visible = false
|
||||
this.$pjaxReplace("/platform/contribution/mine/h5")
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
/deep/ .van-radio__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
`
|
||||
}
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
const projectInfo = {
|
||||
template: /*language=HTML*/ `
|
||||
<div>
|
||||
<van-action-sheet v-model="visible" title="项目信息" cancel-text="取消">
|
||||
<div class="detail-container">
|
||||
<van-image class="info-img" height="186" width="100%" :src="viewData.contributionFiles"></van-image>
|
||||
|
||||
<div class="info-middle">
|
||||
<div>已筹总额：{{ viewData.totalMoney || 0 }}元</div>
|
||||
<div>捐助人次：{{ viewData.peopleCount || 0 }}人</div>
|
||||
</div>
|
||||
|
||||
<div class="info-title">{{viewData.contributionName}}</div>
|
||||
<div class="info-content" v-html="viewData.contributionIntroduce"></div>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
visible:false,
|
||||
viewData: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onOpen(row) {
|
||||
this.$axios.post('/platform/contribution/list/h5/fetchOne', {id: row.contributionId})
|
||||
.then((res) => {
|
||||
this.viewData = res.data
|
||||
})
|
||||
this.visible = true
|
||||
},
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
/deep/ .info-middle {
|
||||
background-color: #F5F7FA;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
}
|
||||
/deep/ .info-title {
|
||||
font-weight: bold;
|
||||
background-color: white;
|
||||
padding: 13px;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
text-align: center !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
/deep/ .info-content {
|
||||
padding: 10px;
|
||||
background-color: white;
|
||||
}
|
||||
`
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
const typeInfo = {
|
||||
template: /*language=HTML*/ `
|
||||
<div>
|
||||
<van-action-sheet v-model="visible" title="专题信息" cancel-text="取消">
|
||||
<div class="detail-container">
|
||||
<van-image class="info-img" height="186" width="100%" :src="viewData.contributionTypeFiles"></van-image>
|
||||
|
||||
<div class="info-middle">
|
||||
<div>子项目数：{{ viewData.projectCount || 0 }}个</div>
|
||||
<div>已筹总额：{{ viewData.totalMoney || 0 }}元</div>
|
||||
<div>捐助人次：{{ viewData.peopleCount || 0 }}人</div>
|
||||
</div>
|
||||
|
||||
<div class="info-title">{{viewData.typeName}}</div>
|
||||
<div class="info-content">{{viewData.contributionTypeIntroduce}}</div>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
visible:false,
|
||||
viewData: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onOpen(row) {
|
||||
this.$axios.post('/platform/contribution/type/fetchOne', {id: row.typeId})
|
||||
.then((res) => {
|
||||
this.viewData = res.data
|
||||
})
|
||||
this.visible = true
|
||||
},
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
/deep/ .info-middle {
|
||||
background-color: #F5F7FA;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
}
|
||||
/deep/ .info-title {
|
||||
font-weight: bold;
|
||||
background-color: white;
|
||||
padding: 13px;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
text-align: center !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
/deep/ .info-content {
|
||||
padding: 10px;
|
||||
background-color: white;
|
||||
}
|
||||
`
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
<div id="app">
|
||||
<van-nav-bar title="慈善捐助项目" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
|
||||
<van-sticky offset-top="46px">
|
||||
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.type" :options="typeOptions" :multiple="false"
|
||||
@change="doSearch"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
|
||||
<table-list api="/platform/contribution/list/h5/pageData"
|
||||
:page_form.sync="pageForm"
|
||||
ref="tableListRef"
|
||||
img="contributionFiles"
|
||||
@ready="onReady">
|
||||
<template #header="{index,row}">
|
||||
<div class="item-header">
|
||||
<div class="item-title">{{ row.contributionName }}</div>
|
||||
<van-tag type="primary">{{ row.contributionTypeCode ? '专题' : '' }}</van-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="捐助模式">{{ row.contributionMode === 1 ? '水滴筹' : '一日捐' }}</table-column>
|
||||
<table-column label="开始时间">{{row.contributionStartTime}}</table-column>
|
||||
<table-column label="结束时间">{{row.contributionEndTime}}</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div v-if="row.contributionTypeCode" class="action-btn" @click="onTypeView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<span>专题介绍</span>
|
||||
</div>
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<span>项目介绍</span>
|
||||
</div>
|
||||
<div class="action-btn" @click="onApply(row)">
|
||||
<i class="fa fa-cny"></i>
|
||||
<span>捐助</span>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
|
||||
<type-info ref="typeInfoRef"></type-info>
|
||||
<project-info ref="projectInfoRef"></project-info>
|
||||
<apply-form ref="applyFormRef"></apply-form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
<!--#include('../common/typeInfo.js'){}#-->
|
||||
<!--#include('../common/projectInfo.js'){}#-->
|
||||
<!--#include('../common/applyForm.js'){}#-->
|
||||
new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
components: {
|
||||
'type-info': typeInfo,
|
||||
'project-info': projectInfo,
|
||||
'apply-form': applyForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
year: new Date().getFullYear(),
|
||||
type: null,
|
||||
},
|
||||
typeOptions: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async onReady() {
|
||||
const typeList = await this.queryType()
|
||||
this.typeOptions = [
|
||||
{
|
||||
text: "全部类型",
|
||||
value: null
|
||||
}
|
||||
].concat(typeList.map((v) => ({ text: v.typeName, value: v.typeCode })))
|
||||
if (this.typeOptions.length > 0) {
|
||||
this.pageForm.type = this.typeOptions[0].value
|
||||
}
|
||||
this.doSearch()
|
||||
},
|
||||
onApply(row) {
|
||||
if(row.contributionMode === 1) {
|
||||
location.href = row.contributionUrl
|
||||
} else {
|
||||
delete row.contributionFiles
|
||||
this.$refs.applyFormRef.onOpen(row)
|
||||
}
|
||||
},
|
||||
onTypeView(row) {
|
||||
this.$refs.typeInfoRef.onOpen(row)
|
||||
},
|
||||
onView(row) {
|
||||
this.$refs.projectInfoRef.onOpen(row)
|
||||
},
|
||||
async queryType() {
|
||||
const res = await this.$axios.post('/platform/contribution/type/queryContributionType')
|
||||
return res.data
|
||||
},
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$refs.tableListRef.doSearch()
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,143 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
<div id="app">
|
||||
<van-nav-bar title="我的慈善捐助" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
|
||||
<van-sticky offset-top="46px">
|
||||
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.type" :options="typeOptions" :multiple="false"
|
||||
@change="doSearch"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
|
||||
<table-list api="/platform/contribution/mine/h5/pageData"
|
||||
:page_form.sync="pageForm"
|
||||
ref="tableListRef"
|
||||
@ready="onReady">
|
||||
<template #header="{index,row}">
|
||||
<div class="item-header">
|
||||
<div class="item-title">{{ row.projectName }}</div>
|
||||
<van-tag type="primary">{{ row.contributionTypeCode ? '专题' : '' }}</van-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="捐助方式">{{ row.payMode === 'WeChat' ? '微信' : '支付宝' }}</table-column>
|
||||
<table-column label="捐助金额">{{row.money}}</table-column>
|
||||
<table-column label="捐助时间">{{row.contributionTime}}</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div v-if="row.contributionTypeCode" class="action-btn" @click="onTypeView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<span>专题介绍</span>
|
||||
</div>
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<span>项目介绍</span>
|
||||
</div>
|
||||
<div v-if="$moment().isBefore($moment(row.contributionStartTime))"
|
||||
class="action-btn" @click="onEdit(row)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<span>编辑</span>
|
||||
</div>
|
||||
<div v-if="$moment().isBefore($moment(row.contributionStartTime))"
|
||||
class="action-btn delete" @click="onDelete(row)">
|
||||
<i class="fa fa-trash"></i>
|
||||
<span>删除</span>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
|
||||
<type-info ref="typeInfoRef"></type-info>
|
||||
<project-info ref="projectInfoRef"></project-info>
|
||||
<apply-form ref="applyFormRef"></apply-form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
<!--#include('../common/typeInfo.js'){}#-->
|
||||
<!--#include('../common/projectInfo.js'){}#-->
|
||||
<!--#include('../common/applyForm.js'){}#-->
|
||||
new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
components: {
|
||||
'type-info': typeInfo,
|
||||
'project-info': projectInfo,
|
||||
'apply-form': applyForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
year: new Date().getFullYear(),
|
||||
type: null,
|
||||
},
|
||||
typeOptions: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async onReady() {
|
||||
const typeList = await this.queryType()
|
||||
this.typeOptions = [
|
||||
{
|
||||
text: "全部类型",
|
||||
value: null
|
||||
}
|
||||
].concat(typeList.map((v) => ({ text: v.typeName, value: v.typeCode })))
|
||||
if (this.typeOptions.length > 0) {
|
||||
this.pageForm.type = this.typeOptions[0].value
|
||||
}
|
||||
this.doSearch()
|
||||
},
|
||||
onEdit(row) {
|
||||
this.$refs.applyFormRef.onOpen(row)
|
||||
},
|
||||
onTypeView(row) {
|
||||
this.$refs.typeInfoRef.onOpen(row)
|
||||
},
|
||||
onView(row) {
|
||||
this.$refs.projectInfoRef.onOpen(row)
|
||||
},
|
||||
onDelete(row) {
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
message: "您确定要删除吗？"
|
||||
})
|
||||
.then(() => {
|
||||
this.$axios.post("/platform/contribution/mine/h5/delete", { id: row.id }).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$toast.success(res.msg)
|
||||
this.doSearch()
|
||||
} else {
|
||||
this.$toast.fail(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
async queryType() {
|
||||
const res = await this.$axios.post('/platform/contribution/type/queryContributionType')
|
||||
return res.data
|
||||
},
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$refs.tableListRef.doSearch()
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user