wenfp/temple-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修正日行一善

Browse Source
This commit is contained in:
wenfp
2022-01-21 11:26:47 +08:00
parent 6484d35232
commit 62a7d349cc
22 changed files with 594 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
-1
View File
@@ -50,7 +50,6 @@ export default {
handler() {
this.$nextTick(() => {
const { tabbar } = this.$refs;
console.log(tabbar)
this.tabHeight = tabbar ? tabbar.$el.offsetHeight - safeAreaInsets.bottom: 0;
console.log(this.tabHeight, )
})
src/api/index.js
+5 -1
View File
@@ -146,6 +146,9 @@ const getCertList = () => service.get(`/api/user/get-cert-list`);
// 热门搜索
const getHotWords = () => service.get(`/api/keywords/get-list`);
// 获取入驻模板
const getStationTemplate = template_id => service.get(`/api/temple-template-share?id=${template_id}`);
export {
getHotWords,
getMonkAppellation,
@@ -186,5 +189,6 @@ export {
getOrderList,
getOrder,
getCustomerList,
getCertList
getCertList,
getStationTemplate
}
src/api/service.js
+1
View File
@@ -9,6 +9,7 @@ const instance = axios.create({
baseURL,
timeout: 15000,
headers: {
"env": process.env.NODE_ENV,
"Accept": "*",
"Content-Type": "application/x-www-form-urlencoded"
},
src/common/vant.js
+3 -1
View File
@@ -28,12 +28,14 @@ import {
Cascader,
ActionSheet,
ShareSheet,
Loading,
Dialog,
Icon
} from "vant";
Vue.use(Button);
Vue.use(NavBar);
Vue.use(Button);
Vue.use(Loading);
Vue.use(Icon);
Vue.use(Search);
Vue.use(Swipe);
src/components/random-money/index.vue
+1 -1
View File
@@ -128,7 +128,7 @@ export default {
}
.username-container{
padding-top: .3rem;
height: 2rem;
height: 1rem;
.username{
color: white;
font-size: .4rem;
src/components/sms-code-input/index.vue
+188
View File
@@ -0,0 +1,188 @@
<template>
<div class="input-box">
<div class="input-content" @keydown="keydown" @keyup="keyup" @paste="paste" @mousewheel="mousewheel" @input="inputEvent">
<input max="9" min="0" maxlength="1" data-index="0" v-model.trim.number="input[0]" type="number" ref="firstinput"/>
<input max="9" min="0" maxlength="1" data-index="1" v-model.trim.number="input[1]" type="number"/>
<input max="9" min="0" maxlength="1" data-index="2" v-model.trim.number="input[2]" type="number"/>
<input max="9" min="0" maxlength="1" data-index="3" v-model.trim.number="input[3]" type="number"/>
</div>
</div>
</template>
<style scoped lang="scss">
.input-box {
.input-content {
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1rem;
input {
color: inherit;
font-family: inherit;
border: 0;
outline: 0;
border-bottom: 2px solid $primary-color;
height: 60px;
width: 60px;
font-size: 1rem;
text-align: center;
font-weight: bold;
}
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
appearance: none;
margin: 0;
}
}
</style>
<script>
export default {
data() {
return {
codeCount: 4,
eventObj: {},
pasteResult: [],
};
},
props: ['code'],
computed: {
input() {
if (this.code && Array.isArray(this.code) && this.code.length === this.codeCount) {
return this.code;
} else if (/^\d{this.codeCount}$/.test(this.code.toString())) {
return this.code.toString().split('');
} else if (this.pasteResult.length === this.codeCount) {
return this.pasteResult;
} else {
return new Array(this.codeCount);
}
},
is_weixn(){
const ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}
},
methods: {
// 解决一个输入框输入多个字符
inputEvent(e) {
var index = e.target.dataset.index * 1;
var el = e.target;
// el.value = el.value.replace(/Digit|Numpad/i, '').replace(/1/g, '').slice(0, 1);
this.$set(this.input, index, el.value)
},
keydown(e) {
var index = e.target.dataset.index * 1;
var el = e.target;
if (e.key === 'Backspace') {
if (this.input[index].length > 0) {
this.$set(this.input, index, '')
} else {
if (el.previousElementSibling) {
el.previousElementSibling.focus()
this.$set(this.input, index - 1, '')
}
}
} else if (e.key === 'Delete') {
if (this.input[index].length > 0) {
this.$set(this.input, index, '')
} else {
if (el.nextElementSibling) {
this.$set(this.input, index = 1, '')
}
}
if (el.nextElementSibling) {
el.nextElementSibling.focus()
}
} else if (e.key === 'Home') {
el.parentElement.children[0] && el.parentElement.children[0].focus()
} else if (e.key === 'End') {
el.parentElement.children[this.input.length - 1] && el.parentElement.children[this.input.length - 1].focus()
} else if (e.key === 'ArrowLeft') {
if (el.previousElementSibling) {
el.previousElementSibling.focus()
}
} else if (e.key === 'ArrowRight') {
if (el.nextElementSibling) {
el.nextElementSibling.focus()
}
} else if (e.key === 'ArrowUp') {
if (this.input[index] * 1 < 9) {
this.$set(this.input, index, (this.input[index] * 1 + 1).toString());
}
} else if (e.key === 'ArrowDown') {
if (this.input[index] * 1 > 0) {
this.$set(this.input, index, (this.input[index] * 1 - 1).toString());
}
}
},
keyup(e) {
var index = e.target.dataset.index * 1;
var el = e.target;
// 解决输入e的问题
var reg = /Digit|Numpad/i;
this.eventObj = JSON.stringify(e);
el.value = el.value.replace(reg, '').slice(0, 1);
if (reg.test(e) || this.is_weixn) {
// 必须在这里符直，否则输入框会是空值
this.$set(this.input, index, el.value);
el.nextElementSibling && el.nextElementSibling.focus();
if (index === this.codeCount-1) {
if (this.input.join('').length === this.codeCount) {
document.activeElement.blur();
this.$emit('complete', this.input);
}
}
} else {
if (this.input[index] === '') {
this.$set(this.input, index, '');
}
}
},
mousewheel(e) {
var index = e.target.dataset.index;
if (e.wheelDelta > 0) {
if (this.input[index] * 1 < 9) {
this.$set(this.input, index, (this.input[index] * 1 + 1).toString());
}
} else if (e.wheelDelta < 0) {
if (this.input[index] * 1 > 0) {
this.$set(this.input, index, (this.input[index] * 1 - 1).toString());
}
} else if (e.key === 'Enter') {
if (this.input.join('').length === this.codeCount) {
document.activeElement.blur();
this.$emit('complete', this.input);
}
}
},
paste(e) {
// 当进行粘贴时
e.clipboardData.items[0].getAsString(str => {
if (str.toString().length === this.codeCount) {
this.pasteResult = str.split('');
document.activeElement.blur();
this.$emit('complete', this.input);
this.pasteResult = [];
} else {
// 如果粘贴内容不合规，清除所有内容
this.input[0] = new Array(6)
}
})
}
},
mounted() {
// 等待dom渲染完成，在执行focus,否则无法获取到焦点
this.$nextTick(() => {
this.$refs.firstinput.focus()
})
},
}
</script>
src/components/vue-number-scroll/index.vue
+3
View File
@@ -69,12 +69,15 @@ export default {
<style lang="scss">
/*金额滚动数字设置*/
.vue-number-scroll{
margin-bottom: .5rem;
margin-top: .3rem;
.box-item {
width: 100%;
text-align: center;
line-height: 40px;
font-size: 1rem;
padding: 2% 0;
height: 1.3rem;
position: relative;
list-style: none;
text-orientation: upright;
src/pages/buddha-detail/index.vue
+3
View File
@@ -153,6 +153,9 @@ export default {
font-size: .37rem;
letter-spacing: 1px;
}
& * {
max-width: 100% !important;
}
}
.purchase {
background: #cf9e3b;
src/pages/everyday-donation/index.vue
+39 -18
View File
@@ -69,7 +69,8 @@
</div>
<ul class="spec">
<li class="random">
<span class="border-circle" @click="showRandom = true">随喜</span>
<!-- <span class="border-circle" @click="showRandom = true">随喜</span>-->
<span class="border-circle" @click="onCustomeBrike">随喜</span>
</li>
<li v-for="(spec, index) in data.spec" :key="index">
<span class="border-circle" :class="[Number(spec.money) === priceUnit && 'active', isDisabled(spec)]" @click="onPriceUnit(spec)">{{spec.money}}元</span>
@@ -86,7 +87,7 @@
<div class="donate">
<span class="label">行善时间</span>
<span class="time-cycle">
<van-stepper v-model="number" step="1" />
<van-stepper v-model="monthQuantity" step="1" />
<span class="unit">个月</span>
</span>
</div>
@@ -143,9 +144,10 @@
</safe-area>
</div>
</div>
</van-popup>
<random-money :value.sync="showRandom"></random-money>
<!-- 随喜金额 -->
<random-money :value.sync="showRandom" @change="onRandomNext"></random-money>
</div>
</template>
@@ -172,7 +174,6 @@ export default {
for(let i in query){
query[i] = query[i].toString()
}
console.log(query)
let onlySpecs = query.spec_ids ? query.spec_ids.split(',').map(v => Number(v)) : null;
return {
@@ -222,21 +223,29 @@ export default {
},
methods: {
isDisabled(spec){
const { id } = spec;
if(!this.onlySpecs) return false;
return !this.onlySpecs.includes(id) ? 'spec-disabled': ''
},
getSelectedSpec() {
if(this.query.goods_type === '2'){
const { goods_type } = this.query;
if(goods_type === '2' || goods_type === '1'){
// 随喜
if(this.is_assign){
return {
specId: '',
specName: this.data.rule_btn
specName: goods_type === '1' ? '随喜': this.data.rule_btn
}
}
const spec = this.data.spec.find(item => item.id === this.priceUnitId);
if(!spec){
return {
specId: '',
specName: ''
}
}
return {
specId: spec.id,
specName: spec.spec_name,
@@ -258,12 +267,14 @@ export default {
await this.getDynamicDataByGoodsId(goods_id);
this.data = response;
if(!this.onlySpecs){
this.priceUnit = this.data.spec[0].donate_number * Number(this.data.price)
this.priceUnitId = this.data.spec[0].id;
const { donate_number, money, id } = this.data.spec[0];
const priceUnit = donate_number || money;
this.priceUnit = Number(priceUnit) * Number(this.data.price)
this.priceUnitId = id;
}
},
async getDynamicDataByGoodsId(goods_id){
const res = await getDynamicData(1, goods_id);
const res = await getDynamicData(1, 1, goods_id);
this.goodsDynamicList = res.results;
},
onMoreProcess() {
@@ -278,14 +289,19 @@ export default {
},
// 设置行善单价
onPriceUnit({id, money}){
this.is_assign = false;
this.priceUnit = Number(money);
this.priceUnitId = id;
this.buy_quantity = 1;
if(this.query.goods_type === '2'){
this.is_assign = false;
}
this.spec_id = '';
},
onRandomNext({ money}){
this.anyPrice = money;
this.priceUnit = money;
this.onToPay();
},
onToPay(){
// 不需要跳转到功德芳名
if(this.query.goods_type === '1'){
this.$router.push({
name: 'pay',
@@ -294,10 +310,12 @@ export default {
is_auto: this.is_auto ? 1 : 0,
spec_id: this.priceUnitId,
friendly_time: this.monthQuantity,
title: this.title,
subTitle: this.data.spec.find(item => item.id === this.priceUnitId).spec_name,
title: this.data.name,
subTitle: '日行一善捐赠',
quantity: 1,
amount: this.priceTotal,
is_customized: 0,
is_customized: this.is_assign ? 1 : 0,
price: this.priceUnit,
from: 'friendly_day', // 标识为日行一善
}
})
@@ -315,7 +333,8 @@ export default {
title: this.data.name,
subTitle: this.getSelectedSpec().specName,
amount: this.priceTotal,
is_customized: 0,
is_customized: this.is_assign ? 1 : 0,
price: this.priceUnit,
buy_quantity: this.buy_quantity,
from: 'brike', // 标识为填砖加瓦
}
@@ -327,8 +346,10 @@ export default {
},
// 自定义砖数
onCustomeBrike(){
this.priceUnit = Number(this.data.price);
this.priceUnit = Number(this.data.price) || 0;
this.buy_quantity = 1;
this.is_assign = true;
this.showRandom = true;
}
}
}
src/pages/fill-name/index.vue
+8 -2
View File
@@ -70,7 +70,6 @@ export default {
this.showDesire = true;
},
onMeritName(meritNameArr){
console.log(meritNameArr)
this.merit_names = meritNameArr;
},
onMeritDesire(desire){
@@ -86,6 +85,12 @@ export default {
if(!this.mobile){
return this.$toast.fail('请填写功德主手机号');
}
console.log('query', {
...this.$route.query,
dream: this.dream,
merit_name: this.meritName,
mobile: this.mobile,
})
this.$router.push({
name: 'pay',
query: {
@@ -104,6 +109,7 @@ export default {
.fill-name{
background: #f9f9f9;
height: 100vh;
position: relative;
.panel-wrapper{
padding: .3rem;
}
@@ -159,7 +165,7 @@ export default {
position: absolute;
left: .3rem;
right: .3rem;
bottom: .5rem;
bottom: calc(.5rem + env(safe-area-inset-bottom));
border: 1px solid $primary-color;
border-radius: 100px;
background: white;
src/pages/get-user-phone/index.vue
+138 -30
View File
@@ -1,47 +1,94 @@
<template>
<van-form @submit="onSubmit">
<van-field
v-model="mobile"
name="手机号码"
label="手机号"
type="tel"
placeholder="请输入手机号"
:rules="[{ required: true, message: '请输入手机号' }]"
>
<template #extra>
<van-button v-if="countdown === 0" type="primary" size="mini" native-type="button" @click.stop.prevent="onSendCode">发送验证码</van-button>
<van-button v-else size="mini">{{countdown}}秒后重发</van-button>
</template>
</van-field>
<van-field
v-model="validCode"
type="tel"
name="验证码"
label="验证码"
placeholder="验证码"
:rules="[{ required: true, message: '请填写密码' }]"
/>
<div style="margin: 16px;">
<van-button round block type="info" native-type="submit">提交</van-button>
<!-- <van-form @submit="onSubmit">-->
<!-- <van-field-->
<!-- v-model="mobile"-->
<!-- name="手机号码"-->
<!-- label="手机号"-->
<!-- type="tel"-->
<!-- placeholder="请输入手机号"-->
<!-- :rules="[{ required: true, message: '请输入手机号' }]"-->
<!-- >-->
<!-- <template #extra>-->
<!-- <van-button v-if="countdown === 0" type="primary" size="mini" native-type="button" @click.stop.prevent="onSendCode">发送验证码</van-button>-->
<!-- <van-button v-else size="mini">{{countdown}}秒后重发</van-button>-->
<!-- </template>-->
<!-- </van-field>-->
<!-- <van-field-->
<!-- v-model="validCode"-->
<!-- type="tel"-->
<!-- name="验证码"-->
<!-- label="验证码"-->
<!-- placeholder="验证码"-->
<!-- :rules="[{ required: true, message: '请填写密码' }]"-->
<!-- />-->
<!-- <div style="margin: 16px;">-->
<!-- <van-button round block type="info" native-type="submit">提交</van-button>-->
<!-- </div>-->
<!-- </van-form>-->
<div style="height: 100%">
<div class="top" v-if="!sended">
<h1 class="title">阿弥陀佛，</h1>
<h1 class="title">欢迎来到自在福田</h1>
<div class="inner">
<div class="field">
<input type="tel" v-model="mobile" maxlength="11" placeholder="请输入手机号码">
</div>
<p class="tip">未注册的手机号验证后自动创建账户</p>
<van-button class="btn" type="info" :disabled="validMobile" block @click="onSendCode">获取短信验证码</van-button>
<p class="desc">自在福田，广种福田，护持寺院，功德无量</p>
<p class="agree">登录即表明同意<a @click="onAgreement(1)">《自在福田用户协议》</a>和<a @click="onAgreement(1)">《隐私政策》</a></p>
</div>
</div>
</van-form>
<div class="top" v-if="sended">
<h1 class="title">请输入验证码</h1>
<p class="send-to">验证码已发送至 {{mobile | fmMobile}}</p>
<sms-code-input :code="validCode" @complete="onSubmitBefore"></sms-code-input>
<p class="resend"><span>{{countdown}}</span>秒后重新发送验证码</p>
<van-button type="info" :disabled="!(validCode.length === 4)" block @click="onSubmit">提交</van-button>
</div>
</div>
</template>
<script>
import { getMobileValidateCode, postMobileCode } from '@/api';
import SmsCodeInput from '@/components/sms-code-input'
export default {
components: {
SmsCodeInput
},
data() {
return {
mobile: '',
validCode: '',
countdown: 0,
timer: null,
sended: false,
};
},
filters: {
fmMobile(val){
return val.replace(/(\d{3})(\d{4})/, "$1 $2 ")
}
},
computed: {
validMobile(){
const reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
return !reg.test(this.mobile)
},
},
methods: {
async onSubmit(values) {
console.log('submit', values);
onAgreement(agreeId){
this.$router.push({ name: 'user-temple-station-agreement', query: { agreeId }})
},
onSubmitBefore(code){
this.validCode = code
this.onSubmit();
},
async onSubmit() {
const { mobile, validCode } = this;
if(!mobile){
return this.$toast('请输入手机号')
@@ -49,12 +96,13 @@ export default {
if(!validCode){
return this.$toast('请输入验证码')
}
const res = await postMobileCode(mobile, validCode)
const res = await postMobileCode(mobile, validCode.join(''))
if(res){
this.$toast.success('验证成功')
this.$delay(500);
this.$router.back();
// this.$router.back();
this.$bus.$emit('updateMobile')
this.$router.replace({ name: 'user-home'})
}
},
onSendCode(){
@@ -66,6 +114,7 @@ export default {
getMobileValidateCode(mobile).then(success => {
if(success){
this.$toast('发送成功，请注意查收短信');
this.sended = true;
if(this.countdown === 0){
this.countdown = 60;
this.countdownSecond()
@@ -86,6 +135,65 @@ export default {
</script>
<style scoped>
<style lang="scss" scoped>
.top{
padding: 0 .5rem;
padding-top: 2rem;
font-size: .35rem;
.title{
font-size: .6rem;
margin-top: .3rem;
font-weight: bold;
}
.inner{
margin-top: 2rem;
.field{
background: #f1f1f1;
margin-bottom: .2rem;
padding: .1rem .4rem;
input{
height: .8rem;
background: transparent;
border: none;
display: block;
width: 100%;
font-size: .4rem;
}
}
.tip{
font-size: .3rem;
margin-bottom: 1.2rem;
color: #888;
}
.desc{
font-size: .4rem;
text-align: center;
padding-top: 2rem;
}
.agree{
font-size: .35rem;
text-align: center;
position: absolute;
left: 0;
right: 0;
bottom: 2rem;
a{
color: $primary-color;
}
}
}
.send-to{
font-size: .35rem;
margin-top: .2rem;
}
.resend{
padding-top: .6rem;
margin-bottom: 3rem;
span{
color: $primary-color;
padding-right: .2rem;
}
}
}
</style>
src/pages/home.vue
+42 -1
View File
@@ -96,7 +96,48 @@ export default {
})
},
locationTo(nav) {
window.location.href = nav.url;
// nav.type: 0外部链接，1日行一善商品，2添砖加瓦类商品，3通用商品，4功德箱，5进展动态
if(nav.type === 0){
window.location.href = nav.url;
return
}
if(nav.type === 5){
this.$router.push({
name: 'buddha-detail',
query: { id: nav.dynamic_id }
})
return
}
if(nav.type === 4){
this.$router.push({
name: 'merit-box'
})
return
}
if(nav.type === 3){
this.$router.push({
name: 'goods-detail',
query: {
goods_type: nav.type,
goods_id: nav.goods_id ,
temple_id: nav.temple_id,
}
})
}
if(nav.type === 1 || nav.type === 2){
this.$router.push({
name: 'everyday-donation',
query: {
goods_type: nav.type,
goods_id: nav.goods_id ,
temple_id: nav.temple_id,
},
});
}
},
async getTempleIndex() {
const res = await getTempleIndex(this.query.temple_id);
src/pages/pay/index.vue
+2 -8
View File
@@ -58,26 +58,20 @@ export default {
})
},
methods: {
onContinuePayOrder(){
this.onPayment({ id: this.query.order_id })
},
async onCreatePayOrder(){
// 创建日行一善支付订单
if(this.query.goods_type == '1'){
const request = {
...this.query,
}
const request = { ...this.query }
const order = await createFriendlyDayOrder(request)
this.onPayment(order)
return
}
// 创建填砖加瓦订单
if(this.query.goods_type == '2'){
const request = {
...this.query,
}
const request = { ...this.query }
const order = await createBrickDayOrder(request)
await this.onPayment(order)
return
src/pages/temple-home/index.vue
+49 -7
View File
@@ -9,11 +9,11 @@
</div>
<div class="certed-temple" @click="$router.push({name: 'temple-detail', query: { temple_id: query.temple_id}})">
<img class="cert-icon" src="@/assets/img/cert.jpg" alt="">
<span class="text">佛教协会认证寺院 可放心访问</span>
<span class="text">认证寺院可放心访问</span>
<span class="btn">查看</span>
</div>
<div class="container">
<div class="swiper">
<div class="swiper" v-if="data.banner_data.length > 0">
<van-swipe class="my-swipe" :autoplay="8000" indicator-color="white">
<van-swipe-item v-for="(banner, index) in data.banner_data" :key="index">
<img :src="banner.cover" alt="" @click="$router.push({ path: banner.url})">
@@ -23,7 +23,7 @@
<van-swipe class="grid-nav" :loop="false">
<van-swipe-item v-for="(item, index) in data.icon_data" :key="index">
<van-grid :border="false">
<van-grid-item icon="photo-o" :text="nav.name" v-for="(nav, _index) in item" :key="_index">
<van-grid-item icon="photo-o" :text="nav.name" v-for="(nav, _index) in item" :key="_index" @click="locationTo(nav)">
<img :src="nav.icon_url" class="nav-icon" slot="icon">
</van-grid-item>
</van-grid>
@@ -143,6 +143,50 @@ export default {
this.getUserData();
},
methods: {
locationTo(nav) {
// nav.type: 0外部链接，1日行一善商品，2添砖加瓦类商品，3通用商品，4功德箱，5进展动态
if(nav.type === 0){
window.location.href = nav.url;
return
}
if(nav.type === 5){
this.$router.push({
name: 'buddha-detail',
query: { id: nav.dynamic_id }
})
return
}
if(nav.type === 4){
this.$router.push({
name: 'merit-box'
})
return
}
if(nav.type === 3){
this.$router.push({
name: 'goods-detail',
query: {
goods_type: nav.type,
goods_id: nav.goods_id ,
temple_id: nav.temple_id,
}
})
}
if(nav.type === 1 || nav.type === 2){
this.$router.push({
name: 'everyday-donation',
query: {
goods_type: nav.type,
goods_id: nav.goods_id ,
temple_id: nav.temple_id,
},
});
}
},
onPushForRouteName(routeName){
this.$router.push({ name: routeName })
},
@@ -217,7 +261,7 @@ export default {
display: block;
}
.user-dynamic-container {
margin-top: 0.5rem;
margin-top: 0.3rem;
height: 1.26rem;
overflow: hidden;
.van-swipe {
@@ -360,7 +404,7 @@ export default {
word-break: break-all;
-webkit-line-clamp: 3;
text-align: justify;
height: 4.3em;
max-height: 4.3em;
-webkit-box-orient: vertical;
color: #999;
}
@@ -402,8 +446,6 @@ export default {
}
.grid-nav {
margin-bottom: .8rem;
.nav-icon {
width: 1.07rem;
height: 1.07rem;
src/pages/user/temple-station/index.vue
+83 -11
View File
@@ -32,16 +32,16 @@
<span @click.stop="onAgreement">同意自在福田服务协议</span>
</van-checkbox>
</div>
<van-button type="warning" :disabled="!canNextStep2" block @click="onNextStep">下一步</van-button>
<van-button type="warning" :disabled="!canNextStep2" block @click="onNextStep(1)">下一步</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="机构代码、信用代码（18位）" />
<van-field label="机构代码" v-model="form.institution_code" name="机构代码" maxlength="18" placeholder="机构代码、信用代码（18位）" />
<van-field label="省份城市" v-model="form.city_name" name="省份城市" is-link readonly placeholder="省份城市" @click="showProvince = true" />
<van-field label="详细地址" v-model="form.details_address" name="详细地址" placeholder="请输入详细地址" >
<van-field label="详细地址" v-model="form.details_address" name="详细地址" placeholder="请输入详细地址" @blur="onUpdateLatLng">
<template #right-icon>
<van-button type="info" size="small" @click="onGetAddress">自动获取</van-button>
</template>
@@ -56,7 +56,7 @@
<span class="label">您是寺院法人？</span>
<van-checkbox v-model="form.is_representd" shape="aquare"></van-checkbox>
</div>
<van-field v-if="!form.is_representd" label="注册人" placeholder="请输入真实姓名"></van-field>
<van-field v-if="!form.is_representd" v-model="form.register_name" label="注册人" placeholder="请输入真实姓名"></van-field>
<van-field label="手机号码" v-model="form.login_mobile" placeholder="请输入手机号码" type="tel" />
<van-field label="登录密码" v-model="form.password" placeholder="请输入至少6位数字、字母和符号组合" type="password"></van-field>
<van-field label="确认密码" v-model="form.password_confirm" placeholder="请确认密码" type="password"></van-field>
@@ -73,9 +73,14 @@
<p class="label">平台入驻管理员微信</p>
<p class="notice">审核通过后将微信通知入驻上架具体事宜</p>
<div class="button-group">
<van-button type="default" block class="prev" @click="onNextStep(-1)">上一步</van-button>
<van-button type="warning" block class="confirm" @click="onSubmit">提交</van-button>
</div>
</div>
<div class="loading" v-if="loading">
<div class="loading-mask" @touchmove.stop.prevent></div>
<van-loading size="50px"></van-loading>
</div>
<van-popup v-model="showProvince" round position="bottom" safe-area-inset-bottom>
<van-cascader
@@ -91,13 +96,14 @@
</template>
<script>
import { getRegion, postTemple } from '@/api'
import { getRegion, getStationTemplate, postTemple } from '@/api';
import { getLocation } from '@/common/wechat-web';
import TMAPLoader from '@/common/tmap';
import Schema from 'async-validator';
export default {
data(){
// eslint-disable-next-line no-unused-vars
const testForm = {
// register_cert_url: [{url: 'https://caiyuehui.oss-cn-hangzhou.aliyuncs.com/uploads/dev/2021/11/04/phpjXpokW.jpeg'}],
register_cert_url: [],
@@ -118,8 +124,8 @@ export default {
password: '123456', // 登录密码
password_confirm: '123456', // 确认密码
}
console.log(testForm)
return {
loading: false,
query: this.$route.query,
active: 0,
agreement: true, // 是否同意寺院联盟服务协议
@@ -167,7 +173,8 @@ export default {
},
// form: testForm,
geocoder: null,
TMap: null
TMap: null,
selectedOptions: [],
}
},
computed: {
@@ -194,11 +201,28 @@ export default {
});
},
mounted(){
if(this.$route.query.template_id){
return this.getStationTemplate()
}
if(this.form.register_cert_url.length === 0 && Number(this.$route.query.step) !== 1){
return this.$router.push({ query: { step: 1 }});
}
},
methods: {
async getStationTemplate(){
this.loading = true;
const data = await getStationTemplate(this.$route.query.template_id);
this.loading = false;
data.register_cert_url = data.register_cert_url.split(',').map(item => ({ url: item }));
data.is_representd = data.is_representd === 1;
this.form = { ...this.form, ...data }
const selectedOptions = [];
const province = this.cityOptions.find(item => item.value === data.province_id);
selectedOptions.push(province);
const city = province.children.find(item => item.value === data.city_id);
selectedOptions.push(city)
this.onFinishProvince({ selectedOptions })
},
onAgreement(){
this.$router.push({ name: 'user-temple-station-agreement' })
},
@@ -210,20 +234,41 @@ export default {
}
}
},
onNextStep(){
this.$router.push({ query: { step: this.step + 1 }})
onNextStep(step = 1){
this.$router.push({ query: { step: this.step + step }})
},
onGetAddress(){
getLocation().then(({ longitude, latitude}) => {
const location = new this.TMap.LatLng(latitude, longitude)
this.geocoder.getAddress({ location }).then(res => {
console.log('geocoder：', res)
this.form.details_address = res.result.address
this.form.lng = longitude
this.form.lat = latitude
})
})
},
async getLatLngByAddress(addressText){
return new Promise((resolve, reject) => {
this.loading = true;
const cityAddress = this.selectedOptions.map(v => v.text).join('')
this.geocoder.getLocation({address: cityAddress + addressText}).then(res => {
this.loading = false
resolve(res.result.location)
}).catch(error => {
this.loading = false;
if(error.status === 347){
this.$toast.fail('未查询到地址信息，请核对地址')
reject();
}
});
})
},
// 根据地址更新坐标
async onUpdateLatLng({ target: { value }}){
const { lat, lng } = await this.getLatLngByAddress(value)
this.form.lat = lat;
this.form.lng = lng;
},
getParams(){
getRegion().then(city => {
this.cityOptions = city
@@ -239,7 +284,7 @@ export default {
return this.handleErrors(errors)
}
//
this.onNextStep();
this.onNextStep(1);
}))
},
async onSubmit(){
@@ -256,6 +301,7 @@ export default {
this.$router.replace({ name: 'user-home'})
},
onFinishProvince({selectedOptions}){
this.selectedOptions = selectedOptions;
this.showProvince = false;
this.form.city_name = selectedOptions.map(v => v.text).join(' / ')
this.form.city_id = selectedOptions.map(v => v.value)
@@ -342,6 +388,27 @@ export default {
}
}
.loading{
position: fixed;
left: 0;top:0;right: 0;bottom: 0;
width: 3rem;
height: 3rem;
background: rgba(0,0,0,0.6);
margin: auto;
border-radius: .3rem;
font-size: .3rem;
color: white;
display: flex;
justify-content: center;
align-items: center;
.loading-mask{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
}
.form{
padding: .4rem 0;
.group{
@@ -398,6 +465,11 @@ export default {
}
.button-group{
margin-top: 2rem;
display: flex;
.prev{
margin-right: .3rem;
width: 3rem;
}
}
}
.button-group{