277 lines
9.8 KiB
Vue
277 lines
9.8 KiB
Vue
<template>
|
||
<div class="settle-in">
|
||
<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>
|
||
<div class="steps">
|
||
<div class="step" :class="[step == 1 && 'active']" >
|
||
<span class="circle">1</span>
|
||
<span class="text">资料准备</span>
|
||
</div>
|
||
<div class="step" :class="[step == 2 && 'active']">
|
||
<span class="circle">2</span>
|
||
<span class="text">填写信息</span>
|
||
</div>
|
||
<div class="step" :class="[step == 3 && 'active']">
|
||
<span class="circle">3</span>
|
||
<span class="text">提交资料</span>
|
||
</div>
|
||
</div>
|
||
<div class="infor" v-if="step === 1">
|
||
<p class="title">请准备好如下材料的扫描件或彩色照片，要求清晰可辨认：</p>
|
||
<div class="cert-group">
|
||
<p class="cert">《宗教场地登记证》</p>
|
||
<div class="uploader">
|
||
<van-uploader :max-size="500 * 1024" @oversize="onOversize" :after-read="onBeforeUpload"></van-uploader>
|
||
</div>
|
||
</div>
|
||
<p class="attention">寺院联盟认证将谨慎、严格的验证真实性，能够更好地保护寺院及用户的合法权益。</p>
|
||
<p class="attention">认证资料仅在寺院联盟后台进行备注和核实信息使用，通过认证后将展示在认证页面。</p>
|
||
<div class="agreement">
|
||
<van-checkbox v-model="checked">同意寺院联盟服务协议</van-checkbox>
|
||
</div>
|
||
<van-button type="warning" block @click="onNextStep">下一步</van-button>
|
||
</div>
|
||
<div class="form" v-if="step === 2">
|
||
<van-form>
|
||
<div class="group">
|
||
<label class="label-temple" for="#">寺院信息设置</label>
|
||
<van-field label="单位名称" v-model="form.unit_name" name="单位名称" placeholder="单位名称" />
|
||
<van-field label="机构代码" v-model="form.institution_code" name="机构代码" placeholder="机构代码" />
|
||
<van-field label="省份城市" v-model="form.city_name" name="省份城市" is-link readonly placeholder="省份城市" @click="showProvince = true" />
|
||
<van-field label="详细地址" v-model="form.detail_address" name="详细地址" placeholder="请输入详细地址" >
|
||
<template #right-icon>
|
||
<van-button type="info" size="small">自动获取</van-button>
|
||
</template>
|
||
</van-field>
|
||
<van-field label="寺院法人" v-model="form.represent" name="寺院法人" placeholder="请输入真实姓名" />
|
||
<van-field label="手机号码" v-model="form.mobile" name="手机号码" placeholder="请输入法人手机号码" />
|
||
<van-field label="寺院来源" v-model="form.source" name="寺院来源" placeholder="请输入来源" />
|
||
</div>
|
||
<div class="group">
|
||
<label class="label-temple" for="#">后台登录设置</label>
|
||
<div class="legal-person">
|
||
<span class="label">您是寺院法人？</span>
|
||
<van-checkbox v-model="checked" shape="aquare"></van-checkbox>
|
||
</div>
|
||
<van-field v-if="!checked" label="注册人" placeholder="请输入真实姓名"></van-field>
|
||
<van-field label="手机号码" placeholder="请输入手机号码">
|
||
<template #right-icon>
|
||
<van-button type="info" size="small">自动获取</van-button>
|
||
</template>
|
||
</van-field>
|
||
<van-field label="登录密码" v-model="form.password" placeholder="请输入至少6位数字、字母和符号组合"></van-field>
|
||
<van-field label="确认密码" v-model="form.password_confirm" placeholder="请确认密码"></van-field>
|
||
</div>
|
||
</van-form>
|
||
<div class="button-group">
|
||
<van-button type="info" block class="confirm" @click="onSubmit">提交</van-button>
|
||
</div>
|
||
</div>
|
||
|
||
<van-popup v-model="showProvince" round position="bottom">
|
||
<van-cascader
|
||
v-model="cascaderValue"
|
||
title="请选择所在地区"
|
||
:options="cityOptions"
|
||
@close="showProvince = false"
|
||
@finish="onFinishProvince"
|
||
@change="onChangeProvince"
|
||
/>
|
||
</van-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getMonkAppellation, getRegion, postTemple, uploadFile } from '@/api'
|
||
export default {
|
||
data(){
|
||
return {
|
||
active: 0,
|
||
checked: false,
|
||
showProvince: false,
|
||
register_cert_url: '',
|
||
cityOptions: [],
|
||
cascaderValue: [3,40, 431],
|
||
form: {
|
||
unit_name: '', // 单位名称
|
||
institution_code: '', // 机构代码
|
||
province_id: '', // 省份ID
|
||
city_name: '', // 省份ID
|
||
detail_address: '', // 详细地址
|
||
lng: '', // 经度
|
||
lat: '', // 纬度
|
||
represent: '', // 寺院法人
|
||
mobile: '', // 手机号
|
||
source: '', // 寺院来源
|
||
extra_url: '', // 寺院简介附件
|
||
is_representd: '', // 是否为寺院法人
|
||
register_name: '', // 法人姓名
|
||
login_mobile: '', // 登录手机号
|
||
password: '', // 登录密码
|
||
password_confirm: '', // 确认密码
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
step: {
|
||
get(){
|
||
return Number(this.$route.query.step);
|
||
}
|
||
}
|
||
},
|
||
mounted(){
|
||
this.getParams();
|
||
},
|
||
methods: {
|
||
onBeforeUpload({ file }){
|
||
console.log(file)
|
||
const formData = new FormData();
|
||
formData.append('photo', file)
|
||
uploadFile(formData)
|
||
},
|
||
onOversize(){
|
||
this.$toast('文件大小不能超过500kb')
|
||
},
|
||
onNextStep(){
|
||
this.$router.push({ query: { step: this.step + 1 }})
|
||
},
|
||
getParams(){
|
||
getMonkAppellation().then(res => {
|
||
console.log(res)
|
||
})
|
||
getRegion().then(city => {
|
||
this.cityOptions = city
|
||
})
|
||
},
|
||
onChangeProvince(){
|
||
|
||
},
|
||
async onSubmit(){
|
||
const res = await postTemple(this.form);
|
||
console.log(res)
|
||
},
|
||
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">
|
||
.steps{
|
||
background: #f5f5f5;
|
||
padding: .27rem .4rem;
|
||
font-size: .37rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #ddd;
|
||
.circle{
|
||
width: .8rem;
|
||
height: .8rem;
|
||
display: inline-block;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
line-height: .9rem;
|
||
background: #ddd;
|
||
color: white;
|
||
border-radius: .53rem;
|
||
margin-right: .27rem;
|
||
}
|
||
.text{
|
||
font-size: .37rem;
|
||
color: #666;
|
||
}
|
||
.active{
|
||
.circle{
|
||
background: rgb(187, 95, 95);
|
||
color: white;
|
||
}
|
||
span{
|
||
color: rgb(187, 95, 95);;
|
||
}
|
||
}
|
||
}
|
||
.settle-in{
|
||
.infor{
|
||
padding: .53rem .7rem;
|
||
.title{
|
||
font-size: .37rem;
|
||
line-height: 1.2;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.cert-group{
|
||
.cert{
|
||
font-size: .37rem;
|
||
color: #666;
|
||
}
|
||
.uploader{
|
||
text-align: center;
|
||
padding: .4rem 0;
|
||
margin-top: .4rem;
|
||
}
|
||
.van-uploader__upload{
|
||
width: 4.33rem;
|
||
height: 3.33rem;
|
||
}
|
||
}
|
||
.attention{
|
||
font-size: .35rem;
|
||
color: #999;
|
||
margin-top: .3rem;
|
||
line-height: 1.4;
|
||
text-align: justify;
|
||
&::before{
|
||
content: '*';
|
||
color: red;
|
||
margin-right: .1rem;
|
||
}
|
||
}
|
||
.agreement{
|
||
text-align: center;
|
||
font-size: .37rem;
|
||
padding: 1rem 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
}
|
||
.form{
|
||
padding: .4rem 0;
|
||
.group{
|
||
margin-bottom: .6rem;
|
||
.label-temple{
|
||
font-size: .4rem;
|
||
padding-left: .4rem;
|
||
&::before{
|
||
content: '';
|
||
width: 4px;
|
||
height: .37rem;
|
||
background: #bb5f5f;
|
||
display: inline-block;
|
||
margin-right: 5px;
|
||
vertical-align: middle;
|
||
margin-top: -4px;
|
||
}
|
||
}
|
||
.legal-person{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: .5rem .4rem .3rem;
|
||
.label{
|
||
font-size: .37rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.button-group{
|
||
padding: 0 .4rem;
|
||
padding-top: 0rem;
|
||
}
|
||
|
||
}
|
||
</style> |