190 lines
6.7 KiB
Vue
190 lines
6.7 KiB
Vue
<template>
|
||
<div class="mega-approve">
|
||
<div class="topbar" ref="topbar">
|
||
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
|
||
</div>
|
||
<template v-if="authing">
|
||
<div class="reviewing">
|
||
<i class="iconfont icon-shizhong"></i>
|
||
<p class="review-text">审核中</p>
|
||
<van-button type="warning" @click="authing = false">返回修改</van-button>
|
||
</div>
|
||
</template>
|
||
<template v-if="!authing">
|
||
<van-notice-bar ext="真实法师社区，法师身份认证审核通过后才能使用" />
|
||
<van-form @submit="onSubmit">
|
||
<van-field
|
||
v-model="form.nickname"
|
||
label="法号"
|
||
placeholder="请输入法号全称"
|
||
:rules="[{ required: true }]"
|
||
/>
|
||
<van-field label="称谓" v-model="form.rank_text" :rules="[{ required: true }]" readonly placeholder="请选择称谓" @click="showTitle = true">
|
||
<template #right-icon>
|
||
<span class="iconfont icon-arrow-down-filling"></span>
|
||
</template>
|
||
</van-field>
|
||
<van-field label="所在地区" v-model="form.city_name" :rules="[{ required: true }]" readonly placeholder="请选择省-市-区名称" @click="showProvince = true">
|
||
<template #right-icon>
|
||
<span class="iconfont icon-arrow-down-filling"></span>
|
||
</template>
|
||
</van-field>
|
||
<van-field
|
||
v-model="form.place_temple"
|
||
type="text"
|
||
label="驻锡寺院"
|
||
placeholder="名称含所在城市； 如：深圳弘法寺"
|
||
:rules="[{ required: true }]"
|
||
/>
|
||
<van-field
|
||
label="真人头像"
|
||
placeholder="真人头像"
|
||
>
|
||
<template #input>
|
||
<div>
|
||
<p class="input-small-tip">照片需清晰美观，用于信众展示</p>
|
||
<uploader v-model="form.avatar_url" :max-count="1" />
|
||
</div>
|
||
</template>
|
||
</van-field>
|
||
<van-field
|
||
type="text"
|
||
label="戒牒照片"
|
||
placeholder="戒牒照片"
|
||
>
|
||
<template #input>
|
||
<div>
|
||
<p class="input-small-tip">仅用于认证，不公开</p>
|
||
<uploader v-model="form.cert_url" :max-count="1" />
|
||
</div>
|
||
</template>
|
||
</van-field>
|
||
<van-field
|
||
v-model="form.description"
|
||
type="textarea"
|
||
label="自我介绍"
|
||
placeholder="向他人展示自己的文字说明"
|
||
:rules="[{ required: true }]"
|
||
maxlength="500"
|
||
:rows="8"
|
||
show-word-limit
|
||
/>
|
||
<div style="margin: 16px;">
|
||
<van-button round block type="temple" native-type="submit">提交</van-button>
|
||
</div>
|
||
</van-form>
|
||
</template>
|
||
|
||
<!-- 选择称谓 -->
|
||
<van-action-sheet v-model="showTitle" :actions="actions" @select="onSelect" cancel-text="取消" close-on-click-action/>
|
||
|
||
<!-- 选择城市 -->
|
||
<van-popup v-model="showProvince" round position="bottom" safe-area-inset-bottom>
|
||
<van-cascader
|
||
v-model="cascaderValue"
|
||
title="请选择所在地区"
|
||
:options="cityOptions"
|
||
@close="showProvince = false"
|
||
@finish="onFinishProvince"
|
||
/>
|
||
</van-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getMonkAppellation, getRegion, certifyMonk } from '@/api';
|
||
|
||
export default {
|
||
data(){
|
||
return {
|
||
showProvince: false, // 显示城市选择
|
||
showTitle: false, // 显示法师称谓
|
||
form: {
|
||
nickname: '', // 法号
|
||
rank_id: '', // 称谓
|
||
rank_text: '', // 称谓
|
||
region: '',
|
||
place_temple: '', // 驻赐寺院
|
||
avatar_url: [], // 法师照片
|
||
cert_url: [], // 戒牒照片
|
||
description: ''
|
||
},
|
||
cascaderValue: '',
|
||
cityOptions: [],
|
||
uploader: [],
|
||
actions: [],
|
||
authing: false, // 是否正在认证
|
||
}
|
||
},
|
||
mounted(){
|
||
this.getParams();
|
||
},
|
||
methods: {
|
||
async onSubmit(e){
|
||
console.log(e);
|
||
const [province_id, city_id, county_id] = this.form.city_id;
|
||
const params = {
|
||
...this.form,
|
||
avatar_url: this.form.avatar_url[0].url,
|
||
cert_url: this.form.cert_url[0].url,
|
||
province_id,
|
||
city_id,
|
||
county_id
|
||
}
|
||
await certifyMonk(params)
|
||
this.$toast.success('认证信息提交成功')
|
||
await this.$delay(2000)
|
||
this.$router.replace({ name: 'user-temple-station-review'})
|
||
},
|
||
|
||
getParams(){
|
||
getMonkAppellation().then(res => {
|
||
this.actions = res;
|
||
})
|
||
getRegion().then(city => {
|
||
this.cityOptions = city
|
||
})
|
||
},
|
||
onSelect(action){
|
||
console.log(action)
|
||
this.form.rank_id = action.id;
|
||
this.form.rank_text = action.name;
|
||
},
|
||
onFinishProvince({selectedOptions}){
|
||
this.showProvince = false;
|
||
this.form.city_name = selectedOptions.map(v => v.text).join(' / ')
|
||
this.form.city_id = selectedOptions.map(v => v.value)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.mega-approve{
|
||
.input-small-tip{
|
||
font-size: .32rem;
|
||
color: #aaa;
|
||
}
|
||
.van-button--temple{
|
||
background: $primary-color;
|
||
border: 1px solid $primary-color;
|
||
color: white;
|
||
}
|
||
.reviewing{
|
||
text-align: center;
|
||
padding-top: 1.33rem;
|
||
.iconfont{
|
||
font-size: 2.33rem;
|
||
color: $primary-color;
|
||
}
|
||
.review-text{
|
||
padding: .4rem 0;
|
||
font-size: .4rem;
|
||
}
|
||
.van-button{
|
||
width: 60%;
|
||
margin-top: 1.33rem;
|
||
}
|
||
}
|
||
}
|
||
</style> |