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
+61 -61
View File
@@ -1,66 +1,66 @@
{
"name": "temple-union",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --mode development",
"build:test": "vue-cli-service build --mode test",
"build": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint"
},
"dependencies": {
"async-validator": "^4.0.7",
"axios": "^0.24.0",
"better-scroll": "^2.4.2",
"core-js": "^3.6.5",
"dayjs": "^1.10.7",
"delay": "^5.0.0",
"mescroll.js": "^1.4.2",
"qs": "^6.10.1",
"safe-area-insets": "^1.4.1",
"swiper": "5",
"vant": "^2.12.30",
"vue": "^2.6.11",
"vue-awesome-swiper": "3.1.3",
"vue-router": "^3.5.3",
"vuex": "3",
"vuex-persistedstate": "^4.1.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"babel-plugin-import": "^1.13.3",
"compression-webpack-plugin": "5.0.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.43.4",
"sass-loader": "^7.1.0",
"sass-resources-loader": "^2.2.4",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"globals": {
"wx": true,
"wechatInstance": true
"name": "temple-union",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --mode development",
"build:test": "vue-cli-service build --mode test",
"build": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint"
},
"env": {
"node": true
"dependencies": {
"async-validator": "^4.0.7",
"axios": "^0.24.0",
"better-scroll": "^2.4.2",
"core-js": "^3.6.5",
"dayjs": "^1.10.7",
"delay": "^5.0.0",
"mescroll.js": "^1.4.2",
"qs": "^6.10.1",
"safe-area-insets": "^1.4.1",
"swiper": "5",
"vant": "^2.12.30",
"vue": "^2.6.11",
"vue-awesome-swiper": "3.1.3",
"vue-router": "^3.5.3",
"vuex": "3",
"vuex-persistedstate": "^4.1.0"
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"babel-plugin-import": "^1.13.3",
"compression-webpack-plugin": "5.0.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.89.0",
"sass-loader": "^7.1.0",
"sass-resources-loader": "^2.2.4",
"vue-template-compiler": "^2.6.11"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
"eslintConfig": {
"root": true,
"globals": {
"wx": true,
"wechatInstance": true
},
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
pnpm-lock.yaml
Generated
+11111 -10804
View File
File diff suppressed because it is too large Load Diff
src/api/index.js
+59 -53
View File
@@ -1,57 +1,57 @@
import service from './service';
import service from "./service";
function formatRegion(data){
function formatRegion(data) {
const result = [];
for(let i = 0; i < data.length; i++){
for (let i = 0; i < data.length; i++) {
const obj = {
value: data[i].id,
text: data[i].name,
};
if (data[i].children) {
obj.children = formatRegion(data[i].children);
}
if(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');
if (region === null) {
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)
data = JSON.parse(region);
}
return data
}
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
+32 -34
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)
if (query.no_login) {
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){
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
if (response.data.code === 100007) {
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('请验证手机号')
if (response.data.code === 1000023) {
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)
if (response.data.code !== 0) {
Toast.fail(response.data.message);
}
}
if(response.status !== 200){
Toast.fail('服务器错误')
if (response.status !== 200) {
Toast.fail("服务器错误");
}
return Promise.reject(response);
})
});
export default instance;
src/common/wechat-web.js
+37 -45
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');
wx.ready(function () {
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,26 +83,26 @@ 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 位
package: paymentConfig.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType: paymentConfig.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
paySign: paymentConfig.paySign, // 支付签名
success: function(res) {
success: function (res) {
// 支付成功后的回调函数
resolve(res);
},
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){
function previewImage(current, urls) {
wechatInstance.previewImage({
current, urls
})
current,
urls,
});
}
export { signToWechat, getLocation, requestPayment, openLocation, updateAppMessageShareData, updateTimelineShareData, previewImage };
src/components/Thanksgiving/index.vue
+28 -32
View File
@@ -8,9 +8,9 @@
</div>
<div class="body">
<div>
<div v-for="slide in type_nav" :key="slide.id" class="1231">
<div v-for="slide in type_nav" :key="slide.id" class="1231">
<div v-if="type_id === slide.id" class="123">
<user-merit v-for="dynamic in slide.list" :key="dynamic.id" :data="dynamic" ></user-merit>
<user-merit v-for="dynamic in slide.list" :key="dynamic.id" :data="dynamic"></user-merit>
</div>
</div>
</div>
@@ -22,23 +22,22 @@
<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(){
data() {
return {
type_id: this.typeId || 1,
type_nav: [
@@ -47,38 +46,36 @@ export default {
{ id: 3, title: "总榜", list: [] },
],
page: 1,
}
};
},
mounted(){
mounted() {
this.getOrderCompare();
},
methods: {
onSetType(type){
onSetType(type) {
this.type_id = type.id;
this.getOrderCompare();
},
async getOrderCompare(){
async getOrderCompare() {
let res;
if(this.templeId){
res = await getOrderCompare(this.templeId || '1', this.page, this.type_id, this.goodsId, this.goodsType)
if (this.templeId) {
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(){
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>
@@ -109,18 +106,17 @@ export default {
}
}
}
.body{
.swiper-container{
.body {
.swiper-container {
height: 5.33rem;
}
.thanks-more{
.thanks-more {
height: 1rem;
line-height: 1rem;
font-size: .4rem;
font-size: 0.4rem;
color: #333;
text-align: center;
}
}
}
</style>
</style>
src/components/content-expand/index.vue
+32 -36
View File
@@ -1,87 +1,83 @@
<template>
<div class="content-expand">
<div class="content" :class="[contentOverflow && !show && 'multiple-line-3']" ref="wrapper" :style="{height: (show ? contentHeight : 100) + 'px'}">
<div class="content" :class="[contentOverflow && !show && 'multiple-line-3']" ref="wrapper" :style="{ height: (show ? contentHeight : 100) + 'px' }">
<div ref="content">
<slot></slot>
</div>
</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',
data(){
name: "content-expand",
data() {
return {
wrapperHeight: 0,
contentHeight: 0,
show: false,
wrapperContainerHeight: 0,
defaultContentHeight: 0
}
defaultContentHeight: 0,
};
},
computed: {
contentOverflow: {
get(){
get() {
return this.contentHeight > this.wrapperHeight;
}
}
},
},
},
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)
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);
this.$nextTick(() => {
this.wrapperContainerHeight = this.wrapperHeight;
})
});
},
methods: {
toggle(){
this.show = !this.show
}
}
}
toggle() {
this.show = !this.show;
},
},
};
</script>
<style lang="scss">
.content-expand{
.content{
.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{
.expand {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 1.07rem;
color: #888;
.iconfont{
.iconfont {
display: inline-block;
}
.iconfont-expand{
.iconfont-expand {
transform: rotateZ(180deg);
}
.label{
padding-left: .1rem;
font-size: .35rem;
.label {
padding-left: 0.1rem;
font-size: 0.35rem;
}
}
}
</style>
</style>
src/components/detail-content-expand/index.vue
+37 -42
View File
@@ -1,102 +1,97 @@
<template>
<div class="detail-content-expand">
<div class="content" :class="[contentOverflow && !show && '']" ref="wrapper" :style="{height: (show ? contentHeight : defaultContentHeight) + 'px'}">
<div class="content" :class="[contentOverflow && !show && '']" ref="wrapper" :style="{ height: (show ? contentHeight : defaultContentHeight) + 'px' }">
<div ref="content" class="ref-content">
<slot></slot>
</div>
</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(){
data() {
return {
wrapperHeight: 0,
contentHeight: 0,
show: false,
wrapperContainerHeight: 0,
defaultContentHeight: 0
}
defaultContentHeight: 0,
};
},
computed: {
contentOverflow: {
get(){
get() {
return this.contentHeight > this.wrapperHeight;
}
}
},
},
},
watch: {
'$slots'(val){
console.log('slots val',val)
}
},
mounted(){
this.wrapperHeight = this.$refs.wrapper.offsetHeight
mounted() {
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
toggle() {
this.show = !this.show;
},
refresh(){
refresh() {
const selector = this.$refs.content.querySelector(this.selector);
if(!selector) {
if (!selector) {
this.defaultContentHeight = 100;
return
return;
}
this.defaultContentHeight = selector.offsetHeight / (4/1)
}
}
}
this.defaultContentHeight = selector.offsetHeight / (4 / 1);
},
},
};
</script>
<style lang="scss">
.detail-content-expand{
.content{
.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{
.expand {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 1.07rem;
color: #888;
.iconfont{
.iconfont {
display: inline-block;
}
.iconfont-expand{
.iconfont-expand {
transform: rotateZ(180deg);
}
.label{
padding-left: .1rem;
font-size: .35rem;
.label {
padding-left: 0.1rem;
font-size: 0.35rem;
}
}
}
</style>
</style>
src/components/scroll-view/index.vue
+157 -159
View File
@@ -1,5 +1,5 @@
<template>
<div class="scroll-wrapper" ref="wrapper" :style="{height: wrapperHeight + 'px'}">
<div class="scroll-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
<div class="scroll-content">
<slot></slot>
</div>
@@ -10,174 +10,172 @@
import BScroll from "better-scroll";
export default {
name: "scroll-view",
data(){
name: "scroll-view",
data() {
return {
wrapperHeight: 0
}
wrapperHeight: 0,
};
},
props: {
/**
* 1 滚动的时候会派发scroll事件，会截流。
* 2 滚动的时候实时派发scroll事件，不会截流。
* 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
*/
probeType: {
type: Number,
default: 1,
},
/**
* 点击列表是否派发click事件
*/
click: {
type: Boolean,
default: true,
},
/**
* 是否开启横向滚动
*/
scrollX: {
type: Boolean,
default: false,
},
/**
* 是否派发滚动事件
*/
listenScroll: {
type: Boolean,
default: false,
},
/**
* 列表的数据
*/
data: {
type: Array,
default: null,
},
/**
* 是否派发滚动到底部的事件，用于上拉加载
*/
pullup: {
type: Boolean,
default: false,
},
/**
* 是否派发顶部下拉的事件，用于下拉刷新
*/
pulldown: {
type: Boolean,
default: false,
},
/**
* 是否派发列表滚动开始的事件
*/
beforeScroll: {
type: Boolean,
default: false,
},
/**
* 当数据更新后，刷新scroll的延时。
*/
refreshDelay: {
type: Number,
default: 20,
},
props: {
/**
* 1 滚动的时候会派发scroll事件，会截流。
* 2 滚动的时候实时派发scroll事件，不会截流。
* 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
*/
probeType: {
type: Number,
default: 1,
},
/**
* 点击列表是否派发click事件
*/
click: {
type: Boolean,
default: true,
},
/**
* 是否开启横向滚动
*/
scrollX: {
type: Boolean,
default: false,
},
/**
* 是否派发滚动事件
*/
listenScroll: {
type: Boolean,
default: false,
},
/**
* 列表的数据
*/
data: {
type: Array,
default: null,
},
/**
* 是否派发滚动到底部的事件，用于上拉加载
*/
pullup: {
type: Boolean,
default: false,
},
/**
* 是否派发顶部下拉的事件，用于下拉刷新
*/
pulldown: {
type: Boolean,
default: false,
},
/**
* 是否派发列表滚动开始的事件
*/
beforeScroll: {
type: Boolean,
default: false,
},
/**
* 当数据更新后，刷新scroll的延时。
*/
refreshDelay: {
type: Number,
default: 20,
},
height: {
type: Number
}
},
mounted() {
// 保证在DOM渲染完毕后初始化better-scroll
this.wrapperHeight = this.height || this.$parent.$el.offsetHeight
setTimeout(() => {
this._initScroll();
}, 20);
},
methods: {
_initScroll() {
if (!this.$refs.wrapper) {
return;
}
type: Number,
},
},
mounted() {
// 保证在DOM渲染完毕后初始化better-scroll
this.wrapperHeight = this.height || this.$parent.$el.offsetHeight;
setTimeout(() => {
this._initScroll();
}, 20);
},
// better-scroll的初始化
this.scroll = new BScroll(this.$refs.wrapper, {
probeType: this.probeType,
click: this.click,
scrollX: this.scrollX,
});
methods: {
_initScroll() {
if (!this.$refs.wrapper) {
return;
}
// 是否派发滚动事件
if (this.listenScroll) {
this.scroll.on("scroll", (pos) => {
this.$emit("scroll", pos);
});
}
// better-scroll的初始化
this.scroll = new BScroll(this.$refs.wrapper, {
probeType: this.probeType,
click: this.click,
scrollX: this.scrollX,
});
// 是否派发滚动到底部事件，用于上拉加载
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");
}
});
}
// 是否派发滚动事件
if (this.listenScroll) {
this.scroll.on("scroll", (pos) => {
this.$emit("scroll", pos);
});
}
// 是否派发顶部下拉事件，用于下拉刷新
if (this.pulldown) {
this.scroll.on("touchEnd", (pos) => {
// 下拉动作
if (pos.y > 50) {
this.$emit("pulldown");
}
});
}
// 是否派发滚动到底部事件，用于上拉加载
if (this.pullup) {
this.scroll.on("scrollEnd", () => {
// 滚动到底部
if (this.scroll.y <= this.scroll.maxScrollY + 50) {
this.$emit("pullup");
}
});
}
// 是否派发列表滚动开始的事件
if (this.beforeScroll) {
this.scroll.on("beforeScrollStart", () => {
this.$emit("beforeScroll");
});
}
},
disable() {
// 代理better-scroll的disable方法
this.scroll && this.scroll.disable();
},
enable() {
// 代理better-scroll的enable方法
this.scroll && this.scroll.enable();
},
refresh() {
// 代理better-scroll的refresh方法
this.scroll && this.scroll.refresh();
},
scrollTo() {
// 代理better-scroll的scrollTo方法
this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments);
},
scrollToElement() {
// 代理better-scroll的scrollToElement方法
this.scroll &&
this.scroll.scrollToElement.apply(this.scroll, arguments);
},
},
watch: {
// 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常
data() {
setTimeout(() => {
this.refresh();
}, this.refreshDelay);
},
height: {
handler(val){
// 是否派发顶部下拉事件，用于下拉刷新
if (this.pulldown) {
this.scroll.on("touchEnd", (pos) => {
// 下拉动作
if (pos.y > 50) {
this.$emit("pulldown");
}
});
}
// 是否派发列表滚动开始的事件
if (this.beforeScroll) {
this.scroll.on("beforeScrollStart", () => {
this.$emit("beforeScroll");
});
}
},
disable() {
// 代理better-scroll的disable方法
this.scroll && this.scroll.disable();
},
enable() {
// 代理better-scroll的enable方法
this.scroll && this.scroll.enable();
},
refresh() {
// 代理better-scroll的refresh方法
this.scroll && this.scroll.refresh();
},
scrollTo() {
// 代理better-scroll的scrollTo方法
this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments);
},
scrollToElement() {
// 代理better-scroll的scrollToElement方法
this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments);
},
},
watch: {
// 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常
data() {
setTimeout(() => {
this.refresh();
}, this.refreshDelay);
},
height: {
handler(val) {
this.wrapperHeight = val;
this.scroll && this.scroll.refresh();
}
}
},
},
},
},
};
</script>
src/components/uploader/index.vue
+31 -36
View File
@@ -1,65 +1,60 @@
<template>
<van-uploader class="custom-uploader" v-bind="$attrs" :max-count="maxCount" v-model="fileList" :after-read="onBeforeUpload"></van-uploader>
<!-- <van-uploader class="custom-uploader" v-bind="$attrs" :max-size="isOverSize" :max-count="maxCount" v-model="fileList" @oversize="onOversize" :after-read="onBeforeUpload"></van-uploader> -->
<van-uploader class="custom-uploader" v-bind="$attrs" :max-count="maxCount" v-model="fileList" :after-read="onBeforeUpload"></van-uploader>
<!-- <van-uploader class="custom-uploader" v-bind="$attrs" :max-size="isOverSize" :max-count="maxCount" v-model="fileList" @oversize="onOversize" :after-read="onBeforeUpload"></van-uploader> -->
</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 []
}
}
default() {
return [];
},
},
},
data(){
data() {
return {
fileList: []
}
fileList: [],
};
},
watch: {
fileList(val){
this.$emit('input', val)
}
fileList(val) {
this.$emit("input", val);
},
},
methods: {
isOverSize(){
console.log(this.maxCount * this.maxSize * 1024)
return 500 * 1024
isOverSize() {
return 500 * 1024;
},
onOversize(){
console.log(this.$props)
this.$toast(`文件大小不能超过${this.isOverSize()}kb`)
onOversize() {
this.$toast(`文件大小不能超过${this.isOverSize()}kb`);
},
async onBeforeUpload(obj){
console.log(obj.file.size)
async onBeforeUpload(obj) {
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]'){
for(let file of obj){
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
+42 -42
View File
@@ -1,55 +1,55 @@
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: {
numberOnly: {
bind: function(el) {
el.handler = function() {
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);
},
unbind: function(el) {
el.removeEventListener('input', el.handler)
}
},
copy: {
bind(el, binding, vnode){
console.log(el, binding, vnode)
el.addEventListener('click', () => {
const input = document.createElement('textarea');
input.value = binding.value;
document.body.appendChild(input)
input.select();
document.execCommand('copy');
document.body.removeChild(input)
Toast.success('复制成功')
}, false)
bind(el, binding) {
el.addEventListener(
"click",
() => {
const input = document.createElement("textarea");
input.value = binding.value;
document.body.appendChild(input);
input.select();
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 => {
wechatReady(shareConfig) {
console.log("wechatReady get share config", shareConfig);
getWechatSign(location.href).then((res) => {
signToWechat(res, shareConfig);
});
},
shareToWechat(wx, shareConfig){
if(!shareConfig){
shareToWechat(wx, shareConfig) {
if (!shareConfig) {
return console.error(`wechat share config error: ${shareConfig}`);
}
console.log('share', wx, shareConfig)
},
getHasFullScreen() {
let result = false;
const rate = window.screen.height / window.screen.width;
let limit = window.screen.height === window.screen.availHeight ? 1.8 : 1.65;
let limit = window.screen.height === window.screen.availHeight ? 1.8 : 1.65;
if (rate > limit) {
result = true;
@@ -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
+226 -231
View File
@@ -2,20 +2,20 @@
<div class="everyday-donation" v-if="data">
<div class="content-view">
<div class="topbar" ref="topbar">
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{ backgroundColor: $route.meta.navBarBackgroundColor }" />
</div>
<swiper class="swiper-container" :options="swiperOption">
<swiper-slide v-for="(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>
<div class="monk-profile">
<h1 class="position">{{data.name}}</h1>
<h1 class="position">{{ data.name }}</h1>
<div class="bar">
<span class="status">进行中</span>
<span>已有{{data.sales || 0}}人参与</span>
<span>已有{{ data.sales || 0 }}人参与</span>
</div>
</div>
<div class="divider"></div>
@@ -44,7 +44,7 @@
<div class="support-head">
<span class="label">感恩功德</span>
<ul class="external">
<li :class="[lTypeId === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType.id, 1)">{{lType.name}}</li>
<li :class="[lTypeId === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType.id, 1)">{{ lType.name }}</li>
</ul>
</div>
<div>
@@ -67,11 +67,11 @@
</div>
<ul class="spec">
<li class="random">
<!-- <span class="border-circle" @click="showRandom = true">随喜</span>-->
<!-- <span class="border-circle" @click="showRandom = true">随喜</span>-->
<span class="border-circle" @click="onCustomeBrike">随喜</span>
</li>
<li v-for="(spec, index) in data.spec" :key="index">
<span class="border-circle" :class="[Number(spec.money) === priceUnit && 'active', isDisabled(spec)]" @click="onPriceUnit(spec)">{{spec.money}}元</span>
<span class="border-circle" :class="[Number(spec.money) === priceUnit && 'active', isDisabled(spec)]" @click="onPriceUnit(spec)">{{ spec.money }}元</span>
</li>
</ul>
<div class="auto-donate">
@@ -91,7 +91,7 @@
</div>
</div>
<div class="next-group">
<span class="total">合计：￥{{priceTotal}}</span>
<span class="total">合计：￥{{ priceTotal }}</span>
<button class="next" @click="onToPay">下一步</button>
</div>
</div>
@@ -103,18 +103,13 @@
</div>
<ul class="spec brick-spec">
<li class="random" v-if="onlySpecs && onlySpecs.length == 0">
<span class="border-circle" :class="[is_assign && 'active']" @click="onCustomeBrike">{{data.rule_btn}}</span>
<span class="border-circle" :class="[is_assign && 'active']" @click="onCustomeBrike">{{ data.rule_btn }}</span>
<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 {
@@ -159,20 +156,20 @@ export default {
swiper,
swiperSlide,
},
data(){
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()
for (let i in query) {
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,92 +181,91 @@ 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(){
priceTotal() {
const { priceUnit, is_assign, is_auto, buy_quantity, monthQuantity } = this;
if(is_assign){
if (is_assign) {
return (priceUnit * 100 * buy_quantity) / 100;
}
if(is_auto){
return (priceUnit * 100 * monthQuantity * 30) / 100
if (is_auto) {
return (priceUnit * 100 * monthQuantity * 30) / 100;
}
return (priceUnit * 100 ) / 100;
}
return (priceUnit * 100) / 100;
},
},
mounted(){
if(this.query.goods_type === '1'){
return this.getGoodsDetail('friendly');
mounted() {
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(){
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(){
async onHasLoginToNext() {
await hasLogin();
this.showSpec = true
this.showSpec = true;
},
isDisabled(spec){
isDisabled(spec) {
const { id } = spec;
if(!this.onlySpecs) return false;
return !this.onlySpecs.includes(id) ? 'spec-disabled': ''
if (!this.onlySpecs) return false;
return !this.onlySpecs.includes(id) ? "spec-disabled" : "";
},
// 获取更多感恩功德1
loadMoreFn(){
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){
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);
if(!spec){
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,
}
};
}
},
// 获取商品详情
@@ -278,43 +274,41 @@ export default {
type = tile: 获取添砖加瓦商品
type = common: 获取普通商品
*/
async getGoodsDetail(type){
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)
})
if(!this.onlySpecs){
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){
async getPayRecords(lTypeId, page) {
this.page = page;
this.lTypeId = lTypeId;
const res = await getOrderCompare(this.query.temple_id, this.page, this.lTypeId, this.query.goods_id, this.query.goods_type );
if(this.page === 1){
const res = await getOrderCompare(this.query.temple_id, this.page, this.lTypeId, this.query.goods_id, this.query.goods_type);
if (this.page === 1) {
this.payList = [];
}
this.payList = this.payList.concat(res.list);
this.noMore = res.list.length === 0;
},
async getDynamicDataByGoodsId(goods_id, goods_type){
async getDynamicDataByGoodsId(goods_id, goods_type) {
const { temple_id } = this.$route.query;
const res = await getDynamicDataByGoodsId(temple_id, this.page, goods_id, goods_type);
this.goodsDynamicList = res;
@@ -322,49 +316,49 @@ 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,
},
});
},
// 设置行善单价
onPriceUnit({id, money}){
onPriceUnit({ id, money }) {
this.is_assign = false;
this.priceUnit = Number(money);
this.priceUnitId = id;
this.buy_quantity = 1;
this.spec_id = '';
this.spec_id = "";
},
onRandomNext({ money}){
onRandomNext({ money }) {
this.anyPrice = money;
this.priceUnit = money;
this.onToPay();
},
onToPay(){
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,223 +372,224 @@ 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
amountAbs(number, price) {
return (parseInt(number * 100, 10) * price) / 100;
},
// 自定义砖数
onCustomeBrike(){
onCustomeBrike() {
this.priceUnit = Number(this.data.price) || 0;
this.buy_quantity = 1;
this.is_assign = true;
this.showRandom = true;
}
}
}
},
},
};
</script>
<style lang="scss">
.swiper-container{
.swiper-container {
background: #f5f5f5;
.picture, img{
.picture,
img {
width: 100%;
height: 100%;
}
}
.process-content{
*{
.process-content {
* {
max-width: 100%;
}
}
.caret{
padding-bottom: .2rem;
.head{
.caret {
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;
.iconfont{
font-size: .7rem;
margin-top: 0.13rem;
.iconfont {
font-size: 0.7rem;
}
}
.spec{
.spec {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: .3rem;
padding: .4rem;
.random{
grid-column-start: 1;
grid-column-end: 5;
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;
span {
font-size: 0.35rem;
border-radius: 0.11rem;
width: auto;
display: inline-block;
padding: .3rem .7rem;
&:active{
padding: 0.3rem 0.7rem;
&:active {
background: #f5f5f5;
}
}
span.spec-disabled{
span.spec-disabled {
pointer-events: none;
opacity: 0.6;
}
}
li{
li {
text-align: center;
span{
font-size: .35rem;
span {
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;
&:active{
&:active {
background: rgba($primary-color, 0.1);
}
}
span.spec-disabled{
span.spec-disabled {
pointer-events: none;
background: #f9f9f9;
color: #aaa;
}
}
}
.brick-spec{
.brick-spec {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: .3rem;
.random{
grid-column-start: 1;
grid-column-end: 3;
grid-gap: 0.3rem;
.random {
grid-column-start: 1;
grid-column-end: 3;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
}
span.active{
span.active {
color: $primary-color;
}
}
.auto-donate{
padding: 0 .4rem;
margin-top: .6rem;
.label{
font-size: .4rem;
.auto-donate {
padding: 0 0.4rem;
margin-top: 0.6rem;
.label {
font-size: 0.4rem;
}
.donate{
.donate {
display: flex;
margin-top: .3rem;
margin-top: 0.3rem;
justify-content: space-between;
align-items: center;
span{
font-size: .35rem;
span {
font-size: 0.35rem;
}
}
}
.auto-donate-time{
padding: .4rem ;
margin-top: .4rem;
.donate{
.label{
font-size: .4rem;
.auto-donate-time {
padding: 0.4rem;
margin-top: 0.4rem;
.donate {
.label {
font-size: 0.4rem;
}
display: flex;
align-items: center;
justify-content: space-between;
}
.time-cycle{
.time-cycle {
display: flex;
align-items: flex-end;
.unit{
font-size: .3rem;
.unit {
font-size: 0.3rem;
color: #666;
padding-left: .2rem;
padding-left: 0.2rem;
}
}
}
.next-group-wrapper{
.next-group-wrapper {
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-top: 1px solid #ededed;
}
.next-group{
.next-group {
display: flex;
justify-content: space-between;
padding: .4rem;
padding: 0.4rem;
background: white;
align-items: center;
.total{
font-size: .4rem;
em{
.total {
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;
.next {
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;
.support {
.support-head {
padding: 0 0.4rem;
display: flex;
justify-content: space-between;
height: 1.07rem;
line-height: 1.07rem;
.label{
font-size: .4rem;
.label {
font-size: 0.4rem;
font-weight: bold;
}
.external{
.external {
display: flex;
align-items: center;
li{
margin-left: .3rem;
font-size: .35rem;
li {
margin-left: 0.3rem;
font-size: 0.35rem;
color: #666;
}
li.active{
li.active {
color: #333;
font-weight: bold;
}
}
}
}
.everyday-donation{
.everyday-donation {
height: 100vh;
position: relative;
.goods-content{
padding-left: .3rem;
padding-right: .3rem;
.goods-content {
padding-left: 0.3rem;
padding-right: 0.3rem;
* {
max-width: 100%;
font-size: .35rem;
font-size: 0.35rem;
}
}
.content-view{
.content-view {
position: absolute;
left: 0;
top: 0;
@@ -603,54 +598,54 @@ export default {
overflow-y: scroll;
padding-bottom: calc(env(safe-area-inset-bottom) + 1.6rem);
}
.monk-profile{
padding: .4rem;
margin-bottom: .2rem;
.position{
font-size: .5rem;
padding-top: .2rem;
.monk-profile {
padding: 0.4rem;
margin-bottom: 0.2rem;
.position {
font-size: 0.5rem;
padding-top: 0.2rem;
text-align: justify;
line-height: 1.3;
color: #19282E;
color: #19282e;
}
.bar{
margin-top: .27rem;
.bar {
margin-top: 0.27rem;
}
.status{
padding: .2rem .3rem;
.status {
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{
span {
color: #666;
font-size: .28rem;
font-size: 0.28rem;
}
}
.merit-button-group{
text-align: center;
position: fixed;
bottom: 0;
z-index: 10;
left: 0;
right: 0;
background: white;
padding: .4rem 0;
padding-bottom: calc(env(safe-area-inset-bottom) + .2rem);
.merit-button{
display: inline-block;
background: $primary-color;
color: white;
height: 1.2rem;
font-size: .37rem;
}
.merit-button-group {
text-align: center;
position: fixed;
bottom: 0;
z-index: 10;
left: 0;
right: 0;
background: white;
padding: 0.4rem 0;
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: 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;
}
}
}
</style>
src/pages/goods-detail/components/fill-information.vue
+79 -81
View File
@@ -1,19 +1,19 @@
<template>
<div>
<van-cell-group>
<van-cell title="功德芳名" :value="person.name" is-link @click="onAction('name')"/>
<van-cell title="心愿" :value="dream" is-link @click="onAction('desire')" />
</van-cell-group>
<div>
<van-cell-group>
<van-cell title="功德芳名" :value="person.name" is-link @click="onAction('name')" />
<van-cell title="心愿" :value="dream" is-link @click="onAction('desire')" />
</van-cell-group>
<van-popup v-model="showDialog" position="bottom" safe-area-inset-bottom style="min-height: 50vh">
<div class="add-merit-name" v-if="actionName === 'name'">
<h3 class="title">功德芳名</h3>
<div class="add-name">
<input class="input" type="text" v-model="name" placeholder="请输入功德主姓名">
<input class="input" type="text" v-model="name" placeholder="请输入功德主姓名" />
<button class="btn" @click="addName">添加</button>
</div>
<div class="name-group">
<span class="name" v-for="(name, index) in names" :key="name.id" @click="onSelectName(name)">
{{name.name}}
{{ name.name }}
<i class="iconfont icon-biaodankongjianshanchu" @click.stop="onDeleteName(name, index)"></i>
</span>
</div>
@@ -23,7 +23,7 @@
<h3 class="title">心愿</h3>
<div class="desire-input">
<textarea class="desire-textarea" v-model="dream" type="text" maxlength="50" placeholder="请输入您的心愿" />
<span>{{dream.length}}/50</span>
<span>{{ dream.length }}/50</span>
</div>
<div class="desire-quike">
<div class="bar">
@@ -31,53 +31,53 @@
<span class="update" @click="getDreamList">换一组<i class="iconfont icon-shuaxin"></i></span>
</div>
<div class="name-group">
<span class="name" v-for="(dream, index) in dreamList" :key="index" @click="desire = dream">{{dream}}</span>
<span class="name" v-for="(dream, index) in dreamList" :key="index" @click="desire = dream">{{ dream }}</span>
</div>
</div>
<button class="confirm" @click="onConfirmDream">确认</button>
</div>
</van-popup>
</div>
</div>
</template>
<script>
import { getDreamList, getMeritName } from '@/api';
import { getDreamList, getMeritName } from "@/api";
export default {
data(){
data() {
return {
checked: false,
showDialog: false,
actionName: 'name',
actionName: "name",
person: {},
name: '',
dream: '',
desire: '',
name: "",
dream: "",
desire: "",
names: [],
dreamList: []
}
dreamList: [],
};
},
mounted(){
mounted() {
this.getName();
this.getDreamList();
},
methods: {
onAction(name){
onAction(name) {
this.showDialog = true;
this.actionName = name;
},
onConfirmMeritName(){
this.$emit('change', {
onConfirmMeritName() {
this.$emit("change", {
...this.person,
merit_name_id: this.person.id,
dream: this.dream,
})
});
},
onSelectName(name){
onSelectName(name) {
this.person = name;
this.showDialog = false;
},
onConfirmDream(){
onConfirmDream() {
this.showDialog = false;
this.dream = this.desire;
this.onConfirmMeritName();
@@ -88,115 +88,113 @@ export default {
this.names = data;
},
//获取心愿列表
async getDreamList(){
async getDreamList() {
const list = await getDreamList();
console.log(list)
this.dreamList = list;
}
}
},
},
};
</script>
<style lang="scss">
.add-merit-name{
padding: .4rem;
.title{
font-size: .4rem;
margin-bottom: .4rem;
.add-merit-name {
padding: 0.4rem;
.title {
font-size: 0.4rem;
margin-bottom: 0.4rem;
}
.add-name{
.add-name {
display: flex;
.input{
.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;
.btn {
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;
span{
.name-group {
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{
.iconfont {
position: absolute;
right: -.25rem;
top: -.25rem;
font-size: .5rem;
right: -0.25rem;
top: -0.25rem;
font-size: 0.5rem;
color: red;
}
}
}
.desire-input{
.desire-input {
border: 1px solid #ddd;
border-radius: .13rem;
border-radius: 0.13rem;
overflow: hidden;
.desire-textarea{
.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{
span {
display: block;
text-align: right;
padding: .2rem;
font-size: .35rem;
padding: 0.2rem;
font-size: 0.35rem;
}
}
.desire-quike{
.desire-quike {
margin-top: 1rem;
.bar{
.bar {
display: flex;
justify-content: space-between;
align-items: center;
font-size: .4rem;
margin-bottom: .3rem;
.update{
font-size: .35rem;
font-size: 0.4rem;
margin-bottom: 0.3rem;
.update {
font-size: 0.35rem;
color: $primary-color;
}
}
.name-group{
padding: .1rem 0;
.name{
.name-group {
padding: 0.1rem 0;
.name {
}
}
}
.confirm{
.confirm {
background: $primary-color;
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
+202 -202
View File
@@ -1,17 +1,17 @@
<template>
<div class="goods-detail" v-if="data" :style="{paddingBottom: paddingBottom + 'px'}">
<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>
<div class="monk-profile">
<h1 class="position">{{data.name}}</h1>
<h1 class="position">{{ data.name }}</h1>
<div class="bar">
<span class="status">进行中</span>
<span>已有{{data.sales || 0}}人参与</span>
<span>已有{{ data.sales || 0 }}人参与</span>
</div>
</div>
@@ -29,7 +29,7 @@
<div class="support-head">
<span class="label">感恩功德</span>
<ul class="external">
<li :class="[lTypeId === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType.id, 1)">{{lType.name}}</li>
<li :class="[lTypeId === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType.id, 1)">{{ lType.name }}</li>
</ul>
</div>
<div>
@@ -42,54 +42,56 @@
<fixed-bottom ref="fixedBottom">
<button class="iconfont icon-home" v-if="query.no_login === '1'" @click="backHome"></button>
<button class="merit-button" @click="onHasLoginToNext">{{data.pay_name}}</button>
<button class="merit-button" @click="onHasLoginToNext">{{ data.pay_name }}</button>
</fixed-bottom>
<van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" safe-area-inset-bottom :close-on-click-overlay="false" :close-on-popstate="true">
<div class="caret-spec" >
<div class="caret-spec">
<div class="head">
<span>参与流程： </span>
<ul class="step-inline">
<li :class="[ current === 0 && 'current']">选择类型</li>
<li :class="[ current === 1 && 'current']">填写信息</li>
<li :class="[ current === 2 && 'current']">参与成功</li>
<li :class="[current === 0 && 'current']">选择类型</li>
<li :class="[current === 1 && 'current']">填写信息</li>
<li :class="[current === 2 && 'current']">参与成功</li>
</ul>
</div>
<transition>
<template >
<template>
<select-spec v-if="current === 0" v-model="spec_id" :number.sync="quantity" :data="data"></select-spec>
<fill-information v-if="current === 1" :data="data" @change="onDreamInfoChange"></fill-information>
</template>
</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>
</van-popup>
<!-- 随喜金额-->
<!-- 随喜金额-->
<random-money v-if="showAnyAmount" :value.sync="showAnyAmount" @change="onReceiveAnyAmount"></random-money>
</div>
</template>
<script>
import 'swiper/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import "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,
swiper,
swiperSlide,
SelectSpec,
FillInformation
FillInformation,
},
data(){
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,92 +110,91 @@ 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'){
priceUnit() {
if (this.spec_id === "is_customized") {
return this.anyPrice;
}
const spec = this.data.spec.find(item => item.id === this.spec_id);
if(!spec){
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
priceTotal() {
if (this.is_auto) {
return (parseInt(this.priceUnit * 100, 10) * this.quantity * 30) / 100;
}
return (parseInt(this.priceUnit * 100, 10) * this.quantity) / 100;
},
},
mounted(){
this.getGoodsDetail('common');
mounted() {
this.getGoodsDetail("common");
},
methods: {
backHome(){
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(){
async onHasLoginToNext() {
await hasLogin();
this.showSpec = true
this.showSpec = true;
},
// 接收随喜金额
onReceiveAnyAmount(anyObj){
// 接收随喜金额·
onReceiveAnyAmount(anyObj) {
this.anyPrice = anyObj.money;
this.onToFillMeritName();
},
// dreamInfo: 心愿信息
onDreamInfoChange(dreamInfo){
onDreamInfoChange(dreamInfo) {
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 || '随喜'
};
getSelectedSpec() {
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('请选择类型')
onNextStep() {
if (!this.spec_id) {
this.$toast.fail("请选择类型");
return;
}
if( this.spec_id === 'is_customized'){
if (this.spec_id === "is_customized") {
this.showAnyAmount = true;
return ;
return;
}
this.current += 1;
if(this.current > 0){
if (this.current > 0) {
this.onToFillMeritName();
}
},
onToFillMeritName(){
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,78 +205,78 @@ 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){
async getGoodsDetail(type) {
const { goods_id, temple_id } = this.$route.query;
const response = await getGoodsDetail(type, goods_id, temple_id);
this.data = response;
await this.getPayRecords(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(){
loadMoreFn() {
this.page += 1;
this.getPayRecords(this.lTypeId, this.page)
this.getPayRecords(this.lTypeId, this.page);
},
// 获取感恩功德
async getPayRecords(lTypeId, page){
async getPayRecords(lTypeId, page) {
this.page = page;
this.lTypeId = lTypeId;
const res = await getOrderCompare(this.query.temple_id, this.page, this.lTypeId, this.query.goods_id, this.query.goods_type );
if(this.page === 1){
const res = await getOrderCompare(this.query.temple_id, this.page, this.lTypeId, this.query.goods_id, this.query.goods_type);
if (this.page === 1) {
this.payList = [];
}
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;
.goods-detail {
.goods-content {
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;
.light-container {
padding-left: 0.4rem;
padding-right: 0.4rem;
max-height: 10rem;
overflow: auto;
.light-wrapper{
.light-wrapper {
border-top: 1px solid #ddd;
h1{
font-size: .4rem;
margin-top: .4rem;
h1 {
font-size: 0.4rem;
margin-top: 0.4rem;
margin-bottom: 3px;
}
.light-group{
img.light-icon{
.light-group {
img.light-icon {
width: $lightWidth;
height: $lightWidth;
vertical-align: top;
}
span{
font-size: .4rem;
span {
font-size: 0.4rem;
display: block;
text-align: center;
padding-top: .3rem;
padding-top: 0.3rem;
}
}
.van-swipe__indicators {
@@ -292,218 +293,217 @@ $lightWidth: 1.3rem;
}
}
.light-size,
.light-count{
font-size: .4rem;
.light-count {
font-size: 0.4rem;
display: flex;
justify-content: space-between;
margin-top: .6rem;
margin-top: 0.6rem;
align-items: center;
margin-bottom: .65rem;
span{
margin-bottom: 0.65rem;
span {
color: black;
opacity: 1;
}
}
.light-size{
.light-size {
margin-top: 1.1rem;
}
.light-count{
.light-count {
align-items: center;
margin-bottom: .2rem;
margin-bottom: 0.2rem;
}
}
.support{
margin-bottom: .5rem;
.support-head{
padding: 0 .4rem;
.support {
margin-bottom: 0.5rem;
.support-head {
padding: 0 0.4rem;
display: flex;
justify-content: space-between;
height: 1.07rem;
line-height: 1.07rem;
.label{
font-size: .4rem;
.label {
font-size: 0.4rem;
font-weight: bold;
}
.external{
.external {
display: flex;
align-items: center;
li{
margin-left: .3rem;
font-size: .35rem;
li {
margin-left: 0.3rem;
font-size: 0.35rem;
color: #666;
}
li.active{
li.active {
color: #333;
font-weight: bold;
}
}
}
}
.swiper-container{
.swiper-container {
background: #f5f5f5;
.picture, img{
.picture,
img {
width: 100%;
height: 100%;
}
}
.monk-profile{
padding: .4rem;
.position{
font-size: .5rem;
padding-top: .2rem;
color: #19282E;
.monk-profile {
padding: 0.4rem;
.position {
font-size: 0.5rem;
padding-top: 0.2rem;
color: #19282e;
line-height: 1.3;
}
.introduction{
font-size: .37rem;
margin-top: .4rem;
.introduction {
font-size: 0.37rem;
margin-top: 0.4rem;
line-height: 1.3;
text-align: justify;
color: #666;
}
.bar{
margin-top: .27rem;
.bar {
margin-top: 0.27rem;
}
.status{
padding: .2rem .3rem;
.status {
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{
span {
color: #666;
font-size: .28rem;
font-size: 0.28rem;
}
}
.temple-info{
.temple-info {
border-top: 1px solid #ddd;
padding: .3rem .4rem;
padding: 0.3rem 0.4rem;
display: flex;
align-items: center;
.temple-img{
.temple-img {
width: 1rem;
height: 1rem;
border-radius: 1rem;
margin-right: .3rem;
margin-right: 0.3rem;
}
.temple-name{
.temple-name {
flex: 1;
.name{
font-size: .35rem;
.name {
font-size: 0.35rem;
color: #333;
}
.visitor{
.visitor {
color: #666;
font-size: .3rem;
margin-top: .2rem;
font-size: 0.3rem;
margin-top: 0.2rem;
display: block;
}
}
}
.detail-button-group{
text-align: center;
position: fixed;
bottom: 0;
z-index: 10;
left: 0;
right: 0;
background: white;
border-top: .01rem solid #ddd;
padding: .3rem;
}
.merit-button{
.detail-button-group {
text-align: center;
position: fixed;
bottom: 0;
z-index: 10;
left: 0;
right: 0;
background: white;
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{
.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;
.iconfont{
font-size: .7rem;
margin-top: 0.13rem;
.iconfont {
font-size: 0.7rem;
}
.step-inline{
.step-inline {
display: inline-block;
flex: 1;
font-size: .35rem;
li{
font-size: 0.35rem;
li {
display: inline-block;
& ~ li:before{
content: '-';
padding: 0 .1rem;
& ~ li:before {
content: "-";
padding: 0 0.1rem;
}
}
li.current{
li.current {
color: $primary-color;
}
}
}
.auto-donate-time{
padding: .4rem ;
margin-top: .4rem;
.auto-donate-time {
padding: 0.4rem;
margin-top: 0.4rem;
margin-bottom: 1rem;
.donate{
.label{
font-size: .4rem;
.donate {
.label {
font-size: 0.4rem;
}
display: flex;
align-items: center;
justify-content: space-between;
}
.time-cycle{
.time-cycle {
display: flex;
align-items: flex-end;
.unit{
font-size: .3rem;
.unit {
font-size: 0.3rem;
color: #666;
padding-left: .2rem;
padding-left: 0.2rem;
}
}
}
.next-group{
.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;
em{
.total {
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;
.next {
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
+79 -81
View File
@@ -1,19 +1,19 @@
<template>
<div>
<van-cell-group>
<van-cell title="功德芳名" :value="person.name" is-link @click="onAction('name')"/>
<van-cell title="心愿" :value="dream" is-link @click="onAction('desire')" />
</van-cell-group>
<div>
<van-cell-group>
<van-cell title="功德芳名" :value="person.name" is-link @click="onAction('name')" />
<van-cell title="心愿" :value="dream" is-link @click="onAction('desire')" />
</van-cell-group>
<van-popup v-model="showDialog" position="bottom" safe-area-inset-bottom style="min-height: 50vh">
<div class="add-merit-name" v-if="actionName === 'name'">
<h3 class="title">功德芳名</h3>
<div class="add-name">
<input class="input" type="text" v-model="name" placeholder="请输入功德主姓名">
<input class="input" type="text" v-model="name" placeholder="请输入功德主姓名" />
<button class="btn" @click="addName">添加</button>
</div>
<div class="name-group">
<span class="name" v-for="(name, index) in names" :key="name.id" @click="onSelectName(name)">
{{name.name}}
{{ name.name }}
<i class="iconfont icon-biaodankongjianshanchu" @click.stop="onDeleteName(name, index)"></i>
</span>
</div>
@@ -23,7 +23,7 @@
<h3 class="title">心愿</h3>
<div class="desire-input">
<textarea class="desire-textarea" v-model="dream" type="text" maxlength="50" placeholder="请输入您的心愿" />
<span>{{dream.length}}/50</span>
<span>{{ dream.length }}/50</span>
</div>
<div class="desire-quike">
<div class="bar">
@@ -31,53 +31,53 @@
<span class="update" @click="getDreamList">换一组<i class="iconfont icon-shuaxin"></i></span>
</div>
<div class="name-group">
<span class="name" v-for="(dream, index) in dreamList" :key="index" @click="desire = dream">{{dream}}</span>
<span class="name" v-for="(dream, index) in dreamList" :key="index" @click="desire = dream">{{ dream }}</span>
</div>
</div>
<button class="confirm" @click="onConfirmDream">确认</button>
</div>
</van-popup>
</div>
</div>
</template>
<script>
import { getDreamList, getMeritName } from '@/api';
import { getDreamList, getMeritName } from "@/api";
export default {
data(){
data() {
return {
checked: false,
showDialog: false,
actionName: 'name',
actionName: "name",
person: {},
name: '',
dream: '',
desire: '',
name: "",
dream: "",
desire: "",
names: [],
dreamList: []
}
dreamList: [],
};
},
mounted(){
mounted() {
this.getName();
this.getDreamList();
},
methods: {
onAction(name){
onAction(name) {
this.showDialog = true;
this.actionName = name;
},
onConfirmMeritName(){
this.$emit('change', {
onConfirmMeritName() {
this.$emit("change", {
...this.person,
merit_name_id: this.person.id,
dream: this.dream,
})
});
},
onSelectName(name){
onSelectName(name) {
this.person = name;
this.showDialog = false;
},
onConfirmDream(){
onConfirmDream() {
this.showDialog = false;
this.dream = this.desire;
this.onConfirmMeritName();
@@ -88,115 +88,113 @@ export default {
this.names = data;
},
//获取心愿列表
async getDreamList(){
async getDreamList() {
const list = await getDreamList();
console.log(list)
this.dreamList = list;
}
}
},
},
};
</script>
<style lang="scss">
.add-merit-name{
padding: .4rem;
.title{
font-size: .4rem;
margin-bottom: .4rem;
.add-merit-name {
padding: 0.4rem;
.title {
font-size: 0.4rem;
margin-bottom: 0.4rem;
}
.add-name{
.add-name {
display: flex;
.input{
.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;
.btn {
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;
span{
.name-group {
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{
.iconfont {
position: absolute;
right: -.25rem;
top: -.25rem;
font-size: .5rem;
right: -0.25rem;
top: -0.25rem;
font-size: 0.5rem;
color: red;
}
}
}
.desire-input{
.desire-input {
border: 1px solid #ddd;
border-radius: .13rem;
border-radius: 0.13rem;
overflow: hidden;
.desire-textarea{
.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{
span {
display: block;
text-align: right;
padding: .2rem;
font-size: .35rem;
padding: 0.2rem;
font-size: 0.35rem;
}
}
.desire-quike{
.desire-quike {
margin-top: 1rem;
.bar{
.bar {
display: flex;
justify-content: space-between;
align-items: center;
font-size: .4rem;
margin-bottom: .3rem;
.update{
font-size: .35rem;
font-size: 0.4rem;
margin-bottom: 0.3rem;
.update {
font-size: 0.35rem;
color: $primary-color;
}
}
.name-group{
padding: .1rem 0;
.name{
.name-group {
padding: 0.1rem 0;
.name {
}
}
}
.confirm{
.confirm {
background: $primary-color;
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
+222 -221
View File
@@ -1,26 +1,26 @@
<template>
<div class="goods-detail" v-if="data" :style="{paddingBottom: paddingBottom + 'px'}">
<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>
<div class="monk-profile">
<h1 class="position">{{data.details.title}}</h1>
<h1 class="position">{{ data.details.title }}</h1>
<div class="bar">
<span class="status">进行中</span>
<span>已有{{data.details.sales || 0}}人参与</span>
<span>已有{{ data.details.sales || 0 }}人参与</span>
</div>
</div>
<!-- <div class="temple-info">-->
<!-- <img class="temple-img" :src="data.temple.picture" alt="">-->
<!-- <div class="temple-name">-->
<!-- <h4 class="name">{{data.temple.unit_name}}</h4>-->
<!-- <p class="visitor">已有 <span>{{data.temple.visit}}</span> 人到访过</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="temple-info">-->
<!-- <img class="temple-img" :src="data.temple.picture" alt="">-->
<!-- <div class="temple-name">-->
<!-- <h4 class="name">{{data.temple.unit_name}}</h4>-->
<!-- <p class="visitor">已有 <span>{{data.temple.visit}}</span> 人到访过</p>-->
<!-- </div>-->
<!-- </div>-->
<div class="divider"></div>
<div class="panel">
<div class="panel-head">
@@ -33,7 +33,7 @@
<div class="support-head">
<span class="label">感恩功德</span>
<ul class="external">
<li :class="[listType === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType, 1)">{{lType.name}}</li>
<li :class="[listType === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType, 1)">{{ lType.name }}</li>
</ul>
</div>
<div>
@@ -49,13 +49,13 @@
</fixed-bottom>
<van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" safe-area-inset-bottom :close-on-click-overlay="false" :close-on-popstate="true">
<div class="caret-spec" >
<div class="caret-spec">
<div class="head">
<span>参与流程： </span>
<ul class="step-inline">
<li :class="[ current === 0 && 'current']">选择类型</li>
<li :class="[ current === 1 && 'current']">填写信息</li>
<li :class="[ current === 2 && 'current']">参与成功</li>
<li :class="[current === 0 && 'current']">选择类型</li>
<li :class="[current === 1 && 'current']">填写信息</li>
<li :class="[current === 2 && 'current']">参与成功</li>
</ul>
</div>
<transition>
@@ -68,8 +68,8 @@
<van-grid :border="false" class="home-grid-nav" column-num="4">
<van-grid-item icon="photo-o" :text="nav.name" v-for="(nav, _index) in item" :key="_index" @click="onSelectLight(nav)">
<div class="light" :class="[currentLight.id === nav.id && 'current-light']">
<img :src="nav.picture" class="light-icon" />
<span class="light-name">{{nav.name}}</span>
<img :src="nav.picture" class="light-icon" />
<span class="light-name">{{ nav.name }}</span>
</div>
</van-grid-item>
</van-grid>
@@ -79,8 +79,8 @@
</div>
<div class="light-size">
<span>灯型</span>
<van-radio-group v-model="currentLightSize" direction="horizontal">
<van-radio :name="size.id" v-for="size in currentLight.children" :key="size.id" shape="square">{{size.name}}</van-radio>
<van-radio-group v-model="currentLightSize" direction="horizontal">
<van-radio :name="size.id" v-for="size in currentLight.children" :key="size.id" shape="square">{{ size.name }}</van-radio>
</van-radio-group>
</div>
<div class="light-count">
@@ -90,28 +90,30 @@
</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>
</van-popup>
<!-- 随喜金额-->
<!-- 随喜金额-->
<random-money v-if="showAnyAmount" :value.sync="showAnyAmount" @change="onReceiveAnyAmount"></random-money>
</div>
</template>
<script>
import 'swiper/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import "swiper/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { getGoodsLightDetail, getOrderCompare, hasLogin } from "@/api";
export default {
components: {
swiper,
swiper,
swiperSlide,
},
data(){
data() {
return {
result: [],
showAnyAmount: false,
@@ -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,77 +151,77 @@ export default {
currentLightSize: 53,
buy_quantity: 1, // 购买数量
noMore: false,
}
};
},
computed: {
lightSize(){
lightSize() {
const { currentLight, currentLightSize } = this;
if(!this.currentLightSize) return 0;
return currentLight.children.find(item => item.id === currentLightSize);
if (!this.currentLightSize) return 0;
return currentLight.children.find((item) => item.id === currentLightSize);
},
lights(){
lights() {
const data = this.data;
if(!data) return [];
if (!data) return [];
const { goods } = data;
const sliceNumber = 16;
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))
for (let i = 0; i < len; i++) {
lights.push(goods.slice(sliceNumber * i, i * sliceNumber + sliceNumber));
}
return lights;
},
totalPrice(){
if(!this.lightSize) return 0;
return this.lightSize.price * this.buy_quantity
}
totalPrice() {
if (!this.lightSize) return 0;
return this.lightSize.price * this.buy_quantity;
},
},
mounted(){
this.getGoodsLightDetail('common');
mounted() {
this.getGoodsLightDetail("common");
},
methods: {
backHome(){
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(){
async onLightAction() {
await hasLogin();
this.showSpec = true
this.showSpec = true;
},
// 选择供灯种类
onSelectLight(light){
onSelectLight(light) {
this.currentLight = light;
this.currentLightSize = light.children[0].id;
},
// 接收随喜金额
onReceiveAnyAmount(anyObj){
onReceiveAnyAmount(anyObj) {
this.anyPrice = anyObj.money;
this.onToFillMeritName();
},
// dreamInfo: 心愿信息
onDreamInfoChange(dreamInfo){
onDreamInfoChange(dreamInfo) {
this.dreamInfo = dreamInfo;
},
onNextStep(){
if(!this.currentLightSize){
this.$toast.fail('请选择灯型')
onNextStep() {
if (!this.currentLightSize) {
this.$toast.fail("请选择灯型");
return;
}
this.current += 1;
if(this.current > 0){
if (this.current > 0) {
this.onToFillMeritName();
}
},
// 获取更多感恩功德1
loadMoreFn(){
loadMoreFn() {
this.page += 1;
this.getPayRecords({id: this.listType}, this.page, 10)
this.getPayRecords({ id: this.listType }, this.page, 10);
},
onToFillMeritName(){
onToFillMeritName() {
this.$router.push({
name: 'fill-name',
name: "fill-name",
query: {
...this.query,
goods_id: this.currentLight.id,
@@ -227,102 +229,102 @@ 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){
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
await this.getPayRecords({ id: 1}, 1);
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){
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 );
if(this.page === 1){
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;
.goods-detail {
.goods-content {
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;
.light-container {
padding-left: 0.4rem;
padding-right: 0.4rem;
max-height: 13rem;
overflow: auto;
.light-wrapper{
.light-wrapper {
border-top: 1px solid #ddd;
h1{
font-size: .35rem;
margin-top: .4rem;
margin-bottom: .5rem;
h1 {
font-size: 0.35rem;
margin-top: 0.4rem;
margin-bottom: 0.5rem;
}
.light-group{
.light{
.light-group {
.light {
padding: 5px;
text-align: center;
border: 1px solid transparent;
}
.van-swipe{
padding-bottom: .5rem;
.van-swipe {
padding-bottom: 0.5rem;
}
.van-grid-item__content{
.van-grid-item__content {
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}
.current-light{
.current-light {
border: 1px solid $primary-color;
border-radius: 4px;
span{
span {
color: $primary-color;
}
}
img.light-icon{
img.light-icon {
width: $lightWidth;
height: $lightWidth;
vertical-align: top;
}
span{
font-size: .35rem;
span {
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;
.van-grid-item__content {
padding-top: 0.1rem;
}
}
.van-swipe__indicators {
@@ -339,231 +341,230 @@ $lightWidth: 1.15rem;
}
}
.light-size,
.light-count{
font-size: .4rem;
.light-count {
font-size: 0.4rem;
display: flex;
justify-content: space-between;
align-items: center;
span{
span {
color: black;
opacity: 1;
}
}
.light-size{
margin-top: .4rem;
margin-bottom: .4rem;
.light-size {
margin-top: 0.4rem;
margin-bottom: 0.4rem;
.van-radio__label{
.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;
.van-radio__icon .van-icon {
width: 0.45rem;
height: 0.45rem;
line-height: 0.45rem;
}
.van-radio__icon--checked .van-icon{
background: #CF9E3B;
border-color: #CF9E3B;
.van-radio__icon--checked .van-icon {
background: #cf9e3b;
border-color: #cf9e3b;
}
}
.light-count{
.light-count {
align-items: center;
margin-bottom: .5rem;
margin-bottom: 0.5rem;
}
}
.support{
margin-bottom: .5rem;
.support-head{
padding: 0 .4rem;
.support {
margin-bottom: 0.5rem;
.support-head {
padding: 0 0.4rem;
display: flex;
justify-content: space-between;
height: 1.07rem;
line-height: 1.07rem;
.label{
font-size: .4rem;
.label {
font-size: 0.4rem;
font-weight: bold;
}
.external{
.external {
display: flex;
align-items: center;
li{
margin-left: .3rem;
font-size: .35rem;
li {
margin-left: 0.3rem;
font-size: 0.35rem;
color: #666;
}
li.active{
li.active {
color: #333;
font-weight: bold;
}
}
}
}
.swiper-container{
.swiper-container {
background: #f5f5f5;
.picture, img{
.picture,
img {
width: 100%;
height: 100%;
}
}
.monk-profile{
padding: .4rem;
.position{
font-size: .5rem;
padding-top: .2rem;
color: #19282E;
.monk-profile {
padding: 0.4rem;
.position {
font-size: 0.5rem;
padding-top: 0.2rem;
color: #19282e;
line-height: 1.3;
}
.introduction{
font-size: .37rem;
margin-top: .4rem;
.introduction {
font-size: 0.37rem;
margin-top: 0.4rem;
line-height: 1.3;
text-align: justify;
color: #666;
}
.bar{
margin-top: .27rem;
.bar {
margin-top: 0.27rem;
}
.status{
padding: .2rem .3rem;
.status {
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{
span {
color: #666;
font-size: .28rem;
font-size: 0.28rem;
}
}
.temple-info{
.temple-info {
border-top: 1px solid #ddd;
padding: .3rem .4rem;
padding: 0.3rem 0.4rem;
display: flex;
align-items: center;
.temple-img{
.temple-img {
width: 1rem;
height: 1rem;
border-radius: 1rem;
margin-right: .3rem;
margin-right: 0.3rem;
}
.temple-name{
.temple-name {
flex: 1;
.name{
font-size: .35rem;
.name {
font-size: 0.35rem;
color: #333;
}
.visitor{
.visitor {
color: #666;
font-size: .3rem;
margin-top: .2rem;
font-size: 0.3rem;
margin-top: 0.2rem;
display: block;
}
}
}
.detail-button-group{
text-align: center;
position: fixed;
bottom: 0;
z-index: 10;
left: 0;
right: 0;
background: white;
border-top: .01rem solid #ddd;
padding: .3rem;
}
.merit-button{
.detail-button-group {
text-align: center;
position: fixed;
bottom: 0;
z-index: 10;
left: 0;
right: 0;
background: white;
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{
.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;
.iconfont{
font-size: .7rem;
margin-top: 0.13rem;
.iconfont {
font-size: 0.7rem;
}
.step-inline{
.step-inline {
display: inline-block;
flex: 1;
font-size: .35rem;
li{
font-size: 0.35rem;
li {
display: inline-block;
& ~ li:before{
content: '-';
padding: 0 .1rem;
& ~ li:before {
content: "-";
padding: 0 0.1rem;
}
}
li.current{
li.current {
color: $primary-color;
}
}
}
.auto-donate-time{
padding: .4rem ;
margin-top: .4rem;
.auto-donate-time {
padding: 0.4rem;
margin-top: 0.4rem;
margin-bottom: 1rem;
.donate{
.label{
font-size: .4rem;
.donate {
.label {
font-size: 0.4rem;
}
display: flex;
align-items: center;
justify-content: space-between;
}
.time-cycle{
.time-cycle {
display: flex;
align-items: flex-end;
.unit{
font-size: .3rem;
.unit {
font-size: 0.3rem;
color: #666;
padding-left: .2rem;
padding-left: 0.2rem;
}
}
}
.next-group{
.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;
em{
.total {
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;
.next {
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
+59 -61
View File
@@ -1,11 +1,11 @@
<template>
<div v-if="data" class="platform_home" >
<div v-if="data" class="platform_home">
<van-search v-model="value" readonly placeholder="寺院、主持、监寺" @click="onSearch" />
<div class="container">
<div class="swiper">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe-item v-for="(banner, index) in data.banner_data" :key="index">
<img :src="banner.cover" alt="" @click="onLocationTo(banner)"/>
<img :src="banner.cover" alt="" @click="onLocationTo(banner)" />
</van-swipe-item>
</van-swipe>
</div>
@@ -57,7 +57,7 @@
</div>
</div>
<div class="divider"></div>
<thanks-giving :temple-id="query.temple_id " :agent-id="query.agent_id"></thanks-giving>
<thanks-giving :temple-id="query.temple_id" :agent-id="query.agent_id"></thanks-giving>
</div>
</div>
</template>
@@ -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: {},
@@ -83,74 +82,74 @@ export default {
this.getTempleIndex();
},
methods: {
onLocationTo({url}){
if(url){
onLocationTo({ url }) {
if (url) {
location.href = url;
}
},
mescrollInit(mescroll){
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
onToGoods(goods){
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){
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){
if (nav.icon_type === 0) {
window.location.href = nav.url;
return
return;
}
if(nav.icon_type === 5){
if (nav.icon_type === 5) {
this.$router.push({
name: 'buddha-detail',
query: { id: nav.dynamic_id }
})
return
name: "buddha-detail",
query: { id: nav.dynamic_id },
});
return;
}
if(nav.icon_type === 4){
if (nav.icon_type === 4) {
this.$router.push({
name: 'merit-box'
})
return
name: "merit-box",
});
return;
}
if(nav.icon_type === 3){
if (nav.icon_type === 3) {
this.$router.push({
name: 'goods-detail',
name: "goods-detail",
query: {
goods_type: nav.goods_type,
goods_id: nav.goods_id ,
goods_id: nav.goods_id,
temple_id: nav.temple_id,
}
})
},
});
}
if(nav.icon_type === 1 || nav.icon_type === 2){
if (nav.icon_type === 1 || nav.icon_type === 2) {
this.$router.push({
name: 'everyday-donation',
name: "everyday-donation",
query: {
goods_type: nav.goods_type,
goods_id: nav.goods_id ,
goods_id: nav.goods_id,
temple_id: nav.temple_id,
},
});
@@ -159,27 +158,26 @@ export default {
async getTempleIndex() {
const { agent_id } = this.$route.query;
let res;
if(agent_id){
res = await getPlatformHome(agent_id)
if (agent_id) {
res = await getPlatformHome(agent_id);
} else {
res = await getTempleIndex(this.query.temple_id);
}
this.data = res;
this.$store.commit('setTempleMeritId', res.temple_merit_id);
this.$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: {},
});
},
@@ -204,13 +202,13 @@ export default {
}
.merit-rank-container {
}
.van-search{
padding: .4rem
.van-search {
padding: 0.4rem;
}
.goods-panel-body{
.buddha-process{
padding-left: .4rem;
padding-right: .4rem;
.goods-panel-body {
.buddha-process {
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;
@@ -264,20 +262,20 @@ export default {
background: $primary-color;
}
}
.panel{
.panel {
padding-bottom: 0;
}
}
.merit-scroll-container{
margin: 0 .4rem;
.merit-scroll-container {
margin: 0 0.4rem;
height: 3.39rem;
overflow-x: auto;
.merit-scroll-wrapper{
.merit-scroll-wrapper {
white-space: nowrap;
}
}
.merit-group{
padding-bottom: .4rem;
.merit-group {
padding-bottom: 0.4rem;
}
.merit {
width: 3.39rem;
src/pages/merit-box/index.vue
+176 -189
View File
@@ -1,272 +1,259 @@
<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 }"
/>
<div class="merit-container">
<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">
{{info.merit_box_title}}
<b class="sub-title">{{info.unit_name}}</b>
</span>
<div class="list">
<span :class="[n.id === type_id && 'current']" v-for="(n, index) in nav" :key="n.id" @click="onListBy(n, index)">{{n.title}}</span>
</div>
</div>
<div class="body" ref="swiper">
<scroll-view
ref="scrollView"
:height="containerHeight - 20"
pulldown
pullup
@pulldown="refresh"
@pullup="loadMoreFn"
>
<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 }" />
<div class="merit-container">
<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">
{{ info.merit_box_title }}
<b class="sub-title">{{ info.unit_name }}</b>
</span>
<div class="list">
<span :class="[n.id === type_id && 'current']" v-for="(n, index) in nav" :key="n.id" @click="onListBy(n, index)">{{ n.title }}</span>
</div>
</div>
<div class="body" ref="swiper">
<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>
<div class="merit-button-group" :style="{bottom: tabHeight + 'px'}">
</div>
</div>
<div class="merit-button-group" :style="{ bottom: tabHeight + 'px' }">
<button class="iconfont icon-arrow-left" @click="back"></button>
<button class="merit-button" @click="openBox">随喜功德</button>
</div>
</div>
<random-money :value.sync="randVisible" @change="onRandNext"></random-money>
</div>
<button class="merit-button" @click="openBox">随喜功德</button>
</div>
</div>
<random-money :value.sync="randVisible" @change="onRandNext"></random-money>
</div>
</template>
<script>
import { getMeritBox, } from '@/api';
import { mapState } from 'vuex';
import { getMeritBox } from "@/api";
import { mapState } from "vuex";
export default {
inject: ['screenHeight', 'root'],
data(){
inject: ["screenHeight", "root"],
data() {
const { query } = this.$route;
return {
query,
width: 0,
randVisible: false,
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: [], },
],
containerHeight: 0,
return {
query,
width: 0,
randVisible: false,
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: [] },
],
containerHeight: 0,
tabHeight: 0,
info: {},
list: [],
info: {},
list: [],
loading: true,
total: 0,
}
},
total: 0,
};
},
computed: {
...mapState(['temple_merit_id']),
noMore(){
...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();
}
},
mounted(){
this.width = window.innerWidth;
this.getMeritBox();
if(this.query.open_box){
this.openBox()
}
},
methods: {
back(){
if(this.query.fromPathName){
this.$router.replace({ name: this.query.fromPathName,query: { temple_id: this.query.temple_id } })
methods: {
back() {
if (this.query.fromPathName) {
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
openBox() {
this.randVisible = true;
},
async getMeritBox(){
const res = await getMeritBox(this.temple_merit_id || this.query.temple_id || '1', this.type_id, this.page, 10);
async getMeritBox() {
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){
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.info = res.merit_box_info;
this.total = res.merit_box_order.total;
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)
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);
}
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){
onListBy(n) {
this.type_id = n.id;
this.page = 1;
this.total = 0;
this.list = [];
this.getMeritBox();
},
loadMoreFn(){
if(this.noMore) return;
loadMoreFn() {
if (this.noMore) return;
this.loading = true;
this.page += 1;
this.getMeritBox();
this.getMeritBox();
},
refresh(){
console.log('refresh')
refresh() {
this.page = 1;
this.total = 0;
this.getMeritBox();
},
onRandNext(obj){
this.$router.push({
name: 'pay',
query: {
...this.$route.query,
title: '功德箱/供奉',
subTitle: '随喜',
amount: obj.money,
onRandNext(obj) {
this.$router.push({
name: "pay",
query: {
...this.$route.query,
title: "功德箱/供奉",
subTitle: "随喜",
amount: obj.money,
quantity: 1,
from: 'meritBox', // 标识为功德箱
}
})
}
}
from: "meritBox", // 标识为功德箱
},
});
},
},
};
</script>
<style lang="scss">
.merit-box{
.merit-box {
position: relative;
height: 100%;
.goods-picture{
vertical-align: top;
.goods-picture {
vertical-align: top;
position: fixed;
left: 0;
top: 0;
right: 0;
}
.merit-container{
}
.merit-container {
height: 100%;
position: relative;
overflow: hidden;
}
.merit-rank-container{
background: white;
position: relative;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
.merit-rank-container {
background: white;
position: relative;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin-top: 5rem;
height: 61vh;
.head{
padding: .53rem .4rem;
padding-bottom: .13rem;
display: flex;
justify-content: space-between;
.title{
font-size: .43rem;
color: #222222;
.sub-title{
font-size: .35rem;
margin-left: .4rem;
display: inline-block;
color: #666;
}
}
.list{
display: flex;
span{
font-size: .37rem;
color: #999999;
display: inline-block;
margin-left: .4rem;
border-bottom: .03rem solid transparent;
padding-bottom: .13rem;
}
span.current{
color: #222;
border-bottom-color: rgb(168, 28, 28);
}
}
}
.body{
.head {
padding: 0.53rem 0.4rem;
padding-bottom: 0.13rem;
display: flex;
justify-content: space-between;
.title {
font-size: 0.43rem;
color: #222222;
.sub-title {
font-size: 0.35rem;
margin-left: 0.4rem;
display: inline-block;
color: #666;
}
}
.list {
display: flex;
span {
font-size: 0.37rem;
color: #999999;
display: inline-block;
margin-left: 0.4rem;
border-bottom: 0.03rem solid transparent;
padding-bottom: 0.13rem;
}
span.current {
color: #222;
border-bottom-color: rgb(168, 28, 28);
}
}
}
.body {
height: calc(100% - 1.16rem);
overflow: hidden;
.swiper-container{
height: 100%;
}
}
}
.merit-button-group{
text-align: center;
position: absolute;
z-index: 1;
left: 0;
right: 0;
background: white;
padding-top: .2rem;
padding-bottom: calc(.2rem );
border-top: .01rem solid #ddd;
.swiper-container {
height: 100%;
}
}
}
.merit-button-group {
text-align: center;
position: absolute;
z-index: 1;
left: 0;
right: 0;
background: white;
padding-top: 0.2rem;
padding-bottom: calc(0.2rem);
border-top: 0.01rem solid #ddd;
display: flex;
padding-left: .4rem;
padding-right: .4rem;
.iconfont{
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;
.merit-button {
//display: inline-block;
//vertical-align: top;
//background: $primary-color;
//color: white;
//height: 1.4rem;
//font-size: .37rem;
//padding: 0 2rem;
//border: .01rem solid $primary-color;
//border-radius: $btn-border-radius;
//background: $primary-color;
//color: white;
//height: 1.4rem;
//font-size: .37rem;
//padding: 0 2rem;
//border: .01rem solid $primary-color;
//border-radius: $btn-border-radius;
//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;
}
}
}
</style>
src/pages/mescroll-test/index.vue
+63 -59
View File
@@ -3,110 +3,114 @@
<!--mescroll滚动区域的基本结构-->
<mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
<!--内容...-->
<div class="div" v-for="(v, i) in dataList" :key="i">{{v}}</div>
<div class="div" v-for="(v, i) in dataList" :key="i">{{ v }}</div>
</mescroll-vue>
</div>
</template>
<script>
// 引入mescroll的vue组件
import MescrollVue from 'mescroll.js/mescroll.vue'
import MescrollVue from "mescroll.js/mescroll.vue";
const axios = {
current: 0,
get(){
get() {
return new Promise((resolve) => {
this.current += 1;
setTimeout(() => {
console.log(this.current)
if(this.current === 3){
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 () {
data() {
return {
data: [],
mescroll: null, // mescroll实例对象
mescrollDown:{}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
mescrollUp: { // 上拉加载的配置.
mescrollDown: {}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
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: [] // 列表数据
}
dataList: [], // 列表数据
};
},
beforeRouteEnter (to, from, next) { // 如果没有配置顶部按钮或isBounce,则beforeRouteEnter不用写
next(vm => {
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可以不用配置
mescrollInit(mescroll) {
this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
},
// 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
upCallback (page, mescroll) {
upCallback(page, mescroll) {
// 联网请求
axios.get({
params: {
num: page.num, // 页码
size: page.size // 每页长度
}
}).then((response) => {
// 请求的列表数据
let arr = response.data
// 如果是第一页需手动置空列表
if (page.num === 1) this.dataList = []
// 把请求到的数据添加到列表
this.dataList = this.dataList.concat(arr)
// 数据渲染成功后,隐藏下拉刷新的状态
this.$nextTick(() => {
mescroll.endSuccess(arr.length)
axios
.get({
params: {
num: page.num, // 页码
size: page.size, // 每页长度
},
})
}).catch(() => {
// 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
mescroll.endErr()
})
}
}
}
.then((response) => {
// 请求的列表数据
let arr = response.data;
// 如果是第一页需手动置空列表
if (page.num === 1) this.dataList = [];
// 把请求到的数据添加到列表
this.dataList = this.dataList.concat(arr);
// 数据渲染成功后,隐藏下拉刷新的状态
this.$nextTick(() => {
mescroll.endSuccess(arr.length);
});
})
.catch(() => {
// 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
mescroll.endErr();
});
},
},
};
</script>
<style scoped>
@@ -117,10 +121,10 @@ export default {
bottom: 0;
height: auto;
}
.div{
.div {
height: 40px;
background: red;
border: 10px solid blue;
margin-bottom: 10px;
}
</style>
</style>
src/pages/pay-result/index.vue
+47 -47
View File
@@ -1,114 +1,114 @@
<template>
<div class="pay-result">
<div class="cert-show">
<img :src="src">
<div class="pay-result">
<div class="cert-show">
<img :src="src" />
<span class="long-press">长按图片保存到手机</span>
</div>
<div class="pay-info">
<span>
<div class="pay-info">
<span>
<i class="iconfont icon-zhifuchenggong"></i>
</span>
<span>参与成功</span>
</div>
</div>
<div class="button-group">
<button class="detail" @click="onToOrder">查看详情</button>
<button class="again" @click="onPayAgain">再结善缘</button>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
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`
}
src() {
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')
onToOder() {
this.$router.push("/user/order");
},
onPayAgain(){
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>
<style lang="scss">
.pay-result {
.cert-show {
height: 70vh;
background: #f5f5f5;
.cert-show {
height: 70vh;
background: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
padding: .2rem;
padding: 0.2rem;
position: relative;
img{
img {
max-width: 90%;
max-height: 100%;
display: inline-block;
}
.long-press{
.long-press {
position: absolute;
font-size: .3rem;
bottom: .1rem;
font-size: 0.3rem;
bottom: 0.1rem;
color: #999;
}
}
.pay-info{
}
.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{
.iconfont {
color: #07c160;
font-size: 1rem;
vertical-align: middle;
margin-right: .3rem;
margin-right: 0.3rem;
}
}
.button-group{
.button-group {
text-align: center;
margin-top: 1rem;
button{
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;
}
.detail{
.detail {
color: $primary-color;
border-color: $primary-color;
}
.again{
.again {
background: $primary-color;
color: white;
border-color: $primary-color;
src/pages/pay/index.vue
+87 -98
View File
@@ -1,24 +1,24 @@
<template>
<div class="pay">
<div class="topbar" ref="topbar">
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{ backgroundColor: $route.meta.navBarBackgroundColor }" />
</div>
<div class="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>
<h1 class="amount"><b>￥</b>{{ query.amount }}</h1>
<div class="order-info">
<h3 class="goods_title">{{query.title}}</h3>
<div class="goods-lucky-to" >
<span>功德芳名：{{query.merit_name}}</span>
<span v-if="query.is_die == '1'">阳上人：{{query.live_name}}</span>
<span v-if="query.is_die == '1'">往生人：{{query.die_name}}</span>
<h3 class="goods_title">{{ query.title }}</h3>
<div class="goods-lucky-to">
<span>功德芳名：{{ query.merit_name }}</span>
<span v-if="query.is_die == '1'">阳上人：{{ query.live_name }}</span>
<span v-if="query.is_die == '1'">往生人：{{ query.die_name }}</span>
</div>
<div class="desc">
<!-- subTitle: 规格名称 -->
<span>{{query.subTitle}}</span>
<span>数量：x{{query.quantity}}</span>
<span>{{ query.subTitle }}</span>
<span>数量：x{{ query.quantity }}</span>
</div>
</div>
@@ -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,173 +47,162 @@
</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: {
},
data(){
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 => {
if(res){
mounted() {
this.wechatReady(() => {});
getPayAdv().then((res) => {
if (res) {
this.adv = res;
}
})
});
},
methods: {
onContinuePayOrder(){
this.onPayment({ id: this.query.order_id })
onContinuePayOrder() {
this.onPayment({ id: this.query.order_id });
},
async onCreatePayOrder(){
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);
}
},
async onPayment(order){
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{
.pay {
.adv {
img {
height: 4rem;
width: 100%;
vertical-align: middle;
}
}
.pay-info{
.pay-info {
padding-top: 1rem;
.amount{
b{
font-size: .5rem;
.amount {
b {
font-size: 0.5rem;
color: rgb(236, 188, 98);
padding-right: .1rem;
padding-right: 0.1rem;
}
text-align: center;
font-size: 1.07rem;
color: rgb(255, 140, 8);
font-weight: bold;
}
.order-info{
.order-info {
margin-top: 1rem;
padding: .4rem;
.goods_title{
font-size: .4rem;
padding: 0.4rem;
.goods_title {
font-size: 0.4rem;
font-weight: bold;
line-height: 1.4;
}
.goods-lucky-to{
font-size: .35rem;
padding-top: .4rem;
span ~ span{
padding-left: .2rem;
.goods-lucky-to {
font-size: 0.35rem;
padding-top: 0.4rem;
span ~ span {
padding-left: 0.2rem;
border-left: 1px solid #ddd;
margin-left: .2rem;
margin-left: 0.2rem;
}
}
.desc{
padding-top: .5rem;
.desc {
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;
.label{
font-size: .4rem;
.pay-type {
padding: 0.4rem;
margin-top: 0.6rem;
.label {
font-size: 0.4rem;
font-weight: bold;
margin-bottom: .3rem;
margin-bottom: 0.3rem;
}
}
.pay-button-container{
padding: .4rem;
.pay-button-container {
padding: 0.4rem;
}
}
}
src/pages/temple-list/index.vue
+122 -124
View File
@@ -1,14 +1,14 @@
<template>
<div class="temple-list" :style="{height: root.minHeight - root.tabHeight + 'px'}">
<div class="temple-list" :style="{ height: root.minHeight - root.tabHeight + 'px' }">
<div class="topbar" ref="topbar">
<van-nav-bar left-arrow :title="$route.meta.title" v-if="$route.meta.showNavBar" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
<van-nav-bar left-arrow :title="$route.meta.title" v-if="$route.meta.showNavBar" @click-left="$router.back()" :style="{ backgroundColor: $route.meta.navBarBackgroundColor }" />
<van-search v-model="keyword" show-action action-text="搜索" placeholder="请输入寺院、方丈、监院名称" @search="onSearch" @cancel="onCancel">
<template #action>
<span @click="onSearch">搜索</span>
</template>
</van-search>
<div class="operation-bar">
<div class="position" v-if="positioning" >
<div class="position" v-if="positioning">
<span class="iconfont icon-dingwei positioning"></span>
<span>正在获取位置...</span>
</div>
@@ -16,37 +16,36 @@
<span class="iconfont icon-dingwei"></span>
<span>重新定位</span>
</div>
<!-- <div class="show-mode" v-if="mode === 'list'" @click="onModeSwitch('map')">-->
<!-- <span>地图模式</span>-->
<!-- <span class="iconfont icon-ditu"></span>-->
<!-- </div>-->
<!-- <div class="show-mode" v-if="mode === 'map'" @click="onModeSwitch('list')">-->
<!-- <span>列表模式</span>-->
<!-- <span class="iconfont icon-liebiao"></span>-->
<!-- </div>-->
<!-- <div class="show-mode" v-if="mode === 'list'" @click="onModeSwitch('map')">-->
<!-- <span>地图模式</span>-->
<!-- <span class="iconfont icon-ditu"></span>-->
<!-- </div>-->
<!-- <div class="show-mode" v-if="mode === 'map'" @click="onModeSwitch('list')">-->
<!-- <span>列表模式</span>-->
<!-- <span class="iconfont icon-liebiao"></span>-->
<!-- </div>-->
</div>
</div>
<div >
<div class="temple-list-container" :style="{height: containerHeight + 'px'}" v-if="mode === 'list'" >
<!-- <scroll-view -->
<!-- class="temple-container content"-->
<!-- :height="containerHeight - 20" -->
<!-- ref="scroll"-->
<!-- pulldown -->
<!-- pullup-->
<!-- @pulldown="refresh"-->
<!-- @pullup="loadMore"-->
<!-- >-->
<!-- <temple v-for="temple in templeList" :key="temple.id" :data="temple" @location-to="onLocationTo"></temple>-->
<!-- </scroll-view>-->
<div class="temple-container content" :style="{height: containerHeight+'px'}" @scroll="onScroll">
<div>
<div class="temple-list-container" :style="{ height: containerHeight + 'px' }" v-if="mode === 'list'">
<!-- <scroll-view -->
<!-- class="temple-container content"-->
<!-- :height="containerHeight - 20" -->
<!-- ref="scroll"-->
<!-- pulldown -->
<!-- pullup-->
<!-- @pulldown="refresh"-->
<!-- @pullup="loadMore"-->
<!-- >-->
<!-- <temple v-for="temple in templeList" :key="temple.id" :data="temple" @location-to="onLocationTo"></temple>-->
<!-- </scroll-view>-->
<div class="temple-container content" :style="{ height: containerHeight + 'px' }" @scroll="onScroll">
<temple v-for="temple in templeList" :key="temple.id" :data="temple" @location-to="onLocationTo"></temple>
<div v-if="loading" class="no-more">正在加载...</div>
<div class="no-more" v-if="!loading && noMore">没有更多了</div>
</div>
</div>
<div class="temple-map" v-show="mode === 'map'" :style="{height: containerHeight + 'px'}">
<div class="temple-map" v-show="mode === 'map'" :style="{ height: containerHeight + 'px' }">
<div id="container" style="height: 100%"></div>
</div>
</div>
@@ -54,217 +53,216 @@
</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 {
data(){
data() {
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
}
scroll() {
return this.$refs.scroll;
},
},
mounted(){
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){
if (this.query.search) {
this.keyword = this.query.search;
}
this.getTempleList();
this.wechatReady()
this.wechatReady();
},
methods: {
onScroll(e){
onScroll(e) {
const scrollTop = e.target.scrollTop;
const scrollHeight = e.target.offsetHeight;
const windowHeight = this.templeList.length * 220;
if(scrollTop === 0){
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(){
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//设置地图中心点坐标
zoom: 12, //设置地图缩放级别
center: center, //设置地图中心点坐标
});
this.map = map;
this.setMarker(TMap)
})
this.setMarker(TMap);
});
},
setMarker(TMap){
const markers = []
this.templeList.forEach(temple => {
console.log(temple)
setMarker(TMap) {
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(){
async getTempleList() {
this.loading = true;
const res = await getTempleList(this.keyword, this.lng, this.lat, this.page);
this.loading = false;
this.total = res.total;
if(this.page === 1){
if (this.page === 1) {
this.templeList = [];
}
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(){
async onGetLocation() {
this.positioning = true;
console.log(getLocation)
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;
})
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;
});
},
refresh(){
refresh() {
this.page = 1;
this.getTempleList()
this.getTempleList();
},
onLocationTo(data){
onLocationTo(data) {
openLocation({
longitude: data.lng,
latitude: data.lat,
name: data.unit_name,
address: data.address
})
address: data.address,
});
},
onModeSwitch(mode){
onModeSwitch(mode) {
this.mode = mode;
if(mode === 'map' && !this.map){
if (mode === "map" && !this.map) {
this.initMap();
}
},
onCancel(){
this.keyword = ''
onCancel() {
this.keyword = "";
this.page = 1;
this.getTempleList();
},
onSearch(){
onSearch() {
this.getTempleList();
},
loadMore(){
if(this.noMore) return;
clearTimeout(this.timer)
loadMore() {
if (this.noMore) return;
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.page += 1;
this.getTempleList()
}, 300)
this.getTempleList();
}, 300);
},
}
}
},
};
</script>
<style lang="scss">
@keyframes positioning {
0%{
0% {
opacity: 1;
}
25%{
25% {
opacity: 0;
}
50%{
50% {
opacity: 1;
}
75%{
75% {
opacity: 0;
}
100%{
100% {
opacity: 1;
}
}
.temple-list{
.operation-bar{
.temple-list {
.operation-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 .4rem;
padding: 0 0.4rem;
color: #333;
padding-bottom: .4rem;
padding-top: .3rem;
.position{
line-height: .37rem;
padding-bottom: 0.4rem;
padding-top: 0.3rem;
.position {
line-height: 0.37rem;
color: green;
span{
font-size: .37rem;
span {
font-size: 0.37rem;
display: inline-block;
margin-right: .13rem;
margin-right: 0.13rem;
}
.positioning{
.positioning {
animation: positioning 3s linear infinite;
}
}
.show-mode{
line-height: .37rem;
span{
font-size: .37rem;
.show-mode {
line-height: 0.37rem;
span {
font-size: 0.37rem;
display: inline-block;
margin-left: .13rem;
margin-left: 0.13rem;
}
}
}
.temple-list-container{
.temple-list-container {
background: #f5f5f5;
overflow: hidden;
padding: .3rem;
.temple-map{
padding: 0.3rem;
.temple-map {
height: 100%;
background: #f5f5f5;
}
.temple-container{
.temple-container {
overflow: scroll;
}
}
}
</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
+66 -65
View File
@@ -1,77 +1,78 @@
<template>
<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)">
</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>
<div class="download" @click="onDownloadCert(li)">
<span class="iconfont icon-24px"></span>
<p>长按保存功德证书</p>
</div>
</div>
</div>
</div>
<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)" />
</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>
<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(){
data() {
return {
list: [],
bg: ''
}
bg: "",
};
},
created(){
this.wechatReady()
created() {
this.wechatReady();
this.getCertList();
},
computed: {
style(){
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(){
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])
}
}
}
onDownloadCert(cert) {
previewImage(cert.picture_url, [cert.picture_url]);
},
},
};
</script>
<style lang="scss">
.user-certificate{
.user-certificate {
// max-height: 100vh;
padding-top: 4.67rem;
padding-bottom: .5rem;
.certificate{
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);
.img-wrapper{
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;
display: flex;
@@ -79,46 +80,46 @@ export default {
justify-content: center;
background: #f9f9f9;
}
img{
img {
max-width: 100%;
max-height: 100%;
}
.info{
.info {
flex: 1;
margin-left: .4rem;
margin-left: 0.4rem;
position: relative;
.title{
font-size: .35rem;
.title {
font-size: 0.35rem;
line-height: 1.3;
@extend .text-multiple-2;
height: 2.4em;
}
.date{
margin-top: .8rem;
.date {
margin-top: 0.8rem;
display: block;
font-size: .35rem;
font-size: 0.35rem;
color: #aaa;
}
.number{
margin-top: .15rem;
font-size: .35rem;
.number {
margin-top: 0.15rem;
font-size: 0.35rem;
color: #444;
span{
span {
color: red;
font-weight: bold;
padding: 0 .13rem;
padding: 0 0.13rem;
}
}
.download{
.download {
position: absolute;
right: 0;
bottom: 0;
color: #666;
text-align: center;
font-size: .29rem;
.iconfont{
font-size: .8rem;
padding-bottom: .1rem;
font-size: 0.29rem;
.iconfont {
font-size: 0.8rem;
padding-bottom: 0.1rem;
display: inline-block;
}
}
src/pages/user/course/count/index.vue
+130 -131
View File
@@ -1,16 +1,16 @@
<template>
<div class="course-detail-count" v-if="data">
<div class="topbar" ref="topbar">
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{ backgroundColor: $route.meta.navBarBackgroundColor }" />
</div>
<div class="course-container">
<div class="course-container">
<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>
<p class="content" v-html="data.content"></p>
</div>
</div>
<div class="divider"></div>
<div class="operation">
<div class="bar">
@@ -22,11 +22,11 @@
<i class="iconfont" :class="[!muted ? 'icon-shengyinkai' : 'icon-shengyinguan']"></i>
</span>
</div>
<h4 class="volumn-count">{{count}}</h4>
<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,12 +40,12 @@
<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>
<van-popup v-model="backVisible" round :overlay-style="{backgroundColor: 'rgba(0,0,0,0.5)'}" class="backward-popup">
<van-popup v-model="backVisible" round :overlay-style="{ backgroundColor: 'rgba(0,0,0,0.5)' }" class="backward-popup">
<div class="backword">
<h4 class="title">回向文</h4>
<textarea v-model="backwards" name="" class="textarea"></textarea>
@@ -59,10 +59,10 @@
</template>
<script>
import { getCourseDetail, postCount } from "@/api"
import { getCourseDetail, postCount } from "@/api";
export default {
data(){
data() {
const { query } = this.$route;
return {
query,
@@ -73,284 +73,283 @@ export default {
inputCount: 0,
visible: false,
backVisible: false,
backwards: ''
}
backwards: "",
};
},
mounted(){
mounted() {
this.getCourseDetail();
},
methods: {
async getCourseDetail(){
async getCourseDetail() {
const res = await getCourseDetail(this.query.id);
this.data = res;
this.backwards = res.backward
this.backwards = res.backward;
},
onTouchstart(){
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(){
onTouchEnd() {
this.pressed = false;
},
onConfirm(){
onConfirm() {
this.count = Number(this.inputCount);
this.visible = false;
},
async saveCount(){
async saveCount() {
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: '确认清除计数器？',
})
.then(() => {
// on confirm
this.count = 0;
})
.catch(() => {
// on cancel
});
}
}
}
clear() {
this.$dialog
.confirm({
message: "确认清除计数器？",
})
.then(() => {
// on confirm
this.count = 0;
})
.catch(() => {
// on cancel
});
},
},
};
</script>
<style lang="scss">
.course-detail-count{
.course-detail-count {
background-size: 100%;
.audio{
.audio {
display: none;
}
.on-count{
.on-count {
position: fixed;
right: 0;
bottom: 4rem;
padding: 0 .7rem;
padding: 0 0.7rem;
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
background: $primary-color;
opacity: 0.8;
height: 1.07rem;
line-height: 1.07rem;
font-size: .4rem;
font-size: 0.4rem;
color: white;
}
.course-container{
padding: 0 .4rem;
.course-container {
padding: 0 0.4rem;
flex: 1;
.title{
.title {
height: 1.2rem;
line-height: 1.2rem;
display: flex;
justify-content: space-between;
.feedback{
font-size: .4rem;
.feedback {
font-size: 0.4rem;
color: $primary-color;
}
.title-text{
font-size: .5rem;
.title-text {
font-size: 0.5rem;
color: #555;
}
}
.content-name{
font-size: .45rem;
.content-name {
font-size: 0.45rem;
color: #666;
padding-top: .5rem;
padding-top: 0.5rem;
}
.content{
font-size: .4rem;
.content {
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;
}
}
.operation{
.bar{
.operation {
.bar {
display: flex;
justify-content: space-between;
height: 1rem;
align-items: center;
padding: 0 .4rem;
span{
padding: 0 0.4rem;
span {
}
.volumn{
.volumn {
display: inline-block;
width: 1.2rem;
height: 1.2rem;
text-align: center;
line-height: 1.2rem;
.iconfont{
font-size: .5rem;
.iconfont {
font-size: 0.5rem;
}
}
}
.btn-group{
.btn-group {
display: flex;
font-size: .4rem;
font-size: 0.4rem;
flex: 1;
.btn{
.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{
.volumn-count {
text-align: center;
font-size: 1.3rem;
padding: .5rem 0;
padding: 0.5rem 0;
color: #666;
}
.picture-wrapper{
.picture-wrapper {
width: 3rem;
height: 3rem;
border-radius: 3rem;
margin-left: auto;
margin-right: auto;
margin-top: .3rem;
margin-top: 0.3rem;
position: relative;
span{
span {
width: 100%;
height: 100%;
display: inline-block;
}
&::after,
&::before{
&::before {
pointer-events: none;
}
&::before{
content: '';
&::before {
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: '';
&::after {
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;
&:active {
&::before {
animation: scale 0.1s linear;
}
&::after{
&::after {
border-color: $primary-color;
}
}
span{
img{
span {
img {
width: 3rem;
height: 3rem;
}
}
}
.save-group{
.save-group {
text-align: center;
font-size: .4rem;
padding-top: .8rem;
span{
font-size: 0.4rem;
padding-top: 0.8rem;
span {
display: inline-block;
padding: 0 1rem;
.iconfont{
margin-right: .1rem;
.iconfont {
margin-right: 0.1rem;
vertical-align: middle;
}
}
}
}
}
.backward-popup{
top: 44%
.backward-popup {
top: 44%;
}
.input-count{
padding: .4rem ;
.input-count {
padding: 0.4rem;
width: 8rem;
.title{
font-size: .4rem;
.title {
font-size: 0.4rem;
text-align: center;
padding-bottom: .8rem;
padding-bottom: 0.8rem;
}
.input{
.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{
.confirm {
margin: 0 auto;
width: 100%;
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{
.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;
.title {
font-size: 0.5rem;
text-align: center;
padding-top: .8rem;
padding-bottom: .8rem;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
}
.textarea{
background:transparent;
.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 {
0%{
0% {
transform: scale(1, 1);
}
100%{
100% {
transform: scale(1.2, 1.2);
opacity: 0;
}
}
</style>
</style>
src/pages/user/course/index.vue
+78 -73
View File
@@ -1,150 +1,155 @@
<template>
<div class="course" v-if="data">
<div class="topbar" ref="topbar">
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{ backgroundColor: $route.meta.navBarBackgroundColor }" />
</div>
<div class="course-container">
<div class="my-course border-bottom">
<h3 class="title">我的功课</h3>
<p class="progress">已修行<span>{{data.practise_day}}</span>天 功课总计<span>{{data.practise_total}}</span>遍</p>
</div>
<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>
</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="">
<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="" />
<div class="course-info">
<h3 class="title">{{course.name}}</h3>
<h3 class="title">{{ course.name }}</h3>
<p class="summary">
<span>
<i class="iconfont icon-shuben-"></i>
<b>总{{course.target}}遍</b>
<b>总{{ course.target }}遍</b>
</span>
<span>
<i class="iconfont icon-shuben-"></i>
<b>今日{{course.now_target}}遍</b>
<b>今日{{ course.now_target }}遍</b>
</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 class="progress" :style="{ width: course.progress + '%' }"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { getCourseList } from '@/api';
import { getCourseList } from "@/api";
export default {
data(){
data() {
return {
data: null,
courseList: []
}
courseList: [],
};
},
mounted(){
this.getCourseList()
mounted() {
this.getCourseList();
},
methods: {
async getCourseList(){
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;
.title{
font-size: .4rem;
.course {
.course-container {
.my-course {
padding: 0.4rem;
margin-bottom: 0.4rem;
.title {
font-size: 0.4rem;
}
.progress{
font-size: .35rem;
.progress {
font-size: 0.35rem;
color: #999;
padding-top: .2rem;
span{
padding-top: 0.2rem;
span {
color: $primary-color;
padding: 0 .13rem;
padding: 0 0.13rem;
font-weight: bold;
}
}
}
}
.course-wrapper{
padding: 0 .4rem;
.course-item{
.course-wrapper {
padding: 0 0.4rem;
.course-item {
display: flex;
padding: .4rem;
box-shadow: 0 0 .13rem rgba(0,0,0,0.1);
border-radius: .13rem;
& ~ .course-item{
margin-top: .53rem;
padding: 0.4rem;
box-shadow: 0 0 0.13rem rgba(0, 0, 0, 0.1);
border-radius: 0.13rem;
& ~ .course-item {
margin-top: 0.53rem;
}
img{
img {
width: 2.67rem;
height: 2.67rem;
vertical-align: top;
border-radius: .08rem;
border-radius: 0.08rem;
}
.course-info{
.course-info {
flex: 1;
margin-left: .53rem;
.title{
font-size: .4rem;
padding-top: .13rem;
margin-left: 0.53rem;
.title {
font-size: 0.4rem;
padding-top: 0.13rem;
}
.summary{
font-size: .30rem;
padding: .1rem 0;
margin-top: .2rem;
span{
.summary {
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{
i {
vertical-align: text-bottom;
}
b{
b {
vertical-align: middle;
padding-left: .11rem;
padding-left: 0.11rem;
line-height: 1.3;
}
}
}
.progress-group{
font-size: .35rem;
padding-top: .6rem;
label{
font-size: .3rem;
.progress-group {
font-size: 0.35rem;
padding-top: 0.6rem;
label {
font-size: 0.3rem;
color: #666;
span{
span {
color: $primary-color;
font-weight: bold;
}
}
.progress-bar{
.progress-bar {
background: #f5f5f5;
margin-top: .2rem;
height: .11rem;
margin-top: 0.2rem;
height: 0.11rem;
position: relative;
border-radius: 4px;
overflow: hidden;
.progress{
.progress {
position: absolute;
left: 0;
top: 0;
height: .11rem;
height: 0.11rem;
width: 50%;
background: $primary-color;
border-radius: 4px;
@@ -155,4 +160,4 @@ export default {
}
}
}
</style>
</style>
src/pages/user/order/index.vue
+39 -43
View File
@@ -1,9 +1,9 @@
<template>
<div>
<div class="topbar" ref="topbar">
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{ backgroundColor: $route.meta.navBarBackgroundColor }" />
</div>
<div class="temple-list-container" :style="{height: containerHeight + 'px'}">
<div class="temple-list-container" :style="{ height: containerHeight + 'px' }">
<van-tabs v-model="status" @change="onOrderChange">
<van-tab :title="order.name" :name="order.status" v-for="order in orders" :key="order.status">
<div class="order-container">
@@ -16,82 +16,78 @@
</template>
<script>
import { getOrderList } from '@/api'
import { getOrderList } from "@/api";
export default {
data(){
data() {
const { query } = this.$route;
return {
query,
containerHeight: window.innerHeight,
status: Number( query.current),
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'],
mounted(){
inject: ["root", "tabbar"],
mounted() {
this.getOrderList();
},
methods: {
async getOrderList(){
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">
.operation-bar{
.operation-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 .4rem;
padding: 0 0.4rem;
color: #333;
margin-bottom: .4rem;
.position{
line-height: .37rem;
margin-bottom: 0.4rem;
.position {
line-height: 0.37rem;
color: green;
span{
font-size: .37rem;
span {
font-size: 0.37rem;
display: inline-block;
margin-right: .13rem;
margin-right: 0.13rem;
}
}
.show-mode{
line-height: .37rem;
span{
font-size: .37rem;
.show-mode {
line-height: 0.37rem;
span {
font-size: 0.37rem;
display: inline-block;
margin-left: .13rem;
margin-left: 0.13rem;
}
}
}
.temple-list-container{
.temple-list-container {
background: #f5f5f5;
.temple-container{
padding: .4rem;
.temple-container {
padding: 0.4rem;
}
.temple-map{
.temple-map {
height: 100%;
background: #f5f5f5;
}
}
.order-container{
.order-container {
background: #f5f5f5;
padding: .4rem;
padding: 0.4rem;
}
</style>
vue.config.js
+28 -29
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 => {
if(plugin instanceof HtmlWebpackPlugin){
plugin.options.title = '自在福田 - 寺庙联盟'
configureWebpack: (config) => {
config.plugins.forEach((plugin) => {
if (plugin instanceof HtmlWebpackPlugin) {
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