update
This commit is contained in:
Generated
-17673
File diff suppressed because it is too large
Load Diff
+2
-2
@@ -36,8 +36,8 @@
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"sass": "^1.89.0",
|
||||
"sass-loader": "^7.1.0",
|
||||
"sass-resources-loader": "^2.2.4",
|
||||
"sass-loader": "^8.0.2",
|
||||
"sass-resources-loader": "^2.2.5",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"eslintConfig": {
|
||||
|
||||
Generated
+770
-664
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
+58
-52
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="app-safe-area" :style="{minHeight: minHeight + 'px'}">
|
||||
<div id="app" :data-height="minHeight - tabHeight" :style="{ minHeight: minHeight - tabHeight + 'px', paddingBottom: tabHeight + 'px'}">
|
||||
<div class="app-safe-area" :style="{ minHeight: minHeight + 'px' }">
|
||||
<div id="app" :data-height="minHeight - tabHeight" :style="{ minHeight: minHeight - tabHeight + 'px', paddingBottom: tabHeight + 'px' }">
|
||||
<router-view />
|
||||
<van-tabbar v-if="showTabbar" class="tabbar" v-model="actionRoute" ref="tabbar" active-color="#CF9E3B" inactive-color="#999">
|
||||
<van-tabbar v-if="showTabbar" class="tabbar" v-model="actionRoute" ref="tabbar" active-color="#CF9E3B;" inactive-color="#999">
|
||||
<van-tabbar-item replace name v-for="(tab, index) in tabbar" :key="index" @click="onNavigation(tab)">
|
||||
<span>{{ tab.title }}</span>
|
||||
<template #icon="props">
|
||||
<img :src="props.active ? tab.active: tab.inactive" alt="">
|
||||
<img :src="props.active ? tab.active : tab.inactive" alt="" />
|
||||
</template>
|
||||
</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
@@ -15,13 +15,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { tabbar } from '../src/router';
|
||||
import safeAreaInsets from 'safe-area-insets';
|
||||
import { tabbar } from "../src/router";
|
||||
import safeAreaInsets from "safe-area-insets";
|
||||
export default {
|
||||
name: 'App',
|
||||
name: "App",
|
||||
data() {
|
||||
return {
|
||||
active: '3',
|
||||
active: "3",
|
||||
minHeight: 0,
|
||||
tabbar,
|
||||
tabHeight: 0,
|
||||
@@ -39,10 +39,13 @@ export default {
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$route': {
|
||||
$route: {
|
||||
handler(val) {
|
||||
document.title = val.meta.title || '自在福田'
|
||||
this.active = tabbar.map(v => v.name).indexOf(val.name).toString();
|
||||
document.title = val.meta.title || "自在福田";
|
||||
this.active = tabbar
|
||||
.map((v) => v.name)
|
||||
.indexOf(val.name)
|
||||
.toString();
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
@@ -50,54 +53,57 @@ export default {
|
||||
handler() {
|
||||
this.$nextTick(() => {
|
||||
const { tabbar } = this.$refs;
|
||||
this.tabHeight = tabbar ? tabbar.$el.offsetHeight - safeAreaInsets.bottom: 0;
|
||||
})
|
||||
this.tabHeight = tabbar ? tabbar.$el.offsetHeight - safeAreaInsets.bottom : 0;
|
||||
});
|
||||
},
|
||||
immediate: true,
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
this.$store.commit('SET_LAUNCH', this.$route.query)
|
||||
mounted() {
|
||||
this.$store.commit("SET_LAUNCH", this.$route.query);
|
||||
setTimeout(() => {
|
||||
this.minHeight = window.innerHeight - safeAreaInsets.bottom;
|
||||
}, 30)
|
||||
}, 30);
|
||||
},
|
||||
methods: {
|
||||
onNavigation(tab){
|
||||
onNavigation(tab) {
|
||||
const { path } = this.$route;
|
||||
if(path === tab.path) return;
|
||||
this.$router.push({ path: tab.path, query: { temple_id: this.$route.query.temple_id}})
|
||||
}
|
||||
if (path === tab.path) return;
|
||||
this.$router.push({ path: tab.path, query: { temple_id: this.$route.query.temple_id } });
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
actionRoute: {
|
||||
get(){
|
||||
get() {
|
||||
const { tabbar } = this;
|
||||
return tabbar.map(tab => tab.name).indexOf(this.$route.name)
|
||||
return tabbar.map((tab) => tab.name).indexOf(this.$route.name);
|
||||
},
|
||||
set(){ }
|
||||
set() {},
|
||||
},
|
||||
showTabbar() {
|
||||
const path = tabbar.map(tab => tab.name);
|
||||
const { name, query: { hideTab } } = this.$route;
|
||||
const path = tabbar.map((tab) => tab.name);
|
||||
const {
|
||||
name,
|
||||
query: { hideTab },
|
||||
} = this.$route;
|
||||
|
||||
// 等于寺庙功德箱时隐藏底部导航
|
||||
if(name === 'merit-box' || (name === 'temple-list' && hideTab === '1')){
|
||||
return false
|
||||
if (name === "merit-box" || (name === "temple-list" && hideTab === "1")) {
|
||||
return false;
|
||||
}
|
||||
return path.includes(this.$route.name);
|
||||
},
|
||||
paddingBottom() {
|
||||
return this.showTabbar ? this.$refs.tabbar ? this.$refs.tabbar.$el.offsetHeight : 0 : 0;
|
||||
}
|
||||
}
|
||||
return this.showTabbar ? (this.$refs.tabbar ? this.$refs.tabbar.$el.offsetHeight : 0) : 0;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~@/assets/css/reset.css';
|
||||
@import '//at.alicdn.com/t/font_2897403_8d7w3rodyu2.css';
|
||||
.app-safe-area{
|
||||
@import "~@/assets/css/reset.css";
|
||||
@import "//at.alicdn.com/t/font_2897403_8d7w3rodyu2.css";
|
||||
.app-safe-area {
|
||||
position: relative;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
#app {
|
||||
@@ -117,60 +123,60 @@ export default {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
.loadmore{
|
||||
font-size: .4rem;
|
||||
.loadmore {
|
||||
font-size: 0.4rem;
|
||||
text-align: center;
|
||||
color: #888;
|
||||
padding: .4rem 0;
|
||||
padding: 0.4rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.icon{
|
||||
width: .6rem;
|
||||
.icon {
|
||||
width: 0.6rem;
|
||||
vertical-align: middle;
|
||||
margin-right: .2rem;
|
||||
margin-right: 0.2rem;
|
||||
animation: loading 3s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-home{
|
||||
.icon-home {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
font-size: .5rem;
|
||||
font-size: 0.5rem;
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 1rem;
|
||||
position: absolute;
|
||||
left: .4rem;
|
||||
top: .4rem;
|
||||
&:active{
|
||||
left: 0.4rem;
|
||||
top: 0.4rem;
|
||||
&:active {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
}
|
||||
|
||||
.no-more{
|
||||
font-size: .4rem;
|
||||
.no-more {
|
||||
font-size: 0.4rem;
|
||||
text-align: center;
|
||||
color: #888;
|
||||
padding: .4rem 0;
|
||||
padding: 0.4rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.read-more{
|
||||
.read-more {
|
||||
height: 1.3rem;
|
||||
text-align: center;
|
||||
font-size: .4rem;
|
||||
font-size: 0.4rem;
|
||||
line-height: 1.3rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
from{
|
||||
from {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
to{
|
||||
to {
|
||||
transform: rotateZ(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
+45
-31
@@ -1,27 +1,29 @@
|
||||
@import './variable.scss';
|
||||
@import 'variable.scss';
|
||||
|
||||
.divider {
|
||||
height: .24rem;
|
||||
background: #F9F9FC;
|
||||
}
|
||||
|
||||
.text-multiple-3{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
.text-multiple-3 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.text-multiple-2{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
.text-multiple-2 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding-bottom: .4rem;
|
||||
|
||||
.panel-head {
|
||||
//padding: .53rem .4rem;
|
||||
padding: .3rem .4rem;
|
||||
@@ -51,18 +53,21 @@ display: -webkit-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
.process-more{
|
||||
|
||||
.process-more {
|
||||
line-height: 1.17rem;
|
||||
text-align: center;
|
||||
font-size: .37rem;
|
||||
.iconfont{
|
||||
vertical-align: middle;
|
||||
|
||||
.iconfont {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.border-bottom{
|
||||
.border-bottom {
|
||||
position: relative;
|
||||
&::after{
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
height: 1px;
|
||||
width: 200%;
|
||||
@@ -75,9 +80,11 @@ display: -webkit-box;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.border-top{
|
||||
|
||||
.border-top {
|
||||
position: relative;
|
||||
&::before{
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
height: 1px;
|
||||
width: 200%;
|
||||
@@ -90,9 +97,11 @@ display: -webkit-box;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.border-circle{
|
||||
|
||||
.border-circle {
|
||||
position: relative;
|
||||
&::before{
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
height: 199%;
|
||||
width: 200%;
|
||||
@@ -108,28 +117,33 @@ display: -webkit-box;
|
||||
}
|
||||
}
|
||||
|
||||
.active{
|
||||
&::before{
|
||||
border-color: $primary-color;
|
||||
.active {
|
||||
&::before {
|
||||
border-color: #CF9E3B;
|
||||
;
|
||||
}
|
||||
color: $primary-color;
|
||||
|
||||
color: #CF9E3B;
|
||||
;
|
||||
}
|
||||
|
||||
.multiple-line-3{
|
||||
overflow : hidden;
|
||||
.multiple-line-3 {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.no-more{
|
||||
|
||||
.no-more {
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
font-size: .4rem;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
button:disabled{
|
||||
|
||||
button:disabled {
|
||||
background: #e1e1e1 !important;
|
||||
border-color: #e1e1e1 !important;
|
||||
|
||||
}
|
||||
}
|
||||
@@ -1,2 +1 @@
|
||||
$primary-color: #CF9E3B;
|
||||
$btn-border-radius: .07rem;
|
||||
$btn-border-radius: .07rem;
|
||||
@@ -8,7 +8,7 @@
|
||||
<div class="image-group">
|
||||
<img :src="cover" v-for="(cover, index) in covers" :key="index" alt="" />
|
||||
</div>
|
||||
<button class="purchase" v-if="showGoodsBtn" @click.stop="onGoodsDetail">{{privateData.btn_title}}</button>
|
||||
<button class="purchase" v-if="showGoodsBtn" @click.stop="onGoodsDetail">{{ privateData.btn_title }}</button>
|
||||
<div class="bar">
|
||||
<span class="join">已有{{ privateData.sales }}人参与</span>
|
||||
<div class="btn-group">
|
||||
@@ -27,10 +27,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { toggleCollect } from '@/api';
|
||||
import { toggleCollect } from "@/api";
|
||||
|
||||
export default {
|
||||
name: 'buddha-process',
|
||||
name: "buddha-process",
|
||||
props: {
|
||||
data: {
|
||||
required: true,
|
||||
@@ -38,7 +38,7 @@ export default {
|
||||
showGoodsBtn: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
@@ -56,8 +56,8 @@ export default {
|
||||
computed: {
|
||||
covers: {
|
||||
get() {
|
||||
const type = Object.prototype.toString.call(this.privateData.covers);
|
||||
return type === '[object Object]' ? []: this.privateData.covers.slice(0, 3);
|
||||
const type = Object.prototype.toString.call(this.privateData.covers);
|
||||
return type === "[object Object]" ? [] : this.privateData.covers.slice(0, 3);
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -65,26 +65,26 @@ export default {
|
||||
async onCollect() {
|
||||
await toggleCollect(this.data.id);
|
||||
this.privateData.is_collected = this.privateData.is_collected === 1 ? 0 : 1;
|
||||
this.$emit('collection', this.data.id);
|
||||
this.$emit("collection", this.data.id);
|
||||
},
|
||||
onProcessDetail() {
|
||||
const { id } = this.privateData;
|
||||
this.$router.push({
|
||||
name: 'buddha-detail',
|
||||
query: { id }
|
||||
})
|
||||
name: "buddha-detail",
|
||||
query: { id },
|
||||
});
|
||||
},
|
||||
onGoodsDetail(){
|
||||
onGoodsDetail() {
|
||||
const { goods_type, goods_id, temple_id, spec_ids } = this.privateData;
|
||||
this.onPushToGoodsDetail(goods_type, goods_id, temple_id, spec_ids)
|
||||
}
|
||||
this.onPushToGoodsDetail(goods_type, goods_id, temple_id, spec_ids);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.panel-body {
|
||||
.buddha-process{
|
||||
.buddha-process {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
@@ -94,7 +94,7 @@ export default {
|
||||
position: relative;
|
||||
padding: 0 0.4rem;
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
height: 1px;
|
||||
width: 200%;
|
||||
background: #ededed;
|
||||
@@ -131,9 +131,9 @@ export default {
|
||||
|
||||
@extend .text-multiple-3;
|
||||
}
|
||||
.detail-text{
|
||||
font-size: .4rem;
|
||||
padding-top: .2rem;
|
||||
.detail-text {
|
||||
font-size: 0.4rem;
|
||||
padding-top: 0.2rem;
|
||||
color: #b74100;
|
||||
}
|
||||
.image-group {
|
||||
@@ -180,7 +180,7 @@ export default {
|
||||
align-items: center;
|
||||
|
||||
.iconfont {
|
||||
color: $primary-color;
|
||||
color: #cf9e3b;
|
||||
vertical-align: middle;
|
||||
font-size: 0.4rem;
|
||||
margin-top: -3px;
|
||||
@@ -195,7 +195,7 @@ export default {
|
||||
}
|
||||
.collect {
|
||||
.iconfont {
|
||||
color: $primary-color;
|
||||
color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
.un-collect {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="detail-content-expand">
|
||||
<div class="content" :class="[contentOverflow && !show && '']" ref="wrapper" :style="{ height: (show ? contentHeight : defaultContentHeight) + 'px' }">
|
||||
<div class="content" :class="[contentOverflow && !show && '']" ref="wrapper" :style="{ height: show ? 'auto' : defaultContentHeight + 'px' }">
|
||||
<div ref="content" class="ref-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
@@ -41,7 +41,8 @@ export default {
|
||||
mounted() {
|
||||
this.wrapperHeight = this.$refs.wrapper.offsetHeight;
|
||||
this.$nextTick(() => {
|
||||
this.contentHeight = this.$refs.content.offsetHeight;
|
||||
console.log(this.$refs.content.clientHeight);
|
||||
this.contentHeight = this.$refs.content.clientHeight;
|
||||
this.wrapperContainerHeight = this.wrapperHeight;
|
||||
this.refresh();
|
||||
});
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
<template>
|
||||
<van-popup :value.sync="visible" position="bottom" @close="onClose" @click-overlay="onClose" safe-area-inset-bottom
|
||||
style="min-height: 50vh">
|
||||
<div class="add-merit-name" >
|
||||
<van-popup :value.sync="visible" position="bottom" @close="onClose" @click-overlay="onClose" safe-area-inset-bottom style="min-height: 50vh">
|
||||
<div class="add-merit-name">
|
||||
<h3 class="title">心愿</h3>
|
||||
<div class="desire-input">
|
||||
<textarea class="desire-textarea" v-model="desire" type="text" :max-length="maxLength" placeholder="请输入您的心愿" />
|
||||
<span>{{desire.length}}/{{maxLength}}</span>
|
||||
<span>{{ desire.length }}/{{ maxLength }}</span>
|
||||
</div>
|
||||
<div class="desire-quike">
|
||||
<div class="bar">
|
||||
@@ -13,7 +12,7 @@
|
||||
<span class="update" @click="getDreamList">换一组<i class="iconfont icon-shuaxin"></i></span>
|
||||
</div>
|
||||
<div class="name-group">
|
||||
<span class="name" v-for="(dream, index) in dreamList" :key="index" @click="onFill(dream)">{{dream}}</span>
|
||||
<span class="name" v-for="(dream, index) in dreamList" :key="index" @click="onFill(dream)">{{ dream }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="confirm" @click="onConfirmDream">确认</button>
|
||||
@@ -22,80 +21,80 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDreamList } from '@/api';
|
||||
import { getDreamList } from "@/api";
|
||||
|
||||
export default {
|
||||
name: 'merit-desire',
|
||||
name: "merit-desire",
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'increment', // increment | single
|
||||
default: "increment", // increment | single
|
||||
},
|
||||
selected: {
|
||||
type: Array,
|
||||
default(){
|
||||
return []
|
||||
}
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
maxLength: {
|
||||
type: Number,
|
||||
default: 50
|
||||
}
|
||||
default: 50,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
desire: '',
|
||||
dreamList: []
|
||||
name: "",
|
||||
desire: "",
|
||||
dreamList: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
visible(value){
|
||||
if(value){
|
||||
this.selectedName = this.selected.map(v => v.id)
|
||||
visible(value) {
|
||||
if (value) {
|
||||
this.selectedName = this.selected.map((v) => v.id);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getDreamList();
|
||||
},
|
||||
methods: {
|
||||
onFill(dream){
|
||||
if(this.mode === 'single'){
|
||||
return this.desire = dream;
|
||||
onFill(dream) {
|
||||
if (this.mode === "single") {
|
||||
return (this.desire = dream);
|
||||
}
|
||||
this.desire += dream + '，';
|
||||
this.desire = this.desire.slice(0, this.maxLength)
|
||||
this.desire += dream + "，";
|
||||
this.desire = this.desire.slice(0, this.maxLength);
|
||||
},
|
||||
onClose() {
|
||||
this.$emit('update:visible', false);
|
||||
this.$emit("update:visible", false);
|
||||
},
|
||||
//获取心愿列表
|
||||
async getDreamList(){
|
||||
async getDreamList() {
|
||||
const list = await getDreamList();
|
||||
this.dreamList = list;
|
||||
},
|
||||
onConfirmDream(){
|
||||
onConfirmDream() {
|
||||
this.showDialog = false;
|
||||
this.dream = this.desire;
|
||||
this.$emit('update:visible', false);
|
||||
this.$emit('change', this.dream)
|
||||
this.$emit("update:visible", false);
|
||||
this.$emit("change", this.dream);
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.add-merit-name {
|
||||
padding: .4rem;
|
||||
padding: 0.4rem;
|
||||
|
||||
.title {
|
||||
font-size: .4rem;
|
||||
margin-bottom: .4rem;
|
||||
font-size: 0.4rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.add-name {
|
||||
@@ -103,49 +102,49 @@ export default {
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
height: .8rem;
|
||||
line-height: .8rem;
|
||||
padding-left: .3rem;
|
||||
height: 0.8rem;
|
||||
line-height: 0.8rem;
|
||||
padding-left: 0.3rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .11rem;
|
||||
font-size: .4rem;
|
||||
border-radius: 0.11rem;
|
||||
font-size: 0.4rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: .2rem .6rem;
|
||||
background: $primary-color;
|
||||
padding: 0.2rem 0.6rem;
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
border: 1px solid $primary-color;
|
||||
font-size: .4rem;
|
||||
border-radius: .11rem;
|
||||
margin-left: .3rem;
|
||||
border: 1px solid #cf9e3b;
|
||||
font-size: 0.4rem;
|
||||
border-radius: 0.11rem;
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.name-group {
|
||||
padding: .5rem 0;
|
||||
padding: 0.5rem 0;
|
||||
height: 30vh;
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: .2rem .3rem;
|
||||
padding: 0.2rem 0.3rem;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .08rem;
|
||||
border-radius: 0.08rem;
|
||||
position: relative;
|
||||
margin-right: .2rem;
|
||||
margin-bottom: .2rem;
|
||||
font-size: .35rem;
|
||||
margin-right: 0.2rem;
|
||||
margin-bottom: 0.2rem;
|
||||
font-size: 0.35rem;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
right: -.25rem;
|
||||
top: -.25rem;
|
||||
font-size: .5rem;
|
||||
right: -0.25rem;
|
||||
top: -0.25rem;
|
||||
font-size: 0.5rem;
|
||||
color: red;
|
||||
}
|
||||
input[type=checkbox]{
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@@ -153,25 +152,24 @@ export default {
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
&.selected{
|
||||
background: $primary-color;
|
||||
&.selected {
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.desire-input {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .13rem;
|
||||
border-radius: 0.13rem;
|
||||
overflow: hidden;
|
||||
|
||||
.desire-textarea {
|
||||
border: none;
|
||||
display: block;
|
||||
font-size: .35rem;
|
||||
width: calc(100% - .5rem);
|
||||
padding: .25rem;
|
||||
font-size: 0.35rem;
|
||||
width: calc(100% - 0.5rem);
|
||||
padding: 0.25rem;
|
||||
height: 2rem;
|
||||
resize: none;
|
||||
line-height: 1.4;
|
||||
@@ -180,8 +178,8 @@ export default {
|
||||
span {
|
||||
display: block;
|
||||
text-align: right;
|
||||
padding: .2rem;
|
||||
font-size: .35rem;
|
||||
padding: 0.2rem;
|
||||
font-size: 0.35rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -192,34 +190,33 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: .4rem;
|
||||
margin-bottom: .3rem;
|
||||
font-size: 0.4rem;
|
||||
margin-bottom: 0.3rem;
|
||||
|
||||
.update {
|
||||
font-size: .35rem;
|
||||
color: $primary-color;
|
||||
font-size: 0.35rem;
|
||||
color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
|
||||
.name-group {
|
||||
padding: .1rem 0;
|
||||
padding: 0.1rem 0;
|
||||
|
||||
.name {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.confirm {
|
||||
background: $primary-color;
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
border: 1px solid $primary-color;
|
||||
border: 1px solid #cf9e3b;
|
||||
width: 100%;
|
||||
padding: .3rem 0;
|
||||
padding: 0.3rem 0;
|
||||
border-radius: 1rem;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
font-size: .4rem;
|
||||
font-size: 0.4rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,74 +1,74 @@
|
||||
<template>
|
||||
<div class="merit-goods" @click="onJoin">
|
||||
<img class="goods" :src="data.cover_url" alt="">
|
||||
<div class="info">
|
||||
<h3 class="title">{{data.title}}</h3>
|
||||
<div class="bar">
|
||||
<span class="join-number">已有{{data.sales}}人参与</span>
|
||||
<button class="join" >参与</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="merit-goods" @click="onJoin">
|
||||
<img class="goods" :src="data.cover_url" alt="" />
|
||||
<div class="info">
|
||||
<h3 class="title">{{ data.title }}</h3>
|
||||
<div class="bar">
|
||||
<span class="join-number">已有{{ data.sales }}人参与</span>
|
||||
<button class="join">参与</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'merit-goods',
|
||||
props: ['data'],
|
||||
name: "merit-goods",
|
||||
props: ["data"],
|
||||
methods: {
|
||||
onJoin(){
|
||||
onJoin() {
|
||||
this.$router.push({
|
||||
name: 'goods-detail',
|
||||
name: "goods-detail",
|
||||
query: {
|
||||
goods_id: this.data.id,
|
||||
temple_id: this.data.temple_id
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
temple_id: this.data.temple_id,
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.merit-goods{
|
||||
.merit-goods {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.4rem;
|
||||
border-bottom: 0.01rem solid #f2f2f2;
|
||||
.goods {
|
||||
width: 2.93rem;
|
||||
height: 2.93rem;
|
||||
margin-right: 0.4rem;
|
||||
border-radius: 0.11rem;
|
||||
}
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: .4rem;
|
||||
border-bottom: .01rem solid #f2f2f2;
|
||||
.goods{
|
||||
width: 2.93rem;
|
||||
height: 2.93rem;
|
||||
margin-right: .4rem;
|
||||
border-radius: .11rem;
|
||||
.title {
|
||||
font-size: 0.4rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.info{
|
||||
flex: 1;
|
||||
.bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.title{
|
||||
font-size: .4rem;
|
||||
line-height: 1.3;
|
||||
align-items: center;
|
||||
.join-number {
|
||||
font-size: 0.35rem;
|
||||
color: #666;
|
||||
}
|
||||
.bar{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.join-number{
|
||||
font-size: .35rem;
|
||||
color: #666;
|
||||
}
|
||||
.join{
|
||||
height: .67rem;
|
||||
padding: 0 .4rem;
|
||||
background: #CF9E3B;
|
||||
border: .01rem solid #CF9E3B;
|
||||
color: white;
|
||||
border-radius: .05rem;
|
||||
font-size: .37rem;
|
||||
line-height: .67rem;
|
||||
}
|
||||
.join {
|
||||
height: 0.67rem;
|
||||
padding: 0 0.4rem;
|
||||
background: #cf9e3b;
|
||||
border: 0.01rem solid #cf9e3b;
|
||||
color: white;
|
||||
border-radius: 0.05rem;
|
||||
font-size: 0.37rem;
|
||||
line-height: 0.67rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,16 +1,15 @@
|
||||
<template>
|
||||
<van-popup :value.sync="visible" position="bottom" @close="onClose" @click-overlay="onClose" safe-area-inset-bottom
|
||||
style="min-height: 50vh">
|
||||
<van-popup :value.sync="visible" position="bottom" @close="onClose" @click-overlay="onClose" safe-area-inset-bottom style="min-height: 50vh">
|
||||
<div class="add-merit-name">
|
||||
<h3 class="title">功德芳名</h3>
|
||||
<div class="add-name">
|
||||
<input class="input" type="text" v-model="name" placeholder="请输入功德主姓名">
|
||||
<input class="input" type="text" v-model="name" placeholder="请输入功德主姓名" />
|
||||
<button class="btn" @click="addName">添加</button>
|
||||
</div>
|
||||
<div class="name-group">
|
||||
<span class="name" :class="[selectedName.includes(name.id) && 'selected']" v-for="(name, index) in names" :key="name.id" @click="onSelectName(name)">
|
||||
{{ name.name }}
|
||||
<input type="checkbox" v-model="selectedName" :value="name.id" >
|
||||
<input type="checkbox" v-model="selectedName" :value="name.id" />
|
||||
<i class="iconfont icon-biaodankongjianshanchu" @click.stop="onDeleteName(name, index)"></i>
|
||||
</span>
|
||||
</div>
|
||||
@@ -20,52 +19,52 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { deleteMeritName, getMeritName, postMeritName } from '@/api';
|
||||
import { deleteMeritName, getMeritName, postMeritName } from "@/api";
|
||||
|
||||
export default {
|
||||
name: 'merit-name',
|
||||
name: "merit-name",
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
selected: {
|
||||
type: Array,
|
||||
default(){
|
||||
return []
|
||||
}
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
name: '',
|
||||
name: "",
|
||||
names: [],
|
||||
selectedName: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
visible(value){
|
||||
if(value){
|
||||
this.selectedName = this.selected.map(v => v.id)
|
||||
visible(value) {
|
||||
if (value) {
|
||||
this.selectedName = this.selected.map((v) => v.id);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getName();
|
||||
},
|
||||
methods: {
|
||||
onClose() {
|
||||
this.$emit('update:visible', false);
|
||||
this.$emit("update:visible", false);
|
||||
},
|
||||
onSelectName(name){
|
||||
onSelectName(name) {
|
||||
this.person = name;
|
||||
this.showDialog = false;
|
||||
},
|
||||
async addName() {
|
||||
if (!this.name) return;
|
||||
await postMeritName(this.name);
|
||||
this.name = '';
|
||||
this.name = "";
|
||||
await this.getName();
|
||||
},
|
||||
async onDeleteName(name) {
|
||||
@@ -77,29 +76,29 @@ export default {
|
||||
this.names = data;
|
||||
},
|
||||
async onConfirmMeritName() {
|
||||
if(this.name){
|
||||
if (this.name) {
|
||||
const name = this.name;
|
||||
await this.addName(this.name);
|
||||
const selected = this.names.filter(item => item.name === name);
|
||||
const selected = this.names.filter((item) => item.name === name);
|
||||
this.onClose();
|
||||
this.$emit('change', selected);
|
||||
return ;
|
||||
this.$emit("change", selected);
|
||||
return;
|
||||
}
|
||||
const selected = this.names.filter(item => this.selectedName.includes(item.id));
|
||||
const selected = this.names.filter((item) => this.selectedName.includes(item.id));
|
||||
this.onClose();
|
||||
this.$emit('change', selected);
|
||||
}
|
||||
}
|
||||
this.$emit("change", selected);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.add-merit-name {
|
||||
padding: .4rem;
|
||||
padding: 0.4rem;
|
||||
|
||||
.title {
|
||||
font-size: .4rem;
|
||||
margin-bottom: .4rem;
|
||||
font-size: 0.4rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.add-name {
|
||||
@@ -107,50 +106,50 @@ export default {
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
height: .8rem;
|
||||
line-height: .8rem;
|
||||
padding-left: .3rem;
|
||||
font-size: .35rem;
|
||||
height: 0.8rem;
|
||||
line-height: 0.8rem;
|
||||
padding-left: 0.3rem;
|
||||
font-size: 0.35rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .11rem;
|
||||
font-size: .4rem;
|
||||
border-radius: 0.11rem;
|
||||
font-size: 0.4rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: .2rem .6rem;
|
||||
background: $primary-color;
|
||||
padding: 0.2rem 0.6rem;
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
border: 1px solid $primary-color;
|
||||
font-size: .4rem;
|
||||
border-radius: .11rem;
|
||||
margin-left: .3rem;
|
||||
border: 1px solid #cf9e3b;
|
||||
font-size: 0.4rem;
|
||||
border-radius: 0.11rem;
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.name-group {
|
||||
padding: .5rem 0;
|
||||
padding: 0.5rem 0;
|
||||
height: 30vh;
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: .3rem .6rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .08rem;
|
||||
border-radius: 0.08rem;
|
||||
position: relative;
|
||||
margin-right: .2rem;
|
||||
margin-bottom: .2rem;
|
||||
font-size: .4rem;
|
||||
margin-right: 0.2rem;
|
||||
margin-bottom: 0.2rem;
|
||||
font-size: 0.4rem;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
right: -.25rem;
|
||||
top: -.25rem;
|
||||
font-size: .7rem;
|
||||
right: -0.25rem;
|
||||
top: -0.25rem;
|
||||
font-size: 0.7rem;
|
||||
color: red;
|
||||
}
|
||||
input[type=checkbox]{
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@@ -158,25 +157,24 @@ export default {
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
&.selected{
|
||||
background: $primary-color;
|
||||
&.selected {
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.desire-input {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .13rem;
|
||||
border-radius: 0.13rem;
|
||||
overflow: hidden;
|
||||
|
||||
.desire-textarea {
|
||||
border: none;
|
||||
display: block;
|
||||
font-size: .35rem;
|
||||
width: calc(100% - .5rem);
|
||||
padding: .25rem;
|
||||
font-size: 0.35rem;
|
||||
width: calc(100% - 0.5rem);
|
||||
padding: 0.25rem;
|
||||
height: 2rem;
|
||||
resize: none;
|
||||
}
|
||||
@@ -184,8 +182,8 @@ export default {
|
||||
span {
|
||||
display: block;
|
||||
text-align: right;
|
||||
padding: .2rem;
|
||||
font-size: .35rem;
|
||||
padding: 0.2rem;
|
||||
font-size: 0.35rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -196,34 +194,33 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: .4rem;
|
||||
margin-bottom: .3rem;
|
||||
font-size: 0.4rem;
|
||||
margin-bottom: 0.3rem;
|
||||
|
||||
.update {
|
||||
font-size: .35rem;
|
||||
color: $primary-color;
|
||||
font-size: 0.35rem;
|
||||
color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
|
||||
.name-group {
|
||||
padding: .1rem 0;
|
||||
padding: 0.1rem 0;
|
||||
|
||||
.name {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.confirm {
|
||||
background: $primary-color;
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
border: 1px solid $primary-color;
|
||||
border: 1px solid #cf9e3b;
|
||||
width: 100%;
|
||||
padding: .3rem 0;
|
||||
padding: 0.3rem 0;
|
||||
border-radius: 1rem;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
font-size: .4rem;
|
||||
font-size: 0.4rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
<template>
|
||||
<van-popup v-model="value" position="bottom" @close="$emit('update:value', false)">
|
||||
<div class="red-packet" v-if="user">
|
||||
<img class="avatar" :src="anonymous ? avatar : user.avatar" alt="">
|
||||
<img class="avatar" :src="anonymous ? avatar : user.avatar" alt="" />
|
||||
<div class="username-container">
|
||||
<div class="username" v-if="!edit" @click="onEdit">
|
||||
<span>{{user.nickname}}</span>
|
||||
<span>{{ user.nickname }}</span>
|
||||
<i class="iconfont icon-bianjisekuai"></i>
|
||||
</div>
|
||||
<input class="input-username" ref="input" v-if="edit" v-model="user.nickname" @blur="edit = false">
|
||||
<input class="input-username" ref="input" v-if="edit" v-model="user.nickname" @blur="edit = false" />
|
||||
</div>
|
||||
<vue-number-scroll v-model="number"></vue-number-scroll>
|
||||
<div class="money-input">
|
||||
<input type="tel" v-model="money" v-number-only @change="onMoneyInput">
|
||||
<input type="tel" v-model="money" v-number-only @change="onMoneyInput" />
|
||||
<span>元</span>
|
||||
</div>
|
||||
<!-- <div class="bar">
|
||||
<span>
|
||||
<van-checkbox v-model="anonymous" checked-color="#CF9E3B" @change="onAnonymous">匿名参与</van-checkbox>
|
||||
<van-checkbox v-model="anonymous" checked-color="#CF9E3B;" @change="onAnonymous">匿名参与</van-checkbox>
|
||||
</span>
|
||||
<span>查看服务协议</span>
|
||||
</div> -->
|
||||
@@ -29,152 +29,151 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getRandMoney, getUserData } from '@/api';
|
||||
import VueNumberScroll from '../vue-number-scroll'
|
||||
import { getRandMoney, getUserData } from "@/api";
|
||||
import VueNumberScroll from "../vue-number-scroll";
|
||||
|
||||
export default {
|
||||
name: 'random-money',
|
||||
name: "random-money",
|
||||
components: {
|
||||
VueNumberScroll
|
||||
VueNumberScroll,
|
||||
},
|
||||
data(){
|
||||
data() {
|
||||
return {
|
||||
avatar: require('@/assets/img/xiaoheshang.jpg'),
|
||||
avatar: require("@/assets/img/xiaoheshang.jpg"),
|
||||
edit: false,
|
||||
anonymous: false,
|
||||
numberArr: ['3', '.', '9','9'],
|
||||
numberArr: ["3", ".", "9", "9"],
|
||||
number: 0,
|
||||
money: 0,
|
||||
user: null,
|
||||
privateUser: null,
|
||||
inputNickname: '',
|
||||
inputNickname: "",
|
||||
randList: [],
|
||||
}
|
||||
};
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
mounted(){
|
||||
this.getRandMoney()
|
||||
|
||||
mounted() {
|
||||
this.getRandMoney();
|
||||
this.getUserData();
|
||||
},
|
||||
methods: {
|
||||
onAnonymous(checked){
|
||||
onAnonymous(checked) {
|
||||
this.anonymous = checked;
|
||||
if(checked){
|
||||
this.user.nickname = '匿名用户'
|
||||
if (checked) {
|
||||
this.user.nickname = "匿名用户";
|
||||
} else {
|
||||
this.user.nickname = this.privateUser.nickname
|
||||
this.user.nickname = this.privateUser.nickname;
|
||||
}
|
||||
},
|
||||
onEdit(){
|
||||
onEdit() {
|
||||
this.edit = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.input.focus();
|
||||
})
|
||||
});
|
||||
},
|
||||
async getUserData(){
|
||||
async getUserData() {
|
||||
const res = await getUserData();
|
||||
this.user = res;
|
||||
this.privateUser = Object.assign({}, res);
|
||||
this.inputNickname = res.nickname;
|
||||
},
|
||||
onMoneyInput(e){
|
||||
this.number = e.target.value
|
||||
onMoneyInput(e) {
|
||||
this.number = e.target.value;
|
||||
},
|
||||
changeMoney(){
|
||||
changeMoney() {
|
||||
const rand = Math.floor(Math.random() * this.randList.length);
|
||||
this.number = Number(this.randList[rand])
|
||||
this.money = this.number;
|
||||
this.number = Number(this.randList[rand]);
|
||||
this.money = this.number;
|
||||
},
|
||||
async getRandMoney(){
|
||||
async getRandMoney() {
|
||||
const res = await getRandMoney();
|
||||
this.randList = res;
|
||||
this.money = Number(res[0])
|
||||
this.number = Number(res[0])
|
||||
this.money = Number(res[0]);
|
||||
this.number = Number(res[0]);
|
||||
},
|
||||
onNext(){
|
||||
this.$emit('change', {
|
||||
onNext() {
|
||||
this.$emit("change", {
|
||||
anonymous: this.anonymous,
|
||||
money: this.number
|
||||
})
|
||||
this.$emit('update:value', false)
|
||||
}
|
||||
}
|
||||
money: this.number,
|
||||
});
|
||||
this.$emit("update:value", false);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.red-packet{
|
||||
.red-packet {
|
||||
min-height: 60vh;
|
||||
background: #e85042 url('~@/assets/img/red-packet.jpg') top center no-repeat;
|
||||
background: #e85042 url("~@/assets/img/red-packet.jpg") top center no-repeat;
|
||||
background-size: contain;
|
||||
overflow: hidden;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
.avatar{
|
||||
.avatar {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
display: block;
|
||||
border-radius: 1.5rem;
|
||||
border: 2px solid yellow;
|
||||
margin: 2rem auto .1rem;
|
||||
margin: 2rem auto 0.1rem;
|
||||
}
|
||||
.username-container{
|
||||
padding-top: .3rem;
|
||||
.username-container {
|
||||
padding-top: 0.3rem;
|
||||
height: 1rem;
|
||||
.username{
|
||||
.username {
|
||||
color: white;
|
||||
font-size: .4rem;
|
||||
font-size: 0.4rem;
|
||||
text-align: center;
|
||||
margin-top: .3rem;
|
||||
span{
|
||||
padding-right: .1rem;
|
||||
margin-top: 0.3rem;
|
||||
span {
|
||||
padding-right: 0.1rem;
|
||||
}
|
||||
}
|
||||
.input-username{
|
||||
.input-username {
|
||||
border: 1px solid yellow;
|
||||
font-size: .4rem;
|
||||
font-size: 0.4rem;
|
||||
background: transparent;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
height: 1rem;
|
||||
color: white;
|
||||
padding: .1rem .3rem;
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.money{
|
||||
|
||||
.money {
|
||||
color: yellow;
|
||||
text-align: center;
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
font-size: 1rem;
|
||||
overflow: hidden;
|
||||
margin-top: .6rem;
|
||||
margin-bottom: .8rem;
|
||||
ul{
|
||||
li{
|
||||
margin-top: 0.6rem;
|
||||
margin-bottom: 0.8rem;
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bar{
|
||||
.bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: .4rem;
|
||||
font-size: 0.4rem;
|
||||
color: white;
|
||||
padding: .3rem .6rem;
|
||||
margin-top: .6rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
.money-input{
|
||||
.money-input {
|
||||
border: 1px solid yellow;
|
||||
height: 1.2rem;
|
||||
width: 60%;
|
||||
@@ -184,48 +183,48 @@ export default {
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
justify-content: space-between;
|
||||
input{
|
||||
input {
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding-left: .5rem;
|
||||
font-size: .5rem;
|
||||
padding-left: 0.5rem;
|
||||
font-size: 0.5rem;
|
||||
width: 50%;
|
||||
}
|
||||
span{
|
||||
padding: 0 .2rem;
|
||||
font-size: .5rem;
|
||||
span {
|
||||
padding: 0 0.2rem;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
}
|
||||
.van-checkbox__label{
|
||||
.van-checkbox__label {
|
||||
color: white;
|
||||
}
|
||||
.random-button-group{
|
||||
.random-button-group {
|
||||
text-align: center;
|
||||
font-size: .5rem;
|
||||
margin-top: .7rem;
|
||||
font-size: 0.5rem;
|
||||
margin-top: 0.7rem;
|
||||
display: flex;
|
||||
padding: 0 .4rem;
|
||||
margin-bottom: .5rem;
|
||||
button{
|
||||
padding: 0 0.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
button {
|
||||
background: transparent;
|
||||
margin: 0 .2rem;
|
||||
margin: 0 0.2rem;
|
||||
height: 1.3rem;
|
||||
border: 1px solid transparent;
|
||||
color: white;
|
||||
}
|
||||
.change{
|
||||
.change {
|
||||
color: yellow;
|
||||
border: 1px solid yellow;
|
||||
border-radius: 4px;
|
||||
flex: 1.3;
|
||||
}
|
||||
.next{
|
||||
.next {
|
||||
background: yellow;
|
||||
color: rgb(224, 61, 61);
|
||||
border-radius: 4px;
|
||||
flex: 2
|
||||
flex: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="input-box">
|
||||
<div class="input-content" @keydown="keydown" @keyup="keyup" @paste="paste" @mousewheel="mousewheel" @input="inputEvent">
|
||||
<input max="9" min="0" maxlength="1" data-index="0" v-model.trim.number="input[0]" type="number" ref="firstinput"/>
|
||||
<input max="9" min="0" maxlength="1" data-index="1" v-model.trim.number="input[1]" type="number"/>
|
||||
<input max="9" min="0" maxlength="1" data-index="2" v-model.trim.number="input[2]" type="number"/>
|
||||
<input max="9" min="0" maxlength="1" data-index="3" v-model.trim.number="input[3]" type="number"/>
|
||||
<input max="9" min="0" maxlength="1" data-index="0" v-model.trim.number="input[0]" type="number" ref="firstinput" />
|
||||
<input max="9" min="0" maxlength="1" data-index="1" v-model.trim.number="input[1]" type="number" />
|
||||
<input max="9" min="0" maxlength="1" data-index="2" v-model.trim.number="input[2]" type="number" />
|
||||
<input max="9" min="0" maxlength="1" data-index="3" v-model.trim.number="input[3]" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -22,7 +22,7 @@
|
||||
font-family: inherit;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
border-bottom: 2px solid $primary-color;
|
||||
border-bottom: 2px solid #cf9e3b;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
font-size: 1rem;
|
||||
@@ -48,27 +48,27 @@ export default {
|
||||
pasteResult: [],
|
||||
};
|
||||
},
|
||||
props: ['code'],
|
||||
props: ["code"],
|
||||
computed: {
|
||||
input() {
|
||||
if (this.code && Array.isArray(this.code) && this.code.length === this.codeCount) {
|
||||
return this.code;
|
||||
} else if (/^\d{this.codeCount}$/.test(this.code.toString())) {
|
||||
return this.code.toString().split('');
|
||||
return this.code.toString().split("");
|
||||
} else if (this.pasteResult.length === this.codeCount) {
|
||||
return this.pasteResult;
|
||||
} else {
|
||||
return new Array(this.codeCount);
|
||||
}
|
||||
},
|
||||
is_weixn(){
|
||||
is_weixn() {
|
||||
const ua = navigator.userAgent.toLowerCase();
|
||||
if(ua.match(/MicroMessenger/i)=="micromessenger") {
|
||||
if (ua.match(/MicroMessenger/i) == "micromessenger") {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 解决一个输入框输入多个字符
|
||||
@@ -76,48 +76,48 @@ export default {
|
||||
var index = e.target.dataset.index * 1;
|
||||
var el = e.target;
|
||||
// el.value = el.value.replace(/Digit|Numpad/i, '').replace(/1/g, '').slice(0, 1);
|
||||
this.$set(this.input, index, el.value)
|
||||
this.$set(this.input, index, el.value);
|
||||
},
|
||||
keydown(e) {
|
||||
var index = e.target.dataset.index * 1;
|
||||
var el = e.target;
|
||||
if (e.key === 'Backspace') {
|
||||
if (e.key === "Backspace") {
|
||||
if (this.input[index].length > 0) {
|
||||
this.$set(this.input, index, '')
|
||||
this.$set(this.input, index, "");
|
||||
} else {
|
||||
if (el.previousElementSibling) {
|
||||
el.previousElementSibling.focus()
|
||||
this.$set(this.input, index - 1, '')
|
||||
el.previousElementSibling.focus();
|
||||
this.$set(this.input, index - 1, "");
|
||||
}
|
||||
}
|
||||
} else if (e.key === 'Delete') {
|
||||
} else if (e.key === "Delete") {
|
||||
if (this.input[index].length > 0) {
|
||||
this.$set(this.input, index, '')
|
||||
this.$set(this.input, index, "");
|
||||
} else {
|
||||
if (el.nextElementSibling) {
|
||||
this.$set(this.input, index = 1, '')
|
||||
this.$set(this.input, (index = 1), "");
|
||||
}
|
||||
}
|
||||
if (el.nextElementSibling) {
|
||||
el.nextElementSibling.focus()
|
||||
el.nextElementSibling.focus();
|
||||
}
|
||||
} else if (e.key === 'Home') {
|
||||
el.parentElement.children[0] && el.parentElement.children[0].focus()
|
||||
} else if (e.key === 'End') {
|
||||
el.parentElement.children[this.input.length - 1] && el.parentElement.children[this.input.length - 1].focus()
|
||||
} else if (e.key === 'ArrowLeft') {
|
||||
} else if (e.key === "Home") {
|
||||
el.parentElement.children[0] && el.parentElement.children[0].focus();
|
||||
} else if (e.key === "End") {
|
||||
el.parentElement.children[this.input.length - 1] && el.parentElement.children[this.input.length - 1].focus();
|
||||
} else if (e.key === "ArrowLeft") {
|
||||
if (el.previousElementSibling) {
|
||||
el.previousElementSibling.focus()
|
||||
el.previousElementSibling.focus();
|
||||
}
|
||||
} else if (e.key === 'ArrowRight') {
|
||||
} else if (e.key === "ArrowRight") {
|
||||
if (el.nextElementSibling) {
|
||||
el.nextElementSibling.focus()
|
||||
el.nextElementSibling.focus();
|
||||
}
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
} else if (e.key === "ArrowUp") {
|
||||
if (this.input[index] * 1 < 9) {
|
||||
this.$set(this.input, index, (this.input[index] * 1 + 1).toString());
|
||||
}
|
||||
} else if (e.key === 'ArrowDown') {
|
||||
} else if (e.key === "ArrowDown") {
|
||||
if (this.input[index] * 1 > 0) {
|
||||
this.$set(this.input, index, (this.input[index] * 1 - 1).toString());
|
||||
}
|
||||
@@ -129,20 +129,20 @@ export default {
|
||||
// 解决输入e的问题
|
||||
var reg = /Digit|Numpad/i;
|
||||
this.eventObj = JSON.stringify(e);
|
||||
el.value = el.value.replace(reg, '').slice(0, 1);
|
||||
el.value = el.value.replace(reg, "").slice(0, 1);
|
||||
if (reg.test(e) || this.is_weixn) {
|
||||
// 必须在这里符直，否则输入框会是空值
|
||||
this.$set(this.input, index, el.value);
|
||||
el.nextElementSibling && el.nextElementSibling.focus();
|
||||
if (index === this.codeCount-1) {
|
||||
if (this.input.join('').length === this.codeCount) {
|
||||
if (index === this.codeCount - 1) {
|
||||
if (this.input.join("").length === this.codeCount) {
|
||||
document.activeElement.blur();
|
||||
this.$emit('complete', this.input);
|
||||
this.$emit("complete", this.input);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (this.input[index] === '') {
|
||||
this.$set(this.input, index, '');
|
||||
if (this.input[index] === "") {
|
||||
this.$set(this.input, index, "");
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -156,33 +156,33 @@ export default {
|
||||
if (this.input[index] * 1 > 0) {
|
||||
this.$set(this.input, index, (this.input[index] * 1 - 1).toString());
|
||||
}
|
||||
} else if (e.key === 'Enter') {
|
||||
if (this.input.join('').length === this.codeCount) {
|
||||
} else if (e.key === "Enter") {
|
||||
if (this.input.join("").length === this.codeCount) {
|
||||
document.activeElement.blur();
|
||||
this.$emit('complete', this.input);
|
||||
this.$emit("complete", this.input);
|
||||
}
|
||||
}
|
||||
},
|
||||
paste(e) {
|
||||
// 当进行粘贴时
|
||||
e.clipboardData.items[0].getAsString(str => {
|
||||
e.clipboardData.items[0].getAsString((str) => {
|
||||
if (str.toString().length === this.codeCount) {
|
||||
this.pasteResult = str.split('');
|
||||
this.pasteResult = str.split("");
|
||||
document.activeElement.blur();
|
||||
this.$emit('complete', this.input);
|
||||
this.$emit("complete", this.input);
|
||||
this.pasteResult = [];
|
||||
} else {
|
||||
// 如果粘贴内容不合规，清除所有内容
|
||||
this.input[0] = new Array(6)
|
||||
this.input[0] = new Array(6);
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 等待dom渲染完成，在执行focus,否则无法获取到焦点
|
||||
this.$nextTick(() => {
|
||||
this.$refs.firstinput.focus()
|
||||
})
|
||||
this.$refs.firstinput.focus();
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,88 +1,90 @@
|
||||
<template>
|
||||
<div class="user-merit border-bottom" v-if="data">
|
||||
<img
|
||||
:src="data.avatar || data.user_info.avatar"
|
||||
alt=""
|
||||
/>
|
||||
<div class="profile">
|
||||
<div>
|
||||
<div class="name">
|
||||
<span>{{data.merit_name || data.nickname || data.user_info.nickname}}</span>
|
||||
<!-- <span>{{data.user_info.region}}</span>-->
|
||||
</div>
|
||||
<p class="goods_name">{{data.goods_name}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="result">
|
||||
<p class="money">{{data.order_amount || data.sum_money}}元</p>
|
||||
<span class="date">{{data.paid_at}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-merit border-bottom" v-if="data">
|
||||
<img :src="avatar" alt="" />
|
||||
<div class="profile">
|
||||
<div>
|
||||
<div class="name">
|
||||
<span>{{ data.merit_name || data.nickname || data.user_info.nickname }}</span>
|
||||
<!-- <span>{{data.user_info.region}}</span>-->
|
||||
</div>
|
||||
<p class="goods_name">{{ data.goods_name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="result">
|
||||
<p class="money">{{ data.order_amount || data.sum_money }}元</p>
|
||||
<span class="date">{{ data.paid_at }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "user-merit",
|
||||
props: ['data']
|
||||
name: "user-merit",
|
||||
props: ["data"],
|
||||
data() {
|
||||
return {
|
||||
avatar: "/touxiang.png",
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-merit {
|
||||
display: flex;
|
||||
padding: .27rem 0.4rem;
|
||||
img {
|
||||
width: 1.17rem;
|
||||
height: 1.17rem;
|
||||
border-radius: 1.17rem;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
.profile {
|
||||
flex: 1;
|
||||
padding-top: .13rem;
|
||||
.name {
|
||||
display: flex;
|
||||
padding: 0.27rem 0.4rem;
|
||||
img {
|
||||
width: 1.17rem;
|
||||
height: 1.17rem;
|
||||
border-radius: 1.17rem;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
.profile {
|
||||
flex: 1;
|
||||
padding-top: 0.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;
|
||||
margin-bottom: 0.27rem;
|
||||
span:first-child {
|
||||
font-size: 0.4rem;
|
||||
color: #222;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
margin-right: 0.4rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
span:last-child {
|
||||
font-size: 0.32rem;
|
||||
color: #666;
|
||||
vertical-align: text-bottom;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
p.goods_name{
|
||||
font-size: 0.32rem;
|
||||
}
|
||||
span:last-child {
|
||||
font-size: 0.32rem;
|
||||
color: #666;
|
||||
vertical-align: text-bottom;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
p.goods_name {
|
||||
font-size: 0.32rem;
|
||||
max-width: 4rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.result {
|
||||
font-size: 0.32rem;
|
||||
}
|
||||
}
|
||||
.result {
|
||||
font-size: 0.32rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
padding: .13rem 0;
|
||||
padding: 0.13rem 0;
|
||||
text-align: right;
|
||||
.money {
|
||||
font-size: 0.37rem;
|
||||
color: $primary-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
.date {
|
||||
font-size: 0.3rem;
|
||||
.money {
|
||||
font-size: 0.37rem;
|
||||
color: #cf9e3b;
|
||||
font-weight: bold;
|
||||
}
|
||||
.date {
|
||||
font-size: 0.3rem;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -20,10 +20,10 @@
|
||||
<i class="iconfont icon-guanzhu-yiguanzhu"></i>
|
||||
<b>关注</b>
|
||||
</span>
|
||||
<!-- <span class="btn" @click="onShare">-->
|
||||
<!-- <i class="iconfont icon-zhuanfa"></i>-->
|
||||
<!-- <b>转发</b>-->
|
||||
<!-- </span>-->
|
||||
<!-- <span class="btn" @click="onShare">-->
|
||||
<!-- <i class="iconfont icon-zhuanfa"></i>-->
|
||||
<!-- <b>转发</b>-->
|
||||
<!-- </span>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -31,17 +31,17 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDynamicDetail, toggleCollect } from '@/api';
|
||||
import { getDynamicDetail, toggleCollect } from "@/api";
|
||||
|
||||
export default {
|
||||
name: 'buddha-detail',
|
||||
name: "buddha-detail",
|
||||
data() {
|
||||
return {
|
||||
data: null,
|
||||
showShare: false,
|
||||
options: [
|
||||
{ name: '微信', icon: 'wechat' },
|
||||
{ name: '朋友圈', icon: 'wechat-moments' },
|
||||
{ name: "微信", icon: "wechat" },
|
||||
{ name: "朋友圈", icon: "wechat-moments" },
|
||||
],
|
||||
};
|
||||
},
|
||||
@@ -49,7 +49,7 @@ export default {
|
||||
covers: {
|
||||
get() {
|
||||
const type = Object.prototype.toString.call(this.data.covers);
|
||||
return type === '[object Object]' ? []: this.data.covers.slice(0, 3);
|
||||
return type === "[object Object]" ? [] : this.data.covers.slice(0, 3);
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -57,28 +57,28 @@ export default {
|
||||
this.getDynamicDetail();
|
||||
},
|
||||
methods: {
|
||||
onShare(){
|
||||
onShare() {
|
||||
this.showShare = true;
|
||||
},
|
||||
|
||||
async getDynamicDetail(){
|
||||
async getDynamicDetail() {
|
||||
const data = await getDynamicDetail(this.$route.query.id);
|
||||
this.data = data;
|
||||
|
||||
this.wechatReady({
|
||||
...data.shareConfig,
|
||||
link: location.href + '&jumpUrl=https://baidu.com',
|
||||
})
|
||||
link: location.href + "&jumpUrl=https://baidu.com",
|
||||
});
|
||||
},
|
||||
|
||||
async onCollect() {
|
||||
await toggleCollect(this.data.id);
|
||||
this.data.is_collected = this.data.is_collected === 1 ? 0 : 1;
|
||||
},
|
||||
onGoodsDetail(){
|
||||
onGoodsDetail() {
|
||||
const { goods_type, goods_id, temple_id } = this.data;
|
||||
this.onPushToGoodsDetail(goods_type, goods_id, temple_id)
|
||||
}
|
||||
this.onPushToGoodsDetail(goods_type, goods_id, temple_id);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -87,10 +87,10 @@ export default {
|
||||
.process-detail-wrapper {
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding: .5rem .4rem env(safe-area-inset-bottom) .4rem;
|
||||
padding: 0.5rem 0.4rem env(safe-area-inset-bottom) 0.4rem;
|
||||
margin-bottom: 1rem;
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
height: 1px;
|
||||
width: 200%;
|
||||
background: #ededed;
|
||||
@@ -111,8 +111,8 @@ export default {
|
||||
font-size: 0.35rem;
|
||||
color: #666666;
|
||||
display: block;
|
||||
margin-bottom: .3rem;
|
||||
padding: .1rem 0;
|
||||
margin-bottom: 0.3rem;
|
||||
padding: 0.1rem 0;
|
||||
}
|
||||
.title {
|
||||
font-size: 0.43rem;
|
||||
@@ -126,9 +126,9 @@ export default {
|
||||
color: #5a5a5a;
|
||||
text-align: justify;
|
||||
}
|
||||
.detail-text{
|
||||
font-size: .4rem;
|
||||
padding-top: .2rem;
|
||||
.detail-text {
|
||||
font-size: 0.4rem;
|
||||
padding-top: 0.2rem;
|
||||
color: #b74100;
|
||||
}
|
||||
.image-group {
|
||||
@@ -144,16 +144,16 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.process-content{
|
||||
font-size: .4rem;
|
||||
img{
|
||||
.process-content {
|
||||
font-size: 0.4rem;
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
p{
|
||||
margin: .3rem 0;
|
||||
p {
|
||||
margin: 0.3rem 0;
|
||||
line-height: 1.4;
|
||||
color: #5a5a5a;
|
||||
font-size: .37rem;
|
||||
font-size: 0.37rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
& * {
|
||||
@@ -190,7 +190,7 @@ export default {
|
||||
align-items: center;
|
||||
|
||||
.iconfont {
|
||||
color: $primary-color;
|
||||
color: #cf9e3b;
|
||||
vertical-align: middle;
|
||||
font-size: 0.4rem;
|
||||
margin-top: -3px;
|
||||
@@ -205,7 +205,7 @@ export default {
|
||||
}
|
||||
.collect {
|
||||
.iconfont {
|
||||
color: $primary-color;
|
||||
color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
.un-collect {
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
<p class="label">自动行善</p>
|
||||
<div class="donate">
|
||||
<span>每天早上六点寺院联盟帮你自动行善一次</span>
|
||||
<van-checkbox v-model="is_auto" shape="square" checked-color="#cf9e3b"></van-checkbox>
|
||||
<van-checkbox v-model="is_auto" shape="square" checked-color="#CF9E3B;"></van-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="auto-donate-time" v-if="is_auto">
|
||||
@@ -116,7 +116,7 @@
|
||||
<p class="label">每日填砖</p>
|
||||
<div class="donate">
|
||||
<span>每天早上六点寺院联盟帮你自动填砖一次</span>
|
||||
<van-checkbox v-model="is_auto" shape="square" checked-color="#cf9e3b"></van-checkbox>
|
||||
<van-checkbox v-model="is_auto" shape="square" checked-color="#CF9E3B;"></van-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="auto-donate-time" v-if="is_auto">
|
||||
@@ -457,7 +457,7 @@ export default {
|
||||
user-select: none;
|
||||
color: #666;
|
||||
&:active {
|
||||
background: rgba($primary-color, 0.1);
|
||||
background: rgba(#cf9e3b, 0.1);
|
||||
}
|
||||
}
|
||||
span.spec-disabled {
|
||||
@@ -480,7 +480,7 @@ export default {
|
||||
align-items: center;
|
||||
}
|
||||
span.active {
|
||||
color: $primary-color;
|
||||
color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
.auto-donate {
|
||||
@@ -537,7 +537,7 @@ export default {
|
||||
.total {
|
||||
font-size: 0.4rem;
|
||||
em {
|
||||
color: $primary-color;
|
||||
color: #cf9e3b;
|
||||
font-size: 0.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -545,8 +545,8 @@ export default {
|
||||
.next {
|
||||
font-size: 0.4rem;
|
||||
padding: 0.3rem 1rem;
|
||||
background: $primary-color;
|
||||
border: 1px solid $primary-color;
|
||||
background: #cf9e3b;
|
||||
border: 1px solid #cf9e3b;
|
||||
color: white;
|
||||
border-radius: 0.1rem;
|
||||
}
|
||||
@@ -637,13 +637,13 @@ export default {
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 0.2rem);
|
||||
.merit-button {
|
||||
display: inline-block;
|
||||
background: $primary-color;
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
height: 1.2rem;
|
||||
font-size: 0.37rem;
|
||||
width: 60%;
|
||||
padding: 0 0.53rem;
|
||||
border: 0.01rem solid $primary-color;
|
||||
border: 0.01rem solid #cf9e3b;
|
||||
border-radius: 1.33rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,11 +5,11 @@
|
||||
<div class="field">
|
||||
<label class="required">功德芳名</label>
|
||||
<div class="input-wrapper">
|
||||
<input class="input" :value="meritName" type="text" readonly placeholder="请输入功德芳名" @click="onShowDialog('name')">
|
||||
<input class="input" :value="meritName" type="text" readonly placeholder="请输入功德芳名" @click="onShowDialog('name')" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label >心愿</label>
|
||||
<label>心愿</label>
|
||||
<div class="input-wrapper" @click="onShowDesire">
|
||||
<textarea class="input" v-model="dream" placeholder="请填写您的心愿" readonly type="textarea" />
|
||||
<i class="iconfont icon-arrow-right"></i>
|
||||
@@ -19,199 +19,200 @@
|
||||
<div class="field">
|
||||
<label class="required">阳上人</label>
|
||||
<div class="input-wrapper">
|
||||
<input class="input" v-model="live_name" type="tel" placeholder="请填写阳上人">
|
||||
<input class="input" v-model="live_name" type="tel" placeholder="请填写阳上人" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="required">往生者</label>
|
||||
<div class="input-wrapper">
|
||||
<input class="input" v-model="die_name" type="tel" placeholder="请填写往生者">
|
||||
<input class="input" v-model="die_name" type="tel" placeholder="请填写往生者" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="field">
|
||||
<label >手机号码</label>
|
||||
<label>手机号码</label>
|
||||
<div class="input-wrapper">
|
||||
<input class="input" v-model="mobile" type="tel" placeholder="请填写手机号码">
|
||||
<input class="input" v-model="mobile" type="tel" placeholder="请填写手机号码" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-wrapper">
|
||||
<span class="total">合计： <b class="price">￥{{query.amount}}</b></span>
|
||||
<span class="total"
|
||||
>合计： <b class="price">￥{{ query.amount }}</b></span
|
||||
>
|
||||
<button type="button" @click="onNext">下一步</button>
|
||||
</div>
|
||||
|
||||
<merit-name :visible.sync="showMeritName" :selected="merit_names" @change="onMeritName"></merit-name>
|
||||
|
||||
<merit-desire :visible.sync="showDesire" @change="onMeritDesire"></merit-desire>
|
||||
<merit-desire :visible.sync="showDesire" @change="onMeritDesire"></merit-desire>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'fill-name',
|
||||
data(){
|
||||
name: "fill-name",
|
||||
data() {
|
||||
return {
|
||||
query: this.$route.query,
|
||||
mobile: '',
|
||||
dream: '',
|
||||
merit_name_id: '',
|
||||
dialogName: '',
|
||||
mobile: "",
|
||||
dream: "",
|
||||
merit_name_id: "",
|
||||
dialogName: "",
|
||||
showMeritName: false,
|
||||
showDesire: false,
|
||||
merit_names: [],
|
||||
meritTypes: [],
|
||||
meritTypeId: null,
|
||||
showBuddhi: true,
|
||||
live_name: '', // 阳上人姓名
|
||||
die_name: '', // 往生人姓名
|
||||
}
|
||||
live_name: "", // 阳上人姓名
|
||||
die_name: "", // 往生人姓名
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
meritName(){
|
||||
return this.merit_names.map(item => item.name).join('，')
|
||||
meritName() {
|
||||
return this.merit_names.map((item) => item.name).join("，");
|
||||
},
|
||||
meritId(){
|
||||
return this.merit_names.map(item => item.id).join(',')
|
||||
meritId() {
|
||||
return this.merit_names.map((item) => item.id).join(",");
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
onShowDialog(){
|
||||
this.showMeritName = true;
|
||||
onShowDialog() {
|
||||
this.showMeritName = true;
|
||||
},
|
||||
onShowDesire(){
|
||||
onShowDesire() {
|
||||
this.showDesire = true;
|
||||
},
|
||||
onMeritName(meritNameArr){
|
||||
onMeritName(meritNameArr) {
|
||||
this.merit_names = meritNameArr;
|
||||
},
|
||||
onMeritDesire(desire){
|
||||
onMeritDesire(desire) {
|
||||
this.dream = desire;
|
||||
},
|
||||
onNext(){
|
||||
if(!this.meritId){
|
||||
return this.$toast.fail('请填写功德芳名');
|
||||
onNext() {
|
||||
if (!this.meritId) {
|
||||
return this.$toast.fail("请填写功德芳名");
|
||||
}
|
||||
if(this.query.is_die == 1 && (!this.live_name || !this.die_name)){
|
||||
return this.$toast.fail('请填写阳上人与往生人')
|
||||
if (this.query.is_die == 1 && (!this.live_name || !this.die_name)) {
|
||||
return this.$toast.fail("请填写阳上人与往生人");
|
||||
}
|
||||
|
||||
this.$router.push({
|
||||
name: 'pay',
|
||||
name: "pay",
|
||||
query: {
|
||||
...this.$route.query,
|
||||
dream: this.dream,
|
||||
merit_name: this.meritName,
|
||||
mobile: this.mobile,
|
||||
live_name: this.live_name,
|
||||
die_name: this.die_name
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
die_name: this.die_name,
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.fill-name{
|
||||
.field{
|
||||
.van-radio__icon--checked .van-icon{
|
||||
background: #CF9E3B;
|
||||
border-color: #CF9E3B;
|
||||
.fill-name {
|
||||
.field {
|
||||
.van-radio__icon--checked .van-icon {
|
||||
background: #cf9e3b;
|
||||
border-color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.fill-name{
|
||||
.fill-name {
|
||||
background: #f9f9f9;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
.panel-wrapper{
|
||||
padding: .3rem;
|
||||
.panel-wrapper {
|
||||
padding: 0.3rem;
|
||||
}
|
||||
.panel{
|
||||
padding: .3rem;
|
||||
border-radius: .1rem;
|
||||
font-size: .4rem;
|
||||
.panel {
|
||||
padding: 0.3rem;
|
||||
border-radius: 0.1rem;
|
||||
font-size: 0.4rem;
|
||||
background: white;
|
||||
box-shadow: 0 0 .2rem rgba(0,0,0,0.05);
|
||||
box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.field{
|
||||
margin-bottom: .6rem;
|
||||
.required{
|
||||
&::after{
|
||||
content: '*';
|
||||
.field {
|
||||
margin-bottom: 0.6rem;
|
||||
.required {
|
||||
&::after {
|
||||
content: "*";
|
||||
color: red;
|
||||
margin-left: .1rem;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
}
|
||||
label{
|
||||
label {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.input-wrapper{
|
||||
margin-top: .2rem;
|
||||
.input-wrapper {
|
||||
margin-top: 0.2rem;
|
||||
border: 1px solid rgba(183, 173, 173, 0.54);
|
||||
padding: .2rem .3rem;
|
||||
border-radius: .1rem;
|
||||
padding: 0.2rem 0.3rem;
|
||||
border-radius: 0.1rem;
|
||||
position: relative;
|
||||
background: #fdfdfd;
|
||||
.input{
|
||||
.input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
.input[type=textarea]{
|
||||
.input[type="textarea"] {
|
||||
min-height: 2rem;
|
||||
width: calc(100% - .5rem);
|
||||
padding-right: .5rem;
|
||||
width: calc(100% - 0.5rem);
|
||||
padding-right: 0.5rem;
|
||||
line-height: 1.4;
|
||||
text-align: justify;
|
||||
}
|
||||
.icon-arrow-right{
|
||||
.icon-arrow-right {
|
||||
position: absolute;
|
||||
right: .1rem;
|
||||
right: 0.1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-.35rem);
|
||||
transform: translateY(-0.35rem);
|
||||
display: inline-block;
|
||||
font-size: .7rem;
|
||||
font-size: 0.7rem;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-wrapper{
|
||||
.btn-wrapper {
|
||||
position: absolute;
|
||||
left: .3rem;
|
||||
right: .3rem;
|
||||
bottom: calc(.5rem + env(safe-area-inset-bottom));
|
||||
border: 1px solid $primary-color;
|
||||
left: 0.3rem;
|
||||
right: 0.3rem;
|
||||
bottom: calc(0.5rem + env(safe-area-inset-bottom));
|
||||
border: 1px solid #cf9e3b;
|
||||
border-radius: 100px;
|
||||
background: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
.total{
|
||||
font-size: .4rem;
|
||||
color: $primary-color;
|
||||
padding-left: .4rem;
|
||||
.price{
|
||||
font-size: .5rem;
|
||||
.total {
|
||||
font-size: 0.4rem;
|
||||
color: #cf9e3b;
|
||||
padding-left: 0.4rem;
|
||||
.price {
|
||||
font-size: 0.5rem;
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
button{
|
||||
background: linear-gradient(to bottom, $primary-color, #9f7313);
|
||||
button {
|
||||
background: linear-gradient(to bottom, #cf9e3b, #9f7313);
|
||||
color: white;
|
||||
height: 1.4rem;
|
||||
border: none;
|
||||
font-size: .5rem;
|
||||
font-size: 0.5rem;
|
||||
padding: 0 1rem;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<h1 class="title">在线护持 寺院道场 供养三宝 广种福田</h1>
|
||||
<div class="inner">
|
||||
<div class="field">
|
||||
<input type="tel" v-model="mobile" maxlength="11" placeholder="请输入手机号码">
|
||||
<input type="tel" v-model="mobile" maxlength="11" placeholder="请输入手机号码" />
|
||||
</div>
|
||||
<p class="tip">未注册的手机号验证后自动创建账户</p>
|
||||
|
||||
@@ -23,174 +23,175 @@
|
||||
</div>
|
||||
<div class="top" v-if="sended">
|
||||
<h1 class="title">请输入验证码</h1>
|
||||
<p class="send-to">验证码已发送至 {{mobile | fmMobile}}</p>
|
||||
<p class="send-to">验证码已发送至 {{ mobile | fmMobile }}</p>
|
||||
<sms-code-input :code="validCode" @complete="onSubmitBefore"></sms-code-input>
|
||||
<p class="resend"><span>{{countdown}}</span>秒后重新发送验证码</p>
|
||||
<p class="resend">
|
||||
<span>{{ countdown }}</span
|
||||
>秒后重新发送验证码
|
||||
</p>
|
||||
<van-button type="info" :disabled="!(validCode.length === 4)" block @click="onSubmit">提交</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getMobileValidateCode, postMobileCode } from '@/api';
|
||||
import SmsCodeInput from '@/components/sms-code-input'
|
||||
import { getMobileValidateCode, postMobileCode } from "@/api";
|
||||
import SmsCodeInput from "@/components/sms-code-input";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SmsCodeInput
|
||||
SmsCodeInput,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: this.$route.query,
|
||||
mobile: '',
|
||||
validCode: '',
|
||||
mobile: "",
|
||||
validCode: "",
|
||||
countdown: 0,
|
||||
timer: null,
|
||||
sended: false,
|
||||
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
fmMobile(val){
|
||||
return val.replace(/(\d{3})(\d{4})/, "$1 $2 ")
|
||||
}
|
||||
fmMobile(val) {
|
||||
return val.replace(/(\d{3})(\d{4})/, "$1 $2 ");
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
validMobile(){
|
||||
validMobile() {
|
||||
const reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
|
||||
return !reg.test(this.mobile)
|
||||
return !reg.test(this.mobile);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onAgreement(agreeId){
|
||||
this.$router.push({ name: 'user-temple-station-agreement', query: { agreeId }})
|
||||
onAgreement(agreeId) {
|
||||
this.$router.push({ name: "user-temple-station-agreement", query: { agreeId } });
|
||||
},
|
||||
onSubmitBefore(code){
|
||||
this.validCode = code
|
||||
onSubmitBefore(code) {
|
||||
this.validCode = code;
|
||||
this.onSubmit();
|
||||
},
|
||||
async onSubmit() {
|
||||
const { mobile, validCode } = this;
|
||||
if(!mobile){
|
||||
return this.$toast('请输入手机号')
|
||||
if (!mobile) {
|
||||
return this.$toast("请输入手机号");
|
||||
}
|
||||
if(!validCode){
|
||||
return this.$toast('请输入验证码')
|
||||
if (!validCode) {
|
||||
return this.$toast("请输入验证码");
|
||||
}
|
||||
const res = await postMobileCode(mobile, validCode.join(''))
|
||||
if(res){
|
||||
this.$toast.success('登记成功，请继续后续操作')
|
||||
const res = await postMobileCode(mobile, validCode.join(""));
|
||||
if (res) {
|
||||
this.$toast.success("登记成功，请继续后续操作");
|
||||
this.$delay(500);
|
||||
this.$bus.$emit('updateMobile')
|
||||
this.$bus.$emit("updateMobile");
|
||||
this.$router.replace({
|
||||
path: this.query.redirectPath,
|
||||
query: this.$utils.queryStringToObj(decodeURIComponent(this.query.redirectPathQuery))
|
||||
})
|
||||
query: this.$utils.queryStringToObj(decodeURIComponent(this.query.redirectPathQuery)),
|
||||
});
|
||||
}
|
||||
},
|
||||
onSendCode(){
|
||||
onSendCode() {
|
||||
const { mobile } = this;
|
||||
if(!mobile){
|
||||
return this.$toast('请输入手机号')
|
||||
if (!mobile) {
|
||||
return this.$toast("请输入手机号");
|
||||
}
|
||||
|
||||
getMobileValidateCode(mobile).then(success => {
|
||||
if(success){
|
||||
this.$toast('发送成功，请注意查收短信');
|
||||
getMobileValidateCode(mobile).then((success) => {
|
||||
if (success) {
|
||||
this.$toast("发送成功，请注意查收短信");
|
||||
this.sended = true;
|
||||
if(this.countdown === 0){
|
||||
if (this.countdown === 0) {
|
||||
this.countdown = 60;
|
||||
this.countdownSecond()
|
||||
this.countdownSecond();
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
countdownSecond(){
|
||||
countdownSecond() {
|
||||
this.timer = setInterval(() => {
|
||||
this.countdown --;
|
||||
if(this.countdown == 0){
|
||||
clearInterval(this.timer)
|
||||
this.countdown--;
|
||||
if (this.countdown == 0) {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top{
|
||||
padding: 0 .5rem;
|
||||
font-size: .35rem;
|
||||
padding-top: .3rem;
|
||||
.title{
|
||||
font-size: .5rem;
|
||||
.top {
|
||||
padding: 0 0.5rem;
|
||||
font-size: 0.35rem;
|
||||
padding-top: 0.3rem;
|
||||
.title {
|
||||
font-size: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: #a5161a;
|
||||
font-family: '宋体';
|
||||
font-family: "宋体";
|
||||
}
|
||||
.inner{
|
||||
.inner {
|
||||
margin-top: 1rem;
|
||||
.field{
|
||||
.field {
|
||||
background: #f1f1f1;
|
||||
margin-bottom: .2rem;
|
||||
padding: .1rem .4rem;
|
||||
input{
|
||||
height: .8rem;
|
||||
margin-bottom: 0.2rem;
|
||||
padding: 0.1rem 0.4rem;
|
||||
input {
|
||||
height: 0.8rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: .4rem;
|
||||
font-size: 0.4rem;
|
||||
}
|
||||
}
|
||||
.tip{
|
||||
font-size: .3rem;
|
||||
.tip {
|
||||
font-size: 0.3rem;
|
||||
margin-bottom: 1.2rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.desc{
|
||||
font-size: .4rem;
|
||||
.desc {
|
||||
font-size: 0.4rem;
|
||||
text-align: center;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
.agree{
|
||||
font-size: .35rem;
|
||||
.agree {
|
||||
font-size: 0.35rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 2rem;
|
||||
a{
|
||||
color: $primary-color;
|
||||
a {
|
||||
color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
}
|
||||
.send-to{
|
||||
font-size: .35rem;
|
||||
margin-top: .2rem;
|
||||
.send-to {
|
||||
font-size: 0.35rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
.notification{
|
||||
padding-top: .8rem;
|
||||
p{
|
||||
.notification {
|
||||
padding-top: 0.8rem;
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: .34rem;
|
||||
font-size: 0.34rem;
|
||||
color: #a5161a;
|
||||
line-height: 1.4;
|
||||
margin-bottom: .2rem;
|
||||
font-family: '宋体';
|
||||
margin-bottom: 0.2rem;
|
||||
font-family: "宋体";
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
.resend{
|
||||
padding-top: .6rem;
|
||||
.resend {
|
||||
padding-top: 0.6rem;
|
||||
margin-bottom: 3rem;
|
||||
span{
|
||||
color: $primary-color;
|
||||
padding-right: .2rem;
|
||||
span {
|
||||
color: #cf9e3b;
|
||||
padding-right: 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -116,9 +116,9 @@ export default {
|
||||
}
|
||||
.btn {
|
||||
padding: 0.2rem 0.6rem;
|
||||
background: $primary-color;
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
border: 1px solid $primary-color;
|
||||
border: 1px solid #cf9e3b;
|
||||
font-size: 0.4rem;
|
||||
border-radius: 0.11rem;
|
||||
margin-left: 0.3rem;
|
||||
@@ -176,7 +176,7 @@ export default {
|
||||
margin-bottom: 0.3rem;
|
||||
.update {
|
||||
font-size: 0.35rem;
|
||||
color: $primary-color;
|
||||
color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
.name-group {
|
||||
@@ -186,9 +186,9 @@ export default {
|
||||
}
|
||||
}
|
||||
.confirm {
|
||||
background: $primary-color;
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
border: 1px solid $primary-color;
|
||||
border: 1px solid #cf9e3b;
|
||||
width: 3rem;
|
||||
padding: 0.3rem 0;
|
||||
border-radius: 0.07rem;
|
||||
|
||||
@@ -1,86 +1,84 @@
|
||||
<template>
|
||||
<span>
|
||||
<ul class="spec-group">
|
||||
<li class="border-circle" :class="[value === 'is_customized' && 'active']" @click="onAnyAmount">
|
||||
<span>{{data.rule_btn}}</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>
|
||||
<span>
|
||||
<ul class="spec-group">
|
||||
<li class="border-circle" :class="[value === 'is_customized' && 'active']" @click="onAnyAmount">
|
||||
<span>{{ data.rule_btn }}</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">数量</span>
|
||||
<span class="time-cycle">
|
||||
<van-stepper v-model="num" step="1" @change="onChangeNumber"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<div class="auto-donate-time">
|
||||
<div class="donate">
|
||||
<span class="label">数量</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]
|
||||
type: [String, Number],
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
},
|
||||
number: Number,
|
||||
},
|
||||
data(){
|
||||
data() {
|
||||
return {
|
||||
num: 0,
|
||||
is_customized: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
number: {
|
||||
handler(val) {
|
||||
this.num = val;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
onChangeNumber(value){
|
||||
this.$emit('update:number', value)
|
||||
onChangeNumber(value) {
|
||||
this.$emit("update:number", value);
|
||||
},
|
||||
onSelectSpec(spec){
|
||||
this.$emit('input', spec.id)
|
||||
onSelectSpec(spec) {
|
||||
this.$emit("input", spec.id);
|
||||
},
|
||||
onAnyAmount(){
|
||||
this.$emit('input', 'is_customized')
|
||||
}
|
||||
}
|
||||
onAnyAmount() {
|
||||
this.$emit("input", "is_customized");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.spec-group{
|
||||
padding: .2rem .4rem;
|
||||
.spec-group {
|
||||
padding: 0.2rem 0.4rem;
|
||||
max-height: 50vh;
|
||||
overflow: scroll;
|
||||
li{
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 .4rem;
|
||||
font-size: .4rem;
|
||||
padding: 0 0.4rem;
|
||||
font-size: 0.4rem;
|
||||
height: 1rem;
|
||||
& ~ li{
|
||||
margin-top: .3rem;
|
||||
& ~ li {
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
}
|
||||
li.active{
|
||||
border-color: $primary-color;
|
||||
color: $primary-color;
|
||||
li.active {
|
||||
border-color: #cf9e3b;
|
||||
color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -288,7 +288,7 @@ $lightWidth: 1.3rem;
|
||||
background: #bbb;
|
||||
}
|
||||
.van-swipe__indicator--active {
|
||||
background: $primary-color;
|
||||
background: #cf9e3b;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -419,7 +419,7 @@ $lightWidth: 1.3rem;
|
||||
}
|
||||
.merit-button {
|
||||
display: block;
|
||||
background: $primary-color;
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
height: 1.2rem;
|
||||
font-size: 0.37rem;
|
||||
@@ -428,7 +428,7 @@ $lightWidth: 1.3rem;
|
||||
margin-top: 0.3rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border: 0.01rem solid $primary-color;
|
||||
border: 0.01rem solid #cf9e3b;
|
||||
border-radius: 0.13rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
@@ -455,7 +455,7 @@ $lightWidth: 1.3rem;
|
||||
}
|
||||
}
|
||||
li.current {
|
||||
color: $primary-color;
|
||||
color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -492,7 +492,7 @@ $lightWidth: 1.3rem;
|
||||
.total {
|
||||
font-size: 0.4rem;
|
||||
em {
|
||||
color: $primary-color;
|
||||
color: #cf9e3b;
|
||||
font-size: 0.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -500,8 +500,8 @@ $lightWidth: 1.3rem;
|
||||
.next {
|
||||
font-size: 0.4rem;
|
||||
padding: 0.3rem 1rem;
|
||||
background: $primary-color;
|
||||
border: 1px solid $primary-color;
|
||||
background: #cf9e3b;
|
||||
border: 1px solid #cf9e3b;
|
||||
color: white;
|
||||
border-radius: 0.1rem;
|
||||
}
|
||||
|
||||
@@ -116,9 +116,9 @@ export default {
|
||||
}
|
||||
.btn {
|
||||
padding: 0.2rem 0.6rem;
|
||||
background: $primary-color;
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
border: 1px solid $primary-color;
|
||||
border: 1px solid #cf9e3b;
|
||||
font-size: 0.4rem;
|
||||
border-radius: 0.11rem;
|
||||
margin-left: 0.3rem;
|
||||
@@ -176,7 +176,7 @@ export default {
|
||||
margin-bottom: 0.3rem;
|
||||
.update {
|
||||
font-size: 0.35rem;
|
||||
color: $primary-color;
|
||||
color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
.name-group {
|
||||
@@ -186,9 +186,9 @@ export default {
|
||||
}
|
||||
}
|
||||
.confirm {
|
||||
background: $primary-color;
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
border: 1px solid $primary-color;
|
||||
border: 1px solid #cf9e3b;
|
||||
width: 3rem;
|
||||
padding: 0.3rem 0;
|
||||
border-radius: 0.07rem;
|
||||
|
||||
@@ -1,86 +1,84 @@
|
||||
<template>
|
||||
<span>
|
||||
<ul class="spec-group">
|
||||
<li class="border-circle" :class="[value === 'is_customized' && 'active']" @click="onAnyAmount">
|
||||
<span>{{data.rule_btn}}</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>
|
||||
<span>
|
||||
<ul class="spec-group">
|
||||
<li class="border-circle" :class="[value === 'is_customized' && 'active']" @click="onAnyAmount">
|
||||
<span>{{ data.rule_btn }}</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">数量</span>
|
||||
<span class="time-cycle">
|
||||
<van-stepper v-model="num" step="1" @change="onChangeNumber"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<div class="auto-donate-time">
|
||||
<div class="donate">
|
||||
<span class="label">数量</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]
|
||||
type: [String, Number],
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
},
|
||||
number: Number,
|
||||
},
|
||||
data(){
|
||||
data() {
|
||||
return {
|
||||
num: 0,
|
||||
is_customized: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
number: {
|
||||
handler(val) {
|
||||
this.num = val;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
onChangeNumber(value){
|
||||
this.$emit('update:number', value)
|
||||
onChangeNumber(value) {
|
||||
this.$emit("update:number", value);
|
||||
},
|
||||
onSelectSpec(spec){
|
||||
this.$emit('input', spec.id)
|
||||
onSelectSpec(spec) {
|
||||
this.$emit("input", spec.id);
|
||||
},
|
||||
onAnyAmount(){
|
||||
this.$emit('input', 'is_customized')
|
||||
}
|
||||
}
|
||||
onAnyAmount() {
|
||||
this.$emit("input", "is_customized");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.spec-group{
|
||||
padding: .2rem .4rem;
|
||||
.spec-group {
|
||||
padding: 0.2rem 0.4rem;
|
||||
max-height: 50vh;
|
||||
overflow: scroll;
|
||||
li{
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 .4rem;
|
||||
font-size: .4rem;
|
||||
padding: 0 0.4rem;
|
||||
font-size: 0.4rem;
|
||||
height: 1rem;
|
||||
& ~ li{
|
||||
margin-top: .3rem;
|
||||
& ~ li {
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
}
|
||||
li.active{
|
||||
border-color: $primary-color;
|
||||
color: $primary-color;
|
||||
li.active {
|
||||
border-color: #cf9e3b;
|
||||
color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -304,10 +304,10 @@ $lightWidth: 1.15rem;
|
||||
padding-right: 0;
|
||||
}
|
||||
.current-light {
|
||||
border: 1px solid $primary-color;
|
||||
border: 1px solid #cf9e3b;
|
||||
border-radius: 4px;
|
||||
span {
|
||||
color: $primary-color;
|
||||
color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
img.light-icon {
|
||||
@@ -336,7 +336,7 @@ $lightWidth: 1.15rem;
|
||||
background: #bbb;
|
||||
}
|
||||
.van-swipe__indicator--active {
|
||||
background: $primary-color;
|
||||
background: #cf9e3b;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -480,7 +480,7 @@ $lightWidth: 1.15rem;
|
||||
}
|
||||
.merit-button {
|
||||
display: block;
|
||||
background: $primary-color;
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
height: 1.2rem;
|
||||
font-size: 0.37rem;
|
||||
@@ -489,7 +489,7 @@ $lightWidth: 1.15rem;
|
||||
margin-top: 0.3rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border: 0.01rem solid $primary-color;
|
||||
border: 0.01rem solid #cf9e3b;
|
||||
border-radius: 0.13rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
@@ -516,7 +516,7 @@ $lightWidth: 1.15rem;
|
||||
}
|
||||
}
|
||||
li.current {
|
||||
color: $primary-color;
|
||||
color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -553,7 +553,7 @@ $lightWidth: 1.15rem;
|
||||
.total {
|
||||
font-size: 0.4rem;
|
||||
em {
|
||||
color: $primary-color;
|
||||
color: #cf9e3b;
|
||||
font-size: 0.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -561,8 +561,8 @@ $lightWidth: 1.15rem;
|
||||
.next {
|
||||
font-size: 0.4rem;
|
||||
padding: 0.3rem 1rem;
|
||||
background: $primary-color;
|
||||
border: 1px solid $primary-color;
|
||||
background: #cf9e3b;
|
||||
border: 1px solid #cf9e3b;
|
||||
color: white;
|
||||
border-radius: 0.1rem;
|
||||
}
|
||||
|
||||
+4
-4
@@ -46,19 +46,19 @@
|
||||
<div class="divider"></div>
|
||||
<div class="panel" v-if="data.dynamic_data.length > 0">
|
||||
<div class="panel-head">
|
||||
<span class="title">进展状态</span>
|
||||
<span class="title">法会进展</span>
|
||||
<arrow-more @click="onMoreProcess"></arrow-more>
|
||||
</div>
|
||||
<div class="panel-body goods-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>
|
||||
<span>查看更多法会</span>
|
||||
<i class="iconfont icon-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<thanks-giving :temple-id="query.temple_id" :agent-id="query.agent_id"></thanks-giving>
|
||||
</div>
|
||||
<thanks-giving :temple-id="query.temple_id" :agent-id="query.agent_id"></thanks-giving>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -259,7 +259,7 @@ export default {
|
||||
border-radius: 10px;
|
||||
}
|
||||
.van-swipe__indicator--active {
|
||||
background: $primary-color;
|
||||
background: #cf9e3b;
|
||||
}
|
||||
}
|
||||
.panel {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="merit-box" :style="{ height: root.minHeight + 'px' }">
|
||||
<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 / 2 + 'px' }" :src="info.merit_box_cover" alt="" />
|
||||
@@ -28,10 +28,10 @@
|
||||
</scroll-view>
|
||||
</div>
|
||||
</div>
|
||||
<div class="merit-button-group" :style="{ bottom: tabHeight + 'px' }">
|
||||
<button class="iconfont icon-arrow-left" @click="back"></button>
|
||||
<button class="merit-button" @click="openBox">随喜功德</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="merit-button-group" :style="{ bottom: tabHeight + 'px' }">
|
||||
<button class="iconfont icon-arrow-left" @click="back"></button>
|
||||
<button class="merit-button" @click="openBox">随喜功德</button>
|
||||
</div>
|
||||
<random-money :value.sync="randVisible" @change="onRandNext"></random-money>
|
||||
</div>
|
||||
@@ -154,26 +154,31 @@ export default {
|
||||
<style lang="scss">
|
||||
.merit-box {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.goods-picture {
|
||||
vertical-align: top;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.merit-container {
|
||||
height: 100%;
|
||||
flex: 1 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.merit-rank-container {
|
||||
background: white;
|
||||
position: relative;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
margin-top: 5rem;
|
||||
height: 61vh;
|
||||
flex: 1 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.head {
|
||||
padding: 0.53rem 0.4rem;
|
||||
padding-bottom: 0.13rem;
|
||||
@@ -237,20 +242,20 @@ export default {
|
||||
.merit-button {
|
||||
//display: inline-block;
|
||||
//vertical-align: top;
|
||||
//background: $primary-color;
|
||||
//background: #CF9E3B;;
|
||||
//color: white;
|
||||
//height: 1.4rem;
|
||||
//font-size: .37rem;
|
||||
//padding: 0 2rem;
|
||||
//border: .01rem solid $primary-color;
|
||||
//border: .01rem solid #CF9E3B;;
|
||||
//border-radius: $btn-border-radius;
|
||||
//flex: 1;
|
||||
|
||||
flex: 1;
|
||||
font-size: 0.4rem;
|
||||
padding: 0.3rem 1rem;
|
||||
background: $primary-color;
|
||||
border: 1px solid $primary-color;
|
||||
background: #cf9e3b;
|
||||
border: 1px solid #cf9e3b;
|
||||
color: white;
|
||||
border-radius: 0.1rem;
|
||||
}
|
||||
|
||||
+81
-81
@@ -1,32 +1,32 @@
|
||||
<template>
|
||||
<div class="monk-detail" 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}" />
|
||||
<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 v-for="(cover, index) in data.pictures" :key="index">
|
||||
<div style="height: 100vw;" class="picture">
|
||||
<img :src="cover" alt="">
|
||||
<div style="height: 100vw" class="picture">
|
||||
<img :src="cover" alt="" />
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div class="monk-profile">
|
||||
<h1 class="position">{{data.title}}</h1>
|
||||
<h1 class="position">{{ data.title }}</h1>
|
||||
<p class="introduction" v-html="data.description"></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>-->
|
||||
<!-- <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>-->
|
||||
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<div class="merit-button-group">
|
||||
<button class="merit-button" @click="onProvide">供养</button>
|
||||
</div>
|
||||
@@ -34,118 +34,118 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getMasterDetail } from '@/api'
|
||||
import 'swiper/css/swiper.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
import { getMasterDetail } from "@/api";
|
||||
import "swiper/css/swiper.css";
|
||||
import { swiper, swiperSlide } from "vue-awesome-swiper";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
swiper, swiperSlide
|
||||
swiper,
|
||||
swiperSlide,
|
||||
},
|
||||
data(){
|
||||
data() {
|
||||
return {
|
||||
query: this.$route.query,
|
||||
banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
|
||||
banners: ["/1.jpg", "/2.jpg", "/3.jpg"],
|
||||
data: null,
|
||||
swiperOption: {
|
||||
autoplay: 8000,
|
||||
initialSlide: 1,
|
||||
loop: true,
|
||||
pagination: '.swiper-pagination',
|
||||
onSlideChangeEnd: () => {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
pagination: ".swiper-pagination",
|
||||
onSlideChangeEnd: () => {},
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
mounted() {
|
||||
this.getMasterDetail();
|
||||
},
|
||||
methods: {
|
||||
onProvide(){
|
||||
onProvide() {
|
||||
const { goods_type, goods_id, temple_id, spec_id } = this.data;
|
||||
this.onPushToGoodsDetail(goods_type, goods_id, temple_id, spec_id)
|
||||
this.onPushToGoodsDetail(goods_type, goods_id, temple_id, spec_id);
|
||||
},
|
||||
async getMasterDetail(){
|
||||
const res = await getMasterDetail(this.query.master_id)
|
||||
async getMasterDetail() {
|
||||
const res = await getMasterDetail(this.query.master_id);
|
||||
this.data = res;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.swiper-container{
|
||||
.swiper-container {
|
||||
background: #f5f5f5;
|
||||
.picture, img{
|
||||
.picture,
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.support{
|
||||
.support-head{
|
||||
padding: 0 .4rem;
|
||||
.support {
|
||||
.support-head {
|
||||
padding: 0 0.4rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 1.07rem;
|
||||
line-height: 1.07rem;
|
||||
.label{
|
||||
font-size: .4rem;
|
||||
.label {
|
||||
font-size: 0.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.external{
|
||||
.external {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
li{
|
||||
margin-left: .3rem;
|
||||
font-size: .35rem;
|
||||
li {
|
||||
margin-left: 0.3rem;
|
||||
font-size: 0.35rem;
|
||||
color: #666;
|
||||
}
|
||||
li.active{
|
||||
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;
|
||||
.monk-detail {
|
||||
.monk-profile {
|
||||
padding: 0.4rem;
|
||||
margin-bottom: 0.53rem;
|
||||
.position {
|
||||
font-size: 0.5rem;
|
||||
padding-top: 0.2rem;
|
||||
color: #19282e;
|
||||
}
|
||||
.introduction{
|
||||
font-size: .37rem;
|
||||
margin-top: .4rem;
|
||||
.introduction {
|
||||
font-size: 0.37rem;
|
||||
margin-top: 0.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;
|
||||
}
|
||||
.merit-button-group {
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
padding: 0.4rem 0;
|
||||
border-top: 0.01rem solid #ddd;
|
||||
.merit-button {
|
||||
display: inline-block;
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
height: 1.2rem;
|
||||
font-size: 0.37rem;
|
||||
width: 60%;
|
||||
padding: 0 .53rem;
|
||||
border: .01rem solid $primary-color;
|
||||
border-radius: 1.33rem
|
||||
}
|
||||
}
|
||||
padding: 0 0.53rem;
|
||||
border: 0.01rem solid #cf9e3b;
|
||||
border-radius: 1.33rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -105,13 +105,13 @@ export default {
|
||||
background: white;
|
||||
}
|
||||
.detail {
|
||||
color: $primary-color;
|
||||
border-color: $primary-color;
|
||||
color: #cf9e3b;
|
||||
border-color: #cf9e3b;
|
||||
}
|
||||
.again {
|
||||
background: $primary-color;
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
border-color: $primary-color;
|
||||
border-color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="temple-detail" v-if="data">
|
||||
<img class="banner" :src="data.picture" alt="">
|
||||
<img class="banner" :src="data.picture" alt="" />
|
||||
<div class="authed border-bottom">
|
||||
<img src="@/assets/img/cert.jpg" alt="">
|
||||
<img src="@/assets/img/cert.jpg" alt="" />
|
||||
<span>已通过 <b>自在福田</b> 认证，可放心访问</span>
|
||||
</div>
|
||||
|
||||
@@ -11,19 +11,19 @@
|
||||
<ul class="list">
|
||||
<li>
|
||||
<span class="label">单位名称：</span>
|
||||
<span class="value">{{data.unit_name}}</span>
|
||||
<span class="value">{{ data.unit_name }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="label">登记编号：</span>
|
||||
<span class="value">{{data.institution_code}}</span>
|
||||
<span class="value">{{ data.institution_code }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="label">负责人：</span>
|
||||
<span class="value">{{data.represent}}</span>
|
||||
<span class="value">{{ data.represent }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="label">所在地址：</span>
|
||||
<span class="value">{{data.details_address}}</span>
|
||||
<span class="value">{{ data.details_address }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -32,7 +32,7 @@
|
||||
<h4 class="title border-bottom">认证授权</h4>
|
||||
<ul class="cert">
|
||||
<li v-for="(cert, index) in data.register_cert_url" :key="index">
|
||||
<img :src="cert" @click="previewImage(cert, data.register_cert_url)" alt="">
|
||||
<img :src="cert" @click="previewImage(cert, data.register_cert_url)" alt="" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -45,99 +45,99 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTempleDetail } from "@/api"
|
||||
import { previewImage } from '@/common/wechat-web';
|
||||
import { getTempleDetail } from "@/api";
|
||||
import { previewImage } from "@/common/wechat-web";
|
||||
|
||||
export default {
|
||||
data(){
|
||||
data() {
|
||||
return {
|
||||
query: this.$route.query,
|
||||
data: null,
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
mounted() {
|
||||
this.getTempleDetail();
|
||||
this.wechatReady()
|
||||
this.wechatReady();
|
||||
},
|
||||
methods: {
|
||||
previewImage(cert, certArr){
|
||||
previewImage(cert, certArr)
|
||||
previewImage(cert, certArr) {
|
||||
previewImage(cert, certArr);
|
||||
},
|
||||
async getTempleDetail(){
|
||||
async getTempleDetail() {
|
||||
const res = await getTempleDetail(this.query.temple_id);
|
||||
this.data = res;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.temple-detail{
|
||||
.temple-detail {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
.banner{
|
||||
.banner {
|
||||
width: 100%;
|
||||
}
|
||||
.authed{
|
||||
font-size: .35rem;
|
||||
.authed {
|
||||
font-size: 0.35rem;
|
||||
line-height: 1.2rem;
|
||||
padding-left: .4rem;
|
||||
padding-left: 0.4rem;
|
||||
color: #888;
|
||||
img{
|
||||
width: .3rem;
|
||||
img {
|
||||
width: 0.3rem;
|
||||
vertical-align: middle;
|
||||
margin-right: .1rem;
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
span{
|
||||
span {
|
||||
vertical-align: middle;
|
||||
b{
|
||||
color: $primary-color;
|
||||
b {
|
||||
color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
}
|
||||
.auth{
|
||||
margin: .4rem;
|
||||
margin-top: .8rem;
|
||||
.title{
|
||||
font-size: .4rem;
|
||||
.auth {
|
||||
margin: 0.4rem;
|
||||
margin-top: 0.8rem;
|
||||
.title {
|
||||
font-size: 0.4rem;
|
||||
font-weight: bold;
|
||||
padding-bottom: .3rem;
|
||||
padding-bottom: 0.3rem;
|
||||
}
|
||||
.list{
|
||||
margin-top: .2rem;
|
||||
li{
|
||||
line-height: .8rem;
|
||||
font-size: .4rem;
|
||||
.label{
|
||||
.list {
|
||||
margin-top: 0.2rem;
|
||||
li {
|
||||
line-height: 0.8rem;
|
||||
font-size: 0.4rem;
|
||||
.label {
|
||||
display: inline-block;
|
||||
width: 5em;
|
||||
color: #777;
|
||||
text-align: right;
|
||||
}
|
||||
.value{
|
||||
.value {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cert{
|
||||
.cert {
|
||||
white-space: nowrap;
|
||||
margin-top: .3rem;
|
||||
margin-top: 0.3rem;
|
||||
overflow-x: scroll;
|
||||
li{
|
||||
li {
|
||||
width: 5rem;
|
||||
display: inline-block;
|
||||
border: 1px solid #ddd;
|
||||
margin-right: .3rem;
|
||||
img{
|
||||
margin-right: 0.3rem;
|
||||
img {
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
.description{
|
||||
font-size: .4rem;
|
||||
.description {
|
||||
font-size: 0.4rem;
|
||||
color: #888;
|
||||
line-height: 1.7;
|
||||
padding-top: .35rem;
|
||||
padding-top: 0.35rem;
|
||||
letter-spacing: 1px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
+135
-141
@@ -7,8 +7,8 @@
|
||||
<span>{{ data.temple_data.visit }}到访</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="certed-temple" @click="$router.push({name: 'temple-detail', query: { temple_id: query.temple_id}})">
|
||||
<img class="cert-icon" src="@/assets/img/cert.jpg" alt="">
|
||||
<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>
|
||||
@@ -16,7 +16,7 @@
|
||||
<div class="swiper" v-if="data.banner_data.length > 0">
|
||||
<van-swipe class="my-swipe" :autoplay="8000" indicator-color="white">
|
||||
<van-swipe-item v-for="(banner, index) in data.banner_data" :key="index">
|
||||
<img :src="banner.cover" alt="" @click="$router.push({ path: banner.url})">
|
||||
<img :src="banner.cover" alt="" @click="$router.push({ path: banner.url })" />
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
</div>
|
||||
@@ -24,7 +24,7 @@
|
||||
<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" @click="locationTo(nav)">
|
||||
<img :src="nav.icon_url" class="nav-icon" slot="icon">
|
||||
<img :src="nav.icon_url" class="nav-icon" slot="icon" />
|
||||
</van-grid-item>
|
||||
</van-grid>
|
||||
</van-swipe-item>
|
||||
@@ -39,9 +39,8 @@
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="temple-manager">
|
||||
<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" 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">{{ manager.title }}</h3>
|
||||
<p class="content">
|
||||
@@ -81,7 +80,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<thanks-giving :temple-id="query.temple_id || '1' "></thanks-giving>
|
||||
<thanks-giving :temple-id="query.temple_id || '1'"></thanks-giving>
|
||||
|
||||
<button class="temple-station-in" @click="onTempleStation">寺院入驻</button>
|
||||
</div>
|
||||
@@ -90,31 +89,30 @@
|
||||
<span class="iconfont icon-liebiao"></span>
|
||||
</div>
|
||||
|
||||
|
||||
<van-popup v-model="showUserMenu" position="left" style="width: 80%; height: 100%">
|
||||
<div class="user-menu" v-if="user">
|
||||
<div class="user">
|
||||
<img class="avatar" :src="user.avatar" alt="">
|
||||
<img class="avatar" :src="user.avatar" alt="" />
|
||||
<div class="profile">
|
||||
<h5 class="name">{{user.nickname}}</h5>
|
||||
<p class="account">用户号: {{user.account_no}}</p>
|
||||
<h5 class="name">{{ user.nickname }}</h5>
|
||||
<p class="account">用户号: {{ user.account_no }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="user-list">
|
||||
<li @click="onPushForRouteName('user-order')">
|
||||
<img src="@/assets/img/user-popup/我的善缘.png" alt="">
|
||||
<img src="@/assets/img/user-popup/我的善缘.png" alt="" />
|
||||
<span>我的善缘</span>
|
||||
</li>
|
||||
<li @click="onPushForRouteName('user-customer')">
|
||||
<img src="@/assets/img/user-popup/联系客服.png" alt="">
|
||||
<img src="@/assets/img/user-popup/联系客服.png" alt="" />
|
||||
<span>联系客服</span>
|
||||
</li>
|
||||
<li @click="onPushForRouteName('merit-box')">
|
||||
<img src="@/assets/img/user-popup/功德箱.png" alt="">
|
||||
<li @click="onPushForRouteName('merit-box')">
|
||||
<img src="@/assets/img/user-popup/功德箱.png" alt="" />
|
||||
<span>功德箱</span>
|
||||
</li>
|
||||
<li @click="onPushForRouteName('home')">
|
||||
<img src="@/assets/img/user-popup/查看更多寺院.png" alt="">
|
||||
<li @click="onPushForRouteName('home')">
|
||||
<img src="@/assets/img/user-popup/查看更多寺院.png" alt="" />
|
||||
<span>自在福田首页</span>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -124,13 +122,13 @@
|
||||
</p>
|
||||
</van-popup>
|
||||
|
||||
<!-- 功德箱-->
|
||||
<img src="@/assets/img/gongdexiang.png" class="gongdexiang" @click="openBox"/>
|
||||
<!-- 功德箱-->
|
||||
<img src="@/assets/img/gongdexiang.png" class="gongdexiang" @click="openBox" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTempleIndex, getUserData } from '@/api';
|
||||
import { getTempleIndex, getUserData } from "@/api";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -146,95 +144,94 @@ export default {
|
||||
this.getUserData();
|
||||
},
|
||||
methods: {
|
||||
openBox(){
|
||||
openBox() {
|
||||
this.$router.push({
|
||||
name: 'merit-box',
|
||||
query: { temple_id : this.query.temple_id, open_box: 1, fromPathName: this.$route.name }
|
||||
})
|
||||
name: "merit-box",
|
||||
query: { temple_id: this.query.temple_id, open_box: 1, fromPathName: this.$route.name },
|
||||
});
|
||||
},
|
||||
locationTo(nav) {
|
||||
|
||||
// nav.type: 0外部链接，1日行一善商品，2添砖加瓦类商品，3通用商品，4功德箱，5进展动态
|
||||
if(nav.icon_type === 6){
|
||||
if (nav.icon_type === 6) {
|
||||
this.$router.push({
|
||||
name: 'goods-light-detail',
|
||||
name: "goods-light-detail",
|
||||
query: {
|
||||
goods_type: nav.goods_type,
|
||||
temple_id: nav.temple_id,
|
||||
goods_id: nav.goods_id,
|
||||
}
|
||||
})
|
||||
return
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if(nav.icon_type === 0){
|
||||
if (nav.icon_type === 0) {
|
||||
window.location.href = nav.url;
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
if(nav.icon_type === 5){
|
||||
if (nav.icon_type === 5) {
|
||||
this.$router.push({
|
||||
name: 'buddha-detail',
|
||||
query: { id: nav.dynamic_id }
|
||||
})
|
||||
return
|
||||
name: "buddha-detail",
|
||||
query: { id: nav.dynamic_id },
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if(nav.icon_type === 4){
|
||||
if (nav.icon_type === 4) {
|
||||
this.$router.push({
|
||||
name: 'merit-box'
|
||||
})
|
||||
return
|
||||
name: "merit-box",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if(nav.icon_type === 3){
|
||||
if (nav.icon_type === 3) {
|
||||
this.$router.push({
|
||||
name: 'goods-detail',
|
||||
name: "goods-detail",
|
||||
query: {
|
||||
goods_type: nav.goods_type,
|
||||
goods_id: nav.goods_id ,
|
||||
goods_id: nav.goods_id,
|
||||
temple_id: nav.temple_id,
|
||||
}
|
||||
})
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if(nav.icon_type === 1 || nav.icon_type === 2){
|
||||
if (nav.icon_type === 1 || nav.icon_type === 2) {
|
||||
this.$router.push({
|
||||
name: 'everyday-donation',
|
||||
name: "everyday-donation",
|
||||
query: {
|
||||
goods_type: nav.goods_type,
|
||||
goods_id: nav.goods_id ,
|
||||
goods_id: nav.goods_id,
|
||||
temple_id: nav.temple_id,
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
onPushForRouteName(routeName){
|
||||
if(routeName === 'merit-box'){
|
||||
onPushForRouteName(routeName) {
|
||||
if (routeName === "merit-box") {
|
||||
return this.openBox();
|
||||
}
|
||||
if(routeName === 'temple-list'){
|
||||
return this.$router.push({ name: routeName, query: { hideTab: '1'}})
|
||||
if (routeName === "temple-list") {
|
||||
return this.$router.push({ name: routeName, query: { hideTab: "1" } });
|
||||
}
|
||||
this.$router.push({ name: routeName })
|
||||
this.$router.push({ name: routeName });
|
||||
},
|
||||
async getUserData(){
|
||||
async getUserData() {
|
||||
const res = await getUserData();
|
||||
this.user = res;
|
||||
},
|
||||
onMoreProcess() {
|
||||
this.$router.push({
|
||||
name: 'buddha-activity',
|
||||
query: this.query
|
||||
name: "buddha-activity",
|
||||
query: this.query,
|
||||
});
|
||||
},
|
||||
onToGoods(goods) {
|
||||
this.$router.push({
|
||||
name: 'goods-detail',
|
||||
name: "goods-detail",
|
||||
query: {
|
||||
goods_id: goods.goods_id,
|
||||
temple_id: goods.temple_id
|
||||
}
|
||||
temple_id: goods.temple_id,
|
||||
},
|
||||
});
|
||||
},
|
||||
async getTempleIndex() {
|
||||
@@ -243,14 +240,14 @@ export default {
|
||||
this.data.icon_data = this.sliceNav(res.icon_data);
|
||||
setTimeout(() => {
|
||||
document.title = res.temple_data.unit_name;
|
||||
}, 30)
|
||||
}, 30);
|
||||
this.wechatReady({
|
||||
...res.shareConfig,
|
||||
link: location.href,
|
||||
})
|
||||
});
|
||||
},
|
||||
onTempleStation(){
|
||||
this.$router.push({ name: 'user-temple-station'})
|
||||
onTempleStation() {
|
||||
this.$router.push({ name: "user-temple-station" });
|
||||
},
|
||||
sliceNav(navData) {
|
||||
const nav = [];
|
||||
@@ -263,7 +260,7 @@ export default {
|
||||
|
||||
return nav;
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -271,9 +268,9 @@ export default {
|
||||
.van-nav-bar__title {
|
||||
color: white;
|
||||
}
|
||||
.temple-home-page{
|
||||
.temple-home-page {
|
||||
padding-bottom: 2rem;
|
||||
.gongdexiang{
|
||||
.gongdexiang {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@@ -282,20 +279,20 @@ export default {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.merit-scroll-container{
|
||||
.merit-scroll-container {
|
||||
height: 3.39rem;
|
||||
margin: 0;
|
||||
overflow-x: auto;
|
||||
.merit-scroll-wrapper{
|
||||
.merit-scroll-wrapper {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.temple-station-in{
|
||||
font-size: .4rem;
|
||||
background: $primary-color;
|
||||
.temple-station-in {
|
||||
font-size: 0.4rem;
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
border: 1px solid $primary-color;
|
||||
padding: .3rem .6rem;
|
||||
border: 1px solid #cf9e3b;
|
||||
padding: 0.3rem 0.6rem;
|
||||
border-radius: 1rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@@ -327,7 +324,7 @@ export default {
|
||||
text-align: right;
|
||||
|
||||
.iconfont {
|
||||
font-size: .8rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -343,19 +340,19 @@ export default {
|
||||
width: 1.33rem;
|
||||
height: 1.33rem;
|
||||
border-radius: 1.33rem;
|
||||
margin-right: .4rem;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
|
||||
.profile {
|
||||
.name {
|
||||
font-size: .4rem;
|
||||
font-size: 0.4rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.account {
|
||||
margin-top: .2rem;
|
||||
margin-top: 0.2rem;
|
||||
color: #666;
|
||||
font-size: .3rem;
|
||||
font-size: 0.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -363,18 +360,18 @@ export default {
|
||||
.user-list {
|
||||
padding-left: 1rem;
|
||||
margin-top: 1rem;
|
||||
margin-right: .6rem;
|
||||
margin-right: 0.6rem;
|
||||
|
||||
li {
|
||||
height: 1.2rem;
|
||||
line-height: 1.2rem;
|
||||
font-size: .4rem;
|
||||
font-size: 0.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: .8rem;
|
||||
margin-right: .27rem;
|
||||
width: 0.8rem;
|
||||
margin-right: 0.27rem;
|
||||
}
|
||||
|
||||
& ~ li {
|
||||
@@ -386,7 +383,7 @@ export default {
|
||||
|
||||
.panel-menu-btn {
|
||||
position: fixed;
|
||||
left: .53rem;
|
||||
left: 0.53rem;
|
||||
bottom: 1.33rem;
|
||||
z-index: 1000;
|
||||
width: 1.33rem;
|
||||
@@ -395,50 +392,49 @@ export default {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background: $primary-color;
|
||||
border: 1px solid $primary-color;
|
||||
background: #cf9e3b;
|
||||
border: 1px solid #cf9e3b;
|
||||
border-radius: 50%;
|
||||
.iconfont{
|
||||
font-size: .5rem;
|
||||
.iconfont {
|
||||
font-size: 0.5rem;
|
||||
color: white;
|
||||
}
|
||||
.menu-text {
|
||||
font-size: .27rem;
|
||||
margin-top: .1rem;
|
||||
font-size: 0.27rem;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.temple-manager {
|
||||
.manager {
|
||||
display: flex;
|
||||
margin: .4rem;
|
||||
margin: 0.4rem;
|
||||
|
||||
& ~ .manager {
|
||||
border-top: 1px solid #ddd;
|
||||
padding-top: .4rem;
|
||||
padding-top: 0.4rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 1.33rem;
|
||||
border: .08rem solid #f7e4bf;
|
||||
border: 0.08rem solid #f7e4bf;
|
||||
vertical-align: top;
|
||||
|
||||
}
|
||||
|
||||
.manager-container {
|
||||
flex: 1;
|
||||
margin-left: .4rem;
|
||||
margin-left: 0.4rem;
|
||||
|
||||
.name {
|
||||
padding: .3rem .3rem .3rem 0;
|
||||
font-size: .4rem;
|
||||
padding: 0.3rem 0.3rem 0.3rem 0;
|
||||
font-size: 0.4rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: .35rem;
|
||||
font-size: 0.35rem;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
@@ -452,18 +448,17 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.merit-rank-container {
|
||||
.head {
|
||||
padding: .53rem .4rem;
|
||||
padding-bottom: .13rem;
|
||||
padding: 0.53rem 0.4rem;
|
||||
padding-bottom: 0.13rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
font-size: .43rem;
|
||||
font-size: 0.43rem;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
@@ -471,12 +466,12 @@ export default {
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
font-size: .37rem;
|
||||
font-size: 0.37rem;
|
||||
color: #999999;
|
||||
display: inline-block;
|
||||
margin-left: .4rem;
|
||||
border-bottom: .03rem solid transparent;
|
||||
padding-bottom: .13rem;
|
||||
margin-left: 0.4rem;
|
||||
border-bottom: 0.03rem solid transparent;
|
||||
padding-bottom: 0.13rem;
|
||||
}
|
||||
|
||||
span.current {
|
||||
@@ -503,42 +498,42 @@ export default {
|
||||
}
|
||||
|
||||
.van-swipe__indicator--active {
|
||||
background: $primary-color;
|
||||
background: #cf9e3b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.certed-temple {
|
||||
display: flex;
|
||||
border: 1px solid $primary-color;
|
||||
border: 1px solid #cf9e3b;
|
||||
border-radius: 4px;
|
||||
margin: 0 .4rem;
|
||||
margin: 0 0.4rem;
|
||||
align-items: center;
|
||||
font-size: .37rem;
|
||||
padding: .3rem;
|
||||
margin-bottom: .2rem;
|
||||
font-size: 0.37rem;
|
||||
padding: 0.3rem;
|
||||
margin-bottom: 0.2rem;
|
||||
|
||||
.cert-icon {
|
||||
width: .3rem;
|
||||
margin-right: .1rem;
|
||||
width: 0.3rem;
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: 1;
|
||||
font-size: .3rem;
|
||||
font-size: 0.3rem;
|
||||
color: #888;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
color: $primary-color;
|
||||
color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
|
||||
.process-more {
|
||||
line-height: 1.5rem;
|
||||
text-align: center;
|
||||
font-size: .4rem;
|
||||
font-size: 0.4rem;
|
||||
|
||||
.iconfont {
|
||||
vertical-align: middle;
|
||||
@@ -546,8 +541,8 @@ export default {
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: .4rem;
|
||||
padding-bottom: .33rem;
|
||||
padding: 0.4rem;
|
||||
padding-bottom: 0.33rem;
|
||||
|
||||
.my-swipe .van-swipe-item {
|
||||
color: #fff;
|
||||
@@ -558,36 +553,35 @@ export default {
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: .16rem;
|
||||
border-radius: 0.16rem;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
margin-bottom: .4rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.van-notice-bar {
|
||||
border: 1px solid #E6B759;
|
||||
border-radius: .16rem;
|
||||
border: 1px solid #e6b759;
|
||||
border-radius: 0.16rem;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
.panel-head {
|
||||
padding: .53rem .4rem;
|
||||
padding: 0.53rem 0.4rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
font-size: .43rem;
|
||||
font-size: 0.43rem;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
padding: 0 .4rem;
|
||||
padding: 0 0.4rem;
|
||||
overflow-x: scroll;
|
||||
|
||||
.merit-group {
|
||||
@@ -598,11 +592,11 @@ export default {
|
||||
}
|
||||
|
||||
.temple-home-activity {
|
||||
.buddha-process{
|
||||
padding: 0
|
||||
.buddha-process {
|
||||
padding: 0;
|
||||
}
|
||||
.process {
|
||||
padding: .4rem 0;
|
||||
padding: 0.4rem 0;
|
||||
|
||||
.bar {
|
||||
padding-bottom: 0;
|
||||
@@ -615,12 +609,12 @@ export default {
|
||||
height: 3.39rem;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border-radius: .16rem;
|
||||
border-radius: 0.16rem;
|
||||
vertical-align: top;
|
||||
overflow: hidden;
|
||||
|
||||
& ~ .merit {
|
||||
margin-left: .4rem;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
|
||||
img {
|
||||
@@ -633,34 +627,34 @@ export default {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: .91rem;
|
||||
height: 0.91rem;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
line-height: .91rem;
|
||||
line-height: 0.91rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: .37rem;
|
||||
padding: 0 .11rem;
|
||||
font-size: 0.37rem;
|
||||
padding: 0 0.11rem;
|
||||
}
|
||||
}
|
||||
|
||||
.temple-home-page {
|
||||
.temple-home {
|
||||
display: flex;
|
||||
font-size: .37rem;
|
||||
font-size: 0.37rem;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: .4rem .3rem;
|
||||
padding: 0.4rem 0.3rem;
|
||||
|
||||
.temple-name {
|
||||
font-size: .45rem;
|
||||
font-size: 0.45rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.visitor {
|
||||
color: #999;
|
||||
font-size: .3rem;
|
||||
font-size: 0.3rem;
|
||||
|
||||
span {
|
||||
padding-left: 10px;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<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}" />
|
||||
<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">
|
||||
@@ -13,33 +13,19 @@
|
||||
<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 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">
|
||||
<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="真人头像"
|
||||
>
|
||||
<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>
|
||||
@@ -47,11 +33,7 @@
|
||||
</div>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
type="text"
|
||||
label="戒牒照片"
|
||||
placeholder="戒牒照片"
|
||||
>
|
||||
<van-field type="text" label="戒牒照片" placeholder="戒牒照片">
|
||||
<template #input>
|
||||
<div>
|
||||
<p class="input-small-tip">仅用于认证，不公开</p>
|
||||
@@ -59,76 +41,61 @@
|
||||
</div>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
v-model="form.description"
|
||||
type="textarea"
|
||||
label="自我介绍"
|
||||
placeholder="向他人展示自己的文字说明"
|
||||
:rules="[{ required: true }]"
|
||||
maxlength="500"
|
||||
:rows="4"
|
||||
show-word-limit
|
||||
/>
|
||||
<div style="margin: 16px;">
|
||||
<van-field v-model="form.description" type="textarea" label="自我介绍" placeholder="向他人展示自己的文字说明" :rules="[{ required: true }]" maxlength="500" :rows="4" show-word-limit />
|
||||
<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-action-sheet v-model="showTitle" :actions="actions" @select="onSelect" cancel-text="取消" close-on-click-action />
|
||||
|
||||
<!-- 选择城市 -->
|
||||
<van-popup v-model="showProvince" round position="bottom" safe-area-inset-bottom>
|
||||
<van-cascader
|
||||
v-model="cascaderValue"
|
||||
title="请选择所在地区"
|
||||
:options="cityOptions"
|
||||
@close="showProvince = false"
|
||||
@finish="onFinishProvince"
|
||||
/>
|
||||
<van-cascader v-model="cascaderValue" title="请选择所在地区" :options="cityOptions" @close="showProvince = false" @finish="onFinishProvince" />
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getMonkAppellation, getRegion, certifyMonk } from '@/api';
|
||||
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: [], // 法师照片
|
||||
cert_url: [], // 戒牒照片
|
||||
description: ''
|
||||
},
|
||||
cascaderValue: '',
|
||||
cityOptions: [],
|
||||
uploader: [],
|
||||
actions: [],
|
||||
authing: false, // 是否正在认证
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
showProvince: false, // 显示城市选择
|
||||
showTitle: false, // 显示法师称谓
|
||||
form: {
|
||||
nickname: "", // 法号
|
||||
rank_id: "", // 称谓
|
||||
rank_text: "", // 称谓
|
||||
region: "",
|
||||
place_temple: "", // 驻赐寺院
|
||||
avatar_url: [], // 法师照片
|
||||
cert_url: [], // 戒牒照片
|
||||
description: "",
|
||||
},
|
||||
cascaderValue: "",
|
||||
cityOptions: [],
|
||||
uploader: [],
|
||||
actions: [],
|
||||
authing: false, // 是否正在认证
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
mounted() {
|
||||
this.getParams();
|
||||
},
|
||||
methods: {
|
||||
async onSubmit(){
|
||||
async onSubmit() {
|
||||
const { form } = this;
|
||||
const [province_id, city_id, county_id] = form.city_id;
|
||||
const { avatar_url, cert_url } = form;
|
||||
if(!avatar_url.length){
|
||||
return this.$toast.fail('请上传头像照片');
|
||||
if (!avatar_url.length) {
|
||||
return this.$toast.fail("请上传头像照片");
|
||||
}
|
||||
if(!cert_url.length){
|
||||
return this.$toast.fail('请上传戒牒照片')
|
||||
if (!cert_url.length) {
|
||||
return this.$toast.fail("请上传戒牒照片");
|
||||
}
|
||||
const params = {
|
||||
...this.form,
|
||||
@@ -136,58 +103,58 @@ export default {
|
||||
cert_url: this.form.cert_url[0].url,
|
||||
province_id,
|
||||
city_id,
|
||||
county_id
|
||||
}
|
||||
await certifyMonk(params)
|
||||
this.$toast.success('认证信息提交成功')
|
||||
await this.$delay(2000)
|
||||
await this.$router.replace({ name: 'user-temple-station-review'})
|
||||
county_id,
|
||||
};
|
||||
await certifyMonk(params);
|
||||
this.$toast.success("认证信息提交成功");
|
||||
await this.$delay(2000);
|
||||
await this.$router.replace({ name: "user-temple-station-review" });
|
||||
},
|
||||
|
||||
getParams(){
|
||||
getMonkAppellation().then(res => {
|
||||
getParams() {
|
||||
getMonkAppellation().then((res) => {
|
||||
this.actions = res;
|
||||
})
|
||||
getRegion().then(city => {
|
||||
this.cityOptions = city
|
||||
})
|
||||
});
|
||||
getRegion().then((city) => {
|
||||
this.cityOptions = city;
|
||||
});
|
||||
},
|
||||
onSelect(action){
|
||||
onSelect(action) {
|
||||
this.form.rank_id = action.id;
|
||||
this.form.rank_text = action.name;
|
||||
},
|
||||
onFinishProvince({selectedOptions}){
|
||||
onFinishProvince({ selectedOptions }) {
|
||||
this.showProvince = false;
|
||||
this.form.city_name = selectedOptions.map(v => v.text).join(' / ')
|
||||
this.form.city_id = selectedOptions.map(v => v.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
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;
|
||||
.mega-approve {
|
||||
.input-small-tip {
|
||||
font-size: 0.32rem;
|
||||
color: #aaa;
|
||||
}
|
||||
.van-button--temple{
|
||||
background: $primary-color;
|
||||
border: 1px solid $primary-color;
|
||||
.van-button--temple {
|
||||
background: #cf9e3b;
|
||||
border: 1px solid #cf9e3b;
|
||||
color: white;
|
||||
}
|
||||
.reviewing{
|
||||
.reviewing {
|
||||
text-align: center;
|
||||
padding-top: 1.33rem;
|
||||
.iconfont{
|
||||
.iconfont {
|
||||
font-size: 2.33rem;
|
||||
color: $primary-color;
|
||||
color: #cf9e3b;
|
||||
}
|
||||
.review-text{
|
||||
padding: .4rem 0;
|
||||
font-size: .4rem;
|
||||
.review-text {
|
||||
padding: 0.4rem 0;
|
||||
font-size: 0.4rem;
|
||||
}
|
||||
.van-button{
|
||||
.van-button {
|
||||
width: 60%;
|
||||
margin-top: 1.33rem;
|
||||
}
|
||||
@@ -195,4 +162,4 @@ export default {
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- IE11 -->
|
||||
<!-- IE11 -->
|
||||
|
||||
@@ -138,7 +138,7 @@ export default {
|
||||
padding: 0 0.7rem;
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
background: $primary-color;
|
||||
background: #cf9e3b;
|
||||
opacity: 0.8;
|
||||
height: 1.07rem;
|
||||
line-height: 1.07rem;
|
||||
@@ -155,7 +155,7 @@ export default {
|
||||
justify-content: space-between;
|
||||
.feedback {
|
||||
font-size: 0.4rem;
|
||||
color: $primary-color;
|
||||
color: #cf9e3b;
|
||||
}
|
||||
.title-text {
|
||||
font-size: 0.5rem;
|
||||
@@ -204,7 +204,7 @@ export default {
|
||||
font-size: 0.4rem;
|
||||
flex: 1;
|
||||
.btn {
|
||||
background: $primary-color;
|
||||
background: #cf9e3b;
|
||||
color: white;
|
||||
font-size: 0.3rem;
|
||||
border-radius: 2px;
|
||||
@@ -244,7 +244,7 @@ export default {
|
||||
position: absolute;
|
||||
left: -0.2rem;
|
||||
top: -0.2rem;
|
||||
border: 0.2rem solid $primary-color;
|
||||
border: 0.2rem solid #cf9e3b;
|
||||
transition: transform 0.1s linear;
|
||||
transform-origin: center center;
|
||||
}
|
||||
@@ -263,7 +263,7 @@ export default {
|
||||
animation: scale 0.1s linear;
|
||||
}
|
||||
&::after {
|
||||
border-color: $primary-color;
|
||||
border-color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
span {
|
||||
@@ -317,7 +317,7 @@ export default {
|
||||
display: block;
|
||||
margin-top: 0.4rem;
|
||||
font-size: 0.4rem;
|
||||
color: $primary-color;
|
||||
color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
.backword {
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<div class="course-detail" 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}" />
|
||||
<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="course-container">
|
||||
<div class="practice">
|
||||
<h1 class="title">{{data.name}}</h1>
|
||||
<h1 class="title">{{ data.name }}</h1>
|
||||
<div class="accumulation">
|
||||
<p>
|
||||
<span>今日计数 / 今日目标（遍）：</span>
|
||||
<span>
|
||||
<b>{{data.now_count}}</b>
|
||||
<b>{{ data.now_count }}</b>
|
||||
<i>/</i>
|
||||
<b>{{data.now_target}}</b>
|
||||
<b>{{ data.now_target }}</b>
|
||||
<i class="iconfont icon-bianjisekuai"></i>
|
||||
</span>
|
||||
</p>
|
||||
@@ -20,16 +20,16 @@
|
||||
<div class="progress-bar">
|
||||
<div class="progress-inline"></div>
|
||||
</div>
|
||||
<span class="progress-text">{{data.progress || 0}}%</span>
|
||||
<span class="progress-text">{{ data.progress || 0 }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accumulation">
|
||||
<p>
|
||||
<span>总计数 / 总目标（遍）：</span>
|
||||
<span>
|
||||
<b>{{data.count}}</b>
|
||||
<b>{{ data.count }}</b>
|
||||
<i>/</i>
|
||||
<b>{{data.target}}</b>
|
||||
<b>{{ data.target }}</b>
|
||||
<i class="iconfont icon-bianjisekuai"></i>
|
||||
</span>
|
||||
</p>
|
||||
@@ -41,7 +41,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buddhist-scriptures">
|
||||
<div class="scriptures">
|
||||
<h3 class="title">功德利益</h3>
|
||||
@@ -58,195 +58,191 @@
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<a href="#">
|
||||
<img src="" alt="">
|
||||
<img src="" alt="" />
|
||||
</a>
|
||||
<div class="merit-rank-container">
|
||||
<div class="head">
|
||||
<span class="title">排行榜</span>
|
||||
<div class="list">
|
||||
<span :class="[li.id === type_id && 'current']" v-for="(li, index) in types" :key="index" @click="onNav(li)">{{li.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="user-merit-course border-bottom" v-for="(course, index) in data.compare" :key="index">
|
||||
<div class="merit-rank-container">
|
||||
<div class="head">
|
||||
<span class="title">排行榜</span>
|
||||
<div class="list">
|
||||
<span :class="[li.id === type_id && 'current']" v-for="(li, index) in types" :key="index" @click="onNav(li)">{{ li.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="user-merit-course border-bottom" v-for="(course, index) in data.compare" :key="index">
|
||||
<img :src="course.avatar" alt="" />
|
||||
<div class="profile">
|
||||
<div>
|
||||
<div class="name">
|
||||
<span>{{course.nickname}}</span>
|
||||
<span>{{ course.nickname }}</span>
|
||||
<span></span>
|
||||
</div>
|
||||
<p>{{course.rank}}</p>
|
||||
<p>{{ course.rank }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="result">
|
||||
<p class="money">{{course.sum_count}} 遍</p>
|
||||
<p class="money">{{ course.sum_count }} 遍</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-buff">
|
||||
<button class="button">恭请法师加持</button>
|
||||
</div>
|
||||
<!-- 计数 -->
|
||||
<div class="on-count" @click="onToCount">
|
||||
计数
|
||||
</div>
|
||||
<div class="on-count" @click="onToCount">计数</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCourseDetail } from "@/api"
|
||||
import { getCourseDetail } from "@/api";
|
||||
|
||||
export default {
|
||||
data(){
|
||||
data() {
|
||||
const { query } = this.$route;
|
||||
return {
|
||||
query,
|
||||
data: null,
|
||||
type_id: 1,
|
||||
types: [
|
||||
{ id: 1, name: '实时' },
|
||||
{ id: 2, name: '月榜' },
|
||||
{ id: 3, name: '总榜' },
|
||||
]
|
||||
}
|
||||
{ id: 1, name: "实时" },
|
||||
{ id: 2, name: "月榜" },
|
||||
{ id: 3, name: "总榜" },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
mounted() {
|
||||
this.getCourseDetail();
|
||||
},
|
||||
methods: {
|
||||
async getCourseDetail(){
|
||||
async getCourseDetail() {
|
||||
const res = await getCourseDetail(this.query.id, this.type_id);
|
||||
this.data = res;
|
||||
},
|
||||
onNav(li){
|
||||
onNav(li) {
|
||||
this.type_id = li.id;
|
||||
this.getCourseDetail();
|
||||
},
|
||||
onToCount(){
|
||||
onToCount() {
|
||||
this.$router.push({
|
||||
name: 'user-course-count',
|
||||
query: { id: this.data.id }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
name: "user-course-count",
|
||||
query: { id: this.data.id },
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.course-detail{
|
||||
background: url('~@/assets/img/background.jpeg') top center no-repeat;
|
||||
.course-detail {
|
||||
background: url("~@/assets/img/background.jpeg") top center no-repeat;
|
||||
background-size: 100%;
|
||||
.on-count{
|
||||
.on-count {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 4rem;
|
||||
padding: 0 .7rem;
|
||||
padding: 0 0.7rem;
|
||||
border-top-left-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
background: $primary-color;
|
||||
background: #cf9e3b;
|
||||
opacity: 0.8;
|
||||
height: 1.07rem;
|
||||
line-height: 1.07rem;
|
||||
font-size: .4rem;
|
||||
font-size: 0.4rem;
|
||||
color: white;
|
||||
}
|
||||
.course-container{
|
||||
padding: .4rem;
|
||||
.practice{
|
||||
.title{
|
||||
font-size: .5rem;
|
||||
.course-container {
|
||||
padding: 0.4rem;
|
||||
.practice {
|
||||
.title {
|
||||
font-size: 0.5rem;
|
||||
color: white;
|
||||
padding-top: .4rem;
|
||||
padding-top: 0.4rem;
|
||||
margin-bottom: 1.33rem;
|
||||
}
|
||||
.accumulation{
|
||||
font-size: .35rem;
|
||||
margin-bottom: .8rem;
|
||||
p{
|
||||
.accumulation {
|
||||
font-size: 0.35rem;
|
||||
margin-bottom: 0.8rem;
|
||||
p {
|
||||
color: white;
|
||||
font-size: .4rem;
|
||||
.iconfont{
|
||||
margin-left: .4rem;
|
||||
font-size: 0.4rem;
|
||||
.iconfont {
|
||||
margin-left: 0.4rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.progress{
|
||||
.progress {
|
||||
display: flex;
|
||||
margin-top: .2rem;
|
||||
margin-top: 0.2rem;
|
||||
align-items: center;
|
||||
color: white;
|
||||
.progress-bar{
|
||||
.progress-bar {
|
||||
flex: 1;
|
||||
border-radius: 8px;
|
||||
margin-right: .27rem;
|
||||
height: .3rem;
|
||||
margin-right: 0.27rem;
|
||||
height: 0.3rem;
|
||||
background: #ddd;
|
||||
position: relative;
|
||||
.progress-inline{
|
||||
.progress-inline {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: .3rem;
|
||||
height: 0.3rem;
|
||||
width: 50%;
|
||||
background: #188fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
.progress-text{
|
||||
width: .7rem;
|
||||
.progress-text {
|
||||
width: 0.7rem;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.buddhist-scriptures{
|
||||
padding: .4rem;
|
||||
margin-top: .9rem;
|
||||
.scriptures{
|
||||
margin-bottom: .4rem;
|
||||
.title{
|
||||
font-size: .4rem;
|
||||
.buddhist-scriptures {
|
||||
padding: 0.4rem;
|
||||
margin-top: 0.9rem;
|
||||
.scriptures {
|
||||
margin-bottom: 0.4rem;
|
||||
.title {
|
||||
font-size: 0.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.merit-rank-container{
|
||||
.head{
|
||||
padding: .53rem .4rem;
|
||||
padding-bottom: .13rem;
|
||||
.merit-rank-container {
|
||||
.head {
|
||||
padding: 0.53rem 0.4rem;
|
||||
padding-bottom: 0.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);
|
||||
.title {
|
||||
font-size: 0.43rem;
|
||||
color: #222222;
|
||||
}
|
||||
.list {
|
||||
display: flex;
|
||||
span {
|
||||
font-size: 0.37rem;
|
||||
color: #999999;
|
||||
display: inline-block;
|
||||
margin-left: 0.4rem;
|
||||
border-bottom: 0.03rem solid transparent;
|
||||
padding-bottom: 0.13rem;
|
||||
}
|
||||
span.current {
|
||||
color: #222;
|
||||
border-bottom-color: rgb(168, 28, 28);
|
||||
}
|
||||
}
|
||||
}
|
||||
.body{
|
||||
.user-merit-course{
|
||||
.body {
|
||||
.user-merit-course {
|
||||
display: flex;
|
||||
padding: .27rem 0.4rem;
|
||||
padding: 0.27rem 0.4rem;
|
||||
img {
|
||||
width: 1.17rem;
|
||||
height: 1.17rem;
|
||||
@@ -255,17 +251,17 @@ export default {
|
||||
}
|
||||
.profile {
|
||||
flex: 1;
|
||||
padding-top: .13rem;
|
||||
padding-top: 0.13rem;
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-bottom: .27rem;
|
||||
margin-bottom: 0.27rem;
|
||||
span:first-child {
|
||||
font-size: 0.4rem;
|
||||
color: #777;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
margin-right: .4rem;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
span:last-child {
|
||||
font-size: 0.32rem;
|
||||
@@ -283,7 +279,7 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
padding: .13rem 0;
|
||||
padding: 0.13rem 0;
|
||||
text-align: right;
|
||||
.money {
|
||||
font-size: 0.35rem;
|
||||
@@ -293,18 +289,17 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.button-buff{
|
||||
.button-buff {
|
||||
text-align: center;
|
||||
padding: .4rem;
|
||||
.button{
|
||||
background: $primary-color;
|
||||
border: 1px solid $primary-color;
|
||||
font-size: .4rem;
|
||||
padding: 0.4rem;
|
||||
.button {
|
||||
background: #cf9e3b;
|
||||
border: 1px solid #cf9e3b;
|
||||
font-size: 0.4rem;
|
||||
color: white;
|
||||
border-radius: .13rem;
|
||||
padding: .27rem .4rem;
|
||||
border-radius: 0.13rem;
|
||||
padding: 0.27rem 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -78,7 +78,7 @@ export default {
|
||||
color: #999;
|
||||
padding-top: 0.2rem;
|
||||
span {
|
||||
color: $primary-color;
|
||||
color: #cf9e3b;
|
||||
padding: 0 0.13rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -134,7 +134,7 @@ export default {
|
||||
font-size: 0.3rem;
|
||||
color: #666;
|
||||
span {
|
||||
color: $primary-color;
|
||||
color: #cf9e3b;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
@@ -151,7 +151,7 @@ export default {
|
||||
top: 0;
|
||||
height: 0.11rem;
|
||||
width: 50%;
|
||||
background: $primary-color;
|
||||
background: #cf9e3b;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -50,13 +50,5 @@ module.exports = {
|
||||
},
|
||||
css: {
|
||||
sourceMap: false,
|
||||
loaderOptions: {
|
||||
scss: {
|
||||
data: null,
|
||||
},
|
||||
postcss: {
|
||||
plugins: [],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user