This commit is contained in:
2021-11-04 21:20:31 +08:00
parent c5c2f661a0
commit ec0724c873
38 changed files with 6870 additions and 189 deletions
+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)
}
}
+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;
+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>
+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;
}
}
}
+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{
+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;
})
},
+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;