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

123

Browse Source
This commit is contained in:
wenfp
2021-11-11 15:10:51 +08:00
parent ec0724c873
commit b4af257c70
63 changed files with 3189 additions and 832 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/buddha-activity/index.vue
+35 -6
View File
@@ -1,15 +1,44 @@
<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 class="buddha-activity">
<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="process-container">
<scroll-view :height="height - 50" ref="scrollView">
<buddha-process v-for="(p, i) in list" :key="i" :data="p"></buddha-process>
<div v-if="total === list.length" class="no-more">没有更多了</div>
</scroll-view>
</div>
</div>
</template>
<script>
export default {
import { getDynamicData } from "@/api"
export default {
props: ['data'],
data(){
return {
size: 10,
page: 1,
total: 0,
list: [],
height: window.innerHeight
}
},
mounted(){
this.getDynamicData();
},
methods: {
async getDynamicData(){
const res = await getDynamicData(this.page, this.size)
console.log(res)
this.total = res.total;
this.list = res.results;
this.$nextTick(() => {
this.$refs.scrollView.refresh();
})
console.log(res)
}
}
}
</script>
src/pages/everyday-donation/index.vue
+21 -16
View File
@@ -45,10 +45,7 @@
</ul>
</div>
<div>
<user-merit></user-merit>
<user-merit></user-merit>
<user-merit></user-merit>
<user-merit></user-merit>
<!-- <user-merit v-for=""></user-merit> -->
</div>
</div>
<div class="merit-button-group border-top">
@@ -63,7 +60,7 @@
</div>
<ul class="spec">
<li class="random">
<span class="border-circle">随喜</span>
<span class="border-circle" @click="showRandom = true">随喜</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>
@@ -132,6 +129,7 @@
</div>
</van-popup>
<random-money :value.sync="showRandom"></random-money>
</div>
</template>
@@ -142,25 +140,31 @@ import { getGoodsDetail } from '@/api'
export default {
components: {
swiper, swiperSlide
},
swiper,
swiperSlide,
},
data(){
const { query } = this.$route;
let title = '详情';
if(query.goods_type === '-1'){
if(query.goods_type === '1'){
title = '日行一善';
}
if(query.goods_type === '-2'){
if(query.goods_type === '2'){
title = '添砖加瓦'
}
document.title = title;
console.log( JSON.stringify(query))
for(let i in query){
query[i] = query[i].toString()
}
return {
showRandom: false, // 随喜
documentTitle: title,
query,
data: null,
value: 1,
is_auto: false, // 是否自动行善
showSpec: true,
showSpec: false,
priceUnit: 0,
priceUnitId: '',
number: 1,
@@ -184,10 +188,11 @@ export default {
}
},
mounted(){
if(this.query.goods_type === '-1'){
console.log('query', this.query)
if(this.query.goods_type === '1'){
return this.getGoodsDetail('friendly');
}
if(this.query.goods_type === '-2'){
if(this.query.goods_type === '2'){
return this.getGoodsDetail('tile');
}
@@ -202,7 +207,7 @@ export default {
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'){
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;
@@ -211,12 +216,12 @@ export default {
onPriceUnit({id, money}){
this.priceUnit = Number(money);
this.priceUnitId = id;
if(this.query.goods_type === '-2'){
if(this.query.goods_type === '2'){
this.is_assign = false;
}
},
onToPay(){
if(this.query.goods_type === '-1'){
if(this.query.goods_type === '1'){
this.$router.push({
name: 'pay',
query: {
@@ -232,7 +237,7 @@ export default {
}
})
}
if(this.query.goods_type === '-2'){
if(this.query.goods_type === '2'){
this.$router.push({
name: 'pay',
query: {
src/pages/goods-detail/index.vue
+3 -9
View File
@@ -3,12 +3,7 @@
<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="">
<img :src="data.cover_url" alt="">
</div>
</swiper-slide>
</swiper>
@@ -81,18 +76,17 @@ export default {
data(){
return {
query: this.$route.query,
showSpec: true,
showSpec: false,
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,
loop: false,
pagination: '.swiper-pagination',
onSlideChangeEnd: swiper => {
console.log('onSlideChangeEnd', swiper.realIndex)
src/pages/home.vue
+226 -186
View File
@@ -1,197 +1,237 @@
<template>
<div>
<van-nav-bar title="自在福田" style="background: #BF9330; color: white" />
<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 v-if="data" class="platform_home">
<van-nav-bar title="自在福田" style="background: #bf9330; color: white" />
<van-search v-model="value" readonly placeholder="寺院、主持、监寺" @click="onSearch"/>
<div class="container">
<div class="swiper">
<van-swipe
class="my-swipe"
:autoplay="3000"
indicator-color="white"
>
<van-swipe-item
v-for="(banner, index) in data.banner_data"
:key="index"
>
<img :src="banner.cover" alt="" />
</van-swipe-item>
</van-swipe>
</div>
<van-swipe :loop="false">
<van-swipe-item
v-for="(item, index) in data.icon_data"
:key="index"
>
<van-grid :border="false" class="home-grid-nav">
<van-grid-item
icon="photo-o"
:text="nav.name"
v-for="(nav, _index) in item"
:key="_index"
@click="locationTo(nav)"
>
<img
:src="nav.icon_url"
class="nav-icon"
slot="icon"
/>
</van-grid-item>
</van-grid>
</van-swipe-item>
</van-swipe>
<div class="user-dynamic-container">
<van-swipe vertical loop :autoplay="3000" :touchable="false">
<van-swipe-item
v-for="order in data.order_data"
:key="order.id"
>
<user-dynamic :data="order"></user-dynamic>
</van-swipe-item>
</van-swipe>
</div>
</div>
<div class="divider"></div>
<div class="panel">
<div class="panel-head">
<span class="title">功德无量</span>
<arrow-more @click="$router.push({ name: 'merit-list', query: { temple_id: query.temple_id} })"></arrow-more>
</div>
<div class="panel-body">
<van-swipe
class="merit-group"
:width="140"
:loop="false"
:show-indicators="false"
>
<van-swipe-item
v-for="goods in data.common_data"
:key="goods.id"
>
<div class="merit">
<img :src="goods.cover_url" alt="" />
<p class="title">{{ goods.alias }}</p>
</div>
</van-swipe-item>
</van-swipe>
</div>
</div>
<div class="divider"></div>
<div class="panel">
<div class="panel-head">
<span class="title">进展状态</span>
<arrow-more @click="onMoreProcess"></arrow-more>
</div>
<div class="panel-body">
<buddha-process v-for="process in data.dynamic_data" :key="process.id" :data="process" ></buddha-process>
<div class="process-more" @click="onMoreProcess">
<span>查看更多进展状态</span>
<i class="iconfont icon-arrow-right"></i>
</div>
</div>
<div class="divider"></div>
<thanks-giving :temple-id="query.temple_id"></thanks-giving>
</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="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>
import { getTempleIndex } from "@/api";
export default {
data(){
return {
value: ''
}
}
}
data() {
return {
query: this.$route.query,
value: "",
data: null,
};
},
mounted() {
this.getTempleIndex();
},
methods: {
locationTo(nav) {
window.location.href = nav.url;
},
async getTempleIndex() {
const res = await getTempleIndex(this.query.temple_id);
this.data = res;
this.data.icon_data = this.sliceNav(res.icon_data);
},
onMoreProcess() {
this.$router.push({
name: "buddha-activity",
});
},
onSearch(){
this.$router.push({
name: 'temple-list',
query: {}
})
},
sliceNav(navData) {
const nav = [];
const slice = 8;
for (let i = 0; i < Math.ceil(navData.length / slice); i++) {
const b = navData.slice(i * slice, i * slice + slice);
nav.push(b);
}
return nav;
},
},
};
</script>
<style lang="scss" scope>
.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;
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;
}
}
.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);
.van-nav-bar__title {
color: white;
line-height: .91rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .37rem;
padding: 0 .11rem;
}
}
</style>
.merit-rank-container {
}
.container {
padding: 0.4rem;
padding-bottom: 0.53rem;
.my-swipe .van-swipe-item {
color: #fff;
font-size: 20px;
height: 3.57rem;
text-align: center;
img {
width: 100%;
height: 100%;
border-radius: 0.16rem;
}
}
.swiper {
margin-bottom: 0.4rem;
}
.van-notice-bar {
border: 1px solid #e6b759;
border-radius: 0.16rem;
}
}
.platform_home {
.home-grid-nav {
.nav-icon {
width: 1.07rem;
height: 1.07rem;
}
}
.user-dynamic-container {
margin-top: 0.5rem;
height: 1.26rem;
overflow: hidden;
margin-bottom: 0.5rem;
.van-swipe {
height: 100%;
}
.van-swipe__indicators {
display: none;
}
}
.van-swipe__indicators {
bottom: 0;
.van-swipe__indicator {
width: 20px;
height: 2px;
border-radius: 10px;
}
.van-swipe__indicator--active {
background: $primary-color;
}
}
}
.merit {
width: 3.39rem;
height: 3.39rem;
display: inline-block;
position: relative;
border-radius: 0.16rem;
vertical-align: top;
overflow: hidden;
& ~ .merit {
margin-left: 0.4rem;
}
img {
width: 100%;
height: 100%;
}
.title {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0.91rem;
background: rgba(0, 0, 0, 0.7);
color: white;
line-height: 0.91rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.37rem;
padding: 0 0.11rem;
}
}
</style>
src/pages/merit-box/index.vue
+98 -15
View File
@@ -1,5 +1,5 @@
<template>
<div class="merit-box">
<div class="merit-box" >
<van-nav-bar
left-arrow
v-if="$route.meta.showNavBar"
@@ -8,44 +8,116 @@
: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="">
<img class="goods-picture" :style="{width: width + 'px', height: width + 'px'}" :src="info.merit_box_cover" alt="">
<div class="merit-rank-container">
<div class="head">
<span class="title">
感恩功德
<b class="sub-title">重庆石林寺</b>
{{info.merit_box_title}}
<b class="sub-title">{{info.unit_name}}</b>
</span>
<div class="list">
<span class="current">实时</span>
<span>月榜</span>
<span>总榜</span>
<span :class="[n.id === type_id && 'current']" v-for="n in nav" :key="n.id">{{n.title}}</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>
<swiper class="swiper-container" :options="SwiperOption" ref="swiper" @change="onSwiperChange">
<swiper-slide v-for="swipe in nav" :key="swipe.id">
<scroll-view
:height="containerHeight - 20"
pulldown
pullup
@pulldown="refresh"
@pullup="loadMore"
>
<user-merit v-for="(merit, _index) in swipe.list" :key="_index" :data="merit"></user-merit>
</scroll-view>
</swiper-slide>
</swiper>
</div>
</div>
<div class="merit-button-group">
<button class="merit-button">随喜功德</button>
<button class="merit-button" @click="randVisible = true">随喜功德</button>
</div>
</div>
<random-money :value.sync="randVisible" @change="onRandNext"></random-money>
</div>
</template>
<script>
import { getMeritBox } from "@/api";
export default {
data(){
return {
width: 0
query: this.$route.query,
width: 0,
randVisible: false,
type_id: 1,
page: 1,
nav: [
{ id: 1, title: '实时', page: 1, size: 10, list: [], },
{ id: 2, title: '月榜', page: 1, size: 10, list: [], },
{ id: 3, title: '总榜', page: 1, size: 10, list: [], },
],
containerHeight: 0,
info: {},
list: [],
total: 0,
SwiperOption: {
autoplay: false,
onSlideChangeEnd: swiper => {
console.log(swiper.realIndex)
const current = this.nav[swiper.realIndex];
this.type_id = current.id;
if(current.list.length === 0){
this.getMeritBox();
}
}
}
}
},
mounted(){
this.width = window.innerWidth;
console.log(this.$refs.swiper)
this.containerHeight = this.$refs.swiper.$el.offsetHeight;
this.getMeritBox();
this.$nextTick(() => {
})
},
methods: {
onSwiperChange(e){
console.log(e)
},
async getMeritBox(){
const current = this.nav.find(item => item.id === this.type_id);
const res = await getMeritBox(this.query.temple_id, current.id, current.page, current.size);
this.info = res.merit_box_info;
// this.list = res.merit_box_order.list;
current.list = res.merit_box_order.list
this.total = res.merit_box_order.total
},
loadMore(){
console.log('加载更多')
const current = this.nav.find(item => item.id === this.type_id);
current.page += 1;
this.getMeritBox();
},
refresh(){
console.log('refresh')
},
onRandNext(obj){
console.log(obj)
this.$router.push({
name: 'pay',
query: {
...this.$route.query,
title: '功德箱/供奉',
subTitle: '',
amount: obj.money,
from: 'meritBox', // 标识为功德箱
}
})
}
}
};
</script>
@@ -56,6 +128,11 @@ export default {
vertical-align: top;
}
.merit-rank-container{
background: white;
position: relative;
margin-top: -.4rem;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
.head{
padding: .53rem .4rem;
padding-bottom: .13rem;
@@ -87,6 +164,12 @@ export default {
}
}
}
.body{
height: 80vh;
.swiper-container{
height: 100%;;
}
}
}
.merit-button-group{
text-align: center;
src/pages/merit-list/index.vue
+59 -4
View File
@@ -2,18 +2,73 @@
<div class="buddha-activity">
<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">
<merit-goods v-for="i in 10" :key="i"></merit-goods>
<div class="merit-container" :style="{height: height + 'px'}">
<scroll-view :height="height" ref="scroll" pulldown pullup @pulldown="refresh" @pullup="loadMore">
<merit-goods v-for="li in list" :key="li.id" :data="li"></merit-goods>
<div class="no-more" v-if="list.length === total">没有更多了</div>
<div class="no-more" v-if="list.length !== total && loading">正在加载更多...</div>
</scroll-view>
</div>
</div>
</template>
<script>
export default {};
import { getCommonGoods } from "@/api";
export default {
data(){
const { query } = this.$route;
return {
query,
list: [],
page: 1,
size: 10,
total: 0,
}
},
computed: {
height(){
return window.innerHeight
}
},
mounted(){
this.getCommonGoods();
},
methods: {
async getCommonGoods(){
this.loading = true;
const res = await getCommonGoods(this.query.temple_id, this.page);
this.loading = false;
if(this.page === 1){
this.list = res.results;
this.total = res.total;
} else {
this.list = this.list.concat(res.results)
}
this.$nextTick(() => {
this.$refs.scroll.refresh();
})
},
refresh(){
this.page = 1;
this.getCommonGoods();
},
loadMore(){
if(this.total === this.list.length) return;
this.page += 1;
this.getCommonGoods();
}
}
};
</script>
<style></style>
<style lang="scss">
.merit-container{
overflow: hidden;
height: 100vh;
}
</style>
src/pages/monk/index.vue
+21 -13
View File
@@ -1,23 +1,18 @@
<template>
<div class="monk-detail">
<div class="monk-detail" v-if="data">
<div class="topbar" ref="topbar">
<van-nav-bar left-arrow :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
</div>
<swiper class="swiper-container" :options="swiperOption">
<swiper-slide>
<swiper-slide v-for="(cover, index) in data.pictures" :key="index">
<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="">
<img :src="cover" alt="">
</div>
</swiper-slide>
</swiper>
<div class="monk-profile">
<h1 class="position">方丈： 素全大法师</h1>
<p class="introduction">素全法师的法名智国，是属羊人，他毕业于电子科技大学，他出生于成都市。他出于对佛教文化的特别喜爱，在1989年于昭觉寺皈依清定上师，法名智国。在2006-7-28日入驻四川省什邡市的罗汉寺，在1994年，于山西五台山碧山寺依本焕大和尚、一诚大和尚、香港圣一大和尚为三师，美国寿冶大和尚为学戒和尚受具足戒。并且在1996～1999年，于山西五台山塔院寺学修。曾任传戒引礼、尊证等职先后参加了四川省佛教协会宝光寺、峨眉山、石经寺、广德寺的传授三坛大戒法会。</p>
<h1 class="position">{{data.title}}</h1>
<p class="introduction" v-html="data.description"></p>
</div>
<div class="support">
<div class="support-head">
@@ -42,6 +37,7 @@
</template>
<script>
import { getMasterDetail } from '@/api'
import 'swiper/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
@@ -51,17 +47,29 @@ export default {
},
data(){
return {
query: this.$route.query,
banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
data: null,
swiperOption: {
autoplay: 8000,
initialSlide: 1,
loop: true,
pagination: '.swiper-pagination',
onSlideChangeEnd: swiper => {
console.log('onSlideChangeEnd', swiper.realIndex)
onSlideChangeEnd: () => {
}
}
}
},
mounted(){
this.getMasterDetail();
},
methods: {
async getMasterDetail(){
const res = await getMasterDetail(this.query.master_id)
console.log(res)
this.data = res;
}
}
}
</script>
src/pages/pay-result/index.vue
+63
View File
@@ -0,0 +1,63 @@
<template>
<div class="pay-result">
<div class="cert-show"></div>
<div class="pay-info">
<span>
<i class="iconfont icon-zhifuchenggong"></i>
</span>
<span>参与成功</span>
</div>
<div class="button-group">
<button class="detail">查看详情</button>
<button class="again">再结善缘</button>
</div>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss">
.pay-result {
.cert-show {
height: 70vh;
background: #f5f5f5;
}
.pay-info{
text-align: center;
padding: .4rem 0;
padding-top: 1rem;
font-size: .5rem;
color: #888;
.iconfont{
color: #07c160;
font-size: 1rem;
vertical-align: middle;
margin-right: .3rem;
}
}
.button-group{
text-align: center;
margin-top: 1rem;
button{
width: 4rem;
margin: 0 .4rem;
height: 1.2rem;
font-size: .4rem;
border-radius: 4px;
border: 1px solid #ddd;
background: white;
}
.detail{
color: $primary-color;
border-color: $primary-color;
}
.again{
background: $primary-color;
color: white;
border-color: $primary-color;
}
}
}
</style>
src/pages/pay/index.vue
+33 -5
View File
@@ -34,7 +34,8 @@
</template>
<script>
import { createFriendlyDayOrder, createBrickDayOrder } from '@/api';
import { createFriendlyDayOrder, createBrickDayOrder, createPay, createMeritBoxOrder } from '@/api';
import { requestPayment } from '@/common/wechat-web';
export default {
components: {
@@ -42,7 +43,7 @@ export default {
data(){
return {
query: this.$route.query,
payType: 0
payType: '1'
}
},
methods: {
@@ -53,7 +54,9 @@ export default {
...this.query,
}
return createFriendlyDayOrder(request)
const order = await createFriendlyDayOrder(request)
this.onPayment(order)
return
}
// 创建填砖加瓦订单
if(this.query.goods_type === '-2'){
@@ -61,8 +64,20 @@ export default {
...this.query,
}
return createBrickDayOrder(request)
const order = await createBrickDayOrder(request)
this.onPayment(order)
return
}
// 创建功德箱订单
if(this.query.from === 'meritBox'){
const request = {
temple_id: this.query.temple_id,
price: this.query.amount
}
const order = await createMeritBoxOrder(request)
this.onPayment(order)
return
}
// const request = {
@@ -71,6 +86,19 @@ export default {
// createCommonOrder(request)
},
async onPayment(order){
console.log(order)
const result = await createPay(order.id);
const payResult = await requestPayment(result)
console.log(payResult)
this.$router.push({
name: 'pay-result',
query: {
...result,
...payResult
}
})
}
}
}
src/pages/temple-detail/index.vue
+37 -20
View File
@@ -1,7 +1,8 @@
<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="temple-detail" v-if="data">
<img class="banner" :src="data.picture" alt="">
<div class="authed border-bottom">
<img src="@/assets/img/cert.jpg" alt="">
<span>已通过 寺院联盟 认证 可放心访问</span>
</div>
@@ -10,19 +11,19 @@
<ul class="list">
<li>
<span class="label">单位名称：</span>
<span class="value">重庆石林寺</span>
<span class="value">{{data.unit_name}}</span>
</li>
<li>
<span class="label">登记编号：</span>
<span class="value">宗场证字（渝）F3232412324 号</span>
<span class="value">{{data.institution_code}}</span>
</li>
<li>
<span class="label">负责人：</span>
<span class="value">道济</span>
<span class="value">{{data.represent}}</span>
</li>
<li>
<span class="label">所在地址：</span>
<span class="value">深圳市宝安区十包度假村内</span>
<span class="value">{{data.details_address}}</span>
</li>
</ul>
</div>
@@ -30,29 +31,39 @@
<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 v-for="(cert, index) in data.register_cert_url" :key="index">
<img :src="cert" alt="">
</li>
</ul>
</div>
<div class="auth">
<h4 class="title border-bottom">寺院简介</h4>
<p class="description">少林寺始建于北魏太和十九年（495年），是孝文帝为了安置他所敬仰的印度高僧跋陀尊者，在与都城洛阳相望的嵩山少室山北麓敕建而成。少林寺常住院占地面积约57600平方米，现任方丈是曹洞正宗第47世、第33代嗣祖沙门释永信。 [1-2] 少林寺是世界著名的佛教寺院，是汉传佛教的禅宗祖庭，在中国佛教史上占有重要地位，被誉为“天下第一名刹”。因其历代少林武僧潜心研创和不断发展的少林功夫而名扬天下，素有“天下功夫出少林，少林功夫甲天下”之说。</p>
<p class="description" v-html="data.description"></p>
</div>
</div>
</template>
<script>
import { getTempleDetail } from "@/api"
export default {
data(){
return {
query: this.$route.query,
data: null,
}
},
mounted(){
this.getTempleDetail();
},
methods: {
async getTempleDetail(){
const res = await getTempleDetail(this.query.temple_id);
console.log(res)
this.data = res;
}
}
}
</script>
@@ -62,9 +73,15 @@ export default {
width: 100%;
}
.authed{
font-size: .4rem;
font-size: .35rem;
line-height: 1.2rem;
padding-left: .4rem;
color: #888;
img{
width: .3rem;
vertical-align: middle;
margin-right: .1rem;
}
}
.auth{
margin: .4rem;
@@ -100,14 +117,14 @@ export default {
margin-right: .3rem;
img{
width: 100%;
vertical-align: top;
}
}
}
.description{
font-size: .4rem;
color: #666;
text-indent: 2em;
line-height: 1.4;
color: #888;
line-height: 1.7;
padding-top: .35rem;
letter-spacing: 1px;
text-align: justify;
src/pages/temple-home/index.vue
+114 -117
View File
@@ -1,75 +1,45 @@
<template>
<div class="temple-home-page">
<div class="temple-home-page" v-if="data">
<div class="temple-home">
<span class="temple-name">重庆石林寺</span>
<span class="temple-name">{{data.temple_data.unit_name}}</span>
<div class="visitor">
<span>重庆市大渡口区</span>
<span>123232到访</span>
<span>{{data.temple_data.region}}</span>
<span>{{data.temple_data.visit}}到访</span>
</div>
</div>
<div class="certed-temple">
<span class="text">佛教协会认证寺院 可放心访问</span>
<span class="btn">查看</span>
<div class="certed-temple" @click="$router.push({name: 'temple-detail', query: { temple_id: query.temple_id}})">
<img class="cert-icon" src="@/assets/img/cert.jpg" alt="">
<span class="text">佛教协会认证寺院 可放心访问</span>
<span class="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 class="my-swipe" :autoplay="8000" indicator-color="white">
<van-swipe-item v-for="(banner, index) in data.banner_data" :key="index">
<img :src="banner.cover" alt="" @click="$router.push({ path: banner.url})">
</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="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
/>
<van-swipe class="grid-nav" :loop="false">
<van-swipe-item v-for="(item, index) in data.icon_data" :key="index">
<van-grid :border="false">
<van-grid-item icon="photo-o" :text="nav.name" v-for="(nav, _index) in item" :key="_index">
<img :src="nav.icon_url" class="nav-icon" slot="icon">
</van-grid-item>
</van-grid>
</van-swipe-item>
</van-swipe>
<user-dynamic></user-dynamic>
</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" v-for="manager in data.member_data" :key="manager.id" @click="$router.push({ name: 'monk', query: { master_id: manager.id }})">
<img class="avatar" :src="manager.avatar_url" alt="">
<div class="manager-container">
<h3 class="name">住持：素全大法师</h3>
<h3 class="name">{{manager.title}}</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>
<span v-html="manager.description"></span>
</p>
</div>
</div>
@@ -77,7 +47,7 @@
<div class="panel">
<div class="panel-head">
<span class="title">功德无量</span>
<span class="external">更多</span>
<arrow-more></arrow-more>
</div>
<div class="panel-body">
<div class="merit-group">
@@ -97,16 +67,14 @@
</div>
</div>
<div class="divider"></div>
<div class="panel">
<div class="panel temple-home-activity">
<div class="panel-head">
<span class="title">进展状态</span>
<span class="external">更多</span>
<arrow-more></arrow-more>
</div>
<div class="panel-body">
<buddha-process></buddha-process>
<buddha-process></buddha-process>
<buddha-process></buddha-process>
<div class="process-more">
<buddha-process v-for="process in data.dynamic_data" :key="process.id" :data="process"></buddha-process>
<div class="process-more" @click="onMoreDynamic">
<span>查看更多进展状态</span>
<i class="iconfont icon-arrow-right"></i>
</div>
@@ -173,11 +141,37 @@
</template>
<script>
import { getTempleIndex } from "@/api"
export default {
data(){
return {
showUserMenu: true,
value: ''
query: this.$route.query,
showUserMenu: false,
data: null
}
},
mounted(){
this.getTempleIndex();
},
methods: {
async getTempleIndex(){
const res = await getTempleIndex(this.query.temple_id);
this.data = res;
this.data.icon_data = this.sliceNav(res.icon_data)
},
sliceNav(navData){
const nav = [];
const slice = 8;
for(let i = 0; i < Math.ceil(navData.length / slice); i++){
const b = navData.slice(i * slice, i * slice + slice);
nav.push(b)
}
return nav;
},
onMoreDynamic(){
this.$router.push({ name: 'buddha-activity'})
}
}
}
@@ -265,40 +259,7 @@ export default {
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;
@@ -308,9 +269,12 @@ export default {
padding-top: .4rem;
}
.avatar{
width: 1.33rem;
height: 1.33rem;
width: 1rem;
height: 1rem;
border-radius: 1.33rem;
border: .08rem solid #f7e4bf;
vertical-align: top;
}
.manager-container{
flex: 1;
@@ -318,19 +282,20 @@ export default {
.name{
padding: .3rem .3rem .3rem 0;
font-size: .4rem;
color: #666;
}
.content{
font-size: .37rem;
line-height: 1.3;
font-size: .35rem;
line-height: 1.5;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: 3;
text-align: justify;
height: 3.8em;
height: 4.3em;
-webkit-box-orient: vertical;
color: #666;
color: #999;
}
}
}
@@ -363,34 +328,58 @@ export default {
}
}
}
.grid-nav{
margin-bottom: .8rem;
.nav-icon{
width: 1.07rem;
height: 1.07rem;
}
.van-swipe__indicators{
bottom: 0;
.van-swipe__indicator{
width: 20px;
height: 2px;
border-radius: 10px;
}
.van-swipe__indicator--active{
background: $primary-color;
}
}
}
.certed-temple{
display: flex;
border: 1px solid #ddd;
border: 1px solid $primary-color;
border-radius: 4px;
margin: 0 .4rem;
align-items: center;
font-size: .37rem;
padding: .4rem;
padding: .3rem;
margin-bottom: .2rem;
.cert-icon{
width: .3rem;
margin-right: .1rem;
}
.text{
flex: 1;
font-size: .35rem;
color: #666;
font-size: .3rem;
color: #888;
padding-top: 2px;
}
.btn{
color: $primary-color;
}
}
.process-more{
line-height: 1.17rem;
line-height: 1.5rem;
text-align: center;
font-size: .37rem;
font-size: .4rem;
.iconfont{
vertical-align: middle;
}
}
.container{
padding: .4rem;
padding-bottom: .53rem;
padding-bottom: .33rem;
.my-swipe .van-swipe-item {
color: #fff;
font-size: 20px;
@@ -416,14 +405,12 @@ export default {
padding: .53rem .4rem;
display: flex;
justify-content: space-between;
align-items: center;
.title{
font-size: .43rem;
color: #222222;
}
.external{
font-size: .37rem;
color: #666666;
}
}
.panel-body{
padding: 0 .4rem;
@@ -435,6 +422,14 @@ export default {
}
}
}
.temple-home-activity{
.process{
padding: .4rem 0;
.bar{
padding-bottom: 0;
}
}
}
.merit{
width: 3.39rem;
height: 3.39rem;
@@ -475,9 +470,11 @@ export default {
padding: .4rem .3rem;
.temple-name{
font-size: .45rem;
color: #666;
}
.visitor{
color: #666;
color: #999;
font-size: .3rem;
span{
padding-left: 10px;
}
src/pages/temple-list/index.vue
+31 -4
View File
@@ -2,7 +2,11 @@
<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="请输入寺院、方丈、监院名称" />
<van-search v-model="keyword" show-action action-text="搜索" placeholder="请输入寺院、方丈、监院名称" @search="onSearch" @cancel="onCancel">
<template #action>
<span @click="onSearch">搜索</span>
</template>
</van-search>
<div class="operation-bar">
<div class="position">
<span class="iconfont icon-dingwei"></span>
@@ -31,7 +35,7 @@
@pulldown="refresh"
@pullup="loadMore"
>
<temple v-for="i in 10" :key="i"></temple>
<temple v-for="temple in templeList" :key="temple.id" :data="temple"></temple>
</scroll-view>
<div class="temple-map" id="container" v-show="mode === 'map'">
@@ -41,6 +45,7 @@
</template>
<script>
import { getTempleList } from '@/api';
import TMAPLoader from '@/common/tmap';
export default {
@@ -48,7 +53,11 @@ export default {
return {
containerHeight: 0,
keyword: '',
mode: 'list'
mode: 'list',
page: 1,
templeList: [],
lng: '',
lat: ''
}
},
inject: ['root', 'tabbar'],
@@ -69,12 +78,30 @@ export default {
});
console.log(map)
})
this.getTempleList();
},
methods: {
async getTempleList(){
const res = await getTempleList(this.keyword, this.lng, this.lat, this.page);
console.log(res)
if(this.page === 1){
this.total = res.total;
this.templeList = res.results;
} else {
this.templeList = this.templeList.concat(res.results);
}
},
onModeSwitch(mode){
this.mode = mode;
},
onCancel(){
this.keyword = ''
this.page = 1;
this.getTempleList();
},
onSearch(){
this.getTempleList();
},
loadMore(){
console.log('加载更多')
},
src/pages/user/course/count/index.vue
+167 -11
View File
@@ -6,7 +6,7 @@
<div class="course-container">
<h1 class="title border-bottom">
<span class="title-text">{{data.name || '波若波罗密多心经'}}</span>
<span class="feedback">回向文</span>
<span class="feedback" @click="backVisible = true">回向文</span>
</h1>
<h2 class="content-name">经文内容</h2>
<p class="content" v-html="data.content"></p>
@@ -15,23 +15,51 @@
<div class="operation">
<div class="bar">
<div class="btn-group">
<span class="btn">直接报数</span>
<span class="btn">智能计数</span>
<span class="btn" @click="visible = true">直接报数</span>
<!-- <span class="btn">智能计数</span> -->
</div>
<span class="volumn">
<i class="iconfont icon-shengyinkai"></i>
<span class="volumn" @click="muted = !muted">
<i class="iconfont" :class="[!muted ? 'icon-shengyinkai' : 'icon-shengyinguan']"></i>
</span>
</div>
<h4 class="volumn-count">0</h4>
<h4 class="volumn-count">{{count}}</h4>
<div class="picture-wrapper">
<span></span>
<span @touchstart="onTouchstart" @touchend="onTouchEnd">
<img v-if="pressed" src="@/assets/img/down.jpg" alt="">
<img v-else src="@/assets/img/up.jpg" alt="">
</span>
</div>
<div class="save-group">
<span class="save" @click="saveCount"><i class="iconfont icon-baocun"></i>保存</span>
<span class="clear" @click="clear"><i class="iconfont icon-qingchu"></i>清零</span>
</div>
</div>
<audio class="audio" src="@/assets/wav/muyu-voice.wav" ref="audio" :muted="muted"></audio>
<!-- <audio class="audio" src="@/assets/wav/muyu2.mp3" ref="audio" :muted="muted"></audio> -->
<van-popup v-model="visible" round>
<div class="input-count">
<h1 class="title">直接报数</h1>
<input class="input" v-model="inputCount" type="tel" placeholder="请输入1-9的数字" v-number-only>
<button class="confirm" @click="onConfirm">确认</button>
</div>
</van-popup>
<van-popup v-model="backVisible" round :overlay-style="{backgroundColor: 'rgba(0,0,0,0.5)'}" class="backward-popup">
<div class="backword">
<h4 class="title">回向文</h4>
<textarea v-model="backwards" name="" class="textarea"></textarea>
</div>
<!-- <div class="">
<span class="iconfont icon-weixin"></span>
<span class="iconfont icon-pengyouquan"></span>
</div> -->
</van-popup>
</div>
</template>
<script>
import { getCourseDetail } from "@/api"
import { getCourseDetail, postCount } from "@/api"
export default {
data(){
@@ -39,6 +67,13 @@ export default {
return {
query,
data: null,
pressed: false,
muted: false,
count: 0,
inputCount: 0,
visible: false,
backVisible: false,
backwards: ''
}
},
mounted(){
@@ -48,8 +83,44 @@ export default {
async getCourseDetail(){
const res = await getCourseDetail(this.query.id);
this.data = res;
this.backwards = res.backward
},
onTouchstart(){
this.pressed = true;
const audio = this.$refs.audio;
audio.muted = this.muted
audio.play()
this.count += 1
},
onTouchEnd(){
this.pressed = false;
},
onConfirm(){
this.count = Number(this.inputCount);
this.visible = false;
},
async saveCount(){
const request = {
course_id: this.query.id,
quantity: this.count,
backward: this.backwards
}
const res = await postCount(this.query.id, request)
console.log(res)
this.$toast.success('成功')
},
clear(){
this.$dialog.confirm({
message: '确认清除计数器？',
})
.then(() => {
// on confirm
this.count = 0;
})
.catch(() => {
// on cancel
});
}
}
}
</script>
@@ -57,6 +128,9 @@ export default {
<style lang="scss">
.course-detail-count{
background-size: 100%;
.audio{
display: none;
}
.on-count{
position: fixed;
right: 0;
@@ -109,7 +183,7 @@ export default {
.bar{
display: flex;
justify-content: space-between;
height: 1.2rem;
height: 1rem;
align-items: center;
padding: 0 .4rem;
span{
@@ -154,6 +228,15 @@ export default {
margin-right: auto;
margin-top: .3rem;
position: relative;
span{
width: 100%;
height: 100%;
display: inline-block;
}
&::after,
&::before{
pointer-events: none;
}
&::before{
content: '';
width: 3rem;
@@ -184,10 +267,83 @@ export default {
border-color: $primary-color;
}
}
span{
img{
width: 3rem;
height: 3rem;
}
}
}
.save-group{
text-align: center;
font-size: .4rem;
padding-top: .8rem;
span{
display: inline-block;
padding: 0 1rem;
.iconfont{
margin-right: .1rem;
vertical-align: middle;
}
}
}
}
}
.backward-popup{
top: 44%
}
.input-count{
padding: .4rem ;
width: 8rem;
.title{
font-size: .4rem;
text-align: center;
padding-bottom: .8rem;
}
.input{
width: 100%;
font-size: .4rem;
background: #f5f5f5;
border: 1px solid #ddd;
height: 1rem;
line-height: 1rem;
border-radius: .06rem;
text-indent: 1em;
}
.confirm{
margin: 0 auto;
width: 100%;
height: 1.2rem;
line-height: 1rem;
display: block;
margin-top: .4rem;
font-size: .4rem;
color: $primary-color;
}
}
.backword{
width: 90vw;
height: 80vh;
background: #ECF1F4 url('~@/assets/img/backward2.jpg') bottom center no-repeat;
background-size: contain;
.title{
font-size: .5rem;
text-align: center;
padding-top: .8rem;
padding-bottom: .8rem;
}
.textarea{
background:transparent;
border: 1px solid transparent;
width: calc(100% - 1.2rem);
padding-left: .6rem;
padding-right: .6rem;
height: 6rem;
line-height: 1.4;
color: #333;
font-size: .4rem;
}
}
@keyframes scale {
0%{
transform: scale(1, 1);