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

update

Browse Source
This commit is contained in:
wenfp
2025-05-21 15:48:27 +08:00
parent 553cc38b67
commit b3862ac356
33 changed files with 35390 additions and 16882 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.development
+1 -1
View File
@@ -1,4 +1,4 @@
VUE_APP_HOST=https://test-temple.wdx-tc.com/
VUE_APP_HOST=https://admin.zizaifutian.com/
# VUE_APP_HOST=https://demo.6bsq.com/
NODE_ENV = development
VUE_APP_TMAP_KEY=ZFGBZ-76ICF-BG5JY-NH4HX-MQOOJ-VJB4E
.env.production
+1 -1
View File
@@ -1,3 +1,3 @@
VUE_APP_HOST=https://prod-temple.wdx-tc.com/
VUE_APP_HOST=https://admin.zizaifutian.com/
VUE_APP_TMAP_KEY=ZFGBZ-76ICF-BG5JY-NH4HX-MQOOJ-VJB4E
NODE_ENV=production
package-lock.json
Generated
+17673
View File
File diff suppressed because it is too large Load Diff
package.json
+1 -1
View File
@@ -35,7 +35,7 @@
"compression-webpack-plugin": "5.0.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.43.4",
"sass": "^1.89.0",
"sass-loader": "^7.1.0",
"sass-resources-loader": "^2.2.4",
"vue-template-compiler": "^2.6.11"
pnpm-lock.yaml
Generated
+11102 -10795
View File
File diff suppressed because it is too large Load Diff
src/api/index.js
+55 -49
View File
@@ -1,4 +1,4 @@
import service from './service';
import service from "./service";
function formatRegion(data) {
const result = [];
@@ -6,52 +6,52 @@ function formatRegion(data){
const obj = {
value: data[i].id,
text: data[i].name,
}
};
if (data[i].children) {
obj.children = formatRegion(data[i].children)
obj.children = formatRegion(data[i].children);
}
result.push(obj)
result.push(obj);
}
return result;
}
// 获取法师称谓
const getMonkAppellation = () => service.get('/api/master/get-rank');
const getMonkAppellation = () => service.get("/api/master/get-rank");
// 获取省市区数据
const getRegion = async () => {
const region = localStorage.getItem('region');
const region = localStorage.getItem("region");
let data = [];
if (region === null) {
const _data = await service.get('/api/region/get-region');
const _data = await service.get("/api/region/get-region");
data = [].concat(formatRegion(_data));
localStorage.setItem('region', JSON.stringify(data))
localStorage.setItem("region", JSON.stringify(data));
} else {
data = JSON.parse(region)
}
return data
data = JSON.parse(region);
}
return data;
};
// 寺院进驻
const postTemple = data => service.post('/api/temple/settled', data);
const postTemple = (data) => service.post("/api/temple/settled", data);
// 寺院进驻协议
const getTempleAgreement = () => service.get('/api/temple-agreement');
const getTempleAgreement = () => service.get("/api/temple-agreement");
// 上传
const uploadFile = data => service.post('/api/upload', data);
const uploadFile = (data) => service.post("/api/upload", data);
// 认证法师提交
const certifyMonk = data => service.post('/api/master/certify', data);
const certifyMonk = (data) => service.post("/api/master/certify", data);
// 用户数据
const getUserData = () => service.get('/api/get-user-data');
const getUserData = () => service.get("/api/get-user-data");
// 获取短信验证码
const getMobileValidateCode = mobile => service.post('/api/send-sms', { mobile });
const getMobileValidateCode = (mobile) => service.post("/api/send-sms", { mobile });
// 验证短信验证码
const postMobileCode = (mobile, code) => service.post('/api/sms-validate', { mobile, code });
const postMobileCode = (mobile, code) => service.post("/api/sms-validate", { mobile, code });
// 添砖加瓦日行一善商品
const getGoodsDetail = (goods_type, goods_id, temple_id) => service.get(`/api/${goods_type}/get-info?id=${goods_id}&temple_id=${temple_id}`);
@@ -60,31 +60,31 @@ const getGoodsDetail = (goods_type, goods_id, temple_id) => service.get(`/api/${
const getGoodsLightDetail = (goods_type, goods_id, temple_id) => service.get(`/api/temple/light?temple_id=${temple_id}`);
// 创建日行一善商品订单
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 createCommonOrder = (data) => service.post(`/api/order/create-common`, data);
//创建佛前供灯订单
const createLightOrder = data => service.post(`/api/order/create-light`, data);
const createLightOrder = (data) => service.post(`/api/order/create-light`, data);
// 创建添砖加瓦订单
const createBrickDayOrder = data => service.post('/api/order/create-tile', data);
const createBrickDayOrder = (data) => service.post("/api/order/create-tile", data);
// 获取功德芳名
const getMeritName = () => service.get(`/api/order/get-merit-list`)
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 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 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}`);
// 获取功课列表
const getCourseList = () => service.get(`/api/course/get-list`);
@@ -99,55 +99,58 @@ const getTempleIndex = (temple_id = 1) => service.get(`/api/temple/index?temple_
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}`);
// 添加关注
const toggleCollect = dynamic_id => service.get(`/api/dynamic/collect?dynamic_id=${dynamic_id}`);
const toggleCollect = (dynamic_id) => service.get(`/api/dynamic/collect?dynamic_id=${dynamic_id}`);
// 根据订单ID获取支付参数
const createPay = order_id => service.get(`/api/order/pay?order_id=${order_id}`);
const createPay = (order_id) => service.get(`/api/order/pay?order_id=${order_id}`);
// 获取随喜金额列表
const getRandMoney = () => service.get(`/api/order/get-rand-money`)
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, domain = '3') => service.get(`/api/temple/get-merit-box?temple_id=${temple_id}&type=${type}&page=${page}&size=${size}&domain=${domain}`,)
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)
const createMeritBoxOrder = (data) => service.post(`/api/order/create-merit-box`, data);
// 获取动态（佛事）列表
const getDynamicData = (temple_id = '', page = 1, goods_id = '', size = 10) => service.get(`/api/dynamic/get-page?temple_id=${temple_id}&page=${page}&size=${size}&goods_id=${goods_id}`);
const getDynamicData = (temple_id = "", page = 1, goods_id = "", size = 10) => service.get(`/api/dynamic/get-page?temple_id=${temple_id}&page=${page}&size=${size}&goods_id=${goods_id}`);
// 获取动态列表
const getDynamicDataByGoodsId = (temple_id = '', page = 1, goods_id = '', goods_type = '', size = 10) => service.get(`/api/dynamic/get-list?temple_id=${temple_id}&page=${page}&size=${size}&goods_id=${goods_id}&goods_type=${goods_type}`);
const getDynamicDataByGoodsId = (temple_id = "", page = 1, goods_id = "", goods_type = "", size = 10) =>
service.get(`/api/dynamic/get-list?temple_id=${temple_id}&page=${page}&size=${size}&goods_id=${goods_id}&goods_type=${goods_type}`);
// 获取动态（佛事）详情
const getDynamicDetail = (dynamic_id = '') => service.get(`/api/dynamic/detail?id=${dynamic_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}`);
// 获取订单榜
const getOrderCompare = (temple_id = '1', page = 1, type = '', goods_id = '', goods_type = '', size = 3) => service.get(`/api/order/get-compare?temple_id=${temple_id}&page=${page}&type=${type}&goods_id=${goods_id}&goods_type=${goods_type}&limit=${size}`);
const getOrderCompare = (temple_id = "1", page = 1, type = "", goods_id = "", goods_type = "", size = 3) =>
service.get(`/api/order/get-compare?temple_id=${temple_id}&page=${page}&type=${type}&goods_id=${goods_id}&goods_type=${goods_type}&limit=${size}`);
// 根据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 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}`)
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}`);
// 我的关注
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 getOrderList = (status = 0, page = 1, size = 10) => service.get(`/api/order/get-page?status=${status}&page=${page}&size=${size}`);
// 订单详情
const getOrder = order_id => service.get(`/api/order/details?id=${order_id}`);
const getOrder = (order_id) => service.get(`/api/order/details?id=${order_id}`);
// 客服中心
const getCustomerList = () => service.get(`/api/customer/get-list`);
@@ -159,19 +162,22 @@ const getCertList = () => service.get(`/api/user/get-cert-list`);
const getHotWords = () => service.get(`/api/keywords/get-list`);
// 获取入驻模板
const getStationTemplate = template_id => service.get(`/api/temple-template-share?id=${template_id}`);
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}`)
const getPlatformHome = (agent_id) => service.get(`/api/home?agent_id=${agent_id}`);
// 查询是否登录
const hasLogin = () => service.get('/api/has-login');
// const hasLogin = () => service.get('/api/has-login');
const hasLogin = () => {
return Promise.resolve();
};
// 查询
const getMeritTypes = () => service.get('/api/order/get-merit-types');
const getMeritTypes = () => service.get("/api/order/get-merit-types");
// 支付广告
const getPayAdv = () => service.get('/api/ad/ad-pay')
const getPayAdv = () => service.get("/api/ad/ad-pay");
export {
getPayAdv,
@@ -223,4 +229,4 @@ export {
getCertList,
getStationTemplate,
getPlatformHome,
}
};
src/api/service.js
+25 -27
View File
@@ -1,62 +1,60 @@
import axios from 'axios';
import { Toast } from 'vant';
import qs from 'qs'
import router from '../router';
import utils from '../util'
import axios from "axios";
import { Toast } from "vant";
import qs from "qs";
import router from "../router";
import utils from "../util";
const baseURL = process.env.NODE_ENV === 'development' ? '/' : process.env.VUE_APP_HOST
const baseURL = process.env.NODE_ENV === "development" ? "/" : process.env.VUE_APP_HOST;
const instance = axios.create({
baseURL,
timeout: 15000,
headers: {
"env": process.env.NODE_ENV,
"Accept": "*",
"Content-Type": "application/x-www-form-urlencoded"
env: process.env.NODE_ENV,
Accept: "*",
"Content-Type": "application/x-www-form-urlencoded",
},
})
});
instance.interceptors.request.use(request => {
instance.interceptors.request.use((request) => {
const { query } = router.currentRoute;
if (query.no_login) {
request.url = utils.addExternalParamsToQuery(request.url, 'no_login', 1)
request.url = utils.addExternalParamsToQuery(request.url, "no_login", 1);
}
if(request.url.includes('upload')){
return request
if (request.url.includes("upload")) {
return request;
}
if((request.method === 'post' || request.method === 'put' )&& !request.url.includes('post')){
request.data = qs.stringify(request.data)
if ((request.method === "post" || request.method === "put") && !request.url.includes("post")) {
request.data = qs.stringify(request.data);
return request;
}
return request;
})
});
instance.interceptors.response.use(response => {
instance.interceptors.response.use((response) => {
const { path, query } = router.currentRoute;
if (response.status === 200) {
if (response.data.code === 0) {
return response.data.data;
}
if (response.data.code === 100007) {
location.href = '/api/wx/oauth?jumpUrl='+encodeURIComponent(location.href)
return
location.href = "/api/wx/oauth?jumpUrl=" + encodeURIComponent(location.href);
return;
}
console.log('query', new URLSearchParams(query).toString())
console.log('fullPath', path)
if (response.data.code === 1000023) {
Toast('请验证手机号')
Toast("请验证手机号");
const queryString = new URLSearchParams(query).toString();
router.push({ name: 'get-user-phone', query: { redirectPath: path, redirectPathQuery: encodeURIComponent(queryString)}});
router.push({ name: "get-user-phone", query: { redirectPath: path, redirectPathQuery: encodeURIComponent(queryString) } });
return Promise.reject();
}
if (response.data.code !== 0) {
Toast.fail(response.data.message)
Toast.fail(response.data.message);
}
}
if (response.status !== 200) {
Toast.fail('服务器错误')
Toast.fail("服务器错误");
}
return Promise.reject(response);
})
});
export default instance;
src/common/wechat-web.js
+32 -40
View File
@@ -3,52 +3,44 @@ import util from "@/util";
function signToWechat(config, shareConfig) {
if (!wx) {
console.warn('请安装微信网页JS-SDK, url: https://res2.wx.qq.com/open/js/jweixin-1.6.0.js');
console.warn("请安装微信网页JS-SDK, url: https://res2.wx.qq.com/open/js/jweixin-1.6.0.js");
}
const defaultConfig = {
...config,
debug: false,
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'scanQRCode',
'getLocation',
'openLocation',
'updateAppMessageShareData',
'updateTimelineShareData'
],
jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "scanQRCode", "getLocation", "openLocation", "updateAppMessageShareData", "updateTimelineShareData"],
};
console.log('sign', wx);
wx.config(defaultConfig);
wx.ready(function () {
console.log('wechat sdk config success');
console.log("wechat sdk config success");
wechatInstance = wx;
wx.onMenuShareAppMessage({
title: shareConfig.title,
desc: shareConfig.desc,
link: util.addExternalParamsToQuery(shareConfig.link, 'no_login', 1),
link: util.addExternalParamsToQuery(shareConfig.link, "no_login", 1),
imgUrl: shareConfig.imgUrl,
complete: res => {
shareConfig.callback && shareConfig.callback({
key: 'updateAppMessageShareData',
...res
complete: (res) => {
shareConfig.callback &&
shareConfig.callback({
key: "updateAppMessageShareData",
...res,
});
}
},
});
// // 分享朋友圈
wx.onMenuShareTimeline({
title: shareConfig.title,
link: util.addExternalParamsToQuery(shareConfig.link, 'no_login', 1),
link: util.addExternalParamsToQuery(shareConfig.link, "no_login", 1),
imgUrl: shareConfig.imgUrl,
complete: res => {
shareConfig.callback && shareConfig.callback({
key: 'updateTimelineShareData',
...res
complete: (res) => {
shareConfig.callback &&
shareConfig.callback({
key: "updateTimelineShareData",
...res,
});
}
},
});
// wx.updateAppMessageShareData({
@@ -81,9 +73,9 @@ function signToWechat(config, shareConfig) {
function getLocation() {
return new Promise((resolve, reject) => {
wechatInstance.getLocation({
type: 'wgs84',
success: res => {
if(res.errMsg === 'getLocation:ok'){
type: "wgs84",
success: (res) => {
if (res.errMsg === "getLocation:ok") {
resolve(res);
} else {
reject();
@@ -91,13 +83,13 @@ function getLocation() {
},
error: () => {
reject();
}
},
});
});
}
function requestPayment(paymentConfig) {
return new Promise(resolve => {
return new Promise((resolve) => {
wechatInstance.chooseWXPay({
timestamp: paymentConfig.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: paymentConfig.nonceStr, // 支付签名随机串，不长于 32 位
@@ -110,7 +102,7 @@ function requestPayment(paymentConfig) {
},
fail(res) {
alert(JSON.stringify(res));
}
},
});
});
}
@@ -120,40 +112,40 @@ function openLocation(config) {
}
// 分享给朋友
function updateAppMessageShareData(title = '', desc = '', link = '', imgUrl = '') {
function updateAppMessageShareData(title = "", desc = "", link = "", imgUrl = "") {
return new Promise((resolve) => {
wechatInstance.updateAppMessageShareData({
title,
desc,
link,
imgUrl,
complete: res => {
complete: (res) => {
resolve(res);
}
},
});
});
}
// 分享到朋友圈
function updateTimelineShareData(title = '', desc = '', link = '', imgUrl = '') {
function updateTimelineShareData(title = "", desc = "", link = "", imgUrl = "") {
return new Promise((resolve) => {
wechatInstance.updateTimelineShareData({
title,
desc,
link,
imgUrl,
complete: res => {
complete: (res) => {
resolve(res);
}
},
});
});
}
function previewImage(current, urls) {
wechatInstance.previewImage({
current, urls
})
current,
urls,
});
}
export { signToWechat, getLocation, requestPayment, openLocation, updateAppMessageShareData, updateTimelineShareData, previewImage };
src/components/Thanksgiving/index.vue
+15 -19
View File
@@ -22,20 +22,19 @@
<script>
import { getOrderCompare, getOrderCompareByAgentId } from "@/api";
export default {
name: 'thanks-giving',
name: "thanks-giving",
props: {
templeId: [String, Number],
goodsType: {
type: String,
},
goodsId: {
type: [String, Number]
type: [String, Number],
},
typeId: {
type: [String, Number]
type: [String, Number],
},
agentId: [String, Number],
},
data() {
@@ -47,7 +46,7 @@ export default {
{ id: 3, title: "总榜", list: [] },
],
page: 1,
}
};
},
mounted() {
this.getOrderCompare();
@@ -60,25 +59,23 @@ export default {
async getOrderCompare() {
let res;
if (this.templeId) {
res = await getOrderCompare(this.templeId || '1', this.page, this.type_id, this.goodsId, this.goodsType)
res = await getOrderCompare(this.templeId || "1", this.page, this.type_id, this.goodsId, this.goodsType);
} else {
res = await getOrderCompareByAgentId(this.agentId, this.type_id, this.goodsId, this.goodsType)
res = await getOrderCompareByAgentId(this.agentId, this.type_id, this.goodsId, this.goodsType);
}
const current = this.type_nav.find(item => item.id === this.type_id);
console.log('current', current)
current.list = res.list
console.log(this.type_nav)
const current = this.type_nav.find((item) => item.id === this.type_id);
current.list = res.list;
},
onThankMore() {
this.$router.push({
name: 'merit-box',
name: "merit-box",
query: {
type_id: this.type_id,
temple_id: this.templeId
}
})
}
}
temple_id: this.templeId,
},
});
},
},
};
</script>
@@ -110,14 +107,13 @@ export default {
}
}
.body {
.swiper-container {
height: 5.33rem;
}
.thanks-more {
height: 1rem;
line-height: 1rem;
font-size: .4rem;
font-size: 0.4rem;
color: #333;
text-align: center;
}
src/components/content-expand/index.vue
+19 -23
View File
@@ -7,62 +7,59 @@
</div>
<span class="expand" v-if="contentOverflow" @click="toggle">
<i class="iconfont icon-double-arrow-down-" :class="[show && 'iconfont-expand']"></i>
<span class="label">{{show ? '收起全文': '展开全文'}}</span>
<span class="label">{{ show ? "收起全文" : "展开全文" }}</span>
</span>
</div>
</template>
<script>
export default {
name: 'content-expand',
name: "content-expand",
data() {
return {
wrapperHeight: 0,
contentHeight: 0,
show: false,
wrapperContainerHeight: 0,
defaultContentHeight: 0
}
defaultContentHeight: 0,
};
},
computed: {
contentOverflow: {
get() {
return this.contentHeight > this.wrapperHeight;
}
}
},
updated() {
},
},
updated() {},
mounted() {
this.wrapperHeight = this.$refs.wrapper.offsetHeight
this.contentHeight = this.$refs.content.offsetHeight
this.defaultContentHeight = this.$refs.content.querySelector('.goods-content').offsetHeight / (3/2)
console.log(this.defaultContentHeight)
this.wrapperHeight = this.$refs.wrapper.offsetHeight;
this.contentHeight = this.$refs.content.offsetHeight;
this.defaultContentHeight = this.$refs.content.querySelector(".goods-content").offsetHeight / (3 / 2);
this.$nextTick(() => {
this.wrapperContainerHeight = this.wrapperHeight;
})
});
},
methods: {
toggle() {
this.show = !this.show
}
}
}
this.show = !this.show;
},
},
};
</script>
<style lang="scss">
.content-expand {
.content {
line-height: 1.4;
font-size: .35rem;
font-size: 0.35rem;
color: #888;
letter-spacing: 1px;
text-align: justify;
margin-top: .3rem;
margin-top: 0.3rem;
overflow: hidden;
height: 4em;
transition: height .3s linear;
transition: height 0.3s linear;
}
.expand {
text-align: center;
@@ -73,14 +70,13 @@ export default {
color: #888;
.iconfont {
display: inline-block;
}
.iconfont-expand {
transform: rotateZ(180deg);
}
.label {
padding-left: .1rem;
font-size: .35rem;
padding-left: 0.1rem;
font-size: 0.35rem;
}
}
}
src/components/detail-content-expand/index.vue
+22 -27
View File
@@ -7,19 +7,19 @@
</div>
<span class="expand" v-if="contentOverflow" @click="toggle">
<i class="iconfont icon-double-arrow-down-" :class="[show && 'iconfont-expand']"></i>
<span class="label">{{show ? '收起全文': '展开全文'}}</span>
<span class="label">{{ show ? "收起全文" : "展开全文" }}</span>
</span>
</div>
</template>
<script>
export default {
name: 'detail-content-expand',
name: "detail-content-expand",
props: {
selector: {
type: String,
default: '.goods-content'
}
default: ".goods-content",
},
},
data() {
return {
@@ -27,57 +27,53 @@ export default {
contentHeight: 0,
show: false,
wrapperContainerHeight: 0,
defaultContentHeight: 0
}
defaultContentHeight: 0,
};
},
computed: {
contentOverflow: {
get() {
return this.contentHeight > this.wrapperHeight;
}
}
},
watch: {
'$slots'(val){
console.log('slots val',val)
}
},
},
mounted() {
this.wrapperHeight = this.$refs.wrapper.offsetHeight
this.wrapperHeight = this.$refs.wrapper.offsetHeight;
this.$nextTick(() => {
this.contentHeight = this.$refs.content.offsetHeight
this.contentHeight = this.$refs.content.offsetHeight;
this.wrapperContainerHeight = this.wrapperHeight;
this.refresh();
})
});
},
methods: {
toggle() {
this.show = !this.show
this.show = !this.show;
},
refresh() {
const selector = this.$refs.content.querySelector(this.selector);
if (!selector) {
this.defaultContentHeight = 100;
return
}
this.defaultContentHeight = selector.offsetHeight / (4/1)
}
}
return;
}
this.defaultContentHeight = selector.offsetHeight / (4 / 1);
},
},
};
</script>
<style lang="scss">
.detail-content-expand {
.content {
line-height: 1.4;
font-size: .35rem;
font-size: 0.35rem;
color: #888;
letter-spacing: 1px;
text-align: justify;
margin-top: .3rem;
margin-top: 0.3rem;
overflow: hidden;
height: 4em;
transition: height .3s linear;
transition: height 0.3s linear;
}
.expand {
text-align: center;
@@ -88,14 +84,13 @@ export default {
color: #888;
.iconfont {
display: inline-block;
}
.iconfont-expand {
transform: rotateZ(180deg);
}
.label {
padding-left: .1rem;
font-size: .35rem;
padding-left: 0.1rem;
font-size: 0.35rem;
}
}
}
src/components/scroll-view/index.vue
+8 -10
View File
@@ -13,8 +13,8 @@ export default {
name: "scroll-view",
data() {
return {
wrapperHeight: 0
}
wrapperHeight: 0,
};
},
props: {
/**
@@ -83,12 +83,12 @@ export default {
default: 20,
},
height: {
type: Number
}
type: Number,
},
},
mounted() {
// 保证在DOM渲染完毕后初始化better-scroll
this.wrapperHeight = this.height || this.$parent.$el.offsetHeight
this.wrapperHeight = this.height || this.$parent.$el.offsetHeight;
setTimeout(() => {
this._initScroll();
}, 20);
@@ -118,7 +118,6 @@ export default {
if (this.pullup) {
this.scroll.on("scrollEnd", () => {
// 滚动到底部
console.log(this.scroll.y, this.scroll.maxScrollY + 50)
if (this.scroll.y <= this.scroll.maxScrollY + 50) {
this.$emit("pullup");
}
@@ -160,8 +159,7 @@ export default {
},
scrollToElement() {
// 代理better-scroll的scrollToElement方法
this.scroll &&
this.scroll.scrollToElement.apply(this.scroll, arguments);
this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments);
},
},
watch: {
@@ -175,8 +173,8 @@ export default {
handler(val) {
this.wrapperHeight = val;
this.scroll && this.scroll.refresh();
}
}
},
},
},
};
</script>
src/components/uploader/index.vue
+22 -27
View File
@@ -4,62 +4,57 @@
</template>
<script>
import { uploadFile } from '@/api'
import { uploadFile } from "@/api";
export default {
name: 'uploader',
name: "uploader",
props: {
maxCount: {
type: Number,
default: Infinity
default: Infinity,
},
maxSize: Number,
value: {
type: Array,
default() {
return []
}
}
return [];
},
},
},
data() {
return {
fileList: []
}
fileList: [],
};
},
watch: {
fileList(val) {
this.$emit('input', val)
}
this.$emit("input", val);
},
},
methods: {
isOverSize() {
console.log(this.maxCount * this.maxSize * 1024)
return 500 * 1024
return 500 * 1024;
},
onOversize() {
console.log(this.$props)
this.$toast(`文件大小不能超过${this.isOverSize()}kb`)
this.$toast(`文件大小不能超过${this.isOverSize()}kb`);
},
async onBeforeUpload(obj) {
console.log(obj.file.size)
const type = Object.prototype.toString;
if(type.call(obj) === '[object Object]'){
if (type.call(obj) === "[object Object]") {
const formData = new FormData();
formData.append('photo', obj.file)
const res = await uploadFile(formData)
obj.url = res.url
formData.append("photo", obj.file);
const res = await uploadFile(formData);
obj.url = res.url;
}
if(type.call(obj) === '[object Array]'){
if (type.call(obj) === "[object Array]") {
for (let file of obj) {
const formData = new FormData();
formData.append('photo', file.file)
const res = await uploadFile(formData)
file.url = res.url
formData.append("photo", file.file);
const res = await uploadFile(formData);
file.url = res.url;
}
}
},
}
}
},
};
</script>
src/mixins/index.js
+33 -33
View File
@@ -1,6 +1,6 @@
import { Toast } from 'vant';
import { getWechatSign } from '@/api';
import { signToWechat } from '@/common/wechat-web';
import { Toast } from "vant";
import { getWechatSign } from "@/api";
import { signToWechat } from "@/common/wechat-web";
export default {
directives: {
@@ -8,34 +8,36 @@ export default {
bind: function (el) {
el.handler = function () {
// el.value = el.value.replace(/\D+/, '')
el.value = el.value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')
}
el.addEventListener('input', el.handler)
el.value = el.value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, "$1");
};
el.addEventListener("input", el.handler);
},
unbind: function (el) {
el.removeEventListener('input', el.handler)
}
el.removeEventListener("input", el.handler);
},
},
copy: {
bind(el, binding, vnode){
console.log(el, binding, vnode)
el.addEventListener('click', () => {
const input = document.createElement('textarea');
bind(el, binding) {
el.addEventListener(
"click",
() => {
const input = document.createElement("textarea");
input.value = binding.value;
document.body.appendChild(input)
document.body.appendChild(input);
input.select();
document.execCommand('copy');
document.body.removeChild(input)
Toast.success('复制成功')
}, false)
document.execCommand("copy");
document.body.removeChild(input);
Toast.success("复制成功");
},
false
);
},
},
}
},
methods: {
wechatReady(shareConfig) {
console.log('wechatReady get share config', shareConfig)
getWechatSign(location.href).then(res => {
console.log("wechatReady get share config", shareConfig);
getWechatSign(location.href).then((res) => {
signToWechat(res, shareConfig);
});
},
@@ -43,8 +45,6 @@ export default {
if (!shareConfig) {
return console.error(`wechat share config error: ${shareConfig}`);
}
console.log('share', wx, shareConfig)
},
getHasFullScreen() {
let result = false;
@@ -62,33 +62,33 @@ export default {
* @param temple_id: 寺院id
* @return void
*/
onPushToGoodsDetail(goods_type, goods_id, temple_id, spec_ids = ''){
onPushToGoodsDetail(goods_type, goods_id, temple_id, spec_ids = "") {
const type = Object.prototype.toString;
if(type.call(spec_ids) !== '[object String]'){
spec_ids = spec_ids.toString()
if (type.call(spec_ids) !== "[object String]") {
spec_ids = spec_ids.toString();
}
if (goods_type == 1 || goods_type == 2 || goods_type == 4) {
this.$router.push({
name: 'everyday-donation',
name: "everyday-donation",
query: {
goods_type,
goods_id,
temple_id,
spec_ids
spec_ids,
},
});
return;
}
this.$router.push({
name: 'goods-detail',
name: "goods-detail",
query: {
goods_type,
goods_id,
temple_id,
spec_ids
spec_ids,
},
});
}
}
}
},
},
};
src/pages/everyday-donation/index.vue
+126 -131
View File
@@ -6,8 +6,8 @@
</div>
<swiper class="swiper-container" :options="swiperOption">
<swiper-slide v-for="(picture, index) in data.pictures" :key="index">
<div style="height: 100vw;" class="picture">
<img :src="picture" alt="">
<div style="height: 100vw" class="picture">
<img :src="picture" alt="" />
</div>
</swiper-slide>
</swiper>
@@ -107,14 +107,9 @@
<van-stepper v-model="buy_quantity" step="1" v-if="is_assign" />
</li>
<li v-for="(spec, index) in data.spec" :key="index">
<span
class="border-circle"
:class="[
Number(spec.money) === priceUnit && !is_assign && 'active',
isDisabled(spec),
]"
@click="onPriceUnit(spec)"
>{{spec.spec_name}} {{spec.donate_number * Number(data.price)}}元</span>
<span class="border-circle" :class="[Number(spec.money) === priceUnit && !is_assign && 'active', isDisabled(spec)]" @click="onPriceUnit(spec)"
>{{ spec.spec_name }} {{ spec.donate_number * Number(data.price) }}元</span
>
</li>
</ul>
<div class="auto-donate">
@@ -135,8 +130,10 @@
</div>
<div class="next-group-wrapper">
<safe-area>
<div class='next-group'>
<span class="total">合计：<em>￥{{priceTotal}}</em></span>
<div class="next-group">
<span class="total"
>合计：<em>￥{{ priceTotal }}</em></span
>
<button class="next" :disabled="!priceUnitId" @click="onToPay">下一步</button>
</div>
</safe-area>
@@ -150,8 +147,8 @@
</template>
<script>
import 'swiper/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import "swiper/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { getDynamicDataByGoodsId, getGoodsDetail, getOrderCompare, hasLogin } from "@/api";
export default {
@@ -161,18 +158,18 @@ export default {
},
data() {
const { query } = this.$route;
let title = '详情';
if(query.goods_type === '1'){
title = '日行一善';
let title = "详情";
if (query.goods_type === "1") {
title = "日行一善";
}
if(query.goods_type === '2'){
title = '添砖加瓦'
if (query.goods_type === "2") {
title = "添砖加瓦";
}
document.title = title;
for (let i in query) {
query[i] = query[i].toString()
query[i] = query[i].toString();
}
let onlySpecs = query.spec_ids ? query.spec_ids.split(',').map(v => Number(v)) : null;
let onlySpecs = query.spec_ids ? query.spec_ids.split(",").map((v) => Number(v)) : null;
return {
onlySpecs,
@@ -184,29 +181,29 @@ export default {
is_auto: false, // 是否自动行善
showSpec: false,
priceUnit: 0,
priceUnitId: '',
priceUnitId: "",
monthQuantity: 1,
is_assign: false, // 是否为自动认捐砖块数
buy_quantity: 1, // 自定义认捐砖块数
goodsDynamicList: [], // 商品动态列表
banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
banners: ["/1.jpg", "/2.jpg", "/3.jpg"],
swiperOption: {
autoplay: 8000,
initialSlide: 1,
loop: true,
pagination: '.swiper-pagination',
pagination: ".swiper-pagination",
},
listType: 1,
listTypes: [
{ id: 1, name: '实时', },
{ id: 2, name: '月榜', },
{ id: 3, name: '总榜', },
{ id: 1, name: "实时" },
{ id: 2, name: "月榜" },
{ id: 3, name: "总榜" },
],
lTypeId: 1,
payList: [],
page: 1,
noMore: false,
}
};
},
computed: {
priceTotal() {
@@ -215,61 +212,60 @@ export default {
return (priceUnit * 100 * buy_quantity) / 100;
}
if (is_auto) {
return (priceUnit * 100 * monthQuantity * 30) / 100
return (priceUnit * 100 * monthQuantity * 30) / 100;
}
return (priceUnit * 100) / 100;
}
},
},
mounted() {
if(this.query.goods_type === '1'){
return this.getGoodsDetail('friendly');
if (this.query.goods_type === "1") {
return this.getGoodsDetail("friendly");
}
if(this.query.goods_type === '2'){
return this.getGoodsDetail('tile');
if (this.query.goods_type === "2") {
return this.getGoodsDetail("tile");
}
},
methods: {
backHome() {
const { query } = this.$router.currentRoute;
const name = query.temple_id === '1' ? 'home': 'temple-home'
this.$router.replace({ name, query: { temple_id: query.temple_id }})
const name = query.temple_id === "1" ? "home" : "temple-home";
this.$router.replace({ name, query: { temple_id: query.temple_id } });
},
async onHasLoginToNext() {
await hasLogin();
this.showSpec = true
this.showSpec = true;
},
isDisabled(spec) {
const { id } = spec;
if (!this.onlySpecs) return false;
return !this.onlySpecs.includes(id) ? 'spec-disabled': ''
return !this.onlySpecs.includes(id) ? "spec-disabled" : "";
},
// 获取更多感恩功德1
loadMoreFn() {
this.page += 1;
this.getPayRecords(this.lTypeId, this.page)
this.getPayRecords(this.lTypeId, this.page);
},
getSelectedSpec() {
const { goods_type } = this.query;
if(goods_type === '2' || goods_type === '1'){
if (goods_type === "2" || goods_type === "1") {
// 随喜
if (this.is_assign) {
return {
specId: '',
specName: goods_type === '1' ? '随喜': this.data.rule_btn
specId: "",
specName: goods_type === "1" ? "随喜" : this.data.rule_btn,
};
}
}
const spec = this.data.spec.find(item => item.id === this.priceUnitId);
const spec = this.data.spec.find((item) => item.id === this.priceUnitId);
if (!spec) {
return {
specId: '',
specName: ''
}
specId: "",
specName: "",
};
}
return {
specId: spec.id,
specName: spec.spec_name,
}
};
}
},
// 获取商品详情
@@ -281,27 +277,25 @@ export default {
async getGoodsDetail(type) {
const { goods_id, temple_id, goods_type } = this.$route.query;
const response = await getGoodsDetail(type, goods_id, temple_id);
if(this.query.goods_type === '2'){
response.spec = response.spec.map(v => ({ ...v, money: this.amountAbs(v.donate_number, Number(response.price))}))
if (this.query.goods_type === "2") {
response.spec = response.spec.map((v) => ({ ...v, money: this.amountAbs(v.donate_number, Number(response.price)) }));
}
await this.getDynamicDataByGoodsId(goods_id, goods_type);
await this.getPayRecords(this.lTypeId, 1);
this.data = response;
this.$nextTick(() => {
this.$refs.contentWrap.refresh()
console.log('a', this.$refs.contentWrap)
})
this.$refs.contentWrap.refresh();
});
if (!this.onlySpecs) {
const { donate_number, money, id } = this.data.spec[0];
const priceUnit = donate_number || money;
this.priceUnit = Number(priceUnit) * Number(this.data.price)
this.priceUnit = Number(priceUnit) * Number(this.data.price);
this.priceUnitId = id;
}
this.wechatReady({
...this.data.shareConfig,
link: location.href
})
link: location.href,
});
},
// 获取感恩功德
async getPayRecords(lTypeId, page) {
@@ -322,11 +316,11 @@ export default {
onMoreProcess() {
const { goods_id, temple_id } = this.$route.query;
this.$router.push({
name: 'buddha-activity',
name: "buddha-activity",
query: {
temple_id,
goods_id
}
goods_id,
},
});
},
// 设置行善单价
@@ -335,7 +329,7 @@ export default {
this.priceUnit = Number(money);
this.priceUnitId = id;
this.buy_quantity = 1;
this.spec_id = '';
this.spec_id = "";
},
onRandomNext({ money }) {
this.anyPrice = money;
@@ -344,27 +338,27 @@ export default {
},
onToPay() {
// 不需要跳转到功德芳名
if(this.query.goods_type === '1'){
if (this.query.goods_type === "1") {
this.$router.push({
name: 'pay',
name: "pay",
query: {
...this.$route.query,
is_auto: this.is_auto ? 1 : 0,
spec_id: this.priceUnitId,
friendly_time: this.monthQuantity,
title: this.data.name,
subTitle: '日行一善捐赠',
subTitle: "日行一善捐赠",
quantity: 1,
amount: this.priceTotal,
is_customized: this.is_assign ? 1 : 0,
price: this.priceUnit,
from: 'friendly_day', // 标识为日行一善
from: "friendly_day", // 标识为日行一善
},
});
}
})
}
if(this.query.goods_type === '2'){
if (this.query.goods_type === "2") {
this.$router.push({
name: 'pay',
name: "pay",
query: {
...this.$route.query,
is_auto: this.is_auto ? 1 : 0,
@@ -378,13 +372,13 @@ export default {
is_customized: this.is_assign ? 1 : 0,
price: this.priceUnit,
buy_quantity: this.buy_quantity,
from: 'brike', // 标识为填砖加瓦
}
})
from: "brike", // 标识为填砖加瓦
},
});
}
},
amountAbs(number, price) {
return (parseInt(number * 100, 10) * price) / 100
return (parseInt(number * 100, 10) * price) / 100;
},
// 自定义砖数
onCustomeBrike() {
@@ -392,15 +386,16 @@ export default {
this.buy_quantity = 1;
this.is_assign = true;
this.showRandom = true;
}
}
}
},
},
};
</script>
<style lang="scss">
.swiper-container {
background: #f5f5f5;
.picture, img{
.picture,
img {
width: 100%;
height: 100%;
}
@@ -413,34 +408,34 @@ export default {
}
.caret {
padding-bottom: .2rem;
padding-bottom: 0.2rem;
.head {
display: flex;
justify-content: space-between;
font-size: .4rem;
padding: .4rem;
font-size: 0.4rem;
padding: 0.4rem;
align-items: center;
margin-top: .13rem;
margin-top: 0.13rem;
.iconfont {
font-size: .7rem;
font-size: 0.7rem;
}
}
.spec {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: .3rem;
padding: .4rem;
grid-gap: 0.3rem;
padding: 0.4rem;
.random {
grid-column-start: 1;
grid-column-end: 5;
text-align: left;
span {
font-size: .35rem;
border-radius: .11rem;
font-size: 0.35rem;
border-radius: 0.11rem;
width: auto;
display: inline-block;
padding: .3rem .7rem;
padding: 0.3rem 0.7rem;
&:active {
background: #f5f5f5;
}
@@ -453,11 +448,11 @@ export default {
li {
text-align: center;
span {
font-size: .35rem;
font-size: 0.35rem;
width: 100%;
display: inline-block;
vertical-align: top;
padding: .3rem 0;
padding: 0.3rem 0;
line-height: 1.2;
user-select: none;
color: #666;
@@ -475,7 +470,7 @@ export default {
.brick-spec {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: .3rem;
grid-gap: 0.3rem;
.random {
grid-column-start: 1;
grid-column-end: 3;
@@ -489,27 +484,27 @@ export default {
}
}
.auto-donate {
padding: 0 .4rem;
margin-top: .6rem;
padding: 0 0.4rem;
margin-top: 0.6rem;
.label {
font-size: .4rem;
font-size: 0.4rem;
}
.donate {
display: flex;
margin-top: .3rem;
margin-top: 0.3rem;
justify-content: space-between;
align-items: center;
span {
font-size: .35rem;
font-size: 0.35rem;
}
}
}
.auto-donate-time {
padding: .4rem ;
margin-top: .4rem;
padding: 0.4rem;
margin-top: 0.4rem;
.donate {
.label {
font-size: .4rem;
font-size: 0.4rem;
}
display: flex;
align-items: center;
@@ -519,9 +514,9 @@ export default {
display: flex;
align-items: flex-end;
.unit {
font-size: .3rem;
font-size: 0.3rem;
color: #666;
padding-left: .2rem;
padding-left: 0.2rem;
}
}
}
@@ -535,45 +530,45 @@ export default {
.next-group {
display: flex;
justify-content: space-between;
padding: .4rem;
padding: 0.4rem;
background: white;
align-items: center;
.total {
font-size: .4rem;
font-size: 0.4rem;
em {
color: $primary-color;
font-size: .4rem;
font-size: 0.4rem;
font-weight: bold;
}
}
.next {
font-size: .4rem;
padding: .3rem 1rem;
font-size: 0.4rem;
padding: 0.3rem 1rem;
background: $primary-color;
border: 1px solid $primary-color;
color: white;
border-radius: .1rem;
border-radius: 0.1rem;
}
}
}
.support {
.support-head {
padding: 0 .4rem;
padding: 0 0.4rem;
display: flex;
justify-content: space-between;
height: 1.07rem;
line-height: 1.07rem;
.label {
font-size: .4rem;
font-size: 0.4rem;
font-weight: bold;
}
.external {
display: flex;
align-items: center;
li {
margin-left: .3rem;
font-size: .35rem;
margin-left: 0.3rem;
font-size: 0.35rem;
color: #666;
}
li.active {
@@ -587,11 +582,11 @@ export default {
height: 100vh;
position: relative;
.goods-content {
padding-left: .3rem;
padding-right: .3rem;
padding-left: 0.3rem;
padding-right: 0.3rem;
* {
max-width: 100%;
font-size: .35rem;
font-size: 0.35rem;
}
}
.content-view {
@@ -604,30 +599,30 @@ export default {
padding-bottom: calc(env(safe-area-inset-bottom) + 1.6rem);
}
.monk-profile {
padding: .4rem;
margin-bottom: .2rem;
padding: 0.4rem;
margin-bottom: 0.2rem;
.position {
font-size: .5rem;
padding-top: .2rem;
font-size: 0.5rem;
padding-top: 0.2rem;
text-align: justify;
line-height: 1.3;
color: #19282E;
color: #19282e;
}
.bar {
margin-top: .27rem;
margin-top: 0.27rem;
}
.status {
padding: .2rem .3rem;
padding: 0.2rem 0.3rem;
background: orange;
color: white;
display: inline-block;
border-radius: .04rem;
margin-right: .3rem;
font-size: .3rem;
border-radius: 0.04rem;
margin-right: 0.3rem;
font-size: 0.3rem;
}
span {
color: #666;
font-size: .28rem;
font-size: 0.28rem;
}
}
.merit-button-group {
@@ -638,18 +633,18 @@ export default {
left: 0;
right: 0;
background: white;
padding: .4rem 0;
padding-bottom: calc(env(safe-area-inset-bottom) + .2rem);
padding: 0.4rem 0;
padding-bottom: calc(env(safe-area-inset-bottom) + 0.2rem);
.merit-button {
display: inline-block;
background: $primary-color;
color: white;
height: 1.2rem;
font-size: .37rem;
font-size: 0.37rem;
width: 60%;
padding: 0 .53rem;
border: .01rem solid $primary-color;
border-radius: 1.33rem
padding: 0 0.53rem;
border: 0.01rem solid $primary-color;
border-radius: 1.33rem;
}
}
}
src/pages/goods-detail/components/fill-information.vue
+46 -48
View File
@@ -8,7 +8,7 @@
<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="请输入功德主姓名">
<input class="input" type="text" v-model="name" placeholder="请输入功德主姓名" />
<button class="btn" @click="addName">添加</button>
</div>
<div class="name-group">
@@ -41,21 +41,21 @@
</template>
<script>
import { getDreamList, getMeritName } from '@/api';
import { getDreamList, getMeritName } from "@/api";
export default {
data() {
return {
checked: false,
showDialog: false,
actionName: 'name',
actionName: "name",
person: {},
name: '',
dream: '',
desire: '',
name: "",
dream: "",
desire: "",
names: [],
dreamList: []
}
dreamList: [],
};
},
mounted() {
this.getName();
@@ -67,11 +67,11 @@ export default {
this.actionName = name;
},
onConfirmMeritName() {
this.$emit('change', {
this.$emit("change", {
...this.person,
merit_name_id: this.person.id,
dream: this.dream,
})
});
},
onSelectName(name) {
this.person = name;
@@ -90,81 +90,80 @@ export default {
//获取心愿列表
async getDreamList() {
const list = await getDreamList();
console.log(list)
this.dreamList = list;
}
}
},
},
};
</script>
<style lang="scss">
.add-merit-name {
padding: .4rem;
padding: 0.4rem;
.title {
font-size: .4rem;
margin-bottom: .4rem;
font-size: 0.4rem;
margin-bottom: 0.4rem;
}
.add-name {
display: flex;
.input {
flex: 1;
height: .8rem;
line-height: .8rem;
padding-left: .3rem;
height: 0.8rem;
line-height: 0.8rem;
padding-left: 0.3rem;
border: 1px solid #ddd;
border-radius: .11rem;
font-size: .4rem;
border-radius: 0.11rem;
font-size: 0.4rem;
}
.btn {
padding: .2rem .6rem;
padding: 0.2rem 0.6rem;
background: $primary-color;
color: white;
border: 1px solid $primary-color;
font-size: .4rem;
border-radius: .11rem;
margin-left: .3rem;
font-size: 0.4rem;
border-radius: 0.11rem;
margin-left: 0.3rem;
}
}
.name-group {
padding: .5rem 0;
padding: 0.5rem 0;
span {
display: inline-block;
padding: .2rem .3rem;
padding: 0.2rem 0.3rem;
background: #fff;
border: 1px solid #ddd;
border-radius: .08rem;
border-radius: 0.08rem;
position: relative;
margin-right: .4rem;
margin-bottom: .3rem;
font-size: .35rem;
margin-right: 0.4rem;
margin-bottom: 0.3rem;
font-size: 0.35rem;
vertical-align: top;
.iconfont {
position: absolute;
right: -.25rem;
top: -.25rem;
font-size: .5rem;
right: -0.25rem;
top: -0.25rem;
font-size: 0.5rem;
color: red;
}
}
}
.desire-input {
border: 1px solid #ddd;
border-radius: .13rem;
border-radius: 0.13rem;
overflow: hidden;
.desire-textarea {
border: none;
display: block;
font-size: .35rem;
width: calc(100% - .5rem);
padding: .25rem;
font-size: 0.35rem;
width: calc(100% - 0.5rem);
padding: 0.25rem;
height: 2rem;
resize: none;
}
span {
display: block;
text-align: right;
padding: .2rem;
font-size: .35rem;
padding: 0.2rem;
font-size: 0.35rem;
}
}
.desire-quike {
@@ -173,17 +172,16 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
font-size: .4rem;
margin-bottom: .3rem;
font-size: 0.4rem;
margin-bottom: 0.3rem;
.update {
font-size: .35rem;
font-size: 0.35rem;
color: $primary-color;
}
}
.name-group {
padding: .1rem 0;
padding: 0.1rem 0;
.name {
}
}
}
@@ -192,11 +190,11 @@ export default {
color: white;
border: 1px solid $primary-color;
width: 3rem;
padding: .3rem 0;
border-radius: .07rem;
padding: 0.3rem 0;
border-radius: 0.07rem;
display: block;
margin: 0 auto;
font-size: .4rem;
font-size: 0.4rem;
}
}
</style>
src/pages/goods-detail/index.vue
+112 -112
View File
@@ -2,8 +2,8 @@
<div class="goods-detail" v-if="data" :style="{ paddingBottom: paddingBottom + 'px' }">
<swiper class="swiper-container" :options="swiperOption">
<swiper-slide>
<div style="height: 100vw;" class="picture">
<img :src="data.cover_url" alt="">
<div style="height: 100vw" class="picture">
<img :src="data.cover_url" alt="" />
</div>
</swiper-slide>
</swiper>
@@ -62,7 +62,9 @@
</template>
</transition>
<div class="next-group">
<span class="total">合计：<em>￥{{priceTotal}}</em></span>
<span class="total"
>合计：<em>￥{{ priceTotal }}</em></span
>
<button class="next" @click="onNextStep">下一步</button>
</div>
</div>
@@ -74,22 +76,22 @@
</template>
<script>
import 'swiper/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import "swiper/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { getGoodsDetail, getOrderCompare, hasLogin } from "@/api";
import SelectSpec from './components/select-spec.vue'
import FillInformation from './components/fill-information.vue';
import SelectSpec from "./components/select-spec.vue";
import FillInformation from "./components/fill-information.vue";
export default {
components: {
swiper,
swiperSlide,
SelectSpec,
FillInformation
FillInformation,
},
data() {
return {
result: 'a',
result: "a",
showAnyAmount: false,
paddingBottom: 0,
fixedBottomHeight: 0,
@@ -98,8 +100,8 @@ export default {
checked: false,
current: 0,
data: null,
value: '',
spec_id: '',
value: "",
spec_id: "",
step: 0,
quantity: 1,
dreamInfo: null,
@@ -108,56 +110,53 @@ export default {
autoplay: 8000,
initialSlide: 1,
loop: false,
pagination: '.swiper-pagination',
onSlideChangeEnd: swiper => {
console.log('onSlideChangeEnd', swiper.realIndex)
}
pagination: ".swiper-pagination",
onSlideChangeEnd: () => {},
},
listType: 1,
listTypes: [
{ id: 1, name: '实时', },
{ id: 2, name: '月榜', },
{ id: 3, name: '总榜', },
{ id: 1, name: "实时" },
{ id: 2, name: "月榜" },
{ id: 3, name: "总榜" },
],
lTypeId: 1,
payList: [],
page: 1,
noMore: false,
}
};
},
computed: {
priceUnit() {
if(this.spec_id === 'is_customized'){
if (this.spec_id === "is_customized") {
return this.anyPrice;
}
const spec = this.data.spec.find(item => item.id === this.spec_id);
const spec = this.data.spec.find((item) => item.id === this.spec_id);
if (!spec) {
return 0;
}
return Number(spec.price)
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 * 30) / 100;
}
return (parseInt(this.priceUnit * 100, 10) * this.quantity) / 100;
},
},
mounted() {
this.getGoodsDetail('common');
this.getGoodsDetail("common");
},
methods: {
backHome() {
const { query } = this.$router.currentRoute;
const name = query.temple_id === '1' ? 'home': 'temple-home'
this.$router.replace({ name, query: { temple_id: query.temple_id }})
const name = query.temple_id === "1" ? "home" : "temple-home";
this.$router.replace({ name, query: { temple_id: query.temple_id } });
},
async onHasLoginToNext() {
await hasLogin();
this.showSpec = true
this.showSpec = true;
},
// 接收随喜金额
// 接收随喜金额·
onReceiveAnyAmount(anyObj) {
this.anyPrice = anyObj.money;
this.onToFillMeritName();
@@ -167,19 +166,21 @@ export default {
this.dreamInfo = dreamInfo;
},
getSelectedSpec() {
const spec = this.data.spec.find(spec => spec.id === this.spec_id);
return spec || {
id: '',
spec_name: this.data.rule_btn || '随喜'
};
const spec = this.data.spec.find((spec) => spec.id === this.spec_id);
return (
spec || {
id: "",
spec_name: this.data.rule_btn || "随喜",
}
);
},
onNextStep() {
if (!this.spec_id) {
this.$toast.fail('请选择类型')
this.$toast.fail("请选择类型");
return;
}
if( this.spec_id === 'is_customized'){
if (this.spec_id === "is_customized") {
this.showAnyAmount = true;
return;
}
@@ -193,7 +194,7 @@ export default {
onToFillMeritName() {
const selectedSpec = this.getSelectedSpec();
this.$router.push({
name: 'fill-name',
name: "fill-name",
query: {
...this.query,
is_auto: this.is_auto ? 1 : 0,
@@ -204,10 +205,10 @@ export default {
subTitle: selectedSpec.spec_name,
is_die: selectedSpec.is_die,
amount: this.priceTotal,
is_customized: this.spec_id === 'is_customized' ? 1 : 0,
from: 'common_goods', // 标识为通用商品
}
})
is_customized: this.spec_id === "is_customized" ? 1 : 0,
from: "common_goods", // 标识为通用商品
},
});
},
async getGoodsDetail(type) {
const { goods_id, temple_id } = this.$route.query;
@@ -215,17 +216,17 @@ export default {
this.data = response;
await this.getPayRecords(this.lTypeId, 1);
this.$nextTick(() => {
this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() - 50
})
this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() - 50;
});
this.wechatReady({
...this.data.shareConfig,
link: location.href
})
link: location.href,
});
},
// 获取更多感恩功德1
loadMoreFn() {
this.page += 1;
this.getPayRecords(this.lTypeId, this.page)
this.getPayRecords(this.lTypeId, this.page);
},
// 获取感恩功德
async getPayRecords(lTypeId, page) {
@@ -238,31 +239,31 @@ export default {
this.payList = this.payList.concat(res.list);
this.noMore = res.list.length === 0;
},
}
}
},
};
</script>
<style lang="scss">
$lightWidth: 1.3rem;
.goods-detail {
.goods-content {
padding-left: .3rem;
padding-right: .3rem;
padding-left: 0.3rem;
padding-right: 0.3rem;
* {
max-width: 100%;
font-size: .35rem;
font-size: 0.35rem;
}
}
.light-container {
padding-left: .4rem;
padding-right: .4rem;
padding-left: 0.4rem;
padding-right: 0.4rem;
max-height: 10rem;
overflow: auto;
.light-wrapper {
border-top: 1px solid #ddd;
h1 {
font-size: .4rem;
margin-top: .4rem;
font-size: 0.4rem;
margin-top: 0.4rem;
margin-bottom: 3px;
}
.light-group {
@@ -272,10 +273,10 @@ $lightWidth: 1.3rem;
vertical-align: top;
}
span {
font-size: .4rem;
font-size: 0.4rem;
display: block;
text-align: center;
padding-top: .3rem;
padding-top: 0.3rem;
}
}
.van-swipe__indicators {
@@ -293,12 +294,12 @@ $lightWidth: 1.3rem;
}
.light-size,
.light-count {
font-size: .4rem;
font-size: 0.4rem;
display: flex;
justify-content: space-between;
margin-top: .6rem;
margin-top: 0.6rem;
align-items: center;
margin-bottom: .65rem;
margin-bottom: 0.65rem;
span {
color: black;
opacity: 1;
@@ -309,27 +310,27 @@ $lightWidth: 1.3rem;
}
.light-count {
align-items: center;
margin-bottom: .2rem;
margin-bottom: 0.2rem;
}
}
.support {
margin-bottom: .5rem;
margin-bottom: 0.5rem;
.support-head {
padding: 0 .4rem;
padding: 0 0.4rem;
display: flex;
justify-content: space-between;
height: 1.07rem;
line-height: 1.07rem;
.label {
font-size: .4rem;
font-size: 0.4rem;
font-weight: bold;
}
.external {
display: flex;
align-items: center;
li {
margin-left: .3rem;
font-size: .35rem;
margin-left: 0.3rem;
font-size: 0.35rem;
color: #666;
}
li.active {
@@ -341,65 +342,66 @@ $lightWidth: 1.3rem;
}
.swiper-container {
background: #f5f5f5;
.picture, img{
.picture,
img {
width: 100%;
height: 100%;
}
}
.monk-profile {
padding: .4rem;
padding: 0.4rem;
.position {
font-size: .5rem;
padding-top: .2rem;
color: #19282E;
font-size: 0.5rem;
padding-top: 0.2rem;
color: #19282e;
line-height: 1.3;
}
.introduction {
font-size: .37rem;
margin-top: .4rem;
font-size: 0.37rem;
margin-top: 0.4rem;
line-height: 1.3;
text-align: justify;
color: #666;
}
.bar {
margin-top: .27rem;
margin-top: 0.27rem;
}
.status {
padding: .2rem .3rem;
padding: 0.2rem 0.3rem;
background: orange;
color: white;
display: inline-block;
border-radius: .04rem;
margin-right: .3rem;
font-size: .3rem;
border-radius: 0.04rem;
margin-right: 0.3rem;
font-size: 0.3rem;
}
span {
color: #666;
font-size: .28rem;
font-size: 0.28rem;
}
}
.temple-info {
border-top: 1px solid #ddd;
padding: .3rem .4rem;
padding: 0.3rem 0.4rem;
display: flex;
align-items: center;
.temple-img {
width: 1rem;
height: 1rem;
border-radius: 1rem;
margin-right: .3rem;
margin-right: 0.3rem;
}
.temple-name {
flex: 1;
.name {
font-size: .35rem;
font-size: 0.35rem;
color: #333;
}
.visitor {
color: #666;
font-size: .3rem;
margin-top: .2rem;
font-size: 0.3rem;
margin-top: 0.2rem;
display: block;
}
}
@@ -412,47 +414,45 @@ $lightWidth: 1.3rem;
left: 0;
right: 0;
background: white;
border-top: .01rem solid #ddd;
padding: .3rem;
border-top: 0.01rem solid #ddd;
padding: 0.3rem;
}
.merit-button {
display: block;
background: $primary-color;
color: white;
height: 1.2rem;
font-size: .37rem;
font-size: 0.37rem;
min-width: 60%;
padding: 0 .53rem;
margin-top: .3rem;
padding: 0 0.53rem;
margin-top: 0.3rem;
margin-left: auto;
margin-right: auto;
border: .01rem solid $primary-color;
border-radius: .13rem;
margin-bottom: .3rem;
border: 0.01rem solid $primary-color;
border-radius: 0.13rem;
margin-bottom: 0.3rem;
}
.caret-spec {
.head {
display: flex;
justify-content: space-between;
font-size: .4rem;
padding: .4rem;
font-size: 0.4rem;
padding: 0.4rem;
align-items: center;
margin-top: .13rem;
margin-top: 0.13rem;
.iconfont {
font-size: .7rem;
font-size: 0.7rem;
}
.step-inline {
display: inline-block;
flex: 1;
font-size: .35rem;
font-size: 0.35rem;
li {
display: inline-block;
& ~ li:before {
content: '-';
padding: 0 .1rem;
content: "-";
padding: 0 0.1rem;
}
}
li.current {
color: $primary-color;
@@ -461,12 +461,12 @@ $lightWidth: 1.3rem;
}
.auto-donate-time {
padding: .4rem ;
margin-top: .4rem;
padding: 0.4rem;
margin-top: 0.4rem;
margin-bottom: 1rem;
.donate {
.label {
font-size: .4rem;
font-size: 0.4rem;
}
display: flex;
align-items: center;
@@ -476,34 +476,34 @@ $lightWidth: 1.3rem;
display: flex;
align-items: flex-end;
.unit {
font-size: .3rem;
font-size: 0.3rem;
color: #666;
padding-left: .2rem;
padding-left: 0.2rem;
}
}
}
.next-group {
display: flex;
justify-content: space-between;
padding: .2rem .4rem ;
padding: 0.2rem 0.4rem;
background: white;
align-items: center;
border-top: 1px solid #ededed;
.total {
font-size: .4rem;
font-size: 0.4rem;
em {
color: $primary-color;
font-size: .4rem;
font-size: 0.4rem;
font-weight: bold;
}
}
.next {
font-size: .4rem;
padding: .3rem 1rem;
font-size: 0.4rem;
padding: 0.3rem 1rem;
background: $primary-color;
border: 1px solid $primary-color;
color: white;
border-radius: .1rem;
border-radius: 0.1rem;
}
}
}
src/pages/goods-light-detail/components/fill-information.vue
+46 -48
View File
@@ -8,7 +8,7 @@
<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="请输入功德主姓名">
<input class="input" type="text" v-model="name" placeholder="请输入功德主姓名" />
<button class="btn" @click="addName">添加</button>
</div>
<div class="name-group">
@@ -41,21 +41,21 @@
</template>
<script>
import { getDreamList, getMeritName } from '@/api';
import { getDreamList, getMeritName } from "@/api";
export default {
data() {
return {
checked: false,
showDialog: false,
actionName: 'name',
actionName: "name",
person: {},
name: '',
dream: '',
desire: '',
name: "",
dream: "",
desire: "",
names: [],
dreamList: []
}
dreamList: [],
};
},
mounted() {
this.getName();
@@ -67,11 +67,11 @@ export default {
this.actionName = name;
},
onConfirmMeritName() {
this.$emit('change', {
this.$emit("change", {
...this.person,
merit_name_id: this.person.id,
dream: this.dream,
})
});
},
onSelectName(name) {
this.person = name;
@@ -90,81 +90,80 @@ export default {
//获取心愿列表
async getDreamList() {
const list = await getDreamList();
console.log(list)
this.dreamList = list;
}
}
},
},
};
</script>
<style lang="scss">
.add-merit-name {
padding: .4rem;
padding: 0.4rem;
.title {
font-size: .4rem;
margin-bottom: .4rem;
font-size: 0.4rem;
margin-bottom: 0.4rem;
}
.add-name {
display: flex;
.input {
flex: 1;
height: .8rem;
line-height: .8rem;
padding-left: .3rem;
height: 0.8rem;
line-height: 0.8rem;
padding-left: 0.3rem;
border: 1px solid #ddd;
border-radius: .11rem;
font-size: .4rem;
border-radius: 0.11rem;
font-size: 0.4rem;
}
.btn {
padding: .2rem .6rem;
padding: 0.2rem 0.6rem;
background: $primary-color;
color: white;
border: 1px solid $primary-color;
font-size: .4rem;
border-radius: .11rem;
margin-left: .3rem;
font-size: 0.4rem;
border-radius: 0.11rem;
margin-left: 0.3rem;
}
}
.name-group {
padding: .5rem 0;
padding: 0.5rem 0;
span {
display: inline-block;
padding: .2rem .3rem;
padding: 0.2rem 0.3rem;
background: #fff;
border: 1px solid #ddd;
border-radius: .08rem;
border-radius: 0.08rem;
position: relative;
margin-right: .4rem;
margin-bottom: .3rem;
font-size: .35rem;
margin-right: 0.4rem;
margin-bottom: 0.3rem;
font-size: 0.35rem;
vertical-align: top;
.iconfont {
position: absolute;
right: -.25rem;
top: -.25rem;
font-size: .5rem;
right: -0.25rem;
top: -0.25rem;
font-size: 0.5rem;
color: red;
}
}
}
.desire-input {
border: 1px solid #ddd;
border-radius: .13rem;
border-radius: 0.13rem;
overflow: hidden;
.desire-textarea {
border: none;
display: block;
font-size: .35rem;
width: calc(100% - .5rem);
padding: .25rem;
font-size: 0.35rem;
width: calc(100% - 0.5rem);
padding: 0.25rem;
height: 2rem;
resize: none;
}
span {
display: block;
text-align: right;
padding: .2rem;
font-size: .35rem;
padding: 0.2rem;
font-size: 0.35rem;
}
}
.desire-quike {
@@ -173,17 +172,16 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
font-size: .4rem;
margin-bottom: .3rem;
font-size: 0.4rem;
margin-bottom: 0.3rem;
.update {
font-size: .35rem;
font-size: 0.35rem;
color: $primary-color;
}
}
.name-group {
padding: .1rem 0;
padding: 0.1rem 0;
.name {
}
}
}
@@ -192,11 +190,11 @@ export default {
color: white;
border: 1px solid $primary-color;
width: 3rem;
padding: .3rem 0;
border-radius: .07rem;
padding: 0.3rem 0;
border-radius: 0.07rem;
display: block;
margin: 0 auto;
font-size: .4rem;
font-size: 0.4rem;
}
}
</style>
src/pages/goods-light-detail/index.vue
+112 -111
View File
@@ -2,8 +2,8 @@
<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 style="height: 100vw" class="picture">
<img :src="cover" alt="" />
</div>
</swiper-slide>
</swiper>
@@ -90,7 +90,9 @@
</div>
</transition>
<div class="next-group">
<span class="total">合计：<em>￥{{totalPrice}}</em></span>
<span class="total"
>合计：<em>￥{{ totalPrice }}</em></span
>
<button class="next" @click="onNextStep">下一步</button>
</div>
</div>
@@ -102,8 +104,8 @@
</template>
<script>
import 'swiper/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import "swiper/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { getGoodsLightDetail, getOrderCompare, hasLogin } from "@/api";
export default {
@@ -122,8 +124,8 @@ export default {
checked: false,
current: 0,
data: null,
value: '',
spec_id: '',
value: "",
spec_id: "",
step: 0,
dreamInfo: null,
anyPrice: 0, // 随喜金额
@@ -131,16 +133,16 @@ export default {
autoplay: 8000,
initialSlide: 1,
loop: false,
pagination: '.swiper-pagination',
onSlideChangeEnd: swiper => {
console.log('onSlideChangeEnd', swiper.realIndex)
}
pagination: ".swiper-pagination",
onSlideChangeEnd: (swiper) => {
console.log("onSlideChangeEnd", swiper.realIndex);
},
},
listType: 1,
listTypes: [
{ id: 1, name: '实时', },
{ id: 2, name: '月榜', },
{ id: 3, name: '总榜', },
{ id: 1, name: "实时" },
{ id: 2, name: "月榜" },
{ id: 3, name: "总榜" },
],
page: 1,
payList: [],
@@ -149,13 +151,13 @@ export default {
currentLightSize: 53,
buy_quantity: 1, // 购买数量
noMore: false,
}
};
},
computed: {
lightSize() {
const { currentLight, currentLightSize } = this;
if (!this.currentLightSize) return 0;
return currentLight.children.find(item => item.id === currentLightSize);
return currentLight.children.find((item) => item.id === currentLightSize);
},
lights() {
const data = this.data;
@@ -165,27 +167,27 @@ export default {
const len = Math.ceil(goods.length / sliceNumber);
const lights = [];
for (let i = 0; i < len; i++) {
lights.push(goods.slice(sliceNumber * i, i * sliceNumber + sliceNumber))
lights.push(goods.slice(sliceNumber * i, i * sliceNumber + sliceNumber));
}
return lights;
},
totalPrice() {
if (!this.lightSize) return 0;
return this.lightSize.price * this.buy_quantity
}
return this.lightSize.price * this.buy_quantity;
},
},
mounted() {
this.getGoodsLightDetail('common');
this.getGoodsLightDetail("common");
},
methods: {
backHome() {
const { query } = this.$router.currentRoute;
const name = query.temple_id === '1' ? 'home': 'temple-home'
this.$router.replace({ name, query: { temple_id: query.temple_id }})
const name = query.temple_id === "1" ? "home" : "temple-home";
this.$router.replace({ name, query: { temple_id: query.temple_id } });
},
async onLightAction() {
await hasLogin();
this.showSpec = true
this.showSpec = true;
},
// 选择供灯种类
onSelectLight(light) {
@@ -204,7 +206,7 @@ export default {
onNextStep() {
if (!this.currentLightSize) {
this.$toast.fail('请选择灯型')
this.$toast.fail("请选择灯型");
return;
}
this.current += 1;
@@ -215,11 +217,11 @@ export default {
// 获取更多感恩功德1
loadMoreFn() {
this.page += 1;
this.getPayRecords({id: this.listType}, this.page, 10)
this.getPayRecords({ id: this.listType }, this.page, 10);
},
onToFillMeritName() {
this.$router.push({
name: 'fill-name',
name: "fill-name",
query: {
...this.query,
goods_id: this.currentLight.id,
@@ -227,65 +229,65 @@ export default {
friendly_time: this.number,
quantity: this.buy_quantity,
title: this.data.details.title,
subTitle: this.currentLight.name + '：'+this.lightSize.name,
subTitle: this.currentLight.name + "：" + this.lightSize.name,
amount: this.totalPrice,
is_die: this.currentLight.is_die,
from: 'goods_light', // 标识为通用商品
}
})
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];
this.currentLightSize = this.currentLight.children[0].id
this.currentLightSize = this.currentLight.children[0].id;
await this.getPayRecords({ id: 1 }, 1);
this.$nextTick(() => {
this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() - 50
})
this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() - 50;
});
this.wechatReady({
...this.data.shareConfig,
link: location.href
})
link: location.href,
});
},
// 获取感恩功德
async getPayRecords(lType, page, size = 3) {
this.listType = lType.id;
this.page = page;
const res = await getOrderCompare(this.query.temple_id, this.page, this.listType, '', this.query.goods_type, size );
const res = await getOrderCompare(this.query.temple_id, this.page, this.listType, "", this.query.goods_type, size);
if (this.page === 1) {
this.payList = [];
}
this.payList = this.payList.concat(res.list);
this.noMore = res.list.length < 3;
},
}
}
},
};
</script>
<style lang="scss">
$lightWidth: 1.15rem;
.goods-detail {
.goods-content {
padding-left: .3rem;
padding-right: .3rem;
padding-left: 0.3rem;
padding-right: 0.3rem;
* {
max-width: 100%;
font-size: .35rem;
font-size: 0.35rem;
}
}
.light-container {
padding-left: .4rem;
padding-right: .4rem;
padding-left: 0.4rem;
padding-right: 0.4rem;
max-height: 13rem;
overflow: auto;
.light-wrapper {
border-top: 1px solid #ddd;
h1 {
font-size: .35rem;
margin-top: .4rem;
margin-bottom: .5rem;
font-size: 0.35rem;
margin-top: 0.4rem;
margin-bottom: 0.5rem;
}
.light-group {
.light {
@@ -294,7 +296,7 @@ $lightWidth: 1.15rem;
border: 1px solid transparent;
}
.van-swipe {
padding-bottom: .5rem;
padding-bottom: 0.5rem;
}
.van-grid-item__content {
padding-bottom: 0;
@@ -314,15 +316,15 @@ $lightWidth: 1.15rem;
vertical-align: top;
}
span {
font-size: .35rem;
font-size: 0.35rem;
display: block;
text-align: center;
padding-top: .3rem;
padding-top: 0.3rem;
white-space: nowrap;
overflow: hidden;
}
.van-grid-item__content {
padding-top: .1rem;
padding-top: 0.1rem;
}
}
.van-swipe__indicators {
@@ -340,7 +342,7 @@ $lightWidth: 1.15rem;
}
.light-size,
.light-count {
font-size: .4rem;
font-size: 0.4rem;
display: flex;
justify-content: space-between;
align-items: center;
@@ -350,46 +352,46 @@ $lightWidth: 1.15rem;
}
}
.light-size {
margin-top: .4rem;
margin-bottom: .4rem;
margin-top: 0.4rem;
margin-bottom: 0.4rem;
.van-radio__label {
margin-left: 4px;
font-size: .35rem;
font-size: 0.35rem;
}
.van-radio__icon .van-icon {
width: .45rem;
height: .45rem;
line-height: .45rem;
width: 0.45rem;
height: 0.45rem;
line-height: 0.45rem;
}
.van-radio__icon--checked .van-icon {
background: #CF9E3B;
border-color: #CF9E3B;
background: #cf9e3b;
border-color: #cf9e3b;
}
}
.light-count {
align-items: center;
margin-bottom: .5rem;
margin-bottom: 0.5rem;
}
}
.support {
margin-bottom: .5rem;
margin-bottom: 0.5rem;
.support-head {
padding: 0 .4rem;
padding: 0 0.4rem;
display: flex;
justify-content: space-between;
height: 1.07rem;
line-height: 1.07rem;
.label {
font-size: .4rem;
font-size: 0.4rem;
font-weight: bold;
}
.external {
display: flex;
align-items: center;
li {
margin-left: .3rem;
font-size: .35rem;
margin-left: 0.3rem;
font-size: 0.35rem;
color: #666;
}
li.active {
@@ -401,65 +403,66 @@ $lightWidth: 1.15rem;
}
.swiper-container {
background: #f5f5f5;
.picture, img{
.picture,
img {
width: 100%;
height: 100%;
}
}
.monk-profile {
padding: .4rem;
padding: 0.4rem;
.position {
font-size: .5rem;
padding-top: .2rem;
color: #19282E;
font-size: 0.5rem;
padding-top: 0.2rem;
color: #19282e;
line-height: 1.3;
}
.introduction {
font-size: .37rem;
margin-top: .4rem;
font-size: 0.37rem;
margin-top: 0.4rem;
line-height: 1.3;
text-align: justify;
color: #666;
}
.bar {
margin-top: .27rem;
margin-top: 0.27rem;
}
.status {
padding: .2rem .3rem;
padding: 0.2rem 0.3rem;
background: orange;
color: white;
display: inline-block;
border-radius: .04rem;
margin-right: .3rem;
font-size: .3rem;
border-radius: 0.04rem;
margin-right: 0.3rem;
font-size: 0.3rem;
}
span {
color: #666;
font-size: .28rem;
font-size: 0.28rem;
}
}
.temple-info {
border-top: 1px solid #ddd;
padding: .3rem .4rem;
padding: 0.3rem 0.4rem;
display: flex;
align-items: center;
.temple-img {
width: 1rem;
height: 1rem;
border-radius: 1rem;
margin-right: .3rem;
margin-right: 0.3rem;
}
.temple-name {
flex: 1;
.name {
font-size: .35rem;
font-size: 0.35rem;
color: #333;
}
.visitor {
color: #666;
font-size: .3rem;
margin-top: .2rem;
font-size: 0.3rem;
margin-top: 0.2rem;
display: block;
}
}
@@ -472,47 +475,45 @@ $lightWidth: 1.15rem;
left: 0;
right: 0;
background: white;
border-top: .01rem solid #ddd;
padding: .3rem;
border-top: 0.01rem solid #ddd;
padding: 0.3rem;
}
.merit-button {
display: block;
background: $primary-color;
color: white;
height: 1.2rem;
font-size: .37rem;
font-size: 0.37rem;
min-width: 60%;
padding: 0 .53rem;
margin-top: .3rem;
padding: 0 0.53rem;
margin-top: 0.3rem;
margin-left: auto;
margin-right: auto;
border: .01rem solid $primary-color;
border-radius: .13rem;
margin-bottom: .3rem;
border: 0.01rem solid $primary-color;
border-radius: 0.13rem;
margin-bottom: 0.3rem;
}
.caret-spec {
.head {
display: flex;
justify-content: space-between;
font-size: .4rem;
padding: .4rem;
font-size: 0.4rem;
padding: 0.4rem;
align-items: center;
margin-top: .13rem;
margin-top: 0.13rem;
.iconfont {
font-size: .7rem;
font-size: 0.7rem;
}
.step-inline {
display: inline-block;
flex: 1;
font-size: .35rem;
font-size: 0.35rem;
li {
display: inline-block;
& ~ li:before {
content: '-';
padding: 0 .1rem;
content: "-";
padding: 0 0.1rem;
}
}
li.current {
color: $primary-color;
@@ -521,12 +522,12 @@ $lightWidth: 1.15rem;
}
.auto-donate-time {
padding: .4rem ;
margin-top: .4rem;
padding: 0.4rem;
margin-top: 0.4rem;
margin-bottom: 1rem;
.donate {
.label {
font-size: .4rem;
font-size: 0.4rem;
}
display: flex;
align-items: center;
@@ -536,34 +537,34 @@ $lightWidth: 1.15rem;
display: flex;
align-items: flex-end;
.unit {
font-size: .3rem;
font-size: 0.3rem;
color: #666;
padding-left: .2rem;
padding-left: 0.2rem;
}
}
}
.next-group {
display: flex;
justify-content: space-between;
padding: .2rem .4rem ;
padding: 0.2rem 0.4rem;
background: white;
align-items: center;
border-top: 1px solid #ededed;
.total {
font-size: .4rem;
font-size: 0.4rem;
em {
color: $primary-color;
font-size: .4rem;
font-size: 0.4rem;
font-weight: bold;
}
}
.next {
font-size: .4rem;
padding: .3rem 1rem;
font-size: 0.4rem;
padding: 0.3rem 1rem;
background: $primary-color;
border: 1px solid $primary-color;
color: white;
border-radius: .1rem;
border-radius: 0.1rem;
}
}
}
src/pages/home.vue
+36 -38
View File
@@ -66,13 +66,12 @@
import { getPlatformHome, getTempleIndex } from "@/api";
export default {
components: {
},
inject: ['safeAreaInsetBottom'],
components: {},
inject: ["safeAreaInsetBottom"],
data() {
return {
query: this.$route.query,
value: '',
value: "",
data: null,
mescrollDown: {},
mescrollUp: {},
@@ -93,61 +92,61 @@ export default {
},
onToGoods(goods) {
this.$router.push({
name: 'goods-detail',
name: "goods-detail",
query: {
goods_id: goods.goods_id,
temple_id: goods.temple_id,
goods_type: goods.goods_type
}
})
goods_type: goods.goods_type,
},
});
},
locationTo(nav) {
// nav.type: 0外部链接，1日行一善商品，2添砖加瓦类商品，3通用商品，4功德箱，5进展动态
if (nav.icon_type === 6) {
this.$router.push({
name: 'goods-light-detail',
name: "goods-light-detail",
query: {
goods_type: nav.goods_type,
temple_id: nav.temple_id,
}
})
return
},
});
return;
}
if (nav.icon_type === 0) {
window.location.href = nav.url;
return
return;
}
if (nav.icon_type === 5) {
this.$router.push({
name: 'buddha-detail',
query: { id: nav.dynamic_id }
})
return
name: "buddha-detail",
query: { id: nav.dynamic_id },
});
return;
}
if (nav.icon_type === 4) {
this.$router.push({
name: 'merit-box'
})
return
name: "merit-box",
});
return;
}
if (nav.icon_type === 3) {
this.$router.push({
name: 'goods-detail',
name: "goods-detail",
query: {
goods_type: nav.goods_type,
goods_id: nav.goods_id,
temple_id: nav.temple_id,
}
})
},
});
}
if (nav.icon_type === 1 || nav.icon_type === 2) {
this.$router.push({
name: 'everyday-donation',
name: "everyday-donation",
query: {
goods_type: nav.goods_type,
goods_id: nav.goods_id,
@@ -160,26 +159,25 @@ export default {
const { agent_id } = this.$route.query;
let res;
if (agent_id) {
res = await getPlatformHome(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.$store.commit("setTempleMeritId", res.temple_merit_id);
this.data.icon_data = this.sliceNav(res.icon_data);
console.log(123, this.data)
setTimeout(() => {
document.title = '自在福田';
}, 10)
document.title = "自在福田";
}, 10);
},
onMoreProcess() {
this.$router.push({
name: 'buddha-activity',
name: "buddha-activity",
});
},
onSearch() {
this.$router.push({
name: 'search',
name: "search",
query: {},
});
},
@@ -205,12 +203,12 @@ export default {
.merit-rank-container {
}
.van-search {
padding: .4rem
padding: 0.4rem;
}
.goods-panel-body {
.buddha-process {
padding-left: .4rem;
padding-right: .4rem;
padding-left: 0.4rem;
padding-right: 0.4rem;
}
}
.container {
@@ -228,7 +226,7 @@ export default {
}
}
.swiper {
margin-bottom: 0
margin-bottom: 0;
}
.van-notice-bar {
border: 1px solid #e6b759;
@@ -254,7 +252,7 @@ export default {
}
}
.van-swipe__indicators {
bottom: .1rem;
bottom: 0.1rem;
.van-swipe__indicator {
width: 20px;
height: 2px;
@@ -269,7 +267,7 @@ export default {
}
}
.merit-scroll-container {
margin: 0 .4rem;
margin: 0 0.4rem;
height: 3.39rem;
overflow-x: auto;
.merit-scroll-wrapper {
@@ -277,7 +275,7 @@ export default {
}
}
.merit-group {
padding-bottom: .4rem;
padding-bottom: 0.4rem;
}
.merit {
width: 3.39rem;
src/pages/merit-box/index.vue
+57 -70
View File
@@ -1,14 +1,8 @@
<template>
<div class="merit-box" :style="{ height: root.minHeight + 'px' }">
<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 class="merit-container">
<img class="goods-picture" :style="{width: width + 'px', height: width / 2 + 'px'}" :src="info.merit_box_cover" alt="">
<img class="goods-picture" :style="{ width: width + 'px', height: width / 2 + 'px' }" :src="info.merit_box_cover" alt="" />
<div class="merit-rank-container">
<div class="head">
<span class="title">
@@ -20,22 +14,17 @@
</div>
</div>
<div class="body" ref="swiper">
<scroll-view
ref="scrollView"
:height="containerHeight - 20"
pulldown
pullup
@pulldown="refresh"
@pullup="loadMoreFn"
>
<scroll-view ref="scrollView" :height="containerHeight - 20" pulldown pullup @pulldown="refresh" @pullup="loadMoreFn">
<user-merit v-for="(merit, _index) in list" :key="_index" :data="merit"></user-merit>
<div class="loadmore" v-if="!noMore">
<img class="icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAAJ1BMVEUAAACHh4eHh4eIiIiJiYmJiYmIiIiIiIiHh4eIiIiJiYmIiIiIiIhR8CECAAAADHRSTlMAQFW/f6qekV+Hc2n78NS+AAAB3klEQVR42uzXv0lDYRiF8Rv/gKhF3CADWAgu4ACOYOEIDpLCQRzBSlAJnKECKd7mgTfc76QIyTnt5eN5f+WdsizLsizLsiw7li2ed1tOzfyIdkskkWlKJJFETiKymhO5Gmtc/8yJvH4ORd5UFEQI0WYIIhUFEUKkjyGIioIIIdL/EERFYYQQ6X0IUhRGCJH+RiBFYYSQjtJDisIIIdLvvMaFRAojBeFJHPeId4gAUhc5FEYIcSmMEGJTGCHEpTBCiE1hhBCXwgghNoURQlwKI4TYFEYIcSmMEOJT+GNKiE/BCPEpGCE+xYA4FEJ8Sg/xKF3EhhSlOfbLhRSlOfbWhhSlOfbbhRSlOfbOhhSlOXbtQorSHHtjQ4rSHLt2IUVZtd+yLMvOYosHbHnwN/fCXvZFLoU9JZJIItv2zdgGQBgGggsyDIMxAsMhhGhD7IA4R3eti++Q+L8Y8nLI/x9IEZFpePjFrlMWDNYe4wXOft6qVFGtUm27bjXqwVbRudy3CpVtZ/nMr9G7BwH6tBEYadhzU2g4I0+AwTGTO8uGB2bqVJ4Y/Zn6QkrEIColOTmGqPnkhCWiepWUyL7X4Vam2JdQFKmyZVgb5QqwE/nChhhiiCGGwB7oiYiIiIhIiAOEKKREjkzh3gAAAABJRU5ErkJggg==" alt="">
<img
class="icon"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAAJ1BMVEUAAACHh4eHh4eIiIiJiYmJiYmIiIiIiIiHh4eIiIiJiYmIiIiIiIhR8CECAAAADHRSTlMAQFW/f6qekV+Hc2n78NS+AAAB3klEQVR42uzXv0lDYRiF8Rv/gKhF3CADWAgu4ACOYOEIDpLCQRzBSlAJnKECKd7mgTfc76QIyTnt5eN5f+WdsizLsizLsiw7li2ed1tOzfyIdkskkWlKJJFETiKymhO5Gmtc/8yJvH4ORd5UFEQI0WYIIhUFEUKkjyGIioIIIdL/EERFYYQQ6X0IUhRGCJH+RiBFYYSQjtJDisIIIdLvvMaFRAojBeFJHPeId4gAUhc5FEYIcSmMEGJTGCHEpTBCiE1hhBCXwgghNoURQlwKI4TYFEYIcSmMEOJT+GNKiE/BCPEpGCE+xYA4FEJ8Sg/xKF3EhhSlOfbLhRSlOfbWhhSlOfbbhRSlOfbOhhSlOXbtQorSHHtjQ4rSHLt2IUVZtd+yLMvOYosHbHnwN/fCXvZFLoU9JZJIItv2zdgGQBgGggsyDIMxAsMhhGhD7IA4R3eti++Q+L8Y8nLI/x9IEZFpePjFrlMWDNYe4wXOft6qVFGtUm27bjXqwVbRudy3CpVtZ/nMr9G7BwH6tBEYadhzU2g4I0+AwTGTO8uGB2bqVJ4Y/Zn6QkrEIColOTmGqPnkhCWiepWUyL7X4Vam2JdQFKmyZVgb5QqwE/nChhhiiCGGwB7oiYiIiIhIiAOEKKREjkzh3gAAAABJRU5ErkJggg=="
alt=""
/>
正在加载更多数据...
</div>
<div class="loadmore" v-if="noMore">
没有更多了
</div>
<div class="loadmore" v-if="noMore">没有更多了</div>
</scroll-view>
</div>
</div>
@@ -49,11 +38,11 @@
</template>
<script>
import { getMeritBox, } from '@/api';
import { mapState } from 'vuex';
import { getMeritBox } from "@/api";
import { mapState } from "vuex";
export default {
inject: ['screenHeight', 'root'],
inject: ["screenHeight", "root"],
data() {
const { query } = this.$route;
return {
@@ -63,9 +52,9 @@ export default {
type_id: 1,
page: 1,
nav: [
{ id: 1, title: '实时', page: 1, size: 10, list: [], },
{ id: 2, title: '月榜', page: 1, size: 10, list: [], },
{ id: 3, title: '总榜', page: 1, size: 10, list: [], },
{ id: 1, title: "实时", page: 1, size: 10, list: [] },
{ id: 2, title: "月榜", page: 1, size: 10, list: [] },
{ id: 3, title: "总榜", page: 1, size: 10, list: [] },
],
containerHeight: 0,
tabHeight: 0,
@@ -73,59 +62,58 @@ export default {
list: [],
loading: true,
total: 0,
}
};
},
computed: {
...mapState(['temple_merit_id']),
...mapState(["temple_merit_id"]),
noMore() {
return this.list.length === this.total;
}
},
},
mounted() {
this.width = window.innerWidth;
this.getMeritBox();
if (this.query.open_box) {
this.openBox()
this.openBox();
}
},
methods: {
back() {
if (this.query.fromPathName) {
this.$router.replace({ name: this.query.fromPathName,query: { temple_id: this.query.temple_id } })
this.$router.replace({ name: this.query.fromPathName, query: { temple_id: this.query.temple_id } });
return;
}
this.$router.replace({ name: 'home', query: { temple_id: this.query.temple_id }});
this.$router.replace({ name: "home", query: { temple_id: this.query.temple_id } });
},
openBox() {
this.randVisible = true
this.randVisible = true;
},
async getMeritBox() {
const res = await getMeritBox(this.temple_merit_id || this.query.temple_id || '1', this.type_id, this.page, 10);
const res = await getMeritBox(this.temple_merit_id || this.query.temple_id || "1", this.type_id, this.page, 10);
// this.loading = false;
if (this.page === 1) {
this.list = [];
}
this.info = res.merit_box_info;
this.total = res.merit_box_order.total;
this.list = this.list.concat(res.merit_box_order.list)
this.list = this.list.concat(res.merit_box_order.list);
const query = this.$utils.setSearchParamsFromObj({ ...this.$route.query, temple_id: this.info.temple_id });
if (!this.$route.query.temple_id) {
history.pushState('', '', location.href + query)
history.pushState("", "", location.href + query);
}
this.wechatReady({
title: `${this.info.unit_name} - 在线功德箱 | 已有 ${this.total} 人广种福田，布施增福慧，转发即功德！`,
desc: '随缘布施，广种福田，喜结善缘',
imgUrl: 'https://temple-h5.oss-cn-hangzhou.aliyuncs.com/uploads/common/merit_box.png',
link: location.href
})
desc: "随缘布施，广种福田，喜结善缘",
imgUrl: "https://temple-h5-new.oss-cn-hangzhou.aliyuncs.com/uploads/common/merit_box.png",
link: location.href,
});
this.$nextTick(() => {
this.containerHeight = this.$refs.swiper.offsetHeight;
this.$refs.scrollView.refresh();
})
});
},
onListBy(n) {
@@ -142,25 +130,24 @@ export default {
this.getMeritBox();
},
refresh() {
console.log('refresh')
this.page = 1;
this.total = 0;
this.getMeritBox();
},
onRandNext(obj) {
this.$router.push({
name: 'pay',
name: "pay",
query: {
...this.$route.query,
title: '功德箱/供奉',
subTitle: '随喜',
title: "功德箱/供奉",
subTitle: "随喜",
amount: obj.money,
quantity: 1,
from: 'meritBox', // 标识为功德箱
}
})
}
}
from: "meritBox", // 标识为功德箱
},
});
},
},
};
</script>
@@ -188,16 +175,16 @@ export default {
margin-top: 5rem;
height: 61vh;
.head {
padding: .53rem .4rem;
padding-bottom: .13rem;
padding: 0.53rem 0.4rem;
padding-bottom: 0.13rem;
display: flex;
justify-content: space-between;
.title {
font-size: .43rem;
font-size: 0.43rem;
color: #222222;
.sub-title {
font-size: .35rem;
margin-left: .4rem;
font-size: 0.35rem;
margin-left: 0.4rem;
display: inline-block;
color: #666;
}
@@ -205,12 +192,12 @@ export default {
.list {
display: flex;
span {
font-size: .37rem;
font-size: 0.37rem;
color: #999999;
display: inline-block;
margin-left: .4rem;
border-bottom: .03rem solid transparent;
padding-bottom: .13rem;
margin-left: 0.4rem;
border-bottom: 0.03rem solid transparent;
padding-bottom: 0.13rem;
}
span.current {
color: #222;
@@ -233,19 +220,19 @@ export default {
left: 0;
right: 0;
background: white;
padding-top: .2rem;
padding-bottom: calc(.2rem );
border-top: .01rem solid #ddd;
padding-top: 0.2rem;
padding-bottom: calc(0.2rem);
border-top: 0.01rem solid #ddd;
display: flex;
padding-left: .4rem;
padding-right: .4rem;
padding-left: 0.4rem;
padding-right: 0.4rem;
.iconfont {
width: 20%;
background: white;
border: 1px solid #ddd;
margin-right: .4rem;
margin-right: 0.4rem;
border-radius: 4px;
font-size: .6rem;
font-size: 0.6rem;
}
.merit-button {
//display: inline-block;
@@ -260,12 +247,12 @@ export default {
//flex: 1;
flex: 1;
font-size: .4rem;
padding: .3rem 1rem;
font-size: 0.4rem;
padding: 0.3rem 1rem;
background: $primary-color;
border: 1px solid $primary-color;
color: white;
border-radius: .1rem;
border-radius: 0.1rem;
}
}
}
src/pages/mescroll-test/index.vue
+46 -42
View File
@@ -10,103 +10,107 @@
<script>
// 引入mescroll的vue组件
import MescrollVue from 'mescroll.js/mescroll.vue'
import MescrollVue from "mescroll.js/mescroll.vue";
const axios = {
current: 0,
get() {
return new Promise((resolve) => {
this.current += 1;
setTimeout(() => {
console.log(this.current)
if (this.current === 3) {
resolve({
data: []
})
return
data: [],
});
return;
}
resolve({
data: Array.from(Array(10), () => Math.random() * 100)
})
}, Math.random() * 1000)
})
}
}
data: Array.from(Array(10), () => Math.random() * 100),
});
}, Math.random() * 1000);
});
},
};
export default {
components: {
MescrollVue // 注册mescroll组件
MescrollVue, // 注册mescroll组件
},
data() {
return {
data: [],
mescroll: null, // mescroll实例对象
mescrollDown: {}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
mescrollUp: { // 上拉加载的配置.
mescrollUp: {
// 上拉加载的配置.
callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
//以下是一些常用的配置,当然不写也可以的.
page: {
num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
size: 10 //每页数据条数,默认10
size: 10, //每页数据条数,默认10
},
htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据; 避免列表数据过少(比如只有一条数据),显示无更多数据会不好看这就是为什么无更多数据有时候不显示的原因
toTop: {
//回到顶部按钮
src: "./static/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图
offset: 1000 //列表滚动1000px才显示回到顶部按钮
offset: 1000, //列表滚动1000px才显示回到顶部按钮
},
empty: {
//列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
warpId: "xxid", //父布局的id (1.3.5版本支持传入dom元素)
icon: "./static/mescroll/mescroll-empty.png", //图标,默认null,支持网络图
tip: "暂无相关数据~" //提示
}
tip: "暂无相关数据~", //提示
},
dataList: [] // 列表数据
}
},
beforeRouteEnter (to, from, next) { // 如果没有配置顶部按钮或isBounce,则beforeRouteEnter不用写
next(vm => {
dataList: [], // 列表数据
};
},
beforeRouteEnter(to, from, next) {
// 如果没有配置顶部按钮或isBounce,则beforeRouteEnter不用写
next((vm) => {
// 滚动到原来的列表位置,恢复顶部按钮和isBounce的配置
vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter()
})
vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter();
});
},
beforeRouteLeave (to, from, next) { // 如果没有配置顶部按钮或isBounce,则beforeRouteLeave不用写
beforeRouteLeave(to, from, next) {
// 如果没有配置顶部按钮或isBounce,则beforeRouteLeave不用写
// 记录列表滚动的位置,隐藏顶部按钮和isBounce的配置
this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave()
next()
this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave();
next();
},
methods: {
// mescroll组件初始化的回调,可获取到mescroll对象
mescrollInit(mescroll) {
this.mescroll = mescroll // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
},
// 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
upCallback(page, mescroll) {
// 联网请求
axios.get({
axios
.get({
params: {
num: page.num, // 页码
size: page.size // 每页长度
}
}).then((response) => {
size: page.size, // 每页长度
},
})
.then((response) => {
// 请求的列表数据
let arr = response.data
let arr = response.data;
// 如果是第一页需手动置空列表
if (page.num === 1) this.dataList = []
if (page.num === 1) this.dataList = [];
// 把请求到的数据添加到列表
this.dataList = this.dataList.concat(arr)
this.dataList = this.dataList.concat(arr);
// 数据渲染成功后,隐藏下拉刷新的状态
this.$nextTick(() => {
mescroll.endSuccess(arr.length)
mescroll.endSuccess(arr.length);
});
})
}).catch(() => {
.catch(() => {
// 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
mescroll.endErr()
})
}
}
}
mescroll.endErr();
});
},
},
};
</script>
<style scoped>
src/pages/pay-result/index.vue
+25 -25
View File
@@ -1,7 +1,7 @@
<template>
<div class="pay-result">
<div class="cert-show">
<img :src="src">
<img :src="src" />
<span class="long-press">长按图片保存到手机</span>
</div>
<div class="pay-info">
@@ -21,39 +21,39 @@
export default {
data() {
return {
query: this.$route.query
}
query: this.$route.query,
};
},
computed: {
src() {
return `https://temple-h5.oss-cn-hangzhou.aliyuncs.com//uploads/merit/certificate/${this.query.order_id}.jpg`
}
return `https://temple-h5-new.oss-cn-hangzhou.aliyuncs.com//uploads/merit/certificate/${this.query.order_id}.jpg`;
},
},
methods: {
onToOder() {
this.$router.push('/user/order')
this.$router.push("/user/order");
},
onPayAgain() {
// 功德箱订单再结善缘重新随喜
if(this.query.from === 'meritBox'){
this.$router.replace({ name: 'merit-box', query: { temple_id: this.query.temple_id , open_box: 1}})
return
if (this.query.from === "meritBox") {
this.$router.replace({ name: "merit-box", query: { temple_id: this.query.temple_id, open_box: 1 } });
return;
}
// 佛前供灯再结善缘
if(this.query.from === 'goods_light'){
if (this.query.from === "goods_light") {
this.$router.replace({
name: 'goods-light-detail',
name: "goods-light-detail",
query: {
goods_type: this.query.goods_type,
temple_id: this.query.temple_id,
}
})
return
},
});
return;
}
const { goods_type, goods_id, temple_id, spec_ids } = this.query;
this.onPushToGoodsDetail(goods_type, goods_id, temple_id, spec_ids)
}
}
this.onPushToGoodsDetail(goods_type, goods_id, temple_id, spec_ids);
},
},
};
</script>
@@ -65,7 +65,7 @@ export default {
display: flex;
justify-content: center;
align-items: center;
padding: .2rem;
padding: 0.2rem;
position: relative;
img {
max-width: 90%;
@@ -74,22 +74,22 @@ export default {
}
.long-press {
position: absolute;
font-size: .3rem;
bottom: .1rem;
font-size: 0.3rem;
bottom: 0.1rem;
color: #999;
}
}
.pay-info {
text-align: center;
padding: .4rem 0;
padding: 0.4rem 0;
padding-top: 1rem;
font-size: .5rem;
font-size: 0.5rem;
color: #888;
.iconfont {
color: #07c160;
font-size: 1rem;
vertical-align: middle;
margin-right: .3rem;
margin-right: 0.3rem;
}
}
.button-group {
@@ -97,9 +97,9 @@ export default {
margin-top: 1rem;
button {
width: 4rem;
margin: 0 .4rem;
margin: 0 0.4rem;
height: 1.2rem;
font-size: .4rem;
font-size: 0.4rem;
border-radius: 4px;
border: 1px solid #ddd;
background: white;
src/pages/pay/index.vue
+58 -69
View File
@@ -4,7 +4,7 @@
<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="adv" v-if="adv">
<img :src="adv.cover" alt="">
<img :src="adv.cover" alt="" />
</div>
<div class="pay-info">
<h1 class="amount"><b>￥</b>{{ query.amount }}</h1>
@@ -28,7 +28,7 @@
<van-cell-group>
<van-cell title="微信" clickable @click="radio = '1'" icon="wechat">
<template #icon>
<img style="width: 40px" src="@/assets/img/wechat.jpg" alt="">
<img style="width: 40px" src="@/assets/img/wechat.jpg" alt="" />
</template>
<template #right-icon>
<van-radio name="1" />
@@ -47,92 +47,82 @@
</template>
<script>
import {
createFriendlyDayOrder,
createBrickDayOrder,
createPay,
createMeritBoxOrder,
createCommonOrder,
createLightOrder, getPayAdv
} from "@/api";
import { requestPayment } from '@/common/wechat-web';
import { createFriendlyDayOrder, createBrickDayOrder, createPay, createMeritBoxOrder, createCommonOrder, createLightOrder, getPayAdv } from "@/api";
import { requestPayment } from "@/common/wechat-web";
import { mapState } from "vuex";
export default {
components: {
},
components: {},
data() {
return {
query: this.$route.query,
payType: '1',
payType: "1",
adv: null,
}
};
},
computed: {
...mapState(['temple_merit_id', 'launch']),
...mapState(["temple_merit_id", "launch"]),
},
mounted() {
this.wechatReady(() => {
})
getPayAdv().then(res => {
this.wechatReady(() => {});
getPayAdv().then((res) => {
if (res) {
this.adv = res;
}
})
});
},
methods: {
onContinuePayOrder() {
this.onPayment({ id: this.query.order_id })
this.onPayment({ id: this.query.order_id });
},
async onCreatePayOrder() {
// 创建日行一善支付订单
if(this.query.goods_type == '1'){
const request = { ...this.query }
const order = await createFriendlyDayOrder(request)
this.onPayment(order)
return
if (this.query.goods_type == "1") {
const request = { ...this.query };
const order = await createFriendlyDayOrder(request);
this.onPayment(order);
return;
}
// 创建填砖加瓦订单
if(this.query.goods_type == '2'){
const request = { ...this.query }
const order = await createBrickDayOrder(request)
await this.onPayment(order)
return
if (this.query.goods_type == "2") {
const request = { ...this.query };
const order = await createBrickDayOrder(request);
await this.onPayment(order);
return;
}
// 创建功德箱订单
if(this.query.from === 'meritBox'){
const domain = this.launch?.agent_id ? '2': '3'
if (this.query.from === "meritBox") {
const domain = this.launch?.agent_id ? "2" : "3";
const request = {
temple_id: this.temple_merit_id || this.query.temple_id,
price: this.query.amount,
domain
}
const order = await createMeritBoxOrder(request)
this.onPayment(order)
return
domain,
};
const order = await createMeritBoxOrder(request);
this.onPayment(order);
return;
}
// 创建通用商品订单
if(this.query.from === 'common_goods'){
if (this.query.from === "common_goods") {
const request = {
...this.query,
price: this.query.amount,
buy_quantity: this.query.quantity
}
buy_quantity: this.query.quantity,
};
const order = await createCommonOrder(request);
await this.onPayment(order);
}
// 创建佛前供灯订单
if(this.query.from === 'goods_light'){
if (this.query.from === "goods_light") {
const request = {
...this.query,
price: this.query.amount,
buy_quantity: this.query.quantity
}
buy_quantity: this.query.quantity,
};
const order = await createLightOrder(request);
await this.onPayment(order);
@@ -140,23 +130,22 @@ export default {
},
async onPayment(order) {
const result = await createPay(order.id);
const payResult = await requestPayment(result)
const payResult = await requestPayment(result);
await this.$router.push({
name: 'pay-result',
name: "pay-result",
query: {
...this.query,
order_id: order.id,
...result,
...payResult
}
})
}
}
}
...payResult,
},
});
},
},
};
</script>
<style lang="scss">
.pay {
.adv {
img {
@@ -169,9 +158,9 @@ export default {
padding-top: 1rem;
.amount {
b {
font-size: .5rem;
font-size: 0.5rem;
color: rgb(236, 188, 98);
padding-right: .1rem;
padding-right: 0.1rem;
}
text-align: center;
font-size: 1.07rem;
@@ -180,40 +169,40 @@ export default {
}
.order-info {
margin-top: 1rem;
padding: .4rem;
padding: 0.4rem;
.goods_title {
font-size: .4rem;
font-size: 0.4rem;
font-weight: bold;
line-height: 1.4;
}
.goods-lucky-to {
font-size: .35rem;
padding-top: .4rem;
font-size: 0.35rem;
padding-top: 0.4rem;
span ~ span {
padding-left: .2rem;
padding-left: 0.2rem;
border-left: 1px solid #ddd;
margin-left: .2rem;
margin-left: 0.2rem;
}
}
.desc {
padding-top: .5rem;
padding-top: 0.5rem;
color: #666;
font-size: .35rem;
font-size: 0.35rem;
display: flex;
justify-content: space-between;
}
}
.pay-type {
padding: .4rem;
margin-top: .6rem;
padding: 0.4rem;
margin-top: 0.6rem;
.label {
font-size: .4rem;
font-size: 0.4rem;
font-weight: bold;
margin-bottom: .3rem;
margin-bottom: 0.3rem;
}
}
.pay-button-container {
padding: .4rem;
padding: 0.4rem;
}
}
}
src/pages/temple-list/index.vue
+56 -58
View File
@@ -27,7 +27,6 @@
</div>
</div>
<div>
<div class="temple-list-container" :style="{ height: containerHeight + 'px' }" v-if="mode === 'list'">
<!-- <scroll-view -->
<!-- class="temple-container content"-->
@@ -54,8 +53,8 @@
</template>
<script>
import { getTempleList } from '@/api';
import TMAPLoader from '@/common/tmap';
import { getTempleList } from "@/api";
import TMAPLoader from "@/common/tmap";
import { getLocation, openLocation } from "@/common/wechat-web";
export default {
@@ -63,40 +62,40 @@ export default {
return {
query: this.$route.query,
containerHeight: 0,
keyword: '',
mode: 'list',
keyword: "",
mode: "list",
page: 1,
templeList: [],
lng: '106.45233',
lat: '29.507471',
lng: "106.45233",
lat: "29.507471",
map: null,
positioning: false,
noMore: false,
timer: null,
loading: false
}
loading: false,
};
},
inject: ['root', 'parentHeight'],
inject: ["root", "parentHeight"],
computed: {
scroll() {
return this.$refs.scroll
}
return this.$refs.scroll;
},
},
mounted() {
setTimeout(() => {
if(this.query.hideTab === '1'){
if (this.query.hideTab === "1") {
this.containerHeight = this.root.minHeight - this.$refs.topbar.offsetHeight;
} else {
this.containerHeight = this.root.minHeight - this.$refs.topbar.offsetHeight - 100;
}
}, 50)
}, 50);
if (this.query.search) {
this.keyword = this.query.search;
}
this.getTempleList();
this.wechatReady()
this.wechatReady();
},
methods: {
onScroll(e) {
@@ -105,38 +104,37 @@ export default {
const windowHeight = this.templeList.length * 220;
if (scrollTop === 0) {
this.page = 1;
this.getTempleList()
return
this.getTempleList();
return;
}
if(((scrollTop + scrollHeight) / windowHeight) > 0.9){
this.loadMore()
if ((scrollTop + scrollHeight) / windowHeight > 0.9) {
this.loadMore();
}
},
initMap() {
TMAPLoader.load({
key: process.env.VUE_APP_TMAP_KEY
}).then(TMap => {
key: process.env.VUE_APP_TMAP_KEY,
}).then((TMap) => {
var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地图
var map = new TMap.Map("container", {
zoom: 12, //设置地图缩放级别
center: center//设置地图中心点坐标
center: center, //设置地图中心点坐标
});
this.map = map;
this.setMarker(TMap)
})
this.setMarker(TMap);
});
},
setMarker(TMap) {
const markers = []
this.templeList.forEach(temple => {
console.log(temple)
const markers = [];
this.templeList.forEach((temple) => {
const infoWindow = new TMap.InfoWindow({
map: this.map,
position: new TMap.LatLng(temple.lat, temple.lng),
content: temple.unit_name
})
markers.push(infoWindow)
})
content: temple.unit_name,
});
markers.push(infoWindow);
});
this.markers = markers;
},
async getTempleList() {
@@ -149,44 +147,45 @@ export default {
}
this.templeList = this.templeList.concat(res.results);
this.noMore = res.results.length < 10;
if(this.mode === 'map'){
if (this.mode === "map") {
this.setMarker();
}
},
async onGetLocation() {
this.positioning = true;
console.log(getLocation)
getLocation().then(res => {
this.positioning = false
getLocation()
.then((res) => {
this.positioning = false;
this.lng = res.longitude;
this.lat = res.latitude;
this.page = 1;
this.templeList = [];
this.getTempleList();
}).catch(() => {
this.positioning = false;
})
.catch(() => {
this.positioning = false;
});
},
refresh() {
this.page = 1;
this.getTempleList()
this.getTempleList();
},
onLocationTo(data) {
openLocation({
longitude: data.lng,
latitude: data.lat,
name: data.unit_name,
address: data.address
})
address: data.address,
});
},
onModeSwitch(mode) {
this.mode = mode;
if(mode === 'map' && !this.map){
if (mode === "map" && !this.map) {
this.initMap();
}
},
onCancel() {
this.keyword = ''
this.keyword = "";
this.page = 1;
this.getTempleList();
},
@@ -195,14 +194,14 @@ export default {
},
loadMore() {
if (this.noMore) return;
clearTimeout(this.timer)
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.page += 1;
this.getTempleList()
}, 300)
this.getTempleList();
}, 300);
},
}
}
},
};
</script>
<style lang="scss">
@@ -228,35 +227,35 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 .4rem;
padding: 0 0.4rem;
color: #333;
padding-bottom: .4rem;
padding-top: .3rem;
padding-bottom: 0.4rem;
padding-top: 0.3rem;
.position {
line-height: .37rem;
line-height: 0.37rem;
color: green;
span {
font-size: .37rem;
font-size: 0.37rem;
display: inline-block;
margin-right: .13rem;
margin-right: 0.13rem;
}
.positioning {
animation: positioning 3s linear infinite;
}
}
.show-mode {
line-height: .37rem;
line-height: 0.37rem;
span {
font-size: .37rem;
font-size: 0.37rem;
display: inline-block;
margin-left: .13rem;
margin-left: 0.13rem;
}
}
}
.temple-list-container {
background: #f5f5f5;
overflow: hidden;
padding: .3rem;
padding: 0.3rem;
.temple-map {
height: 100%;
background: #f5f5f5;
@@ -266,5 +265,4 @@ export default {
}
}
}
</style>
src/pages/user/approve/index.vue
-1
View File
@@ -153,7 +153,6 @@ export default {
})
},
onSelect(action){
console.log(action)
this.form.rank_id = action.id;
this.form.rank_text = action.name;
},
src/pages/user/certificate/index.vue
+36 -35
View File
@@ -2,75 +2,76 @@
<div class="user-certificate" :style="style">
<div class="certificate" v-for="(li, index) in list" :key="index">
<div class="img-wrapper">
<img class="img" :src="li.picture_url" alt="" @click="onDownloadCert(li)">
<img class="img" :src="li.picture_url" alt="" @click="onDownloadCert(li)" />
</div>
<div class="info">
<h3 class="title">{{ li.goods_name }}我都去无群我带我去带我去带我去强无敌我去去带我去带我去带我去请问我去请问带我去带我去</h3>
<span class="date">{{ li.date }}</span>
<p class="number">第<span>{{li.count}}</span>份功德</p>
<p class="number">
第<span>{{ li.count }}</span
>份功德
</p>
<div class="download" @click="onDownloadCert(li)">
<span class="iconfont icon-24px"></span>
<p>长按保存功德证书</p>
</div>
</div>
</div>
</div>
</template>
<script>
import { getCertList } from '@/api';
import { previewImage } from '@/common/wechat-web';
import { getCertList } from "@/api";
import { previewImage } from "@/common/wechat-web";
export default {
data() {
return {
list: [],
bg: ''
}
bg: "",
};
},
created() {
this.wechatReady()
this.wechatReady();
this.getCertList();
},
computed: {
style() {
return {
backgroundColor: '#f5f5f5',
backgroundColor: "#f5f5f5",
backgroundImage: `url(${this.bg})`,
backgroundSize: 'contain',
backgroundPosition: 'top center',
backgroundRepeat: 'no-repeat'
}
}
backgroundSize: "contain",
backgroundPosition: "top center",
backgroundRepeat: "no-repeat",
};
},
},
methods: {
async getCertList() {
const res = await getCertList();
console.log(res)
this.list = res.results;
this.bg = res.cert_bg;
},
onDownloadCert(cert) {
previewImage(cert.picture_url, [cert.picture_url])
}
}
}
previewImage(cert.picture_url, [cert.picture_url]);
},
},
};
</script>
<style lang="scss">
.user-certificate {
// max-height: 100vh;
padding-top: 4.67rem;
padding-bottom: .5rem;
padding-bottom: 0.5rem;
.certificate {
display: flex;
font-size: .37rem;
font-size: 0.37rem;
background: white;
margin: .4rem;
border-radius: .13rem;
padding: .4rem;
box-shadow: 0 0 .2rem rgba(0,0,0,0.05);
margin: 0.4rem;
border-radius: 0.13rem;
padding: 0.4rem;
box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.05);
.img-wrapper {
width: 2.5rem;
height: 2.5rem;
@@ -85,28 +86,28 @@ export default {
}
.info {
flex: 1;
margin-left: .4rem;
margin-left: 0.4rem;
position: relative;
.title {
font-size: .35rem;
font-size: 0.35rem;
line-height: 1.3;
@extend .text-multiple-2;
height: 2.4em;
}
.date {
margin-top: .8rem;
margin-top: 0.8rem;
display: block;
font-size: .35rem;
font-size: 0.35rem;
color: #aaa;
}
.number {
margin-top: .15rem;
font-size: .35rem;
margin-top: 0.15rem;
font-size: 0.35rem;
color: #444;
span {
color: red;
font-weight: bold;
padding: 0 .13rem;
padding: 0 0.13rem;
}
}
.download {
@@ -115,10 +116,10 @@ export default {
bottom: 0;
color: #666;
text-align: center;
font-size: .29rem;
font-size: 0.29rem;
.iconfont {
font-size: .8rem;
padding-bottom: .1rem;
font-size: 0.8rem;
padding-bottom: 0.1rem;
display: inline-block;
}
}
src/pages/user/course/count/index.vue
+67 -68
View File
@@ -5,7 +5,7 @@
</div>
<div class="course-container">
<h1 class="title border-bottom">
<span class="title-text">{{data.name || '波若波罗密多心经'}}</span>
<span class="title-text">{{ data.name || "波若波罗密多心经" }}</span>
<span class="feedback" @click="backVisible = true">回向文</span>
</h1>
<h2 class="content-name">经文内容</h2>
@@ -25,8 +25,8 @@
<h4 class="volumn-count">{{ count }}</h4>
<div class="picture-wrapper">
<span @touchstart="onTouchstart" @touchend="onTouchEnd">
<img v-if="pressed" src="@/assets/img/down.jpg" alt="">
<img v-else src="@/assets/img/up.jpg" alt="">
<img v-if="pressed" src="@/assets/img/down.jpg" alt="" />
<img v-else src="@/assets/img/up.jpg" alt="" />
</span>
</div>
<div class="save-group">
@@ -40,7 +40,7 @@
<van-popup v-model="visible" round>
<div class="input-count">
<h1 class="title">直接报数</h1>
<input class="input" v-model="inputCount" type="tel" placeholder="请输入1-9的数字" v-number-only>
<input class="input" v-model="inputCount" type="tel" placeholder="请输入1-9的数字" v-number-only />
<button class="confirm" @click="onConfirm">确认</button>
</div>
</van-popup>
@@ -59,7 +59,7 @@
</template>
<script>
import { getCourseDetail, postCount } from "@/api"
import { getCourseDetail, postCount } from "@/api";
export default {
data() {
@@ -73,8 +73,8 @@ export default {
inputCount: 0,
visible: false,
backVisible: false,
backwards: ''
}
backwards: "",
};
},
mounted() {
this.getCourseDetail();
@@ -83,14 +83,14 @@ export default {
async getCourseDetail() {
const res = await getCourseDetail(this.query.id);
this.data = res;
this.backwards = res.backward
this.backwards = res.backward;
},
onTouchstart() {
this.pressed = true;
const audio = this.$refs.audio;
audio.muted = this.muted
audio.play()
this.count += 1
audio.muted = this.muted;
audio.play();
this.count += 1;
},
onTouchEnd() {
this.pressed = false;
@@ -103,15 +103,15 @@ export default {
const request = {
course_id: this.query.id,
quantity: this.count,
backward: this.backwards
}
const res = await postCount(this.query.id, request)
console.log(res)
this.$toast.success('成功')
backward: this.backwards,
};
await postCount(this.query.id, request);
this.$toast.success("成功");
},
clear() {
this.$dialog.confirm({
message: '确认清除计数器？',
this.$dialog
.confirm({
message: "确认清除计数器？",
})
.then(() => {
// on confirm
@@ -120,9 +120,9 @@ export default {
.catch(() => {
// on cancel
});
}
}
}
},
},
};
</script>
<style lang="scss">
@@ -135,18 +135,18 @@ export default {
position: fixed;
right: 0;
bottom: 4rem;
padding: 0 .7rem;
padding: 0 0.7rem;
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
background: $primary-color;
opacity: 0.8;
height: 1.07rem;
line-height: 1.07rem;
font-size: .4rem;
font-size: 0.4rem;
color: white;
}
.course-container {
padding: 0 .4rem;
padding: 0 0.4rem;
flex: 1;
.title {
height: 1.2rem;
@@ -154,27 +154,27 @@ export default {
display: flex;
justify-content: space-between;
.feedback {
font-size: .4rem;
font-size: 0.4rem;
color: $primary-color;
}
.title-text {
font-size: .5rem;
font-size: 0.5rem;
color: #555;
}
}
.content-name {
font-size: .45rem;
font-size: 0.45rem;
color: #666;
padding-top: .5rem;
padding-top: 0.5rem;
}
.content {
font-size: .4rem;
font-size: 0.4rem;
line-height: 1.8;
letter-spacing: 2px;
text-align: justify;
margin-top: .5rem;
margin-top: 0.5rem;
color: #777;
padding-bottom: .5rem;
padding-bottom: 0.5rem;
height: 40vh;
overflow-y: scroll;
}
@@ -185,9 +185,8 @@ export default {
justify-content: space-between;
height: 1rem;
align-items: center;
padding: 0 .4rem;
padding: 0 0.4rem;
span {
}
.volumn {
display: inline-block;
@@ -196,28 +195,28 @@ export default {
text-align: center;
line-height: 1.2rem;
.iconfont {
font-size: .5rem;
font-size: 0.5rem;
}
}
}
.btn-group {
display: flex;
font-size: .4rem;
font-size: 0.4rem;
flex: 1;
.btn {
background: $primary-color;
color: white;
font-size: .3rem;
font-size: 0.3rem;
border-radius: 2px;
display: inline-block;
margin-right: .2rem;
padding: .2rem .4rem;
margin-right: 0.2rem;
padding: 0.2rem 0.4rem;
}
}
.volumn-count {
text-align: center;
font-size: 1.3rem;
padding: .5rem 0;
padding: 0.5rem 0;
color: #666;
}
.picture-wrapper {
@@ -226,7 +225,7 @@ export default {
border-radius: 3rem;
margin-left: auto;
margin-right: auto;
margin-top: .3rem;
margin-top: 0.3rem;
position: relative;
span {
width: 100%;
@@ -238,30 +237,30 @@ export default {
pointer-events: none;
}
&::before {
content: '';
content: "";
width: 3rem;
height: 3rem;
border-radius: 3rem;
position: absolute;
left: -.2rem;
top: -.2rem;
border: .2rem solid $primary-color;
transition: transform .1s linear;
left: -0.2rem;
top: -0.2rem;
border: 0.2rem solid $primary-color;
transition: transform 0.1s linear;
transform-origin: center center;
}
&::after {
content: '';
content: "";
width: 3rem;
height: 3rem;
border-radius: 3rem;
position: absolute;
left: -.2rem;
top: -.2rem;
border: .2rem solid #ddd;
left: -0.2rem;
top: -0.2rem;
border: 0.2rem solid #ddd;
}
&:active {
&::before {
animation: scale .1s linear;
animation: scale 0.1s linear;
}
&::after {
border-color: $primary-color;
@@ -276,13 +275,13 @@ export default {
}
.save-group {
text-align: center;
font-size: .4rem;
padding-top: .8rem;
font-size: 0.4rem;
padding-top: 0.8rem;
span {
display: inline-block;
padding: 0 1rem;
.iconfont {
margin-right: .1rem;
margin-right: 0.1rem;
vertical-align: middle;
}
}
@@ -290,24 +289,24 @@ export default {
}
}
.backward-popup {
top: 44%
top: 44%;
}
.input-count {
padding: .4rem ;
padding: 0.4rem;
width: 8rem;
.title {
font-size: .4rem;
font-size: 0.4rem;
text-align: center;
padding-bottom: .8rem;
padding-bottom: 0.8rem;
}
.input {
width: 100%;
font-size: .4rem;
font-size: 0.4rem;
background: #f5f5f5;
border: 1px solid #ddd;
height: 1rem;
line-height: 1rem;
border-radius: .06rem;
border-radius: 0.06rem;
text-indent: 1em;
}
.confirm {
@@ -316,32 +315,32 @@ export default {
height: 1.2rem;
line-height: 1rem;
display: block;
margin-top: .4rem;
font-size: .4rem;
margin-top: 0.4rem;
font-size: 0.4rem;
color: $primary-color;
}
}
.backword {
width: 90vw;
height: 80vh;
background: #ECF1F4 url('~@/assets/img/backward2.jpg') bottom center no-repeat;
background: #ecf1f4 url("~@/assets/img/backward2.jpg") bottom center no-repeat;
background-size: contain;
.title {
font-size: .5rem;
font-size: 0.5rem;
text-align: center;
padding-top: .8rem;
padding-bottom: .8rem;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
}
.textarea {
background: transparent;
border: 1px solid transparent;
width: calc(100% - 1.2rem);
padding-left: .6rem;
padding-right: .6rem;
padding-left: 0.6rem;
padding-right: 0.6rem;
height: 6rem;
line-height: 1.4;
color: #333;
font-size: .4rem;
font-size: 0.4rem;
}
}
@keyframes scale {
src/pages/user/course/index.vue
+42 -37
View File
@@ -6,11 +6,15 @@
<div class="course-container">
<div class="my-course border-bottom">
<h3 class="title">我的功课</h3>
<p class="progress">已修行<span>{{data.practise_day}}</span>天 功课总计<span>{{data.practise_total}}</span>遍</p>
<p class="progress">
已修行<span>{{ data.practise_day }}</span
>天 功课总计<span>{{ data.practise_total }}</span
>遍
</p>
</div>
<div class="course-wrapper">
<div class="course-item" v-for="course in data.list" :key="course.id" @click="$router.push({ name: 'user-course-detail', query: { id: course.id } })">
<img :src="course.cover" alt="">
<img :src="course.cover" alt="" />
<div class="course-info">
<h3 class="title">{{ course.name }}</h3>
<p class="summary">
@@ -24,7 +28,9 @@
</span>
</p>
<div class="progress-group">
<label for="">今日进度 <span>{{course.progress}}%</span></label>
<label for=""
>今日进度 <span>{{ course.progress }}%</span></label
>
<div class="progress-bar">
<div class="progress" :style="{ width: course.progress + '%' }"></div>
</div>
@@ -37,96 +43,95 @@
</template>
<script>
import { getCourseList } from '@/api';
import { getCourseList } from "@/api";
export default {
data() {
return {
data: null,
courseList: []
}
courseList: [],
};
},
mounted() {
this.getCourseList()
this.getCourseList();
},
methods: {
async getCourseList() {
const res = await getCourseList();
console.log(res)
this.data = res;
}
}
}
},
},
};
</script>
<style lang="scss">
.course {
.course-container {
.my-course {
padding: .4rem;
margin-bottom: .4rem;
padding: 0.4rem;
margin-bottom: 0.4rem;
.title {
font-size: .4rem;
font-size: 0.4rem;
}
.progress {
font-size: .35rem;
font-size: 0.35rem;
color: #999;
padding-top: .2rem;
padding-top: 0.2rem;
span {
color: $primary-color;
padding: 0 .13rem;
padding: 0 0.13rem;
font-weight: bold;
}
}
}
}
.course-wrapper {
padding: 0 .4rem;
padding: 0 0.4rem;
.course-item {
display: flex;
padding: .4rem;
box-shadow: 0 0 .13rem rgba(0,0,0,0.1);
border-radius: .13rem;
padding: 0.4rem;
box-shadow: 0 0 0.13rem rgba(0, 0, 0, 0.1);
border-radius: 0.13rem;
& ~ .course-item {
margin-top: .53rem;
margin-top: 0.53rem;
}
img {
width: 2.67rem;
height: 2.67rem;
vertical-align: top;
border-radius: .08rem;
border-radius: 0.08rem;
}
.course-info {
flex: 1;
margin-left: .53rem;
margin-left: 0.53rem;
.title {
font-size: .4rem;
padding-top: .13rem;
font-size: 0.4rem;
padding-top: 0.13rem;
}
.summary {
font-size: .30rem;
padding: .1rem 0;
margin-top: .2rem;
font-size: 0.3rem;
padding: 0.1rem 0;
margin-top: 0.2rem;
span {
vertical-align: middle;
display: inline-block;
margin-right: .67rem;
margin-right: 0.67rem;
color: #666;
i {
vertical-align: text-bottom;
}
b {
vertical-align: middle;
padding-left: .11rem;
padding-left: 0.11rem;
line-height: 1.3;
}
}
}
.progress-group {
font-size: .35rem;
padding-top: .6rem;
font-size: 0.35rem;
padding-top: 0.6rem;
label {
font-size: .3rem;
font-size: 0.3rem;
color: #666;
span {
color: $primary-color;
@@ -135,8 +140,8 @@ export default {
}
.progress-bar {
background: #f5f5f5;
margin-top: .2rem;
height: .11rem;
margin-top: 0.2rem;
height: 0.11rem;
position: relative;
border-radius: 4px;
overflow: hidden;
@@ -144,7 +149,7 @@ export default {
position: absolute;
left: 0;
top: 0;
height: .11rem;
height: 0.11rem;
width: 50%;
background: $primary-color;
border-radius: 4px;
src/pages/user/order/index.vue
+24 -28
View File
@@ -16,7 +16,7 @@
</template>
<script>
import { getOrderList } from '@/api'
import { getOrderList } from "@/api";
export default {
data() {
@@ -26,31 +26,28 @@ export default {
containerHeight: window.innerHeight,
status: Number(query.current),
orders: [
{ status: 0, name: '全部', list: [] },
{ status: 1, name: '待支付', list: [] },
{ status: 2, name: '处理中', list: [] },
{ status: 3, name: '已处理', list: [] },
]
}
{ status: 0, name: "全部", list: [] },
{ status: 1, name: "待支付", list: [] },
{ status: 2, name: "处理中", list: [] },
{ status: 3, name: "已处理", list: [] },
],
};
},
inject: ['root', 'tabbar'],
inject: ["root", "tabbar"],
mounted() {
this.getOrderList();
},
methods: {
async getOrderList() {
const res = await getOrderList(this.status);
console.log(res)
const current = this.orders.find(item => item.status === this.status);
current.list = res.results
const current = this.orders.find((item) => item.status === this.status);
current.list = res.results;
},
onOrderChange(e){
console.log(e, this.status)
onOrderChange() {
this.getOrderList();
}
}
}
},
},
};
</script>
<style lang="scss">
@@ -58,40 +55,39 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 .4rem;
padding: 0 0.4rem;
color: #333;
margin-bottom: .4rem;
margin-bottom: 0.4rem;
.position {
line-height: .37rem;
line-height: 0.37rem;
color: green;
span {
font-size: .37rem;
font-size: 0.37rem;
display: inline-block;
margin-right: .13rem;
margin-right: 0.13rem;
}
}
.show-mode {
line-height: .37rem;
line-height: 0.37rem;
span {
font-size: .37rem;
font-size: 0.37rem;
display: inline-block;
margin-left: .13rem;
margin-left: 0.13rem;
}
}
}
.temple-list-container {
background: #f5f5f5;
.temple-container {
padding: .4rem;
padding: 0.4rem;
}
.temple-map {
height: 100%;
background: #f5f5f5;
}
}
.order-container {
background: #f5f5f5;
padding: .4rem;
padding: 0.4rem;
}
</style>
vue.config.js
+26 -27
View File
@@ -1,28 +1,31 @@
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
publicPath: '/wap/',
outputDir: 'wap',
publicPath: "./",
outputDir: "wap",
productionSourceMap: false,
filenameHashing: true,
devServer: {
// https:true,
host: '0.0.0.0',
host: "0.0.0.0",
disableHostCheck: false,
proxy: {
'/api': {
"/api": {
target: process.env.VUE_APP_HOST,
changeOrigin: true
}
}
changeOrigin: true,
},
chainWebpack: config => {
const oneOfsMap = config.module.rule('scss').oneOfs.store;
oneOfsMap.forEach(item => {
item.use('sass-resources-loader').loader('sass-resources-loader').options({
resources: './src/assets/scss/common.scss'
}).end();
},
},
chainWebpack: (config) => {
const oneOfsMap = config.module.rule("scss").oneOfs.store;
oneOfsMap.forEach((item) => {
item.use("sass-resources-loader")
.loader("sass-resources-loader")
.options({
resources: "./src/assets/scss/common.scss",
})
.end();
});
// config.plugin('compression').use(
// new CompressionWebpackPlugin({
@@ -37,27 +40,23 @@ module.exports = {
// config.resolve.plugins.delete('prefetch');
// config.resolve.plugins.delete('prerload');
},
configureWebpack: config => {
config.plugins.forEach(plugin => {
configureWebpack: (config) => {
config.plugins.forEach((plugin) => {
if (plugin instanceof HtmlWebpackPlugin) {
plugin.options.title = '自在福田 - 寺庙联盟'
plugin.options.title = "自在福田 - 寺庙联盟";
}
})
});
},
css: {
sourceMap: false,
loaderOptions: {
scss: {
data: null,
},
postcss: {
plugins: [
]
}
}
}
}
plugins: [],
},
},
},
};
wap/index.html
+1 -1
View File
File diff suppressed because one or more lines are too long
yarn.lock
+4384 -3799
View File
File diff suppressed because it is too large Load Diff