对接接口
This commit is contained in:
@@ -0,0 +1,277 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user