添加佛前供灯

This commit is contained in:
2022-03-09 10:56:14 +08:00
parent 442fea23f5
commit c0b25db38d
32 changed files with 1095 additions and 49 deletions
+2 -5
View File
@@ -37,7 +37,6 @@ export default {
parentHeight: this.minHeight - this.tabHeight
};
},
components: {},
watch: {
'$route': {
handler(val) {
@@ -51,16 +50,14 @@ export default {
this.$nextTick(() => {
const { tabbar } = this.$refs;
this.tabHeight = tabbar ? tabbar.$el.offsetHeight - safeAreaInsets.bottom: 0;
console.log(this.tabHeight, )
})
},
immediate: true,
}
},
mounted(){
console.log('safe-area-inset-bottom', safeAreaInsets.bottom)
console.log('launch', this.$route.query)
this.$store.commit('SET_LAUNCH', this.$route.query)
},
computed: {
showTabbar() {
+18 -2
View File
@@ -56,12 +56,18 @@ const postMobileCode = (mobile, code) => service.post('/api/sms-validate', { mob
// 添砖加瓦日行一善商品
const getGoodsDetail = (goods_type, goods_id, temple_id) => service.get(`/api/${goods_type}/get-info?id=${goods_id}&temple_id=${temple_id}`);
// 佛前供灯商品
const getGoodsLightDetail = (goods_type, goods_id, temple_id) => service.get(`/api/temple/light?id=${goods_id}&temple_id=${temple_id}`);
// 创建日行一善商品订单
const createFriendlyDayOrder = data => service.post('/api/order/create-friendly', data);
//创建通用商品订单
const createCommonOrder = data => service.post(`/api/order/create-common`, data);
//创建佛前供灯订单
const createLightOrder = data => service.post(`/api/order/create-light`, data);
// 创建添砖加瓦订单
const createBrickDayOrder = data => service.post('/api/order/create-tile', data);
@@ -108,7 +114,7 @@ const getRandMoney = () => service.get(`/api/order/get-rand-money`)
const postCount = (course_id, data) => service.put(`/api/course/count/${course_id}`, data);
// 功德箱
const getMeritBox = (temple_id = '', type, page, size = 10) => service.get(`/api/temple/get-merit-box?temple_id=${temple_id}&type=${type}&page=${page}&size=${size}`,)
const getMeritBox = (temple_id = '', type, page, size = 10, domain = '3') => service.get(`/api/temple/get-merit-box?temple_id=${temple_id}&type=${type}&page=${page}&size=${size}&domain=${domain}`,)
// 添加功德箱订单
const createMeritBoxOrder = data => service.post(`/api/order/create-merit-box`, data)
@@ -125,6 +131,9 @@ const getCommonGoods = (temple_id = '', page, size = 10) => service.get(`/api/co
// 获取订单榜
const getOrderCompare = (temple_id = '1', type = '', goods_id = '', goods_type = '') => service.get(`/api/order/get-compare?temple_id=${temple_id}&type=${type}&goods_id=${goods_id}&goods_type=${goods_type}`);
// 根据agent_id获取订单榜
const getOrderCompareByAgentId = (agent_id = '1', type = '', goods_id = '', goods_type = '') => service.get(`/api/order/get-compare?agent_id=${agent_id}&type=${type}&goods_id=${goods_id}&goods_type=${goods_type}`);
// 寺院列表
const getTempleList = (keywords = '', lng = '', lat = '', page = 1, size = 10) => service.get(`/api/temple/get-List?keywords=${keywords}&lng=${lng}&lat=${lat}&page=${page}&size=${size}`)
@@ -149,6 +158,9 @@ const getHotWords = () => service.get(`/api/keywords/get-list`);
// 获取入驻模板
const getStationTemplate = template_id => service.get(`/api/temple-template-share?id=${template_id}`);
// 平台首页
const getPlatformHome = agent_id => service.get(`/api/home?agent_id=${agent_id}`)
export {
getHotWords,
getMonkAppellation,
@@ -161,6 +173,7 @@ export {
certifyMonk,
getUserData,
getGoodsDetail,
getGoodsLightDetail,
getDreamList,
getMeritName,
createFriendlyDayOrder,
@@ -181,14 +194,17 @@ export {
getMeritBox,
createMeritBoxOrder,
createCommonOrder,
createLightOrder,
getDynamicData,
getDynamicDetail,
getCommonGoods,
getOrderCompare,
getOrderCompareByAgentId,
getMyCollectionList,
getOrderList,
getOrder,
getCustomerList,
getCertList,
getStationTemplate
getStationTemplate,
getPlatformHome
}
+1 -1
View File
@@ -30,7 +30,7 @@ import {
ShareSheet,
Loading,
Dialog,
Icon
Icon,
} from "vant";
Vue.use(NavBar);
+11 -7
View File
@@ -20,14 +20,11 @@
</template>
<script>
import { getOrderCompare } from "@/api";
import { getOrderCompare, getOrderCompareByAgentId } from "@/api";
export default {
name: 'thanks-giving',
props: {
templeId: {
type: [String, Number],
default: ''
},
templeId: [String, Number],
goodsType: {
type: String,
},
@@ -36,7 +33,9 @@ export default {
},
typeId: {
type: [String, Number]
}
},
agentId: [String, Number],
},
data(){
@@ -65,7 +64,12 @@ export default {
this.getOrderCompare();
},
async getOrderCompare(){
const res = await getOrderCompare(this.templeId || '1', this.type_id, this.goodsId, this.goodsType)
let res;
if(this.templeId){
res = await getOrderCompare(this.templeId || '1', this.type_id, this.goodsId, this.goodsType)
} else {
res = await getOrderCompareByAgentId(this.agentId, this.type_id, this.goodsId, this.goodsType)
}
const current = this.type_nav.find(item => item.id === this.type_id);
current.list = res.list
},
+13 -5
View File
@@ -38,6 +38,7 @@ export default {
},
data() {
return {
loading: false,
name: '',
names: [],
selectedName: [],
@@ -46,7 +47,6 @@ export default {
watch: {
visible(value){
if(value){
this.selectedName = this.selected.map(v => v.id)
}
}
@@ -76,7 +76,15 @@ export default {
const data = await getMeritName();
this.names = data;
},
onConfirmMeritName() {
async onConfirmMeritName() {
if(this.name){
const name = this.name;
await this.addName(this.name);
const selected = this.names.filter(item => item.name === name);
this.onClose();
this.$emit('change', selected);
return ;
}
const selected = this.names.filter(item => this.selectedName.includes(item.id));
this.onClose();
this.$emit('change', selected);
@@ -124,14 +132,14 @@ export default {
height: 30vh;
span {
display: inline-block;
padding: .2rem .3rem;
padding: .3rem .6rem;
background: #fff;
border: 1px solid #ddd;
border-radius: .08rem;
position: relative;
margin-right: .2rem;
margin-bottom: .2rem;
font-size: .35rem;
font-size: .4rem;
position: relative;
vertical-align: top;
@@ -139,7 +147,7 @@ export default {
position: absolute;
right: -.25rem;
top: -.25rem;
font-size: .5rem;
font-size: .7rem;
color: red;
}
input[type=checkbox]{
+3
View File
@@ -4,9 +4,11 @@ import globalMixin from './mixins';
import App from './App.vue'
import delay from 'delay'
import router from './router';
import store from './store';
import '@/assets/js/flexable.js';
import './common/vant';
import './components/index'
// swiper 样式全局引入, 组件页面引入。 Ref: https://www.jianshu.com/p/03f9fa94c474
import 'swiper/css/swiper.css';
import config from './config';
@@ -18,6 +20,7 @@ Vue.config.productionTip = false
Vue.prototype.$delay = delay;
Vue.prototype.$config = config;
Vue.prototype.$utils = utils;
Vue.prototype.$store = store;
Vue.component('mescroll-vue', MescrollVue)
new Vue({
+8 -8
View File
@@ -9,14 +9,14 @@
</div>
</div>
<div class="field">
<label class="required">心愿</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>
</div>
</div>
<div class="field">
<label class="required">手机号码</label>
<label >手机号码</label>
<div class="input-wrapper">
<input class="input" v-model="mobile" type="tel" placeholder="请填写手机号码">
</div>
@@ -79,12 +79,12 @@ export default {
if(!this.meritId){
return this.$toast.fail('请填写功德芳名');
}
if(!this.dream){
return this.$toast.fail('请填写心愿');
}
if(!this.mobile){
return this.$toast.fail('请填写功德主手机号');
}
// if(!this.dream){
// return this.$toast.fail('请填写心愿');
// }
// if(!this.mobile){
// return this.$toast.fail('请填写功德主手机号');
// }
console.log('query', {
...this.$route.query,
dream: this.dream,
+98 -4
View File
@@ -14,6 +14,13 @@
<span>已有{{data.sales || 0}}人参与</span>
</div>
</div>
<div class="temple-info">
<img class="temple-img" :src="data.cover_url" alt="">
<div class="temple-name">
<h4 class="name">铜梁古佛寺</h4>
<p class="visitor">已有 <span>1525</span> 人到访过</p>
</div>
</div>
<div class="divider"></div>
<div class="panel">
<div class="panel-head">
@@ -49,7 +56,7 @@
</ul>
</div>
<transition>
<template>
<template >
<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>
@@ -82,6 +89,7 @@ export default {
},
data(){
return {
result: 'a',
showAnyAmount: false,
paddingBottom: 0,
fixedBottomHeight: 0,
@@ -130,7 +138,8 @@ export default {
return (parseInt(this.priceUnit * 100, 10) * this.quantity * 30) / 100
}
return (parseInt(this.priceUnit * 100, 10) * this.quantity) / 100;
}
},
},
mounted(){
this.getGoodsDetail('common');
@@ -212,6 +221,7 @@ export default {
</script>
<style lang="scss">
$lightWidth: 1.3rem;
.goods-detail{
.goods-content{
padding-left: .3rem;
@@ -221,6 +231,65 @@ export default {
font-size: .35rem;
}
}
.light-container{
padding-left: .4rem;
padding-right: .4rem;
max-height: 10rem;
overflow: auto;
.light-wrapper{
border-top: 1px solid #ddd;
h1{
font-size: .4rem;
margin-top: .4rem;
margin-bottom: 3px;
}
.light-group{
img.light-icon{
width: $lightWidth;
height: $lightWidth;
vertical-align: top;
}
span{
font-size: .4rem;
display: block;
text-align: center;
padding-top: .3rem;
}
}
.van-swipe__indicators {
bottom: 0rem;
.van-swipe__indicator {
width: 20px;
height: 2px;
border-radius: 10px;
background: #bbb;
}
.van-swipe__indicator--active {
background: $primary-color;
}
}
}
.light-size,
.light-count{
font-size: .4rem;
display: flex;
justify-content: space-between;
margin-top: .6rem;
align-items: center;
margin-bottom: .65rem;
span{
color: black;
opacity: 1;
}
}
.light-size{
margin-top: 1.1rem;
}
.light-count{
align-items: center;
margin-bottom: .2rem;
}
}
.support{
margin-bottom: .5rem;
.support-head{
@@ -257,13 +326,13 @@ export default {
}
.monk-profile{
padding: .4rem;
margin-bottom: .53rem;
.position{
font-size: .5rem;
padding-top: .2rem;
color: #19282E;
line-height: 1.3;
}
.introduction{
font-size: .37rem;
margin-top: .4rem;
@@ -287,7 +356,32 @@ export default {
color: #666;
font-size: .28rem;
}
}
}
.temple-info{
border-top: 1px solid #ddd;
padding: .3rem .4rem;
display: flex;
align-items: center;
.temple-img{
width: 1rem;
height: 1rem;
border-radius: 1rem;
margin-right: .3rem;
}
.temple-name{
flex: 1;
.name{
font-size: .35rem;
color: #333;
}
.visitor{
color: #666;
font-size: .3rem;
margin-top: .2rem;
display: block;
}
}
}
.detail-button-group{
text-align: center;
position: fixed;
@@ -0,0 +1,202 @@
<template>
<div>
<van-cell-group>
<van-cell title="功德芳名" :value="person.name" is-link @click="onAction('name')"/>
<van-cell title="心愿" :value="dream" is-link @click="onAction('desire')" />
</van-cell-group>
<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">
<input class="input" type="text" v-model="name" placeholder="请输入功德主姓名">
<button class="btn" @click="addName">添加</button>
</div>
<div class="name-group">
<span class="name" v-for="(name, index) in names" :key="name.id" @click="onSelectName(name)">
{{name.name}}
<i class="iconfont icon-biaodankongjianshanchu" @click.stop="onDeleteName(name, index)"></i>
</span>
</div>
<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="dream" type="text" maxlength="50" placeholder="请输入您的心愿" />
<span>{{dream.length}}/50</span>
</div>
<div class="desire-quike">
<div class="bar">
<span>快捷输入</span>
<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="desire = dream">{{dream}}</span>
</div>
</div>
<button class="confirm" @click="onConfirmDream">确认</button>
</div>
</van-popup>
</div>
</template>
<script>
import { getDreamList, getMeritName } from '@/api';
export default {
data(){
return {
checked: false,
showDialog: false,
actionName: 'name',
person: {},
name: '',
dream: '',
desire: '',
names: [],
dreamList: []
}
},
mounted(){
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 getName() {
const data = await getMeritName();
this.names = data;
},
//获取心愿列表
async getDreamList(){
const list = await getDreamList();
console.log(list)
this.dreamList = list;
}
}
};
</script>
<style lang="scss">
.add-merit-name{
padding: .4rem;
.title{
font-size: .4rem;
margin-bottom: .4rem;
}
.add-name{
display: flex;
.input{
flex: 1;
height: .8rem;
line-height: .8rem;
padding-left: .3rem;
border: 1px solid #ddd;
border-radius: .11rem;
font-size: .4rem;
}
.btn{
padding: .2rem .6rem;
background: $primary-color;
color: white;
border: 1px solid $primary-color;
font-size: .4rem;
border-radius: .11rem;
margin-left: .3rem;
}
}
.name-group{
padding: .5rem 0;
span{
display: inline-block;
padding: .2rem .3rem;
background: #fff;
border: 1px solid #ddd;
border-radius: .08rem;
position: relative;
margin-right: .4rem;
margin-bottom: .3rem;
font-size: .35rem;
vertical-align: top;
.iconfont{
position: absolute;
right: -.25rem;
top: -.25rem;
font-size: .5rem;
color: red;
}
}
}
.desire-input{
border: 1px solid #ddd;
border-radius: .13rem;
overflow: hidden;
.desire-textarea{
border: none;
display: block;
font-size: .35rem;
width: calc(100% - .5rem);
padding: .25rem;
height: 2rem;
resize: none;
}
span{
display: block;
text-align: right;
padding: .2rem;
font-size: .35rem;
}
}
.desire-quike{
margin-top: 1rem;
.bar{
display: flex;
justify-content: space-between;
align-items: center;
font-size: .4rem;
margin-bottom: .3rem;
.update{
font-size: .35rem;
color: $primary-color;
}
}
.name-group{
padding: .1rem 0;
.name{
}
}
}
.confirm{
background: $primary-color;
color: white;
border: 1px solid $primary-color;
width: 3rem;
padding: .3rem 0;
border-radius: .07rem;
display: block;
margin: 0 auto;
font-size: .4rem;
}
}
</style>
@@ -0,0 +1,86 @@
<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>
<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]
},
data: {
type: Object,
},
number: Number,
},
data(){
return {
num: 0,
is_customized: false,
}
},
watch: {
number: {
handler(val) {
this.num = val;
}
}
},
methods: {
onChangeNumber(value){
this.$emit('update:number', value)
},
onSelectSpec(spec){
this.$emit('input', spec.id)
},
onAnyAmount(){
this.$emit('input', 'is_customized')
}
}
};
</script>
<style lang="scss">
.spec-group{
padding: .2rem .4rem;
max-height: 50vh;
overflow: scroll;
li{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 .4rem;
font-size: .4rem;
height: 1rem;
& ~ li{
margin-top: .3rem;
}
}
li.active{
border-color: $primary-color;
color: $primary-color;
}
}
</style>
+528
View File
@@ -0,0 +1,528 @@
<template>
<div class="goods-detail" v-if="data" :style="{paddingBottom: paddingBottom + 'px'}">
<swiper class="swiper-container" :options="swiperOption">
<swiper-slide v-for="(cover, index) in data.details.covers" :key="index">
<div style="height: 100vw;" class="picture">
<img :src="cover" alt="">
</div>
</swiper-slide>
</swiper>
<div class="monk-profile">
<h1 class="position">{{data.details.title}}</h1>
<div class="bar">
<span class="status">进行中</span>
<span>已有{{data.details.sales || 0}}人参与</span>
</div>
</div>
<div class="temple-info">
<img class="temple-img" :src="data.temple.picture" alt="">
<div class="temple-name">
<h4 class="name">{{data.temple.unit_name}}</h4>
<p class="visitor">已有 <span>{{data.temple.visit}}</span> 人到访过</p>
</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>
<ul class="external">
<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 v-for="pay in payList" :key="pay.id" :data="pay"></user-merit>
</div>
</div>
<fixed-bottom ref="fixedBottom">
<button class="merit-button" @click="showSpec = true">点击供灯</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">
<li :class="[ current === 0 && 'current']">选择类型</li>
<li :class="[ current === 1 && 'current']">填写信息</li>
<li :class="[ current === 2 && 'current']">参与成功</li>
</ul>
</div>
<transition>
<div class="light-container">
<div class="light-wrapper">
<h1>选择祈福类型</h1>
<div class="light-group">
<van-swipe :loop="false">
<van-swipe-item v-for="(item, index) in lights" :key="index">
<van-grid :border="false" class="home-grid-nav" column-num="5">
<van-grid-item icon="photo-o" :text="nav.name" v-for="(nav, _index) in item" :key="_index" @click="onSelectLight(nav)">
<div class="light" :class="[currentLight.id === nav.id && 'current-light']">
<img :src="nav.picture" class="light-icon" />
<span class="light-name">{{nav.name}}</span>
</div>
</van-grid-item>
</van-grid>
</van-swipe-item>
</van-swipe>
</div>
</div>
<div class="light-size">
<span>灯型</span>
<van-radio-group v-model="currentLightSize" direction="horizontal">
<van-radio :name="size.id" v-for="size in currentLight.children" :key="size.id" shape="square">{{size.name}}</van-radio>
</van-radio-group>
</div>
<div class="light-count">
<span>数量</span>
<van-stepper v-model="buy_quantity" :min="1" input-width="40px" button-size="30px" />
</div>
</div>
</transition>
<div class="next-group">
<span class="total">合计:<em>¥{{lightSize.price || 0}}</em></span>
<button class="next" @click="onNextStep">下一步</button>
</div>
</div>
</van-popup>
<!-- 随喜金额-->
<random-money v-if="showAnyAmount" :value.sync="showAnyAmount" @change="onReceiveAnyAmount"></random-money>
</div>
</template>
<script>
import 'swiper/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { getGoodsLightDetail, getOrderCompare } from '@/api';
export default {
components: {
swiper,
swiperSlide,
},
data(){
return {
result: [],
showAnyAmount: false,
paddingBottom: 0,
fixedBottomHeight: 0,
query: this.$route.query,
showSpec: false,
checked: false,
current: 0,
data: null,
value: '',
spec_id: '',
step: 0,
quantity: 1,
dreamInfo: null,
anyPrice: 0, // 随喜金额
swiperOption: {
autoplay: 8000,
initialSlide: 1,
loop: false,
pagination: '.swiper-pagination',
onSlideChangeEnd: swiper => {
console.log('onSlideChangeEnd', swiper.realIndex)
}
},
listType: 1,
listTypes: [
{ id: 1, name: '实时', },
{ id: 2, name: '月榜', },
{ id: 3, name: '总榜', },
],
payList: [],
currentLight: null,
currentLightPrice: 0,
currentLightSize: '',
buy_quantity: 1, // 购买数量
}
},
computed: {
lightSize(){
const { currentLight, currentLightSize } = this;
if(!this.currentLightSize) return 0;
return currentLight.children.find(item => item.id === currentLightSize);
},
lights(){
const data = this.data;
if(!data) return [];
const { goods } = data;
const len = Math.ceil(goods.length / 15);
const lights = [];
for(let i = 0; i < len; i++){
lights.push(goods.slice(0 * i, 0 * i + 15))
}
return lights;
}
},
mounted(){
this.getGoodsLightDetail('common');
},
methods: {
// 选择供灯种类
onSelectLight(light){
this.currentLight = light;
this.currentLightSize = ''
},
// 接收随喜金额
onReceiveAnyAmount(anyObj){
this.anyPrice = anyObj.money;
this.onToFillMeritName();
},
// dreamInfo: 心愿信息
onDreamInfoChange(dreamInfo){
this.dreamInfo = dreamInfo;
},
onNextStep(){
if(!this.currentLightSize){
this.$toast.fail('请选择灯型')
return;
}
this.current += 1;
if(this.current > 0){
this.onToFillMeritName();
}
},
onToFillMeritName(){
this.$router.push({
name: 'fill-name',
query: {
...this.query,
goods_id: this.currentLight.id,
spec_id: this.lightSize.id,
friendly_time: this.number,
quantity: this.quantity,
title: this.data.details.title,
subTitle: this.currentLight.name + ':'+this.lightSize.name,
amount: this.lightSize.price,
from: 'goods_light', // 标识为通用商品
}
})
},
async getGoodsLightDetail(type){
const { goods_id, temple_id } = this.$route.query;
const response = await getGoodsLightDetail(type, goods_id, temple_id);
this.data = response;
this.currentLight = response.goods[0];
await this.getPayRecords({ id: 1});
this.$nextTick(() => {
this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight()
})
this.wechatReady({
...this.data.shareConfig,
link: location.href
})
},
// 获取感恩功德
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.list;
},
}
}
</script>
<style lang="scss">
$lightWidth: 1.3rem;
.goods-detail{
.goods-content{
padding-left: .3rem;
padding-right: .3rem;
* {
max-width: 100%;
font-size: .35rem;
}
}
.light-container{
padding-left: .4rem;
padding-right: .4rem;
max-height: 10rem;
overflow: auto;
.light-wrapper{
border-top: 1px solid #ddd;
h1{
font-size: .4rem;
margin-top: .4rem;
margin-bottom: 3px;
}
.light-group{
.light{
padding: 5px;
text-align: center;
border: 1px solid transparent;
}
.current-light{
border: 1px solid $primary-color;
border-radius: 4px;
span{
color: $primary-color;
}
}
img.light-icon{
width: $lightWidth;
height: $lightWidth;
vertical-align: top;
}
span{
font-size: .4rem;
display: block;
text-align: center;
padding-top: .3rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
.van-swipe__indicators {
bottom: 0rem;
.van-swipe__indicator {
width: 20px;
height: 2px;
border-radius: 10px;
background: #bbb;
}
.van-swipe__indicator--active {
background: $primary-color;
}
}
}
.light-size,
.light-count{
font-size: .4rem;
display: flex;
justify-content: space-between;
margin-top: .6rem;
align-items: center;
margin-bottom: .65rem;
span{
color: black;
opacity: 1;
}
}
.light-size{
margin-top: 1.1rem;
.van-radio__label{
margin-left: 4px;
font-size: .35rem;
}
.van-radio__icon .van-icon{
width: .5rem;
height: .5rem;
line-height: .5rem;
}
}
.light-count{
align-items: center;
margin-bottom: .2rem;
}
}
.support{
margin-bottom: .5rem;
.support-head{
padding: 0 .4rem;
display: flex;
justify-content: space-between;
height: 1.07rem;
line-height: 1.07rem;
.label{
font-size: .4rem;
font-weight: bold;
}
.external{
display: flex;
align-items: center;
li{
margin-left: .3rem;
font-size: .35rem;
color: #666;
}
li.active{
color: #333;
font-weight: bold;
}
}
}
}
.swiper-container{
background: #f5f5f5;
.picture, img{
width: 100%;
height: 100%;
}
}
.monk-profile{
padding: .4rem;
.position{
font-size: .5rem;
padding-top: .2rem;
color: #19282E;
line-height: 1.3;
}
.introduction{
font-size: .37rem;
margin-top: .4rem;
line-height: 1.3;
text-align: justify;
color: #666;
}
.bar{
margin-top: .27rem;
}
.status{
padding: .2rem .3rem;
background: orange;
color: white;
display: inline-block;
border-radius: .04rem;
margin-right: .3rem;
font-size: .3rem;
}
span{
color: #666;
font-size: .28rem;
}
}
.temple-info{
border-top: 1px solid #ddd;
padding: .3rem .4rem;
display: flex;
align-items: center;
.temple-img{
width: 1rem;
height: 1rem;
border-radius: 1rem;
margin-right: .3rem;
}
.temple-name{
flex: 1;
.name{
font-size: .35rem;
color: #333;
}
.visitor{
color: #666;
font-size: .3rem;
margin-top: .2rem;
display: block;
}
}
}
.detail-button-group{
text-align: center;
position: fixed;
bottom: 0;
z-index: 10;
left: 0;
right: 0;
background: white;
border-top: .01rem solid #ddd;
padding: .3rem;
}
.merit-button{
display: 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;
margin-bottom: .3rem;
}
.caret-spec{
.head{
display: flex;
justify-content: space-between;
font-size: .4rem;
padding: .4rem;
align-items: center;
margin-top: .13rem;
.iconfont{
font-size: .7rem;
}
.step-inline{
display: inline-block;
flex: 1;
font-size: .35rem;
li{
display: inline-block;
& ~ li:before{
content: '-';
padding: 0 .1rem;
}
}
li.current{
color: $primary-color;
}
}
}
.auto-donate-time{
padding: .4rem ;
margin-top: .4rem;
margin-bottom: 1rem;
.donate{
.label{
font-size: .4rem;
}
display: flex;
align-items: center;
justify-content: space-between;
}
.time-cycle{
display: flex;
align-items: flex-end;
.unit{
font-size: .3rem;
color: #666;
padding-left: .2rem;
}
}
}
.next-group{
display: flex;
justify-content: space-between;
padding: .2rem .4rem ;
background: white;
align-items: center;
border-top: 1px solid #ededed;
.total{
font-size: .4rem;
em{
color: $primary-color;
font-size: .4rem;
font-weight: bold;
}
}
.next{
font-size: .4rem;
padding: .3rem 1rem;
background: $primary-color;
border: 1px solid $primary-color;
color: white;
border-radius: .1rem;
}
}
}
}
</style>
+28 -4
View File
@@ -57,13 +57,13 @@
</div>
</div>
<div class="divider"></div>
<thanks-giving :temple-id="query.temple_id || '1' "></thanks-giving>
<thanks-giving :temple-id="query.temple_id " :agent-id="query.agent_id"></thanks-giving>
</div>
</div>
</template>
<script>
import { getTempleIndex } from '@/api';
import { getPlatformHome, getTempleIndex } from "@/api";
export default {
components: {
@@ -97,6 +97,17 @@ export default {
},
locationTo(nav) {
// nav.type: 0外部链接,1日行一善商品,2添砖加瓦类商品,3通用商品,4功德箱,5进展动态
if(nav.type === 6){
this.$router.push({
name: 'goods-light-detail',
query: {
goods_type: nav.type,
temple_id: nav.temple_id,
}
})
return
}
if(nav.type === 0){
window.location.href = nav.url;
return
@@ -140,9 +151,21 @@ export default {
}
},
async getTempleIndex() {
const res = await getTempleIndex(this.query.temple_id);
const { agent_id } = this.$route.query;
let res;
if(agent_id){
res = await getPlatformHome(agent_id)
} else {
res = await getTempleIndex(this.query.temple_id);
}
this.data = res;
this.$store.commit('setTempleMeritId', res.temple_merit_id);
this.data.icon_data = this.sliceNav(res.icon_data);
console.log(res.temple_data.unit_name)
setTimeout(() => {
document.title = res.temple_data.unit_name;
console.log(document.title)
}, 10)
},
onMoreProcess() {
this.$router.push({
@@ -163,13 +186,14 @@ export default {
const b = navData.slice(i * slice, i * slice + slice);
nav.push(b);
}
return nav;
},
},
};
</script>
<style lang="scss" scope>
<style lang="scss">
.van-nav-bar__title {
color: white;
}
+3 -2
View File
@@ -46,7 +46,7 @@
<script>
import { getMeritBox, } from '@/api';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import { mapState } from 'vuex';
export default {
components: {
@@ -86,6 +86,7 @@ export default {
}
},
computed: {
...mapState(['temple_merit_id']),
swiper(){
return this.$refs.swiper.swiper;
}
@@ -114,7 +115,7 @@ export default {
async getMeritBox(){
const current = this.nav.find(item => item.id === this.type_id);
const res = await getMeritBox(this.query.temple_id || '1', current.id, current.page, current.size);
const res = await getMeritBox(this.temple_merit_id || this.query.temple_id || '1', current.id, current.page, current.size);
this.info = res.merit_box_info;
this.total = res.merit_box_order.total;
current.list = res.merit_box_order.list
+28 -3
View File
@@ -40,8 +40,16 @@
</template>
<script>
import { createFriendlyDayOrder, createBrickDayOrder, createPay, createMeritBoxOrder, createCommonOrder } from '@/api';
import {
createFriendlyDayOrder,
createBrickDayOrder,
createPay,
createMeritBoxOrder,
createCommonOrder,
createLightOrder
} from "@/api";
import { requestPayment } from '@/common/wechat-web';
import { mapState } from "vuex";
export default {
components: {
@@ -52,10 +60,14 @@ export default {
payType: '1'
}
},
computed: {
...mapState(['temple_merit_id', 'launch']),
},
mounted(){
this.wechatReady(() => {
})
},
methods: {
onContinuePayOrder(){
@@ -79,9 +91,11 @@ export default {
// 创建功德箱订单
if(this.query.from === 'meritBox'){
const domain = this.launch?.agent_id ? '2': '3'
const request = {
temple_id: this.query.temple_id,
price: this.query.amount
temple_id: this.temple_merit_id || this.query.temple_id,
price: this.query.amount,
domain
}
const order = await createMeritBoxOrder(request)
this.onPayment(order)
@@ -100,6 +114,17 @@ export default {
await this.onPayment(order);
}
// 创建佛前供灯订单
if(this.query.from === 'goods_light'){
const request = {
...this.query,
price: this.query.amount,
buy_quantity: this.query.quantity
}
const order = await createLightOrder(request);
await this.onPayment(order);
}
},
async onPayment(order){
const result = await createPay(order.id);
+6
View File
@@ -117,6 +117,12 @@ const routes = [
meta: { title: '详情', navBarBackgroundColor: 'white' },
component: () => import('@/pages/goods-detail')
},
{
path: '/goods-light-detail',
name: 'goods-light-detail',
meta: { title: '详情', navBarBackgroundColor: 'white' },
component: () => import('@/pages/goods-light-detail')
},
{
path: '/fill-name',
name: 'fill-name',
+32
View File
@@ -0,0 +1,32 @@
import Vue from "vue";
import Vuex from 'vuex'
import VuexPersistedstateEs from "vuex-persistedstate";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
temple_merit_id: null,
launch: null
},
mutations: {
setTempleMeritId(state, payload){
state.temple_merit_id = payload;
},
SET_LAUNCH(state, payload){
state.launch = payload
}
},
getters: {
getLaunch(state){
return state.launch
}
},
plugins: [
VuexPersistedstateEs({
storage: window.sessionStorage
})
]
})
export default store;