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

feat: 增加界面

Browse Source
This commit is contained in:
wenfp
2021-11-25 21:13:38 +08:00
parent 52c1603176
commit 29da9c7746
33 changed files with 1896 additions and 870 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/buddha-activity/index.vue
+5 -3
View File
@@ -3,8 +3,8 @@
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
<div div class="process-container">
<scroll-view :height="height - 50" ref="scrollView">
<buddha-process v-for="(p, i) in list" :key="i" :data="p"></buddha-process>
<div v-if="total === list.length" class="no-more">没有更多了</div>
<buddha-process v-for="(p, i) in list" :key="i" :data="p" :show-goods-btn="!query.goods_id"></buddha-process>
<div v-if="total === list.length && list.length > 3" class="no-more">没有更多了</div>
</scroll-view>
</div>
</div>
@@ -16,7 +16,9 @@ import { getDynamicData } from "@/api"
export default {
props: ['data'],
data(){
const { query } = this.$route;
return {
query,
size: 10,
page: 1,
total: 0,
@@ -29,7 +31,7 @@ export default {
},
methods: {
async getDynamicData(){
const res = await getDynamicData(this.page, this.size)
const res = await getDynamicData(this.page, this.query.goods_id, this.size)
console.log(res)
this.total = res.total;
this.list = res.results;
src/pages/buddha-detail/index.vue
+194
View File
@@ -0,0 +1,194 @@
<template>
<div class="process-detail-wrapper" v-if="data">
<div class="process-detail">
<h1 class="title">{{ data.title }} </h1>
<p class="date">{{ data.time || data.date }}</p>
<p class="desc">{{ data.description }}</p>
<div class="image-group">
<img :src="cover" v-for="(cover, index) in covers" :key="index" alt="" />
</div>
<div v-html="data.content" class="process-content">
</div>
<button class="purchase" @click.stop="onGoodsDetail">{{ data.btn_title }}</button>
<div class="bar">
<span class="join">已有{{ data.sales }}人参与</span>
<div class="btn-group">
<span class="btn" :class="[data.is_collected === 1 ? 'collect' : 'un-collect']" @click.stop="onCollect">
<i class="iconfont icon-guanzhu-yiguanzhu"></i>
<b>关注</b>
</span>
<span class="btn">
<i class="iconfont icon-zhuanfa"></i>
<b>转发</b>
</span>
</div>
</div>
</div>
</div>
</template>
<script>
import { getDynamicDetail, toggleCollect } from '@/api';
export default {
name: 'buddha-detail',
data() {
return {
data: null,
};
},
computed: {
covers: {
get() {
const type = Object.prototype.toString.call(this.data.covers);
return type === '[object Object]' ? []: this.data.covers.slice(0, 3);
},
},
},
mounted() {
this.getDynamicDetail();
},
methods: {
async getDynamicDetail(){
const data = await getDynamicDetail(this.$route.query.id);
this.data = data;
},
async onCollect() {
await toggleCollect(this.data.id);
this.data.is_collected = this.data.is_collected === 1 ? 0 : 1;
this.$emit('collection', this.data.id);
},
onGoodsDetail(){
const { goods_type, goods_id, temple_id } = this.data;
this.onPushToGoodsDetail(goods_type, goods_id, temple_id)
}
},
};
</script>
<style lang="scss">
.process-detail-wrapper {
display: flex;
position: relative;
padding: .5rem .4rem env(safe-area-inset-bottom) .4rem;
&::after {
content: '';
height: 1px;
width: 200%;
background: #ededed;
transform: scale(0.5, 0.5);
transform-origin: left top;
display: block;
position: absolute;
bottom: 0;
left: 0;
}
& ~ .process {
padding-top: 0.53rem;
}
.process-detail {
flex: 1;
.date {
font-size: 0.35rem;
color: #666666;
display: block;
margin-bottom: .3rem;
padding: .1rem 0;
}
.title {
font-size: 0.43rem;
color: #222;
margin-bottom: 0.32rem;
}
.desc {
font-size: 0.37rem;
line-height: 0.53rem;
color: #5a5a5a;
text-align: justify;
}
.detail-text{
font-size: .4rem;
padding-top: .2rem;
color: #b74100;
}
.image-group {
white-space: nowrap;
margin-top: 0.27rem;
img {
width: 2.16rem;
height: 2.16rem;
vertical-align: top;
border-radius: 0.05rem;
& ~ img {
margin-left: 0.27rem;
}
}
}
.process-content{
font-size: .4rem;
img{
max-width: 100%;
}
}
.purchase {
background: #cf9e3b;
height: 0.77rem;
color: white;
padding: 0 0.27rem;
line-height: 0.77rem;
border-radius: 0.07rem;
font-size: 0.35rem;
border: 1px solid #cf9e3b;
margin-bottom: 0.32rem;
display: inline-block;
vertical-align: top;
margin-top: 0.4rem;
}
.bar {
display: flex;
justify-content: space-between;
padding-bottom: 0.37rem;
.join {
font-size: 0.3rem;
color: #666;
}
.btn-group {
display: flex;
.btn {
display: flex;
margin-left: 0.5rem;
align-items: center;
.iconfont {
color: $primary-color;
vertical-align: middle;
font-size: 0.4rem;
margin-top: -3px;
}
b {
font-size: 0.35rem;
padding-left: 0.1rem;
color: #888;
display: inline-block;
vertical-align: middle;
}
}
.collect {
.iconfont {
color: $primary-color;
}
}
.un-collect {
.iconfont {
color: #ddd;
}
}
}
}
}
}
</style>
src/pages/everyday-donation/index.vue
+111 -58
View File
@@ -1,51 +1,60 @@
<template>
<div class="everyday-donation" v-if="data">
<div class="topbar" ref="topbar">
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
</div>
<swiper class="swiper-container" :options="swiperOption">
<swiper-slide>
<div style="height: 100vw;" class="picture">
<img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
</div>
</swiper-slide>
<swiper-slide>
<div style="height: 100vw;" class="picture">
<img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
</div>
</swiper-slide>
</swiper>
<div class="monk-profile">
<h1 class="position">{{data.name}}</h1>
<div class="bar">
<span class="status">进行中</span>
<span>已有{{data.sales || 0}}人参与</span>
<div class="content-view">
<div class="topbar" ref="topbar">
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
</div>
</div>
<div class="divider"></div>
<div class="panel">
<div class="panel-head">
<span class="title">进展动态</span>
</div>
<div class="panel-body">
<buddha-process></buddha-process>
<div class="process-more">
<span>查看更多进展状态</span>
<i class="iconfont icon-arrow-right"></i>
<swiper class="swiper-container" :options="swiperOption">
<swiper-slide>
<div style="height: 100vw;" class="picture">
<img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
</div>
</swiper-slide>
<swiper-slide>
<div style="height: 100vw;" class="picture">
<img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
</div>
</swiper-slide>
</swiper>
<div class="monk-profile">
<h1 class="position">{{data.name}}</h1>
<div class="bar">
<span class="status">进行中</span>
<span>已有{{data.sales || 0}}人参与</span>
</div>
</div>
</div>
<div class="support">
<div class="support-head">
<span class="label">感恩功德</span>
<ul class="external">
<li class="active">实时</li>
<li>月榜</li>
<li>总榜</li>
</ul>
<div class="divider"></div>
<div class="panel">
<div class="panel-head">
<span class="title">详情</span>
</div>
<div v-html="data.content" class="goods-content"></div>
</div>
<div>
<!-- <user-merit v-for=""></user-merit> -->
<div class="divider"></div>
<div class="panel" v-if="goodsDynamicList.length > 0">
<div class="panel-head">
<span class="title">进展动态</span>
</div>
<div class="panel-body">
<buddha-process v-for="dynamic in goodsDynamicList" :key="dynamic.id" :data="dynamic" :show-goods-btn="false"></buddha-process>
<div class="process-more" @click="onMoreProcess">
<span>查看更多进展状态</span>
<i class="iconfont icon-arrow-right"></i>
</div>
</div>
</div>
<div class="support" v-if="payRecords.length">
<div class="support-head">
<span class="label">感恩功德</span>
<ul class="external">
<li class="active">实时</li>
<li>月榜</li>
<li>总榜</li>
</ul>
</div>
<div>
<!-- <user-merit v-for=""></user-merit> -->
</div>
</div>
</div>
<div class="merit-button-group border-top">
@@ -54,7 +63,7 @@
<van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" :close-on-click-overlay="false" :close-on-popstate="true">
<!-- 显示日行一善的商品规格 -->
<div class="caret" v-if="query.goods_type === '-1'">
<div class="caret" v-if="query.goods_type == '1'">
<div class="head">
<span>选择行善金额</span>
</div>
@@ -89,7 +98,7 @@
</div>
<!-- 显示添砖加瓦的商品规格 -->
<div class="caret" v-if="query.goods_type === '-2'">
<div class="caret" v-if="query.goods_type == '2'">
<div class="head">
<span>选择行善金额</span>
</div>
@@ -122,9 +131,13 @@
</span>
</div>
</div>
<div class="next-group">
<span class="total">合计：￥{{priceTotal}}</span>
<button class="next" @click="onToPay">下一步</button>
<div class="next-group-wrapper">
<safe-area>
<div class='next-group'>
<span class="total">合计：￥{{priceTotal}}</span>
<button class="next" @click="onToPay">下一步</button>
</div>
</safe-area>
</div>
</div>
@@ -136,13 +149,13 @@
<script>
import 'swiper/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { getGoodsDetail } from '@/api'
import { getDynamicData, getGoodsDetail } from '@/api';
export default {
components: {
swiper,
swiperSlide,
},
swiper,
swiperSlide,
},
data(){
const { query } = this.$route;
let title = '详情';
@@ -170,13 +183,15 @@ export default {
number: 1,
is_assign: false, // 是否为自动认捐砖块数
buy_quantity: 1, // 自定义认捐砖块数
goodsDynamicList: [], // 商品动态列表
banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
swiperOption: {
autoplay: 8000,
initialSlide: 1,
loop: true,
pagination: '.swiper-pagination',
}
},
payRecords: []
}
},
computed: {
@@ -210,8 +225,23 @@ export default {
if(this.query.goods_type === '2'){
response.spec = response.spec.map(v => ({ ...v, money: this.amountAbs(v.donate_number, Number(response.price))}))
}
await this.getDynamicDataByGoodsId(goods_id);
this.data = response;
},
async getDynamicDataByGoodsId(goods_id){
const res = await getDynamicData(1, goods_id);
this.goodsDynamicList = res.results;
},
onMoreProcess() {
const { goods_id, temple_id } = this.$route.query;
this.$router.push({
name: 'buddha-activity',
query: {
temple_id,
goods_id
}
});
},
// 设置行善单价
onPriceUnit({id, money}){
this.priceUnit = Number(money);
@@ -380,17 +410,20 @@ export default {
}
}
}
.next-group{
display: flex;
justify-content: space-between;
padding: .4rem ;
.next-group-wrapper{
position: absolute;
background: white;
bottom: 0;
left: 0;
right: 0;
align-items: center;
border-top: 1px solid #ededed;
}
.next-group{
display: flex;
justify-content: space-between;
padding: .4rem;
background: white;
align-items: center;
.total{
font-size: .4rem;
}
@@ -431,6 +464,25 @@ export default {
}
}
.everyday-donation{
height: 100vh;
position: relative;
.goods-content{
padding-left: .3rem;
padding-right: .3rem;
* {
max-width: 100%;
font-size: .35rem;
}
}
.content-view{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow-y: scroll;
padding-bottom: calc(env(safe-area-inset-bottom) + 1.6rem);
}
.monk-profile{
padding: .4rem;
margin-bottom: .2rem;
@@ -467,6 +519,7 @@ export default {
right: 0;
background: white;
padding: .4rem 0;
padding-bottom: calc(env(safe-area-inset-bottom) + .2rem);
.merit-button{
display: inline-block;
background: $primary-color;
src/pages/goods-detail/components/fill-information.vue
+38 -18
View File
@@ -3,11 +3,8 @@
<van-cell-group>
<van-cell title="功德芳名" :value="person.name" is-link @click="onAction('name')"/>
<van-cell title="心愿" :value="dream" is-link @click="onAction('desire')" />
<van-cell title="匿名参与" >
<van-switch v-model="checked" size="24px" />
</van-cell>
</van-cell-group>
<van-popup v-model="showDialog" position="bottom" :close-on-click-overlay="false" style="min-height: 50vh">
<van-popup v-model="showDialog" position="bottom" safe-area-inset-bottom style="min-height: 50vh">
<div class="add-merit-name" v-if="actionName === 'name'">
<h3 class="title">功德芳名</h3>
<div class="add-name">
@@ -15,39 +12,36 @@
<button class="btn" @click="addName">添加</button>
</div>
<div class="name-group">
<span class="name" v-for="name in names" :key="name.id" @click="onSelectName(name)">
<span class="name" v-for="(name, index) in names" :key="name.id" @click="onSelectName(name)">
{{name.name}}
<i class="iconfont icon-biaodankongjianshanchu"></i>
<i class="iconfont icon-biaodankongjianshanchu" @click.stop="onDeleteName(name, index)"></i>
</span>
</div>
<button class="confirm" @click="showDialog = false">确认</button>
<button class="confirm" @click="onConfirmMeritName">确认</button>
</div>
<div class="add-merit-name" v-if="actionName === 'desire'">
<h3 class="title">心愿</h3>
<div class="desire-input">
<textarea class="desire-textarea" v-model="desire" type="text" maxlength="50" placeholder="请输入功德主姓名" />
<textarea class="desire-textarea" v-model="desire" type="text" maxlength="50" placeholder="请输入您的心愿" />
<span>{{dream.length}}/50</span>
</div>
<div class="desire-quike">
<div class="bar">
<span>快捷输入</span>
<span class="update">换一组<i class="iconfont icon-shuaxin"></i></span>
<span class="update" @click="getDreamList">换一组<i class="iconfont icon-shuaxin"></i></span>
</div>
<div class="name-group">
<span class="name">白头偕老</span>
<span class="name">白头偕老</span>
<span class="name">白头偕老</span>
<span class="name">白头偕老</span>
<span class="name" v-for="(dream, index) in dreamList" :key="index" @click="desire = dream">{{dream}}</span>
</div>
</div>
<button class="confirm" @click="showDialog = false">确认</button>
<button class="confirm" @click="onConfirmDream">确认</button>
</div>
</van-popup>
</div>
</template>
<script>
import { getMeritName, postMeritName } from '@/api';
import { deleteMeritName, getMeritName, postMeritName, getDreamList } from '@/api';
export default {
data(){
@@ -56,31 +50,57 @@ export default {
showDialog: false,
actionName: 'name',
person: {},
name: '',
dream: '',
names: []
desire: '',
names: [],
dreamList: []
}
},
mounted(){
this.getName()
this.getName();
this.getDreamList();
},
methods: {
onAction(name){
this.showDialog = true;
this.actionName = name;
},
onConfirmMeritName(){
this.$emit('change', {
...this.person,
merit_name_id: this.person.id,
dream: this.dream,
})
},
onSelectName(name){
this.person = name;
this.showDialog = false;
},
onConfirmDream(){
this.showDialog = false;
this.dream = this.desire;
this.onConfirmMeritName();
},
async addName(){
if(!this.name) return
await postMeritName(this.name)
this.name = ''
this.getName()
await this.getName()
},
async onDeleteName(name){
await deleteMeritName(name.id);
await this.getName();
},
async getName(){
const data = await getMeritName();
this.names = data;
},
//获取心愿列表
async getDreamList(){
const list = await getDreamList();
console.log(list)
this.dreamList = list;
}
}
};
src/pages/goods-detail/components/select-spec.vue
+2 -2
View File
@@ -13,7 +13,7 @@
<div class="auto-donate-time">
<div class="donate">
<span class="label">数量 {{ number}}</span>
<span class="label">数量</span>
<span class="time-cycle">
<van-stepper v-model="num" step="1" @change="onChangeNumber"/>
</span>
@@ -42,7 +42,7 @@ export default {
},
watch: {
number: {
handler: val => {
handler(val) {
this.num = val;
}
}
src/pages/goods-detail/index.vue
+115 -37
View File
@@ -1,5 +1,5 @@
<template>
<div class="goods-detail" v-if="data">
<div class="goods-detail" v-if="data" :style="{paddingBottom: paddingBottom + 'px'}">
<swiper class="swiper-container" :options="swiperOption">
<swiper-slide>
<div style="height: 100vw;" class="picture">
@@ -14,28 +14,32 @@
<span>已有{{data.sales || 0}}人参与</span>
</div>
</div>
<div class="divider"></div>
<div class="panel">
<div class="panel-head">
<span class="title">详情</span>
</div>
<div v-html="data.content" class="goods-content"></div>
</div>
<div class="divider"></div>
<div class="support">
<div class="support-head">
<span class="label">供养者</span>
<span class="label">感恩功德</span>
<ul class="external">
<li class="active">实时</li>
<li>月榜</li>
<li>总榜</li>
<li :class="[listType === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType)">{{lType.name}}</li>
</ul>
</div>
<div>
<user-merit></user-merit>
<user-merit></user-merit>
<user-merit></user-merit>
<user-merit></user-merit>
<user-merit v-for="pay in payList" :key="pay.id" :data="pay"></user-merit>
</div>
</div>
<div class="detail-button-group">
<button class="merit-button" @click="showSpec = true">{{data.pay_name}}</button>
</div>
<van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" :close-on-click-overlay="false" :close-on-popstate="true">
<div class="caret-spec">
<fixed-bottom ref="fixedBottom">
<button class="merit-button" @click="showSpec = true">{{data.pay_name}}</button>
</fixed-bottom>
<van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" safe-area-inset-bottom :close-on-click-overlay="false" :close-on-popstate="true">
<div class="caret-spec" >
<div class="head">
<span>参与流程： </span>
<ul class="step-inline">
@@ -46,12 +50,12 @@
</div>
<transition>
<template>
<select-spec v-if="current === 0" v-model="spec_id" :data="data"></select-spec>
<fill-information v-if="current === 1" :data="data"></fill-information>
<select-spec v-if="current === 0" v-model="spec_id" :number.sync="quantity" :data="data"></select-spec>
<fill-information v-if="current === 1" :data="data" @change="onDreamInfoChange"></fill-information>
</template>
</transition>
<div class="next-group">
<span class="total">合计：￥289</span>
<span class="total">合计：￥{{priceTotal}}</span>
<button class="next" @click="onNextStep">下一步</button>
</div>
</div>
@@ -62,7 +66,7 @@
<script>
import 'swiper/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { getGoodsDetail } from '@/api'
import { getGoodsDetail, getOrderCompare } from '@/api';
import SelectSpec from './components/select-spec.vue'
import FillInformation from './components/fill-information.vue';
@@ -74,7 +78,10 @@ export default {
FillInformation
},
data(){
return {
paddingBottom: 0,
fixedBottomHeight: 0,
query: this.$route.query,
showSpec: false,
checked: false,
@@ -83,6 +90,8 @@ export default {
value: '',
spec_id: '',
step: 0,
quantity: 1,
dreamInfo: null,
swiperOption: {
autoplay: 8000,
initialSlide: 1,
@@ -91,23 +100,84 @@ export default {
onSlideChangeEnd: swiper => {
console.log('onSlideChangeEnd', swiper.realIndex)
}
},
listType: 1,
listTypes: [
{ id: 1, name: '实时', },
{ id: 2, name: '月榜', },
{ id: 3, name: '总榜', },
],
payList: [],
}
},
computed: {
priceUnit(){
const spec = this.data.spec.find(item => item.id === this.spec_id);
if(!spec){
return 0;
}
return Number(spec.price)
},
priceTotal(){
if(this.is_auto){
return (parseInt(this.priceUnit * 100, 10) * this.quantity * 30) / 100
}
return (parseInt(this.priceUnit * 100, 10) * this.quantity) / 100;
}
},
mounted(){
this.getGoodsDetail('common');
},
methods: {
// dreamInfo: 心愿信息
onDreamInfoChange(dreamInfo){
this.dreamInfo = dreamInfo;
},
getSelectedSpec(){
const spec = this.data.spec.find(spec => spec.id === this.spec_id);
return spec;
},
onNextStep(){
this.current += 1;
if(this.current > 3){
this.current = 0
const selectedSpec = this.getSelectedSpec();
if(this.current > 1){
const { merit_name_id, dream } = this.dreamInfo;
this.$router.push({
name: 'pay',
query: {
...this.$route.query,
is_auto: this.is_auto ? 1 : 0,
spec_id: selectedSpec.id,
friendly_time: this.number,
quantity: this.quantity,
title: this.data.name,
subTitle: selectedSpec.spec_name,
amount: this.priceTotal,
// merit_name_id: ,
dream,
merit_name_id,
is_customized: 0,
from: 'common_goods', // 标识为通用商品
}
})
}
},
async getGoodsDetail(type){
const { goods_id, temple_id } = this.$route.query;
const response = await getGoodsDetail(type, goods_id, temple_id);
this.data = response;
await this.getPayRecords({ id: 1});
this.$nextTick(() => {
this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight()
})
},
// 获取感恩功德
async getPayRecords(lType){
this.listType = lType.id;
const res = await getOrderCompare(this.query.temple_id, this.listType, this.query.goods_id, 3 );
console.log('pay record', res)
this.payList = res.results;
},
}
}
@@ -115,6 +185,14 @@ export default {
<style lang="scss">
.goods-detail{
.goods-content{
padding-left: .3rem;
padding-right: .3rem;
* {
max-width: 100%;
font-size: .35rem;
}
}
.support{
.support-head{
padding: 0 .4rem;
@@ -155,6 +233,7 @@ export default {
font-size: .5rem;
padding-top: .2rem;
color: #19282E;
line-height: 1.3;
}
.introduction{
font-size: .37rem;
@@ -190,20 +269,23 @@ export default {
background: white;
border-top: .01rem solid #ddd;
padding: .3rem;
.merit-button{
display: inline-block;
background: $primary-color;
color: white;
height: 1.2rem;
font-size: .37rem;
min-width: 60%;
padding: 0 .53rem;
border: .01rem solid $primary-color;
border-radius: .13rem;
}
}
.merit-button{
display: block;
background: $primary-color;
color: white;
height: 1.2rem;
font-size: .37rem;
min-width: 60%;
padding: 0 .53rem;
margin-top: .3rem;
margin-left: auto;
margin-right: auto;
border: .01rem solid $primary-color;
border-radius: .13rem;
}
.caret-spec{
padding-bottom: 1.6rem;
.head{
display: flex;
justify-content: space-between;
@@ -257,12 +339,8 @@ export default {
.next-group{
display: flex;
justify-content: space-between;
padding: .4rem ;
position: absolute;
padding: .2rem .4rem ;
background: white;
bottom: 0;
left: 0;
right: 0;
align-items: center;
border-top: 1px solid #ededed;
.total{
src/pages/home.vue
+34 -54
View File
@@ -1,50 +1,27 @@
<template>
<div v-if="data" class="platform_home">
<van-nav-bar title="自在福田" style="background: #bf9330; color: white" />
<van-search v-model="value" readonly placeholder="寺院、主持、监寺" @click="onSearch"/>
<van-search v-model="value" readonly placeholder="寺院、主持、监寺" @click="onSearch" />
<div class="container">
<div class="swiper">
<van-swipe
class="my-swipe"
:autoplay="3000"
indicator-color="white"
>
<van-swipe-item
v-for="(banner, index) in data.banner_data"
:key="index"
>
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe-item v-for="(banner, index) in data.banner_data" :key="index">
<img :src="banner.cover" alt="" />
</van-swipe-item>
</van-swipe>
</div>
<van-swipe :loop="false">
<van-swipe-item
v-for="(item, index) in data.icon_data"
:key="index"
>
<van-swipe-item v-for="(item, index) in data.icon_data" :key="index">
<van-grid :border="false" class="home-grid-nav">
<van-grid-item
icon="photo-o"
:text="nav.name"
v-for="(nav, _index) in item"
:key="_index"
@click="locationTo(nav)"
>
<img
:src="nav.icon_url"
class="nav-icon"
slot="icon"
/>
<van-grid-item icon="photo-o" :text="nav.name" v-for="(nav, _index) in item" :key="_index" @click="locationTo(nav)">
<img :src="nav.icon_url" class="nav-icon" slot="icon" />
</van-grid-item>
</van-grid>
</van-swipe-item>
</van-swipe>
<div class="user-dynamic-container">
<div class="user-dynamic-container" v-if="data.order_data.length > 0">
<van-swipe vertical loop :autoplay="3000" :touchable="false">
<van-swipe-item
v-for="order in data.order_data"
:key="order.id"
>
<van-swipe-item v-for="order in data.order_data" :key="order.id">
<user-dynamic :data="order"></user-dynamic>
</van-swipe-item>
</van-swipe>
@@ -54,20 +31,12 @@
<div class="panel">
<div class="panel-head">
<span class="title">功德无量</span>
<arrow-more @click="$router.push({ name: 'merit-list', query: { temple_id: query.temple_id} })"></arrow-more>
<arrow-more @click="$router.push({ name: 'merit-list', query: { temple_id: query.temple_id } })"></arrow-more>
</div>
<div class="panel-body">
<van-swipe
class="merit-group"
:width="140"
:loop="false"
:show-indicators="false"
>
<van-swipe-item
v-for="goods in data.common_data"
:key="goods.id"
>
<div class="merit">
<van-swipe class="merit-group" :width="140" :loop="false" :show-indicators="false">
<van-swipe-item v-for="goods in data.common_data" :key="goods.id">
<div class="merit" @click="onToGoods(goods)">
<img :src="goods.cover_url" alt="" />
<p class="title">{{ goods.alias }}</p>
</div>
@@ -76,13 +45,13 @@
</div>
</div>
<div class="divider"></div>
<div class="panel">
<div class="panel" v-if="data.dynamic_data.length > 0">
<div class="panel-head">
<span class="title">进展状态</span>
<arrow-more @click="onMoreProcess"></arrow-more>
</div>
<div class="panel-body">
<buddha-process v-for="process in data.dynamic_data" :key="process.id" :data="process" ></buddha-process>
<buddha-process v-for="process in data.dynamic_data" :key="process.id" :data="process"></buddha-process>
<div class="process-more" @click="onMoreProcess">
<span>查看更多进展状态</span>
<i class="iconfont icon-arrow-right"></i>
@@ -95,13 +64,13 @@
</template>
<script>
import { getTempleIndex } from "@/api";
import { getTempleIndex } from '@/api';
export default {
data() {
return {
query: this.$route.query,
value: "",
value: '',
data: null,
};
},
@@ -109,6 +78,15 @@ export default {
this.getTempleIndex();
},
methods: {
onToGoods(goods){
this.$router.push({
name: 'goods-detail',
query: {
goods_id: goods.goods_id,
temple_id: goods.temple_id
}
})
},
locationTo(nav) {
window.location.href = nav.url;
},
@@ -119,14 +97,14 @@ export default {
},
onMoreProcess() {
this.$router.push({
name: "buddha-activity",
name: 'buddha-activity',
});
},
onSearch(){
this.$router.push({
name: 'temple-list',
query: {}
})
onSearch() {
this.$router.push({
name: 'temple-list',
query: {},
});
},
sliceNav(navData) {
const nav = [];
@@ -202,7 +180,9 @@ export default {
}
}
}
.merit-group{
padding-bottom: .4rem;
}
.merit {
width: 3.39rem;
height: 3.39rem;
src/pages/pay/index.vue
+26 -14
View File
@@ -6,8 +6,13 @@
<div class="pay-info">
<h1 class="amount"><b>￥</b>{{query.amount}}</h1>
<div class="order-info">
<h3 class="title">{{query.title}}</h3>
<p class="desc">{{query.subTitle}}</p>
<h3 class="goods_title">{{query.title}}</h3>
<div class="desc">
<!-- subTitle: 规格名称 -->
<span>{{query.subTitle}}</span>
<span>数量：x{{query.quantity}}</span>
</div>
</div>
<div class="pay-type">
@@ -34,7 +39,7 @@
</template>
<script>
import { createFriendlyDayOrder, createBrickDayOrder, createPay, createMeritBoxOrder } from '@/api';
import { createFriendlyDayOrder, createBrickDayOrder, createPay, createMeritBoxOrder, createCommonOrder } from '@/api';
import { requestPayment } from '@/common/wechat-web';
export default {
@@ -49,7 +54,7 @@ export default {
methods: {
async onCreatePayOrder(){
// 创建日行一善支付订单
if(this.query.goods_type === '-1'){
if(this.query.goods_type == '1'){
const request = {
...this.query,
@@ -59,13 +64,13 @@ export default {
return
}
// 创建填砖加瓦订单
if(this.query.goods_type === '-2'){
if(this.query.goods_type == '2'){
const request = {
...this.query,
}
const order = await createBrickDayOrder(request)
this.onPayment(order)
await this.onPayment(order)
return
}
@@ -80,19 +85,24 @@ export default {
return
}
// const request = {
// ...this.query
// }
// 创建通用商品订单
if(this.query.from === 'common_goods'){
const request = {
...this.query,
price: this.query.amount,
buy_quantity: this.query.quantity
}
// createCommonOrder(request)
const order = await createCommonOrder(request);
await this.onPayment(order);
}
},
async onPayment(order){
console.log(order)
const result = await createPay(order.id);
const payResult = await requestPayment(result)
console.log(payResult)
this.$router.push({
await this.$router.push({
name: 'pay-result',
query: {
...result,
@@ -122,14 +132,16 @@ export default {
.order-info{
margin-top: 1rem;
padding: .4rem;
.title{
.goods_title{
font-size: .4rem;
font-weight: bold;
}
.desc{
padding-top: .3rem;
padding-top: .5rem;
color: #666;
font-size: .35rem;
display: flex;
justify-content: space-between;
}
}
.pay-type{
src/pages/temple-list/index.vue
+70 -29
View File
@@ -8,7 +8,7 @@
</template>
</van-search>
<div class="operation-bar">
<div class="position">
<div class="position" @click="onGetLocation">
<span class="iconfont icon-dingwei"></span>
<span>重新定位</span>
</div>
@@ -22,23 +22,26 @@
</div>
</div>
</div>
<div class="temple-list-container" :style="{height: containerHeight + 'px'}" >
<div >
<!-- <div class="temple-container content" v-if="mode === 'list'">
<temple v-for="i in 10" :key="i"></temple>
</div> -->
<scroll-view
v-if="mode === 'list'"
class="temple-container content"
:height="containerHeight - 20"
pulldown
pullup
@pulldown="refresh"
@pullup="loadMore"
>
<temple v-for="temple in templeList" :key="temple.id" :data="temple"></temple>
</scroll-view>
<div class="temple-map" id="container" v-show="mode === 'map'">
<div class="temple-list-container" :style="{height: containerHeight + 'px'}" v-if="mode === 'list'" >
<scroll-view
class="temple-container content"
:height="containerHeight - 20"
ref="scroll"
pulldown
pullup
@pulldown="refresh"
@pullup="loadMore"
>
<temple v-for="temple in templeList" :key="temple.id" :data="temple"></temple>
</scroll-view>
</div>
<div class="temple-map" v-show="mode === 'map'" :style="{height: containerHeight + 'px'}">
<div id="container" style="height: 100%"></div>
</div>
</div>
</div>
@@ -47,6 +50,7 @@
<script>
import { getTempleList } from '@/api';
import TMAPLoader from '@/common/tmap';
import { getLocation } from '@/common/wechat-web';
export default {
data(){
@@ -57,42 +61,79 @@ export default {
page: 1,
templeList: [],
lng: '',
lat: ''
lat: '',
map: null,
}
},
inject: ['root', 'tabbar'],
computed: {
scroll(){
return this.$refs.scroll
}
},
mounted(){
this.$nextTick(() => {
const { offsetHeight } = this.root.$refs.tabbar.$el;
this.containerHeight = window.innerHeight - this.$refs.topbar.offsetHeight - offsetHeight - 20;
})
TMAPLoader.load({
key: process.env.VUE_APP_TMAP_KEY
}).then(TMap => {
console.log(TMap)
var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地图
var map = new TMap.Map("container", {
zoom:12,//设置地图缩放级别
center: center//设置地图中心点坐标
});
console.log(map)
})
this.getTempleList();
},
methods: {
initMap(){
TMAPLoader.load({
key: process.env.VUE_APP_TMAP_KEY
}).then(TMap => {
var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地图
var map = new TMap.Map("container", {
zoom:12,//设置地图缩放级别
center: center//设置地图中心点坐标
});
this.map = map;
this.setMarker(TMap)
})
},
setMarker(TMap){
const markers = []
this.templeList.forEach(temple => {
console.log(temple)
const infoWindow = new TMap.InfoWindow({
map: this.map,
position: new TMap.LatLng(temple.lat, temple.lng),
content: temple.unit_name
})
markers.push(infoWindow)
})
this.markers = markers;
},
async getTempleList(){
const res = await getTempleList(this.keyword, this.lng, this.lat, this.page);
console.log(res)
if(this.page === 1){
this.total = res.total;
this.templeList = res.results;
} else {
this.templeList = this.templeList.concat(res.results);
}
if(this.mode === 'map'){
this.setMarker();
}
this.$nextTick(() => {
this.scroll.refresh();
})
},
onGetLocation(){
getLocation().then(res => {
this.lng = res.longitude;
this.lat = res.latitude;
this.getTempleList();
})
},
onModeSwitch(mode){
this.mode = mode;
if(mode === 'map' && !this.map){
this.initMap();
}
},
onCancel(){
this.keyword = ''
src/pages/user/certificate/index.vue
+34 -8
View File
@@ -1,11 +1,11 @@
<template>
<div class="user-certificate">
<div class="certificate" v-for="i in 10" :key="i">
<img class="img" src="" alt="">
<div class="user-certificate" :style="style">
<div class="certificate" v-for="(li, index) in list" :key="index">
<img class="img" :src="li.picture_url" alt="">
<div class="info">
<h3 class="title">为佛像贴金身，每日功德</h3>
<span class="date">2021-10-3</span>
<p class="number">第<span>12</span>份功德</p>
<h3 class="title">{{li.goods_name}}</h3>
<span class="date">{{li.date}}</span>
<p class="number">第<span>{{li.count}}</span>份功德</p>
<div class="download">
<span class="iconfont icon-24px"></span>
<p>下载功德证书</p>
@@ -17,17 +17,43 @@
</template>
<script>
export default {
import { getCertList } from '@/api';
export default {
data(){
return {
list: [],
bg: ''
}
},
created(){
this.getCertList();
},
computed: {
style(){
return {
background: `#f5f5f5 url(${this.bg}) center top no-repeat`
}
}
},
methods: {
async getCertList(){
const res = await getCertList();
console.log(res)
this.list = res.results;
this.bg = res.cert_bg;
}
}
}
</script>
<style lang="scss">
.user-certificate{
min-height: 100vh;
// max-height: 100vh;
background: #f5f5f5 url('https://img1.baidu.com/it/u=3658625472,1613220951&fm=26&fmt=auto') center top no-repeat;
background-size: contain;
padding-top: 4.67rem;
padding-bottom: .5rem;
.certificate{
display: flex;
font-size: .37rem;
src/pages/user/course/detail/index.vue
+19 -14
View File
@@ -64,28 +64,23 @@
<div class="head">
<span class="title">排行榜</span>
<div class="list">
<span class="current">实时</span>
<span>月榜</span>
<span>总榜</span>
<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="i in 10" :key="i">
<img
src="https://img0.baidu.com/it/u=199023397,1701150760&fm=26&fmt=auto"
alt=""
/>
<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>李晓华</span>
<span>湖南长沙</span>
<span>{{course.nickname}}</span>
<span></span>
</div>
<p>3</p>
<p>{{course.rank}}</p>
</div>
</div>
<div class="result">
<p class="money">23 遍</p>
<p class="money">{{course.sum_count}} 遍</p>
</div>
</div>
</div>
@@ -109,6 +104,12 @@ export default {
return {
query,
data: null,
type_id: 1,
types: [
{ id: 1, name: '实时' },
{ id: 2, name: '月榜' },
{ id: 3, name: '总榜' },
]
}
},
mounted(){
@@ -116,10 +117,14 @@ export default {
},
methods: {
async getCourseDetail(){
const res = await getCourseDetail(this.query.id);
const res = await getCourseDetail(this.query.id, this.type_id);
this.data = res;
},
onToCount(){
onNav(li){
this.type_id = li.id;
this.getCourseDetail();
},
onToCount(){
this.$router.push({
name: 'user-course-count',
query: { id: this.data.id }
src/pages/user/customer/index.vue
+44 -5
View File
@@ -7,7 +7,16 @@
<p>使用寺院联盟遇到任何疑问都可以联系我</p>
</div>
</div>
<div class="customer-type-group">
<div class="customer-type-group" v-for="(cus, index) in list" :key="index">
<img :src="cus.icon_url" alt="">
<div class="info">
<h1>{{cus.title}} <span v-if="cus.title == '客服微信号'" class="wechat-account">{{cus.value}}</span></h1>
<p v-html="cus.content"></p>
</div>
<a class="phone" :href="'tel:'+cus.value" v-if="cus.title === '电话客服'"></a>
</div>
<!-- <div class="customer-type-group">
<img src="https://img1.baidu.com/it/u=2403234292,1073721747&fm=26&fmt=auto" alt="">
<div class="info">
<h1>在线客服</h1>
@@ -28,14 +37,32 @@
<h1>客服微信号</h1>
<p>点击即可复制微信号，在微信中添加好友，我们会及时与您联系</p>
</div>
</div>
<img class="qrcode" src="https://login.weixin.qq.com/qrcode/4eUoxEzS0A==" alt="">
</div> -->
<img class="qrcode" :src="qrcode" alt="">
</div>
</template>
<script>
export default {
import { getCustomerList } from '@/api';
export default {
data(){
return {
qrcode: '',
list: [],
}
},
created(){
this.getCustomerList();
},
methods: {
async getCustomerList(){
const res = await getCustomerList();
console.log(res)
this.list = res.list;
this.qrcode = res.platform_code;
}
}
}
</script>
@@ -76,11 +103,19 @@ export default {
border-radius: .27rem;
padding:.2rem .4rem ;
align-items: center;
position: relative;
img{
width: 1.07rem;
height: 1.07rem;
border-radius: 50%;
margin-right: .13rem;
margin-right: .3rem;
}
.phone{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.info{
flex: 1;
@@ -88,6 +123,9 @@ export default {
h1{
font-size: .4rem;
margin-bottom: .4rem;
.wechat-account{
color: rgb(167, 54, 54);
}
}
p{
color: #aaa;
@@ -98,6 +136,7 @@ export default {
}
.qrcode{
width: 4rem;
height: 4rem;
display: block;
margin-left: auto;
margin-right: auto;
src/pages/user/index.vue
+13
View File
@@ -31,6 +31,7 @@
<div class="tab-order" @click="$router.push('/user/order?current=1')">
<span class="iconfont icon-qianbao"></span>
<p>待支付</p>
<b class="badge">1</b>
</div>
<div class="tab-order" @click="$router.push('/user/order?current=2')">
<span class="iconfont icon-dingdanchulizhong"></span>
@@ -198,6 +199,7 @@ export default {
text-align: center;
font-size: .37rem;
color: #555;
position: relative;
.iconfont{
font-size: .67rem;
color: #555;
@@ -207,6 +209,17 @@ export default {
font-size: .35rem;
color: #666;
}
.badge{
font-size: .3rem;
background: red;
padding: 2px 6px;
display: inline-block;
color: white;
position: absolute;
right: -5px;
top: -5px;
border-radius: 12px;
}
}
}
}
src/pages/user/order/index.vue
+25 -34
View File
@@ -4,57 +4,48 @@
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
</div>
<div class="temple-list-container" :style="{height: containerHeight + 'px'}">
<van-tabs v-model="activeName">
<van-tab title="全部" name="a">
<van-tabs v-model="status" @change="onOrderChange">
<van-tab :title="order.name" :name="order.status" v-for="order in orders" :key="order.status">
<div class="order-container">
<order></order>
<order></order>
<order></order>
<order></order>
<order></order>
<order></order>
<order></order>
<order></order>
<order></order>
<order v-for="li in order.list" :key="li.id" :data="li"></order>
</div>
</van-tab>
<van-tab title="待支付" name="b">待支付</van-tab>
<van-tab title="处理中" name="c">处理中</van-tab>
<van-tab title="已处理" name="c">已处理</van-tab>
</van-tabs>
</div>
</div>
</template>
<script>
import TMAPLoader from '@/common/tmap';
import { getOrderList } from '@/api'
export default {
data(){
return {
containerHeight: 0,
keyword: '',
activeName: ''
containerHeight: window.innerHeight,
status: '0',
orders: [
{ status: 0, name: '全部', list: [] },
{ status: 1, name: '待支付', list: [] },
{ status: 2, name: '处理中', list: [] },
{ status: 3, name: '已处理', list: [] },
]
}
},
inject: ['root', 'tabbar'],
mounted(){
this.$nextTick(() => {
const { offsetHeight } = this.root.$refs.tabbar.$el;
this.containerHeight = window.innerHeight - this.$refs.topbar.offsetHeight - offsetHeight - 20;
})
TMAPLoader.load({
key: process.env.VUE_APP_TMAP_KEY
}).then(TMap => {
console.log(TMap)
var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地图
var map = new TMap.Map("container", {
zoom:12,//设置地图缩放级别
center: center//设置地图中心点坐标
});
console.log(map)
})
this.getOrderList();
},
methods: {
async getOrderList(){
const res = await getOrderList(this.status);
console.log(res)
const current = this.orders.find(item => item.status === this.status);
current.list = res.results
},
onOrderChange(e){
console.log(e, this.status)
this.getOrderList();
}
}
}
</script>