对接接口
This commit is contained in:
@@ -0,0 +1,191 @@
|
||||
<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
|
||||
text="真实法师社区，法师身份认证审核通过后才能使用"
|
||||
/>
|
||||
<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>
|
||||
<van-uploader v-model="uploader" />
|
||||
</div>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
v-model="form.cert_url"
|
||||
type="text"
|
||||
label="戒牒照片"
|
||||
readonly
|
||||
placeholder="戒牒照片"
|
||||
>
|
||||
<template #input>
|
||||
<div>
|
||||
<p class="input-small-tip">仅用于认证，不公开</p>
|
||||
<van-uploader v-model="uploader" />
|
||||
</div>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
v-model="form.description"
|
||||
type="textarea"
|
||||
label="自我介绍"
|
||||
placeholder="向他人展示自己的文字说明"
|
||||
:rules="[{ required: true }]"
|
||||
/>
|
||||
<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">
|
||||
<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: 'http://test.url',
|
||||
cert_url: 'http://test.url',
|
||||
description: ''
|
||||
},
|
||||
cascaderValue: [3,40, 431],
|
||||
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,
|
||||
province_id,
|
||||
city_id,
|
||||
county_id
|
||||
}
|
||||
await certifyMonk(params)
|
||||
this.authing = true;
|
||||
},
|
||||
|
||||
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-uploader__upload{
|
||||
width: 3.13rem;
|
||||
height: 3.13rem;
|
||||
}
|
||||
.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>
|
||||
Reference in New Issue
Block a user