对接接口
This commit is contained in:
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div class="buddha-activity">
|
||||
<van-nav-bar left-arrow :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
|
||||
<div class="process-container">
|
||||
<buddha-process v-for="i in 10" :key="i"></buddha-process>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.process-container{
|
||||
padding: .4rem 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,478 @@
|
||||
<template>
|
||||
<div class="everyday-donation" 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>
|
||||
<swiper class="swiper-container" :options="swiperOption">
|
||||
<swiper-slide>
|
||||
<div style="height: 100vw;" class="picture">
|
||||
<img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
|
||||
</div>
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<div style="height: 100vw;" class="picture">
|
||||
<img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div class="monk-profile">
|
||||
<h1 class="position">{{data.name}}</h1>
|
||||
<div class="bar">
|
||||
<span class="status">进行中</span>
|
||||
<span>已有{{data.sales || 0}}人参与</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="panel">
|
||||
<div class="panel-head">
|
||||
<span class="title">进展动态</span>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<buddha-process></buddha-process>
|
||||
<div class="process-more">
|
||||
<span>查看更多进展状态</span>
|
||||
<i class="iconfont icon-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="support">
|
||||
<div class="support-head">
|
||||
<span class="label">感恩功德</span>
|
||||
<ul class="external">
|
||||
<li class="active">实时</li>
|
||||
<li>月榜</li>
|
||||
<li>总榜</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
</div>
|
||||
</div>
|
||||
<div class="merit-button-group border-top">
|
||||
<button class="merit-button" @click="showSpec = true">去行善</button>
|
||||
</div>
|
||||
|
||||
<van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" :close-on-click-overlay="false" :close-on-popstate="true">
|
||||
<!-- 显示日行一善的商品规格 -->
|
||||
<div class="caret" v-if="query.goods_type === '-1'">
|
||||
<div class="head">
|
||||
<span>选择行善金额</span>
|
||||
</div>
|
||||
<ul class="spec">
|
||||
<li class="random">
|
||||
<span class="border-circle">随喜</span>
|
||||
</li>
|
||||
<li v-for="(spec, index) in data.spec" :key="index">
|
||||
<span class="border-circle" :class="[Number(spec.money) === priceUnit && 'active']" @click="onPriceUnit(spec)">{{spec.money}}元</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="auto-donate">
|
||||
<p class="label">自动行善</p>
|
||||
<div class="donate">
|
||||
<span>每天早上六点寺院联盟帮你自动行善一次</span>
|
||||
<van-checkbox v-model="is_auto" shape="square" checked-color="#cf9e3b"></van-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="auto-donate-time" v-if="is_auto">
|
||||
<div class="donate">
|
||||
<span class="label">行善时间</span>
|
||||
<span class="time-cycle">
|
||||
<van-stepper v-model="number" step="1" />
|
||||
<span class="unit">个月</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="next-group">
|
||||
<span class="total">合计：￥{{priceTotal}}</span>
|
||||
<button class="next" @click="onToPay">下一步</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 显示添砖加瓦的商品规格 -->
|
||||
<div class="caret" v-if="query.goods_type === '-2'">
|
||||
<div class="head">
|
||||
<span>选择行善金额</span>
|
||||
</div>
|
||||
<ul class="spec brick-spec">
|
||||
<li class="random">
|
||||
<span class="border-circle" :class="[is_assign && 'active']" @click="onCustomeBrike">自定义砖数认捐</span>
|
||||
<van-stepper v-model="buy_quantity" step="1" />
|
||||
</li>
|
||||
<li v-for="(spec, index) in data.spec" :key="index">
|
||||
<span
|
||||
class="border-circle"
|
||||
:class="[Number(spec.money) === priceUnit && 'active']"
|
||||
@click="onPriceUnit(spec)"
|
||||
>认捐{{spec.donate_number}}块砖 {{spec.money}}元</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="auto-donate">
|
||||
<p class="label">每日填砖</p>
|
||||
<div class="donate">
|
||||
<span>每天早上六点寺院联盟帮你自动填砖一次</span>
|
||||
<van-checkbox v-model="is_auto" shape="square" checked-color="#cf9e3b"></van-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="auto-donate-time" v-if="is_auto">
|
||||
<div class="donate">
|
||||
<span class="label">行善时间</span>
|
||||
<span class="time-cycle">
|
||||
<van-stepper v-model="number" step="1" />
|
||||
<span class="unit">个月</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="next-group">
|
||||
<span class="total">合计：￥{{priceTotal}}</span>
|
||||
<button class="next" @click="onToPay">下一步</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/css/swiper.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
import { getGoodsDetail } from '@/api'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
swiper, swiperSlide
|
||||
},
|
||||
data(){
|
||||
const { query } = this.$route;
|
||||
let title = '详情';
|
||||
if(query.goods_type === '-1'){
|
||||
title = '日行一善';
|
||||
}
|
||||
if(query.goods_type === '-2'){
|
||||
title = '添砖加瓦'
|
||||
}
|
||||
document.title = title;
|
||||
return {
|
||||
documentTitle: title,
|
||||
query,
|
||||
data: null,
|
||||
value: 1,
|
||||
is_auto: false, // 是否自动行善
|
||||
showSpec: true,
|
||||
priceUnit: 0,
|
||||
priceUnitId: '',
|
||||
number: 1,
|
||||
is_assign: false, // 是否为自动认捐砖块数
|
||||
buy_quantity: 1, // 自定义认捐砖块数
|
||||
banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
|
||||
swiperOption: {
|
||||
autoplay: 8000,
|
||||
initialSlide: 1,
|
||||
loop: true,
|
||||
pagination: '.swiper-pagination',
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
priceTotal(){
|
||||
if(this.is_auto){
|
||||
return (parseInt(this.priceUnit * 100, 10) * this.number * 30) / 100
|
||||
}
|
||||
return (parseInt(this.priceUnit * 100, 10) * this.number) / 100;
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
if(this.query.goods_type === '-1'){
|
||||
return this.getGoodsDetail('friendly');
|
||||
}
|
||||
if(this.query.goods_type === '-2'){
|
||||
return this.getGoodsDetail('tile');
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 获取商品详情
|
||||
/*
|
||||
type = friendly: 获取日行一善商品
|
||||
type = tile: 获取添砖加瓦商品
|
||||
type = common: 获取普通商品
|
||||
*/
|
||||
async getGoodsDetail(type){
|
||||
const { goods_id, temple_id } = this.$route.query;
|
||||
const response = await getGoodsDetail(type, goods_id, temple_id);
|
||||
if(this.query.goods_type === '-2'){
|
||||
response.spec = response.spec.map(v => ({ ...v, money: this.amountAbs(v.donate_number, Number(response.price))}))
|
||||
}
|
||||
this.data = response;
|
||||
},
|
||||
// 设置行善单价
|
||||
onPriceUnit({id, money}){
|
||||
this.priceUnit = Number(money);
|
||||
this.priceUnitId = id;
|
||||
if(this.query.goods_type === '-2'){
|
||||
this.is_assign = false;
|
||||
}
|
||||
},
|
||||
onToPay(){
|
||||
if(this.query.goods_type === '-1'){
|
||||
this.$router.push({
|
||||
name: 'pay',
|
||||
query: {
|
||||
...this.$route.query,
|
||||
is_auto: this.is_auto ? 1 : 0,
|
||||
spec_id: this.priceUnitId,
|
||||
friendly_time: this.number,
|
||||
title: this.title,
|
||||
subTitle: this.data.name,
|
||||
amount: this.priceTotal,
|
||||
is_customized: 0,
|
||||
from: 'friendly_day', // 标识为日行一善
|
||||
}
|
||||
})
|
||||
}
|
||||
if(this.query.goods_type === '-2'){
|
||||
this.$router.push({
|
||||
name: 'pay',
|
||||
query: {
|
||||
...this.$route.query,
|
||||
is_auto: this.is_auto ? 1 : 0,
|
||||
is_assign: this.is_assign ? 1 : 0,
|
||||
spec_id: this.priceUnitId,
|
||||
friendly_time: this.number,
|
||||
title: this.title,
|
||||
subTitle: this.data.name,
|
||||
amount: this.priceTotal,
|
||||
is_customized: 0,
|
||||
buy_quantity: this.buy_quantity,
|
||||
from: 'brike', // 标识为填砖加瓦
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
amountAbs(number, price){
|
||||
return (parseInt(number * 100, 10) * price) / 100
|
||||
},
|
||||
// 自定义砖数
|
||||
onCustomeBrike(){
|
||||
this.priceUnit = Number(this.data.price);
|
||||
this.is_assign = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.swiper-container{
|
||||
background: #f5f5f5;
|
||||
.picture, img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.caret{
|
||||
padding-bottom: 2.2rem;
|
||||
.head{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: .4rem;
|
||||
padding: .4rem;
|
||||
align-items: center;
|
||||
margin-top: .13rem;
|
||||
.iconfont{
|
||||
font-size: .7rem;
|
||||
}
|
||||
}
|
||||
.spec{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-gap: .3rem;
|
||||
padding: .4rem;
|
||||
.random{
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 5;
|
||||
text-align: left;
|
||||
span{
|
||||
font-size: .35rem;
|
||||
border-radius: .11rem;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
padding: .3rem .7rem;
|
||||
&:active{
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
li{
|
||||
text-align: center;
|
||||
span{
|
||||
font-size: .35rem;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: .3rem 0;
|
||||
line-height: 1.2;
|
||||
user-select: none;
|
||||
color: #666;
|
||||
&:active{
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.brick-spec{
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: .3rem;
|
||||
.random{
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
span.active{
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
.auto-donate{
|
||||
padding: 0 .4rem;
|
||||
margin-top: .6rem;
|
||||
.label{
|
||||
font-size: .4rem;
|
||||
}
|
||||
.donate{
|
||||
display: flex;
|
||||
margin-top: .3rem;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
span{
|
||||
font-size: .35rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.auto-donate-time{
|
||||
padding: .4rem ;
|
||||
margin-top: .4rem;
|
||||
.donate{
|
||||
.label{
|
||||
font-size: .4rem;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.time-cycle{
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
.unit{
|
||||
font-size: .3rem;
|
||||
color: #666;
|
||||
padding-left: .2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.next-group{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: .4rem ;
|
||||
position: absolute;
|
||||
background: white;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
align-items: center;
|
||||
border-top: 1px solid #ededed;
|
||||
.total{
|
||||
font-size: .4rem;
|
||||
}
|
||||
.next{
|
||||
font-size: .4rem;
|
||||
padding: .3rem 1rem;
|
||||
background: $primary-color;
|
||||
border: 1px solid $primary-color;
|
||||
color: white;
|
||||
border-radius: .1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.support{
|
||||
.support-head{
|
||||
padding: 0 .4rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 1.07rem;
|
||||
line-height: 1.07rem;
|
||||
.label{
|
||||
font-size: .4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.external{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
li{
|
||||
margin-left: .3rem;
|
||||
font-size: .35rem;
|
||||
color: #666;
|
||||
}
|
||||
li.active{
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.everyday-donation{
|
||||
.monk-profile{
|
||||
padding: .4rem;
|
||||
margin-bottom: .2rem;
|
||||
.position{
|
||||
font-size: .5rem;
|
||||
padding-top: .2rem;
|
||||
text-align: justify;
|
||||
line-height: 1.3;
|
||||
color: #19282E;
|
||||
}
|
||||
.bar{
|
||||
margin-top: .27rem;
|
||||
}
|
||||
.status{
|
||||
padding: .2rem .3rem;
|
||||
background: orange;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
border-radius: .04rem;
|
||||
margin-right: .3rem;
|
||||
font-size: .3rem;
|
||||
}
|
||||
span{
|
||||
color: #666;
|
||||
font-size: .28rem;
|
||||
}
|
||||
}
|
||||
.merit-button-group{
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
padding: .4rem 0;
|
||||
.merit-button{
|
||||
display: inline-block;
|
||||
background: $primary-color;
|
||||
color: white;
|
||||
height: 1.2rem;
|
||||
font-size: .37rem;
|
||||
width: 60%;
|
||||
padding: 0 .53rem;
|
||||
border: .01rem solid $primary-color;
|
||||
border-radius: 1.33rem
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-cell-group>
|
||||
<van-cell title="功德芳名" :value="person.name" is-link @click="onAction('name')"/>
|
||||
<van-cell title="心愿" :value="dream" is-link @click="onAction('desire')" />
|
||||
<van-cell title="匿名参与" >
|
||||
<van-switch v-model="checked" size="24px" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
<van-popup v-model="showDialog" position="bottom" :close-on-click-overlay="false" style="min-height: 50vh">
|
||||
<div class="add-merit-name" v-if="actionName === 'name'">
|
||||
<h3 class="title">功德芳名</h3>
|
||||
<div class="add-name">
|
||||
<input class="input" type="text" v-model="name" placeholder="请输入功德主姓名">
|
||||
<button class="btn" @click="addName">添加</button>
|
||||
</div>
|
||||
<div class="name-group">
|
||||
<span class="name" v-for="name in names" :key="name.id" @click="onSelectName(name)">
|
||||
{{name.name}}
|
||||
<i class="iconfont icon-biaodankongjianshanchu"></i>
|
||||
</span>
|
||||
</div>
|
||||
<button class="confirm" @click="showDialog = false">确认</button>
|
||||
</div>
|
||||
<div class="add-merit-name" v-if="actionName === 'desire'">
|
||||
<h3 class="title">心愿</h3>
|
||||
<div class="desire-input">
|
||||
<textarea class="desire-textarea" v-model="desire" type="text" maxlength="50" placeholder="请输入功德主姓名" />
|
||||
<span>{{dream.length}}/50</span>
|
||||
</div>
|
||||
<div class="desire-quike">
|
||||
<div class="bar">
|
||||
<span>快捷输入</span>
|
||||
<span class="update">换一组<i class="iconfont icon-shuaxin"></i></span>
|
||||
</div>
|
||||
<div class="name-group">
|
||||
<span class="name">白头偕老</span>
|
||||
<span class="name">白头偕老</span>
|
||||
<span class="name">白头偕老</span>
|
||||
<span class="name">白头偕老</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="confirm" @click="showDialog = false">确认</button>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getMeritName, postMeritName } from '@/api';
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
checked: false,
|
||||
showDialog: false,
|
||||
actionName: 'name',
|
||||
person: {},
|
||||
dream: '',
|
||||
names: []
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.getName()
|
||||
},
|
||||
methods: {
|
||||
onAction(name){
|
||||
this.showDialog = true;
|
||||
this.actionName = name;
|
||||
},
|
||||
onSelectName(name){
|
||||
this.person = name;
|
||||
this.showDialog = false;
|
||||
},
|
||||
async addName(){
|
||||
if(!this.name) return
|
||||
await postMeritName(this.name)
|
||||
this.name = ''
|
||||
this.getName()
|
||||
},
|
||||
async getName(){
|
||||
const data = await getMeritName();
|
||||
this.names = data;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.add-merit-name{
|
||||
padding: .4rem;
|
||||
.title{
|
||||
font-size: .4rem;
|
||||
margin-bottom: .4rem;
|
||||
}
|
||||
.add-name{
|
||||
display: flex;
|
||||
|
||||
.input{
|
||||
flex: 1;
|
||||
height: .8rem;
|
||||
line-height: .8rem;
|
||||
padding-left: .3rem;
|
||||
font-size: .35rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .11rem;
|
||||
font-size: .4rem;
|
||||
}
|
||||
.btn{
|
||||
padding: .2rem .6rem;
|
||||
background: $primary-color;
|
||||
color: white;
|
||||
border: 1px solid $primary-color;
|
||||
font-size: .4rem;
|
||||
border-radius: .11rem;
|
||||
margin-left: .3rem;
|
||||
}
|
||||
}
|
||||
.name-group{
|
||||
padding: .5rem 0;
|
||||
span{
|
||||
display: inline-block;
|
||||
padding: .2rem .3rem;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .08rem;
|
||||
position: relative;
|
||||
margin-right: .4rem;
|
||||
margin-bottom: .3rem;
|
||||
font-size: .35rem;
|
||||
vertical-align: top;
|
||||
.iconfont{
|
||||
position: absolute;
|
||||
right: -.25rem;
|
||||
top: -.25rem;
|
||||
font-size: .5rem;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
.desire-input{
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .13rem;
|
||||
overflow: hidden;
|
||||
.desire-textarea{
|
||||
border: none;
|
||||
display: block;
|
||||
font-size: .35rem;
|
||||
width: calc(100% - .5rem);
|
||||
padding: .25rem;
|
||||
height: 2rem;
|
||||
resize: none;
|
||||
}
|
||||
span{
|
||||
display: block;
|
||||
text-align: right;
|
||||
padding: .2rem;
|
||||
font-size: .35rem;
|
||||
}
|
||||
}
|
||||
.desire-quike{
|
||||
margin-top: 1rem;
|
||||
.bar{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: .4rem;
|
||||
margin-bottom: .3rem;
|
||||
.update{
|
||||
font-size: .35rem;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
.name-group{
|
||||
padding: .1rem 0;
|
||||
.name{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.confirm{
|
||||
background: $primary-color;
|
||||
color: white;
|
||||
border: 1px solid $primary-color;
|
||||
width: 3rem;
|
||||
padding: .3rem 0;
|
||||
border-radius: .07rem;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
font-size: .4rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<span>
|
||||
<ul class="spec-group">
|
||||
<li class="border-circle">
|
||||
<span>季度放生（每周放/反馈）</span>
|
||||
<span>随喜</span>
|
||||
</li>
|
||||
<li class="border-circle" v-for="spec in data.spec" :key="spec.id" :class="[ value === spec.id && 'active']" @click="onSelectSpec(spec)">
|
||||
<span>{{spec.spec_name}}</span>
|
||||
<span>￥ {{spec.price}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="auto-donate-time">
|
||||
<div class="donate">
|
||||
<span class="label">数量 {{ number}}</span>
|
||||
<span class="time-cycle">
|
||||
<van-stepper v-model="num" step="1" @change="onChangeNumber"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number]
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
},
|
||||
number: Number,
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
num: 0,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
number: {
|
||||
handler: val => {
|
||||
this.num = val;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChangeNumber(value){
|
||||
this.$emit('update:number', value)
|
||||
},
|
||||
onSelectSpec(spec){
|
||||
this.$emit('input', spec.id)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.spec-group{
|
||||
padding: .2rem .4rem;
|
||||
max-height: 50vh;
|
||||
overflow: scroll;
|
||||
li{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 .4rem;
|
||||
font-size: .4rem;
|
||||
height: 1rem;
|
||||
& ~ li{
|
||||
margin-top: .3rem;
|
||||
}
|
||||
}
|
||||
li.active{
|
||||
border-color: $primary-color;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,288 @@
|
||||
<template>
|
||||
<div class="goods-detail" v-if="data">
|
||||
<swiper class="swiper-container" :options="swiperOption">
|
||||
<swiper-slide>
|
||||
<div style="height: 100vw;" class="picture">
|
||||
<img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
|
||||
</div>
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<div style="height: 100vw;" class="picture">
|
||||
<img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div class="monk-profile">
|
||||
<h1 class="position">{{data.name}}</h1>
|
||||
<div class="bar">
|
||||
<span class="status">进行中</span>
|
||||
<span>已有{{data.sales || 0}}人参与</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="support">
|
||||
<div class="support-head">
|
||||
<span class="label">供养者</span>
|
||||
<ul class="external">
|
||||
<li class="active">实时</li>
|
||||
<li>月榜</li>
|
||||
<li>总榜</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-button-group">
|
||||
<button class="merit-button" @click="showSpec = true">{{data.pay_name}}</button>
|
||||
</div>
|
||||
|
||||
<van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" :close-on-click-overlay="false" :close-on-popstate="true">
|
||||
<div class="caret-spec">
|
||||
<div class="head">
|
||||
<span>参与流程： </span>
|
||||
<ul class="step-inline">
|
||||
<li :class="[ current === 0 && 'current']" @click="current = 0">选择类型</li>
|
||||
<li :class="[ current === 1 && 'current']" @click="current = 1">填写信息</li>
|
||||
<li :class="[ current === 2 && 'current']" >参与成功</li>
|
||||
</ul>
|
||||
</div>
|
||||
<transition>
|
||||
<template>
|
||||
<select-spec v-if="current === 0" v-model="spec_id" :data="data"></select-spec>
|
||||
<fill-information v-if="current === 1" :data="data"></fill-information>
|
||||
</template>
|
||||
</transition>
|
||||
<div class="next-group">
|
||||
<span class="total">合计：￥289</span>
|
||||
<button class="next" @click="onNextStep">下一步</button>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/css/swiper.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
import { getGoodsDetail } from '@/api'
|
||||
import SelectSpec from './components/select-spec.vue'
|
||||
import FillInformation from './components/fill-information.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide,
|
||||
SelectSpec,
|
||||
FillInformation
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
query: this.$route.query,
|
||||
showSpec: true,
|
||||
checked: false,
|
||||
current: 0,
|
||||
data: null,
|
||||
value: '',
|
||||
spec_id: '',
|
||||
banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
|
||||
step: 0,
|
||||
swiperOption: {
|
||||
autoplay: 8000,
|
||||
initialSlide: 1,
|
||||
loop: true,
|
||||
pagination: '.swiper-pagination',
|
||||
onSlideChangeEnd: swiper => {
|
||||
console.log('onSlideChangeEnd', swiper.realIndex)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.getGoodsDetail('common');
|
||||
},
|
||||
methods: {
|
||||
onNextStep(){
|
||||
this.current += 1;
|
||||
if(this.current > 3){
|
||||
this.current = 0
|
||||
}
|
||||
},
|
||||
async getGoodsDetail(type){
|
||||
const { goods_id, temple_id } = this.$route.query;
|
||||
const response = await getGoodsDetail(type, goods_id, temple_id);
|
||||
this.data = response;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.goods-detail{
|
||||
.support{
|
||||
.support-head{
|
||||
padding: 0 .4rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 1.07rem;
|
||||
line-height: 1.07rem;
|
||||
.label{
|
||||
font-size: .4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.external{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
li{
|
||||
margin-left: .3rem;
|
||||
font-size: .35rem;
|
||||
color: #666;
|
||||
}
|
||||
li.active{
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper-container{
|
||||
background: #f5f5f5;
|
||||
.picture, img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.monk-profile{
|
||||
padding: .4rem;
|
||||
margin-bottom: .53rem;
|
||||
.position{
|
||||
font-size: .5rem;
|
||||
padding-top: .2rem;
|
||||
color: #19282E;
|
||||
}
|
||||
.introduction{
|
||||
font-size: .37rem;
|
||||
margin-top: .4rem;
|
||||
line-height: 1.3;
|
||||
text-align: justify;
|
||||
color: #666;
|
||||
}
|
||||
.bar{
|
||||
margin-top: .27rem;
|
||||
}
|
||||
.status{
|
||||
padding: .2rem .3rem;
|
||||
background: orange;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
border-radius: .04rem;
|
||||
margin-right: .3rem;
|
||||
font-size: .3rem;
|
||||
}
|
||||
span{
|
||||
color: #666;
|
||||
font-size: .28rem;
|
||||
}
|
||||
}
|
||||
.detail-button-group{
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border-top: .01rem solid #ddd;
|
||||
padding: .3rem;
|
||||
.merit-button{
|
||||
display: inline-block;
|
||||
background: $primary-color;
|
||||
color: white;
|
||||
height: 1.2rem;
|
||||
font-size: .37rem;
|
||||
min-width: 60%;
|
||||
padding: 0 .53rem;
|
||||
border: .01rem solid $primary-color;
|
||||
border-radius: .13rem;
|
||||
}
|
||||
}
|
||||
.caret-spec{
|
||||
padding-bottom: 1.6rem;
|
||||
.head{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: .4rem;
|
||||
padding: .4rem;
|
||||
align-items: center;
|
||||
margin-top: .13rem;
|
||||
.iconfont{
|
||||
font-size: .7rem;
|
||||
}
|
||||
.step-inline{
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
font-size: .35rem;
|
||||
li{
|
||||
display: inline-block;
|
||||
& ~ li:before{
|
||||
content: '-';
|
||||
padding: 0 .1rem;
|
||||
}
|
||||
|
||||
}
|
||||
li.current{
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auto-donate-time{
|
||||
padding: .4rem ;
|
||||
margin-top: .4rem;
|
||||
margin-bottom: 1rem;
|
||||
.donate{
|
||||
.label{
|
||||
font-size: .4rem;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.time-cycle{
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
.unit{
|
||||
font-size: .3rem;
|
||||
color: #666;
|
||||
padding-left: .2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.next-group{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: .4rem ;
|
||||
position: absolute;
|
||||
background: white;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
align-items: center;
|
||||
border-top: 1px solid #ededed;
|
||||
.total{
|
||||
font-size: .4rem;
|
||||
}
|
||||
.next{
|
||||
font-size: .4rem;
|
||||
padding: .3rem 1rem;
|
||||
background: $primary-color;
|
||||
border: 1px solid $primary-color;
|
||||
color: white;
|
||||
border-radius: .1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+163
-20
@@ -3,33 +3,106 @@
|
||||
<van-nav-bar title="自在福田" style="background: #BF9330; color: white" />
|
||||
<van-search v-model="value" placeholder="寺院、主持、监寺" />
|
||||
<div class="container">
|
||||
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
|
||||
<van-swipe-item>
|
||||
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
|
||||
</van-swipe-item>
|
||||
<van-swipe-item>
|
||||
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
|
||||
</van-swipe-item>
|
||||
<van-swipe-item>
|
||||
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
|
||||
</van-swipe-item>
|
||||
<van-swipe-item>
|
||||
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
<van-grid>
|
||||
<van-grid-item icon="photo-o" text="文字" />
|
||||
<van-grid-item icon="photo-o" text="文字" />
|
||||
<van-grid-item icon="photo-o" text="文字" />
|
||||
<van-grid-item icon="photo-o" text="文字" />
|
||||
<div class="swiper">
|
||||
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
|
||||
<van-swipe-item>
|
||||
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
|
||||
</van-swipe-item>
|
||||
<van-swipe-item>
|
||||
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
|
||||
</van-swipe-item>
|
||||
<van-swipe-item>
|
||||
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
|
||||
</van-swipe-item>
|
||||
<van-swipe-item>
|
||||
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
</div>
|
||||
<van-grid :border="false">
|
||||
<van-grid-item icon="photo-o" text="佛前供灯" />
|
||||
<van-grid-item icon="photo-o" text="日行一善" />
|
||||
<van-grid-item icon="photo-o" text="祈福" />
|
||||
<van-grid-item icon="photo-o" text="放生修福" />
|
||||
<van-grid-item icon="photo-o" text="供养三宝" />
|
||||
<van-grid-item icon="photo-o" text="供奉排位" />
|
||||
<van-grid-item icon="photo-o" text="捐建寺院" />
|
||||
<van-grid-item icon="photo-o" text="功德箱" />
|
||||
</van-grid>
|
||||
<van-notice-bar
|
||||
border
|
||||
left-icon="https://img2.baidu.com/it/u=2192265457,2884791613&fm=26&fmt=auto"
|
||||
:scrollable="false"
|
||||
mode="closeable"
|
||||
text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
|
||||
/>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="panel">
|
||||
<div class="panel-head">
|
||||
<span class="title">功德无量</span>
|
||||
<span class="external">更多</span>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="merit-group">
|
||||
<div class="merit">
|
||||
<img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt="">
|
||||
<p class="title">为佛像贴金身，菩萨菩萨</p>
|
||||
</div>
|
||||
<div class="merit">
|
||||
<img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt="">
|
||||
<p class="title">为佛像贴金身，菩萨菩萨</p>
|
||||
</div>
|
||||
<div class="merit">
|
||||
<img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt="">
|
||||
<p class="title">为佛像贴金身，菩萨菩萨</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="panel">
|
||||
<div class="panel-head">
|
||||
<span class="title">进展状态</span>
|
||||
<span class="external">更多</span>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
|
||||
<div class="process-more">
|
||||
<span>查看更多进展状态</span>
|
||||
<i class="iconfont icon-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="merit-rank-container">
|
||||
<div class="head">
|
||||
<span class="title">感恩功德</span>
|
||||
<div class="list">
|
||||
<span class="current">实时</span>
|
||||
<span>月榜</span>
|
||||
<span>总榜</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data(){
|
||||
return {
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -37,8 +110,38 @@ export default {
|
||||
.van-nav-bar__title{
|
||||
color: white;
|
||||
}
|
||||
.merit-rank-container{
|
||||
.head{
|
||||
padding: .53rem .4rem;
|
||||
padding-bottom: .13rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.title{
|
||||
font-size: .43rem;
|
||||
color: #222222;
|
||||
}
|
||||
.list{
|
||||
display: flex;
|
||||
span{
|
||||
font-size: .37rem;
|
||||
color: #999999;
|
||||
display: inline-block;
|
||||
margin-left: .4rem;
|
||||
border-bottom: .03rem solid transparent;
|
||||
padding-bottom: .13rem;
|
||||
}
|
||||
span.current{
|
||||
color: #222;
|
||||
border-bottom-color: rgb(168, 28, 28);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.container{
|
||||
padding: .4rem;
|
||||
padding-bottom: .53rem;
|
||||
.my-swipe .van-swipe-item {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
@@ -50,5 +153,45 @@ export default {
|
||||
border-radius: .16rem;
|
||||
}
|
||||
}
|
||||
.swiper{
|
||||
margin-bottom: .4rem;
|
||||
}
|
||||
.van-notice-bar{
|
||||
border: 1px solid #E6B759;
|
||||
border-radius: .16rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.merit{
|
||||
width: 3.39rem;
|
||||
height: 3.39rem;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border-radius: .16rem;
|
||||
vertical-align: top;
|
||||
overflow: hidden;
|
||||
& ~ .merit{
|
||||
margin-left: .4rem;
|
||||
}
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.title{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: .91rem;
|
||||
background: rgba(0,0,0,0.7);
|
||||
color: white;
|
||||
line-height: .91rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: .37rem;
|
||||
padding: 0 .11rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div class="merit-box">
|
||||
<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="merit-container">
|
||||
<img class="goods-picture" :style="{width: width + 'px', height: width + 'px'}" src="https://img1.baidu.com/it/u=614501043,2936454496&fm=26&fmt=auto" alt="">
|
||||
<div class="merit-rank-container">
|
||||
<div class="head">
|
||||
<span class="title">
|
||||
感恩功德
|
||||
<b class="sub-title">重庆石林寺</b>
|
||||
</span>
|
||||
<div class="list">
|
||||
<span class="current">实时</span>
|
||||
<span>月榜</span>
|
||||
<span>总榜</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
</div>
|
||||
</div>
|
||||
<div class="merit-button-group">
|
||||
<button class="merit-button">随喜功德</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.width = window.innerWidth;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.merit-box{
|
||||
.goods-picture{
|
||||
vertical-align: top;
|
||||
}
|
||||
.merit-rank-container{
|
||||
.head{
|
||||
padding: .53rem .4rem;
|
||||
padding-bottom: .13rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.title{
|
||||
font-size: .43rem;
|
||||
color: #222222;
|
||||
.sub-title{
|
||||
font-size: .35rem;
|
||||
margin-left: .4rem;
|
||||
display: inline-block;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.list{
|
||||
display: flex;
|
||||
span{
|
||||
font-size: .37rem;
|
||||
color: #999999;
|
||||
display: inline-block;
|
||||
margin-left: .4rem;
|
||||
border-bottom: .03rem solid transparent;
|
||||
padding-bottom: .13rem;
|
||||
}
|
||||
span.current{
|
||||
color: #222;
|
||||
border-bottom-color: rgb(168, 28, 28);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.merit-button-group{
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
padding: .4rem 0;
|
||||
border-top: .01rem solid #ddd;
|
||||
.merit-button{
|
||||
display: inline-block;
|
||||
background: $primary-color;
|
||||
color: white;
|
||||
height: .93rem;
|
||||
font-size: .37rem;
|
||||
padding: 0 .53rem;
|
||||
border: .01rem solid $primary-color;
|
||||
border-radius: $btn-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div class="buddha-activity">
|
||||
<van-nav-bar
|
||||
left-arrow
|
||||
:title="$route.meta.title"
|
||||
@click-left="$router.back()"
|
||||
:style="{ backgroundColor: $route.meta.navBarBackgroundColor }"
|
||||
/>
|
||||
<div class="merit-container">
|
||||
<merit-goods v-for="i in 10" :key="i"></merit-goods>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div class="monk-detail">
|
||||
<div class="topbar" ref="topbar">
|
||||
<van-nav-bar left-arrow :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
|
||||
</div>
|
||||
<swiper class="swiper-container" :options="swiperOption">
|
||||
<swiper-slide>
|
||||
<div style="height: 100vw;" class="picture">
|
||||
<img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
|
||||
</div>
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<div style="height: 100vw;" class="picture">
|
||||
<img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div class="monk-profile">
|
||||
<h1 class="position">方丈： 素全大法师</h1>
|
||||
<p class="introduction">素全法师的法名智国，是属羊人，他毕业于电子科技大学，他出生于成都市。他出于对佛教文化的特别喜爱，在1989年于昭觉寺皈依清定上师，法名智国。在2006-7-28日入驻四川省什邡市的罗汉寺，在1994年，于山西五台山碧山寺依本焕大和尚、一诚大和尚、香港圣一大和尚为三师，美国寿冶大和尚为学戒和尚受具足戒。并且在1996～1999年，于山西五台山塔院寺学修。曾任传戒引礼、尊证等职先后参加了四川省佛教协会宝光寺、峨眉山、石经寺、广德寺的传授三坛大戒法会。</p>
|
||||
</div>
|
||||
<div class="support">
|
||||
<div class="support-head">
|
||||
<span class="label">供养者</span>
|
||||
<ul class="external">
|
||||
<li class="active">实时</li>
|
||||
<li>月榜</li>
|
||||
<li>总榜</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
</div>
|
||||
</div>
|
||||
<div class="merit-button-group">
|
||||
<button class="merit-button">供养</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/css/swiper.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
swiper, swiperSlide
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
|
||||
swiperOption: {
|
||||
autoplay: 8000,
|
||||
initialSlide: 1,
|
||||
loop: true,
|
||||
pagination: '.swiper-pagination',
|
||||
onSlideChangeEnd: swiper => {
|
||||
console.log('onSlideChangeEnd', swiper.realIndex)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.swiper-container{
|
||||
background: #f5f5f5;
|
||||
.picture, img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.support{
|
||||
.support-head{
|
||||
padding: 0 .4rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 1.07rem;
|
||||
line-height: 1.07rem;
|
||||
.label{
|
||||
font-size: .4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.external{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
li{
|
||||
margin-left: .3rem;
|
||||
font-size: .35rem;
|
||||
color: #666;
|
||||
}
|
||||
li.active{
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.monk-detail{
|
||||
.monk-profile{
|
||||
padding: .4rem;
|
||||
margin-bottom: .53rem;
|
||||
.position{
|
||||
font-size: .5rem;
|
||||
padding-top: .2rem;
|
||||
color: #19282E;
|
||||
}
|
||||
.introduction{
|
||||
font-size: .37rem;
|
||||
margin-top: .4rem;
|
||||
line-height: 1.3;
|
||||
text-align: justify;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.merit-button-group{
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
padding: .4rem 0;
|
||||
border-top: .01rem solid #ddd;
|
||||
.merit-button{
|
||||
display: inline-block;
|
||||
background: $primary-color;
|
||||
color: white;
|
||||
height: 1.2rem;
|
||||
font-size: .37rem;
|
||||
width: 60%;
|
||||
padding: 0 .53rem;
|
||||
border: .01rem solid $primary-color;
|
||||
border-radius: 1.33rem
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="pay">
|
||||
<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="pay-info">
|
||||
<h1 class="amount"><b>￥</b>{{query.amount}}</h1>
|
||||
<div class="order-info">
|
||||
<h3 class="title">{{query.title}}</h3>
|
||||
<p class="desc">{{query.subTitle}}</p>
|
||||
</div>
|
||||
|
||||
<div class="pay-type">
|
||||
<p class="label">支付方式</p>
|
||||
<van-radio-group v-model="payType">
|
||||
<van-cell-group>
|
||||
<van-cell title="微信" clickable @click="radio = '1'" icon="wechat">
|
||||
<template #icon>
|
||||
<img style="width: 40px" src="@/assets/img/wechat.jpg" alt="">
|
||||
</template>
|
||||
<template #right-icon>
|
||||
<van-radio name="1" />
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
</div>
|
||||
|
||||
<div class="pay-button-container">
|
||||
<van-button block type="primary" round class="pay-button" @click="onCreatePayOrder">确认支付</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createFriendlyDayOrder, createBrickDayOrder, createCommonOrder } from '@/api';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
query: this.$route.query,
|
||||
payType: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async onCreatePayOrder(){
|
||||
// 创建日行一善支付订单
|
||||
if(this.query.goods_type === '-1'){
|
||||
const request = {
|
||||
...this.query,
|
||||
|
||||
}
|
||||
return createFriendlyDayOrder(request)
|
||||
}
|
||||
// 创建填砖加瓦订单
|
||||
if(this.query.goods_type === '-2'){
|
||||
const request = {
|
||||
...this.query,
|
||||
|
||||
}
|
||||
return createBrickDayOrder(request)
|
||||
|
||||
}
|
||||
|
||||
const request = {
|
||||
...this.query
|
||||
}
|
||||
|
||||
createCommonOrder(request)
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.pay{
|
||||
.pay-info{
|
||||
padding-top: 2rem;
|
||||
.amount{
|
||||
b{
|
||||
font-size: .5rem;
|
||||
color: rgb(236, 188, 98);
|
||||
padding-right: .1rem;
|
||||
}
|
||||
text-align: center;
|
||||
font-size: 1.07rem;
|
||||
color: rgb(255, 140, 8);
|
||||
font-weight: bold;
|
||||
}
|
||||
.order-info{
|
||||
margin-top: 1rem;
|
||||
padding: .4rem;
|
||||
.title{
|
||||
font-size: .4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.desc{
|
||||
padding-top: .3rem;
|
||||
color: #666;
|
||||
font-size: .35rem;
|
||||
}
|
||||
}
|
||||
.pay-type{
|
||||
padding: .4rem;
|
||||
margin-top: .6rem;
|
||||
.label{
|
||||
font-size: .4rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: .3rem;
|
||||
}
|
||||
}
|
||||
.pay-button-container{
|
||||
padding: .4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="search-result">
|
||||
<form action="/">
|
||||
<van-search
|
||||
v-model="value"
|
||||
show-action
|
||||
placeholder="请输入搜索关键词"
|
||||
@search="onSearch"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</form>
|
||||
<div class="search-history">
|
||||
<h1 class="title">热门搜索</h1>
|
||||
<div class="search-text-group">
|
||||
<span class="search-text">放生修福<i class="iconfont icon-hotfill"></i></span>
|
||||
<span class="search-text">在宮腔佛</span>
|
||||
<span class="search-text">在宮腔</span>
|
||||
<span class="search-text">在宮腔</span>
|
||||
<span class="search-text">在宮腔</span>
|
||||
<span class="search-text">在宮腔</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-history">
|
||||
<div class="flex">
|
||||
<h1 class="title">历史记录</h1>
|
||||
<span>
|
||||
<i class="iconfont icon-delete"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="search-text-group">
|
||||
<span class="search-text">放生修福</span>
|
||||
<span class="search-text">在宮腔佛</span>
|
||||
<span class="search-text">在宮腔</span>
|
||||
<span class="search-text">在宮腔</span>
|
||||
<span class="search-text">在宮腔</span>
|
||||
<span class="search-text">在宮腔</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
value: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSearch(){
|
||||
|
||||
},
|
||||
onCancel(){
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.search-history{
|
||||
padding: 0 .4rem;
|
||||
margin-bottom: .53rem;
|
||||
.title{
|
||||
font-size: .4rem;
|
||||
color: #222;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.search-text-group{
|
||||
.search-text{
|
||||
font-size: .37rem;
|
||||
color: #222;
|
||||
display: inline-block;
|
||||
padding: .16rem .27rem;
|
||||
border: .01rem solid #ddd;
|
||||
border-radius: .11rem;
|
||||
margin-right: .4rem;
|
||||
}
|
||||
.iconfont{
|
||||
display: inline-block;
|
||||
color: red;
|
||||
margin-left: .13rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="temple-detail">
|
||||
<img class="banner" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg8.zol.com.cn%2Fbbs%2Fupload%2F24237%2F24236884.jpg&refer=http%3A%2F%2Fimg8.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638518604&t=074af50479ac14ca13fc6616380fe0f5" alt="">
|
||||
<div class="authed border-bottom">
|
||||
<span>已通过 寺院联盟 认证 可放心访问</span>
|
||||
</div>
|
||||
|
||||
<div class="auth">
|
||||
<h4 class="title border-bottom">基础信息</h4>
|
||||
<ul class="list">
|
||||
<li>
|
||||
<span class="label">单位名称：</span>
|
||||
<span class="value">重庆石林寺</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="label">登记编号：</span>
|
||||
<span class="value">宗场证字（渝）F3232412324 号</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="label">负责人：</span>
|
||||
<span class="value">道济</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="label">所在地址：</span>
|
||||
<span class="value">深圳市宝安区十包度假村内</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="auth">
|
||||
<h4 class="title border-bottom">认证授权</h4>
|
||||
<ul class="cert">
|
||||
<li>
|
||||
<img src="https://img1.baidu.com/it/u=167820301,4019853019&fm=26&fmt=auto" alt="">
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://img1.baidu.com/it/u=167820301,4019853019&fm=26&fmt=auto" alt="">
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://img1.baidu.com/it/u=167820301,4019853019&fm=26&fmt=auto" alt="">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="auth">
|
||||
<h4 class="title border-bottom">寺院简介</h4>
|
||||
<p class="description">少林寺始建于北魏太和十九年（495年），是孝文帝为了安置他所敬仰的印度高僧跋陀尊者，在与都城洛阳相望的嵩山少室山北麓敕建而成。少林寺常住院占地面积约57600平方米，现任方丈是曹洞正宗第47世、第33代嗣祖沙门释永信。 [1-2] 少林寺是世界著名的佛教寺院，是汉传佛教的禅宗祖庭，在中国佛教史上占有重要地位，被誉为“天下第一名刹”。因其历代少林武僧潜心研创和不断发展的少林功夫而名扬天下，素有“天下功夫出少林，少林功夫甲天下”之说。</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.temple-detail{
|
||||
.banner{
|
||||
width: 100%;
|
||||
}
|
||||
.authed{
|
||||
font-size: .4rem;
|
||||
line-height: 1.2rem;
|
||||
padding-left: .4rem;
|
||||
}
|
||||
.auth{
|
||||
margin: .4rem;
|
||||
margin-top: .8rem;
|
||||
.title{
|
||||
font-size: .4rem;
|
||||
font-weight: bold;
|
||||
padding-bottom: .3rem;
|
||||
}
|
||||
.list{
|
||||
margin-top: .2rem;
|
||||
li{
|
||||
line-height: .8rem;
|
||||
font-size: .4rem;
|
||||
.label{
|
||||
display: inline-block;
|
||||
width: 5em;
|
||||
color: #777;
|
||||
}
|
||||
.value{
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cert{
|
||||
white-space: nowrap;
|
||||
margin-top: .3rem;
|
||||
overflow-x: scroll;
|
||||
li{
|
||||
width: 5rem;
|
||||
display: inline-block;
|
||||
border: 1px solid #ddd;
|
||||
margin-right: .3rem;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.description{
|
||||
font-size: .4rem;
|
||||
color: #666;
|
||||
text-indent: 2em;
|
||||
line-height: 1.4;
|
||||
padding-top: .35rem;
|
||||
letter-spacing: 1px;
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,487 @@
|
||||
<template>
|
||||
<div class="temple-home-page">
|
||||
<div class="temple-home">
|
||||
<span class="temple-name">重庆石林寺</span>
|
||||
<div class="visitor">
|
||||
<span>重庆市大渡口区</span>
|
||||
<span>123232到访</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="certed-temple">
|
||||
<span class="text">佛教协会认证寺院 可放心访问</span>
|
||||
<span class="btn">查看</span>
|
||||
</div>
|
||||
<van-search v-model="value" placeholder="寺院、主持、监寺" />
|
||||
<div class="container">
|
||||
<div class="swiper">
|
||||
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
|
||||
<van-swipe-item>
|
||||
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
|
||||
</van-swipe-item>
|
||||
<van-swipe-item>
|
||||
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
|
||||
</van-swipe-item>
|
||||
<van-swipe-item>
|
||||
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
|
||||
</van-swipe-item>
|
||||
<van-swipe-item>
|
||||
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
</div>
|
||||
<van-grid :border="false">
|
||||
<van-grid-item icon="photo-o" text="佛前供灯" />
|
||||
<van-grid-item icon="photo-o" text="日行一善" />
|
||||
<van-grid-item icon="photo-o" text="祈福" />
|
||||
<van-grid-item icon="photo-o" text="放生修福" />
|
||||
<van-grid-item icon="photo-o" text="供养三宝" />
|
||||
<van-grid-item icon="photo-o" text="供奉排位" />
|
||||
<van-grid-item icon="photo-o" text="捐建寺院" />
|
||||
<van-grid-item icon="photo-o" text="功德箱" />
|
||||
</van-grid>
|
||||
<van-notice-bar
|
||||
border
|
||||
left-icon="https://img2.baidu.com/it/u=2192265457,2884791613&fm=26&fmt=auto"
|
||||
:scrollable="false"
|
||||
mode="closeable"
|
||||
text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
|
||||
/>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="user-dynamic">
|
||||
<img class="avatar" src="https://img2.baidu.com/it/u=2192265457,2884791613&fm=26&fmt=auto" alt="">
|
||||
<span class="username">信众信众信众信众</span>
|
||||
<span class="content">永沐佛恩，慈悲加持，世代永沐佛恩，慈悲加持，世代...</span>
|
||||
<span class="time">2小时前</span>
|
||||
</div>
|
||||
<div class="temple-manager">
|
||||
<div class="manager">
|
||||
<img class="avatar" src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
|
||||
<div class="manager-container">
|
||||
<h3 class="name">住持：素全大法师</h3>
|
||||
<p class="content">
|
||||
<span>素全法师，法名智国，属羊，出生于成都市。2006-7-28日入驻四川省什邡市的罗汉寺。1989年，出于对佛教文化的特别喜爱，于昭觉寺皈依清定上师，法名智国。1992～1996年，受隆莲法师影响和介绍到成都市的龙泉驿区的石经寺依贞意大和尚出家。1994年，于山西五台山碧山寺依本焕大和尚、一诚大和尚、香港圣一大和尚为三师，美国寿冶大和尚为学戒和尚受具足戒。1996～1999年，于山西五台山塔院寺学修。曾任传戒引礼、尊证等职先后参加了四川省佛教协会宝光寺、峨眉山、石经寺、广德寺的传授三坛大戒法会。</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="manager">
|
||||
<img class="avatar" src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
|
||||
<div class="manager-container">
|
||||
<h3 class="name">住持：素全大法师</h3>
|
||||
<p class="content">
|
||||
<span>素全法师，法名智国，属羊，出生于成都市。2006-7-28日入驻四川省什邡市的罗汉寺。1989年，出于对佛教文化的特别喜爱，于昭觉寺皈依清定上师，法名智国。1992～1996年，受隆莲法师影响和介绍到成都市的龙泉驿区的石经寺依贞意大和尚出家。1994年，于山西五台山碧山寺依本焕大和尚、一诚大和尚、香港圣一大和尚为三师，美国寿冶大和尚为学戒和尚受具足戒。1996～1999年，于山西五台山塔院寺学修。曾任传戒引礼、尊证等职先后参加了四川省佛教协会宝光寺、峨眉山、石经寺、广德寺的传授三坛大戒法会。</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-head">
|
||||
<span class="title">功德无量</span>
|
||||
<span class="external">更多</span>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="merit-group">
|
||||
<div class="merit">
|
||||
<img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt="">
|
||||
<p class="title">为佛像贴金身，菩萨菩萨</p>
|
||||
</div>
|
||||
<div class="merit">
|
||||
<img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt="">
|
||||
<p class="title">为佛像贴金身，菩萨菩萨</p>
|
||||
</div>
|
||||
<div class="merit">
|
||||
<img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt="">
|
||||
<p class="title">为佛像贴金身，菩萨菩萨</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="panel">
|
||||
<div class="panel-head">
|
||||
<span class="title">进展状态</span>
|
||||
<span class="external">更多</span>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<buddha-process></buddha-process>
|
||||
<buddha-process></buddha-process>
|
||||
<buddha-process></buddha-process>
|
||||
<div class="process-more">
|
||||
<span>查看更多进展状态</span>
|
||||
<i class="iconfont icon-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="merit-rank-container">
|
||||
<div class="head">
|
||||
<span class="title">感恩功德</span>
|
||||
<div class="list">
|
||||
<span class="current">实时</span>
|
||||
<span>月榜</span>
|
||||
<span>总榜</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-menu-btn" @click="showUserMenu = true">
|
||||
<span><i class="iconfont icon-jingwen"></i></span>
|
||||
<span class="menu-text">菜单</span>
|
||||
</div>
|
||||
|
||||
<van-popup v-model="showUserMenu" position="left" style="width: 80%; height: 100%">
|
||||
<div class="user-menu">
|
||||
<div class="user">
|
||||
<img class="avatar" src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
|
||||
<div class="profile">
|
||||
<h5 class="name">奔跑</h5>
|
||||
<p class="account">用户号: 1452134</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="user-list">
|
||||
<li>
|
||||
<img src="@/assets/img/user-popup/我的善缘.png" alt="">
|
||||
<span>我的善缘</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="@/assets/img/user-popup/联系客服.png" alt="">
|
||||
<span>联系客服</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="@/assets/img/user-popup/功德箱.png" alt="">
|
||||
<span>功德箱</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="@/assets/img/user-popup/查看更多寺院.png" alt="">
|
||||
<span>查看更多寺院</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p class="put-away" @click="showUserMenu = false">
|
||||
<span class="iconfont icon-arrow-left"></span>
|
||||
</p>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
showUserMenu: true,
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scope>
|
||||
.van-nav-bar__title{
|
||||
color: white;
|
||||
}
|
||||
.van-popup{
|
||||
.put-away{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1.3rem;
|
||||
line-height: 1.3rem;
|
||||
border-top: 1px solid #f1f1f1;
|
||||
text-align: right;
|
||||
.iconfont{
|
||||
font-size: .8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-menu{
|
||||
.user{
|
||||
margin-top: 1.33rem;
|
||||
display: flex;
|
||||
padding-left: 1rem;
|
||||
align-items: center;
|
||||
.avatar{
|
||||
width: 1.33rem;
|
||||
height: 1.33rem;
|
||||
border-radius: 1.33rem;
|
||||
margin-right: .4rem;
|
||||
}
|
||||
.profile{
|
||||
.name{
|
||||
font-size: .4rem;
|
||||
color: #666;
|
||||
}
|
||||
.account{
|
||||
margin-top: .2rem;
|
||||
color: #666;
|
||||
font-size: .3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-list{
|
||||
padding-left: 1rem;
|
||||
margin-top: 1rem;
|
||||
margin-right: .6rem;
|
||||
li{
|
||||
height: 1.2rem;
|
||||
line-height: 1.2rem;
|
||||
font-size: .4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img{
|
||||
width: .8rem;
|
||||
margin-right: .27rem;
|
||||
}
|
||||
& ~ li{
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.panel-menu-btn{
|
||||
position: fixed;
|
||||
left: .53rem;
|
||||
bottom: 1.33rem;
|
||||
z-index: 1000;
|
||||
width: 1.33rem;
|
||||
height: 1.33rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background: #f1f1f1;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 50%;
|
||||
.menu-text{
|
||||
font-size: .27rem;
|
||||
margin-top: .1rem;
|
||||
}
|
||||
}
|
||||
.user-dynamic{
|
||||
display: flex;
|
||||
border: 1px solid #d6d6d6;
|
||||
border-radius: .08rem;
|
||||
background: white;
|
||||
padding: .2rem .2rem;
|
||||
margin: .3rem .4rem;
|
||||
align-items: center;
|
||||
.avatar{
|
||||
width: 1.07rem;
|
||||
height: 1.07rem;
|
||||
border-radius: 1.07rem;
|
||||
}
|
||||
.username{
|
||||
padding: 0 .2rem;
|
||||
white-space: nowrap;
|
||||
max-width: 1.33rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: .37rem;
|
||||
}
|
||||
.content{
|
||||
flex: 1;
|
||||
font-size: .32rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-right: .4rem;
|
||||
}
|
||||
.time{
|
||||
font-size: .3rem;
|
||||
color: rgb(105, 105, 105);
|
||||
}
|
||||
}
|
||||
.temple-manager{
|
||||
.manager{
|
||||
display: flex;
|
||||
margin: .4rem;
|
||||
& ~ .manager{
|
||||
border-top: 1px solid #ddd;
|
||||
padding-top: .4rem;
|
||||
}
|
||||
.avatar{
|
||||
width: 1.33rem;
|
||||
height: 1.33rem;
|
||||
border-radius: 1.33rem;
|
||||
}
|
||||
.manager-container{
|
||||
flex: 1;
|
||||
margin-left: .4rem;
|
||||
.name{
|
||||
padding: .3rem .3rem .3rem 0;
|
||||
font-size: .4rem;
|
||||
}
|
||||
.content{
|
||||
font-size: .37rem;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
-webkit-line-clamp: 3;
|
||||
text-align: justify;
|
||||
height: 3.8em;
|
||||
-webkit-box-orient: vertical;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.merit-rank-container{
|
||||
.head{
|
||||
padding: .53rem .4rem;
|
||||
padding-bottom: .13rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.title{
|
||||
font-size: .43rem;
|
||||
color: #222222;
|
||||
}
|
||||
.list{
|
||||
display: flex;
|
||||
span{
|
||||
font-size: .37rem;
|
||||
color: #999999;
|
||||
display: inline-block;
|
||||
margin-left: .4rem;
|
||||
border-bottom: .03rem solid transparent;
|
||||
padding-bottom: .13rem;
|
||||
}
|
||||
span.current{
|
||||
color: #222;
|
||||
border-bottom-color: rgb(168, 28, 28);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.certed-temple{
|
||||
display: flex;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
margin: 0 .4rem;
|
||||
font-size: .37rem;
|
||||
padding: .4rem;
|
||||
margin-bottom: .2rem;
|
||||
.text{
|
||||
flex: 1;
|
||||
font-size: .35rem;
|
||||
color: #666;
|
||||
}
|
||||
.btn{
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
.process-more{
|
||||
line-height: 1.17rem;
|
||||
text-align: center;
|
||||
font-size: .37rem;
|
||||
.iconfont{
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.container{
|
||||
padding: .4rem;
|
||||
padding-bottom: .53rem;
|
||||
.my-swipe .van-swipe-item {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
height: 3.57rem;
|
||||
text-align: center;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: .16rem;
|
||||
}
|
||||
}
|
||||
.swiper{
|
||||
margin-bottom: .4rem;
|
||||
}
|
||||
.van-notice-bar{
|
||||
border: 1px solid #E6B759;
|
||||
border-radius: .16rem;
|
||||
}
|
||||
}
|
||||
|
||||
.panel{
|
||||
.panel-head{
|
||||
padding: .53rem .4rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.title{
|
||||
font-size: .43rem;
|
||||
color: #222222;
|
||||
}
|
||||
.external{
|
||||
font-size: .37rem;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.panel-body{
|
||||
padding: 0 .4rem;
|
||||
overflow-x: scroll;
|
||||
.merit-group{
|
||||
display: flex;
|
||||
width: 11.36rem;
|
||||
margin-bottom: .91rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.merit{
|
||||
width: 3.39rem;
|
||||
height: 3.39rem;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border-radius: .16rem;
|
||||
vertical-align: top;
|
||||
overflow: hidden;
|
||||
& ~ .merit{
|
||||
margin-left: .4rem;
|
||||
}
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.title{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: .91rem;
|
||||
background: rgba(0,0,0,0.7);
|
||||
color: white;
|
||||
line-height: .91rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: .37rem;
|
||||
padding: 0 .11rem;
|
||||
}
|
||||
}
|
||||
.temple-home-page{
|
||||
.temple-home{
|
||||
display: flex;
|
||||
font-size: .37rem;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: .4rem .3rem;
|
||||
.temple-name{
|
||||
font-size: .45rem;
|
||||
}
|
||||
.visitor{
|
||||
color: #666;
|
||||
span{
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="topbar" ref="topbar">
|
||||
<van-nav-bar left-arrow :title="$route.meta.title" v-if="$route.meta.showNavBar" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
|
||||
<van-search v-model="keyword" show-action action-text="搜索" placeholder="请输入寺院、方丈、监院名称" />
|
||||
<div class="operation-bar">
|
||||
<div class="position">
|
||||
<span class="iconfont icon-dingwei"></span>
|
||||
<span>重新定位</span>
|
||||
</div>
|
||||
<div class="show-mode" v-if="mode === 'list'" @click="onModeSwitch('map')">
|
||||
<span>地图模式</span>
|
||||
<span class="iconfont icon-ditu"></span>
|
||||
</div>
|
||||
<div class="show-mode" v-if="mode === 'map'" @click="onModeSwitch('list')">
|
||||
<span>列表模式</span>
|
||||
<span class="iconfont icon-liebiao"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="temple-list-container" :style="{height: containerHeight + 'px'}" >
|
||||
<!-- <div class="temple-container content" v-if="mode === 'list'">
|
||||
<temple v-for="i in 10" :key="i"></temple>
|
||||
</div> -->
|
||||
<scroll-view
|
||||
v-if="mode === 'list'"
|
||||
class="temple-container content"
|
||||
:height="containerHeight - 20"
|
||||
pulldown
|
||||
pullup
|
||||
@pulldown="refresh"
|
||||
@pullup="loadMore"
|
||||
>
|
||||
<temple v-for="i in 10" :key="i"></temple>
|
||||
</scroll-view>
|
||||
<div class="temple-map" id="container" v-show="mode === 'map'">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TMAPLoader from '@/common/tmap';
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
containerHeight: 0,
|
||||
keyword: '',
|
||||
mode: 'list'
|
||||
}
|
||||
},
|
||||
inject: ['root', 'tabbar'],
|
||||
mounted(){
|
||||
this.$nextTick(() => {
|
||||
const { offsetHeight } = this.root.$refs.tabbar.$el;
|
||||
this.containerHeight = window.innerHeight - this.$refs.topbar.offsetHeight - offsetHeight - 20;
|
||||
})
|
||||
TMAPLoader.load({
|
||||
key: process.env.VUE_APP_TMAP_KEY
|
||||
}).then(TMap => {
|
||||
console.log(TMap)
|
||||
var center = new TMap.LatLng(39.984104, 116.307503);
|
||||
//初始化地图
|
||||
var map = new TMap.Map("container", {
|
||||
zoom:12,//设置地图缩放级别
|
||||
center: center//设置地图中心点坐标
|
||||
});
|
||||
console.log(map)
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
onModeSwitch(mode){
|
||||
this.mode = mode;
|
||||
},
|
||||
loadMore(){
|
||||
console.log('加载更多')
|
||||
},
|
||||
refresh(){
|
||||
console.log('refresh')
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.operation-bar{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 .4rem;
|
||||
color: #333;
|
||||
margin-bottom: .4rem;
|
||||
margin-top: .3rem;
|
||||
.position{
|
||||
line-height: .37rem;
|
||||
color: green;
|
||||
span{
|
||||
font-size: .37rem;
|
||||
display: inline-block;
|
||||
margin-right: .13rem;
|
||||
}
|
||||
}
|
||||
.show-mode{
|
||||
line-height: .37rem;
|
||||
span{
|
||||
font-size: .37rem;
|
||||
display: inline-block;
|
||||
margin-left: .13rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.temple-list-container{
|
||||
background: #f5f5f5;
|
||||
overflow: hidden;
|
||||
padding: .3rem;
|
||||
.temple-map{
|
||||
height: 100%;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<div class="mega-approve">
|
||||
<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>
|
||||
<template v-if="authing">
|
||||
<div class="reviewing">
|
||||
<i class="iconfont icon-shizhong"></i>
|
||||
<p class="review-text">审核中</p>
|
||||
<van-button type="warning" @click="authing = false">返回修改</van-button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="!authing">
|
||||
<van-notice-bar
|
||||
text="真实法师社区，法师身份认证审核通过后才能使用"
|
||||
/>
|
||||
<van-form @submit="onSubmit">
|
||||
<van-field
|
||||
v-model="form.nickname"
|
||||
label="法号"
|
||||
placeholder="请输入法号全称"
|
||||
:rules="[{ required: true }]"
|
||||
/>
|
||||
<van-field label="称谓" v-model="form.rank_text" :rules="[{ required: true }]" readonly placeholder="请选择称谓" @click="showTitle = true">
|
||||
<template #right-icon>
|
||||
<span class="iconfont icon-arrow-down-filling"></span>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field label="所在地区" v-model="form.city_name" :rules="[{ required: true }]" readonly placeholder="请选择省-市-区名称" @click="showProvince = true">
|
||||
<template #right-icon>
|
||||
<span class="iconfont icon-arrow-down-filling"></span>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
v-model="form.place_temple"
|
||||
type="text"
|
||||
label="驻赐寺院"
|
||||
placeholder="名称含所在城市； 如：深圳弘法寺"
|
||||
:rules="[{ required: true }]"
|
||||
/>
|
||||
<van-field
|
||||
label="真人头像"
|
||||
placeholder="真人头像"
|
||||
>
|
||||
<template #input>
|
||||
<div>
|
||||
<p class="input-small-tip">照片需清晰美观，用于信众展示</p>
|
||||
<van-uploader v-model="uploader" />
|
||||
</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" />
|
||||
</div>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
v-model="form.description"
|
||||
type="textarea"
|
||||
label="自我介绍"
|
||||
placeholder="向他人展示自己的文字说明"
|
||||
:rules="[{ required: true }]"
|
||||
/>
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="temple" native-type="submit">提交</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</template>
|
||||
|
||||
<!-- 选择称谓 -->
|
||||
<van-action-sheet v-model="showTitle" :actions="actions" @select="onSelect" cancel-text="取消" close-on-click-action/>
|
||||
|
||||
<!-- 选择城市 -->
|
||||
<van-popup v-model="showProvince" round position="bottom">
|
||||
<van-cascader
|
||||
v-model="cascaderValue"
|
||||
title="请选择所在地区"
|
||||
:options="cityOptions"
|
||||
@close="showProvince = false"
|
||||
@finish="onFinishProvince"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getMonkAppellation, getRegion, certifyMonk } from '@/api';
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
showProvince: false, // 显示城市选择
|
||||
showTitle: false, // 显示法师称谓
|
||||
form: {
|
||||
nickname: '', // 法号
|
||||
rank_id: '', // 称谓
|
||||
rank_text: '', // 称谓
|
||||
region: '',
|
||||
place_temple: '', // 驻赐寺院
|
||||
avatar_url: 'http://test.url',
|
||||
cert_url: 'http://test.url',
|
||||
description: ''
|
||||
},
|
||||
cascaderValue: [3,40, 431],
|
||||
cityOptions: [],
|
||||
uploader: [],
|
||||
actions: [],
|
||||
authing: false, // 是否正在认证
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.getParams();
|
||||
},
|
||||
methods: {
|
||||
async onSubmit(e){
|
||||
console.log(e);
|
||||
const [province_id, city_id, county_id] = this.form.city_id;
|
||||
const params = {
|
||||
...this.form,
|
||||
province_id,
|
||||
city_id,
|
||||
county_id
|
||||
}
|
||||
await certifyMonk(params)
|
||||
this.authing = true;
|
||||
},
|
||||
|
||||
getParams(){
|
||||
getMonkAppellation().then(res => {
|
||||
this.actions = res;
|
||||
})
|
||||
getRegion().then(city => {
|
||||
this.cityOptions = city
|
||||
})
|
||||
},
|
||||
onSelect(action){
|
||||
console.log(action)
|
||||
this.form.rank_id = action.id;
|
||||
this.form.rank_text = action.name;
|
||||
},
|
||||
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">
|
||||
.mega-approve{
|
||||
.input-small-tip{
|
||||
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;
|
||||
color: white;
|
||||
}
|
||||
.reviewing{
|
||||
text-align: center;
|
||||
padding-top: 1.33rem;
|
||||
.iconfont{
|
||||
font-size: 2.33rem;
|
||||
color: $primary-color;
|
||||
}
|
||||
.review-text{
|
||||
padding: .4rem 0;
|
||||
font-size: .4rem;
|
||||
}
|
||||
.van-button{
|
||||
width: 60%;
|
||||
margin-top: 1.33rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div class="user-certificate">
|
||||
<div class="certificate" v-for="i in 10" :key="i">
|
||||
<img class="img" src="" alt="">
|
||||
<div class="info">
|
||||
<h3 class="title">为佛像贴金身，每日功德</h3>
|
||||
<span class="date">2021-10-3</span>
|
||||
<p class="number">第<span>12</span>份功德</p>
|
||||
<div class="download">
|
||||
<span class="iconfont icon-24px"></span>
|
||||
<p>下载功德证书</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.user-certificate{
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5 url('https://img1.baidu.com/it/u=3658625472,1613220951&fm=26&fmt=auto') center top no-repeat;
|
||||
background-size: contain;
|
||||
padding-top: 4.67rem;
|
||||
.certificate{
|
||||
display: flex;
|
||||
font-size: .37rem;
|
||||
background: white;
|
||||
margin: .4rem;
|
||||
border-radius: .13rem;
|
||||
padding: .4rem;
|
||||
img{
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
.info{
|
||||
flex: 1;
|
||||
margin-left: .4rem;
|
||||
position: relative;
|
||||
.title{
|
||||
font-size: .4rem;
|
||||
}
|
||||
.date{
|
||||
margin-top: .8rem;
|
||||
display: block;
|
||||
font-size: .35rem;
|
||||
color: #aaa;
|
||||
}
|
||||
.number{
|
||||
margin-top: .15rem;
|
||||
font-size: .35rem;
|
||||
color: #444;
|
||||
span{
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
padding: 0 .13rem;
|
||||
}
|
||||
}
|
||||
.download{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
font-size: .29rem;
|
||||
.iconfont{
|
||||
font-size: .8rem;
|
||||
padding-bottom: .1rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div class="course-detail">
|
||||
<div class="topbar" ref="topbar">
|
||||
<van-nav-bar left-arrow :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>
|
||||
<div class="accumulation">
|
||||
<p>
|
||||
<span>今日计数 / 今日目标（遍）：</span>
|
||||
<span>
|
||||
<b>23</b>
|
||||
<i>/</i>
|
||||
<b>108</b>
|
||||
<i class="iconfont icon-bianjisekuai"></i>
|
||||
</span>
|
||||
</p>
|
||||
<div class="progress">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-inline"></div>
|
||||
</div>
|
||||
<span class="">50%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accumulation">
|
||||
<p>
|
||||
<span>总计数 / 总目标（遍）：</span>
|
||||
<span>
|
||||
<b>23</b>
|
||||
<i>/</i>
|
||||
<b>108</b>
|
||||
<i class="iconfont icon-bianjisekuai"></i>
|
||||
</span>
|
||||
</p>
|
||||
<div class="progress">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-inline"></div>
|
||||
</div>
|
||||
<span class="">50%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#">
|
||||
<img src="" alt="">
|
||||
</a>
|
||||
<div class="merit-rank-container">
|
||||
<div class="head">
|
||||
<span class="title">排行榜</span>
|
||||
<div class="list">
|
||||
<span class="current">实时</span>
|
||||
<span>月榜</span>
|
||||
<span>总榜</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="user-merit-course" v-for="i in 10" :key="i">
|
||||
<img
|
||||
src="https://img0.baidu.com/it/u=199023397,1701150760&fm=26&fmt=auto"
|
||||
alt=""
|
||||
/>
|
||||
<div class="profile">
|
||||
<div>
|
||||
<div class="name">
|
||||
<span>李晓华</span>
|
||||
<span>湖南长沙</span>
|
||||
</div>
|
||||
<p>3</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="result">
|
||||
<p class="money">23 遍</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-buff">
|
||||
<button class="button">恭请法师加持</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.course-detail{
|
||||
.course-container{
|
||||
padding: .4rem;
|
||||
background: #f5f5f5;
|
||||
border-bottom: 1px solid #ddd;
|
||||
.practice{
|
||||
.title{
|
||||
font-size: .4rem;
|
||||
margin-bottom: 1.33rem;
|
||||
}
|
||||
.accumulation{
|
||||
font-size: .35rem;
|
||||
margin-bottom: .8rem;
|
||||
p{
|
||||
.iconfont{
|
||||
margin-left: .4rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.progress{
|
||||
display: flex;
|
||||
margin-top: .4rem;
|
||||
align-items: center;
|
||||
.progress-bar{
|
||||
flex: 1;
|
||||
border-radius: 8px;
|
||||
margin-right: .27rem;
|
||||
height: .13rem;
|
||||
background: #ddd;
|
||||
position: relative;
|
||||
.progress-inline{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: .13rem;
|
||||
width: 50%;
|
||||
background: #188fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.buddhist-scriptures{
|
||||
padding: .4rem;
|
||||
.scriptures{
|
||||
margin-bottom: .4rem;
|
||||
.title{
|
||||
font-size: .4rem;
|
||||
}
|
||||
.content{
|
||||
padding: .2rem 0;
|
||||
line-height: 1.2;
|
||||
font-size: .4rem;
|
||||
}
|
||||
.expand{
|
||||
text-align: center;
|
||||
display: block;
|
||||
height: 1.07rem;
|
||||
line-height: 1.07rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.merit-rank-container{
|
||||
.head{
|
||||
padding: .53rem .4rem;
|
||||
padding-bottom: .13rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.title{
|
||||
font-size: .43rem;
|
||||
color: #222222;
|
||||
}
|
||||
.list{
|
||||
display: flex;
|
||||
span{
|
||||
font-size: .37rem;
|
||||
color: #999999;
|
||||
display: inline-block;
|
||||
margin-left: .4rem;
|
||||
border-bottom: .03rem solid transparent;
|
||||
padding-bottom: .13rem;
|
||||
}
|
||||
span.current{
|
||||
color: #222;
|
||||
border-bottom-color: rgb(168, 28, 28);
|
||||
}
|
||||
}
|
||||
}
|
||||
.body{
|
||||
.user-merit-course{
|
||||
display: flex;
|
||||
padding: .27rem 0.4rem;
|
||||
border-bottom: 1px solid #ddd;
|
||||
img {
|
||||
width: 1.17rem;
|
||||
height: 1.17rem;
|
||||
border-radius: 1.17rem;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
.profile {
|
||||
flex: 1;
|
||||
padding-top: .13rem;
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-bottom: .27rem;
|
||||
span:first-child {
|
||||
font-size: 0.4rem;
|
||||
color: #222;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
margin-right: .4rem;
|
||||
}
|
||||
span:last-child {
|
||||
font-size: 0.32rem;
|
||||
color: #666;
|
||||
vertical-align: text-bottom;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 0.32rem;
|
||||
}
|
||||
}
|
||||
.result {
|
||||
font-size: 0.32rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
padding: .13rem 0;
|
||||
text-align: right;
|
||||
.money {
|
||||
font-size: 0.37rem;
|
||||
}
|
||||
.date {
|
||||
font-size: 0.32rem;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.button-buff{
|
||||
text-align: center;
|
||||
padding: .4rem;
|
||||
.button{
|
||||
background: $primary-color;
|
||||
border: 1px solid $primary-color;
|
||||
font-size: .4rem;
|
||||
color: white;
|
||||
border-radius: .13rem;
|
||||
padding: .27rem .4rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div class="course">
|
||||
<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>
|
||||
</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-info">
|
||||
<h3 class="title">阿弥陀佛圣号</h3>
|
||||
<p class="summary">
|
||||
<span>
|
||||
<i class="iconfont icon-shuben-"></i>
|
||||
<b>总58遍</b>
|
||||
</span>
|
||||
<span>
|
||||
<i class="iconfont icon-shuben-"></i>
|
||||
<b>今日58遍</b>
|
||||
</span>
|
||||
</p>
|
||||
<div class="progress-group">
|
||||
<label for="">今日进度 <span>60%</span></label>
|
||||
<div class="progress-bar">
|
||||
<div class="progress"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.course{
|
||||
.course-container{
|
||||
.my-course{
|
||||
padding: .4rem;
|
||||
margin-bottom: .4rem;
|
||||
.title{
|
||||
font-size: .4rem;
|
||||
}
|
||||
.progress{
|
||||
font-size: .35rem;
|
||||
color: #999;
|
||||
padding-top: .2rem;
|
||||
span{
|
||||
color: $primary-color;
|
||||
padding: 0 .13rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.course-wrapper{
|
||||
padding: 0 .4rem;
|
||||
.course-item{
|
||||
display: flex;
|
||||
padding: .4rem;
|
||||
box-shadow: 0 0 .13rem rgba(0,0,0,0.1);
|
||||
border-radius: .13rem;
|
||||
& ~ .course-item{
|
||||
margin-top: .53rem;
|
||||
}
|
||||
img{
|
||||
width: 2.67rem;
|
||||
height: 2.67rem;
|
||||
vertical-align: top;
|
||||
border-radius: .08rem;
|
||||
}
|
||||
.course-info{
|
||||
flex: 1;
|
||||
margin-left: .53rem;
|
||||
.title{
|
||||
font-size: .4rem;
|
||||
padding-top: .13rem;
|
||||
}
|
||||
.summary{
|
||||
font-size: .30rem;
|
||||
padding: .1rem 0;
|
||||
span{
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
margin-right: .67rem;
|
||||
color: #666;
|
||||
i{
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
b{
|
||||
vertical-align: middle;
|
||||
padding-left: .11rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
.progress-group{
|
||||
font-size: .35rem;
|
||||
padding-top: .8rem;
|
||||
label{
|
||||
font-size: .35rem;
|
||||
color: #333;
|
||||
span{
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
.progress-bar{
|
||||
background: #f5f5f5;
|
||||
margin-top: .2rem;
|
||||
height: .11rem;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
.progress{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: .11rem;
|
||||
width: 50%;
|
||||
background: $primary-color;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div class="customer-page">
|
||||
<div class="title">
|
||||
<img class="icon" src="@/assets/img/heshang.jpg" alt="">
|
||||
<div class="info">
|
||||
<h1>阿弥陀佛，我是客服小僧</h1>
|
||||
<p>使用寺院联盟遇到任何疑问都可以联系我</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="customer-type-group">
|
||||
<img src="https://img1.baidu.com/it/u=2403234292,1073721747&fm=26&fmt=auto" alt="">
|
||||
<div class="info">
|
||||
<h1>在线客服</h1>
|
||||
<p>服务时间：周一至周五 10：00-18：00</p>
|
||||
<p>如不在服务时间，留言后我们会及时与您联系</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="customer-type-group">
|
||||
<img src="https://img1.baidu.com/it/u=2403234292,1073721747&fm=26&fmt=auto" alt="">
|
||||
<div class="info">
|
||||
<h1>电话客服</h1>
|
||||
<p>服务时间：周一至周五 10：00-18：00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="customer-type-group">
|
||||
<img src="https://img1.baidu.com/it/u=2403234292,1073721747&fm=26&fmt=auto" alt="">
|
||||
<div class="info">
|
||||
<h1>客服微信号</h1>
|
||||
<p>点击即可复制微信号，在微信中添加好友，我们会及时与您联系</p>
|
||||
</div>
|
||||
</div>
|
||||
<img class="qrcode" src="https://login.weixin.qq.com/qrcode/4eUoxEzS0A==" alt="">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.customer-page{
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5 url('~@/assets/img/customer_background.jpg') center top no-repeat;
|
||||
background-size: contain;
|
||||
.title{
|
||||
display: flex;
|
||||
font-size: .4rem;
|
||||
height: 4rem;
|
||||
align-items: center;
|
||||
padding: 0 .53rem;
|
||||
.icon{
|
||||
width: 1.33rem;
|
||||
height: 1.33rem;
|
||||
margin-right: .4rem;
|
||||
}
|
||||
.info{
|
||||
color: white;
|
||||
h1{
|
||||
font-size: .4rem;
|
||||
margin-bottom: .27rem;
|
||||
}
|
||||
p{
|
||||
font-size: .37rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.customer-type-group{
|
||||
display: flex;
|
||||
background: white;
|
||||
margin-left: .4rem;
|
||||
margin-right: .4rem;
|
||||
margin-bottom: .4rem;
|
||||
height: 2.67rem;
|
||||
border-radius: .27rem;
|
||||
padding:.2rem .4rem ;
|
||||
align-items: center;
|
||||
img{
|
||||
width: 1.07rem;
|
||||
height: 1.07rem;
|
||||
border-radius: 50%;
|
||||
margin-right: .13rem;
|
||||
}
|
||||
.info{
|
||||
flex: 1;
|
||||
font-size: .37rem;
|
||||
h1{
|
||||
font-size: .4rem;
|
||||
margin-bottom: .4rem;
|
||||
}
|
||||
p{
|
||||
color: #aaa;
|
||||
font-size: .35rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
.qrcode{
|
||||
width: 4rem;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div class="focus">
|
||||
<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="focus-list-container">
|
||||
<buddha-process></buddha-process>
|
||||
<buddha-process></buddha-process>
|
||||
<buddha-process></buddha-process>
|
||||
<buddha-process></buddha-process>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TMAPLoader from '@/common/tmap';
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
containerHeight: 0,
|
||||
keyword: '',
|
||||
activeName: ''
|
||||
}
|
||||
},
|
||||
inject: ['root', 'tabbar'],
|
||||
mounted(){
|
||||
this.$nextTick(() => {
|
||||
const { offsetHeight } = this.root.$refs.tabbar.$el;
|
||||
this.containerHeight = window.innerHeight - this.$refs.topbar.offsetHeight - offsetHeight - 20;
|
||||
})
|
||||
TMAPLoader.load({
|
||||
key: process.env.VUE_APP_TMAP_KEY
|
||||
}).then(TMap => {
|
||||
console.log(TMap)
|
||||
var center = new TMap.LatLng(39.984104, 116.307503);
|
||||
//初始化地图
|
||||
var map = new TMap.Map("container", {
|
||||
zoom:12,//设置地图缩放级别
|
||||
center: center//设置地图中心点坐标
|
||||
});
|
||||
console.log(map)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.focus{
|
||||
.focus-list-container{
|
||||
margin-top: .4rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div class="user-home" v-show="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="">
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="user-profile">
|
||||
<img class="avatar" :src="data.avatar" alt="">
|
||||
<span class="name">{{data.nickname}}</span>
|
||||
<div class="total">
|
||||
<p>累计行善<span>{{data.total_friendly}}</span>天</p>
|
||||
<p>累计功德<span>{{data.total_merit}}</span>元</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div class="item customer" @click="$router.push({ name: 'user-customer'})">
|
||||
<h3>客服中心</h3>
|
||||
<span>答疑问</span>
|
||||
<i class="iconfont icon-kefu"></i>
|
||||
</div>
|
||||
<div class="item certificate" @click="$router.push({ name: 'user-certificate' })">
|
||||
<h3>功德证书</h3>
|
||||
<span>积功德</span>
|
||||
<i class="iconfont icon-zhengshu"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-group">
|
||||
<p class="label">我的善缘</p>
|
||||
<div class="order-type">
|
||||
<div class="tab-order" @click="$router.push('/user/order?current=1')">
|
||||
<span class="iconfont icon-qianbao"></span>
|
||||
<p>待支付</p>
|
||||
</div>
|
||||
<div class="tab-order" @click="$router.push('/user/order?current=2')">
|
||||
<span class="iconfont icon-dingdanchulizhong"></span>
|
||||
<p>处理中</p>
|
||||
</div>
|
||||
<div class="tab-order" @click="$router.push('/user/order?current=3')">
|
||||
<span class="iconfont icon-yichuli"></span>
|
||||
<p>已处理</p>
|
||||
</div>
|
||||
<div class="tab-order" @click="$router.push('/user/order?current=4')">
|
||||
<span class="iconfont icon-quanbudingdan"></span>
|
||||
<p>全部订单</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<van-cell-group>
|
||||
<van-cell title="我的关注" is-link to="/user/focus" />
|
||||
<van-cell title="我的功课" is-link to="/user/course" />
|
||||
</van-cell-group>
|
||||
<div class="divider"></div>
|
||||
<van-cell-group>
|
||||
<van-cell title="认证法师 领取信众供奉" is-link :value="getMonkStatus(data.master_certify)" to="/user/approve"/>
|
||||
<van-cell title="寺院入驻" is-link :value="getTempleStatus(data.temple_settled)" to="/user/temple-station"/>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUserData } from '@/api';
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
data: null,
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
getUserData().then(data => {
|
||||
console.log(data)
|
||||
this.data = data;
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getTempleStatus(k){
|
||||
const m = {
|
||||
0: '未入驻',
|
||||
1: '审核中',
|
||||
2: '已入驻'
|
||||
}
|
||||
return m[k]
|
||||
},
|
||||
getMonkStatus(k){
|
||||
const m = {
|
||||
0: '未认证',
|
||||
1: '认证中',
|
||||
2: '已认证'
|
||||
}
|
||||
return m[k]
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.user-home{
|
||||
.light{
|
||||
margin: .4rem;
|
||||
img{
|
||||
width: 100%;
|
||||
border-radius: .13rem;
|
||||
}
|
||||
display: block;
|
||||
}
|
||||
.user-profile{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .4rem;
|
||||
.avatar{
|
||||
width: 1.33rem;
|
||||
height: 1.33rem;
|
||||
border-radius: 1.33rem;
|
||||
vertical-align: top;
|
||||
|
||||
}
|
||||
.name{
|
||||
padding: 0 .3rem;
|
||||
display: inline-block;
|
||||
font-size: .37rem;
|
||||
}
|
||||
.total{
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
p{
|
||||
margin-bottom: .2rem;
|
||||
font-size: .37rem;
|
||||
color: #333;
|
||||
}
|
||||
span{
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
padding: 0 .2rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.group{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 .4rem;
|
||||
margin-top: .27rem;
|
||||
.item{
|
||||
width: 3.7rem;
|
||||
color: white;
|
||||
padding: .27rem;
|
||||
font-size: .37rem;
|
||||
border-radius: .13rem;
|
||||
position: relative;
|
||||
h3{
|
||||
margin-bottom: .4rem;
|
||||
}
|
||||
span{
|
||||
opacity: 0.4;
|
||||
font-size: .53rem;
|
||||
}
|
||||
.iconfont{
|
||||
font-size: 1.33rem;
|
||||
opacity: 0.6;
|
||||
position: absolute;
|
||||
right: .4rem;
|
||||
top: .27rem;
|
||||
}
|
||||
}
|
||||
.customer{
|
||||
background: rgb(243, 120, 63);
|
||||
}
|
||||
.certificate{
|
||||
background: rgb(224, 114, 114)
|
||||
}
|
||||
}
|
||||
.my-group{
|
||||
padding: .4rem;
|
||||
margin-top: .4rem;
|
||||
.label{
|
||||
font-size: .37rem;
|
||||
}
|
||||
.order-type{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: .4rem;
|
||||
.tab-order{
|
||||
text-align: center;
|
||||
font-size: .37rem;
|
||||
color: #555;
|
||||
.iconfont{
|
||||
font-size: .67rem;
|
||||
color: #555;
|
||||
}
|
||||
p{
|
||||
margin-top: .13rem;
|
||||
font-size: .35rem;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div>
|
||||
<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="temple-list-container" :style="{height: containerHeight + 'px'}">
|
||||
<van-tabs v-model="activeName">
|
||||
<van-tab title="全部" name="a">
|
||||
<div class="order-container">
|
||||
<order></order>
|
||||
<order></order>
|
||||
<order></order>
|
||||
<order></order>
|
||||
<order></order>
|
||||
<order></order>
|
||||
<order></order>
|
||||
<order></order>
|
||||
<order></order>
|
||||
</div>
|
||||
</van-tab>
|
||||
<van-tab title="待支付" name="b">待支付</van-tab>
|
||||
<van-tab title="处理中" name="c">处理中</van-tab>
|
||||
<van-tab title="已处理" name="c">已处理</van-tab>
|
||||
</van-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TMAPLoader from '@/common/tmap';
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
containerHeight: 0,
|
||||
keyword: '',
|
||||
activeName: ''
|
||||
}
|
||||
},
|
||||
inject: ['root', 'tabbar'],
|
||||
mounted(){
|
||||
this.$nextTick(() => {
|
||||
const { offsetHeight } = this.root.$refs.tabbar.$el;
|
||||
this.containerHeight = window.innerHeight - this.$refs.topbar.offsetHeight - offsetHeight - 20;
|
||||
})
|
||||
TMAPLoader.load({
|
||||
key: process.env.VUE_APP_TMAP_KEY
|
||||
}).then(TMap => {
|
||||
console.log(TMap)
|
||||
var center = new TMap.LatLng(39.984104, 116.307503);
|
||||
//初始化地图
|
||||
var map = new TMap.Map("container", {
|
||||
zoom:12,//设置地图缩放级别
|
||||
center: center//设置地图中心点坐标
|
||||
});
|
||||
console.log(map)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.operation-bar{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 .4rem;
|
||||
color: #333;
|
||||
margin-bottom: .4rem;
|
||||
.position{
|
||||
line-height: .37rem;
|
||||
color: green;
|
||||
span{
|
||||
font-size: .37rem;
|
||||
display: inline-block;
|
||||
margin-right: .13rem;
|
||||
}
|
||||
}
|
||||
.show-mode{
|
||||
line-height: .37rem;
|
||||
span{
|
||||
font-size: .37rem;
|
||||
display: inline-block;
|
||||
margin-left: .13rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.temple-list-container{
|
||||
background: #f5f5f5;
|
||||
.temple-container{
|
||||
padding: .4rem;
|
||||
}
|
||||
.temple-map{
|
||||
height: 100%;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
}
|
||||
.order-container{
|
||||
background: #f5f5f5;
|
||||
padding: .4rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -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