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/ # VUE_APP_HOST=https://demo.6bsq.com/
NODE_ENV = development NODE_ENV = development
VUE_APP_TMAP_KEY=ZFGBZ-76ICF-BG5JY-NH4HX-MQOOJ-VJB4E 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 VUE_APP_TMAP_KEY=ZFGBZ-76ICF-BG5JY-NH4HX-MQOOJ-VJB4E
NODE_ENV=production 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", "name": "temple-union",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve --mode development", "serve": "vue-cli-service serve --mode development",
"build:test": "vue-cli-service build --mode test", "build:test": "vue-cli-service build --mode test",
"build": "vue-cli-service build --mode production", "build": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint" "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
}, },
"env": { "dependencies": {
"node": true "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": [ "devDependencies": {
"plugin:vue/essential", "@vue/cli-plugin-babel": "~4.5.0",
"eslint:recommended" "@vue/cli-plugin-eslint": "~4.5.0",
], "@vue/cli-service": "~4.5.0",
"parserOptions": { "babel-eslint": "^10.1.0",
"parser": "babel-eslint" "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": {} "eslintConfig": {
}, "root": true,
"browserslist": [ "globals": {
"> 1%", "wx": true,
"last 2 versions", "wechatInstance": true
"not dead" },
] "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 = []; const result = [];
for(let i = 0; i < data.length; i++){ for (let i = 0; i < data.length; i++) {
const obj = { const obj = {
value: data[i].id, value: data[i].id,
text: data[i].name, text: data[i].name,
};
if (data[i].children) {
obj.children = formatRegion(data[i].children);
} }
if(data[i].children){ result.push(obj);
obj.children = formatRegion(data[i].children)
}
result.push(obj)
} }
return result; return result;
} }
// 获取法师称谓 // 获取法师称谓
const getMonkAppellation = () => service.get('/api/master/get-rank'); const getMonkAppellation = () => service.get("/api/master/get-rank");
// 获取省市区数据 // 获取省市区数据
const getRegion = async () => { const getRegion = async () => {
const region = localStorage.getItem('region'); const region = localStorage.getItem("region");
let data = []; let data = [];
if(region === null){ if (region === null) {
const _data = await service.get('/api/region/get-region'); const _data = await service.get("/api/region/get-region");
data = [].concat(formatRegion(_data)); data = [].concat(formatRegion(_data));
localStorage.setItem('region', JSON.stringify(data)) localStorage.setItem("region", JSON.stringify(data));
} else { } 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}`); 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 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`); 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 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获取支付参数 // 根据订单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 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获取订单榜 // 根据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`); 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 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 { export {
getPayAdv, getPayAdv,
@@ -223,4 +229,4 @@ export {
getCertList, getCertList,
getStationTemplate, getStationTemplate,
getPlatformHome, getPlatformHome,
} };
src/api/service.js
+32 -34
View File
@@ -1,62 +1,60 @@
import axios from 'axios'; import axios from "axios";
import { Toast } from 'vant'; import { Toast } from "vant";
import qs from 'qs' import qs from "qs";
import router from '../router'; import router from "../router";
import utils from '../util' 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({ const instance = axios.create({
baseURL, baseURL,
timeout: 15000, timeout: 15000,
headers: { headers: {
"env": process.env.NODE_ENV, env: process.env.NODE_ENV,
"Accept": "*", Accept: "*",
"Content-Type": "application/x-www-form-urlencoded" "Content-Type": "application/x-www-form-urlencoded",
}, },
}) });
instance.interceptors.request.use(request => { instance.interceptors.request.use((request) => {
const { query } = router.currentRoute; const { query } = router.currentRoute;
if(query.no_login){ if (query.no_login) {
request.url = utils.addExternalParamsToQuery(request.url, 'no_login', 1) request.url = utils.addExternalParamsToQuery(request.url, "no_login", 1);
} }
if(request.url.includes('upload')){ if (request.url.includes("upload")) {
return request return request;
} }
if((request.method === 'post' || request.method === 'put' )&& !request.url.includes('post')){ if ((request.method === "post" || request.method === "put") && !request.url.includes("post")) {
request.data = qs.stringify(request.data) request.data = qs.stringify(request.data);
return request; return request;
} }
return request; return request;
}) });
instance.interceptors.response.use(response => { instance.interceptors.response.use((response) => {
const { path, query } = router.currentRoute; const { path, query } = router.currentRoute;
if(response.status === 200){ if (response.status === 200) {
if(response.data.code === 0){ if (response.data.code === 0) {
return response.data.data; return response.data.data;
} }
if(response.data.code === 100007){ if (response.data.code === 100007) {
location.href = '/api/wx/oauth?jumpUrl='+encodeURIComponent(location.href) location.href = "/api/wx/oauth?jumpUrl=" + encodeURIComponent(location.href);
return return;
} }
console.log('query', new URLSearchParams(query).toString()) if (response.data.code === 1000023) {
console.log('fullPath', path) Toast("请验证手机号");
if(response.data.code === 1000023){
Toast('请验证手机号')
const queryString = new URLSearchParams(query).toString(); 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(); return Promise.reject();
} }
if(response.data.code !== 0){ if (response.data.code !== 0) {
Toast.fail(response.data.message) Toast.fail(response.data.message);
} }
} }
if(response.status !== 200){ if (response.status !== 200) {
Toast.fail('服务器错误') Toast.fail("服务器错误");
} }
return Promise.reject(response); return Promise.reject(response);
}) });
export default instance; export default instance;
src/common/wechat-web.js
+37 -45
View File
@@ -3,52 +3,44 @@ import util from "@/util";
function signToWechat(config, shareConfig) { function signToWechat(config, shareConfig) {
if (!wx) { 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 = { const defaultConfig = {
...config, ...config,
debug: false, debug: false,
jsApiList: [ jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "scanQRCode", "getLocation", "openLocation", "updateAppMessageShareData", "updateTimelineShareData"],
'onMenuShareTimeline',
'onMenuShareAppMessage',
'scanQRCode',
'getLocation',
'openLocation',
'updateAppMessageShareData',
'updateTimelineShareData'
],
}; };
console.log('sign', wx);
wx.config(defaultConfig); wx.config(defaultConfig);
wx.ready(function() { wx.ready(function () {
console.log("wechat sdk config success");
console.log('wechat sdk config success');
wechatInstance = wx; wechatInstance = wx;
wx.onMenuShareAppMessage({ wx.onMenuShareAppMessage({
title: shareConfig.title, title: shareConfig.title,
desc: shareConfig.desc, desc: shareConfig.desc,
link: util.addExternalParamsToQuery(shareConfig.link, 'no_login', 1), link: util.addExternalParamsToQuery(shareConfig.link, "no_login", 1),
imgUrl: shareConfig.imgUrl, imgUrl: shareConfig.imgUrl,
complete: res => { complete: (res) => {
shareConfig.callback && shareConfig.callback({ shareConfig.callback &&
key: 'updateAppMessageShareData', shareConfig.callback({
...res key: "updateAppMessageShareData",
}); ...res,
} });
},
}); });
// // 分享朋友圈 // // 分享朋友圈
wx.onMenuShareTimeline({ wx.onMenuShareTimeline({
title: shareConfig.title, title: shareConfig.title,
link: util.addExternalParamsToQuery(shareConfig.link, 'no_login', 1), link: util.addExternalParamsToQuery(shareConfig.link, "no_login", 1),
imgUrl: shareConfig.imgUrl, imgUrl: shareConfig.imgUrl,
complete: res => { complete: (res) => {
shareConfig.callback && shareConfig.callback({ shareConfig.callback &&
key: 'updateTimelineShareData', shareConfig.callback({
...res key: "updateTimelineShareData",
}); ...res,
} });
},
}); });
// wx.updateAppMessageShareData({ // wx.updateAppMessageShareData({
@@ -81,9 +73,9 @@ function signToWechat(config, shareConfig) {
function getLocation() { function getLocation() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
wechatInstance.getLocation({ wechatInstance.getLocation({
type: 'wgs84', type: "wgs84",
success: res => { success: (res) => {
if(res.errMsg === 'getLocation:ok'){ if (res.errMsg === "getLocation:ok") {
resolve(res); resolve(res);
} else { } else {
reject(); reject();
@@ -91,26 +83,26 @@ function getLocation() {
}, },
error: () => { error: () => {
reject(); reject();
} },
}); });
}); });
} }
function requestPayment(paymentConfig) { function requestPayment(paymentConfig) {
return new Promise(resolve => { return new Promise((resolve) => {
wechatInstance.chooseWXPay({ wechatInstance.chooseWXPay({
timestamp: paymentConfig.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符 timestamp: paymentConfig.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: paymentConfig.nonceStr, // 支付签名随机串，不长于 32 位 nonceStr: paymentConfig.nonceStr, // 支付签名随机串，不长于 32 位
package: paymentConfig.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*） package: paymentConfig.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType: paymentConfig.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致 signType: paymentConfig.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
paySign: paymentConfig.paySign, // 支付签名 paySign: paymentConfig.paySign, // 支付签名
success: function(res) { success: function (res) {
// 支付成功后的回调函数 // 支付成功后的回调函数
resolve(res); resolve(res);
}, },
fail(res) { fail(res) {
alert(JSON.stringify(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) => { return new Promise((resolve) => {
wechatInstance.updateAppMessageShareData({ wechatInstance.updateAppMessageShareData({
title, title,
desc, desc,
link, link,
imgUrl, imgUrl,
complete: res => { complete: (res) => {
resolve(res); resolve(res);
} },
}); });
}); });
} }
// 分享到朋友圈 // 分享到朋友圈
function updateTimelineShareData(title = '', desc = '', link = '', imgUrl = '') { function updateTimelineShareData(title = "", desc = "", link = "", imgUrl = "") {
return new Promise((resolve) => { return new Promise((resolve) => {
wechatInstance.updateTimelineShareData({ wechatInstance.updateTimelineShareData({
title, title,
desc, desc,
link, link,
imgUrl, imgUrl,
complete: res => { complete: (res) => {
resolve(res); resolve(res);
} },
}); });
}); });
} }
function previewImage(current, urls){ function previewImage(current, urls) {
wechatInstance.previewImage({ wechatInstance.previewImage({
current, urls current,
}) urls,
});
} }
export { signToWechat, getLocation, requestPayment, openLocation, updateAppMessageShareData, updateTimelineShareData, previewImage }; export { signToWechat, getLocation, requestPayment, openLocation, updateAppMessageShareData, updateTimelineShareData, previewImage };
src/components/Thanksgiving/index.vue
+28 -32
View File
@@ -8,9 +8,9 @@
</div> </div>
<div class="body"> <div class="body">
<div> <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"> <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> </div>
</div> </div>
@@ -22,23 +22,22 @@
<script> <script>
import { getOrderCompare, getOrderCompareByAgentId } from "@/api"; import { getOrderCompare, getOrderCompareByAgentId } from "@/api";
export default { export default {
name: 'thanks-giving', name: "thanks-giving",
props: { props: {
templeId: [String, Number], templeId: [String, Number],
goodsType: { goodsType: {
type: String, type: String,
}, },
goodsId: { goodsId: {
type: [String, Number] type: [String, Number],
}, },
typeId: { typeId: {
type: [String, Number] type: [String, Number],
}, },
agentId: [String, Number], agentId: [String, Number],
}, },
data(){ data() {
return { return {
type_id: this.typeId || 1, type_id: this.typeId || 1,
type_nav: [ type_nav: [
@@ -47,38 +46,36 @@ export default {
{ id: 3, title: "总榜", list: [] }, { id: 3, title: "总榜", list: [] },
], ],
page: 1, page: 1,
} };
}, },
mounted(){ mounted() {
this.getOrderCompare(); this.getOrderCompare();
}, },
methods: { methods: {
onSetType(type){ onSetType(type) {
this.type_id = type.id; this.type_id = type.id;
this.getOrderCompare(); this.getOrderCompare();
}, },
async getOrderCompare(){ async getOrderCompare() {
let res; let res;
if(this.templeId){ if (this.templeId) {
res = await getOrderCompare(this.templeId || '1', this.page, this.type_id, this.goodsId, this.goodsType) res = await getOrderCompare(this.templeId || "1", this.page, this.type_id, this.goodsId, this.goodsType);
} else { } 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); const current = this.type_nav.find((item) => item.id === this.type_id);
console.log('current', current) current.list = res.list;
current.list = res.list
console.log(this.type_nav)
}, },
onThankMore(){ onThankMore() {
this.$router.push({ this.$router.push({
name: 'merit-box', name: "merit-box",
query: { query: {
type_id: this.type_id, type_id: this.type_id,
temple_id: this.templeId temple_id: this.templeId,
} },
}) });
} },
} },
}; };
</script> </script>
@@ -109,18 +106,17 @@ export default {
} }
} }
} }
.body{ .body {
.swiper-container {
.swiper-container{
height: 5.33rem; height: 5.33rem;
} }
.thanks-more{ .thanks-more {
height: 1rem; height: 1rem;
line-height: 1rem; line-height: 1rem;
font-size: .4rem; font-size: 0.4rem;
color: #333; color: #333;
text-align: center; text-align: center;
} }
} }
} }
</style> </style>
src/components/content-expand/index.vue
+32 -36
View File
@@ -1,87 +1,83 @@
<template> <template>
<div class="content-expand"> <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"> <div ref="content">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
<span class="expand" v-if="contentOverflow" @click="toggle"> <span class="expand" v-if="contentOverflow" @click="toggle">
<i class="iconfont icon-double-arrow-down-" :class="[show && 'iconfont-expand']"></i> <i class="iconfont icon-double-arrow-down-" :class="[show && 'iconfont-expand']"></i>
<span class="label">{{show ? '收起全文': '展开全文'}}</span> <span class="label">{{ show ? "收起全文" : "展开全文" }}</span>
</span> </span>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'content-expand', name: "content-expand",
data(){ data() {
return { return {
wrapperHeight: 0, wrapperHeight: 0,
contentHeight: 0, contentHeight: 0,
show: false, show: false,
wrapperContainerHeight: 0, wrapperContainerHeight: 0,
defaultContentHeight: 0 defaultContentHeight: 0,
} };
}, },
computed: { computed: {
contentOverflow: { contentOverflow: {
get(){ get() {
return this.contentHeight > this.wrapperHeight; return this.contentHeight > this.wrapperHeight;
} },
} },
}, },
updated() { updated() {},
mounted() {
}, this.wrapperHeight = this.$refs.wrapper.offsetHeight;
mounted(){ this.contentHeight = this.$refs.content.offsetHeight;
this.wrapperHeight = this.$refs.wrapper.offsetHeight this.defaultContentHeight = this.$refs.content.querySelector(".goods-content").offsetHeight / (3 / 2);
this.contentHeight = this.$refs.content.offsetHeight
this.defaultContentHeight = this.$refs.content.querySelector('.goods-content').offsetHeight / (3/2)
console.log(this.defaultContentHeight)
this.$nextTick(() => { this.$nextTick(() => {
this.wrapperContainerHeight = this.wrapperHeight; this.wrapperContainerHeight = this.wrapperHeight;
}) });
}, },
methods: { methods: {
toggle(){ toggle() {
this.show = !this.show this.show = !this.show;
} },
} },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
.content-expand{ .content-expand {
.content{ .content {
line-height: 1.4; line-height: 1.4;
font-size: .35rem; font-size: 0.35rem;
color: #888; color: #888;
letter-spacing: 1px; letter-spacing: 1px;
text-align: justify; text-align: justify;
margin-top: .3rem; margin-top: 0.3rem;
overflow: hidden; overflow: hidden;
height: 4em; height: 4em;
transition: height .3s linear; transition: height 0.3s linear;
} }
.expand{ .expand {
text-align: center; text-align: center;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 1.07rem; height: 1.07rem;
color: #888; color: #888;
.iconfont{ .iconfont {
display: inline-block; display: inline-block;
} }
.iconfont-expand{ .iconfont-expand {
transform: rotateZ(180deg); transform: rotateZ(180deg);
} }
.label{ .label {
padding-left: .1rem; padding-left: 0.1rem;
font-size: .35rem; font-size: 0.35rem;
} }
} }
} }
</style> </style>
src/components/detail-content-expand/index.vue
+37 -42
View File
@@ -1,102 +1,97 @@
<template> <template>
<div class="detail-content-expand"> <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"> <div ref="content" class="ref-content">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
<span class="expand" v-if="contentOverflow" @click="toggle"> <span class="expand" v-if="contentOverflow" @click="toggle">
<i class="iconfont icon-double-arrow-down-" :class="[show && 'iconfont-expand']"></i> <i class="iconfont icon-double-arrow-down-" :class="[show && 'iconfont-expand']"></i>
<span class="label">{{show ? '收起全文': '展开全文'}}</span> <span class="label">{{ show ? "收起全文" : "展开全文" }}</span>
</span> </span>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'detail-content-expand', name: "detail-content-expand",
props: { props: {
selector: { selector: {
type: String, type: String,
default: '.goods-content' default: ".goods-content",
} },
}, },
data(){ data() {
return { return {
wrapperHeight: 0, wrapperHeight: 0,
contentHeight: 0, contentHeight: 0,
show: false, show: false,
wrapperContainerHeight: 0, wrapperContainerHeight: 0,
defaultContentHeight: 0 defaultContentHeight: 0,
} };
}, },
computed: { computed: {
contentOverflow: { contentOverflow: {
get(){ get() {
return this.contentHeight > this.wrapperHeight; return this.contentHeight > this.wrapperHeight;
} },
} },
}, },
watch: {
'$slots'(val){ mounted() {
console.log('slots val',val) this.wrapperHeight = this.$refs.wrapper.offsetHeight;
}
},
mounted(){
this.wrapperHeight = this.$refs.wrapper.offsetHeight
this.$nextTick(() => { this.$nextTick(() => {
this.contentHeight = this.$refs.content.offsetHeight this.contentHeight = this.$refs.content.offsetHeight;
this.wrapperContainerHeight = this.wrapperHeight; this.wrapperContainerHeight = this.wrapperHeight;
this.refresh(); this.refresh();
}) });
}, },
methods: { methods: {
toggle(){ toggle() {
this.show = !this.show this.show = !this.show;
}, },
refresh(){ refresh() {
const selector = this.$refs.content.querySelector(this.selector); const selector = this.$refs.content.querySelector(this.selector);
if(!selector) { if (!selector) {
this.defaultContentHeight = 100; this.defaultContentHeight = 100;
return return;
} }
this.defaultContentHeight = selector.offsetHeight / (4/1) this.defaultContentHeight = selector.offsetHeight / (4 / 1);
} },
} },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
.detail-content-expand{ .detail-content-expand {
.content{ .content {
line-height: 1.4; line-height: 1.4;
font-size: .35rem; font-size: 0.35rem;
color: #888; color: #888;
letter-spacing: 1px; letter-spacing: 1px;
text-align: justify; text-align: justify;
margin-top: .3rem; margin-top: 0.3rem;
overflow: hidden; overflow: hidden;
height: 4em; height: 4em;
transition: height .3s linear; transition: height 0.3s linear;
} }
.expand{ .expand {
text-align: center; text-align: center;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 1.07rem; height: 1.07rem;
color: #888; color: #888;
.iconfont{ .iconfont {
display: inline-block; display: inline-block;
} }
.iconfont-expand{ .iconfont-expand {
transform: rotateZ(180deg); transform: rotateZ(180deg);
} }
.label{ .label {
padding-left: .1rem; padding-left: 0.1rem;
font-size: .35rem; font-size: 0.35rem;
} }
} }
} }
</style> </style>
src/components/scroll-view/index.vue
+157 -159
View File
@@ -1,5 +1,5 @@
<template> <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"> <div class="scroll-content">
<slot></slot> <slot></slot>
</div> </div>
@@ -10,174 +10,172 @@
import BScroll from "better-scroll"; import BScroll from "better-scroll";
export default { export default {
name: "scroll-view", name: "scroll-view",
data(){ data() {
return { return {
wrapperHeight: 0 wrapperHeight: 0,
} };
}, },
props: { props: {
/** /**
* 1 滚动的时候会派发scroll事件，会截流。 * 1 滚动的时候会派发scroll事件，会截流。
* 2 滚动的时候实时派发scroll事件，不会截流。 * 2 滚动的时候实时派发scroll事件，不会截流。
* 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件 * 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
*/ */
probeType: { probeType: {
type: Number, type: Number,
default: 1, default: 1,
}, },
/** /**
* 点击列表是否派发click事件 * 点击列表是否派发click事件
*/ */
click: { click: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
/** /**
* 是否开启横向滚动 * 是否开启横向滚动
*/ */
scrollX: { scrollX: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
/** /**
* 是否派发滚动事件 * 是否派发滚动事件
*/ */
listenScroll: { listenScroll: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
/** /**
* 列表的数据 * 列表的数据
*/ */
data: { data: {
type: Array, type: Array,
default: null, default: null,
}, },
/** /**
* 是否派发滚动到底部的事件，用于上拉加载 * 是否派发滚动到底部的事件，用于上拉加载
*/ */
pullup: { pullup: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
/** /**
* 是否派发顶部下拉的事件，用于下拉刷新 * 是否派发顶部下拉的事件，用于下拉刷新
*/ */
pulldown: { pulldown: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
/** /**
* 是否派发列表滚动开始的事件 * 是否派发列表滚动开始的事件
*/ */
beforeScroll: { beforeScroll: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
/** /**
* 当数据更新后，刷新scroll的延时。 * 当数据更新后，刷新scroll的延时。
*/ */
refreshDelay: { refreshDelay: {
type: Number, type: Number,
default: 20, default: 20,
}, },
height: { height: {
type: Number type: Number,
} },
}, },
mounted() { mounted() {
// 保证在DOM渲染完毕后初始化better-scroll // 保证在DOM渲染完毕后初始化better-scroll
this.wrapperHeight = this.height || this.$parent.$el.offsetHeight this.wrapperHeight = this.height || this.$parent.$el.offsetHeight;
setTimeout(() => { setTimeout(() => {
this._initScroll(); this._initScroll();
}, 20); }, 20);
}, },
methods: {
_initScroll() {
if (!this.$refs.wrapper) {
return;
}
// better-scroll的初始化 methods: {
this.scroll = new BScroll(this.$refs.wrapper, { _initScroll() {
probeType: this.probeType, if (!this.$refs.wrapper) {
click: this.click, return;
scrollX: this.scrollX, }
});
// 是否派发滚动事件 // better-scroll的初始化
if (this.listenScroll) { this.scroll = new BScroll(this.$refs.wrapper, {
this.scroll.on("scroll", (pos) => { probeType: this.probeType,
this.$emit("scroll", pos); click: this.click,
}); scrollX: this.scrollX,
} });
// 是否派发滚动到底部事件，用于上拉加载 // 是否派发滚动事件
if (this.pullup) { if (this.listenScroll) {
this.scroll.on("scrollEnd", () => { this.scroll.on("scroll", (pos) => {
// 滚动到底部 this.$emit("scroll", pos);
console.log(this.scroll.y, this.scroll.maxScrollY + 50) });
if (this.scroll.y <= this.scroll.maxScrollY + 50) { }
this.$emit("pullup");
}
});
}
// 是否派发顶部下拉事件，用于下拉刷新 // 是否派发滚动到底部事件，用于上拉加载
if (this.pulldown) { if (this.pullup) {
this.scroll.on("touchEnd", (pos) => { this.scroll.on("scrollEnd", () => {
// 下拉动作 // 滚动到底部
if (pos.y > 50) { if (this.scroll.y <= this.scroll.maxScrollY + 50) {
this.$emit("pulldown"); this.$emit("pullup");
} }
}); });
} }
// 是否派发列表滚动开始的事件 // 是否派发顶部下拉事件，用于下拉刷新
if (this.beforeScroll) { if (this.pulldown) {
this.scroll.on("beforeScrollStart", () => { this.scroll.on("touchEnd", (pos) => {
this.$emit("beforeScroll"); // 下拉动作
}); if (pos.y > 50) {
} this.$emit("pulldown");
}, }
disable() { });
// 代理better-scroll的disable方法 }
this.scroll && this.scroll.disable();
}, // 是否派发列表滚动开始的事件
enable() { if (this.beforeScroll) {
// 代理better-scroll的enable方法 this.scroll.on("beforeScrollStart", () => {
this.scroll && this.scroll.enable(); this.$emit("beforeScroll");
}, });
refresh() { }
// 代理better-scroll的refresh方法 },
this.scroll && this.scroll.refresh(); disable() {
}, // 代理better-scroll的disable方法
scrollTo() { this.scroll && this.scroll.disable();
// 代理better-scroll的scrollTo方法 },
this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments); enable() {
}, // 代理better-scroll的enable方法
scrollToElement() { this.scroll && this.scroll.enable();
// 代理better-scroll的scrollToElement方法 },
this.scroll && refresh() {
this.scroll.scrollToElement.apply(this.scroll, arguments); // 代理better-scroll的refresh方法
}, this.scroll && this.scroll.refresh();
}, },
watch: { scrollTo() {
// 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常 // 代理better-scroll的scrollTo方法
data() { this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments);
setTimeout(() => { },
this.refresh(); scrollToElement() {
}, this.refreshDelay); // 代理better-scroll的scrollToElement方法
}, this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments);
height: { },
handler(val){ },
watch: {
// 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常
data() {
setTimeout(() => {
this.refresh();
}, this.refreshDelay);
},
height: {
handler(val) {
this.wrapperHeight = val; this.wrapperHeight = val;
this.scroll && this.scroll.refresh(); this.scroll && this.scroll.refresh();
} },
} },
}, },
}; };
</script> </script>
src/components/uploader/index.vue
+31 -36
View File
@@ -1,65 +1,60 @@
<template> <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-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-size="isOverSize" :max-count="maxCount" v-model="fileList" @oversize="onOversize" :after-read="onBeforeUpload"></van-uploader> -->
</template> </template>
<script> <script>
import { uploadFile } from '@/api' import { uploadFile } from "@/api";
export default { export default {
name: 'uploader', name: "uploader",
props: { props: {
maxCount: { maxCount: {
type: Number, type: Number,
default: Infinity default: Infinity,
}, },
maxSize: Number, maxSize: Number,
value: { value: {
type: Array, type: Array,
default(){ default() {
return [] return [];
} },
} },
}, },
data(){ data() {
return { return {
fileList: [] fileList: [],
} };
}, },
watch: { watch: {
fileList(val){ fileList(val) {
this.$emit('input', val) this.$emit("input", val);
} },
}, },
methods: { methods: {
isOverSize(){ isOverSize() {
console.log(this.maxCount * this.maxSize * 1024) return 500 * 1024;
return 500 * 1024
}, },
onOversize(){ onOversize() {
console.log(this.$props) this.$toast(`文件大小不能超过${this.isOverSize()}kb`);
this.$toast(`文件大小不能超过${this.isOverSize()}kb`)
}, },
async onBeforeUpload(obj){ async onBeforeUpload(obj) {
console.log(obj.file.size)
const type = Object.prototype.toString; const type = Object.prototype.toString;
if(type.call(obj) === '[object Object]'){ if (type.call(obj) === "[object Object]") {
const formData = new FormData(); const formData = new FormData();
formData.append('photo', obj.file) formData.append("photo", obj.file);
const res = await uploadFile(formData) const res = await uploadFile(formData);
obj.url = res.url obj.url = res.url;
} }
if(type.call(obj) === '[object Array]'){ if (type.call(obj) === "[object Array]") {
for(let file of obj){ for (let file of obj) {
const formData = new FormData(); const formData = new FormData();
formData.append('photo', file.file) formData.append("photo", file.file);
const res = await uploadFile(formData) const res = await uploadFile(formData);
file.url = res.url file.url = res.url;
} }
} }
}, },
} },
} };
</script> </script>
src/mixins/index.js
+42 -42
View File
@@ -1,55 +1,55 @@
import { Toast } from 'vant'; import { Toast } from "vant";
import { getWechatSign } from '@/api'; import { getWechatSign } from "@/api";
import { signToWechat } from '@/common/wechat-web'; import { signToWechat } from "@/common/wechat-web";
export default { export default {
directives: { directives: {
numberOnly: { numberOnly: {
bind: function(el) { bind: function (el) {
el.handler = function() { el.handler = function () {
// el.value = el.value.replace(/\D+/, '') // el.value = el.value.replace(/\D+/, '')
el.value = el.value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1') el.value = el.value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, "$1");
} };
el.addEventListener('input', el.handler) el.addEventListener("input", el.handler);
},
unbind: function (el) {
el.removeEventListener("input", el.handler);
}, },
unbind: function(el) {
el.removeEventListener('input', el.handler)
}
}, },
copy: { copy: {
bind(el, binding, vnode){ bind(el, binding) {
console.log(el, binding, vnode) el.addEventListener(
"click",
el.addEventListener('click', () => { () => {
const input = document.createElement('textarea'); const input = document.createElement("textarea");
input.value = binding.value; input.value = binding.value;
document.body.appendChild(input) document.body.appendChild(input);
input.select(); input.select();
document.execCommand('copy'); document.execCommand("copy");
document.body.removeChild(input) document.body.removeChild(input);
Toast.success('复制成功') Toast.success("复制成功");
}, false) },
false
);
}, },
} },
}, },
methods: { methods: {
wechatReady(shareConfig){ wechatReady(shareConfig) {
console.log('wechatReady get share config', shareConfig) console.log("wechatReady get share config", shareConfig);
getWechatSign(location.href).then(res => { getWechatSign(location.href).then((res) => {
signToWechat(res, shareConfig); signToWechat(res, shareConfig);
}); });
}, },
shareToWechat(wx, shareConfig){ shareToWechat(wx, shareConfig) {
if(!shareConfig){ if (!shareConfig) {
return console.error(`wechat share config error: ${shareConfig}`); return console.error(`wechat share config error: ${shareConfig}`);
} }
console.log('share', wx, shareConfig)
}, },
getHasFullScreen() { getHasFullScreen() {
let result = false; let result = false;
const rate = window.screen.height / window.screen.width; 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) { if (rate > limit) {
result = true; result = true;
@@ -62,33 +62,33 @@ export default {
* @param temple_id: 寺院id * @param temple_id: 寺院id
* @return void * @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; const type = Object.prototype.toString;
if(type.call(spec_ids) !== '[object String]'){ if (type.call(spec_ids) !== "[object String]") {
spec_ids = spec_ids.toString() spec_ids = spec_ids.toString();
} }
if (goods_type == 1 || goods_type == 2 || goods_type == 4) { if (goods_type == 1 || goods_type == 2 || goods_type == 4) {
this.$router.push({ this.$router.push({
name: 'everyday-donation', name: "everyday-donation",
query: { query: {
goods_type, goods_type,
goods_id, goods_id,
temple_id, temple_id,
spec_ids spec_ids,
}, },
}); });
return; return;
} }
this.$router.push({ this.$router.push({
name: 'goods-detail', name: "goods-detail",
query: { query: {
goods_type, goods_type,
goods_id, goods_id,
temple_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="everyday-donation" v-if="data">
<div class="content-view"> <div class="content-view">
<div class="topbar" ref="topbar"> <div class="topbar" ref="topbar">
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" /> <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{ backgroundColor: $route.meta.navBarBackgroundColor }" />
</div> </div>
<swiper class="swiper-container" :options="swiperOption"> <swiper class="swiper-container" :options="swiperOption">
<swiper-slide v-for="(picture, index) in data.pictures" :key="index"> <swiper-slide v-for="(picture, index) in data.pictures" :key="index">
<div style="height: 100vw;" class="picture"> <div style="height: 100vw" class="picture">
<img :src="picture" alt=""> <img :src="picture" alt="" />
</div> </div>
</swiper-slide> </swiper-slide>
</swiper> </swiper>
<div class="monk-profile"> <div class="monk-profile">
<h1 class="position">{{data.name}}</h1> <h1 class="position">{{ data.name }}</h1>
<div class="bar"> <div class="bar">
<span class="status">进行中</span> <span class="status">进行中</span>
<span>已有{{data.sales || 0}}人参与</span> <span>已有{{ data.sales || 0 }}人参与</span>
</div> </div>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
@@ -44,7 +44,7 @@
<div class="support-head"> <div class="support-head">
<span class="label">感恩功德</span> <span class="label">感恩功德</span>
<ul class="external"> <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> </ul>
</div> </div>
<div> <div>
@@ -67,11 +67,11 @@
</div> </div>
<ul class="spec"> <ul class="spec">
<li class="random"> <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> <span class="border-circle" @click="onCustomeBrike">随喜</span>
</li> </li>
<li v-for="(spec, index) in data.spec" :key="index"> <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> </li>
</ul> </ul>
<div class="auto-donate"> <div class="auto-donate">
@@ -91,7 +91,7 @@
</div> </div>
</div> </div>
<div class="next-group"> <div class="next-group">
<span class="total">合计：￥{{priceTotal}}</span> <span class="total">合计：￥{{ priceTotal }}</span>
<button class="next" @click="onToPay">下一步</button> <button class="next" @click="onToPay">下一步</button>
</div> </div>
</div> </div>
@@ -103,18 +103,13 @@
</div> </div>
<ul class="spec brick-spec"> <ul class="spec brick-spec">
<li class="random" v-if="onlySpecs && onlySpecs.length == 0"> <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" /> <van-stepper v-model="buy_quantity" step="1" v-if="is_assign" />
</li> </li>
<li v-for="(spec, index) in data.spec" :key="index"> <li v-for="(spec, index) in data.spec" :key="index">
<span <span class="border-circle" :class="[Number(spec.money) === priceUnit && !is_assign && 'active', isDisabled(spec)]" @click="onPriceUnit(spec)"
class="border-circle" >{{ spec.spec_name }} {{ spec.donate_number * Number(data.price) }}元</span
:class="[ >
Number(spec.money) === priceUnit && !is_assign && 'active',
isDisabled(spec),
]"
@click="onPriceUnit(spec)"
>{{spec.spec_name}} {{spec.donate_number * Number(data.price)}}元</span>
</li> </li>
</ul> </ul>
<div class="auto-donate"> <div class="auto-donate">
@@ -135,8 +130,10 @@
</div> </div>
<div class="next-group-wrapper"> <div class="next-group-wrapper">
<safe-area> <safe-area>
<div class='next-group'> <div class="next-group">
<span class="total">合计：<em>￥{{priceTotal}}</em></span> <span class="total"
>合计：<em>￥{{ priceTotal }}</em></span
>
<button class="next" :disabled="!priceUnitId" @click="onToPay">下一步</button> <button class="next" :disabled="!priceUnitId" @click="onToPay">下一步</button>
</div> </div>
</safe-area> </safe-area>
@@ -150,8 +147,8 @@
</template> </template>
<script> <script>
import 'swiper/css/swiper.css' import "swiper/css/swiper.css";
import { swiper, swiperSlide } from 'vue-awesome-swiper' import { swiper, swiperSlide } from "vue-awesome-swiper";
import { getDynamicDataByGoodsId, getGoodsDetail, getOrderCompare, hasLogin } from "@/api"; import { getDynamicDataByGoodsId, getGoodsDetail, getOrderCompare, hasLogin } from "@/api";
export default { export default {
@@ -159,20 +156,20 @@ export default {
swiper, swiper,
swiperSlide, swiperSlide,
}, },
data(){ data() {
const { query } = this.$route; const { query } = this.$route;
let title = '详情'; let title = "详情";
if(query.goods_type === '1'){ if (query.goods_type === "1") {
title = '日行一善'; title = "日行一善";
} }
if(query.goods_type === '2'){ if (query.goods_type === "2") {
title = '添砖加瓦' title = "添砖加瓦";
} }
document.title = title; document.title = title;
for(let i in query){ for (let i in query) {
query[i] = query[i].toString() query[i] = query[i].toString();
} }
let onlySpecs = query.spec_ids ? query.spec_ids.split(',').map(v => Number(v)) : null; let onlySpecs = query.spec_ids ? query.spec_ids.split(",").map((v) => Number(v)) : null;
return { return {
onlySpecs, onlySpecs,
@@ -184,92 +181,91 @@ export default {
is_auto: false, // 是否自动行善 is_auto: false, // 是否自动行善
showSpec: false, showSpec: false,
priceUnit: 0, priceUnit: 0,
priceUnitId: '', priceUnitId: "",
monthQuantity: 1, monthQuantity: 1,
is_assign: false, // 是否为自动认捐砖块数 is_assign: false, // 是否为自动认捐砖块数
buy_quantity: 1, // 自定义认捐砖块数 buy_quantity: 1, // 自定义认捐砖块数
goodsDynamicList: [], // 商品动态列表 goodsDynamicList: [], // 商品动态列表
banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ], banners: ["/1.jpg", "/2.jpg", "/3.jpg"],
swiperOption: { swiperOption: {
autoplay: 8000, autoplay: 8000,
initialSlide: 1, initialSlide: 1,
loop: true, loop: true,
pagination: '.swiper-pagination', pagination: ".swiper-pagination",
}, },
listType: 1, listType: 1,
listTypes: [ listTypes: [
{ id: 1, name: '实时', }, { id: 1, name: "实时" },
{ id: 2, name: '月榜', }, { id: 2, name: "月榜" },
{ id: 3, name: '总榜', }, { id: 3, name: "总榜" },
], ],
lTypeId: 1, lTypeId: 1,
payList: [], payList: [],
page: 1, page: 1,
noMore: false, noMore: false,
} };
}, },
computed: { computed: {
priceTotal(){ priceTotal() {
const { priceUnit, is_assign, is_auto, buy_quantity, monthQuantity } = this; const { priceUnit, is_assign, is_auto, buy_quantity, monthQuantity } = this;
if(is_assign){ if (is_assign) {
return (priceUnit * 100 * buy_quantity) / 100; return (priceUnit * 100 * buy_quantity) / 100;
} }
if(is_auto){ if (is_auto) {
return (priceUnit * 100 * monthQuantity * 30) / 100 return (priceUnit * 100 * monthQuantity * 30) / 100;
} }
return (priceUnit * 100 ) / 100; return (priceUnit * 100) / 100;
} },
}, },
mounted(){ mounted() {
if(this.query.goods_type === '1'){ if (this.query.goods_type === "1") {
return this.getGoodsDetail('friendly'); 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: { methods: {
backHome(){ backHome() {
const { query } = this.$router.currentRoute; const { query } = this.$router.currentRoute;
const name = query.temple_id === '1' ? 'home': 'temple-home' const name = query.temple_id === "1" ? "home" : "temple-home";
this.$router.replace({ name, query: { temple_id: query.temple_id }}) this.$router.replace({ name, query: { temple_id: query.temple_id } });
}, },
async onHasLoginToNext(){ async onHasLoginToNext() {
await hasLogin(); await hasLogin();
this.showSpec = true this.showSpec = true;
}, },
isDisabled(spec){ isDisabled(spec) {
const { id } = spec; const { id } = spec;
if(!this.onlySpecs) return false; if (!this.onlySpecs) return false;
return !this.onlySpecs.includes(id) ? 'spec-disabled': '' return !this.onlySpecs.includes(id) ? "spec-disabled" : "";
}, },
// 获取更多感恩功德1 // 获取更多感恩功德1
loadMoreFn(){ loadMoreFn() {
this.page += 1; this.page += 1;
this.getPayRecords(this.lTypeId, this.page) this.getPayRecords(this.lTypeId, this.page);
}, },
getSelectedSpec() { getSelectedSpec() {
const { goods_type } = this.query; 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 { return {
specId: '', specId: "",
specName: goods_type === '1' ? '随喜': this.data.rule_btn specName: goods_type === "1" ? "随喜" : this.data.rule_btn,
} };
} }
const spec = this.data.spec.find(item => item.id === this.priceUnitId); const spec = this.data.spec.find((item) => item.id === this.priceUnitId);
if(!spec){ if (!spec) {
return { return {
specId: '', specId: "",
specName: '' specName: "",
} };
} }
return { return {
specId: spec.id, specId: spec.id,
specName: spec.spec_name, specName: spec.spec_name,
} };
} }
}, },
// 获取商品详情 // 获取商品详情
@@ -278,43 +274,41 @@ export default {
type = tile: 获取添砖加瓦商品 type = tile: 获取添砖加瓦商品
type = common: 获取普通商品 type = common: 获取普通商品
*/ */
async getGoodsDetail(type){ async getGoodsDetail(type) {
const { goods_id, temple_id, goods_type } = this.$route.query; const { goods_id, temple_id, goods_type } = this.$route.query;
const response = await getGoodsDetail(type, goods_id, temple_id); const response = await getGoodsDetail(type, goods_id, temple_id);
if(this.query.goods_type === '2'){ if (this.query.goods_type === "2") {
response.spec = response.spec.map(v => ({ ...v, money: this.amountAbs(v.donate_number, Number(response.price))})) response.spec = response.spec.map((v) => ({ ...v, money: this.amountAbs(v.donate_number, Number(response.price)) }));
} }
await this.getDynamicDataByGoodsId(goods_id, goods_type); await this.getDynamicDataByGoodsId(goods_id, goods_type);
await this.getPayRecords(this.lTypeId, 1); await this.getPayRecords(this.lTypeId, 1);
this.data = response; this.data = response;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.contentWrap.refresh();
this.$refs.contentWrap.refresh() });
console.log('a', this.$refs.contentWrap) if (!this.onlySpecs) {
})
if(!this.onlySpecs){
const { donate_number, money, id } = this.data.spec[0]; const { donate_number, money, id } = this.data.spec[0];
const priceUnit = donate_number || money; 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.priceUnitId = id;
} }
this.wechatReady({ this.wechatReady({
...this.data.shareConfig, ...this.data.shareConfig,
link: location.href link: location.href,
}) });
}, },
// 获取感恩功德 // 获取感恩功德
async getPayRecords(lTypeId, page){ async getPayRecords(lTypeId, page) {
this.page = page; this.page = page;
this.lTypeId = lTypeId; this.lTypeId = lTypeId;
const res = await getOrderCompare(this.query.temple_id, this.page, this.lTypeId, this.query.goods_id, this.query.goods_type ); const res = await getOrderCompare(this.query.temple_id, this.page, this.lTypeId, this.query.goods_id, this.query.goods_type);
if(this.page === 1){ if (this.page === 1) {
this.payList = []; this.payList = [];
} }
this.payList = this.payList.concat(res.list); this.payList = this.payList.concat(res.list);
this.noMore = res.list.length === 0; 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 { temple_id } = this.$route.query;
const res = await getDynamicDataByGoodsId(temple_id, this.page, goods_id, goods_type); const res = await getDynamicDataByGoodsId(temple_id, this.page, goods_id, goods_type);
this.goodsDynamicList = res; this.goodsDynamicList = res;
@@ -322,49 +316,49 @@ export default {
onMoreProcess() { onMoreProcess() {
const { goods_id, temple_id } = this.$route.query; const { goods_id, temple_id } = this.$route.query;
this.$router.push({ this.$router.push({
name: 'buddha-activity', name: "buddha-activity",
query: { query: {
temple_id, temple_id,
goods_id goods_id,
} },
}); });
}, },
// 设置行善单价 // 设置行善单价
onPriceUnit({id, money}){ onPriceUnit({ id, money }) {
this.is_assign = false; this.is_assign = false;
this.priceUnit = Number(money); this.priceUnit = Number(money);
this.priceUnitId = id; this.priceUnitId = id;
this.buy_quantity = 1; this.buy_quantity = 1;
this.spec_id = ''; this.spec_id = "";
}, },
onRandomNext({ money}){ onRandomNext({ money }) {
this.anyPrice = money; this.anyPrice = money;
this.priceUnit = money; this.priceUnit = money;
this.onToPay(); this.onToPay();
}, },
onToPay(){ onToPay() {
// 不需要跳转到功德芳名 // 不需要跳转到功德芳名
if(this.query.goods_type === '1'){ if (this.query.goods_type === "1") {
this.$router.push({ this.$router.push({
name: 'pay', name: "pay",
query: { query: {
...this.$route.query, ...this.$route.query,
is_auto: this.is_auto ? 1 : 0, is_auto: this.is_auto ? 1 : 0,
spec_id: this.priceUnitId, spec_id: this.priceUnitId,
friendly_time: this.monthQuantity, friendly_time: this.monthQuantity,
title: this.data.name, title: this.data.name,
subTitle: '日行一善捐赠', subTitle: "日行一善捐赠",
quantity: 1, quantity: 1,
amount: this.priceTotal, amount: this.priceTotal,
is_customized: this.is_assign ? 1 : 0, is_customized: this.is_assign ? 1 : 0,
price: this.priceUnit, price: this.priceUnit,
from: 'friendly_day', // 标识为日行一善 from: "friendly_day", // 标识为日行一善
} },
}) });
} }
if(this.query.goods_type === '2'){ if (this.query.goods_type === "2") {
this.$router.push({ this.$router.push({
name: 'pay', name: "pay",
query: { query: {
...this.$route.query, ...this.$route.query,
is_auto: this.is_auto ? 1 : 0, is_auto: this.is_auto ? 1 : 0,
@@ -378,223 +372,224 @@ export default {
is_customized: this.is_assign ? 1 : 0, is_customized: this.is_assign ? 1 : 0,
price: this.priceUnit, price: this.priceUnit,
buy_quantity: this.buy_quantity, buy_quantity: this.buy_quantity,
from: 'brike', // 标识为填砖加瓦 from: "brike", // 标识为填砖加瓦
} },
}) });
} }
}, },
amountAbs(number, price){ amountAbs(number, price) {
return (parseInt(number * 100, 10) * price) / 100 return (parseInt(number * 100, 10) * price) / 100;
}, },
// 自定义砖数 // 自定义砖数
onCustomeBrike(){ onCustomeBrike() {
this.priceUnit = Number(this.data.price) || 0; this.priceUnit = Number(this.data.price) || 0;
this.buy_quantity = 1; this.buy_quantity = 1;
this.is_assign = true; this.is_assign = true;
this.showRandom = true; this.showRandom = true;
} },
} },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
.swiper-container{ .swiper-container {
background: #f5f5f5; background: #f5f5f5;
.picture, img{ .picture,
img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.process-content{ .process-content {
*{ * {
max-width: 100%; max-width: 100%;
} }
} }
.caret{ .caret {
padding-bottom: .2rem; padding-bottom: 0.2rem;
.head{ .head {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: .4rem; font-size: 0.4rem;
padding: .4rem; padding: 0.4rem;
align-items: center; align-items: center;
margin-top: .13rem; margin-top: 0.13rem;
.iconfont{ .iconfont {
font-size: .7rem; font-size: 0.7rem;
} }
} }
.spec{ .spec {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
grid-gap: .3rem; grid-gap: 0.3rem;
padding: .4rem; padding: 0.4rem;
.random{ .random {
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 5; grid-column-end: 5;
text-align: left; text-align: left;
span{ span {
font-size: .35rem; font-size: 0.35rem;
border-radius: .11rem; border-radius: 0.11rem;
width: auto; width: auto;
display: inline-block; display: inline-block;
padding: .3rem .7rem; padding: 0.3rem 0.7rem;
&:active{ &:active {
background: #f5f5f5; background: #f5f5f5;
} }
} }
span.spec-disabled{ span.spec-disabled {
pointer-events: none; pointer-events: none;
opacity: 0.6; opacity: 0.6;
} }
} }
li{ li {
text-align: center; text-align: center;
span{ span {
font-size: .35rem; font-size: 0.35rem;
width: 100%; width: 100%;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
padding: .3rem 0; padding: 0.3rem 0;
line-height: 1.2; line-height: 1.2;
user-select: none; user-select: none;
color: #666; color: #666;
&:active{ &:active {
background: rgba($primary-color, 0.1); background: rgba($primary-color, 0.1);
} }
} }
span.spec-disabled{ span.spec-disabled {
pointer-events: none; pointer-events: none;
background: #f9f9f9; background: #f9f9f9;
color: #aaa; color: #aaa;
} }
} }
} }
.brick-spec{ .brick-spec {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
grid-gap: .3rem; grid-gap: 0.3rem;
.random{ .random {
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 3; grid-column-end: 3;
text-align: left; text-align: left;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
span.active{ span.active {
color: $primary-color; color: $primary-color;
} }
} }
.auto-donate{ .auto-donate {
padding: 0 .4rem; padding: 0 0.4rem;
margin-top: .6rem; margin-top: 0.6rem;
.label{ .label {
font-size: .4rem; font-size: 0.4rem;
} }
.donate{ .donate {
display: flex; display: flex;
margin-top: .3rem; margin-top: 0.3rem;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
span{ span {
font-size: .35rem; font-size: 0.35rem;
} }
} }
} }
.auto-donate-time{ .auto-donate-time {
padding: .4rem ; padding: 0.4rem;
margin-top: .4rem; margin-top: 0.4rem;
.donate{ .donate {
.label{ .label {
font-size: .4rem; font-size: 0.4rem;
} }
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.time-cycle{ .time-cycle {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
.unit{ .unit {
font-size: .3rem; font-size: 0.3rem;
color: #666; color: #666;
padding-left: .2rem; padding-left: 0.2rem;
} }
} }
} }
.next-group-wrapper{ .next-group-wrapper {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
border-top: 1px solid #ededed; border-top: 1px solid #ededed;
} }
.next-group{ .next-group {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: .4rem; padding: 0.4rem;
background: white; background: white;
align-items: center; align-items: center;
.total{ .total {
font-size: .4rem; font-size: 0.4rem;
em{ em {
color: $primary-color; color: $primary-color;
font-size: .4rem; font-size: 0.4rem;
font-weight: bold; font-weight: bold;
} }
} }
.next{ .next {
font-size: .4rem; font-size: 0.4rem;
padding: .3rem 1rem; padding: 0.3rem 1rem;
background: $primary-color; background: $primary-color;
border: 1px solid $primary-color; border: 1px solid $primary-color;
color: white; color: white;
border-radius: .1rem; border-radius: 0.1rem;
} }
} }
} }
.support{ .support {
.support-head{ .support-head {
padding: 0 .4rem; padding: 0 0.4rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 1.07rem; height: 1.07rem;
line-height: 1.07rem; line-height: 1.07rem;
.label{ .label {
font-size: .4rem; font-size: 0.4rem;
font-weight: bold; font-weight: bold;
} }
.external{ .external {
display: flex; display: flex;
align-items: center; align-items: center;
li{ li {
margin-left: .3rem; margin-left: 0.3rem;
font-size: .35rem; font-size: 0.35rem;
color: #666; color: #666;
} }
li.active{ li.active {
color: #333; color: #333;
font-weight: bold; font-weight: bold;
} }
} }
} }
} }
.everyday-donation{ .everyday-donation {
height: 100vh; height: 100vh;
position: relative; position: relative;
.goods-content{ .goods-content {
padding-left: .3rem; padding-left: 0.3rem;
padding-right: .3rem; padding-right: 0.3rem;
* { * {
max-width: 100%; max-width: 100%;
font-size: .35rem; font-size: 0.35rem;
} }
} }
.content-view{ .content-view {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@@ -603,54 +598,54 @@ export default {
overflow-y: scroll; overflow-y: scroll;
padding-bottom: calc(env(safe-area-inset-bottom) + 1.6rem); padding-bottom: calc(env(safe-area-inset-bottom) + 1.6rem);
} }
.monk-profile{ .monk-profile {
padding: .4rem; padding: 0.4rem;
margin-bottom: .2rem; margin-bottom: 0.2rem;
.position{ .position {
font-size: .5rem; font-size: 0.5rem;
padding-top: .2rem; padding-top: 0.2rem;
text-align: justify; text-align: justify;
line-height: 1.3; line-height: 1.3;
color: #19282E; color: #19282e;
} }
.bar{ .bar {
margin-top: .27rem; margin-top: 0.27rem;
} }
.status{ .status {
padding: .2rem .3rem; padding: 0.2rem 0.3rem;
background: orange; background: orange;
color: white; color: white;
display: inline-block; display: inline-block;
border-radius: .04rem; border-radius: 0.04rem;
margin-right: .3rem; margin-right: 0.3rem;
font-size: .3rem; font-size: 0.3rem;
} }
span{ span {
color: #666; color: #666;
font-size: .28rem; font-size: 0.28rem;
} }
} }
.merit-button-group{ .merit-button-group {
text-align: center; text-align: center;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
z-index: 10; z-index: 10;
left: 0; left: 0;
right: 0; right: 0;
background: white; background: white;
padding: .4rem 0; padding: 0.4rem 0;
padding-bottom: calc(env(safe-area-inset-bottom) + .2rem); padding-bottom: calc(env(safe-area-inset-bottom) + 0.2rem);
.merit-button{ .merit-button {
display: inline-block; display: inline-block;
background: $primary-color; background: $primary-color;
color: white; color: white;
height: 1.2rem; height: 1.2rem;
font-size: .37rem; font-size: 0.37rem;
width: 60%; width: 60%;
padding: 0 .53rem; padding: 0 0.53rem;
border: .01rem solid $primary-color; border: 0.01rem solid $primary-color;
border-radius: 1.33rem border-radius: 1.33rem;
} }
} }
} }
</style> </style>
src/pages/goods-detail/components/fill-information.vue
+79 -81
View File
@@ -1,19 +1,19 @@
<template> <template>
<div> <div>
<van-cell-group> <van-cell-group>
<van-cell title="功德芳名" :value="person.name" is-link @click="onAction('name')"/> <van-cell title="功德芳名" :value="person.name" is-link @click="onAction('name')" />
<van-cell title="心愿" :value="dream" is-link @click="onAction('desire')" /> <van-cell title="心愿" :value="dream" is-link @click="onAction('desire')" />
</van-cell-group> </van-cell-group>
<van-popup v-model="showDialog" position="bottom" safe-area-inset-bottom style="min-height: 50vh"> <van-popup v-model="showDialog" position="bottom" safe-area-inset-bottom style="min-height: 50vh">
<div class="add-merit-name" v-if="actionName === 'name'"> <div class="add-merit-name" v-if="actionName === 'name'">
<h3 class="title">功德芳名</h3> <h3 class="title">功德芳名</h3>
<div class="add-name"> <div class="add-name">
<input class="input" type="text" v-model="name" placeholder="请输入功德主姓名"> <input class="input" type="text" v-model="name" placeholder="请输入功德主姓名" />
<button class="btn" @click="addName">添加</button> <button class="btn" @click="addName">添加</button>
</div> </div>
<div class="name-group"> <div class="name-group">
<span class="name" v-for="(name, index) in names" :key="name.id" @click="onSelectName(name)"> <span class="name" v-for="(name, index) in names" :key="name.id" @click="onSelectName(name)">
{{name.name}} {{ name.name }}
<i class="iconfont icon-biaodankongjianshanchu" @click.stop="onDeleteName(name, index)"></i> <i class="iconfont icon-biaodankongjianshanchu" @click.stop="onDeleteName(name, index)"></i>
</span> </span>
</div> </div>
@@ -23,7 +23,7 @@
<h3 class="title">心愿</h3> <h3 class="title">心愿</h3>
<div class="desire-input"> <div class="desire-input">
<textarea class="desire-textarea" v-model="dream" type="text" maxlength="50" placeholder="请输入您的心愿" /> <textarea class="desire-textarea" v-model="dream" type="text" maxlength="50" placeholder="请输入您的心愿" />
<span>{{dream.length}}/50</span> <span>{{ dream.length }}/50</span>
</div> </div>
<div class="desire-quike"> <div class="desire-quike">
<div class="bar"> <div class="bar">
@@ -31,53 +31,53 @@
<span class="update" @click="getDreamList">换一组<i class="iconfont icon-shuaxin"></i></span> <span class="update" @click="getDreamList">换一组<i class="iconfont icon-shuaxin"></i></span>
</div> </div>
<div class="name-group"> <div class="name-group">
<span class="name" 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>
</div> </div>
<button class="confirm" @click="onConfirmDream">确认</button> <button class="confirm" @click="onConfirmDream">确认</button>
</div> </div>
</van-popup> </van-popup>
</div> </div>
</template> </template>
<script> <script>
import { getDreamList, getMeritName } from '@/api'; import { getDreamList, getMeritName } from "@/api";
export default { export default {
data(){ data() {
return { return {
checked: false, checked: false,
showDialog: false, showDialog: false,
actionName: 'name', actionName: "name",
person: {}, person: {},
name: '', name: "",
dream: '', dream: "",
desire: '', desire: "",
names: [], names: [],
dreamList: [] dreamList: [],
} };
}, },
mounted(){ mounted() {
this.getName(); this.getName();
this.getDreamList(); this.getDreamList();
}, },
methods: { methods: {
onAction(name){ onAction(name) {
this.showDialog = true; this.showDialog = true;
this.actionName = name; this.actionName = name;
}, },
onConfirmMeritName(){ onConfirmMeritName() {
this.$emit('change', { this.$emit("change", {
...this.person, ...this.person,
merit_name_id: this.person.id, merit_name_id: this.person.id,
dream: this.dream, dream: this.dream,
}) });
}, },
onSelectName(name){ onSelectName(name) {
this.person = name; this.person = name;
this.showDialog = false; this.showDialog = false;
}, },
onConfirmDream(){ onConfirmDream() {
this.showDialog = false; this.showDialog = false;
this.dream = this.desire; this.dream = this.desire;
this.onConfirmMeritName(); this.onConfirmMeritName();
@@ -88,115 +88,113 @@ export default {
this.names = data; this.names = data;
}, },
//获取心愿列表 //获取心愿列表
async getDreamList(){ async getDreamList() {
const list = await getDreamList(); const list = await getDreamList();
console.log(list)
this.dreamList = list; this.dreamList = list;
} },
} },
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.add-merit-name{ .add-merit-name {
padding: .4rem; padding: 0.4rem;
.title{ .title {
font-size: .4rem; font-size: 0.4rem;
margin-bottom: .4rem; margin-bottom: 0.4rem;
} }
.add-name{ .add-name {
display: flex; display: flex;
.input{ .input {
flex: 1; flex: 1;
height: .8rem; height: 0.8rem;
line-height: .8rem; line-height: 0.8rem;
padding-left: .3rem; padding-left: 0.3rem;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: .11rem; border-radius: 0.11rem;
font-size: .4rem; font-size: 0.4rem;
} }
.btn{ .btn {
padding: .2rem .6rem; padding: 0.2rem 0.6rem;
background: $primary-color; background: $primary-color;
color: white; color: white;
border: 1px solid $primary-color; border: 1px solid $primary-color;
font-size: .4rem; font-size: 0.4rem;
border-radius: .11rem; border-radius: 0.11rem;
margin-left: .3rem; margin-left: 0.3rem;
} }
} }
.name-group{ .name-group {
padding: .5rem 0; padding: 0.5rem 0;
span{ span {
display: inline-block; display: inline-block;
padding: .2rem .3rem; padding: 0.2rem 0.3rem;
background: #fff; background: #fff;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: .08rem; border-radius: 0.08rem;
position: relative; position: relative;
margin-right: .4rem; margin-right: 0.4rem;
margin-bottom: .3rem; margin-bottom: 0.3rem;
font-size: .35rem; font-size: 0.35rem;
vertical-align: top; vertical-align: top;
.iconfont{ .iconfont {
position: absolute; position: absolute;
right: -.25rem; right: -0.25rem;
top: -.25rem; top: -0.25rem;
font-size: .5rem; font-size: 0.5rem;
color: red; color: red;
} }
} }
} }
.desire-input{ .desire-input {
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: .13rem; border-radius: 0.13rem;
overflow: hidden; overflow: hidden;
.desire-textarea{ .desire-textarea {
border: none; border: none;
display: block; display: block;
font-size: .35rem; font-size: 0.35rem;
width: calc(100% - .5rem); width: calc(100% - 0.5rem);
padding: .25rem; padding: 0.25rem;
height: 2rem; height: 2rem;
resize: none; resize: none;
} }
span{ span {
display: block; display: block;
text-align: right; text-align: right;
padding: .2rem; padding: 0.2rem;
font-size: .35rem; font-size: 0.35rem;
} }
} }
.desire-quike{ .desire-quike {
margin-top: 1rem; margin-top: 1rem;
.bar{ .bar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-size: .4rem; font-size: 0.4rem;
margin-bottom: .3rem; margin-bottom: 0.3rem;
.update{ .update {
font-size: .35rem; font-size: 0.35rem;
color: $primary-color; color: $primary-color;
} }
} }
.name-group{ .name-group {
padding: .1rem 0; padding: 0.1rem 0;
.name{ .name {
} }
} }
} }
.confirm{ .confirm {
background: $primary-color; background: $primary-color;
color: white; color: white;
border: 1px solid $primary-color; border: 1px solid $primary-color;
width: 3rem; width: 3rem;
padding: .3rem 0; padding: 0.3rem 0;
border-radius: .07rem; border-radius: 0.07rem;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
font-size: .4rem; font-size: 0.4rem;
} }
} }
</style> </style>
src/pages/goods-detail/index.vue
+202 -202
View File
@@ -1,17 +1,17 @@
<template> <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 class="swiper-container" :options="swiperOption">
<swiper-slide> <swiper-slide>
<div style="height: 100vw;" class="picture"> <div style="height: 100vw" class="picture">
<img :src="data.cover_url" alt=""> <img :src="data.cover_url" alt="" />
</div> </div>
</swiper-slide> </swiper-slide>
</swiper> </swiper>
<div class="monk-profile"> <div class="monk-profile">
<h1 class="position">{{data.name}}</h1> <h1 class="position">{{ data.name }}</h1>
<div class="bar"> <div class="bar">
<span class="status">进行中</span> <span class="status">进行中</span>
<span>已有{{data.sales || 0}}人参与</span> <span>已有{{ data.sales || 0 }}人参与</span>
</div> </div>
</div> </div>
@@ -29,7 +29,7 @@
<div class="support-head"> <div class="support-head">
<span class="label">感恩功德</span> <span class="label">感恩功德</span>
<ul class="external"> <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> </ul>
</div> </div>
<div> <div>
@@ -42,54 +42,56 @@
<fixed-bottom ref="fixedBottom"> <fixed-bottom ref="fixedBottom">
<button class="iconfont icon-home" v-if="query.no_login === '1'" @click="backHome"></button> <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> </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"> <van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" safe-area-inset-bottom :close-on-click-overlay="false" :close-on-popstate="true">
<div class="caret-spec" > <div class="caret-spec">
<div class="head"> <div class="head">
<span>参与流程： </span> <span>参与流程： </span>
<ul class="step-inline"> <ul class="step-inline">
<li :class="[ current === 0 && 'current']">选择类型</li> <li :class="[current === 0 && 'current']">选择类型</li>
<li :class="[ current === 1 && 'current']">填写信息</li> <li :class="[current === 1 && 'current']">填写信息</li>
<li :class="[ current === 2 && 'current']">参与成功</li> <li :class="[current === 2 && 'current']">参与成功</li>
</ul> </ul>
</div> </div>
<transition> <transition>
<template > <template>
<select-spec v-if="current === 0" v-model="spec_id" :number.sync="quantity" :data="data"></select-spec> <select-spec v-if="current === 0" v-model="spec_id" :number.sync="quantity" :data="data"></select-spec>
<fill-information v-if="current === 1" :data="data" @change="onDreamInfoChange"></fill-information> <fill-information v-if="current === 1" :data="data" @change="onDreamInfoChange"></fill-information>
</template> </template>
</transition> </transition>
<div class="next-group"> <div class="next-group">
<span class="total">合计：<em>￥{{priceTotal}}</em></span> <span class="total"
>合计：<em>￥{{ priceTotal }}</em></span
>
<button class="next" @click="onNextStep">下一步</button> <button class="next" @click="onNextStep">下一步</button>
</div> </div>
</div> </div>
</van-popup> </van-popup>
<!-- 随喜金额--> <!-- 随喜金额-->
<random-money v-if="showAnyAmount" :value.sync="showAnyAmount" @change="onReceiveAnyAmount"></random-money> <random-money v-if="showAnyAmount" :value.sync="showAnyAmount" @change="onReceiveAnyAmount"></random-money>
</div> </div>
</template> </template>
<script> <script>
import 'swiper/css/swiper.css' import "swiper/css/swiper.css";
import { swiper, swiperSlide } from 'vue-awesome-swiper' import { swiper, swiperSlide } from "vue-awesome-swiper";
import { getGoodsDetail, getOrderCompare, hasLogin } from "@/api"; import { getGoodsDetail, getOrderCompare, hasLogin } from "@/api";
import SelectSpec from './components/select-spec.vue' import SelectSpec from "./components/select-spec.vue";
import FillInformation from './components/fill-information.vue'; import FillInformation from "./components/fill-information.vue";
export default { export default {
components: { components: {
swiper, swiper,
swiperSlide, swiperSlide,
SelectSpec, SelectSpec,
FillInformation FillInformation,
}, },
data(){ data() {
return { return {
result: 'a', result: "a",
showAnyAmount: false, showAnyAmount: false,
paddingBottom: 0, paddingBottom: 0,
fixedBottomHeight: 0, fixedBottomHeight: 0,
@@ -98,8 +100,8 @@ export default {
checked: false, checked: false,
current: 0, current: 0,
data: null, data: null,
value: '', value: "",
spec_id: '', spec_id: "",
step: 0, step: 0,
quantity: 1, quantity: 1,
dreamInfo: null, dreamInfo: null,
@@ -108,92 +110,91 @@ export default {
autoplay: 8000, autoplay: 8000,
initialSlide: 1, initialSlide: 1,
loop: false, loop: false,
pagination: '.swiper-pagination', pagination: ".swiper-pagination",
onSlideChangeEnd: swiper => { onSlideChangeEnd: () => {},
console.log('onSlideChangeEnd', swiper.realIndex)
}
}, },
listType: 1, listType: 1,
listTypes: [ listTypes: [
{ id: 1, name: '实时', }, { id: 1, name: "实时" },
{ id: 2, name: '月榜', }, { id: 2, name: "月榜" },
{ id: 3, name: '总榜', }, { id: 3, name: "总榜" },
], ],
lTypeId: 1, lTypeId: 1,
payList: [], payList: [],
page: 1, page: 1,
noMore: false, noMore: false,
} };
}, },
computed: { computed: {
priceUnit(){ priceUnit() {
if(this.spec_id === 'is_customized'){ if (this.spec_id === "is_customized") {
return this.anyPrice; return this.anyPrice;
} }
const spec = this.data.spec.find(item => item.id === this.spec_id); const spec = this.data.spec.find((item) => item.id === this.spec_id);
if(!spec){ if (!spec) {
return 0; return 0;
} }
return Number(spec.price) return Number(spec.price);
}, },
priceTotal(){ priceTotal() {
if(this.is_auto){ if (this.is_auto) {
return (parseInt(this.priceUnit * 100, 10) * this.quantity * 30) / 100 return (parseInt(this.priceUnit * 100, 10) * this.quantity * 30) / 100;
} }
return (parseInt(this.priceUnit * 100, 10) * this.quantity) / 100; return (parseInt(this.priceUnit * 100, 10) * this.quantity) / 100;
}, },
}, },
mounted(){ mounted() {
this.getGoodsDetail('common'); this.getGoodsDetail("common");
}, },
methods: { methods: {
backHome(){ backHome() {
const { query } = this.$router.currentRoute; const { query } = this.$router.currentRoute;
const name = query.temple_id === '1' ? 'home': 'temple-home' const name = query.temple_id === "1" ? "home" : "temple-home";
this.$router.replace({ name, query: { temple_id: query.temple_id }}) this.$router.replace({ name, query: { temple_id: query.temple_id } });
}, },
async onHasLoginToNext(){ async onHasLoginToNext() {
await hasLogin(); await hasLogin();
this.showSpec = true this.showSpec = true;
}, },
// 接收随喜金额 // 接收随喜金额·
onReceiveAnyAmount(anyObj){ onReceiveAnyAmount(anyObj) {
this.anyPrice = anyObj.money; this.anyPrice = anyObj.money;
this.onToFillMeritName(); this.onToFillMeritName();
}, },
// dreamInfo: 心愿信息 // dreamInfo: 心愿信息
onDreamInfoChange(dreamInfo){ onDreamInfoChange(dreamInfo) {
this.dreamInfo = dreamInfo; this.dreamInfo = dreamInfo;
}, },
getSelectedSpec(){ getSelectedSpec() {
const spec = this.data.spec.find(spec => spec.id === this.spec_id); const spec = this.data.spec.find((spec) => spec.id === this.spec_id);
return spec || { return (
id: '', spec || {
spec_name: this.data.rule_btn || '随喜' id: "",
}; spec_name: this.data.rule_btn || "随喜",
}
);
}, },
onNextStep(){ onNextStep() {
if(!this.spec_id){ if (!this.spec_id) {
this.$toast.fail('请选择类型') this.$toast.fail("请选择类型");
return; return;
} }
if( this.spec_id === 'is_customized'){ if (this.spec_id === "is_customized") {
this.showAnyAmount = true; this.showAnyAmount = true;
return ; return;
} }
this.current += 1; this.current += 1;
if(this.current > 0){ if (this.current > 0) {
this.onToFillMeritName(); this.onToFillMeritName();
} }
}, },
onToFillMeritName(){ onToFillMeritName() {
const selectedSpec = this.getSelectedSpec(); const selectedSpec = this.getSelectedSpec();
this.$router.push({ this.$router.push({
name: 'fill-name', name: "fill-name",
query: { query: {
...this.query, ...this.query,
is_auto: this.is_auto ? 1 : 0, is_auto: this.is_auto ? 1 : 0,
@@ -204,78 +205,78 @@ export default {
subTitle: selectedSpec.spec_name, subTitle: selectedSpec.spec_name,
is_die: selectedSpec.is_die, is_die: selectedSpec.is_die,
amount: this.priceTotal, amount: this.priceTotal,
is_customized: this.spec_id === 'is_customized' ? 1 : 0, is_customized: this.spec_id === "is_customized" ? 1 : 0,
from: 'common_goods', // 标识为通用商品 from: "common_goods", // 标识为通用商品
} },
}) });
}, },
async getGoodsDetail(type){ async getGoodsDetail(type) {
const { goods_id, temple_id } = this.$route.query; const { goods_id, temple_id } = this.$route.query;
const response = await getGoodsDetail(type, goods_id, temple_id); const response = await getGoodsDetail(type, goods_id, temple_id);
this.data = response; this.data = response;
await this.getPayRecords(this.lTypeId, 1); await this.getPayRecords(this.lTypeId, 1);
this.$nextTick(() => { this.$nextTick(() => {
this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() - 50 this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() - 50;
}) });
this.wechatReady({ this.wechatReady({
...this.data.shareConfig, ...this.data.shareConfig,
link: location.href link: location.href,
}) });
}, },
// 获取更多感恩功德1 // 获取更多感恩功德1
loadMoreFn(){ loadMoreFn() {
this.page += 1; 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.page = page;
this.lTypeId = lTypeId; this.lTypeId = lTypeId;
const res = await getOrderCompare(this.query.temple_id, this.page, this.lTypeId, this.query.goods_id, this.query.goods_type ); const res = await getOrderCompare(this.query.temple_id, this.page, this.lTypeId, this.query.goods_id, this.query.goods_type);
if(this.page === 1){ if (this.page === 1) {
this.payList = []; this.payList = [];
} }
this.payList = this.payList.concat(res.list); this.payList = this.payList.concat(res.list);
this.noMore = res.list.length === 0; this.noMore = res.list.length === 0;
}, },
} },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
$lightWidth: 1.3rem; $lightWidth: 1.3rem;
.goods-detail{ .goods-detail {
.goods-content{ .goods-content {
padding-left: .3rem; padding-left: 0.3rem;
padding-right: .3rem; padding-right: 0.3rem;
* { * {
max-width: 100%; max-width: 100%;
font-size: .35rem; font-size: 0.35rem;
} }
} }
.light-container{ .light-container {
padding-left: .4rem; padding-left: 0.4rem;
padding-right: .4rem; padding-right: 0.4rem;
max-height: 10rem; max-height: 10rem;
overflow: auto; overflow: auto;
.light-wrapper{ .light-wrapper {
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
h1{ h1 {
font-size: .4rem; font-size: 0.4rem;
margin-top: .4rem; margin-top: 0.4rem;
margin-bottom: 3px; margin-bottom: 3px;
} }
.light-group{ .light-group {
img.light-icon{ img.light-icon {
width: $lightWidth; width: $lightWidth;
height: $lightWidth; height: $lightWidth;
vertical-align: top; vertical-align: top;
} }
span{ span {
font-size: .4rem; font-size: 0.4rem;
display: block; display: block;
text-align: center; text-align: center;
padding-top: .3rem; padding-top: 0.3rem;
} }
} }
.van-swipe__indicators { .van-swipe__indicators {
@@ -292,218 +293,217 @@ $lightWidth: 1.3rem;
} }
} }
.light-size, .light-size,
.light-count{ .light-count {
font-size: .4rem; font-size: 0.4rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: .6rem; margin-top: 0.6rem;
align-items: center; align-items: center;
margin-bottom: .65rem; margin-bottom: 0.65rem;
span{ span {
color: black; color: black;
opacity: 1; opacity: 1;
} }
} }
.light-size{ .light-size {
margin-top: 1.1rem; margin-top: 1.1rem;
} }
.light-count{ .light-count {
align-items: center; align-items: center;
margin-bottom: .2rem; margin-bottom: 0.2rem;
} }
} }
.support{ .support {
margin-bottom: .5rem; margin-bottom: 0.5rem;
.support-head{ .support-head {
padding: 0 .4rem; padding: 0 0.4rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 1.07rem; height: 1.07rem;
line-height: 1.07rem; line-height: 1.07rem;
.label{ .label {
font-size: .4rem; font-size: 0.4rem;
font-weight: bold; font-weight: bold;
} }
.external{ .external {
display: flex; display: flex;
align-items: center; align-items: center;
li{ li {
margin-left: .3rem; margin-left: 0.3rem;
font-size: .35rem; font-size: 0.35rem;
color: #666; color: #666;
} }
li.active{ li.active {
color: #333; color: #333;
font-weight: bold; font-weight: bold;
} }
} }
} }
} }
.swiper-container{ .swiper-container {
background: #f5f5f5; background: #f5f5f5;
.picture, img{ .picture,
img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.monk-profile{ .monk-profile {
padding: .4rem; padding: 0.4rem;
.position{ .position {
font-size: .5rem; font-size: 0.5rem;
padding-top: .2rem; padding-top: 0.2rem;
color: #19282E; color: #19282e;
line-height: 1.3; line-height: 1.3;
} }
.introduction{ .introduction {
font-size: .37rem; font-size: 0.37rem;
margin-top: .4rem; margin-top: 0.4rem;
line-height: 1.3; line-height: 1.3;
text-align: justify; text-align: justify;
color: #666; color: #666;
} }
.bar{ .bar {
margin-top: .27rem; margin-top: 0.27rem;
} }
.status{ .status {
padding: .2rem .3rem; padding: 0.2rem 0.3rem;
background: orange; background: orange;
color: white; color: white;
display: inline-block; display: inline-block;
border-radius: .04rem; border-radius: 0.04rem;
margin-right: .3rem; margin-right: 0.3rem;
font-size: .3rem; font-size: 0.3rem;
} }
span{ span {
color: #666; color: #666;
font-size: .28rem; font-size: 0.28rem;
} }
} }
.temple-info{ .temple-info {
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
padding: .3rem .4rem; padding: 0.3rem 0.4rem;
display: flex; display: flex;
align-items: center; align-items: center;
.temple-img{ .temple-img {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
border-radius: 1rem; border-radius: 1rem;
margin-right: .3rem; margin-right: 0.3rem;
} }
.temple-name{ .temple-name {
flex: 1; flex: 1;
.name{ .name {
font-size: .35rem; font-size: 0.35rem;
color: #333; color: #333;
} }
.visitor{ .visitor {
color: #666; color: #666;
font-size: .3rem; font-size: 0.3rem;
margin-top: .2rem; margin-top: 0.2rem;
display: block; display: block;
} }
} }
} }
.detail-button-group{ .detail-button-group {
text-align: center; text-align: center;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
z-index: 10; z-index: 10;
left: 0; left: 0;
right: 0; right: 0;
background: white; background: white;
border-top: .01rem solid #ddd; border-top: 0.01rem solid #ddd;
padding: .3rem; padding: 0.3rem;
}
} .merit-button {
.merit-button{
display: block; display: block;
background: $primary-color; background: $primary-color;
color: white; color: white;
height: 1.2rem; height: 1.2rem;
font-size: .37rem; font-size: 0.37rem;
min-width: 60%; min-width: 60%;
padding: 0 .53rem; padding: 0 0.53rem;
margin-top: .3rem; margin-top: 0.3rem;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
border: .01rem solid $primary-color; border: 0.01rem solid $primary-color;
border-radius: .13rem; border-radius: 0.13rem;
margin-bottom: .3rem; margin-bottom: 0.3rem;
} }
.caret-spec{ .caret-spec {
.head{ .head {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: .4rem; font-size: 0.4rem;
padding: .4rem; padding: 0.4rem;
align-items: center; align-items: center;
margin-top: .13rem; margin-top: 0.13rem;
.iconfont{ .iconfont {
font-size: .7rem; font-size: 0.7rem;
} }
.step-inline{ .step-inline {
display: inline-block; display: inline-block;
flex: 1; flex: 1;
font-size: .35rem; font-size: 0.35rem;
li{ li {
display: inline-block; display: inline-block;
& ~ li:before{ & ~ li:before {
content: '-'; content: "-";
padding: 0 .1rem; padding: 0 0.1rem;
} }
} }
li.current{ li.current {
color: $primary-color; color: $primary-color;
} }
} }
} }
.auto-donate-time{ .auto-donate-time {
padding: .4rem ; padding: 0.4rem;
margin-top: .4rem; margin-top: 0.4rem;
margin-bottom: 1rem; margin-bottom: 1rem;
.donate{ .donate {
.label{ .label {
font-size: .4rem; font-size: 0.4rem;
} }
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.time-cycle{ .time-cycle {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
.unit{ .unit {
font-size: .3rem; font-size: 0.3rem;
color: #666; color: #666;
padding-left: .2rem; padding-left: 0.2rem;
} }
} }
} }
.next-group{ .next-group {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: .2rem .4rem ; padding: 0.2rem 0.4rem;
background: white; background: white;
align-items: center; align-items: center;
border-top: 1px solid #ededed; border-top: 1px solid #ededed;
.total{ .total {
font-size: .4rem; font-size: 0.4rem;
em{ em {
color: $primary-color; color: $primary-color;
font-size: .4rem; font-size: 0.4rem;
font-weight: bold; font-weight: bold;
} }
} }
.next{ .next {
font-size: .4rem; font-size: 0.4rem;
padding: .3rem 1rem; padding: 0.3rem 1rem;
background: $primary-color; background: $primary-color;
border: 1px solid $primary-color; border: 1px solid $primary-color;
color: white; 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> <template>
<div> <div>
<van-cell-group> <van-cell-group>
<van-cell title="功德芳名" :value="person.name" is-link @click="onAction('name')"/> <van-cell title="功德芳名" :value="person.name" is-link @click="onAction('name')" />
<van-cell title="心愿" :value="dream" is-link @click="onAction('desire')" /> <van-cell title="心愿" :value="dream" is-link @click="onAction('desire')" />
</van-cell-group> </van-cell-group>
<van-popup v-model="showDialog" position="bottom" safe-area-inset-bottom style="min-height: 50vh"> <van-popup v-model="showDialog" position="bottom" safe-area-inset-bottom style="min-height: 50vh">
<div class="add-merit-name" v-if="actionName === 'name'"> <div class="add-merit-name" v-if="actionName === 'name'">
<h3 class="title">功德芳名</h3> <h3 class="title">功德芳名</h3>
<div class="add-name"> <div class="add-name">
<input class="input" type="text" v-model="name" placeholder="请输入功德主姓名"> <input class="input" type="text" v-model="name" placeholder="请输入功德主姓名" />
<button class="btn" @click="addName">添加</button> <button class="btn" @click="addName">添加</button>
</div> </div>
<div class="name-group"> <div class="name-group">
<span class="name" v-for="(name, index) in names" :key="name.id" @click="onSelectName(name)"> <span class="name" v-for="(name, index) in names" :key="name.id" @click="onSelectName(name)">
{{name.name}} {{ name.name }}
<i class="iconfont icon-biaodankongjianshanchu" @click.stop="onDeleteName(name, index)"></i> <i class="iconfont icon-biaodankongjianshanchu" @click.stop="onDeleteName(name, index)"></i>
</span> </span>
</div> </div>
@@ -23,7 +23,7 @@
<h3 class="title">心愿</h3> <h3 class="title">心愿</h3>
<div class="desire-input"> <div class="desire-input">
<textarea class="desire-textarea" v-model="dream" type="text" maxlength="50" placeholder="请输入您的心愿" /> <textarea class="desire-textarea" v-model="dream" type="text" maxlength="50" placeholder="请输入您的心愿" />
<span>{{dream.length}}/50</span> <span>{{ dream.length }}/50</span>
</div> </div>
<div class="desire-quike"> <div class="desire-quike">
<div class="bar"> <div class="bar">
@@ -31,53 +31,53 @@
<span class="update" @click="getDreamList">换一组<i class="iconfont icon-shuaxin"></i></span> <span class="update" @click="getDreamList">换一组<i class="iconfont icon-shuaxin"></i></span>
</div> </div>
<div class="name-group"> <div class="name-group">
<span class="name" 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>
</div> </div>
<button class="confirm" @click="onConfirmDream">确认</button> <button class="confirm" @click="onConfirmDream">确认</button>
</div> </div>
</van-popup> </van-popup>
</div> </div>
</template> </template>
<script> <script>
import { getDreamList, getMeritName } from '@/api'; import { getDreamList, getMeritName } from "@/api";
export default { export default {
data(){ data() {
return { return {
checked: false, checked: false,
showDialog: false, showDialog: false,
actionName: 'name', actionName: "name",
person: {}, person: {},
name: '', name: "",
dream: '', dream: "",
desire: '', desire: "",
names: [], names: [],
dreamList: [] dreamList: [],
} };
}, },
mounted(){ mounted() {
this.getName(); this.getName();
this.getDreamList(); this.getDreamList();
}, },
methods: { methods: {
onAction(name){ onAction(name) {
this.showDialog = true; this.showDialog = true;
this.actionName = name; this.actionName = name;
}, },
onConfirmMeritName(){ onConfirmMeritName() {
this.$emit('change', { this.$emit("change", {
...this.person, ...this.person,
merit_name_id: this.person.id, merit_name_id: this.person.id,
dream: this.dream, dream: this.dream,
}) });
}, },
onSelectName(name){ onSelectName(name) {
this.person = name; this.person = name;
this.showDialog = false; this.showDialog = false;
}, },
onConfirmDream(){ onConfirmDream() {
this.showDialog = false; this.showDialog = false;
this.dream = this.desire; this.dream = this.desire;
this.onConfirmMeritName(); this.onConfirmMeritName();
@@ -88,115 +88,113 @@ export default {
this.names = data; this.names = data;
}, },
//获取心愿列表 //获取心愿列表
async getDreamList(){ async getDreamList() {
const list = await getDreamList(); const list = await getDreamList();
console.log(list)
this.dreamList = list; this.dreamList = list;
} },
} },
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.add-merit-name{ .add-merit-name {
padding: .4rem; padding: 0.4rem;
.title{ .title {
font-size: .4rem; font-size: 0.4rem;
margin-bottom: .4rem; margin-bottom: 0.4rem;
} }
.add-name{ .add-name {
display: flex; display: flex;
.input{ .input {
flex: 1; flex: 1;
height: .8rem; height: 0.8rem;
line-height: .8rem; line-height: 0.8rem;
padding-left: .3rem; padding-left: 0.3rem;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: .11rem; border-radius: 0.11rem;
font-size: .4rem; font-size: 0.4rem;
} }
.btn{ .btn {
padding: .2rem .6rem; padding: 0.2rem 0.6rem;
background: $primary-color; background: $primary-color;
color: white; color: white;
border: 1px solid $primary-color; border: 1px solid $primary-color;
font-size: .4rem; font-size: 0.4rem;
border-radius: .11rem; border-radius: 0.11rem;
margin-left: .3rem; margin-left: 0.3rem;
} }
} }
.name-group{ .name-group {
padding: .5rem 0; padding: 0.5rem 0;
span{ span {
display: inline-block; display: inline-block;
padding: .2rem .3rem; padding: 0.2rem 0.3rem;
background: #fff; background: #fff;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: .08rem; border-radius: 0.08rem;
position: relative; position: relative;
margin-right: .4rem; margin-right: 0.4rem;
margin-bottom: .3rem; margin-bottom: 0.3rem;
font-size: .35rem; font-size: 0.35rem;
vertical-align: top; vertical-align: top;
.iconfont{ .iconfont {
position: absolute; position: absolute;
right: -.25rem; right: -0.25rem;
top: -.25rem; top: -0.25rem;
font-size: .5rem; font-size: 0.5rem;
color: red; color: red;
} }
} }
} }
.desire-input{ .desire-input {
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: .13rem; border-radius: 0.13rem;
overflow: hidden; overflow: hidden;
.desire-textarea{ .desire-textarea {
border: none; border: none;
display: block; display: block;
font-size: .35rem; font-size: 0.35rem;
width: calc(100% - .5rem); width: calc(100% - 0.5rem);
padding: .25rem; padding: 0.25rem;
height: 2rem; height: 2rem;
resize: none; resize: none;
} }
span{ span {
display: block; display: block;
text-align: right; text-align: right;
padding: .2rem; padding: 0.2rem;
font-size: .35rem; font-size: 0.35rem;
} }
} }
.desire-quike{ .desire-quike {
margin-top: 1rem; margin-top: 1rem;
.bar{ .bar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-size: .4rem; font-size: 0.4rem;
margin-bottom: .3rem; margin-bottom: 0.3rem;
.update{ .update {
font-size: .35rem; font-size: 0.35rem;
color: $primary-color; color: $primary-color;
} }
} }
.name-group{ .name-group {
padding: .1rem 0; padding: 0.1rem 0;
.name{ .name {
} }
} }
} }
.confirm{ .confirm {
background: $primary-color; background: $primary-color;
color: white; color: white;
border: 1px solid $primary-color; border: 1px solid $primary-color;
width: 3rem; width: 3rem;
padding: .3rem 0; padding: 0.3rem 0;
border-radius: .07rem; border-radius: 0.07rem;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
font-size: .4rem; font-size: 0.4rem;
} }
} }
</style> </style>
src/pages/goods-light-detail/index.vue
+222 -221
View File
@@ -1,26 +1,26 @@
<template> <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 class="swiper-container" :options="swiperOption">
<swiper-slide v-for="(cover, index) in data.details.covers" :key="index"> <swiper-slide v-for="(cover, index) in data.details.covers" :key="index">
<div style="height: 100vw;" class="picture"> <div style="height: 100vw" class="picture">
<img :src="cover" alt=""> <img :src="cover" alt="" />
</div> </div>
</swiper-slide> </swiper-slide>
</swiper> </swiper>
<div class="monk-profile"> <div class="monk-profile">
<h1 class="position">{{data.details.title}}</h1> <h1 class="position">{{ data.details.title }}</h1>
<div class="bar"> <div class="bar">
<span class="status">进行中</span> <span class="status">进行中</span>
<span>已有{{data.details.sales || 0}}人参与</span> <span>已有{{ data.details.sales || 0 }}人参与</span>
</div> </div>
</div> </div>
<!-- <div class="temple-info">--> <!-- <div class="temple-info">-->
<!-- <img class="temple-img" :src="data.temple.picture" alt="">--> <!-- <img class="temple-img" :src="data.temple.picture" alt="">-->
<!-- <div class="temple-name">--> <!-- <div class="temple-name">-->
<!-- <h4 class="name">{{data.temple.unit_name}}</h4>--> <!-- <h4 class="name">{{data.temple.unit_name}}</h4>-->
<!-- <p class="visitor">已有 <span>{{data.temple.visit}}</span> 人到访过</p>--> <!-- <p class="visitor">已有 <span>{{data.temple.visit}}</span> 人到访过</p>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<div class="divider"></div> <div class="divider"></div>
<div class="panel"> <div class="panel">
<div class="panel-head"> <div class="panel-head">
@@ -33,7 +33,7 @@
<div class="support-head"> <div class="support-head">
<span class="label">感恩功德</span> <span class="label">感恩功德</span>
<ul class="external"> <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> </ul>
</div> </div>
<div> <div>
@@ -49,13 +49,13 @@
</fixed-bottom> </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"> <van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" safe-area-inset-bottom :close-on-click-overlay="false" :close-on-popstate="true">
<div class="caret-spec" > <div class="caret-spec">
<div class="head"> <div class="head">
<span>参与流程： </span> <span>参与流程： </span>
<ul class="step-inline"> <ul class="step-inline">
<li :class="[ current === 0 && 'current']">选择类型</li> <li :class="[current === 0 && 'current']">选择类型</li>
<li :class="[ current === 1 && 'current']">填写信息</li> <li :class="[current === 1 && 'current']">填写信息</li>
<li :class="[ current === 2 && 'current']">参与成功</li> <li :class="[current === 2 && 'current']">参与成功</li>
</ul> </ul>
</div> </div>
<transition> <transition>
@@ -68,8 +68,8 @@
<van-grid :border="false" class="home-grid-nav" column-num="4"> <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)"> <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']"> <div class="light" :class="[currentLight.id === nav.id && 'current-light']">
<img :src="nav.picture" class="light-icon" /> <img :src="nav.picture" class="light-icon" />
<span class="light-name">{{nav.name}}</span> <span class="light-name">{{ nav.name }}</span>
</div> </div>
</van-grid-item> </van-grid-item>
</van-grid> </van-grid>
@@ -79,8 +79,8 @@
</div> </div>
<div class="light-size"> <div class="light-size">
<span>灯型</span> <span>灯型</span>
<van-radio-group v-model="currentLightSize" direction="horizontal"> <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 :name="size.id" v-for="size in currentLight.children" :key="size.id" shape="square">{{ size.name }}</van-radio>
</van-radio-group> </van-radio-group>
</div> </div>
<div class="light-count"> <div class="light-count">
@@ -90,28 +90,30 @@
</div> </div>
</transition> </transition>
<div class="next-group"> <div class="next-group">
<span class="total">合计：<em>￥{{totalPrice}}</em></span> <span class="total"
>合计：<em>￥{{ totalPrice }}</em></span
>
<button class="next" @click="onNextStep">下一步</button> <button class="next" @click="onNextStep">下一步</button>
</div> </div>
</div> </div>
</van-popup> </van-popup>
<!-- 随喜金额--> <!-- 随喜金额-->
<random-money v-if="showAnyAmount" :value.sync="showAnyAmount" @change="onReceiveAnyAmount"></random-money> <random-money v-if="showAnyAmount" :value.sync="showAnyAmount" @change="onReceiveAnyAmount"></random-money>
</div> </div>
</template> </template>
<script> <script>
import 'swiper/css/swiper.css' import "swiper/css/swiper.css";
import { swiper, swiperSlide } from 'vue-awesome-swiper' import { swiper, swiperSlide } from "vue-awesome-swiper";
import { getGoodsLightDetail, getOrderCompare, hasLogin } from "@/api"; import { getGoodsLightDetail, getOrderCompare, hasLogin } from "@/api";
export default { export default {
components: { components: {
swiper, swiper,
swiperSlide, swiperSlide,
}, },
data(){ data() {
return { return {
result: [], result: [],
showAnyAmount: false, showAnyAmount: false,
@@ -122,8 +124,8 @@ export default {
checked: false, checked: false,
current: 0, current: 0,
data: null, data: null,
value: '', value: "",
spec_id: '', spec_id: "",
step: 0, step: 0,
dreamInfo: null, dreamInfo: null,
anyPrice: 0, // 随喜金额 anyPrice: 0, // 随喜金额
@@ -131,16 +133,16 @@ export default {
autoplay: 8000, autoplay: 8000,
initialSlide: 1, initialSlide: 1,
loop: false, loop: false,
pagination: '.swiper-pagination', pagination: ".swiper-pagination",
onSlideChangeEnd: swiper => { onSlideChangeEnd: (swiper) => {
console.log('onSlideChangeEnd', swiper.realIndex) console.log("onSlideChangeEnd", swiper.realIndex);
} },
}, },
listType: 1, listType: 1,
listTypes: [ listTypes: [
{ id: 1, name: '实时', }, { id: 1, name: "实时" },
{ id: 2, name: '月榜', }, { id: 2, name: "月榜" },
{ id: 3, name: '总榜', }, { id: 3, name: "总榜" },
], ],
page: 1, page: 1,
payList: [], payList: [],
@@ -149,77 +151,77 @@ export default {
currentLightSize: 53, currentLightSize: 53,
buy_quantity: 1, // 购买数量 buy_quantity: 1, // 购买数量
noMore: false, noMore: false,
} };
}, },
computed: { computed: {
lightSize(){ lightSize() {
const { currentLight, currentLightSize } = this; const { currentLight, currentLightSize } = this;
if(!this.currentLightSize) return 0; if (!this.currentLightSize) return 0;
return currentLight.children.find(item => item.id === currentLightSize); return currentLight.children.find((item) => item.id === currentLightSize);
}, },
lights(){ lights() {
const data = this.data; const data = this.data;
if(!data) return []; if (!data) return [];
const { goods } = data; const { goods } = data;
const sliceNumber = 16; const sliceNumber = 16;
const len = Math.ceil(goods.length / sliceNumber); const len = Math.ceil(goods.length / sliceNumber);
const lights = []; const lights = [];
for(let i = 0; i < len; i++){ for (let i = 0; i < len; i++) {
lights.push(goods.slice(sliceNumber * i, i * sliceNumber + sliceNumber)) lights.push(goods.slice(sliceNumber * i, i * sliceNumber + sliceNumber));
} }
return lights; return lights;
}, },
totalPrice(){ totalPrice() {
if(!this.lightSize) return 0; if (!this.lightSize) return 0;
return this.lightSize.price * this.buy_quantity return this.lightSize.price * this.buy_quantity;
} },
}, },
mounted(){ mounted() {
this.getGoodsLightDetail('common'); this.getGoodsLightDetail("common");
}, },
methods: { methods: {
backHome(){ backHome() {
const { query } = this.$router.currentRoute; const { query } = this.$router.currentRoute;
const name = query.temple_id === '1' ? 'home': 'temple-home' const name = query.temple_id === "1" ? "home" : "temple-home";
this.$router.replace({ name, query: { temple_id: query.temple_id }}) this.$router.replace({ name, query: { temple_id: query.temple_id } });
}, },
async onLightAction(){ async onLightAction() {
await hasLogin(); await hasLogin();
this.showSpec = true this.showSpec = true;
}, },
// 选择供灯种类 // 选择供灯种类
onSelectLight(light){ onSelectLight(light) {
this.currentLight = light; this.currentLight = light;
this.currentLightSize = light.children[0].id; this.currentLightSize = light.children[0].id;
}, },
// 接收随喜金额 // 接收随喜金额
onReceiveAnyAmount(anyObj){ onReceiveAnyAmount(anyObj) {
this.anyPrice = anyObj.money; this.anyPrice = anyObj.money;
this.onToFillMeritName(); this.onToFillMeritName();
}, },
// dreamInfo: 心愿信息 // dreamInfo: 心愿信息
onDreamInfoChange(dreamInfo){ onDreamInfoChange(dreamInfo) {
this.dreamInfo = dreamInfo; this.dreamInfo = dreamInfo;
}, },
onNextStep(){ onNextStep() {
if(!this.currentLightSize){ if (!this.currentLightSize) {
this.$toast.fail('请选择灯型') this.$toast.fail("请选择灯型");
return; return;
} }
this.current += 1; this.current += 1;
if(this.current > 0){ if (this.current > 0) {
this.onToFillMeritName(); this.onToFillMeritName();
} }
}, },
// 获取更多感恩功德1 // 获取更多感恩功德1
loadMoreFn(){ loadMoreFn() {
this.page += 1; this.page += 1;
this.getPayRecords({id: this.listType}, this.page, 10) this.getPayRecords({ id: this.listType }, this.page, 10);
}, },
onToFillMeritName(){ onToFillMeritName() {
this.$router.push({ this.$router.push({
name: 'fill-name', name: "fill-name",
query: { query: {
...this.query, ...this.query,
goods_id: this.currentLight.id, goods_id: this.currentLight.id,
@@ -227,102 +229,102 @@ export default {
friendly_time: this.number, friendly_time: this.number,
quantity: this.buy_quantity, quantity: this.buy_quantity,
title: this.data.details.title, title: this.data.details.title,
subTitle: this.currentLight.name + '：'+this.lightSize.name, subTitle: this.currentLight.name + "：" + this.lightSize.name,
amount: this.totalPrice, amount: this.totalPrice,
is_die: this.currentLight.is_die, 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 { goods_id, temple_id } = this.$route.query;
const response = await getGoodsLightDetail(type, goods_id, temple_id); const response = await getGoodsLightDetail(type, goods_id, temple_id);
this.data = response; this.data = response;
this.currentLight = response.goods[0]; this.currentLight = response.goods[0];
this.currentLightSize = this.currentLight.children[0].id this.currentLightSize = this.currentLight.children[0].id;
await this.getPayRecords({ id: 1}, 1); await this.getPayRecords({ id: 1 }, 1);
this.$nextTick(() => { this.$nextTick(() => {
this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() - 50 this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() - 50;
}) });
this.wechatReady({ this.wechatReady({
...this.data.shareConfig, ...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.listType = lType.id;
this.page = page; this.page = page;
const res = await getOrderCompare(this.query.temple_id, this.page, this.listType, '', this.query.goods_type, size ); const res = await getOrderCompare(this.query.temple_id, this.page, this.listType, "", this.query.goods_type, size);
if(this.page === 1){ if (this.page === 1) {
this.payList = []; this.payList = [];
} }
this.payList = this.payList.concat(res.list); this.payList = this.payList.concat(res.list);
this.noMore = res.list.length < 3; this.noMore = res.list.length < 3;
}, },
} },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
$lightWidth: 1.15rem; $lightWidth: 1.15rem;
.goods-detail{ .goods-detail {
.goods-content{ .goods-content {
padding-left: .3rem; padding-left: 0.3rem;
padding-right: .3rem; padding-right: 0.3rem;
* { * {
max-width: 100%; max-width: 100%;
font-size: .35rem; font-size: 0.35rem;
} }
} }
.light-container{ .light-container {
padding-left: .4rem; padding-left: 0.4rem;
padding-right: .4rem; padding-right: 0.4rem;
max-height: 13rem; max-height: 13rem;
overflow: auto; overflow: auto;
.light-wrapper{ .light-wrapper {
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
h1{ h1 {
font-size: .35rem; font-size: 0.35rem;
margin-top: .4rem; margin-top: 0.4rem;
margin-bottom: .5rem; margin-bottom: 0.5rem;
} }
.light-group{ .light-group {
.light{ .light {
padding: 5px; padding: 5px;
text-align: center; text-align: center;
border: 1px solid transparent; border: 1px solid transparent;
} }
.van-swipe{ .van-swipe {
padding-bottom: .5rem; padding-bottom: 0.5rem;
} }
.van-grid-item__content{ .van-grid-item__content {
padding-bottom: 0; padding-bottom: 0;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
.current-light{ .current-light {
border: 1px solid $primary-color; border: 1px solid $primary-color;
border-radius: 4px; border-radius: 4px;
span{ span {
color: $primary-color; color: $primary-color;
} }
} }
img.light-icon{ img.light-icon {
width: $lightWidth; width: $lightWidth;
height: $lightWidth; height: $lightWidth;
vertical-align: top; vertical-align: top;
} }
span{ span {
font-size: .35rem; font-size: 0.35rem;
display: block; display: block;
text-align: center; text-align: center;
padding-top: .3rem; padding-top: 0.3rem;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.van-grid-item__content{ .van-grid-item__content {
padding-top: .1rem; padding-top: 0.1rem;
} }
} }
.van-swipe__indicators { .van-swipe__indicators {
@@ -339,231 +341,230 @@ $lightWidth: 1.15rem;
} }
} }
.light-size, .light-size,
.light-count{ .light-count {
font-size: .4rem; font-size: 0.4rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
span{ span {
color: black; color: black;
opacity: 1; opacity: 1;
} }
} }
.light-size{ .light-size {
margin-top: .4rem; margin-top: 0.4rem;
margin-bottom: .4rem; margin-bottom: 0.4rem;
.van-radio__label{ .van-radio__label {
margin-left: 4px; margin-left: 4px;
font-size: .35rem; font-size: 0.35rem;
} }
.van-radio__icon .van-icon{ .van-radio__icon .van-icon {
width: .45rem; width: 0.45rem;
height: .45rem; height: 0.45rem;
line-height: .45rem; line-height: 0.45rem;
} }
.van-radio__icon--checked .van-icon{ .van-radio__icon--checked .van-icon {
background: #CF9E3B; background: #cf9e3b;
border-color: #CF9E3B; border-color: #cf9e3b;
} }
} }
.light-count{ .light-count {
align-items: center; align-items: center;
margin-bottom: .5rem; margin-bottom: 0.5rem;
} }
} }
.support{ .support {
margin-bottom: .5rem; margin-bottom: 0.5rem;
.support-head{ .support-head {
padding: 0 .4rem; padding: 0 0.4rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 1.07rem; height: 1.07rem;
line-height: 1.07rem; line-height: 1.07rem;
.label{ .label {
font-size: .4rem; font-size: 0.4rem;
font-weight: bold; font-weight: bold;
} }
.external{ .external {
display: flex; display: flex;
align-items: center; align-items: center;
li{ li {
margin-left: .3rem; margin-left: 0.3rem;
font-size: .35rem; font-size: 0.35rem;
color: #666; color: #666;
} }
li.active{ li.active {
color: #333; color: #333;
font-weight: bold; font-weight: bold;
} }
} }
} }
} }
.swiper-container{ .swiper-container {
background: #f5f5f5; background: #f5f5f5;
.picture, img{ .picture,
img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.monk-profile{ .monk-profile {
padding: .4rem; padding: 0.4rem;
.position{ .position {
font-size: .5rem; font-size: 0.5rem;
padding-top: .2rem; padding-top: 0.2rem;
color: #19282E; color: #19282e;
line-height: 1.3; line-height: 1.3;
} }
.introduction{ .introduction {
font-size: .37rem; font-size: 0.37rem;
margin-top: .4rem; margin-top: 0.4rem;
line-height: 1.3; line-height: 1.3;
text-align: justify; text-align: justify;
color: #666; color: #666;
} }
.bar{ .bar {
margin-top: .27rem; margin-top: 0.27rem;
} }
.status{ .status {
padding: .2rem .3rem; padding: 0.2rem 0.3rem;
background: orange; background: orange;
color: white; color: white;
display: inline-block; display: inline-block;
border-radius: .04rem; border-radius: 0.04rem;
margin-right: .3rem; margin-right: 0.3rem;
font-size: .3rem; font-size: 0.3rem;
} }
span{ span {
color: #666; color: #666;
font-size: .28rem; font-size: 0.28rem;
} }
} }
.temple-info{ .temple-info {
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
padding: .3rem .4rem; padding: 0.3rem 0.4rem;
display: flex; display: flex;
align-items: center; align-items: center;
.temple-img{ .temple-img {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
border-radius: 1rem; border-radius: 1rem;
margin-right: .3rem; margin-right: 0.3rem;
} }
.temple-name{ .temple-name {
flex: 1; flex: 1;
.name{ .name {
font-size: .35rem; font-size: 0.35rem;
color: #333; color: #333;
} }
.visitor{ .visitor {
color: #666; color: #666;
font-size: .3rem; font-size: 0.3rem;
margin-top: .2rem; margin-top: 0.2rem;
display: block; display: block;
} }
} }
} }
.detail-button-group{ .detail-button-group {
text-align: center; text-align: center;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
z-index: 10; z-index: 10;
left: 0; left: 0;
right: 0; right: 0;
background: white; background: white;
border-top: .01rem solid #ddd; border-top: 0.01rem solid #ddd;
padding: .3rem; padding: 0.3rem;
}
} .merit-button {
.merit-button{
display: block; display: block;
background: $primary-color; background: $primary-color;
color: white; color: white;
height: 1.2rem; height: 1.2rem;
font-size: .37rem; font-size: 0.37rem;
min-width: 60%; min-width: 60%;
padding: 0 .53rem; padding: 0 0.53rem;
margin-top: .3rem; margin-top: 0.3rem;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
border: .01rem solid $primary-color; border: 0.01rem solid $primary-color;
border-radius: .13rem; border-radius: 0.13rem;
margin-bottom: .3rem; margin-bottom: 0.3rem;
} }
.caret-spec{ .caret-spec {
.head{ .head {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: .4rem; font-size: 0.4rem;
padding: .4rem; padding: 0.4rem;
align-items: center; align-items: center;
margin-top: .13rem; margin-top: 0.13rem;
.iconfont{ .iconfont {
font-size: .7rem; font-size: 0.7rem;
} }
.step-inline{ .step-inline {
display: inline-block; display: inline-block;
flex: 1; flex: 1;
font-size: .35rem; font-size: 0.35rem;
li{ li {
display: inline-block; display: inline-block;
& ~ li:before{ & ~ li:before {
content: '-'; content: "-";
padding: 0 .1rem; padding: 0 0.1rem;
} }
} }
li.current{ li.current {
color: $primary-color; color: $primary-color;
} }
} }
} }
.auto-donate-time{ .auto-donate-time {
padding: .4rem ; padding: 0.4rem;
margin-top: .4rem; margin-top: 0.4rem;
margin-bottom: 1rem; margin-bottom: 1rem;
.donate{ .donate {
.label{ .label {
font-size: .4rem; font-size: 0.4rem;
} }
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.time-cycle{ .time-cycle {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
.unit{ .unit {
font-size: .3rem; font-size: 0.3rem;
color: #666; color: #666;
padding-left: .2rem; padding-left: 0.2rem;
} }
} }
} }
.next-group{ .next-group {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: .2rem .4rem ; padding: 0.2rem 0.4rem;
background: white; background: white;
align-items: center; align-items: center;
border-top: 1px solid #ededed; border-top: 1px solid #ededed;
.total{ .total {
font-size: .4rem; font-size: 0.4rem;
em{ em {
color: $primary-color; color: $primary-color;
font-size: .4rem; font-size: 0.4rem;
font-weight: bold; font-weight: bold;
} }
} }
.next{ .next {
font-size: .4rem; font-size: 0.4rem;
padding: .3rem 1rem; padding: 0.3rem 1rem;
background: $primary-color; background: $primary-color;
border: 1px solid $primary-color; border: 1px solid $primary-color;
color: white; color: white;
border-radius: .1rem; border-radius: 0.1rem;
} }
} }
} }
src/pages/home.vue
+59 -61
View File
@@ -1,11 +1,11 @@
<template> <template>
<div v-if="data" class="platform_home" > <div v-if="data" class="platform_home">
<van-search v-model="value" readonly placeholder="寺院、主持、监寺" @click="onSearch" /> <van-search v-model="value" readonly placeholder="寺院、主持、监寺" @click="onSearch" />
<div class="container"> <div class="container">
<div class="swiper"> <div class="swiper">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe-item v-for="(banner, index) in data.banner_data" :key="index"> <van-swipe-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-item>
</van-swipe> </van-swipe>
</div> </div>
@@ -57,7 +57,7 @@
</div> </div>
</div> </div>
<div class="divider"></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>
</div> </div>
</template> </template>
@@ -66,13 +66,12 @@
import { getPlatformHome, getTempleIndex } from "@/api"; import { getPlatformHome, getTempleIndex } from "@/api";
export default { export default {
components: { components: {},
}, inject: ["safeAreaInsetBottom"],
inject: ['safeAreaInsetBottom'],
data() { data() {
return { return {
query: this.$route.query, query: this.$route.query,
value: '', value: "",
data: null, data: null,
mescrollDown: {}, mescrollDown: {},
mescrollUp: {}, mescrollUp: {},
@@ -83,74 +82,74 @@ export default {
this.getTempleIndex(); this.getTempleIndex();
}, },
methods: { methods: {
onLocationTo({url}){ onLocationTo({ url }) {
if(url){ if (url) {
location.href = url; location.href = url;
} }
}, },
mescrollInit(mescroll){ mescrollInit(mescroll) {
this.mescroll = mescroll; this.mescroll = mescroll;
}, },
onToGoods(goods){ onToGoods(goods) {
this.$router.push({ this.$router.push({
name: 'goods-detail', name: "goods-detail",
query: { query: {
goods_id: goods.goods_id, goods_id: goods.goods_id,
temple_id: goods.temple_id, temple_id: goods.temple_id,
goods_type: goods.goods_type goods_type: goods.goods_type,
} },
}) });
}, },
locationTo(nav) { locationTo(nav) {
// nav.type: 0外部链接，1日行一善商品，2添砖加瓦类商品，3通用商品，4功德箱，5进展动态 // nav.type: 0外部链接，1日行一善商品，2添砖加瓦类商品，3通用商品，4功德箱，5进展动态
if(nav.icon_type === 6){ if (nav.icon_type === 6) {
this.$router.push({ this.$router.push({
name: 'goods-light-detail', name: "goods-light-detail",
query: { query: {
goods_type: nav.goods_type, goods_type: nav.goods_type,
temple_id: nav.temple_id, temple_id: nav.temple_id,
} },
}) });
return return;
} }
if(nav.icon_type === 0){ if (nav.icon_type === 0) {
window.location.href = nav.url; window.location.href = nav.url;
return return;
} }
if(nav.icon_type === 5){ if (nav.icon_type === 5) {
this.$router.push({ this.$router.push({
name: 'buddha-detail', name: "buddha-detail",
query: { id: nav.dynamic_id } query: { id: nav.dynamic_id },
}) });
return return;
} }
if(nav.icon_type === 4){ if (nav.icon_type === 4) {
this.$router.push({ this.$router.push({
name: 'merit-box' name: "merit-box",
}) });
return return;
} }
if(nav.icon_type === 3){ if (nav.icon_type === 3) {
this.$router.push({ this.$router.push({
name: 'goods-detail', name: "goods-detail",
query: { query: {
goods_type: nav.goods_type, goods_type: nav.goods_type,
goods_id: nav.goods_id , goods_id: nav.goods_id,
temple_id: nav.temple_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({ this.$router.push({
name: 'everyday-donation', name: "everyday-donation",
query: { query: {
goods_type: nav.goods_type, goods_type: nav.goods_type,
goods_id: nav.goods_id , goods_id: nav.goods_id,
temple_id: nav.temple_id, temple_id: nav.temple_id,
}, },
}); });
@@ -159,27 +158,26 @@ export default {
async getTempleIndex() { async getTempleIndex() {
const { agent_id } = this.$route.query; const { agent_id } = this.$route.query;
let res; let res;
if(agent_id){ if (agent_id) {
res = await getPlatformHome(agent_id) res = await getPlatformHome(agent_id);
} else { } else {
res = await getTempleIndex(this.query.temple_id); res = await getTempleIndex(this.query.temple_id);
} }
this.data = res; 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); this.data.icon_data = this.sliceNav(res.icon_data);
console.log(123, this.data)
setTimeout(() => { setTimeout(() => {
document.title = '自在福田'; document.title = "自在福田";
}, 10) }, 10);
}, },
onMoreProcess() { onMoreProcess() {
this.$router.push({ this.$router.push({
name: 'buddha-activity', name: "buddha-activity",
}); });
}, },
onSearch() { onSearch() {
this.$router.push({ this.$router.push({
name: 'search', name: "search",
query: {}, query: {},
}); });
}, },
@@ -204,13 +202,13 @@ export default {
} }
.merit-rank-container { .merit-rank-container {
} }
.van-search{ .van-search {
padding: .4rem padding: 0.4rem;
} }
.goods-panel-body{ .goods-panel-body {
.buddha-process{ .buddha-process {
padding-left: .4rem; padding-left: 0.4rem;
padding-right: .4rem; padding-right: 0.4rem;
} }
} }
.container { .container {
@@ -228,7 +226,7 @@ export default {
} }
} }
.swiper { .swiper {
margin-bottom: 0 margin-bottom: 0;
} }
.van-notice-bar { .van-notice-bar {
border: 1px solid #e6b759; border: 1px solid #e6b759;
@@ -254,7 +252,7 @@ export default {
} }
} }
.van-swipe__indicators { .van-swipe__indicators {
bottom: .1rem; bottom: 0.1rem;
.van-swipe__indicator { .van-swipe__indicator {
width: 20px; width: 20px;
height: 2px; height: 2px;
@@ -264,20 +262,20 @@ export default {
background: $primary-color; background: $primary-color;
} }
} }
.panel{ .panel {
padding-bottom: 0; padding-bottom: 0;
} }
} }
.merit-scroll-container{ .merit-scroll-container {
margin: 0 .4rem; margin: 0 0.4rem;
height: 3.39rem; height: 3.39rem;
overflow-x: auto; overflow-x: auto;
.merit-scroll-wrapper{ .merit-scroll-wrapper {
white-space: nowrap; white-space: nowrap;
} }
} }
.merit-group{ .merit-group {
padding-bottom: .4rem; padding-bottom: 0.4rem;
} }
.merit { .merit {
width: 3.39rem; width: 3.39rem;
src/pages/merit-box/index.vue
+176 -189
View File
@@ -1,272 +1,259 @@
<template> <template>
<div class="merit-box" :style="{height: root.minHeight + 'px'}"> <div class="merit-box" :style="{ height: root.minHeight + 'px' }">
<van-nav-bar <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{ backgroundColor: $route.meta.navBarBackgroundColor }" />
left-arrow <div class="merit-container">
v-if="$route.meta.showNavBar" <img class="goods-picture" :style="{ width: width + 'px', height: width / 2 + 'px' }" :src="info.merit_box_cover" alt="" />
:title="$route.meta.title" <div class="merit-rank-container">
@click-left="$router.back()" <div class="head">
:style="{ backgroundColor: $route.meta.navBarBackgroundColor }" <span class="title">
/> {{ info.merit_box_title }}
<div class="merit-container"> <b class="sub-title">{{ info.unit_name }}</b>
<img class="goods-picture" :style="{width: width + 'px', height: width / 2 + 'px'}" :src="info.merit_box_cover" alt=""> </span>
<div class="merit-rank-container"> <div class="list">
<div class="head"> <span :class="[n.id === type_id && 'current']" v-for="(n, index) in nav" :key="n.id" @click="onListBy(n, index)">{{ n.title }}</span>
<span class="title"> </div>
{{info.merit_box_title}} </div>
<b class="sub-title">{{info.unit_name}}</b> <div class="body" ref="swiper">
</span> <scroll-view ref="scrollView" :height="containerHeight - 20" pulldown pullup @pulldown="refresh" @pullup="loadMoreFn">
<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> <user-merit v-for="(merit, _index) in list" :key="_index" :data="merit"></user-merit>
<div class="loadmore" v-if="!noMore"> <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>
<div class="loadmore" v-if="noMore"> <div class="loadmore" v-if="noMore">没有更多了</div>
没有更多了
</div>
</scroll-view> </scroll-view>
</div> </div>
</div> </div>
<div class="merit-button-group" :style="{bottom: tabHeight + 'px'}"> <div class="merit-button-group" :style="{ bottom: tabHeight + 'px' }">
<button class="iconfont icon-arrow-left" @click="back"></button> <button class="iconfont icon-arrow-left" @click="back"></button>
<button class="merit-button" @click="openBox">随喜功德</button> <button class="merit-button" @click="openBox">随喜功德</button>
</div> </div>
</div> </div>
<random-money :value.sync="randVisible" @change="onRandNext"></random-money> <random-money :value.sync="randVisible" @change="onRandNext"></random-money>
</div> </div>
</template> </template>
<script> <script>
import { getMeritBox, } from '@/api'; import { getMeritBox } from "@/api";
import { mapState } from 'vuex'; import { mapState } from "vuex";
export default { export default {
inject: ['screenHeight', 'root'], inject: ["screenHeight", "root"],
data(){ data() {
const { query } = this.$route; const { query } = this.$route;
return { return {
query, query,
width: 0, width: 0,
randVisible: false, randVisible: false,
type_id: 1, type_id: 1,
page: 1, page: 1,
nav: [ nav: [
{ id: 1, title: '实时', page: 1, size: 10, list: [], }, { id: 1, title: "实时", page: 1, size: 10, list: [] },
{ id: 2, title: '月榜', page: 1, size: 10, list: [], }, { id: 2, title: "月榜", page: 1, size: 10, list: [] },
{ id: 3, title: '总榜', page: 1, size: 10, list: [], }, { id: 3, title: "总榜", page: 1, size: 10, list: [] },
], ],
containerHeight: 0, containerHeight: 0,
tabHeight: 0, tabHeight: 0,
info: {}, info: {},
list: [], list: [],
loading: true, loading: true,
total: 0, total: 0,
} };
}, },
computed: { computed: {
...mapState(['temple_merit_id']), ...mapState(["temple_merit_id"]),
noMore(){ noMore() {
return this.list.length === this.total; return this.list.length === this.total;
},
},
mounted() {
this.width = window.innerWidth;
this.getMeritBox();
if (this.query.open_box) {
this.openBox();
} }
}, },
mounted(){ methods: {
this.width = window.innerWidth; back() {
this.getMeritBox(); if (this.query.fromPathName) {
if(this.query.open_box){ this.$router.replace({ name: this.query.fromPathName, query: { temple_id: this.query.temple_id } });
this.openBox()
}
},
methods: {
back(){
if(this.query.fromPathName){
this.$router.replace({ name: this.query.fromPathName,query: { temple_id: this.query.temple_id } })
return; 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(){ openBox() {
this.randVisible = true this.randVisible = true;
}, },
async getMeritBox(){ async getMeritBox() {
const res = await getMeritBox(this.temple_merit_id || this.query.temple_id || '1', this.type_id, this.page, 10); const res = await getMeritBox(this.temple_merit_id || this.query.temple_id || "1", this.type_id, this.page, 10);
// this.loading = false; // this.loading = false;
if(this.page === 1){ if (this.page === 1) {
this.list = []; this.list = [];
} }
this.info = res.merit_box_info; this.info = res.merit_box_info;
this.total = res.merit_box_order.total; this.total = res.merit_box_order.total;
this.list = this.list.concat(res.merit_box_order.list) this.list = this.list.concat(res.merit_box_order.list);
const query = this.$utils.setSearchParamsFromObj({ ...this.$route.query, temple_id: this.info.temple_id }); const query = this.$utils.setSearchParamsFromObj({ ...this.$route.query, temple_id: this.info.temple_id });
if(!this.$route.query.temple_id){ if (!this.$route.query.temple_id) {
history.pushState('', '', location.href + query) history.pushState("", "", location.href + query);
} }
this.wechatReady({ this.wechatReady({
title: `${this.info.unit_name} - 在线功德箱 | 已有 ${this.total} 人广种福田，布施增福慧，转发即功德！`, title: `${this.info.unit_name} - 在线功德箱 | 已有 ${this.total} 人广种福田，布施增福慧，转发即功德！`,
desc: '随缘布施，广种福田，喜结善缘', desc: "随缘布施，广种福田，喜结善缘",
imgUrl: 'https://temple-h5.oss-cn-hangzhou.aliyuncs.com/uploads/common/merit_box.png', imgUrl: "https://temple-h5-new.oss-cn-hangzhou.aliyuncs.com/uploads/common/merit_box.png",
link: location.href link: location.href,
}) });
this.$nextTick(() => { this.$nextTick(() => {
this.containerHeight = this.$refs.swiper.offsetHeight; this.containerHeight = this.$refs.swiper.offsetHeight;
this.$refs.scrollView.refresh(); this.$refs.scrollView.refresh();
}) });
},
}, onListBy(n) {
onListBy(n){
this.type_id = n.id; this.type_id = n.id;
this.page = 1; this.page = 1;
this.total = 0; this.total = 0;
this.list = []; this.list = [];
this.getMeritBox(); this.getMeritBox();
}, },
loadMoreFn(){ loadMoreFn() {
if(this.noMore) return; if (this.noMore) return;
this.loading = true; this.loading = true;
this.page += 1; this.page += 1;
this.getMeritBox(); this.getMeritBox();
}, },
refresh(){ refresh() {
console.log('refresh')
this.page = 1; this.page = 1;
this.total = 0; this.total = 0;
this.getMeritBox(); this.getMeritBox();
}, },
onRandNext(obj){ onRandNext(obj) {
this.$router.push({ this.$router.push({
name: 'pay', name: "pay",
query: { query: {
...this.$route.query, ...this.$route.query,
title: '功德箱/供奉', title: "功德箱/供奉",
subTitle: '随喜', subTitle: "随喜",
amount: obj.money, amount: obj.money,
quantity: 1, quantity: 1,
from: 'meritBox', // 标识为功德箱 from: "meritBox", // 标识为功德箱
} },
}) });
} },
} },
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.merit-box{ .merit-box {
position: relative; position: relative;
height: 100%; height: 100%;
.goods-picture{ .goods-picture {
vertical-align: top; vertical-align: top;
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
right: 0; right: 0;
} }
.merit-container{ .merit-container {
height: 100%; height: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.merit-rank-container{ .merit-rank-container {
background: white; background: white;
position: relative; position: relative;
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
margin-top: 5rem; margin-top: 5rem;
height: 61vh; height: 61vh;
.head{ .head {
padding: .53rem .4rem; padding: 0.53rem 0.4rem;
padding-bottom: .13rem; padding-bottom: 0.13rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.title{ .title {
font-size: .43rem; font-size: 0.43rem;
color: #222222; color: #222222;
.sub-title{ .sub-title {
font-size: .35rem; font-size: 0.35rem;
margin-left: .4rem; margin-left: 0.4rem;
display: inline-block; display: inline-block;
color: #666; color: #666;
} }
} }
.list{ .list {
display: flex; display: flex;
span{ span {
font-size: .37rem; font-size: 0.37rem;
color: #999999; color: #999999;
display: inline-block; display: inline-block;
margin-left: .4rem; margin-left: 0.4rem;
border-bottom: .03rem solid transparent; border-bottom: 0.03rem solid transparent;
padding-bottom: .13rem; padding-bottom: 0.13rem;
} }
span.current{ span.current {
color: #222; color: #222;
border-bottom-color: rgb(168, 28, 28); border-bottom-color: rgb(168, 28, 28);
} }
} }
} }
.body{ .body {
height: calc(100% - 1.16rem); height: calc(100% - 1.16rem);
overflow: hidden; overflow: hidden;
.swiper-container{ .swiper-container {
height: 100%; height: 100%;
} }
} }
} }
.merit-button-group{ .merit-button-group {
text-align: center; text-align: center;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
left: 0; left: 0;
right: 0; right: 0;
background: white; background: white;
padding-top: .2rem; padding-top: 0.2rem;
padding-bottom: calc(.2rem ); padding-bottom: calc(0.2rem);
border-top: .01rem solid #ddd; border-top: 0.01rem solid #ddd;
display: flex; display: flex;
padding-left: .4rem; padding-left: 0.4rem;
padding-right: .4rem; padding-right: 0.4rem;
.iconfont{ .iconfont {
width: 20%; width: 20%;
background: white; background: white;
border: 1px solid #ddd; border: 1px solid #ddd;
margin-right: .4rem; margin-right: 0.4rem;
border-radius: 4px; border-radius: 4px;
font-size: .6rem; font-size: 0.6rem;
} }
.merit-button{ .merit-button {
//display: inline-block; //display: inline-block;
//vertical-align: top; //vertical-align: top;
//background: $primary-color; //background: $primary-color;
//color: white; //color: white;
//height: 1.4rem; //height: 1.4rem;
//font-size: .37rem; //font-size: .37rem;
//padding: 0 2rem; //padding: 0 2rem;
//border: .01rem solid $primary-color; //border: .01rem solid $primary-color;
//border-radius: $btn-border-radius; //border-radius: $btn-border-radius;
//flex: 1; //flex: 1;
flex: 1; flex: 1;
font-size: .4rem; font-size: 0.4rem;
padding: .3rem 1rem; padding: 0.3rem 1rem;
background: $primary-color; background: $primary-color;
border: 1px solid $primary-color; border: 1px solid $primary-color;
color: white; color: white;
border-radius: .1rem; border-radius: 0.1rem;
} }
} }
} }
</style> </style>
src/pages/mescroll-test/index.vue
+63 -59
View File
@@ -3,110 +3,114 @@
<!--mescroll滚动区域的基本结构--> <!--mescroll滚动区域的基本结构-->
<mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit"> <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> </mescroll-vue>
</div> </div>
</template> </template>
<script> <script>
// 引入mescroll的vue组件 // 引入mescroll的vue组件
import MescrollVue from 'mescroll.js/mescroll.vue' import MescrollVue from "mescroll.js/mescroll.vue";
const axios = { const axios = {
current: 0, current: 0,
get(){ get() {
return new Promise((resolve) => { return new Promise((resolve) => {
this.current += 1; this.current += 1;
setTimeout(() => { setTimeout(() => {
console.log(this.current) if (this.current === 3) {
if(this.current === 3){
resolve({ resolve({
data: [] data: [],
}) });
return return;
} }
resolve({ resolve({
data: Array.from(Array(10), () => Math.random() * 100) data: Array.from(Array(10), () => Math.random() * 100),
}) });
}, Math.random() * 1000) }, Math.random() * 1000);
}) });
} },
} };
export default { export default {
components: { components: {
MescrollVue // 注册mescroll组件 MescrollVue, // 注册mescroll组件
}, },
data () { data() {
return { return {
data: [], data: [],
mescroll: null, // mescroll实例对象 mescroll: null, // mescroll实例对象
mescrollDown:{}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了) mescrollDown: {}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
mescrollUp: { // 上拉加载的配置. mescrollUp: {
// 上拉加载的配置.
callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { } callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
//以下是一些常用的配置,当然不写也可以的. //以下是一些常用的配置,当然不写也可以的.
page: { page: {
num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始 num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
size: 10 //每页数据条数,默认10 size: 10, //每页数据条数,默认10
}, },
htmlNodata: '<p class="upwarp-nodata">-- END --</p>', htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据; 避免列表数据过少(比如只有一条数据),显示无更多数据会不好看这就是为什么无更多数据有时候不显示的原因 noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据; 避免列表数据过少(比如只有一条数据),显示无更多数据会不好看这就是为什么无更多数据有时候不显示的原因
toTop: { toTop: {
//回到顶部按钮 //回到顶部按钮
src: "./static/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图 src: "./static/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图
offset: 1000 //列表滚动1000px才显示回到顶部按钮 offset: 1000, //列表滚动1000px才显示回到顶部按钮
}, },
empty: { empty: {
//列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示 //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
warpId: "xxid", //父布局的id (1.3.5版本支持传入dom元素) warpId: "xxid", //父布局的id (1.3.5版本支持传入dom元素)
icon: "./static/mescroll/mescroll-empty.png", //图标,默认null,支持网络图 icon: "./static/mescroll/mescroll-empty.png", //图标,默认null,支持网络图
tip: "暂无相关数据~" //提示 tip: "暂无相关数据~", //提示
} },
}, },
dataList: [] // 列表数据 dataList: [], // 列表数据
} };
}, },
beforeRouteEnter (to, from, next) { // 如果没有配置顶部按钮或isBounce,则beforeRouteEnter不用写 beforeRouteEnter(to, from, next) {
next(vm => { // 如果没有配置顶部按钮或isBounce,则beforeRouteEnter不用写
next((vm) => {
// 滚动到原来的列表位置,恢复顶部按钮和isBounce的配置 // 滚动到原来的列表位置,恢复顶部按钮和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的配置 // 记录列表滚动的位置,隐藏顶部按钮和isBounce的配置
this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave() this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave();
next() next();
}, },
methods: { methods: {
// mescroll组件初始化的回调,可获取到mescroll对象 // mescroll组件初始化的回调,可获取到mescroll对象
mescrollInit (mescroll) { mescrollInit(mescroll) {
this.mescroll = mescroll // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置 this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
}, },
// 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10 // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
upCallback (page, mescroll) { upCallback(page, mescroll) {
// 联网请求 // 联网请求
axios.get({ axios
params: { .get({
num: page.num, // 页码 params: {
size: page.size // 每页长度 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)
}) })
}).catch(() => { .then((response) => {
// 联网失败的回调,隐藏下拉刷新和上拉加载的状态; // 请求的列表数据
mescroll.endErr() 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> </script>
<style scoped> <style scoped>
@@ -117,10 +121,10 @@ export default {
bottom: 0; bottom: 0;
height: auto; height: auto;
} }
.div{ .div {
height: 40px; height: 40px;
background: red; background: red;
border: 10px solid blue; border: 10px solid blue;
margin-bottom: 10px; margin-bottom: 10px;
} }
</style> </style>
src/pages/pay-result/index.vue
+47 -47
View File
@@ -1,114 +1,114 @@
<template> <template>
<div class="pay-result"> <div class="pay-result">
<div class="cert-show"> <div class="cert-show">
<img :src="src"> <img :src="src" />
<span class="long-press">长按图片保存到手机</span> <span class="long-press">长按图片保存到手机</span>
</div> </div>
<div class="pay-info"> <div class="pay-info">
<span> <span>
<i class="iconfont icon-zhifuchenggong"></i> <i class="iconfont icon-zhifuchenggong"></i>
</span> </span>
<span>参与成功</span> <span>参与成功</span>
</div> </div>
<div class="button-group"> <div class="button-group">
<button class="detail" @click="onToOrder">查看详情</button> <button class="detail" @click="onToOrder">查看详情</button>
<button class="again" @click="onPayAgain">再结善缘</button> <button class="again" @click="onPayAgain">再结善缘</button>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data(){ data() {
return { return {
query: this.$route.query query: this.$route.query,
} };
}, },
computed: { computed: {
src(){ src() {
return `https://temple-h5.oss-cn-hangzhou.aliyuncs.com//uploads/merit/certificate/${this.query.order_id}.jpg` return `https://temple-h5-new.oss-cn-hangzhou.aliyuncs.com//uploads/merit/certificate/${this.query.order_id}.jpg`;
} },
}, },
methods: { methods: {
onToOder(){ onToOder() {
this.$router.push('/user/order') this.$router.push("/user/order");
}, },
onPayAgain(){ onPayAgain() {
// 功德箱订单再结善缘重新随喜 // 功德箱订单再结善缘重新随喜
if(this.query.from === 'meritBox'){ if (this.query.from === "meritBox") {
this.$router.replace({ name: 'merit-box', query: { temple_id: this.query.temple_id , open_box: 1}}) this.$router.replace({ name: "merit-box", query: { temple_id: this.query.temple_id, open_box: 1 } });
return return;
} }
// 佛前供灯再结善缘 // 佛前供灯再结善缘
if(this.query.from === 'goods_light'){ if (this.query.from === "goods_light") {
this.$router.replace({ this.$router.replace({
name: 'goods-light-detail', name: "goods-light-detail",
query: { query: {
goods_type: this.query.goods_type, goods_type: this.query.goods_type,
temple_id: this.query.temple_id, temple_id: this.query.temple_id,
} },
}) });
return return;
} }
const { goods_type, goods_id, temple_id, spec_ids } = this.query; 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> </script>
<style lang="scss"> <style lang="scss">
.pay-result { .pay-result {
.cert-show { .cert-show {
height: 70vh; height: 70vh;
background: #f5f5f5; background: #f5f5f5;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: .2rem; padding: 0.2rem;
position: relative; position: relative;
img{ img {
max-width: 90%; max-width: 90%;
max-height: 100%; max-height: 100%;
display: inline-block; display: inline-block;
} }
.long-press{ .long-press {
position: absolute; position: absolute;
font-size: .3rem; font-size: 0.3rem;
bottom: .1rem; bottom: 0.1rem;
color: #999; color: #999;
} }
} }
.pay-info{ .pay-info {
text-align: center; text-align: center;
padding: .4rem 0; padding: 0.4rem 0;
padding-top: 1rem; padding-top: 1rem;
font-size: .5rem; font-size: 0.5rem;
color: #888; color: #888;
.iconfont{ .iconfont {
color: #07c160; color: #07c160;
font-size: 1rem; font-size: 1rem;
vertical-align: middle; vertical-align: middle;
margin-right: .3rem; margin-right: 0.3rem;
} }
} }
.button-group{ .button-group {
text-align: center; text-align: center;
margin-top: 1rem; margin-top: 1rem;
button{ button {
width: 4rem; width: 4rem;
margin: 0 .4rem; margin: 0 0.4rem;
height: 1.2rem; height: 1.2rem;
font-size: .4rem; font-size: 0.4rem;
border-radius: 4px; border-radius: 4px;
border: 1px solid #ddd; border: 1px solid #ddd;
background: white; background: white;
} }
.detail{ .detail {
color: $primary-color; color: $primary-color;
border-color: $primary-color; border-color: $primary-color;
} }
.again{ .again {
background: $primary-color; background: $primary-color;
color: white; color: white;
border-color: $primary-color; border-color: $primary-color;
src/pages/pay/index.vue
+87 -98
View File
@@ -1,24 +1,24 @@
<template> <template>
<div class="pay"> <div class="pay">
<div class="topbar" ref="topbar"> <div class="topbar" ref="topbar">
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" /> <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{ backgroundColor: $route.meta.navBarBackgroundColor }" />
</div> </div>
<div class="adv" v-if="adv"> <div class="adv" v-if="adv">
<img :src="adv.cover" alt=""> <img :src="adv.cover" alt="" />
</div> </div>
<div class="pay-info"> <div class="pay-info">
<h1 class="amount"><b>￥</b>{{query.amount}}</h1> <h1 class="amount"><b>￥</b>{{ query.amount }}</h1>
<div class="order-info"> <div class="order-info">
<h3 class="goods_title">{{query.title}}</h3> <h3 class="goods_title">{{ query.title }}</h3>
<div class="goods-lucky-to" > <div class="goods-lucky-to">
<span>功德芳名：{{query.merit_name}}</span> <span>功德芳名：{{ query.merit_name }}</span>
<span v-if="query.is_die == '1'">阳上人：{{query.live_name}}</span> <span v-if="query.is_die == '1'">阳上人：{{ query.live_name }}</span>
<span v-if="query.is_die == '1'">往生人：{{query.die_name}}</span> <span v-if="query.is_die == '1'">往生人：{{ query.die_name }}</span>
</div> </div>
<div class="desc"> <div class="desc">
<!-- subTitle: 规格名称 --> <!-- subTitle: 规格名称 -->
<span>{{query.subTitle}}</span> <span>{{ query.subTitle }}</span>
<span>数量：x{{query.quantity}}</span> <span>数量：x{{ query.quantity }}</span>
</div> </div>
</div> </div>
@@ -28,7 +28,7 @@
<van-cell-group> <van-cell-group>
<van-cell title="微信" clickable @click="radio = '1'" icon="wechat"> <van-cell title="微信" clickable @click="radio = '1'" icon="wechat">
<template #icon> <template #icon>
<img style="width: 40px" src="@/assets/img/wechat.jpg" alt=""> <img style="width: 40px" src="@/assets/img/wechat.jpg" alt="" />
</template> </template>
<template #right-icon> <template #right-icon>
<van-radio name="1" /> <van-radio name="1" />
@@ -47,173 +47,162 @@
</template> </template>
<script> <script>
import { import { createFriendlyDayOrder, createBrickDayOrder, createPay, createMeritBoxOrder, createCommonOrder, createLightOrder, getPayAdv } from "@/api";
createFriendlyDayOrder, import { requestPayment } from "@/common/wechat-web";
createBrickDayOrder,
createPay,
createMeritBoxOrder,
createCommonOrder,
createLightOrder, getPayAdv
} from "@/api";
import { requestPayment } from '@/common/wechat-web';
import { mapState } from "vuex"; import { mapState } from "vuex";
export default { export default {
components: { components: {},
}, data() {
data(){
return { return {
query: this.$route.query, query: this.$route.query,
payType: '1', payType: "1",
adv: null, adv: null,
} };
}, },
computed: { computed: {
...mapState(['temple_merit_id', 'launch']), ...mapState(["temple_merit_id", "launch"]),
}, },
mounted(){ mounted() {
this.wechatReady(() => { this.wechatReady(() => {});
getPayAdv().then((res) => {
}) if (res) {
getPayAdv().then(res => {
if(res){
this.adv = res; this.adv = res;
} }
}) });
}, },
methods: { methods: {
onContinuePayOrder(){ onContinuePayOrder() {
this.onPayment({ id: this.query.order_id }) this.onPayment({ id: this.query.order_id });
}, },
async onCreatePayOrder(){ async onCreatePayOrder() {
// 创建日行一善支付订单 // 创建日行一善支付订单
if(this.query.goods_type == '1'){ if (this.query.goods_type == "1") {
const request = { ...this.query } const request = { ...this.query };
const order = await createFriendlyDayOrder(request) const order = await createFriendlyDayOrder(request);
this.onPayment(order) this.onPayment(order);
return return;
} }
// 创建填砖加瓦订单 // 创建填砖加瓦订单
if(this.query.goods_type == '2'){ if (this.query.goods_type == "2") {
const request = { ...this.query } const request = { ...this.query };
const order = await createBrickDayOrder(request) const order = await createBrickDayOrder(request);
await this.onPayment(order) await this.onPayment(order);
return return;
} }
// 创建功德箱订单 // 创建功德箱订单
if(this.query.from === 'meritBox'){ if (this.query.from === "meritBox") {
const domain = this.launch?.agent_id ? '2': '3' const domain = this.launch?.agent_id ? "2" : "3";
const request = { const request = {
temple_id: this.temple_merit_id || this.query.temple_id, temple_id: this.temple_merit_id || this.query.temple_id,
price: this.query.amount, price: this.query.amount,
domain domain,
} };
const order = await createMeritBoxOrder(request) const order = await createMeritBoxOrder(request);
this.onPayment(order) this.onPayment(order);
return return;
} }
// 创建通用商品订单 // 创建通用商品订单
if(this.query.from === 'common_goods'){ if (this.query.from === "common_goods") {
const request = { const request = {
...this.query, ...this.query,
price: this.query.amount, price: this.query.amount,
buy_quantity: this.query.quantity buy_quantity: this.query.quantity,
} };
const order = await createCommonOrder(request); const order = await createCommonOrder(request);
await this.onPayment(order); await this.onPayment(order);
} }
// 创建佛前供灯订单 // 创建佛前供灯订单
if(this.query.from === 'goods_light'){ if (this.query.from === "goods_light") {
const request = { const request = {
...this.query, ...this.query,
price: this.query.amount, price: this.query.amount,
buy_quantity: this.query.quantity buy_quantity: this.query.quantity,
} };
const order = await createLightOrder(request); const order = await createLightOrder(request);
await this.onPayment(order); await this.onPayment(order);
} }
}, },
async onPayment(order){ async onPayment(order) {
const result = await createPay(order.id); const result = await createPay(order.id);
const payResult = await requestPayment(result) const payResult = await requestPayment(result);
await this.$router.push({ await this.$router.push({
name: 'pay-result', name: "pay-result",
query: { query: {
...this.query, ...this.query,
order_id: order.id, order_id: order.id,
...result, ...result,
...payResult ...payResult,
} },
}) });
} },
} },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
.pay {
.pay{ .adv {
.adv{ img {
img{
height: 4rem; height: 4rem;
width: 100%; width: 100%;
vertical-align: middle; vertical-align: middle;
} }
} }
.pay-info{ .pay-info {
padding-top: 1rem; padding-top: 1rem;
.amount{ .amount {
b{ b {
font-size: .5rem; font-size: 0.5rem;
color: rgb(236, 188, 98); color: rgb(236, 188, 98);
padding-right: .1rem; padding-right: 0.1rem;
} }
text-align: center; text-align: center;
font-size: 1.07rem; font-size: 1.07rem;
color: rgb(255, 140, 8); color: rgb(255, 140, 8);
font-weight: bold; font-weight: bold;
} }
.order-info{ .order-info {
margin-top: 1rem; margin-top: 1rem;
padding: .4rem; padding: 0.4rem;
.goods_title{ .goods_title {
font-size: .4rem; font-size: 0.4rem;
font-weight: bold; font-weight: bold;
line-height: 1.4; line-height: 1.4;
} }
.goods-lucky-to{ .goods-lucky-to {
font-size: .35rem; font-size: 0.35rem;
padding-top: .4rem; padding-top: 0.4rem;
span ~ span{ span ~ span {
padding-left: .2rem; padding-left: 0.2rem;
border-left: 1px solid #ddd; border-left: 1px solid #ddd;
margin-left: .2rem; margin-left: 0.2rem;
} }
} }
.desc{ .desc {
padding-top: .5rem; padding-top: 0.5rem;
color: #666; color: #666;
font-size: .35rem; font-size: 0.35rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
} }
.pay-type{ .pay-type {
padding: .4rem; padding: 0.4rem;
margin-top: .6rem; margin-top: 0.6rem;
.label{ .label {
font-size: .4rem; font-size: 0.4rem;
font-weight: bold; font-weight: bold;
margin-bottom: .3rem; margin-bottom: 0.3rem;
} }
} }
.pay-button-container{ .pay-button-container {
padding: .4rem; padding: 0.4rem;
} }
} }
} }
src/pages/temple-list/index.vue
+122 -124
View File
@@ -1,14 +1,14 @@
<template> <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"> <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"> <van-search v-model="keyword" show-action action-text="搜索" placeholder="请输入寺院、方丈、监院名称" @search="onSearch" @cancel="onCancel">
<template #action> <template #action>
<span @click="onSearch">搜索</span> <span @click="onSearch">搜索</span>
</template> </template>
</van-search> </van-search>
<div class="operation-bar"> <div class="operation-bar">
<div class="position" v-if="positioning" > <div class="position" v-if="positioning">
<span class="iconfont icon-dingwei positioning"></span> <span class="iconfont icon-dingwei positioning"></span>
<span>正在获取位置...</span> <span>正在获取位置...</span>
</div> </div>
@@ -16,37 +16,36 @@
<span class="iconfont icon-dingwei"></span> <span class="iconfont icon-dingwei"></span>
<span>重新定位</span> <span>重新定位</span>
</div> </div>
<!-- <div class="show-mode" v-if="mode === 'list'" @click="onModeSwitch('map')">--> <!-- <div class="show-mode" v-if="mode === 'list'" @click="onModeSwitch('map')">-->
<!-- <span>地图模式</span>--> <!-- <span>地图模式</span>-->
<!-- <span class="iconfont icon-ditu"></span>--> <!-- <span class="iconfont icon-ditu"></span>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="show-mode" v-if="mode === 'map'" @click="onModeSwitch('list')">--> <!-- <div class="show-mode" v-if="mode === 'map'" @click="onModeSwitch('list')">-->
<!-- <span>列表模式</span>--> <!-- <span>列表模式</span>-->
<!-- <span class="iconfont icon-liebiao"></span>--> <!-- <span class="iconfont icon-liebiao"></span>-->
<!-- </div>--> <!-- </div>-->
</div> </div>
</div> </div>
<div > <div>
<div class="temple-list-container" :style="{ height: containerHeight + 'px' }" v-if="mode === 'list'">
<div class="temple-list-container" :style="{height: containerHeight + 'px'}" v-if="mode === 'list'" > <!-- <scroll-view -->
<!-- <scroll-view --> <!-- class="temple-container content"-->
<!-- class="temple-container content"--> <!-- :height="containerHeight - 20" -->
<!-- :height="containerHeight - 20" --> <!-- ref="scroll"-->
<!-- ref="scroll"--> <!-- pulldown -->
<!-- pulldown --> <!-- pullup-->
<!-- pullup--> <!-- @pulldown="refresh"-->
<!-- @pulldown="refresh"--> <!-- @pullup="loadMore"-->
<!-- @pullup="loadMore"--> <!-- >-->
<!-- >--> <!-- <temple v-for="temple in templeList" :key="temple.id" :data="temple" @location-to="onLocationTo"></temple>-->
<!-- <temple v-for="temple in templeList" :key="temple.id" :data="temple" @location-to="onLocationTo"></temple>--> <!-- </scroll-view>-->
<!-- </scroll-view>--> <div class="temple-container content" :style="{ height: containerHeight + 'px' }" @scroll="onScroll">
<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> <temple v-for="temple in templeList" :key="temple.id" :data="temple" @location-to="onLocationTo"></temple>
<div v-if="loading" class="no-more">正在加载...</div> <div v-if="loading" class="no-more">正在加载...</div>
<div class="no-more" v-if="!loading && noMore">没有更多了</div> <div class="no-more" v-if="!loading && noMore">没有更多了</div>
</div> </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 id="container" style="height: 100%"></div>
</div> </div>
</div> </div>
@@ -54,217 +53,216 @@
</template> </template>
<script> <script>
import { getTempleList } from '@/api'; import { getTempleList } from "@/api";
import TMAPLoader from '@/common/tmap'; import TMAPLoader from "@/common/tmap";
import { getLocation, openLocation } from "@/common/wechat-web"; import { getLocation, openLocation } from "@/common/wechat-web";
export default { export default {
data(){ data() {
return { return {
query: this.$route.query, query: this.$route.query,
containerHeight: 0, containerHeight: 0,
keyword: '', keyword: "",
mode: 'list', mode: "list",
page: 1, page: 1,
templeList: [], templeList: [],
lng: '106.45233', lng: "106.45233",
lat: '29.507471', lat: "29.507471",
map: null, map: null,
positioning: false, positioning: false,
noMore: false, noMore: false,
timer: null, timer: null,
loading: false loading: false,
} };
}, },
inject: ['root', 'parentHeight'], inject: ["root", "parentHeight"],
computed: { computed: {
scroll(){ scroll() {
return this.$refs.scroll return this.$refs.scroll;
} },
}, },
mounted(){ mounted() {
setTimeout(() => { setTimeout(() => {
if(this.query.hideTab === '1'){ if (this.query.hideTab === "1") {
this.containerHeight = this.root.minHeight - this.$refs.topbar.offsetHeight; this.containerHeight = this.root.minHeight - this.$refs.topbar.offsetHeight;
} else { } else {
this.containerHeight = this.root.minHeight - this.$refs.topbar.offsetHeight - 100; 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.keyword = this.query.search;
} }
this.getTempleList(); this.getTempleList();
this.wechatReady() this.wechatReady();
}, },
methods: { methods: {
onScroll(e){ onScroll(e) {
const scrollTop = e.target.scrollTop; const scrollTop = e.target.scrollTop;
const scrollHeight = e.target.offsetHeight; const scrollHeight = e.target.offsetHeight;
const windowHeight = this.templeList.length * 220; const windowHeight = this.templeList.length * 220;
if(scrollTop === 0){ if (scrollTop === 0) {
this.page = 1; this.page = 1;
this.getTempleList() this.getTempleList();
return return;
} }
if(((scrollTop + scrollHeight) / windowHeight) > 0.9){ if ((scrollTop + scrollHeight) / windowHeight > 0.9) {
this.loadMore() this.loadMore();
} }
}, },
initMap(){ initMap() {
TMAPLoader.load({ TMAPLoader.load({
key: process.env.VUE_APP_TMAP_KEY key: process.env.VUE_APP_TMAP_KEY,
}).then(TMap => { }).then((TMap) => {
var center = new TMap.LatLng(39.984104, 116.307503); var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地图 //初始化地图
var map = new TMap.Map("container", { var map = new TMap.Map("container", {
zoom:12,//设置地图缩放级别 zoom: 12, //设置地图缩放级别
center: center//设置地图中心点坐标 center: center, //设置地图中心点坐标
}); });
this.map = map; this.map = map;
this.setMarker(TMap) this.setMarker(TMap);
}) });
}, },
setMarker(TMap){ setMarker(TMap) {
const markers = [] const markers = [];
this.templeList.forEach(temple => { this.templeList.forEach((temple) => {
console.log(temple)
const infoWindow = new TMap.InfoWindow({ const infoWindow = new TMap.InfoWindow({
map: this.map, map: this.map,
position: new TMap.LatLng(temple.lat, temple.lng), position: new TMap.LatLng(temple.lat, temple.lng),
content: temple.unit_name content: temple.unit_name,
}) });
markers.push(infoWindow) markers.push(infoWindow);
}) });
this.markers = markers; this.markers = markers;
}, },
async getTempleList(){ async getTempleList() {
this.loading = true; this.loading = true;
const res = await getTempleList(this.keyword, this.lng, this.lat, this.page); const res = await getTempleList(this.keyword, this.lng, this.lat, this.page);
this.loading = false; this.loading = false;
this.total = res.total; this.total = res.total;
if(this.page === 1){ if (this.page === 1) {
this.templeList = []; this.templeList = [];
} }
this.templeList = this.templeList.concat(res.results); this.templeList = this.templeList.concat(res.results);
this.noMore = res.results.length < 10; this.noMore = res.results.length < 10;
if(this.mode === 'map'){ if (this.mode === "map") {
this.setMarker(); this.setMarker();
} }
}, },
async onGetLocation(){ async onGetLocation() {
this.positioning = true; this.positioning = true;
console.log(getLocation) getLocation()
getLocation().then(res => { .then((res) => {
this.positioning = false this.positioning = false;
this.lng = res.longitude; this.lng = res.longitude;
this.lat = res.latitude; this.lat = res.latitude;
this.page = 1; this.page = 1;
this.templeList = []; this.templeList = [];
this.getTempleList(); this.getTempleList();
}).catch(() => { })
this.positioning = false; .catch(() => {
}) this.positioning = false;
});
}, },
refresh(){ refresh() {
this.page = 1; this.page = 1;
this.getTempleList() this.getTempleList();
}, },
onLocationTo(data){ onLocationTo(data) {
openLocation({ openLocation({
longitude: data.lng, longitude: data.lng,
latitude: data.lat, latitude: data.lat,
name: data.unit_name, name: data.unit_name,
address: data.address address: data.address,
}) });
}, },
onModeSwitch(mode){ onModeSwitch(mode) {
this.mode = mode; this.mode = mode;
if(mode === 'map' && !this.map){ if (mode === "map" && !this.map) {
this.initMap(); this.initMap();
} }
}, },
onCancel(){ onCancel() {
this.keyword = '' this.keyword = "";
this.page = 1; this.page = 1;
this.getTempleList(); this.getTempleList();
}, },
onSearch(){ onSearch() {
this.getTempleList(); this.getTempleList();
}, },
loadMore(){ loadMore() {
if(this.noMore) return; if (this.noMore) return;
clearTimeout(this.timer) clearTimeout(this.timer);
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
this.page += 1; this.page += 1;
this.getTempleList() this.getTempleList();
}, 300) }, 300);
}, },
} },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
@keyframes positioning { @keyframes positioning {
0%{ 0% {
opacity: 1; opacity: 1;
} }
25%{ 25% {
opacity: 0; opacity: 0;
} }
50%{ 50% {
opacity: 1; opacity: 1;
} }
75%{ 75% {
opacity: 0; opacity: 0;
} }
100%{ 100% {
opacity: 1; opacity: 1;
} }
} }
.temple-list{ .temple-list {
.operation-bar{ .operation-bar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 .4rem; padding: 0 0.4rem;
color: #333; color: #333;
padding-bottom: .4rem; padding-bottom: 0.4rem;
padding-top: .3rem; padding-top: 0.3rem;
.position{ .position {
line-height: .37rem; line-height: 0.37rem;
color: green; color: green;
span{ span {
font-size: .37rem; font-size: 0.37rem;
display: inline-block; display: inline-block;
margin-right: .13rem; margin-right: 0.13rem;
} }
.positioning{ .positioning {
animation: positioning 3s linear infinite; animation: positioning 3s linear infinite;
} }
} }
.show-mode{ .show-mode {
line-height: .37rem; line-height: 0.37rem;
span{ span {
font-size: .37rem; font-size: 0.37rem;
display: inline-block; display: inline-block;
margin-left: .13rem; margin-left: 0.13rem;
} }
} }
} }
.temple-list-container{ .temple-list-container {
background: #f5f5f5; background: #f5f5f5;
overflow: hidden; overflow: hidden;
padding: .3rem; padding: 0.3rem;
.temple-map{ .temple-map {
height: 100%; height: 100%;
background: #f5f5f5; background: #f5f5f5;
} }
.temple-container{ .temple-container {
overflow: scroll; overflow: scroll;
} }
} }
} }
</style> </style>
src/pages/user/approve/index.vue
-1
View File
@@ -153,7 +153,6 @@ export default {
}) })
}, },
onSelect(action){ onSelect(action){
console.log(action)
this.form.rank_id = action.id; this.form.rank_id = action.id;
this.form.rank_text = action.name; this.form.rank_text = action.name;
}, },
src/pages/user/certificate/index.vue
+66 -65
View File
@@ -1,77 +1,78 @@
<template> <template>
<div class="user-certificate" :style="style"> <div class="user-certificate" :style="style">
<div class="certificate" v-for="(li, index) in list" :key="index"> <div class="certificate" v-for="(li, index) in list" :key="index">
<div class="img-wrapper"> <div class="img-wrapper">
<img class="img" :src="li.picture_url" alt="" @click="onDownloadCert(li)"> <img class="img" :src="li.picture_url" alt="" @click="onDownloadCert(li)" />
</div> </div>
<div class="info"> <div class="info">
<h3 class="title">{{li.goods_name}}我都去无群我带我去带我去带我去强无敌我去去带我去带我去带我去请问我去请问带我去带我去</h3> <h3 class="title">{{ li.goods_name }}我都去无群我带我去带我去带我去强无敌我去去带我去带我去带我去请问我去请问带我去带我去</h3>
<span class="date">{{li.date}}</span> <span class="date">{{ li.date }}</span>
<p class="number">第<span>{{li.count}}</span>份功德</p> <p class="number">
<div class="download" @click="onDownloadCert(li)"> 第<span>{{ li.count }}</span
<span class="iconfont icon-24px"></span> >份功德
<p>长按保存功德证书</p> </p>
</div> <div class="download" @click="onDownloadCert(li)">
</div> <span class="iconfont icon-24px"></span>
</div> <p>长按保存功德证书</p>
</div>
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
import { getCertList } from '@/api'; import { getCertList } from "@/api";
import { previewImage } from '@/common/wechat-web'; import { previewImage } from "@/common/wechat-web";
export default { export default {
data(){ data() {
return { return {
list: [], list: [],
bg: '' bg: "",
} };
}, },
created(){ created() {
this.wechatReady() this.wechatReady();
this.getCertList(); this.getCertList();
}, },
computed: { computed: {
style(){ style() {
return { return {
backgroundColor: '#f5f5f5', backgroundColor: "#f5f5f5",
backgroundImage: `url(${this.bg})`, backgroundImage: `url(${this.bg})`,
backgroundSize: 'contain', backgroundSize: "contain",
backgroundPosition: 'top center', backgroundPosition: "top center",
backgroundRepeat: 'no-repeat' backgroundRepeat: "no-repeat",
} };
} },
}, },
methods: { methods: {
async getCertList(){ async getCertList() {
const res = await getCertList(); const res = await getCertList();
console.log(res)
this.list = res.results; this.list = res.results;
this.bg = res.cert_bg; this.bg = res.cert_bg;
}, },
onDownloadCert(cert){ onDownloadCert(cert) {
previewImage(cert.picture_url, [cert.picture_url]) previewImage(cert.picture_url, [cert.picture_url]);
} },
} },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
.user-certificate{ .user-certificate {
// max-height: 100vh; // max-height: 100vh;
padding-top: 4.67rem; padding-top: 4.67rem;
padding-bottom: .5rem; padding-bottom: 0.5rem;
.certificate{ .certificate {
display: flex; display: flex;
font-size: .37rem; font-size: 0.37rem;
background: white; background: white;
margin: .4rem; margin: 0.4rem;
border-radius: .13rem; border-radius: 0.13rem;
padding: .4rem; padding: 0.4rem;
box-shadow: 0 0 .2rem rgba(0,0,0,0.05); box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.05);
.img-wrapper{ .img-wrapper {
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
display: flex; display: flex;
@@ -79,46 +80,46 @@ export default {
justify-content: center; justify-content: center;
background: #f9f9f9; background: #f9f9f9;
} }
img{ img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
} }
.info{ .info {
flex: 1; flex: 1;
margin-left: .4rem; margin-left: 0.4rem;
position: relative; position: relative;
.title{ .title {
font-size: .35rem; font-size: 0.35rem;
line-height: 1.3; line-height: 1.3;
@extend .text-multiple-2; @extend .text-multiple-2;
height: 2.4em; height: 2.4em;
} }
.date{ .date {
margin-top: .8rem; margin-top: 0.8rem;
display: block; display: block;
font-size: .35rem; font-size: 0.35rem;
color: #aaa; color: #aaa;
} }
.number{ .number {
margin-top: .15rem; margin-top: 0.15rem;
font-size: .35rem; font-size: 0.35rem;
color: #444; color: #444;
span{ span {
color: red; color: red;
font-weight: bold; font-weight: bold;
padding: 0 .13rem; padding: 0 0.13rem;
} }
} }
.download{ .download {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
color: #666; color: #666;
text-align: center; text-align: center;
font-size: .29rem; font-size: 0.29rem;
.iconfont{ .iconfont {
font-size: .8rem; font-size: 0.8rem;
padding-bottom: .1rem; padding-bottom: 0.1rem;
display: inline-block; display: inline-block;
} }
} }
src/pages/user/course/count/index.vue
+130 -131
View File
@@ -1,16 +1,16 @@
<template> <template>
<div class="course-detail-count" v-if="data"> <div class="course-detail-count" v-if="data">
<div class="topbar" ref="topbar"> <div class="topbar" ref="topbar">
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" /> <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{ backgroundColor: $route.meta.navBarBackgroundColor }" />
</div> </div>
<div class="course-container"> <div class="course-container">
<h1 class="title border-bottom"> <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> <span class="feedback" @click="backVisible = true">回向文</span>
</h1> </h1>
<h2 class="content-name">经文内容</h2> <h2 class="content-name">经文内容</h2>
<p class="content" v-html="data.content"></p> <p class="content" v-html="data.content"></p>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<div class="operation"> <div class="operation">
<div class="bar"> <div class="bar">
@@ -22,11 +22,11 @@
<i class="iconfont" :class="[!muted ? 'icon-shengyinkai' : 'icon-shengyinguan']"></i> <i class="iconfont" :class="[!muted ? 'icon-shengyinkai' : 'icon-shengyinguan']"></i>
</span> </span>
</div> </div>
<h4 class="volumn-count">{{count}}</h4> <h4 class="volumn-count">{{ count }}</h4>
<div class="picture-wrapper"> <div class="picture-wrapper">
<span @touchstart="onTouchstart" @touchend="onTouchEnd"> <span @touchstart="onTouchstart" @touchend="onTouchEnd">
<img v-if="pressed" src="@/assets/img/down.jpg" alt=""> <img v-if="pressed" src="@/assets/img/down.jpg" alt="" />
<img v-else src="@/assets/img/up.jpg" alt=""> <img v-else src="@/assets/img/up.jpg" alt="" />
</span> </span>
</div> </div>
<div class="save-group"> <div class="save-group">
@@ -40,12 +40,12 @@
<van-popup v-model="visible" round> <van-popup v-model="visible" round>
<div class="input-count"> <div class="input-count">
<h1 class="title">直接报数</h1> <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> <button class="confirm" @click="onConfirm">确认</button>
</div> </div>
</van-popup> </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"> <div class="backword">
<h4 class="title">回向文</h4> <h4 class="title">回向文</h4>
<textarea v-model="backwards" name="" class="textarea"></textarea> <textarea v-model="backwards" name="" class="textarea"></textarea>
@@ -59,10 +59,10 @@
</template> </template>
<script> <script>
import { getCourseDetail, postCount } from "@/api" import { getCourseDetail, postCount } from "@/api";
export default { export default {
data(){ data() {
const { query } = this.$route; const { query } = this.$route;
return { return {
query, query,
@@ -73,284 +73,283 @@ export default {
inputCount: 0, inputCount: 0,
visible: false, visible: false,
backVisible: false, backVisible: false,
backwards: '' backwards: "",
} };
}, },
mounted(){ mounted() {
this.getCourseDetail(); this.getCourseDetail();
}, },
methods: { methods: {
async getCourseDetail(){ async getCourseDetail() {
const res = await getCourseDetail(this.query.id); const res = await getCourseDetail(this.query.id);
this.data = res; this.data = res;
this.backwards = res.backward this.backwards = res.backward;
}, },
onTouchstart(){ onTouchstart() {
this.pressed = true; this.pressed = true;
const audio = this.$refs.audio; const audio = this.$refs.audio;
audio.muted = this.muted audio.muted = this.muted;
audio.play() audio.play();
this.count += 1 this.count += 1;
}, },
onTouchEnd(){ onTouchEnd() {
this.pressed = false; this.pressed = false;
}, },
onConfirm(){ onConfirm() {
this.count = Number(this.inputCount); this.count = Number(this.inputCount);
this.visible = false; this.visible = false;
}, },
async saveCount(){ async saveCount() {
const request = { const request = {
course_id: this.query.id, course_id: this.query.id,
quantity: this.count, quantity: this.count,
backward: this.backwards backward: this.backwards,
} };
const res = await postCount(this.query.id, request) await postCount(this.query.id, request);
console.log(res) this.$toast.success("成功");
this.$toast.success('成功')
}, },
clear(){ clear() {
this.$dialog.confirm({ this.$dialog
message: '确认清除计数器？', .confirm({
}) message: "确认清除计数器？",
.then(() => { })
// on confirm .then(() => {
this.count = 0; // on confirm
}) this.count = 0;
.catch(() => { })
// on cancel .catch(() => {
}); // on cancel
} });
} },
} },
};
</script> </script>
<style lang="scss"> <style lang="scss">
.course-detail-count{ .course-detail-count {
background-size: 100%; background-size: 100%;
.audio{ .audio {
display: none; display: none;
} }
.on-count{ .on-count {
position: fixed; position: fixed;
right: 0; right: 0;
bottom: 4rem; bottom: 4rem;
padding: 0 .7rem; padding: 0 0.7rem;
border-top-left-radius: 1rem; border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem; border-bottom-left-radius: 1rem;
background: $primary-color; background: $primary-color;
opacity: 0.8; opacity: 0.8;
height: 1.07rem; height: 1.07rem;
line-height: 1.07rem; line-height: 1.07rem;
font-size: .4rem; font-size: 0.4rem;
color: white; color: white;
} }
.course-container{ .course-container {
padding: 0 .4rem; padding: 0 0.4rem;
flex: 1; flex: 1;
.title{ .title {
height: 1.2rem; height: 1.2rem;
line-height: 1.2rem; line-height: 1.2rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.feedback{ .feedback {
font-size: .4rem; font-size: 0.4rem;
color: $primary-color; color: $primary-color;
} }
.title-text{ .title-text {
font-size: .5rem; font-size: 0.5rem;
color: #555; color: #555;
} }
} }
.content-name{ .content-name {
font-size: .45rem; font-size: 0.45rem;
color: #666; color: #666;
padding-top: .5rem; padding-top: 0.5rem;
} }
.content{ .content {
font-size: .4rem; font-size: 0.4rem;
line-height: 1.8; line-height: 1.8;
letter-spacing: 2px; letter-spacing: 2px;
text-align: justify; text-align: justify;
margin-top: .5rem; margin-top: 0.5rem;
color: #777; color: #777;
padding-bottom: .5rem; padding-bottom: 0.5rem;
height: 40vh; height: 40vh;
overflow-y: scroll; overflow-y: scroll;
} }
} }
.operation{ .operation {
.bar{ .bar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 1rem; height: 1rem;
align-items: center; align-items: center;
padding: 0 .4rem; padding: 0 0.4rem;
span{ span {
} }
.volumn{ .volumn {
display: inline-block; display: inline-block;
width: 1.2rem; width: 1.2rem;
height: 1.2rem; height: 1.2rem;
text-align: center; text-align: center;
line-height: 1.2rem; line-height: 1.2rem;
.iconfont{ .iconfont {
font-size: .5rem; font-size: 0.5rem;
} }
} }
} }
.btn-group{ .btn-group {
display: flex; display: flex;
font-size: .4rem; font-size: 0.4rem;
flex: 1; flex: 1;
.btn{ .btn {
background: $primary-color; background: $primary-color;
color: white; color: white;
font-size: .3rem; font-size: 0.3rem;
border-radius: 2px; border-radius: 2px;
display: inline-block; display: inline-block;
margin-right: .2rem; margin-right: 0.2rem;
padding: .2rem .4rem; padding: 0.2rem 0.4rem;
} }
} }
.volumn-count{ .volumn-count {
text-align: center; text-align: center;
font-size: 1.3rem; font-size: 1.3rem;
padding: .5rem 0; padding: 0.5rem 0;
color: #666; color: #666;
} }
.picture-wrapper{ .picture-wrapper {
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
border-radius: 3rem; border-radius: 3rem;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-top: .3rem; margin-top: 0.3rem;
position: relative; position: relative;
span{ span {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: inline-block; display: inline-block;
} }
&::after, &::after,
&::before{ &::before {
pointer-events: none; pointer-events: none;
} }
&::before{ &::before {
content: ''; content: "";
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
border-radius: 3rem; border-radius: 3rem;
position: absolute; position: absolute;
left: -.2rem; left: -0.2rem;
top: -.2rem; top: -0.2rem;
border: .2rem solid $primary-color; border: 0.2rem solid $primary-color;
transition: transform .1s linear; transition: transform 0.1s linear;
transform-origin: center center; transform-origin: center center;
} }
&::after{ &::after {
content: ''; content: "";
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
border-radius: 3rem; border-radius: 3rem;
position: absolute; position: absolute;
left: -.2rem; left: -0.2rem;
top: -.2rem; top: -0.2rem;
border: .2rem solid #ddd; border: 0.2rem solid #ddd;
} }
&:active{ &:active {
&::before{ &::before {
animation: scale .1s linear; animation: scale 0.1s linear;
} }
&::after{ &::after {
border-color: $primary-color; border-color: $primary-color;
} }
} }
span{ span {
img{ img {
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
} }
} }
} }
.save-group{ .save-group {
text-align: center; text-align: center;
font-size: .4rem; font-size: 0.4rem;
padding-top: .8rem; padding-top: 0.8rem;
span{ span {
display: inline-block; display: inline-block;
padding: 0 1rem; padding: 0 1rem;
.iconfont{ .iconfont {
margin-right: .1rem; margin-right: 0.1rem;
vertical-align: middle; vertical-align: middle;
} }
} }
} }
} }
} }
.backward-popup{ .backward-popup {
top: 44% top: 44%;
} }
.input-count{ .input-count {
padding: .4rem ; padding: 0.4rem;
width: 8rem; width: 8rem;
.title{ .title {
font-size: .4rem; font-size: 0.4rem;
text-align: center; text-align: center;
padding-bottom: .8rem; padding-bottom: 0.8rem;
} }
.input{ .input {
width: 100%; width: 100%;
font-size: .4rem; font-size: 0.4rem;
background: #f5f5f5; background: #f5f5f5;
border: 1px solid #ddd; border: 1px solid #ddd;
height: 1rem; height: 1rem;
line-height: 1rem; line-height: 1rem;
border-radius: .06rem; border-radius: 0.06rem;
text-indent: 1em; text-indent: 1em;
} }
.confirm{ .confirm {
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
height: 1.2rem; height: 1.2rem;
line-height: 1rem; line-height: 1rem;
display: block; display: block;
margin-top: .4rem; margin-top: 0.4rem;
font-size: .4rem; font-size: 0.4rem;
color: $primary-color; color: $primary-color;
} }
} }
.backword{ .backword {
width: 90vw; width: 90vw;
height: 80vh; 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; background-size: contain;
.title{ .title {
font-size: .5rem; font-size: 0.5rem;
text-align: center; text-align: center;
padding-top: .8rem; padding-top: 0.8rem;
padding-bottom: .8rem; padding-bottom: 0.8rem;
} }
.textarea{ .textarea {
background:transparent; background: transparent;
border: 1px solid transparent; border: 1px solid transparent;
width: calc(100% - 1.2rem); width: calc(100% - 1.2rem);
padding-left: .6rem; padding-left: 0.6rem;
padding-right: .6rem; padding-right: 0.6rem;
height: 6rem; height: 6rem;
line-height: 1.4; line-height: 1.4;
color: #333; color: #333;
font-size: .4rem; font-size: 0.4rem;
} }
} }
@keyframes scale { @keyframes scale {
0%{ 0% {
transform: scale(1, 1); transform: scale(1, 1);
} }
100%{ 100% {
transform: scale(1.2, 1.2); transform: scale(1.2, 1.2);
opacity: 0; opacity: 0;
} }
} }
</style> </style>
src/pages/user/course/index.vue
+78 -73
View File
@@ -1,150 +1,155 @@
<template> <template>
<div class="course" v-if="data"> <div class="course" v-if="data">
<div class="topbar" ref="topbar"> <div class="topbar" ref="topbar">
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" /> <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{ backgroundColor: $route.meta.navBarBackgroundColor }" />
</div> </div>
<div class="course-container"> <div class="course-container">
<div class="my-course border-bottom"> <div class="my-course border-bottom">
<h3 class="title">我的功课</h3> <h3 class="title">我的功课</h3>
<p class="progress">已修行<span>{{data.practise_day}}</span>天 功课总计<span>{{data.practise_total}}</span>遍</p> <p class="progress">
</div> 已修行<span>{{ data.practise_day }}</span
>天 功课总计<span>{{ data.practise_total }}</span
>遍
</p>
</div>
<div class="course-wrapper"> <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}})"> <div class="course-item" v-for="course in data.list" :key="course.id" @click="$router.push({ name: 'user-course-detail', query: { id: course.id } })">
<img :src="course.cover" alt=""> <img :src="course.cover" alt="" />
<div class="course-info"> <div class="course-info">
<h3 class="title">{{course.name}}</h3> <h3 class="title">{{ course.name }}</h3>
<p class="summary"> <p class="summary">
<span> <span>
<i class="iconfont icon-shuben-"></i> <i class="iconfont icon-shuben-"></i>
<b>总{{course.target}}遍</b> <b>总{{ course.target }}遍</b>
</span> </span>
<span> <span>
<i class="iconfont icon-shuben-"></i> <i class="iconfont icon-shuben-"></i>
<b>今日{{course.now_target}}遍</b> <b>今日{{ course.now_target }}遍</b>
</span> </span>
</p> </p>
<div class="progress-group"> <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-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>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { getCourseList } from '@/api'; import { getCourseList } from "@/api";
export default { export default {
data(){ data() {
return { return {
data: null, data: null,
courseList: [] courseList: [],
} };
}, },
mounted(){ mounted() {
this.getCourseList() this.getCourseList();
}, },
methods: { methods: {
async getCourseList(){ async getCourseList() {
const res = await getCourseList(); const res = await getCourseList();
console.log(res)
this.data = res; this.data = res;
} },
} },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
.course{ .course {
.course-container{ .course-container {
.my-course{ .my-course {
padding: .4rem; padding: 0.4rem;
margin-bottom: .4rem; margin-bottom: 0.4rem;
.title{ .title {
font-size: .4rem; font-size: 0.4rem;
} }
.progress{ .progress {
font-size: .35rem; font-size: 0.35rem;
color: #999; color: #999;
padding-top: .2rem; padding-top: 0.2rem;
span{ span {
color: $primary-color; color: $primary-color;
padding: 0 .13rem; padding: 0 0.13rem;
font-weight: bold; font-weight: bold;
} }
} }
} }
} }
.course-wrapper{ .course-wrapper {
padding: 0 .4rem; padding: 0 0.4rem;
.course-item{ .course-item {
display: flex; display: flex;
padding: .4rem; padding: 0.4rem;
box-shadow: 0 0 .13rem rgba(0,0,0,0.1); box-shadow: 0 0 0.13rem rgba(0, 0, 0, 0.1);
border-radius: .13rem; border-radius: 0.13rem;
& ~ .course-item{ & ~ .course-item {
margin-top: .53rem; margin-top: 0.53rem;
} }
img{ img {
width: 2.67rem; width: 2.67rem;
height: 2.67rem; height: 2.67rem;
vertical-align: top; vertical-align: top;
border-radius: .08rem; border-radius: 0.08rem;
} }
.course-info{ .course-info {
flex: 1; flex: 1;
margin-left: .53rem; margin-left: 0.53rem;
.title{ .title {
font-size: .4rem; font-size: 0.4rem;
padding-top: .13rem; padding-top: 0.13rem;
} }
.summary{ .summary {
font-size: .30rem; font-size: 0.3rem;
padding: .1rem 0; padding: 0.1rem 0;
margin-top: .2rem; margin-top: 0.2rem;
span{ span {
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
margin-right: .67rem; margin-right: 0.67rem;
color: #666; color: #666;
i{ i {
vertical-align: text-bottom; vertical-align: text-bottom;
} }
b{ b {
vertical-align: middle; vertical-align: middle;
padding-left: .11rem; padding-left: 0.11rem;
line-height: 1.3; line-height: 1.3;
} }
} }
} }
.progress-group{ .progress-group {
font-size: .35rem; font-size: 0.35rem;
padding-top: .6rem; padding-top: 0.6rem;
label{ label {
font-size: .3rem; font-size: 0.3rem;
color: #666; color: #666;
span{ span {
color: $primary-color; color: $primary-color;
font-weight: bold; font-weight: bold;
} }
} }
.progress-bar{ .progress-bar {
background: #f5f5f5; background: #f5f5f5;
margin-top: .2rem; margin-top: 0.2rem;
height: .11rem; height: 0.11rem;
position: relative; position: relative;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
.progress{ .progress {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
height: .11rem; height: 0.11rem;
width: 50%; width: 50%;
background: $primary-color; background: $primary-color;
border-radius: 4px; 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> <template>
<div> <div>
<div class="topbar" ref="topbar"> <div class="topbar" ref="topbar">
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" /> <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{ backgroundColor: $route.meta.navBarBackgroundColor }" />
</div> </div>
<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-tabs v-model="status" @change="onOrderChange">
<van-tab :title="order.name" :name="order.status" v-for="order in orders" :key="order.status"> <van-tab :title="order.name" :name="order.status" v-for="order in orders" :key="order.status">
<div class="order-container"> <div class="order-container">
@@ -16,82 +16,78 @@
</template> </template>
<script> <script>
import { getOrderList } from '@/api' import { getOrderList } from "@/api";
export default { export default {
data(){ data() {
const { query } = this.$route; const { query } = this.$route;
return { return {
query, query,
containerHeight: window.innerHeight, containerHeight: window.innerHeight,
status: Number( query.current), status: Number(query.current),
orders: [ orders: [
{ status: 0, name: '全部', list: [] }, { status: 0, name: "全部", list: [] },
{ status: 1, name: '待支付', list: [] }, { status: 1, name: "待支付", list: [] },
{ status: 2, name: '处理中', list: [] }, { status: 2, name: "处理中", list: [] },
{ status: 3, name: '已处理', list: [] }, { status: 3, name: "已处理", list: [] },
] ],
} };
}, },
inject: ['root', 'tabbar'], inject: ["root", "tabbar"],
mounted(){ mounted() {
this.getOrderList(); this.getOrderList();
}, },
methods: { methods: {
async getOrderList(){ async getOrderList() {
const res = await getOrderList(this.status); const res = await getOrderList(this.status);
console.log(res) const current = this.orders.find((item) => item.status === this.status);
const current = this.orders.find(item => item.status === this.status); current.list = res.results;
current.list = res.results
}, },
onOrderChange(e){ onOrderChange() {
console.log(e, this.status)
this.getOrderList(); this.getOrderList();
} },
} },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
.operation-bar{ .operation-bar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 .4rem; padding: 0 0.4rem;
color: #333; color: #333;
margin-bottom: .4rem; margin-bottom: 0.4rem;
.position{ .position {
line-height: .37rem; line-height: 0.37rem;
color: green; color: green;
span{ span {
font-size: .37rem; font-size: 0.37rem;
display: inline-block; display: inline-block;
margin-right: .13rem; margin-right: 0.13rem;
} }
} }
.show-mode{ .show-mode {
line-height: .37rem; line-height: 0.37rem;
span{ span {
font-size: .37rem; font-size: 0.37rem;
display: inline-block; display: inline-block;
margin-left: .13rem; margin-left: 0.13rem;
} }
} }
} }
.temple-list-container{ .temple-list-container {
background: #f5f5f5; background: #f5f5f5;
.temple-container{ .temple-container {
padding: .4rem; padding: 0.4rem;
} }
.temple-map{ .temple-map {
height: 100%; height: 100%;
background: #f5f5f5; background: #f5f5f5;
} }
} }
.order-container{ .order-container {
background: #f5f5f5; background: #f5f5f5;
padding: .4rem; padding: 0.4rem;
} }
</style> </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 = { module.exports = {
publicPath: '/wap/', publicPath: "./",
outputDir: 'wap', outputDir: "wap",
productionSourceMap: false, productionSourceMap: false,
filenameHashing: true, filenameHashing: true,
devServer: { devServer: {
// https:true, // https:true,
host: '0.0.0.0', host: "0.0.0.0",
disableHostCheck: false, disableHostCheck: false,
proxy: { proxy: {
'/api': { "/api": {
target: process.env.VUE_APP_HOST, target: process.env.VUE_APP_HOST,
changeOrigin: true changeOrigin: true,
} },
} },
}, },
chainWebpack: config => { chainWebpack: (config) => {
const oneOfsMap = config.module.rule('scss').oneOfs.store; const oneOfsMap = config.module.rule("scss").oneOfs.store;
oneOfsMap.forEach(item => { oneOfsMap.forEach((item) => {
item.use('sass-resources-loader').loader('sass-resources-loader').options({ item.use("sass-resources-loader")
resources: './src/assets/scss/common.scss' .loader("sass-resources-loader")
}).end(); .options({
}) resources: "./src/assets/scss/common.scss",
})
.end();
});
// config.plugin('compression').use( // config.plugin('compression').use(
// new CompressionWebpackPlugin({ // new CompressionWebpackPlugin({
@@ -37,27 +40,23 @@ module.exports = {
// config.resolve.plugins.delete('prefetch'); // config.resolve.plugins.delete('prefetch');
// config.resolve.plugins.delete('prerload'); // config.resolve.plugins.delete('prerload');
}, },
configureWebpack: config => { configureWebpack: (config) => {
config.plugins.forEach(plugin => { config.plugins.forEach((plugin) => {
if(plugin instanceof HtmlWebpackPlugin){ if (plugin instanceof HtmlWebpackPlugin) {
plugin.options.title = '自在福田 - 寺庙联盟' plugin.options.title = "自在福田 - 寺庙联盟";
} }
}) });
}, },
css: { css: {
sourceMap: false, sourceMap: false,
loaderOptions: { loaderOptions: {
scss: { scss: {
data: null, data: null,
}, },
postcss: { 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