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

123

Browse Source
This commit is contained in:
wenfp
2021-11-04 21:20:31 +08:00
parent c5c2f661a0
commit ec0724c873
38 changed files with 6870 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+13 -8
View File
@@ -9,6 +9,9 @@
<script>
import { tabbar } from '../src/router'
import { getWechatSign } from './api'
import { signToWechat } from './common/wechat-web';
export default {
name: 'App',
data(){
@@ -21,22 +24,24 @@ export default {
provide(){
return {
root: this,
tabbar: this.$refs.tabbar
}
},
computed: {
showTabbar(){
const path = tabbar.map(tab => tab.path);
return path.includes(this.$route.path)
tabbar: this.$refs.tabbar,
showTabbar: false,
}
},
components: {
},
beforeCreate: () => {
getWechatSign(location.href).then(res => {
signToWechat(res)
})
},
watch: {
'$route': {
immediate: true,
handler(to){
const path = tabbar.map(tab => tab.path);
document.title = to.meta.title || '自在福田';
this.showTabbar = path.includes(path)
}
}
},
@@ -52,7 +57,7 @@ export default {
<style>
@import '~@/assets/css/reset.css';
@import '//at.alicdn.com/t/font_2897403_zb1glrkwpij.css';
@import '//at.alicdn.com/t/font_2897403_4wpxnjzf9qy.css';
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
src/api/index.js
+14 -1
View File
@@ -59,6 +59,16 @@ const getMeritName = () => service.get(`/api/order/get-merit-list`)
// 添加功德芳名
const postMeritName = name => service.post(`/api/order/create-merit-name?name=${name}`)
// 获取微信签名
const getWechatSign = url => service.get(`/api/wx/sign?url=${url}`)
// 获取功课列表
const getCourseList = () => service.get(`/api/course/get-list`);
// 获取功课详情
const getCourseDetail = course_id => service.get(`/api/course/get-details/${course_id}`);
export {
getMonkAppellation,
getRegion,
@@ -70,5 +80,8 @@ export {
getMeritName,
createFriendlyDayOrder,
createBrickDayOrder,
postMeritName
postMeritName,
getWechatSign,
getCourseList,
getCourseDetail
}
src/api/service.js
+17
View File
@@ -1,14 +1,27 @@
import axios from 'axios';
import { Toast } from 'vant';
import qs from 'qs'
const baseURL = process.env.NODE_ENV === 'development' ? '/' : process.env.VUE_APP_HOST
const instance = axios.create({
baseURL,
timeout: 15000,
headers: {
"Accept": "*",
"Content-Type": "application/x-www-form-urlencoded"
},
})
instance.interceptors.request.use(request => {
if(request.url.includes('upload')){
return request
}
if(request.method === 'post' && !request.url.includes('post')){
request.data = qs.stringify(request.data)
return request;
}
return request;
})
@@ -17,6 +30,10 @@ instance.interceptors.response.use(response => {
if(response.data.code === 0){
return response.data.data;
}
if(response.data.code === 100007){
location.href = '/api/wx/oauth'
return
}
if(response.data.code !== 0){
Toast.fail(response.data.message)
}
src/assets/img/background.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

src/assets/scss/common.scss
+7
View File
@@ -95,4 +95,11 @@
border-color: $primary-color;
}
color: $primary-color;
}
.multiple-line-3{
overflow : hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
src/common/wechat-web.js
+48 -14
View File
@@ -1,15 +1,49 @@
export default {
install(Vue){
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: 123, // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表
});
wx.ready(function(){
Vue.prototype.$wx = wx;
})
// export default {
// install(Vue){
// wx.config({
// debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
// appId: '', // 必填，公众号的唯一标识
// timestamp: 123, // 必填，生成签名的时间戳
// nonceStr: '', // 必填，生成签名的随机串
// signature: '',// 必填，签名
// jsApiList: [] // 必填，需要使用的JS接口列表
// });
// wx.ready(function(){
// Vue.prototype.$wx = wx;
// })
// }
// }
let wechatInstance;
function signToWechat(config){
if(!wx){
console.warn('请安装微信网页JS-SDK, url: https://res2.wx.qq.com/open/js/jweixin-1.6.0.js');
}
}
const defaultConfig = {
debug: true,
}
return new Promise((resolve) => {
wx.config({
...defaultConfig,
...config,
})
wx.ready(function(){
console.warn('wechat sdk config success')
wechatInstance = wx;
resolve(wx)
})
})
}
function getLocation(){
return new Promise(resolve => {
wechatInstance.getLocation({
type: 'wgs84',
success: res => {
resolve(res)
}
})
})
}
export { signToWechat, getLocation };
src/components/content-expand/index.vue
+76
View File
@@ -0,0 +1,76 @@
<template>
<div class="content-expand">
<div class="content" :class="[contentOverflow && !show && 'multiple-line-3']" ref="wrapper" :style="{height: (show ? contentHeight : 50) + 'px'}">
<div ref="content">
<slot></slot>
</div>
</div>
<span class="expand" v-if="contentOverflow" @click="toggle">
<i class="iconfont icon-double-arrow-down-" :class="[show && 'iconfont-expand']"></i>
</span>
</div>
</template>
<script>
export default {
name: 'content-expand',
data(){
return {
wrapperHeight: 0,
contentHeight: 0,
show: false,
wrapperContainerHeight: 0
}
},
computed: {
contentOverflow: {
get(){
return this.contentHeight > this.wrapperHeight;
}
}
},
mounted(){
this.wrapperHeight = this.$refs.wrapper.offsetHeight
this.contentHeight = this.$refs.content.offsetHeight
this.$nextTick(() => {
this.wrapperContainerHeight = this.wrapperHeight;
})
},
methods: {
toggle(){
this.show = !this.show
}
}
}
</script>
<style lang="scss">
.content-expand{
.content{
line-height: 1.4;
font-size: .35rem;
color: #888;
letter-spacing: 1px;
text-align: justify;
margin-top: .3rem;
overflow: hidden;
height: 4em;
transition: height .3s linear;
}
.expand{
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 1.07rem;
color: #888;
.iconfont{
display: inline-block;
}
.iconfont-expand{
transform: rotateZ(180deg);
}
}
}
</style>
src/components/index.js
+4
View File
@@ -6,6 +6,8 @@ import BuddhaProcess from './buddha-process';
import MeritGoods from './merit-goods';
import Order from './order';
import ScrollView from './scroll-view'
import Uploader from './uploader'
import ContentExpand from './content-expand'
Vue.component(UserMerit.name, UserMerit)
Vue.component(Temple.name, Temple)
@@ -13,3 +15,5 @@ Vue.component(BuddhaProcess.name, BuddhaProcess)
Vue.component(MeritGoods.name, MeritGoods)
Vue.component(Order.name, Order)
Vue.component(ScrollView.name, ScrollView)
Vue.component(Uploader.name, Uploader)
Vue.component(ContentExpand.name, ContentExpand)
src/components/uploader/index.vue
+58
View File
@@ -0,0 +1,58 @@
<template>
<van-uploader class="custom-uploader" v-bind="$attrs" :max-size="maxCount * maxSize" :max-count="maxCount" v-model="fileList" @oversize="onOversize" :after-read="onBeforeUpload"></van-uploader>
</template>
<script>
import { uploadFile } from '@/api'
export default {
name: 'uploader',
props: {
maxCount: {
type: Number,
},
maxSize: Number,
value: {
type: Array,
default(){
return []
}
}
},
data(){
return {
fileList: []
}
},
watch: {
fileList(val){
this.$emit('input', val)
}
},
methods: {
onOversize(){
console.log(this.$props)
this.$toast(`文件大小不能超过${this.$props.maxSize}kb`)
},
async onBeforeUpload(obj){
const type = Object.prototype.toString;
if(type.call(obj) === '[object Object]'){
const formData = new FormData();
formData.append('photo', obj.file)
const res = await uploadFile(formData)
obj.url = res.url
}
if(type.call(obj) === '[object Array]'){
for(let file of obj){
const formData = new FormData();
formData.append('photo', file.file)
const res = await uploadFile(formData)
file.url = res.url
}
}
},
}
}
</script>
src/main.js
+2 -2
View File
@@ -1,16 +1,16 @@
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper';
import App from './App.vue'
import delay from 'delay'
import router from './router';
import '@/assets/js/flexable.js';
import './common/vant';
import './components/index'
import 'swiper/css/swiper.css'
import WechatWeb from './common/wechat-web';
Vue.config.productionTip = false
Vue.prototype.$delay = delay;
Vue.use(VueAwesomeSwiper)
Vue.use(WechatWeb)
new Vue({
render: h => h(App),
src/pages/pay/index.vue
+5 -5
View File
@@ -34,7 +34,7 @@
</template>
<script>
import { createFriendlyDayOrder, createBrickDayOrder, createCommonOrder } from '@/api';
import { createFriendlyDayOrder, createBrickDayOrder } from '@/api';
export default {
components: {
@@ -65,11 +65,11 @@ export default {
}
const request = {
...this.query
}
// const request = {
// ...this.query
// }
createCommonOrder(request)
// createCommonOrder(request)
}
}
src/pages/user/approve/index.vue
+11 -10
View File
@@ -45,21 +45,19 @@
<template #input>
<div>
<p class="input-small-tip">照片需清晰美观，用于信众展示</p>
<van-uploader v-model="uploader" />
<uploader v-model="form.avatar_url" :max-count="1" />
</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" />
<uploader v-model="form.cert_url" :max-count="1" />
</div>
</template>
</van-field>
@@ -69,6 +67,9 @@
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>
@@ -106,8 +107,8 @@ export default {
rank_text: '', // 称谓
region: '',
place_temple: '', // 驻赐寺院
avatar_url: 'http://test.url',
cert_url: 'http://test.url',
avatar_url: [], // 法师照片
cert_url: [], // 戒牒照片
description: ''
},
cascaderValue: [3,40, 431],
@@ -126,11 +127,15 @@ export default {
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.authing = true;
},
@@ -162,10 +167,6 @@ export default {
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;
src/pages/user/course/count/index.vue
+200
View File
@@ -0,0 +1,200 @@
<template>
<div class="course-detail-count" v-if="data">
<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="course-container">
<h1 class="title border-bottom">
<span class="title-text">{{data.name || '波若波罗密多心经'}}</span>
<span class="feedback">回向文</span>
</h1>
<h2 class="content-name">经文内容</h2>
<p class="content" v-html="data.content"></p>
</div>
<div class="divider"></div>
<div class="operation">
<div class="bar">
<div class="btn-group">
<span class="btn">直接报数</span>
<span class="btn">智能计数</span>
</div>
<span class="volumn">
<i class="iconfont icon-shengyinkai"></i>
</span>
</div>
<h4 class="volumn-count">0</h4>
<div class="picture-wrapper">
<span></span>
</div>
</div>
</div>
</template>
<script>
import { getCourseDetail } from "@/api"
export default {
data(){
const { query } = this.$route;
return {
query,
data: null,
}
},
mounted(){
this.getCourseDetail();
},
methods: {
async getCourseDetail(){
const res = await getCourseDetail(this.query.id);
this.data = res;
},
}
}
</script>
<style lang="scss">
.course-detail-count{
background-size: 100%;
.on-count{
position: fixed;
right: 0;
bottom: 4rem;
padding: 0 .7rem;
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
background: $primary-color;
opacity: 0.8;
height: 1.07rem;
line-height: 1.07rem;
font-size: .4rem;
color: white;
}
.course-container{
padding: 0 .4rem;
flex: 1;
.title{
height: 1.2rem;
line-height: 1.2rem;
display: flex;
justify-content: space-between;
.feedback{
font-size: .4rem;
color: $primary-color;
}
.title-text{
font-size: .5rem;
color: #555;
}
}
.content-name{
font-size: .45rem;
color: #666;
padding-top: .5rem;
}
.content{
font-size: .4rem;
line-height: 1.8;
letter-spacing: 2px;
text-align: justify;
margin-top: .5rem;
color: #777;
padding-bottom: .5rem;
height: 40vh;
overflow-y: scroll;
}
}
.operation{
.bar{
display: flex;
justify-content: space-between;
height: 1.2rem;
align-items: center;
padding: 0 .4rem;
span{
}
.volumn{
display: inline-block;
width: 1.2rem;
height: 1.2rem;
text-align: center;
line-height: 1.2rem;
.iconfont{
font-size: .5rem;
}
}
}
.btn-group{
display: flex;
font-size: .4rem;
flex: 1;
.btn{
background: $primary-color;
color: white;
font-size: .3rem;
border-radius: 2px;
display: inline-block;
margin-right: .2rem;
padding: .2rem .4rem;
}
}
.volumn-count{
text-align: center;
font-size: 1.3rem;
padding: .5rem 0;
color: #666;
}
.picture-wrapper{
width: 3rem;
height: 3rem;
border-radius: 3rem;
margin-left: auto;
margin-right: auto;
margin-top: .3rem;
position: relative;
&::before{
content: '';
width: 3rem;
height: 3rem;
border-radius: 3rem;
position: absolute;
left: -.2rem;
top: -.2rem;
border: .2rem solid $primary-color;
transition: transform .1s linear;
transform-origin: center center;
}
&::after{
content: '';
width: 3rem;
height: 3rem;
border-radius: 3rem;
position: absolute;
left: -.2rem;
top: -.2rem;
border: .2rem solid #ddd;
}
&:active{
&::before{
animation: scale .1s linear;
}
&::after{
border-color: $primary-color;
}
}
}
}
}
@keyframes scale {
0%{
transform: scale(1, 1);
}
100%{
transform: scale(1.2, 1.2);
opacity: 0;
}
}
</style>
src/pages/user/course/detail/index.vue
+80 -48
View File
@@ -1,18 +1,18 @@
<template>
<div class="course-detail">
<div class="course-detail" v-if="data">
<div class="topbar" ref="topbar">
<van-nav-bar left-arrow :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
<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="course-container">
<div class="practice">
<h1 class="title">阿弥陀佛圣号</h1>
<h1 class="title">{{data.name}}</h1>
<div class="accumulation">
<p>
<span>今日计数 / 今日目标（遍）：</span>
<span>
<b>23</b>
<b>{{data.now_count}}</b>
<i>/</i>
<b>108</b>
<b>{{data.now_target}}</b>
<i class="iconfont icon-bianjisekuai"></i>
</span>
</p>
@@ -20,16 +20,16 @@
<div class="progress-bar">
<div class="progress-inline"></div>
</div>
<span class="">50%</span>
<span class="progress-text">{{data.progress || 0}}%</span>
</div>
</div>
<div class="accumulation">
<p>
<span>总计数 / 总目标（遍）：</span>
<span>
<b>23</b>
<b>{{data.count}}</b>
<i>/</i>
<b>108</b>
<b>{{data.target}}</b>
<i class="iconfont icon-bianjisekuai"></i>
</span>
</p>
@@ -37,7 +37,7 @@
<div class="progress-bar">
<div class="progress-inline"></div>
</div>
<span class="">50%</span>
<span class="progress-text">50%</span>
</div>
</div>
</div>
@@ -45,23 +45,18 @@
<div class="buddhist-scriptures">
<div class="scriptures">
<h3 class="title">功德利益</h3>
<p class="content">
<span>功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益</span>
</p>
<span class="expand">
<i class="iconfont icon-arrow-down"></i>
</span>
<content-expand>
<span v-html="data.profit"></span>
</content-expand>
</div>
<div class="scriptures">
<h3 class="title">经文内容</h3>
<p class="content">
<span>功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益</span>
</p>
<span class="expand">
<i class="iconfont icon-arrow-down"></i>
</span>
<content-expand>
<span v-html="data.content"></span>
</content-expand>
</div>
</div>
<div class="divider"></div>
<a href="#">
<img src="" alt="">
</a>
@@ -75,7 +70,7 @@
</div>
</div>
<div class="body">
<div class="user-merit-course" v-for="i in 10" :key="i">
<div class="user-merit-course border-bottom" v-for="i in 10" :key="i">
<img
src="https://img0.baidu.com/it/u=199023397,1701150760&fm=26&fmt=auto"
alt=""
@@ -98,32 +93,75 @@
<div class="button-buff">
<button class="button">恭请法师加持</button>
</div>
<!-- 计数 -->
<div class="on-count" @click="onToCount">
计数
</div>
</div>
</template>
<script>
import { getCourseDetail } from "@/api"
export default {
data(){
const { query } = this.$route;
return {
query,
data: null,
}
},
mounted(){
this.getCourseDetail();
},
methods: {
async getCourseDetail(){
const res = await getCourseDetail(this.query.id);
this.data = res;
},
onToCount(){
this.$router.push({
name: 'user-course-count',
query: { id: this.data.id }
})
}
}
}
</script>
<style lang="scss">
.course-detail{
background: url('~@/assets/img/background.jpeg') top center no-repeat;
background-size: 100%;
.on-count{
position: fixed;
right: 0;
bottom: 4rem;
padding: 0 .7rem;
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
background: $primary-color;
opacity: 0.8;
height: 1.07rem;
line-height: 1.07rem;
font-size: .4rem;
color: white;
}
.course-container{
padding: .4rem;
background: #f5f5f5;
border-bottom: 1px solid #ddd;
.practice{
.title{
font-size: .4rem;
font-size: .5rem;
color: white;
padding-top: .4rem;
margin-bottom: 1.33rem;
}
.accumulation{
font-size: .35rem;
margin-bottom: .8rem;
p{
color: white;
font-size: .4rem;
.iconfont{
margin-left: .4rem;
display: inline-block;
@@ -131,25 +169,31 @@ export default {
}
.progress{
display: flex;
margin-top: .4rem;
margin-top: .2rem;
align-items: center;
color: white;
.progress-bar{
flex: 1;
border-radius: 8px;
margin-right: .27rem;
height: .13rem;
height: .3rem;
background: #ddd;
position: relative;
.progress-inline{
position: absolute;
left: 0;
top: 0;
height: .13rem;
height: .3rem;
width: 50%;
background: #188fff;
border-radius: 8px;
}
}
.progress-text{
width: .7rem;
display: inline-block;
text-align: right;
}
}
}
@@ -157,22 +201,14 @@ export default {
}
.buddhist-scriptures{
padding: .4rem;
margin-top: .9rem;
.scriptures{
margin-bottom: .4rem;
.title{
font-size: .4rem;
font-weight: bold;
}
.content{
padding: .2rem 0;
line-height: 1.2;
font-size: .4rem;
}
.expand{
text-align: center;
display: block;
height: 1.07rem;
line-height: 1.07rem;
}
}
}
@@ -206,7 +242,6 @@ export default {
.user-merit-course{
display: flex;
padding: .27rem 0.4rem;
border-bottom: 1px solid #ddd;
img {
width: 1.17rem;
height: 1.17rem;
@@ -222,7 +257,7 @@ export default {
margin-bottom: .27rem;
span:first-child {
font-size: 0.4rem;
color: #222;
color: #777;
vertical-align: top;
display: inline-block;
margin-right: .4rem;
@@ -246,11 +281,8 @@ export default {
padding: .13rem 0;
text-align: right;
.money {
font-size: 0.37rem;
}
.date {
font-size: 0.32rem;
color: #666;
font-size: 0.35rem;
color: #777;
}
}
}
src/pages/user/course/index.vue
+32 -15
View File
@@ -1,32 +1,32 @@
<template>
<div class="course">
<div class="course" v-if="data">
<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="course-container">
<div class="my-course border-bottom">
<h3 class="title">我的功课</h3>
<p class="progress">已修行<span>0</span>天 功课总计<span>0</span>遍</p>
<p class="progress">已修行<span>{{data.practise_day}}</span>天 功课总计<span>{{data.practise_total}}</span>遍</p>
</div>
<div class="course-wrapper">
<div class="course-item" v-for="i in 10" :key="i">
<img src="https://img1.baidu.com/it/u=3055253142,1855499744&fm=26&fmt=auto" alt="">
<div class="course-item" v-for="course in data.list" :key="course.id" @click="$router.push({name: 'user-course-detail', query: { id: course.id}})">
<img :src="course.cover" alt="">
<div class="course-info">
<h3 class="title">阿弥陀佛圣号</h3>
<h3 class="title">{{course.name}}</h3>
<p class="summary">
<span>
<i class="iconfont icon-shuben-"></i>
<b>总58遍</b>
<b>总{{course.target}}遍</b>
</span>
<span>
<i class="iconfont icon-shuben-"></i>
<b>今日58遍</b>
<b>今日{{course.now_target}}遍</b>
</span>
</p>
<div class="progress-group">
<label for="">今日进度 <span>60%</span></label>
<label for="">今日进度 <span>{{course.progress}}%</span></label>
<div class="progress-bar">
<div class="progress"></div>
<div class="progress" :style="{width: course.progress + '%'}"></div>
</div>
</div>
</div>
@@ -37,10 +37,25 @@
</template>
<script>
import { getCourseList } from '@/api';
export default {
data(){
return {
data: null,
courseList: []
}
},
mounted(){
this.getCourseList()
},
methods: {
async getCourseList(){
const res = await getCourseList();
console.log(res)
this.data = res;
}
}
}
</script>
@@ -91,6 +106,7 @@ export default {
.summary{
font-size: .30rem;
padding: .1rem 0;
margin-top: .2rem;
span{
vertical-align: middle;
display: inline-block;
@@ -108,12 +124,13 @@ export default {
}
.progress-group{
font-size: .35rem;
padding-top: .8rem;
padding-top: .6rem;
label{
font-size: .35rem;
color: #333;
font-size: .3rem;
color: #666;
span{
color: red;
color: $primary-color;
font-weight: bold;
}
}
.progress-bar{
src/pages/user/index.vue
+1 -2
View File
@@ -1,5 +1,5 @@
<template>
<div class="user-home" v-show="data">
<div class="user-home" v-if="data">
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
<div class="light">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx4.sinaimg.cn%2Forj360%2F97cc0d35ly1fwmdvbemq4j20zk0k0taz.jpg&refer=http%3A%2F%2Fwx4.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638084364&t=1e0d9bd2dcb2906674f8b5142889db7a" alt="">
@@ -70,7 +70,6 @@ export default {
},
mounted(){
getUserData().then(data => {
console.log(data)
this.data = data;
})
},
src/pages/user/temple-station/index.vue
+85 -53
View File
@@ -20,17 +20,18 @@
<div class="infor" v-if="step === 1">
<p class="title">请准备好如下材料的扫描件或彩色照片，要求清晰可辨认：</p>
<div class="cert-group">
<p class="cert">《宗教场地登记证》</p>
<p class="cert">《宗教场地登记证》<span>（最多5张）</span></p>
<div class="uploader">
<van-uploader :max-size="500 * 1024" @oversize="onOversize" :after-read="onBeforeUpload"></van-uploader>
<!-- <van-uploader :max-size="5000 * 1024" v-model="registerFileList" @oversize="onOversize" :max-count="1" :after-read="onBeforeUpload"></van-uploader> -->
<uploader :max-size="3000" :max-count="5" v-model="form.register_cert_url" multiple></uploader>
</div>
</div>
<p class="attention">寺院联盟认证将谨慎、严格的验证真实性，能够更好地保护寺院及用户的合法权益。</p>
<p class="attention">认证资料仅在寺院联盟后台进行备注和核实信息使用，通过认证后将展示在认证页面。</p>
<div class="agreement">
<van-checkbox v-model="checked">同意寺院联盟服务协议</van-checkbox>
<van-checkbox v-model="agreement">同意寺院联盟服务协议</van-checkbox>
</div>
<van-button type="warning" block @click="onNextStep">下一步</van-button>
<van-button type="warning" :disabled="!canNextStep2" block @click="onNextStep">下一步</van-button>
</div>
<div class="form" v-if="step === 2">
<van-form>
@@ -39,29 +40,25 @@
<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="请输入详细地址" >
<van-field label="详细地址" v-model="form.details_address" name="详细地址" placeholder="请输入详细地址" >
<template #right-icon>
<van-button type="info" size="small">自动获取</van-button>
<van-button type="info" size="small" @click="onGetAddress">自动获取</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.mobile" name="手机号码" placeholder="请输入法人手机号码" type="tel"/>
<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>
<van-checkbox v-model="form.is_representd" 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>
<van-field v-if="!form.is_representd" 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>
</div>
</van-form>
<div class="button-group">
@@ -83,59 +80,87 @@
</template>
<script>
import { getMonkAppellation, getRegion, postTemple, uploadFile } from '@/api'
import { getMonkAppellation, getRegion, postTemple } from '@/api'
import { getLocation } from '@/common/wechat-web';
export default {
data(){
const testForm = {
// register_cert_url: [{url: 'https://caiyuehui.oss-cn-hangzhou.aliyuncs.com/uploads/dev/2021/11/04/phpjXpokW.jpeg'}],
register_cert_url: [],
unit_name: '123', // 单位名称
institution_code: '123123123123123123', // 机构代码
province_id: 3, // 省份ID
city_name: 32, // 省份ID
city_id: [3, 23, 32],
details_address: '孤男弘法寺', // 详细地址
lng: 103.5, // 经度
lat: 23, // 纬度
represent: '赵', // 寺院法人
mobile: '13892894922', // 手机号
source: '网络', // 寺院来源
is_representd: false, // 是否为寺院法人
register_name: '赵', // 法人姓名
login_mobile: '13983828488', // 登录手机号
password: '123456', // 登录密码
password_confirm: '123456', // 确认密码
}
return {
query: this.$route.query,
active: 0,
checked: false,
agreement: true, // 是否同意寺院联盟服务协议
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: '', // 确认密码
}
cascaderValue: 0,
fileList: [],
// form: {
// register_cert_url: [],
// unit_name: '', // 单位名称
// institution_code: '', // 机构代码
// province_id: '', // 省份ID
// city_name: '', // 省份ID
// details_address: '', // 详细地址
// lng: '', // 经度
// lat: '', // 纬度
// represent: '', // 寺院法人
// mobile: '', // 手机号
// source: '', // 寺院来源
// is_representd: '', // 是否为寺院法人
// register_name: '', // 法人姓名
// login_mobile: '', // 登录手机号
// password: '', // 登录密码
// password_confirm: '', // 确认密码
// },
form: testForm
}
},
computed: {
step: {
get(){
return Number(this.$route.query.step);
return Number(this.$route.query.step) || 1;
}
},
canNextStep2(){
return this.form.register_cert_url.length > 0 && this.agreement
}
},
mounted(){
if(this.form.register_cert_url.length === 0 && Number(this.$route.query.step) !== 1){
return this.$router.push({ query: { step: 1 }});
}
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 }})
},
onGetAddress(){
getLocation().then(res => {
this.form.lng = res.longitude
this.form.lat = res.latitude
})
},
getParams(){
getMonkAppellation().then(res => {
console.log(res)
@@ -148,8 +173,16 @@ export default {
},
async onSubmit(){
const res = await postTemple(this.form);
const [province_id, city_id, country_id] = this.form.city_id;
const request = {
...this.form,
is_representd: this.is_representd ? 1: 0,
province_id, city_id, country_id,
register_cert_url: this.form.register_cert_url.map(v => v.url),
}
const res = await postTemple(request);
console.log(res)
this.step = 3;
},
onFinishProvince({selectedOptions}){
this.showProvince = false;
@@ -207,16 +240,15 @@ export default {
.cert{
font-size: .37rem;
color: #666;
span{
font-size: .28rem;
}
}
.uploader{
text-align: center;
padding: .4rem 0;
margin-top: .4rem;
}
.van-uploader__upload{
width: 4.33rem;
height: 3.33rem;
}
}
.attention{
font-size: .35rem;
src/router/index.js
+10 -3
View File
@@ -146,15 +146,22 @@ const routes = [
{
path: '',
name: 'user-course-list',
meta: { title: '修行' },
meta: { title: '修行', showNavBar: false },
component: () => import('@/pages/user/course'),
},
{
path: 'detail',
name: 'user-course-detail',
meta: { title: '我的功课' },
meta: { title: '我的功课', showNavBar: false },
component: () => import('@/pages/user/course/detail'),
}, ]
},
{
path: 'count',
name: 'user-course-count',
meta: { title: '我的功课 - 修行', showNavBar: false },
component: () => import('@/pages/user/course/count'),
},
]
},
]
}