feat: 增加界面
This commit is contained in:
+2
-1
@@ -1,4 +1,5 @@
|
|||||||
{
|
{
|
||||||
"tabWidth": 4,
|
"tabWidth": 4,
|
||||||
"singleQuote": true
|
"singleQuote": true,
|
||||||
|
"printWidth": 200
|
||||||
}
|
}
|
||||||
+1
-1
@@ -12,7 +12,7 @@
|
|||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
|
||||||
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<title>自在福田</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
|
|||||||
+14
-16
@@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app" :style="{paddingBottom: paddingBottom + 'px'}">
|
<div id="app" :style="{paddingBottom: paddingBottom + 'px'}">
|
||||||
<router-view />
|
<router-view />
|
||||||
<van-tabbar v-model="active" v-if="showTabbar" class="tabbar" ref="tabbar" route active-color="#CF9E3B" inactive-color="#999">
|
<van-tabbar v-if="showTabbar" class="tabbar" ref="tabbar" route active-color="#CF9E3B" inactive-color="#999">
|
||||||
<van-tabbar-item icon="home-o" v-for="(tab, index) in tabbar" :key="index" :to="tab.path">
|
<van-tabbar-item replace v-for="(tab, index) in tabbar" :key="index" :to="tab.path">
|
||||||
<span>{{tab.title}}</span>
|
<span>{{tab.title}}</span>
|
||||||
<template #icon="props">
|
<template #icon="props">
|
||||||
<img :src="props.active ? tab.active: tab.inactive" alt="">
|
<img :src="props.active ? tab.active: tab.inactive" alt="">
|
||||||
@@ -21,8 +21,7 @@ export default {
|
|||||||
name: 'App',
|
name: 'App',
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
active: '0',
|
active: '3',
|
||||||
paddingBottom: 0,
|
|
||||||
tabbar
|
tabbar
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -30,7 +29,6 @@ export default {
|
|||||||
return {
|
return {
|
||||||
root: this,
|
root: this,
|
||||||
tabbar: this.$refs.tabbar,
|
tabbar: this.$refs.tabbar,
|
||||||
showTabbar: false,
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
@@ -42,21 +40,21 @@ export default {
|
|||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
'$route': {
|
'$route': {
|
||||||
immediate: true,
|
handler(val){
|
||||||
handler(to){
|
console.log(val)
|
||||||
const path = tabbar.map(tab => tab.path);
|
this.active = tabbar.map(v => v.name).indexOf(val.name).toString()
|
||||||
document.title = to.meta.title || '自在福田';
|
|
||||||
this.showTabbar = path.includes(to.path)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted(){
|
computed: {
|
||||||
if(this.showTabbar){
|
showTabbar(){
|
||||||
this.paddingBottom = this.$refs.tabbar.$el.offsetHeight;
|
const path = tabbar.map(tab => tab.path);
|
||||||
} else{
|
return path.includes(this.$route.path)
|
||||||
this.paddingBottom = 0
|
},
|
||||||
}
|
paddingBottom(){
|
||||||
|
return this.showTabbar ? this.$refs.tabbar ? this.$refs.tabbar.$el.offsetHeight : 0 : 0
|
||||||
}
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
+34
-6
@@ -50,6 +50,9 @@ const getGoodsDetail = (goods_type, goods_id, temple_id) => service.get(`/api/${
|
|||||||
// 创建日行一善商品订单
|
// 创建日行一善商品订单
|
||||||
const createFriendlyDayOrder = data => service.post('/api/order/create-friendly', data);
|
const createFriendlyDayOrder = data => service.post('/api/order/create-friendly', data);
|
||||||
|
|
||||||
|
//创建通用商品订单
|
||||||
|
const createCommonOrder = data => service.post(`/api/order/create-common`, data);
|
||||||
|
|
||||||
// 创建添砖加瓦订单
|
// 创建添砖加瓦订单
|
||||||
const createBrickDayOrder = data => service.post('/api/order/create-tile', data);
|
const createBrickDayOrder = data => service.post('/api/order/create-tile', data);
|
||||||
|
|
||||||
@@ -59,6 +62,12 @@ const getMeritName = () => service.get(`/api/order/get-merit-list`)
|
|||||||
// 添加功德芳名
|
// 添加功德芳名
|
||||||
const postMeritName = name => service.post(`/api/order/create-merit-name?name=${name}`)
|
const postMeritName = name => service.post(`/api/order/create-merit-name?name=${name}`)
|
||||||
|
|
||||||
|
//获取心愿列表
|
||||||
|
const getDreamList = (count = 8) => service.get(`/api/order/get-dream-list?row=${count}`)
|
||||||
|
|
||||||
|
//删除功德芳名
|
||||||
|
const deleteMeritName = nameId => service.delete(`/api/order/delete-merit-name?merit_name_id=${nameId}`);
|
||||||
|
|
||||||
// 获取微信签名
|
// 获取微信签名
|
||||||
const getWechatSign = url => service.get(`/api/wx/sign?url=${url}`)
|
const getWechatSign = url => service.get(`/api/wx/sign?url=${url}`)
|
||||||
|
|
||||||
@@ -66,13 +75,13 @@ const getWechatSign = url => service.get(`/api/wx/sign?url=${url}`)
|
|||||||
const getCourseList = () => service.get(`/api/course/get-list`);
|
const getCourseList = () => service.get(`/api/course/get-list`);
|
||||||
|
|
||||||
// 获取功课详情
|
// 获取功课详情
|
||||||
const getCourseDetail = course_id => service.get(`/api/course/get-details/${course_id}`);
|
const getCourseDetail = (course_id, type) => service.get(`/api/course/get-details/${course_id}?type=${type}`);
|
||||||
|
|
||||||
// 寺院首页
|
// 寺院首页
|
||||||
const getTempleIndex = temple_id => service.get(`/api/temple/index?temple_id=${temple_id}`);
|
const getTempleIndex = (temple_id = 1) => service.get(`/api/temple/index?temple_id=${temple_id}`);
|
||||||
|
|
||||||
// 寺院详情
|
// 寺院详情
|
||||||
const getTempleDetail = temple_id => service.get(`/api/temple/certify-show?temple_id=${temple_id}`);
|
const getTempleDetail = (temple_id = 1) => service.get(`/api/temple/certify-show?temple_id=${temple_id}`);
|
||||||
|
|
||||||
// 法师、监院人员信息详情
|
// 法师、监院人员信息详情
|
||||||
const getMasterDetail = master_id => service.get(`/api/master/show?master_id=${master_id}`);
|
const getMasterDetail = master_id => service.get(`/api/master/show?master_id=${master_id}`);
|
||||||
@@ -95,8 +104,11 @@ const getMeritBox = (temple_id, type, page, size = 10) => service.get(`/api/tem
|
|||||||
// 添加功德箱订单
|
// 添加功德箱订单
|
||||||
const createMeritBoxOrder = data => service.post(`/api/order/create-merit-box`, data)
|
const createMeritBoxOrder = data => service.post(`/api/order/create-merit-box`, data)
|
||||||
|
|
||||||
// 获取动态列表
|
// 获取动态(佛事)列表
|
||||||
const getDynamicData = (page = 1, size = 10) => service.get(`/api/dynamic/get-page?page=${page}&size=${size}`);
|
const getDynamicData = (page = 1, goods_id = '', size = 10) => service.get(`/api/dynamic/get-page?page=${page}&size=${size}&goods_id=${goods_id}`);
|
||||||
|
|
||||||
|
// 获取动态(佛事)详情
|
||||||
|
const getDynamicDetail = (dynamic_id) => service.get(`/api/dynamic/detail?id=${dynamic_id}`);
|
||||||
|
|
||||||
// 通用商品列表(功德无量)
|
// 通用商品列表(功德无量)
|
||||||
const getCommonGoods = (temple_id, page, size = 10) => service.get(`/api/common/get-list?temple_id=${temple_id}&page=${page}&size=${size}`);
|
const getCommonGoods = (temple_id, page, size = 10) => service.get(`/api/common/get-list?temple_id=${temple_id}&page=${page}&size=${size}`);
|
||||||
@@ -110,6 +122,15 @@ const getTempleList = (keywords = '', lng = '', lat = '', page = 1, size = 10) =
|
|||||||
// 我的关注
|
// 我的关注
|
||||||
const getMyCollectionList = (page = 1, size = 10) => service.get(`/api/dynamic/get-collect-list?page=${page}&size=${size}`)
|
const getMyCollectionList = (page = 1, size = 10) => service.get(`/api/dynamic/get-collect-list?page=${page}&size=${size}`)
|
||||||
|
|
||||||
|
// 订单列表
|
||||||
|
const getOrderList = (status = 0, page = 1, size = 10) => service.get(`/api/order/get-page?status=${status}&page=${page}&size=${size}`)
|
||||||
|
|
||||||
|
// 客服中心
|
||||||
|
const getCustomerList = () => service.get(`/api/customer/get-list`);
|
||||||
|
|
||||||
|
// 功德证书
|
||||||
|
const getCertList = () => service.get(`/api/user/get-cert-list`);
|
||||||
|
|
||||||
export {
|
export {
|
||||||
getMonkAppellation,
|
getMonkAppellation,
|
||||||
getRegion,
|
getRegion,
|
||||||
@@ -118,10 +139,12 @@ export {
|
|||||||
certifyMonk,
|
certifyMonk,
|
||||||
getUserData,
|
getUserData,
|
||||||
getGoodsDetail,
|
getGoodsDetail,
|
||||||
|
getDreamList,
|
||||||
getMeritName,
|
getMeritName,
|
||||||
createFriendlyDayOrder,
|
createFriendlyDayOrder,
|
||||||
createBrickDayOrder,
|
createBrickDayOrder,
|
||||||
postMeritName,
|
postMeritName,
|
||||||
|
deleteMeritName,
|
||||||
getWechatSign,
|
getWechatSign,
|
||||||
getCourseList,
|
getCourseList,
|
||||||
getCourseDetail,
|
getCourseDetail,
|
||||||
@@ -135,8 +158,13 @@ export {
|
|||||||
postCount,
|
postCount,
|
||||||
getMeritBox,
|
getMeritBox,
|
||||||
createMeritBoxOrder,
|
createMeritBoxOrder,
|
||||||
|
createCommonOrder,
|
||||||
getDynamicData,
|
getDynamicData,
|
||||||
|
getDynamicDetail,
|
||||||
getCommonGoods,
|
getCommonGoods,
|
||||||
getOrderCompare,
|
getOrderCompare,
|
||||||
getMyCollectionList
|
getMyCollectionList,
|
||||||
|
getOrderList,
|
||||||
|
getCustomerList,
|
||||||
|
getCertList
|
||||||
}
|
}
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
@@ -5,11 +5,27 @@
|
|||||||
background: #F9F9FC;
|
background: #F9F9FC;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
.panel-head {
|
.panel-head {
|
||||||
padding: .53rem .4rem;
|
padding: .53rem .4rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: .43rem;
|
font-size: .43rem;
|
||||||
|
|||||||
@@ -1,18 +1,4 @@
|
|||||||
// export default {
|
|
||||||
// install(Vue){
|
|
||||||
// wx.config({
|
|
||||||
// debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
|
|
||||||
// appId: '', // 必填,公众号的唯一标识
|
|
||||||
// timestamp: 123, // 必填,生成签名的时间戳
|
|
||||||
// nonceStr: '', // 必填,生成签名的随机串
|
|
||||||
// signature: '',// 必填,签名
|
|
||||||
// jsApiList: [] // 必填,需要使用的JS接口列表
|
|
||||||
// });
|
|
||||||
// wx.ready(function(){
|
|
||||||
// Vue.prototype.$wx = wx;
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
let wechatInstance;
|
let wechatInstance;
|
||||||
|
|
||||||
function signToWechat(config){
|
function signToWechat(config){
|
||||||
@@ -25,6 +11,7 @@ function signToWechat(config){
|
|||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
wx.config({
|
wx.config({
|
||||||
...defaultConfig,
|
...defaultConfig,
|
||||||
|
debug: true,
|
||||||
...config,
|
...config,
|
||||||
})
|
})
|
||||||
wx.ready(function(){
|
wx.ready(function(){
|
||||||
@@ -57,9 +44,15 @@ function requestPayment(paymentConfig){
|
|||||||
success: function (res) {
|
success: function (res) {
|
||||||
// 支付成功后的回调函数
|
// 支付成功后的回调函数
|
||||||
resolve(res)
|
resolve(res)
|
||||||
|
},
|
||||||
|
fail(res){
|
||||||
|
alert(JSON.stringify(res))
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export { signToWechat, getLocation, requestPayment };
|
function openLocation(config){
|
||||||
|
return wechatInstance.openLocation(config)
|
||||||
|
}
|
||||||
|
export { signToWechat, getLocation, requestPayment, openLocation };
|
||||||
@@ -16,6 +16,8 @@ export default {
|
|||||||
font-size: .3rem;
|
font-size: .3rem;
|
||||||
color: #999;
|
color: #999;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
height: 1rem;
|
||||||
|
line-height: 1rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
em{
|
em{
|
||||||
line-height: .32rem;
|
line-height: .32rem;
|
||||||
|
|||||||
@@ -4,14 +4,15 @@
|
|||||||
<div class="process-detail">
|
<div class="process-detail">
|
||||||
<h1 class="title">{{ privateData.title }}</h1>
|
<h1 class="title">{{ privateData.title }}</h1>
|
||||||
<p class="desc">{{ privateData.description }}</p>
|
<p class="desc">{{ privateData.description }}</p>
|
||||||
|
<p class="detail-text" v-if="privateData.length > 40">详情</p>
|
||||||
<div class="image-group">
|
<div class="image-group">
|
||||||
<img :src="cover" v-for="(cover, index) in privateData.covers.slice(0, 3)" :key="index" alt="">
|
<img :src="cover" v-for="(cover, index) in covers" :key="index" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<button class="purchase">护膜祈福 功德圆满</button>
|
<button class="purchase" v-if="showGoodsBtn" @click.stop="onGoodsDetail">{{privateData.btn_title}}</button>
|
||||||
<div class="bar">
|
<div class="bar">
|
||||||
<span class="join">已有{{ privateData.sales }}人参与</span>
|
<span class="join">已有{{ privateData.sales }}人参与</span>
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<span class="btn" :class="[privateData.collect === 1 ? 'collect': 'un-collect']" @click.stop="onCollect">
|
<span class="btn" :class="[privateData.is_collected === 1 ? 'collect' : 'un-collect']" @click.stop="onCollect">
|
||||||
<i class="iconfont icon-guanzhu-yiguanzhu"></i>
|
<i class="iconfont icon-guanzhu-yiguanzhu"></i>
|
||||||
<b>关注</b>
|
<b>关注</b>
|
||||||
</span>
|
</span>
|
||||||
@@ -26,62 +27,66 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { toggleCollect } from "@/api"
|
import { toggleCollect } from '@/api';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'buddha-process',
|
name: 'buddha-process',
|
||||||
props: ['data'],
|
props: {
|
||||||
|
data: {
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
showGoodsBtn: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
watch: {
|
watch: {
|
||||||
data: {
|
data: {
|
||||||
handler(val) {
|
handler(val) {
|
||||||
this.privateData = val;
|
this.privateData = val;
|
||||||
},
|
},
|
||||||
immediate: true,
|
immediate: true,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
privateData: null,
|
privateData: null,
|
||||||
}
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
covers: {
|
||||||
|
get() {
|
||||||
|
const type = Object.prototype.toString.call(this.privateData.covers);
|
||||||
|
return type === '[object Object]' ? []: this.privateData.covers.slice(0, 3);
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async onCollect() {
|
async onCollect() {
|
||||||
const res = await toggleCollect(this.data.id);
|
await toggleCollect(this.data.id);
|
||||||
console.log(res)
|
|
||||||
this.privateData.is_collected = this.privateData.is_collected === 1 ? 0 : 1;
|
this.privateData.is_collected = this.privateData.is_collected === 1 ? 0 : 1;
|
||||||
this.$emit('collection', this.data.id)
|
this.$emit('collection', this.data.id);
|
||||||
},
|
},
|
||||||
onProcessDetail() {
|
onProcessDetail() {
|
||||||
|
const { id } = this.privateData;
|
||||||
|
this.$router.push({
|
||||||
|
name: 'buddha-detail',
|
||||||
|
query: { id }
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onGoodsDetail(){
|
||||||
const { goods_type, goods_id, temple_id } = this.privateData;
|
const { goods_type, goods_id, temple_id } = this.privateData;
|
||||||
if(goods_type === 1 || goods_type === 2 || goods_type === 4){
|
this.onPushToGoodsDetail(goods_type, goods_id, temple_id)
|
||||||
this.$router.push({
|
|
||||||
name: 'everyday-donation',
|
|
||||||
query: {
|
|
||||||
goods_type,
|
|
||||||
goods_id,
|
|
||||||
temple_id
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.$router.push({
|
|
||||||
name: 'goods-detail',
|
|
||||||
query: {
|
|
||||||
goods_type,
|
|
||||||
goods_id,
|
|
||||||
temple_id
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.process {
|
.process {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0 .4rem;
|
padding: 0 0.4rem;
|
||||||
&::after {
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
height: 1px;
|
height: 1px;
|
||||||
@@ -95,78 +100,87 @@ export default {
|
|||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
& ~ .process {
|
& ~ .process {
|
||||||
padding-top: .53rem;
|
padding-top: 0.53rem;
|
||||||
}
|
}
|
||||||
.date {
|
.date {
|
||||||
font-size: .35rem;
|
font-size: 0.35rem;
|
||||||
color: #666666;
|
color: #666666;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 2.19rem;
|
width: 2.19rem;
|
||||||
margin-top: .07rem;
|
margin-top: 0.07rem;
|
||||||
}
|
}
|
||||||
.process-detail {
|
.process-detail {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
.title {
|
.title {
|
||||||
font-size: .43rem;
|
font-size: 0.43rem;
|
||||||
color: #222;
|
color: #222;
|
||||||
margin-bottom: .32rem;
|
margin-bottom: 0.32rem;
|
||||||
}
|
}
|
||||||
.desc {
|
.desc {
|
||||||
font-size: .37rem;
|
font-size: 0.37rem;
|
||||||
line-height: .53rem;
|
line-height: 0.53rem;
|
||||||
color: #333;
|
color: #5a5a5a;
|
||||||
|
text-align: justify;
|
||||||
|
|
||||||
|
@extend .text-multiple-3;
|
||||||
|
}
|
||||||
|
.detail-text{
|
||||||
|
font-size: .4rem;
|
||||||
|
padding-top: .2rem;
|
||||||
|
color: #b74100;
|
||||||
}
|
}
|
||||||
.image-group {
|
.image-group {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin-top: .27rem;
|
margin-top: 0.27rem;
|
||||||
img {
|
img {
|
||||||
width: 2.16rem;
|
width: 2.16rem;
|
||||||
height: 2.16rem;
|
height: 2.16rem;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
border-radius: .05rem;
|
border-radius: 0.05rem;
|
||||||
& ~ img {
|
& ~ img {
|
||||||
margin-left: .27rem;
|
margin-left: 0.27rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.purchase {
|
.purchase {
|
||||||
background: #CF9E3B;
|
background: #cf9e3b;
|
||||||
height: .77rem;
|
height: 0.77rem;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 0 .27rem;
|
padding: 0 0.27rem;
|
||||||
line-height: .77rem;
|
line-height: 0.77rem;
|
||||||
border-radius: .07rem;
|
border-radius: 0.07rem;
|
||||||
font-size: .35rem;
|
font-size: 0.35rem;
|
||||||
border:1px solid #CF9E3B;
|
border: 1px solid #cf9e3b;
|
||||||
margin-bottom: .32rem;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
margin-top: .4rem
|
margin-top: 0.4rem;
|
||||||
}
|
}
|
||||||
.bar {
|
.bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding-bottom: .37rem;
|
padding-bottom: 0.37rem;
|
||||||
|
margin-top: 0.32rem;
|
||||||
.join {
|
.join {
|
||||||
font-size: .3rem;
|
font-size: 0.3rem;
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
.btn-group {
|
.btn-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
.btn {
|
.btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-left: .5rem;
|
margin-left: 0.5rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.iconfont {
|
.iconfont {
|
||||||
color: $primary-color;
|
color: $primary-color;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
font-size: .4rem;
|
font-size: 0.4rem;
|
||||||
margin-top: -3px;
|
margin-top: -3px;
|
||||||
}
|
}
|
||||||
b {
|
b {
|
||||||
font-size: .35rem;
|
font-size: 0.35rem;
|
||||||
padding-left: .1rem;
|
padding-left: 0.1rem;
|
||||||
color: #888;
|
color: #888;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|||||||
@@ -0,0 +1,30 @@
|
|||||||
|
<template>
|
||||||
|
<div class="fixed-bottom" ref="fixedBottom">
|
||||||
|
<safe-area>
|
||||||
|
<slot></slot>
|
||||||
|
</safe-area>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'fixed-bottom',
|
||||||
|
methods: {
|
||||||
|
getOffsetHeight(){
|
||||||
|
return this.$refs.fixedBottom.offsetHeight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.fixed-bottom{
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
border-top: .01rem solid #ddd;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -12,6 +12,9 @@ import UserDynamic from './user-dynamic';
|
|||||||
import RandomMoney from './random-money'
|
import RandomMoney from './random-money'
|
||||||
import ThankGiving from './Thanksgiving'
|
import ThankGiving from './Thanksgiving'
|
||||||
import ArrowMore from './arrow-more'
|
import ArrowMore from './arrow-more'
|
||||||
|
import SafeArea from './safe-area';
|
||||||
|
import FixedBottom from './fixed-bottom';
|
||||||
|
|
||||||
|
|
||||||
Vue.component(UserMerit.name, UserMerit)
|
Vue.component(UserMerit.name, UserMerit)
|
||||||
Vue.component(Temple.name, Temple)
|
Vue.component(Temple.name, Temple)
|
||||||
@@ -25,3 +28,5 @@ Vue.component(UserDynamic.name, UserDynamic)
|
|||||||
Vue.component(RandomMoney.name, RandomMoney)
|
Vue.component(RandomMoney.name, RandomMoney)
|
||||||
Vue.component(ThankGiving.name, ThankGiving)
|
Vue.component(ThankGiving.name, ThankGiving)
|
||||||
Vue.component(ArrowMore.name, ArrowMore)
|
Vue.component(ArrowMore.name, ArrowMore)
|
||||||
|
Vue.component(SafeArea.name, SafeArea)
|
||||||
|
Vue.component(FixedBottom.name, FixedBottom)
|
||||||
@@ -1,18 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="order">
|
<div class="order">
|
||||||
<div class="order-head">
|
<div class="order-head">
|
||||||
<span class="temple-name">重庆石林寺<i class="iconfont icon-arrow-right"></i></span>
|
<span class="temple-name" @click="onTemple">{{data.temple_name}}<i class="iconfont icon-arrow-right"></i></span>
|
||||||
<span class="status">已处理</span>
|
<span class="status">{{data.status}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="order-body">
|
<div class="order-body">
|
||||||
<img class="goods-picture" src="https://img0.baidu.com/it/u=2890176269,287120071&fm=26&fmt=auto" alt="">
|
<img class="goods-picture" :src="data.picture" alt="">
|
||||||
<div class="order-flex">
|
<div class="order-flex">
|
||||||
<h4 class="name">功德箱捐赠</h4>
|
<h4 class="name">{{data.goods_name}}</h4>
|
||||||
<span class="date">2021-10-3</span>
|
<span class="date">{{data.created_at}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="order-flex-quantity">
|
<div class="order-flex-quantity">
|
||||||
<span class="amount">¥ 200.01</span>
|
<span class="amount">¥ {{data.order_amount}}</span>
|
||||||
<span class="quantity">数量: 1</span>
|
<span class="quantity">数量:{{data.buy_total}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -20,7 +20,13 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'order'
|
name: 'order',
|
||||||
|
props: ['data'],
|
||||||
|
methods: {
|
||||||
|
onTemple(){
|
||||||
|
this.$router.push({ name: 'temple-home', query: { temple_id: this.data.temple_id} })
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -55,8 +61,13 @@ export default {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: .13rem 0;
|
padding: .13rem 0;
|
||||||
|
margin-right: .2rem;
|
||||||
.name{
|
.name{
|
||||||
font-size: .43rem;
|
font-size: .35rem;
|
||||||
|
line-height: 1.3;
|
||||||
|
color: #19282E;
|
||||||
|
margin-top: -.12rem;
|
||||||
|
@extend .text-multiple-2;
|
||||||
}
|
}
|
||||||
.date{
|
.date{
|
||||||
color: #555;
|
color: #555;
|
||||||
|
|||||||
@@ -116,6 +116,7 @@ export default {
|
|||||||
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;
|
background-size: contain;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
.avatar{
|
.avatar{
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
|
|||||||
@@ -0,0 +1,34 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="['safe-area', 'safe-area--'+offset, isFullScreen ? 'full-screen':'small-screen']">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'safe-area',
|
||||||
|
props: {
|
||||||
|
offset: {
|
||||||
|
type: String,
|
||||||
|
default: 'bottom'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
isFullScreen: this.getHasFullScreen()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.safe-area--bottom{
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
}
|
||||||
|
.safe-area--top{
|
||||||
|
padding-top: env(safe-area-inset-top);
|
||||||
|
}
|
||||||
|
.safe-area.small-screen{
|
||||||
|
padding-bottom: .3rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -12,4 +12,43 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
getHasFullScreen() {
|
||||||
|
let result = false;
|
||||||
|
const rate = window.screen.height / window.screen.width;
|
||||||
|
let limit = window.screen.height === window.screen.availHeight ? 1.8 : 1.65;
|
||||||
|
|
||||||
|
if (rate > limit) {
|
||||||
|
result = true;
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* @param goods_type: 商品类型
|
||||||
|
* @param goods_id: 商品id
|
||||||
|
* @param temple_id: 寺院id
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
onPushToGoodsDetail(goods_type, goods_id, temple_id){
|
||||||
|
if (goods_type == 1 || goods_type == 2 || goods_type == 4) {
|
||||||
|
this.$router.push({
|
||||||
|
name: 'everyday-donation',
|
||||||
|
query: {
|
||||||
|
goods_type,
|
||||||
|
goods_id,
|
||||||
|
temple_id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$router.push({
|
||||||
|
name: 'goods-detail',
|
||||||
|
query: {
|
||||||
|
goods_type,
|
||||||
|
goods_id,
|
||||||
|
temple_id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -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}" />
|
<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">
|
<div div class="process-container">
|
||||||
<scroll-view :height="height - 50" ref="scrollView">
|
<scroll-view :height="height - 50" ref="scrollView">
|
||||||
<buddha-process v-for="(p, i) in list" :key="i" :data="p"></buddha-process>
|
<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" class="no-more">没有更多了</div>
|
<div v-if="total === list.length && list.length > 3" class="no-more">没有更多了</div>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -16,7 +16,9 @@ import { getDynamicData } from "@/api"
|
|||||||
export default {
|
export default {
|
||||||
props: ['data'],
|
props: ['data'],
|
||||||
data(){
|
data(){
|
||||||
|
const { query } = this.$route;
|
||||||
return {
|
return {
|
||||||
|
query,
|
||||||
size: 10,
|
size: 10,
|
||||||
page: 1,
|
page: 1,
|
||||||
total: 0,
|
total: 0,
|
||||||
@@ -29,7 +31,7 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async getDynamicData(){
|
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)
|
console.log(res)
|
||||||
this.total = res.total;
|
this.total = res.total;
|
||||||
this.list = res.results;
|
this.list = res.results;
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="everyday-donation" v-if="data">
|
<div class="everyday-donation" v-if="data">
|
||||||
|
<div class="content-view">
|
||||||
<div class="topbar" ref="topbar">
|
<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>
|
||||||
@@ -24,18 +25,25 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="divider"></div>
|
<div class="divider"></div>
|
||||||
<div class="panel">
|
<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="panel" v-if="goodsDynamicList.length > 0">
|
||||||
<div class="panel-head">
|
<div class="panel-head">
|
||||||
<span class="title">进展动态</span>
|
<span class="title">进展动态</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<buddha-process></buddha-process>
|
<buddha-process v-for="dynamic in goodsDynamicList" :key="dynamic.id" :data="dynamic" :show-goods-btn="false"></buddha-process>
|
||||||
<div class="process-more">
|
<div class="process-more" @click="onMoreProcess">
|
||||||
<span>查看更多进展状态</span>
|
<span>查看更多进展状态</span>
|
||||||
<i class="iconfont icon-arrow-right"></i>
|
<i class="iconfont icon-arrow-right"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="support">
|
<div class="support" v-if="payRecords.length">
|
||||||
<div class="support-head">
|
<div class="support-head">
|
||||||
<span class="label">感恩功德</span>
|
<span class="label">感恩功德</span>
|
||||||
<ul class="external">
|
<ul class="external">
|
||||||
@@ -48,13 +56,14 @@
|
|||||||
<!-- <user-merit v-for=""></user-merit> -->
|
<!-- <user-merit v-for=""></user-merit> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="merit-button-group border-top">
|
<div class="merit-button-group border-top">
|
||||||
<button class="merit-button" @click="showSpec = true">去行善</button>
|
<button class="merit-button" @click="showSpec = true">去行善</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" :close-on-click-overlay="false" :close-on-popstate="true">
|
<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">
|
<div class="head">
|
||||||
<span>选择行善金额</span>
|
<span>选择行善金额</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -89,7 +98,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 显示添砖加瓦的商品规格 -->
|
<!-- 显示添砖加瓦的商品规格 -->
|
||||||
<div class="caret" v-if="query.goods_type === '-2'">
|
<div class="caret" v-if="query.goods_type == '2'">
|
||||||
<div class="head">
|
<div class="head">
|
||||||
<span>选择行善金额</span>
|
<span>选择行善金额</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -122,10 +131,14 @@
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="next-group">
|
<div class="next-group-wrapper">
|
||||||
|
<safe-area>
|
||||||
|
<div class='next-group'>
|
||||||
<span class="total">合计:¥{{priceTotal}}</span>
|
<span class="total">合计:¥{{priceTotal}}</span>
|
||||||
<button class="next" @click="onToPay">下一步</button>
|
<button class="next" @click="onToPay">下一步</button>
|
||||||
</div>
|
</div>
|
||||||
|
</safe-area>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</van-popup>
|
</van-popup>
|
||||||
@@ -136,7 +149,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import 'swiper/css/swiper.css'
|
import 'swiper/css/swiper.css'
|
||||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||||
import { getGoodsDetail } from '@/api'
|
import { getDynamicData, getGoodsDetail } from '@/api';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -170,13 +183,15 @@ export default {
|
|||||||
number: 1,
|
number: 1,
|
||||||
is_assign: false, // 是否为自动认捐砖块数
|
is_assign: false, // 是否为自动认捐砖块数
|
||||||
buy_quantity: 1, // 自定义认捐砖块数
|
buy_quantity: 1, // 自定义认捐砖块数
|
||||||
|
goodsDynamicList: [], // 商品动态列表
|
||||||
banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
|
banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
|
||||||
swiperOption: {
|
swiperOption: {
|
||||||
autoplay: 8000,
|
autoplay: 8000,
|
||||||
initialSlide: 1,
|
initialSlide: 1,
|
||||||
loop: true,
|
loop: true,
|
||||||
pagination: '.swiper-pagination',
|
pagination: '.swiper-pagination',
|
||||||
}
|
},
|
||||||
|
payRecords: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -210,8 +225,23 @@ export default {
|
|||||||
if(this.query.goods_type === '2'){
|
if(this.query.goods_type === '2'){
|
||||||
response.spec = response.spec.map(v => ({ ...v, money: this.amountAbs(v.donate_number, Number(response.price))}))
|
response.spec = response.spec.map(v => ({ ...v, money: this.amountAbs(v.donate_number, Number(response.price))}))
|
||||||
}
|
}
|
||||||
|
await this.getDynamicDataByGoodsId(goods_id);
|
||||||
this.data = response;
|
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}){
|
onPriceUnit({id, money}){
|
||||||
this.priceUnit = Number(money);
|
this.priceUnit = Number(money);
|
||||||
@@ -380,17 +410,20 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.next-group-wrapper{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
border-top: 1px solid #ededed;
|
||||||
|
}
|
||||||
.next-group{
|
.next-group{
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: .4rem;
|
padding: .4rem;
|
||||||
position: absolute;
|
|
||||||
background: white;
|
background: white;
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-top: 1px solid #ededed;
|
|
||||||
.total{
|
.total{
|
||||||
font-size: .4rem;
|
font-size: .4rem;
|
||||||
}
|
}
|
||||||
@@ -431,6 +464,25 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.everyday-donation{
|
.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{
|
.monk-profile{
|
||||||
padding: .4rem;
|
padding: .4rem;
|
||||||
margin-bottom: .2rem;
|
margin-bottom: .2rem;
|
||||||
@@ -467,6 +519,7 @@ export default {
|
|||||||
right: 0;
|
right: 0;
|
||||||
background: white;
|
background: white;
|
||||||
padding: .4rem 0;
|
padding: .4rem 0;
|
||||||
|
padding-bottom: calc(env(safe-area-inset-bottom) + .2rem);
|
||||||
.merit-button{
|
.merit-button{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: $primary-color;
|
background: $primary-color;
|
||||||
|
|||||||
@@ -3,11 +3,8 @@
|
|||||||
<van-cell-group>
|
<van-cell-group>
|
||||||
<van-cell title="功德芳名" :value="person.name" is-link @click="onAction('name')"/>
|
<van-cell title="功德芳名" :value="person.name" is-link @click="onAction('name')"/>
|
||||||
<van-cell title="心愿" :value="dream" is-link @click="onAction('desire')" />
|
<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-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'">
|
<div class="add-merit-name" v-if="actionName === 'name'">
|
||||||
<h3 class="title">功德芳名</h3>
|
<h3 class="title">功德芳名</h3>
|
||||||
<div class="add-name">
|
<div class="add-name">
|
||||||
@@ -15,39 +12,36 @@
|
|||||||
<button class="btn" @click="addName">添加</button>
|
<button class="btn" @click="addName">添加</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="name-group">
|
<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}}
|
{{name.name}}
|
||||||
<i class="iconfont icon-biaodankongjianshanchu"></i>
|
<i class="iconfont icon-biaodankongjianshanchu" @click.stop="onDeleteName(name, index)"></i>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<button class="confirm" @click="showDialog = false">确认</button>
|
<button class="confirm" @click="onConfirmMeritName">确认</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="add-merit-name" v-if="actionName === 'desire'">
|
<div class="add-merit-name" v-if="actionName === 'desire'">
|
||||||
<h3 class="title">心愿</h3>
|
<h3 class="title">心愿</h3>
|
||||||
<div class="desire-input">
|
<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>
|
<span>{{dream.length}}/50</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="desire-quike">
|
<div class="desire-quike">
|
||||||
<div class="bar">
|
<div class="bar">
|
||||||
<span>快捷输入</span>
|
<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>
|
||||||
<div class="name-group">
|
<div class="name-group">
|
||||||
<span class="name">白头偕老</span>
|
<span class="name" v-for="(dream, index) in dreamList" :key="index" @click="desire = dream">{{dream}}</span>
|
||||||
<span class="name">白头偕老</span>
|
|
||||||
<span class="name">白头偕老</span>
|
|
||||||
<span class="name">白头偕老</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button class="confirm" @click="showDialog = false">确认</button>
|
<button class="confirm" @click="onConfirmDream">确认</button>
|
||||||
</div>
|
</div>
|
||||||
</van-popup>
|
</van-popup>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getMeritName, postMeritName } from '@/api';
|
import { deleteMeritName, getMeritName, postMeritName, getDreamList } from '@/api';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data(){
|
data(){
|
||||||
@@ -56,31 +50,57 @@ export default {
|
|||||||
showDialog: false,
|
showDialog: false,
|
||||||
actionName: 'name',
|
actionName: 'name',
|
||||||
person: {},
|
person: {},
|
||||||
|
name: '',
|
||||||
dream: '',
|
dream: '',
|
||||||
names: []
|
desire: '',
|
||||||
|
names: [],
|
||||||
|
dreamList: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
this.getName()
|
this.getName();
|
||||||
|
this.getDreamList();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onAction(name){
|
onAction(name){
|
||||||
this.showDialog = true;
|
this.showDialog = true;
|
||||||
this.actionName = name;
|
this.actionName = name;
|
||||||
},
|
},
|
||||||
|
onConfirmMeritName(){
|
||||||
|
this.$emit('change', {
|
||||||
|
...this.person,
|
||||||
|
merit_name_id: this.person.id,
|
||||||
|
dream: this.dream,
|
||||||
|
})
|
||||||
|
},
|
||||||
onSelectName(name){
|
onSelectName(name){
|
||||||
this.person = name;
|
this.person = name;
|
||||||
this.showDialog = false;
|
this.showDialog = false;
|
||||||
},
|
},
|
||||||
|
onConfirmDream(){
|
||||||
|
this.showDialog = false;
|
||||||
|
this.dream = this.desire;
|
||||||
|
this.onConfirmMeritName();
|
||||||
|
},
|
||||||
async addName(){
|
async addName(){
|
||||||
if(!this.name) return
|
if(!this.name) return
|
||||||
await postMeritName(this.name)
|
await postMeritName(this.name)
|
||||||
this.name = ''
|
this.name = ''
|
||||||
this.getName()
|
await this.getName()
|
||||||
|
},
|
||||||
|
async onDeleteName(name){
|
||||||
|
await deleteMeritName(name.id);
|
||||||
|
await this.getName();
|
||||||
},
|
},
|
||||||
async getName(){
|
async getName(){
|
||||||
const data = await getMeritName();
|
const data = await getMeritName();
|
||||||
this.names = data;
|
this.names = data;
|
||||||
|
},
|
||||||
|
//获取心愿列表
|
||||||
|
async getDreamList(){
|
||||||
|
const list = await getDreamList();
|
||||||
|
console.log(list)
|
||||||
|
this.dreamList = list;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
|
|
||||||
<div class="auto-donate-time">
|
<div class="auto-donate-time">
|
||||||
<div class="donate">
|
<div class="donate">
|
||||||
<span class="label">数量 {{ number}}</span>
|
<span class="label">数量</span>
|
||||||
<span class="time-cycle">
|
<span class="time-cycle">
|
||||||
<van-stepper v-model="num" step="1" @change="onChangeNumber"/>
|
<van-stepper v-model="num" step="1" @change="onChangeNumber"/>
|
||||||
</span>
|
</span>
|
||||||
@@ -42,7 +42,7 @@ export default {
|
|||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
number: {
|
number: {
|
||||||
handler: val => {
|
handler(val) {
|
||||||
this.num = val;
|
this.num = val;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<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 class="swiper-container" :options="swiperOption">
|
||||||
<swiper-slide>
|
<swiper-slide>
|
||||||
<div style="height: 100vw;" class="picture">
|
<div style="height: 100vw;" class="picture">
|
||||||
@@ -14,27 +14,31 @@
|
|||||||
<span>已有{{data.sales || 0}}人参与</span>
|
<span>已有{{data.sales || 0}}人参与</span>
|
||||||
</div>
|
</div>
|
||||||
</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">
|
||||||
<div class="support-head">
|
<div class="support-head">
|
||||||
<span class="label">供养者</span>
|
<span class="label">感恩功德</span>
|
||||||
<ul class="external">
|
<ul class="external">
|
||||||
<li class="active">实时</li>
|
<li :class="[listType === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType)">{{lType.name}}</li>
|
||||||
<li>月榜</li>
|
|
||||||
<li>总榜</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<user-merit></user-merit>
|
<user-merit v-for="pay in payList" :key="pay.id" :data="pay"></user-merit>
|
||||||
<user-merit></user-merit>
|
|
||||||
<user-merit></user-merit>
|
|
||||||
<user-merit></user-merit>
|
|
||||||
</div>
|
</div>
|
||||||
</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">
|
<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="caret-spec" >
|
||||||
<div class="head">
|
<div class="head">
|
||||||
<span>参与流程: </span>
|
<span>参与流程: </span>
|
||||||
@@ -46,12 +50,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<transition>
|
<transition>
|
||||||
<template>
|
<template>
|
||||||
<select-spec v-if="current === 0" v-model="spec_id" :data="data"></select-spec>
|
<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"></fill-information>
|
<fill-information v-if="current === 1" :data="data" @change="onDreamInfoChange"></fill-information>
|
||||||
</template>
|
</template>
|
||||||
</transition>
|
</transition>
|
||||||
<div class="next-group">
|
<div class="next-group">
|
||||||
<span class="total">合计:¥289</span>
|
<span class="total">合计:¥{{priceTotal}}</span>
|
||||||
<button class="next" @click="onNextStep">下一步</button>
|
<button class="next" @click="onNextStep">下一步</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -62,7 +66,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import 'swiper/css/swiper.css'
|
import 'swiper/css/swiper.css'
|
||||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||||
import { getGoodsDetail } from '@/api'
|
import { getGoodsDetail, getOrderCompare } from '@/api';
|
||||||
import SelectSpec from './components/select-spec.vue'
|
import SelectSpec from './components/select-spec.vue'
|
||||||
import FillInformation from './components/fill-information.vue';
|
import FillInformation from './components/fill-information.vue';
|
||||||
|
|
||||||
@@ -74,7 +78,10 @@ export default {
|
|||||||
FillInformation
|
FillInformation
|
||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
paddingBottom: 0,
|
||||||
|
fixedBottomHeight: 0,
|
||||||
query: this.$route.query,
|
query: this.$route.query,
|
||||||
showSpec: false,
|
showSpec: false,
|
||||||
checked: false,
|
checked: false,
|
||||||
@@ -83,6 +90,8 @@ export default {
|
|||||||
value: '',
|
value: '',
|
||||||
spec_id: '',
|
spec_id: '',
|
||||||
step: 0,
|
step: 0,
|
||||||
|
quantity: 1,
|
||||||
|
dreamInfo: null,
|
||||||
swiperOption: {
|
swiperOption: {
|
||||||
autoplay: 8000,
|
autoplay: 8000,
|
||||||
initialSlide: 1,
|
initialSlide: 1,
|
||||||
@@ -91,23 +100,84 @@ export default {
|
|||||||
onSlideChangeEnd: swiper => {
|
onSlideChangeEnd: swiper => {
|
||||||
console.log('onSlideChangeEnd', swiper.realIndex)
|
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(){
|
mounted(){
|
||||||
this.getGoodsDetail('common');
|
this.getGoodsDetail('common');
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// dreamInfo: 心愿信息
|
||||||
|
onDreamInfoChange(dreamInfo){
|
||||||
|
this.dreamInfo = dreamInfo;
|
||||||
|
},
|
||||||
|
getSelectedSpec(){
|
||||||
|
const spec = this.data.spec.find(spec => spec.id === this.spec_id);
|
||||||
|
return spec;
|
||||||
|
},
|
||||||
onNextStep(){
|
onNextStep(){
|
||||||
this.current += 1;
|
this.current += 1;
|
||||||
if(this.current > 3){
|
const selectedSpec = this.getSelectedSpec();
|
||||||
this.current = 0
|
|
||||||
|
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){
|
async getGoodsDetail(type){
|
||||||
const { goods_id, temple_id } = this.$route.query;
|
const { goods_id, temple_id } = this.$route.query;
|
||||||
const response = await getGoodsDetail(type, goods_id, temple_id);
|
const response = await getGoodsDetail(type, goods_id, temple_id);
|
||||||
this.data = response;
|
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">
|
<style lang="scss">
|
||||||
.goods-detail{
|
.goods-detail{
|
||||||
|
.goods-content{
|
||||||
|
padding-left: .3rem;
|
||||||
|
padding-right: .3rem;
|
||||||
|
* {
|
||||||
|
max-width: 100%;
|
||||||
|
font-size: .35rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
.support{
|
.support{
|
||||||
.support-head{
|
.support-head{
|
||||||
padding: 0 .4rem;
|
padding: 0 .4rem;
|
||||||
@@ -155,6 +233,7 @@ export default {
|
|||||||
font-size: .5rem;
|
font-size: .5rem;
|
||||||
padding-top: .2rem;
|
padding-top: .2rem;
|
||||||
color: #19282E;
|
color: #19282E;
|
||||||
|
line-height: 1.3;
|
||||||
}
|
}
|
||||||
.introduction{
|
.introduction{
|
||||||
font-size: .37rem;
|
font-size: .37rem;
|
||||||
@@ -190,20 +269,23 @@ export default {
|
|||||||
background: white;
|
background: white;
|
||||||
border-top: .01rem solid #ddd;
|
border-top: .01rem solid #ddd;
|
||||||
padding: .3rem;
|
padding: .3rem;
|
||||||
|
|
||||||
|
}
|
||||||
.merit-button{
|
.merit-button{
|
||||||
display: inline-block;
|
display: block;
|
||||||
background: $primary-color;
|
background: $primary-color;
|
||||||
color: white;
|
color: white;
|
||||||
height: 1.2rem;
|
height: 1.2rem;
|
||||||
font-size: .37rem;
|
font-size: .37rem;
|
||||||
min-width: 60%;
|
min-width: 60%;
|
||||||
padding: 0 .53rem;
|
padding: 0 .53rem;
|
||||||
|
margin-top: .3rem;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
border: .01rem solid $primary-color;
|
border: .01rem solid $primary-color;
|
||||||
border-radius: .13rem;
|
border-radius: .13rem;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.caret-spec{
|
.caret-spec{
|
||||||
padding-bottom: 1.6rem;
|
|
||||||
.head{
|
.head{
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -257,12 +339,8 @@ export default {
|
|||||||
.next-group{
|
.next-group{
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: .4rem ;
|
padding: .2rem .4rem ;
|
||||||
position: absolute;
|
|
||||||
background: white;
|
background: white;
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-top: 1px solid #ededed;
|
border-top: 1px solid #ededed;
|
||||||
.total{
|
.total{
|
||||||
|
|||||||
+28
-48
@@ -4,47 +4,24 @@
|
|||||||
<van-search v-model="value" readonly placeholder="寺院、主持、监寺" @click="onSearch" />
|
<van-search v-model="value" readonly placeholder="寺院、主持、监寺" @click="onSearch" />
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="swiper">
|
<div class="swiper">
|
||||||
<van-swipe
|
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
|
||||||
class="my-swipe"
|
<van-swipe-item v-for="(banner, index) in data.banner_data" :key="index">
|
||||||
:autoplay="3000"
|
|
||||||
indicator-color="white"
|
|
||||||
>
|
|
||||||
<van-swipe-item
|
|
||||||
v-for="(banner, index) in data.banner_data"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<img :src="banner.cover" alt="" />
|
<img :src="banner.cover" alt="" />
|
||||||
</van-swipe-item>
|
</van-swipe-item>
|
||||||
</van-swipe>
|
</van-swipe>
|
||||||
</div>
|
</div>
|
||||||
<van-swipe :loop="false">
|
<van-swipe :loop="false">
|
||||||
<van-swipe-item
|
<van-swipe-item v-for="(item, index) in data.icon_data" :key="index">
|
||||||
v-for="(item, index) in data.icon_data"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<van-grid :border="false" class="home-grid-nav">
|
<van-grid :border="false" class="home-grid-nav">
|
||||||
<van-grid-item
|
<van-grid-item icon="photo-o" :text="nav.name" v-for="(nav, _index) in item" :key="_index" @click="locationTo(nav)">
|
||||||
icon="photo-o"
|
<img :src="nav.icon_url" class="nav-icon" slot="icon" />
|
||||||
: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-item>
|
||||||
</van-grid>
|
</van-grid>
|
||||||
</van-swipe-item>
|
</van-swipe-item>
|
||||||
</van-swipe>
|
</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 vertical loop :autoplay="3000" :touchable="false">
|
||||||
<van-swipe-item
|
<van-swipe-item v-for="order in data.order_data" :key="order.id">
|
||||||
v-for="order in data.order_data"
|
|
||||||
:key="order.id"
|
|
||||||
>
|
|
||||||
<user-dynamic :data="order"></user-dynamic>
|
<user-dynamic :data="order"></user-dynamic>
|
||||||
</van-swipe-item>
|
</van-swipe-item>
|
||||||
</van-swipe>
|
</van-swipe>
|
||||||
@@ -57,17 +34,9 @@
|
|||||||
<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>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<van-swipe
|
<van-swipe class="merit-group" :width="140" :loop="false" :show-indicators="false">
|
||||||
class="merit-group"
|
<van-swipe-item v-for="goods in data.common_data" :key="goods.id">
|
||||||
:width="140"
|
<div class="merit" @click="onToGoods(goods)">
|
||||||
:loop="false"
|
|
||||||
:show-indicators="false"
|
|
||||||
>
|
|
||||||
<van-swipe-item
|
|
||||||
v-for="goods in data.common_data"
|
|
||||||
:key="goods.id"
|
|
||||||
>
|
|
||||||
<div class="merit">
|
|
||||||
<img :src="goods.cover_url" alt="" />
|
<img :src="goods.cover_url" alt="" />
|
||||||
<p class="title">{{ goods.alias }}</p>
|
<p class="title">{{ goods.alias }}</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -76,7 +45,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="divider"></div>
|
<div class="divider"></div>
|
||||||
<div class="panel">
|
<div class="panel" v-if="data.dynamic_data.length > 0">
|
||||||
<div class="panel-head">
|
<div class="panel-head">
|
||||||
<span class="title">进展状态</span>
|
<span class="title">进展状态</span>
|
||||||
<arrow-more @click="onMoreProcess"></arrow-more>
|
<arrow-more @click="onMoreProcess"></arrow-more>
|
||||||
@@ -95,13 +64,13 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getTempleIndex } from "@/api";
|
import { getTempleIndex } from '@/api';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
query: this.$route.query,
|
query: this.$route.query,
|
||||||
value: "",
|
value: '',
|
||||||
data: null,
|
data: null,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@@ -109,6 +78,15 @@ export default {
|
|||||||
this.getTempleIndex();
|
this.getTempleIndex();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
onToGoods(goods){
|
||||||
|
this.$router.push({
|
||||||
|
name: 'goods-detail',
|
||||||
|
query: {
|
||||||
|
goods_id: goods.goods_id,
|
||||||
|
temple_id: goods.temple_id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
locationTo(nav) {
|
locationTo(nav) {
|
||||||
window.location.href = nav.url;
|
window.location.href = nav.url;
|
||||||
},
|
},
|
||||||
@@ -119,14 +97,14 @@ export default {
|
|||||||
},
|
},
|
||||||
onMoreProcess() {
|
onMoreProcess() {
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
name: "buddha-activity",
|
name: 'buddha-activity',
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
onSearch() {
|
onSearch() {
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
name: 'temple-list',
|
name: 'temple-list',
|
||||||
query: {}
|
query: {},
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
sliceNav(navData) {
|
sliceNav(navData) {
|
||||||
const nav = [];
|
const nav = [];
|
||||||
@@ -202,7 +180,9 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.merit-group{
|
||||||
|
padding-bottom: .4rem;
|
||||||
|
}
|
||||||
.merit {
|
.merit {
|
||||||
width: 3.39rem;
|
width: 3.39rem;
|
||||||
height: 3.39rem;
|
height: 3.39rem;
|
||||||
|
|||||||
+26
-14
@@ -6,8 +6,13 @@
|
|||||||
<div class="pay-info">
|
<div class="pay-info">
|
||||||
<h1 class="amount"><b>¥</b>{{query.amount}}</h1>
|
<h1 class="amount"><b>¥</b>{{query.amount}}</h1>
|
||||||
<div class="order-info">
|
<div class="order-info">
|
||||||
<h3 class="title">{{query.title}}</h3>
|
<h3 class="goods_title">{{query.title}}</h3>
|
||||||
<p class="desc">{{query.subTitle}}</p>
|
|
||||||
|
<div class="desc">
|
||||||
|
<!-- subTitle: 规格名称 -->
|
||||||
|
<span>{{query.subTitle}}</span>
|
||||||
|
<span>数量:x{{query.quantity}}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pay-type">
|
<div class="pay-type">
|
||||||
@@ -34,7 +39,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { createFriendlyDayOrder, createBrickDayOrder, createPay, createMeritBoxOrder } from '@/api';
|
import { createFriendlyDayOrder, createBrickDayOrder, createPay, createMeritBoxOrder, createCommonOrder } from '@/api';
|
||||||
import { requestPayment } from '@/common/wechat-web';
|
import { requestPayment } from '@/common/wechat-web';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -49,7 +54,7 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
async onCreatePayOrder(){
|
async onCreatePayOrder(){
|
||||||
// 创建日行一善支付订单
|
// 创建日行一善支付订单
|
||||||
if(this.query.goods_type === '-1'){
|
if(this.query.goods_type == '1'){
|
||||||
const request = {
|
const request = {
|
||||||
...this.query,
|
...this.query,
|
||||||
|
|
||||||
@@ -59,13 +64,13 @@ export default {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
// 创建填砖加瓦订单
|
// 创建填砖加瓦订单
|
||||||
if(this.query.goods_type === '-2'){
|
if(this.query.goods_type == '2'){
|
||||||
const request = {
|
const request = {
|
||||||
...this.query,
|
...this.query,
|
||||||
|
|
||||||
}
|
}
|
||||||
const order = await createBrickDayOrder(request)
|
const order = await createBrickDayOrder(request)
|
||||||
this.onPayment(order)
|
await this.onPayment(order)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -80,19 +85,24 @@ export default {
|
|||||||
return
|
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){
|
async onPayment(order){
|
||||||
console.log(order)
|
console.log(order)
|
||||||
const result = await createPay(order.id);
|
const result = await createPay(order.id);
|
||||||
const payResult = await requestPayment(result)
|
const payResult = await requestPayment(result)
|
||||||
console.log(payResult)
|
await this.$router.push({
|
||||||
this.$router.push({
|
|
||||||
name: 'pay-result',
|
name: 'pay-result',
|
||||||
query: {
|
query: {
|
||||||
...result,
|
...result,
|
||||||
@@ -122,14 +132,16 @@ export default {
|
|||||||
.order-info{
|
.order-info{
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
padding: .4rem;
|
padding: .4rem;
|
||||||
.title{
|
.goods_title{
|
||||||
font-size: .4rem;
|
font-size: .4rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.desc{
|
.desc{
|
||||||
padding-top: .3rem;
|
padding-top: .5rem;
|
||||||
color: #666;
|
color: #666;
|
||||||
font-size: .35rem;
|
font-size: .35rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pay-type{
|
.pay-type{
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</van-search>
|
</van-search>
|
||||||
<div class="operation-bar">
|
<div class="operation-bar">
|
||||||
<div class="position">
|
<div class="position" @click="onGetLocation">
|
||||||
<span class="iconfont icon-dingwei"></span>
|
<span class="iconfont icon-dingwei"></span>
|
||||||
<span>重新定位</span>
|
<span>重新定位</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -22,14 +22,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="temple-list-container" :style="{height: containerHeight + 'px'}" >
|
<div >
|
||||||
<!-- <div class="temple-container content" v-if="mode === 'list'">
|
<!-- <div class="temple-container content" v-if="mode === 'list'">
|
||||||
<temple v-for="i in 10" :key="i"></temple>
|
<temple v-for="i in 10" :key="i"></temple>
|
||||||
</div> -->
|
</div> -->
|
||||||
|
<div class="temple-list-container" :style="{height: containerHeight + 'px'}" v-if="mode === 'list'" >
|
||||||
<scroll-view
|
<scroll-view
|
||||||
v-if="mode === 'list'"
|
|
||||||
class="temple-container content"
|
class="temple-container content"
|
||||||
:height="containerHeight - 20"
|
:height="containerHeight - 20"
|
||||||
|
ref="scroll"
|
||||||
pulldown
|
pulldown
|
||||||
pullup
|
pullup
|
||||||
@pulldown="refresh"
|
@pulldown="refresh"
|
||||||
@@ -37,8 +39,9 @@
|
|||||||
>
|
>
|
||||||
<temple v-for="temple in templeList" :key="temple.id" :data="temple"></temple>
|
<temple v-for="temple in templeList" :key="temple.id" :data="temple"></temple>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
<div class="temple-map" id="container" v-show="mode === 'map'">
|
</div>
|
||||||
|
<div class="temple-map" v-show="mode === 'map'" :style="{height: containerHeight + 'px'}">
|
||||||
|
<div id="container" style="height: 100%"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -47,6 +50,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { getTempleList } from '@/api';
|
import { getTempleList } from '@/api';
|
||||||
import TMAPLoader from '@/common/tmap';
|
import TMAPLoader from '@/common/tmap';
|
||||||
|
import { getLocation } from '@/common/wechat-web';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data(){
|
data(){
|
||||||
@@ -57,42 +61,79 @@ export default {
|
|||||||
page: 1,
|
page: 1,
|
||||||
templeList: [],
|
templeList: [],
|
||||||
lng: '',
|
lng: '',
|
||||||
lat: ''
|
lat: '',
|
||||||
|
map: null,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
inject: ['root', 'tabbar'],
|
inject: ['root', 'tabbar'],
|
||||||
|
computed: {
|
||||||
|
scroll(){
|
||||||
|
return this.$refs.scroll
|
||||||
|
}
|
||||||
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
const { offsetHeight } = this.root.$refs.tabbar.$el;
|
const { offsetHeight } = this.root.$refs.tabbar.$el;
|
||||||
this.containerHeight = window.innerHeight - this.$refs.topbar.offsetHeight - offsetHeight - 20;
|
this.containerHeight = window.innerHeight - this.$refs.topbar.offsetHeight - offsetHeight - 20;
|
||||||
})
|
})
|
||||||
|
|
||||||
|
this.getTempleList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initMap(){
|
||||||
TMAPLoader.load({
|
TMAPLoader.load({
|
||||||
key: process.env.VUE_APP_TMAP_KEY
|
key: process.env.VUE_APP_TMAP_KEY
|
||||||
}).then(TMap => {
|
}).then(TMap => {
|
||||||
console.log(TMap)
|
|
||||||
var center = new TMap.LatLng(39.984104, 116.307503);
|
var center = new TMap.LatLng(39.984104, 116.307503);
|
||||||
//初始化地图
|
//初始化地图
|
||||||
var map = new TMap.Map("container", {
|
var map = new TMap.Map("container", {
|
||||||
zoom:12,//设置地图缩放级别
|
zoom:12,//设置地图缩放级别
|
||||||
center: center//设置地图中心点坐标
|
center: center//设置地图中心点坐标
|
||||||
});
|
});
|
||||||
console.log(map)
|
this.map = map;
|
||||||
|
this.setMarker(TMap)
|
||||||
})
|
})
|
||||||
this.getTempleList();
|
|
||||||
},
|
},
|
||||||
methods: {
|
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(){
|
async getTempleList(){
|
||||||
const res = await getTempleList(this.keyword, this.lng, this.lat, this.page);
|
const res = await getTempleList(this.keyword, this.lng, this.lat, this.page);
|
||||||
console.log(res)
|
|
||||||
if(this.page === 1){
|
if(this.page === 1){
|
||||||
this.total = res.total;
|
this.total = res.total;
|
||||||
this.templeList = res.results;
|
this.templeList = res.results;
|
||||||
} else {
|
} else {
|
||||||
this.templeList = this.templeList.concat(res.results);
|
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){
|
onModeSwitch(mode){
|
||||||
this.mode = mode;
|
this.mode = mode;
|
||||||
|
if(mode === 'map' && !this.map){
|
||||||
|
this.initMap();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
onCancel(){
|
onCancel(){
|
||||||
this.keyword = ''
|
this.keyword = ''
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="user-certificate">
|
<div class="user-certificate" :style="style">
|
||||||
<div class="certificate" v-for="i in 10" :key="i">
|
<div class="certificate" v-for="(li, index) in list" :key="index">
|
||||||
<img class="img" src="" alt="">
|
<img class="img" :src="li.picture_url" alt="">
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<h3 class="title">为佛像贴金身,每日功德</h3>
|
<h3 class="title">{{li.goods_name}}</h3>
|
||||||
<span class="date">2021-10-3</span>
|
<span class="date">{{li.date}}</span>
|
||||||
<p class="number">第<span>12</span>份功德</p>
|
<p class="number">第<span>{{li.count}}</span>份功德</p>
|
||||||
<div class="download">
|
<div class="download">
|
||||||
<span class="iconfont icon-24px"></span>
|
<span class="iconfont icon-24px"></span>
|
||||||
<p>下载功德证书</p>
|
<p>下载功德证书</p>
|
||||||
@@ -17,17 +17,43 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.user-certificate{
|
.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: #f5f5f5 url('https://img1.baidu.com/it/u=3658625472,1613220951&fm=26&fmt=auto') center top no-repeat;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
padding-top: 4.67rem;
|
padding-top: 4.67rem;
|
||||||
|
padding-bottom: .5rem;
|
||||||
.certificate{
|
.certificate{
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: .37rem;
|
font-size: .37rem;
|
||||||
|
|||||||
@@ -64,28 +64,23 @@
|
|||||||
<div class="head">
|
<div class="head">
|
||||||
<span class="title">排行榜</span>
|
<span class="title">排行榜</span>
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<span class="current">实时</span>
|
<span :class="[li.id === type_id && 'current']" v-for="(li, index) in types" :key="index" @click="onNav(li)">{{li.name}}</span>
|
||||||
<span>月榜</span>
|
|
||||||
<span>总榜</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<div class="user-merit-course border-bottom" v-for="i in 10" :key="i">
|
<div class="user-merit-course border-bottom" v-for="(course, index) in data.compare" :key="index">
|
||||||
<img
|
<img :src="course.avatar" alt="" />
|
||||||
src="https://img0.baidu.com/it/u=199023397,1701150760&fm=26&fmt=auto"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<div class="profile">
|
<div class="profile">
|
||||||
<div>
|
<div>
|
||||||
<div class="name">
|
<div class="name">
|
||||||
<span>李晓华</span>
|
<span>{{course.nickname}}</span>
|
||||||
<span>湖南长沙</span>
|
<span></span>
|
||||||
</div>
|
</div>
|
||||||
<p>3</p>
|
<p>{{course.rank}}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="result">
|
<div class="result">
|
||||||
<p class="money">23 遍</p>
|
<p class="money">{{course.sum_count}} 遍</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -109,6 +104,12 @@ export default {
|
|||||||
return {
|
return {
|
||||||
query,
|
query,
|
||||||
data: null,
|
data: null,
|
||||||
|
type_id: 1,
|
||||||
|
types: [
|
||||||
|
{ id: 1, name: '实时' },
|
||||||
|
{ id: 2, name: '月榜' },
|
||||||
|
{ id: 3, name: '总榜' },
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
@@ -116,9 +117,13 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async getCourseDetail(){
|
async getCourseDetail(){
|
||||||
const res = await getCourseDetail(this.query.id);
|
const res = await getCourseDetail(this.query.id, this.type_id);
|
||||||
this.data = res;
|
this.data = res;
|
||||||
},
|
},
|
||||||
|
onNav(li){
|
||||||
|
this.type_id = li.id;
|
||||||
|
this.getCourseDetail();
|
||||||
|
},
|
||||||
onToCount(){
|
onToCount(){
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
name: 'user-course-count',
|
name: 'user-course-count',
|
||||||
|
|||||||
@@ -7,7 +7,16 @@
|
|||||||
<p>使用寺院联盟遇到任何疑问都可以联系我</p>
|
<p>使用寺院联盟遇到任何疑问都可以联系我</p>
|
||||||
</div>
|
</div>
|
||||||
</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="">
|
<img src="https://img1.baidu.com/it/u=2403234292,1073721747&fm=26&fmt=auto" alt="">
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<h1>在线客服</h1>
|
<h1>在线客服</h1>
|
||||||
@@ -28,14 +37,32 @@
|
|||||||
<h1>客服微信号</h1>
|
<h1>客服微信号</h1>
|
||||||
<p>点击即可复制微信号,在微信中添加好友,我们会及时与您联系</p>
|
<p>点击即可复制微信号,在微信中添加好友,我们会及时与您联系</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
<img class="qrcode" src="https://login.weixin.qq.com/qrcode/4eUoxEzS0A==" alt="">
|
<img class="qrcode" :src="qrcode" alt="">
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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>
|
</script>
|
||||||
|
|
||||||
@@ -76,11 +103,19 @@ export default {
|
|||||||
border-radius: .27rem;
|
border-radius: .27rem;
|
||||||
padding:.2rem .4rem ;
|
padding:.2rem .4rem ;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
img{
|
img{
|
||||||
width: 1.07rem;
|
width: 1.07rem;
|
||||||
height: 1.07rem;
|
height: 1.07rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-right: .13rem;
|
margin-right: .3rem;
|
||||||
|
}
|
||||||
|
.phone{
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
}
|
}
|
||||||
.info{
|
.info{
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -88,6 +123,9 @@ export default {
|
|||||||
h1{
|
h1{
|
||||||
font-size: .4rem;
|
font-size: .4rem;
|
||||||
margin-bottom: .4rem;
|
margin-bottom: .4rem;
|
||||||
|
.wechat-account{
|
||||||
|
color: rgb(167, 54, 54);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
p{
|
p{
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
@@ -98,6 +136,7 @@ export default {
|
|||||||
}
|
}
|
||||||
.qrcode{
|
.qrcode{
|
||||||
width: 4rem;
|
width: 4rem;
|
||||||
|
height: 4rem;
|
||||||
display: block;
|
display: block;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
|
|||||||
@@ -31,6 +31,7 @@
|
|||||||
<div class="tab-order" @click="$router.push('/user/order?current=1')">
|
<div class="tab-order" @click="$router.push('/user/order?current=1')">
|
||||||
<span class="iconfont icon-qianbao"></span>
|
<span class="iconfont icon-qianbao"></span>
|
||||||
<p>待支付</p>
|
<p>待支付</p>
|
||||||
|
<b class="badge">1</b>
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-order" @click="$router.push('/user/order?current=2')">
|
<div class="tab-order" @click="$router.push('/user/order?current=2')">
|
||||||
<span class="iconfont icon-dingdanchulizhong"></span>
|
<span class="iconfont icon-dingdanchulizhong"></span>
|
||||||
@@ -198,6 +199,7 @@ export default {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: .37rem;
|
font-size: .37rem;
|
||||||
color: #555;
|
color: #555;
|
||||||
|
position: relative;
|
||||||
.iconfont{
|
.iconfont{
|
||||||
font-size: .67rem;
|
font-size: .67rem;
|
||||||
color: #555;
|
color: #555;
|
||||||
@@ -207,6 +209,17 @@ export default {
|
|||||||
font-size: .35rem;
|
font-size: .35rem;
|
||||||
color: #666;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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}" />
|
<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="temple-list-container" :style="{height: containerHeight + 'px'}">
|
<div class="temple-list-container" :style="{height: containerHeight + 'px'}">
|
||||||
<van-tabs v-model="activeName">
|
<van-tabs v-model="status" @change="onOrderChange">
|
||||||
<van-tab title="全部" name="a">
|
<van-tab :title="order.name" :name="order.status" v-for="order in orders" :key="order.status">
|
||||||
<div class="order-container">
|
<div class="order-container">
|
||||||
<order></order>
|
<order v-for="li in order.list" :key="li.id" :data="li"></order>
|
||||||
<order></order>
|
|
||||||
<order></order>
|
|
||||||
<order></order>
|
|
||||||
<order></order>
|
|
||||||
<order></order>
|
|
||||||
<order></order>
|
|
||||||
<order></order>
|
|
||||||
<order></order>
|
|
||||||
</div>
|
</div>
|
||||||
</van-tab>
|
</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>
|
</van-tabs>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import TMAPLoader from '@/common/tmap';
|
import { getOrderList } from '@/api'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
containerHeight: 0,
|
containerHeight: window.innerHeight,
|
||||||
keyword: '',
|
status: '0',
|
||||||
activeName: ''
|
orders: [
|
||||||
|
{ status: 0, name: '全部', list: [] },
|
||||||
|
{ status: 1, name: '待支付', list: [] },
|
||||||
|
{ status: 2, name: '处理中', list: [] },
|
||||||
|
{ status: 3, name: '已处理', list: [] },
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
inject: ['root', 'tabbar'],
|
inject: ['root', 'tabbar'],
|
||||||
mounted(){
|
mounted(){
|
||||||
this.$nextTick(() => {
|
this.getOrderList();
|
||||||
const { offsetHeight } = this.root.$refs.tabbar.$el;
|
},
|
||||||
this.containerHeight = window.innerHeight - this.$refs.topbar.offsetHeight - offsetHeight - 20;
|
methods: {
|
||||||
})
|
async getOrderList(){
|
||||||
TMAPLoader.load({
|
const res = await getOrderList(this.status);
|
||||||
key: process.env.VUE_APP_TMAP_KEY
|
console.log(res)
|
||||||
}).then(TMap => {
|
const current = this.orders.find(item => item.status === this.status);
|
||||||
console.log(TMap)
|
current.list = res.results
|
||||||
var center = new TMap.LatLng(39.984104, 116.307503);
|
},
|
||||||
//初始化地图
|
onOrderChange(e){
|
||||||
var map = new TMap.Map("container", {
|
console.log(e, this.status)
|
||||||
zoom:12,//设置地图缩放级别
|
this.getOrderList();
|
||||||
center: center//设置地图中心点坐标
|
}
|
||||||
});
|
|
||||||
console.log(map)
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
+7
-2
@@ -47,6 +47,12 @@ const routes = [
|
|||||||
meta: { title: '进展活动', navBarBackgroundColor: 'white' },
|
meta: { title: '进展活动', navBarBackgroundColor: 'white' },
|
||||||
component: () => import('@/pages/buddha-activity')
|
component: () => import('@/pages/buddha-activity')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/buddha-detail',
|
||||||
|
name: 'buddha-detail',
|
||||||
|
meta: { title: '进展活动详情', navBarBackgroundColor: 'white' },
|
||||||
|
component: () => import('@/pages/buddha-detail')
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/merit-list',
|
path: '/merit-list',
|
||||||
name: 'merit-list',
|
name: 'merit-list',
|
||||||
@@ -181,8 +187,7 @@ const routes = [
|
|||||||
const router = new Router({
|
const router = new Router({
|
||||||
mode: 'hash',
|
mode: 'hash',
|
||||||
routes,
|
routes,
|
||||||
scrollBehavior(to, from, savedPosition){
|
scrollBehavior(){
|
||||||
console.log('savedPositon', savedPosition)
|
|
||||||
return {
|
return {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0
|
y: 0
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
publicPath: '/wap/',
|
publicPath: '/wap/',
|
||||||
@@ -20,6 +21,13 @@ module.exports = {
|
|||||||
}).end();
|
}).end();
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
configureWebpack: config => {
|
||||||
|
config.plugins.forEach(plugin => {
|
||||||
|
if(plugin instanceof HtmlWebpackPlugin){
|
||||||
|
plugin.options.title = '自在福田 - 寺庙联盟'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
css: {
|
css: {
|
||||||
loaderOptions: {
|
loaderOptions: {
|
||||||
scss: {
|
scss: {
|
||||||
|
|||||||
+2
-2
@@ -12,11 +12,11 @@
|
|||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
|
||||||
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
||||||
<link rel="icon" href="/wap/favicon.ico">
|
<link rel="icon" href="/wap/favicon.ico">
|
||||||
<title>temple-union</title>
|
<title>自在福田</title>
|
||||||
<link href="/wap/js/app.js" rel="preload" as="script"></head>
|
<link href="/wap/js/app.js" rel="preload" as="script"></head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
<strong>We're sorry but temple-union doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
<strong>We're sorry but 自在福田 - 寺庙联盟 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
</noscript>
|
</noscript>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
|
|||||||
+769
-382
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user