update

.env.development

@@ -1,4 +1,4 @@
-VUE_APP_HOST=https://test-temple.wdx-tc.com/
+VUE_APP_HOST=https://admin.zizaifutian.com/
 # VUE_APP_HOST=https://demo.6bsq.com/
 NODE_ENV = development
 VUE_APP_TMAP_KEY=ZFGBZ-76ICF-BG5JY-NH4HX-MQOOJ-VJB4E

.env.production

@@ -1,3 +1,3 @@
-VUE_APP_HOST=https://prod-temple.wdx-tc.com/
+VUE_APP_HOST=https://admin.zizaifutian.com/
 VUE_APP_TMAP_KEY=ZFGBZ-76ICF-BG5JY-NH4HX-MQOOJ-VJB4E
 NODE_ENV=production

package.json

@@ -35,7 +35,7 @@
         "compression-webpack-plugin": "5.0.0",
         "eslint": "^6.7.2",
         "eslint-plugin-vue": "^6.2.2",
-    "sass": "^1.43.4",
+        "sass": "^1.89.0",
         "sass-loader": "^7.1.0",
         "sass-resources-loader": "^2.2.4",
         "vue-template-compiler": "^2.6.11"

src/api/index.js

@@ -1,57 +1,57 @@
-import service from './service';
+import service from "./service";
 
-function formatRegion(data){
+function formatRegion(data) {
     const result = [];
-    for(let i = 0; i < data.length; i++){
+    for (let i = 0; i < data.length; i++) {
         const obj = {
             value: data[i].id,
             text: data[i].name,
+        };
+        if (data[i].children) {
+            obj.children = formatRegion(data[i].children);
         }
-        if(data[i].children){
-            obj.children = formatRegion(data[i].children)
-        }
-        result.push(obj)
+        result.push(obj);
     }
     return result;
 }
 
 // 获取法师称谓
-const getMonkAppellation = () => service.get('/api/master/get-rank');
+const getMonkAppellation = () => service.get("/api/master/get-rank");
 
 // 获取省市区数据
 const getRegion = async () => {
-    const region = localStorage.getItem('region');
+    const region = localStorage.getItem("region");
     let data = [];
-    if(region === null){
-        const _data = await service.get('/api/region/get-region');
+    if (region === null) {
+        const _data = await service.get("/api/region/get-region");
         data = [].concat(formatRegion(_data));
-        localStorage.setItem('region', JSON.stringify(data))
+        localStorage.setItem("region", JSON.stringify(data));
     } else {
-        data = JSON.parse(region)
+        data = JSON.parse(region);
     }
-    return data
-}
+    return data;
+};
 
 // 寺院进驻
-const postTemple = data => service.post('/api/temple/settled', data);
+const postTemple = (data) => service.post("/api/temple/settled", data);
 
 // 寺院进驻协议
-const getTempleAgreement = () => service.get('/api/temple-agreement');
+const getTempleAgreement = () => service.get("/api/temple-agreement");
 
 // 上传
-const uploadFile = data => service.post('/api/upload', data);
+const uploadFile = (data) => service.post("/api/upload", data);
 
 // 认证法师提交
-const certifyMonk = data => service.post('/api/master/certify', data);
+const certifyMonk = (data) => service.post("/api/master/certify", data);
 
 // 用户数据
-const getUserData = () => service.get('/api/get-user-data');
+const getUserData = () => service.get("/api/get-user-data");
 
 // 获取短信验证码
-const getMobileValidateCode = mobile => service.post('/api/send-sms', { mobile });
+const getMobileValidateCode = (mobile) => service.post("/api/send-sms", { mobile });
 
 // 验证短信验证码
-const postMobileCode = (mobile, code) => service.post('/api/sms-validate', { mobile, code });
+const postMobileCode = (mobile, code) => service.post("/api/sms-validate", { mobile, code });
 
 // 添砖加瓦日行一善商品
 const getGoodsDetail = (goods_type, goods_id, temple_id) => service.get(`/api/${goods_type}/get-info?id=${goods_id}&temple_id=${temple_id}`);
@@ -60,31 +60,31 @@ const getGoodsDetail = (goods_type, goods_id, temple_id) => service.get(`/api/${
 const getGoodsLightDetail = (goods_type, goods_id, temple_id) => service.get(`/api/temple/light?temple_id=${temple_id}`);
 
 // 创建日行一善商品订单
-const createFriendlyDayOrder = data => service.post('/api/order/create-friendly', data);
+const createFriendlyDayOrder = (data) => service.post("/api/order/create-friendly", data);
 
 //创建通用商品订单
-const createCommonOrder = data => service.post(`/api/order/create-common`, data);
+const createCommonOrder = (data) => service.post(`/api/order/create-common`, data);
 
 //创建佛前供灯订单
-const createLightOrder = data => service.post(`/api/order/create-light`, data);
+const createLightOrder = (data) => service.post(`/api/order/create-light`, data);
 
 // 创建添砖加瓦订单
-const createBrickDayOrder = data => service.post('/api/order/create-tile', data);
+const createBrickDayOrder = (data) => service.post("/api/order/create-tile", data);
 
 // 获取功德芳名
-const getMeritName = () => service.get(`/api/order/get-merit-list`)
+const getMeritName = () => service.get(`/api/order/get-merit-list`);
 
 // 添加功德芳名
-const postMeritName = name => service.post(`/api/order/create-merit-name?name=${name}`)
+const postMeritName = (name) => service.post(`/api/order/create-merit-name?name=${name}`);
 
 //获取心愿列表
-const getDreamList = (count = 8) => service.get(`/api/order/get-dream-list?row=${count}`)
+const getDreamList = (count = 8) => service.get(`/api/order/get-dream-list?row=${count}`);
 
 //删除功德芳名
-const deleteMeritName = nameId => service.delete(`/api/order/delete-merit-name?merit_name_id=${nameId}`);
+const deleteMeritName = (nameId) => service.delete(`/api/order/delete-merit-name?merit_name_id=${nameId}`);
 
 // 获取微信签名
-const getWechatSign = url => service.get(`/api/wx/sign?url=${url}`)
+const getWechatSign = (url) => service.get(`/api/wx/sign?url=${url}`);
 
 // 获取功课列表
 const getCourseList = () => service.get(`/api/course/get-list`);
@@ -99,55 +99,58 @@ const getTempleIndex = (temple_id = 1) => service.get(`/api/temple/index?temple_
 const getTempleDetail = (temple_id = 1) => service.get(`/api/temple/certify-show?temple_id=${temple_id}`);
 
 // 法师、监院人员信息详情
-const getMasterDetail = master_id => service.get(`/api/master/show?master_id=${master_id}`);
+const getMasterDetail = (master_id) => service.get(`/api/master/show?master_id=${master_id}`);
 
 // 添加关注
-const toggleCollect = dynamic_id => service.get(`/api/dynamic/collect?dynamic_id=${dynamic_id}`);
+const toggleCollect = (dynamic_id) => service.get(`/api/dynamic/collect?dynamic_id=${dynamic_id}`);
 
 // 根据订单ID获取支付参数
-const createPay = order_id => service.get(`/api/order/pay?order_id=${order_id}`);
+const createPay = (order_id) => service.get(`/api/order/pay?order_id=${order_id}`);
 
 // 获取随喜金额列表
-const getRandMoney = () => service.get(`/api/order/get-rand-money`)
+const getRandMoney = () => service.get(`/api/order/get-rand-money`);
 
 // 功课详情计数
 const postCount = (course_id, data) => service.put(`/api/course/count/${course_id}`, data);
 
 // 功德箱
-const getMeritBox = (temple_id = '', type, page,  size = 10, domain = '3') => service.get(`/api/temple/get-merit-box?temple_id=${temple_id}&type=${type}&page=${page}&size=${size}&domain=${domain}`,)
+const getMeritBox = (temple_id = "", type, page, size = 10, domain = "3") => service.get(`/api/temple/get-merit-box?temple_id=${temple_id}&type=${type}&page=${page}&size=${size}&domain=${domain}`);
 
 // 添加功德箱订单
-const createMeritBoxOrder = data => service.post(`/api/order/create-merit-box`, data)
+const createMeritBoxOrder = (data) => service.post(`/api/order/create-merit-box`, data);
 
 // 获取动态（佛事）列表
-const getDynamicData = (temple_id = '', page = 1, goods_id = '', size = 10) => service.get(`/api/dynamic/get-page?temple_id=${temple_id}&page=${page}&size=${size}&goods_id=${goods_id}`);
+const getDynamicData = (temple_id = "", page = 1, goods_id = "", size = 10) => service.get(`/api/dynamic/get-page?temple_id=${temple_id}&page=${page}&size=${size}&goods_id=${goods_id}`);
 
 // 获取动态列表
-const getDynamicDataByGoodsId = (temple_id = '', page = 1, goods_id = '', goods_type = '', size = 10) => service.get(`/api/dynamic/get-list?temple_id=${temple_id}&page=${page}&size=${size}&goods_id=${goods_id}&goods_type=${goods_type}`);
+const getDynamicDataByGoodsId = (temple_id = "", page = 1, goods_id = "", goods_type = "", size = 10) =>
+    service.get(`/api/dynamic/get-list?temple_id=${temple_id}&page=${page}&size=${size}&goods_id=${goods_id}&goods_type=${goods_type}`);
 
 // 获取动态（佛事）详情
-const getDynamicDetail = (dynamic_id = '') => service.get(`/api/dynamic/detail?id=${dynamic_id}`);
+const getDynamicDetail = (dynamic_id = "") => service.get(`/api/dynamic/detail?id=${dynamic_id}`);
 
 // 通用商品列表（功德无量）
-const getCommonGoods = (temple_id = '', page, size = 10) => service.get(`/api/common/get-list?temple_id=${temple_id}&page=${page}&size=${size}`);
+const getCommonGoods = (temple_id = "", page, size = 10) => service.get(`/api/common/get-list?temple_id=${temple_id}&page=${page}&size=${size}`);
 
 // 获取订单榜
-const getOrderCompare = (temple_id = '1', page = 1,  type = '', goods_id = '', goods_type = '', size = 3) => service.get(`/api/order/get-compare?temple_id=${temple_id}&page=${page}&type=${type}&goods_id=${goods_id}&goods_type=${goods_type}&limit=${size}`);
+const getOrderCompare = (temple_id = "1", page = 1, type = "", goods_id = "", goods_type = "", size = 3) =>
+    service.get(`/api/order/get-compare?temple_id=${temple_id}&page=${page}&type=${type}&goods_id=${goods_id}&goods_type=${goods_type}&limit=${size}`);
 
 // 根据agent_id获取订单榜
-const getOrderCompareByAgentId = (agent_id = '1', type = '', goods_id = '', goods_type = '') => service.get(`/api/order/get-compare?agent_id=${agent_id}&type=${type}&goods_id=${goods_id}&goods_type=${goods_type}`);
+const getOrderCompareByAgentId = (agent_id = "1", type = "", goods_id = "", goods_type = "") =>
+    service.get(`/api/order/get-compare?agent_id=${agent_id}&type=${type}&goods_id=${goods_id}&goods_type=${goods_type}`);
 
 // 寺院列表
-const getTempleList = (keywords = '', lng = '', lat = '', page = 1, size = 10) => service.get(`/api/temple/get-List?keywords=${keywords}&lng=${lng}&lat=${lat}&page=${page}&size=${size}`)
+const getTempleList = (keywords = "", lng = "", lat = "", page = 1, size = 10) => service.get(`/api/temple/get-List?keywords=${keywords}&lng=${lng}&lat=${lat}&page=${page}&size=${size}`);
 
 // 我的关注
-const getMyCollectionList = (page = 1, size = 10) => service.get(`/api/dynamic/get-collect-list?page=${page}&size=${size}`)
+const getMyCollectionList = (page = 1, size = 10) => service.get(`/api/dynamic/get-collect-list?page=${page}&size=${size}`);
 
 // 订单列表
-const getOrderList = (status = 0, page = 1, size = 10) => service.get(`/api/order/get-page?status=${status}&page=${page}&size=${size}`)
+const getOrderList = (status = 0, page = 1, size = 10) => service.get(`/api/order/get-page?status=${status}&page=${page}&size=${size}`);
 
 // 订单详情
-const getOrder = order_id => service.get(`/api/order/details?id=${order_id}`);
+const getOrder = (order_id) => service.get(`/api/order/details?id=${order_id}`);
 
 // 客服中心
 const getCustomerList = () => service.get(`/api/customer/get-list`);
@@ -159,19 +162,22 @@ const getCertList = () => service.get(`/api/user/get-cert-list`);
 const getHotWords = () => service.get(`/api/keywords/get-list`);
 
 // 获取入驻模板
-const getStationTemplate = template_id => service.get(`/api/temple-template-share?id=${template_id}`);
+const getStationTemplate = (template_id) => service.get(`/api/temple-template-share?id=${template_id}`);
 
 // 平台首页
-const getPlatformHome = agent_id => service.get(`/api/home?agent_id=${agent_id}`)
+const getPlatformHome = (agent_id) => service.get(`/api/home?agent_id=${agent_id}`);
 
 // 查询是否登录
-const hasLogin = () => service.get('/api/has-login');
+// const hasLogin = () => service.get('/api/has-login');
+const hasLogin = () => {
+    return Promise.resolve();
+};
 
 // 查询
-const getMeritTypes = () => service.get('/api/order/get-merit-types');
+const getMeritTypes = () => service.get("/api/order/get-merit-types");
 
 // 支付广告
-const getPayAdv = () => service.get('/api/ad/ad-pay')
+const getPayAdv = () => service.get("/api/ad/ad-pay");
 
 export {
     getPayAdv,
@@ -223,4 +229,4 @@ export {
     getCertList,
     getStationTemplate,
     getPlatformHome,
-}
+};

src/api/service.js

@@ -1,62 +1,60 @@
-import axios from 'axios';
-import { Toast } from 'vant';
-import qs from 'qs'
-import router from '../router';
-import utils from '../util'
+import axios from "axios";
+import { Toast } from "vant";
+import qs from "qs";
+import router from "../router";
+import utils from "../util";
 
-const baseURL = process.env.NODE_ENV === 'development' ? '/' : process.env.VUE_APP_HOST
+const baseURL = process.env.NODE_ENV === "development" ? "/" : process.env.VUE_APP_HOST;
 
 const instance = axios.create({
     baseURL,
     timeout: 15000,
     headers: {
-        "env": process.env.NODE_ENV,
-        "Accept": "*",
-        "Content-Type": "application/x-www-form-urlencoded"
+        env: process.env.NODE_ENV,
+        Accept: "*",
+        "Content-Type": "application/x-www-form-urlencoded",
     },
-})
+});
 
-instance.interceptors.request.use(request => {
+instance.interceptors.request.use((request) => {
     const { query } = router.currentRoute;
-    if(query.no_login){
-        request.url = utils.addExternalParamsToQuery(request.url, 'no_login', 1)
+    if (query.no_login) {
+        request.url = utils.addExternalParamsToQuery(request.url, "no_login", 1);
     }
-    if(request.url.includes('upload')){
-        return request
+    if (request.url.includes("upload")) {
+        return request;
     }
-    if((request.method === 'post' || request.method === 'put' )&& !request.url.includes('post')){
-        request.data = qs.stringify(request.data)
+    if ((request.method === "post" || request.method === "put") && !request.url.includes("post")) {
+        request.data = qs.stringify(request.data);
         return request;
     }
     return request;
-})
+});
 
-instance.interceptors.response.use(response => {
+instance.interceptors.response.use((response) => {
     const { path, query } = router.currentRoute;
-    if(response.status === 200){
-        if(response.data.code === 0){
+    if (response.status === 200) {
+        if (response.data.code === 0) {
             return response.data.data;
         }
-        if(response.data.code === 100007){
-            location.href = '/api/wx/oauth?jumpUrl='+encodeURIComponent(location.href)
-            return 
+        if (response.data.code === 100007) {
+            location.href = "/api/wx/oauth?jumpUrl=" + encodeURIComponent(location.href);
+            return;
         }
-        console.log('query', new URLSearchParams(query).toString())
-        console.log('fullPath', path)
-        if(response.data.code === 1000023){
-            Toast('请验证手机号')
+        if (response.data.code === 1000023) {
+            Toast("请验证手机号");
             const queryString = new URLSearchParams(query).toString();
-            router.push({ name: 'get-user-phone', query: { redirectPath: path, redirectPathQuery: encodeURIComponent(queryString)}});
+            router.push({ name: "get-user-phone", query: { redirectPath: path, redirectPathQuery: encodeURIComponent(queryString) } });
             return Promise.reject();
         }
-        if(response.data.code !== 0){
-            Toast.fail(response.data.message)
+        if (response.data.code !== 0) {
+            Toast.fail(response.data.message);
         }
     }
-    if(response.status !== 200){
-        Toast.fail('服务器错误')
+    if (response.status !== 200) {
+        Toast.fail("服务器错误");
     }
     return Promise.reject(response);
-})
+});
 
 export default instance;

src/common/wechat-web.js

@@ -3,52 +3,44 @@ import util from "@/util";
 
 function signToWechat(config, shareConfig) {
     if (!wx) {
-        console.warn('请安装微信网页JS-SDK, url: https://res2.wx.qq.com/open/js/jweixin-1.6.0.js');
+        console.warn("请安装微信网页JS-SDK, url: https://res2.wx.qq.com/open/js/jweixin-1.6.0.js");
     }
     const defaultConfig = {
         ...config,
         debug: false,
-        jsApiList: [
-            'onMenuShareTimeline',
-            'onMenuShareAppMessage',
-            'scanQRCode',
-            'getLocation',
-            'openLocation',
-            'updateAppMessageShareData',
-            'updateTimelineShareData'
-        ],
+        jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "scanQRCode", "getLocation", "openLocation", "updateAppMessageShareData", "updateTimelineShareData"],
     };
-    console.log('sign', wx);
     wx.config(defaultConfig);
-    wx.ready(function() {
-
-        console.log('wechat sdk config success');
+    wx.ready(function () {
+        console.log("wechat sdk config success");
         wechatInstance = wx;
 
         wx.onMenuShareAppMessage({
             title: shareConfig.title,
             desc: shareConfig.desc,
-            link: util.addExternalParamsToQuery(shareConfig.link, 'no_login', 1),
+            link: util.addExternalParamsToQuery(shareConfig.link, "no_login", 1),
             imgUrl: shareConfig.imgUrl,
-            complete: res => {
-                shareConfig.callback && shareConfig.callback({
-                    key: 'updateAppMessageShareData',
-                    ...res
+            complete: (res) => {
+                shareConfig.callback &&
+                    shareConfig.callback({
+                        key: "updateAppMessageShareData",
+                        ...res,
                     });
-            }
+            },
         });
 
         // // 分享朋友圈
         wx.onMenuShareTimeline({
             title: shareConfig.title,
-            link: util.addExternalParamsToQuery(shareConfig.link, 'no_login', 1),
+            link: util.addExternalParamsToQuery(shareConfig.link, "no_login", 1),
             imgUrl: shareConfig.imgUrl,
-            complete: res => {
-                shareConfig.callback && shareConfig.callback({
-                    key: 'updateTimelineShareData',
-                    ...res
+            complete: (res) => {
+                shareConfig.callback &&
+                    shareConfig.callback({
+                        key: "updateTimelineShareData",
+                        ...res,
                     });
-            }
+            },
         });
 
         // wx.updateAppMessageShareData({
@@ -81,9 +73,9 @@ function signToWechat(config, shareConfig) {
 function getLocation() {
     return new Promise((resolve, reject) => {
         wechatInstance.getLocation({
-            type: 'wgs84',
-            success: res => {
-                if(res.errMsg === 'getLocation:ok'){
+            type: "wgs84",
+            success: (res) => {
+                if (res.errMsg === "getLocation:ok") {
                     resolve(res);
                 } else {
                     reject();
@@ -91,26 +83,26 @@ function getLocation() {
             },
             error: () => {
                 reject();
-            }
+            },
         });
     });
 }
 
 function requestPayment(paymentConfig) {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
         wechatInstance.chooseWXPay({
             timestamp: paymentConfig.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
             nonceStr: paymentConfig.nonceStr, // 支付签名随机串，不长于 32 位
             package: paymentConfig.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
             signType: paymentConfig.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
             paySign: paymentConfig.paySign, // 支付签名
-            success: function(res) {
+            success: function (res) {
                 // 支付成功后的回调函数
                 resolve(res);
             },
             fail(res) {
                 alert(JSON.stringify(res));
-            }
+            },
         });
     });
 }
@@ -120,40 +112,40 @@ function openLocation(config) {
 }
 
 // 分享给朋友
-function updateAppMessageShareData(title = '', desc = '', link = '', imgUrl = '') {
+function updateAppMessageShareData(title = "", desc = "", link = "", imgUrl = "") {
     return new Promise((resolve) => {
         wechatInstance.updateAppMessageShareData({
             title,
             desc,
             link,
             imgUrl,
-            complete: res => {
+            complete: (res) => {
                 resolve(res);
-            }
+            },
         });
     });
 }
 
 // 分享到朋友圈
-function updateTimelineShareData(title = '', desc = '', link = '', imgUrl = '') {
+function updateTimelineShareData(title = "", desc = "", link = "", imgUrl = "") {
     return new Promise((resolve) => {
         wechatInstance.updateTimelineShareData({
             title,
             desc,
             link,
             imgUrl,
-            complete: res => {
+            complete: (res) => {
                 resolve(res);
-            }
+            },
         });
     });
 }
 
-function previewImage(current, urls){
+function previewImage(current, urls) {
     wechatInstance.previewImage({
-        current, urls
-    })
+        current,
+        urls,
+    });
 }
 
-
 export { signToWechat, getLocation, requestPayment, openLocation, updateAppMessageShareData, updateTimelineShareData, previewImage };

src/components/Thanksgiving/index.vue

@@ -10,7 +10,7 @@
             <div>
                 <div v-for="slide in type_nav" :key="slide.id" class="1231">
                     <div v-if="type_id === slide.id" class="123">
-                        <user-merit v-for="dynamic in slide.list" :key="dynamic.id" :data="dynamic" ></user-merit>
+                        <user-merit v-for="dynamic in slide.list" :key="dynamic.id" :data="dynamic"></user-merit>
                     </div>
                 </div>
             </div>
@@ -22,23 +22,22 @@
 <script>
 import { getOrderCompare, getOrderCompareByAgentId } from "@/api";
 export default {
-    name: 'thanks-giving',
+    name: "thanks-giving",
     props: {
         templeId: [String, Number],
         goodsType: {
             type: String,
         },
         goodsId: {
-            type: [String, Number]
+            type: [String, Number],
         },
         typeId: {
-            type: [String, Number]
+            type: [String, Number],
         },
         agentId: [String, Number],
-
     },
 
-    data(){
+    data() {
         return {
             type_id: this.typeId || 1,
             type_nav: [
@@ -47,38 +46,36 @@ export default {
                 { id: 3, title: "总榜", list: [] },
             ],
             page: 1,
-        }
+        };
     },
-    mounted(){
+    mounted() {
         this.getOrderCompare();
     },
     methods: {
-        onSetType(type){
+        onSetType(type) {
             this.type_id = type.id;
             this.getOrderCompare();
         },
-        async getOrderCompare(){
+        async getOrderCompare() {
             let res;
-            if(this.templeId){
-                res = await getOrderCompare(this.templeId || '1', this.page, this.type_id, this.goodsId, this.goodsType)
+            if (this.templeId) {
+                res = await getOrderCompare(this.templeId || "1", this.page, this.type_id, this.goodsId, this.goodsType);
             } else {
-                res = await getOrderCompareByAgentId(this.agentId, this.type_id, this.goodsId, this.goodsType)
+                res = await getOrderCompareByAgentId(this.agentId, this.type_id, this.goodsId, this.goodsType);
             }
-            const current = this.type_nav.find(item => item.id === this.type_id);
-            console.log('current', current)
-            current.list = res.list
-            console.log(this.type_nav)
+            const current = this.type_nav.find((item) => item.id === this.type_id);
+            current.list = res.list;
         },
-        onThankMore(){
+        onThankMore() {
             this.$router.push({
-                name: 'merit-box',
+                name: "merit-box",
                 query: {
                     type_id: this.type_id,
-                    temple_id: this.templeId
-                }
-            })
-        }
-    }
+                    temple_id: this.templeId,
+                },
+            });
+        },
+    },
 };
 </script>
 
@@ -109,15 +106,14 @@ export default {
             }
         }
     }
-    .body{
-        
-        .swiper-container{
+    .body {
+        .swiper-container {
             height: 5.33rem;
         }
-        .thanks-more{
+        .thanks-more {
             height: 1rem;
             line-height: 1rem;
-            font-size: .4rem;
+            font-size: 0.4rem;
             color: #333;
             text-align: center;
         }

src/components/content-expand/index.vue

@@ -1,86 +1,82 @@
 <template>
     <div class="content-expand">
-       <div class="content" :class="[contentOverflow && !show && 'multiple-line-3']" ref="wrapper" :style="{height: (show ? contentHeight : 100) + 'px'}">
+        <div class="content" :class="[contentOverflow && !show && 'multiple-line-3']" ref="wrapper" :style="{ height: (show ? contentHeight : 100) + 'px' }">
             <div ref="content">
                 <slot></slot>
             </div>
         </div>
         <span class="expand" v-if="contentOverflow" @click="toggle">
             <i class="iconfont icon-double-arrow-down-" :class="[show && 'iconfont-expand']"></i>
-            <span class="label">{{show ? '收起全文': '展开全文'}}</span>
+            <span class="label">{{ show ? "收起全文" : "展开全文" }}</span>
         </span>
     </div>
 </template>
 
 <script>
 export default {
-    name: 'content-expand',
-    data(){
+    name: "content-expand",
+    data() {
         return {
             wrapperHeight: 0,
             contentHeight: 0,
             show: false,
             wrapperContainerHeight: 0,
-            defaultContentHeight: 0
-        }
+            defaultContentHeight: 0,
+        };
     },
     computed: {
         contentOverflow: {
-            get(){
+            get() {
                 return this.contentHeight > this.wrapperHeight;
-            }
-        }
             },
-    updated() {
-
         },
-    mounted(){
-        this.wrapperHeight = this.$refs.wrapper.offsetHeight
-        this.contentHeight = this.$refs.content.offsetHeight
-        this.defaultContentHeight = this.$refs.content.querySelector('.goods-content').offsetHeight / (3/2)
-        console.log(this.defaultContentHeight)
+    },
+    updated() {},
+    mounted() {
+        this.wrapperHeight = this.$refs.wrapper.offsetHeight;
+        this.contentHeight = this.$refs.content.offsetHeight;
+        this.defaultContentHeight = this.$refs.content.querySelector(".goods-content").offsetHeight / (3 / 2);
         this.$nextTick(() => {
             this.wrapperContainerHeight = this.wrapperHeight;
-        })
+        });
     },
     methods: {
-        toggle(){
-            this.show = !this.show
-        }
-    }
-}
+        toggle() {
+            this.show = !this.show;
+        },
+    },
+};
 </script>
 
 <style lang="scss">
-.content-expand{
-    .content{
+.content-expand {
+    .content {
         line-height: 1.4;
-        font-size: .35rem;
+        font-size: 0.35rem;
         color: #888;
         letter-spacing: 1px;
         text-align: justify;
-        margin-top: .3rem;
+        margin-top: 0.3rem;
         overflow: hidden;
         height: 4em;
-        transition: height .3s linear;
+        transition: height 0.3s linear;
     }
-    .expand{
+    .expand {
         text-align: center;
         display: flex;
         justify-content: center;
         align-items: center;
         height: 1.07rem;
         color: #888;
-        .iconfont{
+        .iconfont {
             display: inline-block;
-            
         }
-        .iconfont-expand{
+        .iconfont-expand {
             transform: rotateZ(180deg);
         }
-        .label{
-            padding-left: .1rem;
-            font-size: .35rem;
+        .label {
+            padding-left: 0.1rem;
+            font-size: 0.35rem;
         }
     }
 }

src/components/detail-content-expand/index.vue

@@ -1,101 +1,96 @@
 <template>
     <div class="detail-content-expand">
-       <div class="content" :class="[contentOverflow && !show && '']" ref="wrapper" :style="{height: (show ? contentHeight : defaultContentHeight) + 'px'}">
+        <div class="content" :class="[contentOverflow && !show && '']" ref="wrapper" :style="{ height: (show ? contentHeight : defaultContentHeight) + 'px' }">
             <div ref="content" class="ref-content">
                 <slot></slot>
             </div>
         </div>
         <span class="expand" v-if="contentOverflow" @click="toggle">
             <i class="iconfont icon-double-arrow-down-" :class="[show && 'iconfont-expand']"></i>
-            <span class="label">{{show ? '收起全文': '展开全文'}}</span>
+            <span class="label">{{ show ? "收起全文" : "展开全文" }}</span>
         </span>
     </div>
 </template>
 
 <script>
 export default {
-    name: 'detail-content-expand',
+    name: "detail-content-expand",
     props: {
         selector: {
             type: String,
-            default: '.goods-content'
-        }
+            default: ".goods-content",
         },
-    data(){
+    },
+    data() {
         return {
             wrapperHeight: 0,
             contentHeight: 0,
             show: false,
             wrapperContainerHeight: 0,
-            defaultContentHeight: 0
-        }
+            defaultContentHeight: 0,
+        };
     },
     computed: {
         contentOverflow: {
-            get(){
+            get() {
                 return this.contentHeight > this.wrapperHeight;
-            }
-        }
             },
-    watch: {
-        '$slots'(val){
-            console.log('slots val',val)
-        }
         },
-    mounted(){
-        this.wrapperHeight = this.$refs.wrapper.offsetHeight
+    },
+
+    mounted() {
+        this.wrapperHeight = this.$refs.wrapper.offsetHeight;
         this.$nextTick(() => {
-            this.contentHeight = this.$refs.content.offsetHeight
+            this.contentHeight = this.$refs.content.offsetHeight;
             this.wrapperContainerHeight = this.wrapperHeight;
             this.refresh();
-        })
+        });
     },
     methods: {
-        toggle(){
-            this.show = !this.show
+        toggle() {
+            this.show = !this.show;
         },
-        refresh(){
+        refresh() {
             const selector = this.$refs.content.querySelector(this.selector);
-            if(!selector) {
+            if (!selector) {
                 this.defaultContentHeight = 100;
-                return
+                return;
             }
-            this.defaultContentHeight = selector.offsetHeight / (4/1)
-        }
-    }
-}
+            this.defaultContentHeight = selector.offsetHeight / (4 / 1);
+        },
+    },
+};
 </script>
 
 <style lang="scss">
-.detail-content-expand{
-    .content{
+.detail-content-expand {
+    .content {
         line-height: 1.4;
-        font-size: .35rem;
+        font-size: 0.35rem;
         color: #888;
         letter-spacing: 1px;
         text-align: justify;
-        margin-top: .3rem;
+        margin-top: 0.3rem;
         overflow: hidden;
         height: 4em;
-        transition: height .3s linear;
+        transition: height 0.3s linear;
     }
-    .expand{
+    .expand {
         text-align: center;
         display: flex;
         justify-content: center;
         align-items: center;
         height: 1.07rem;
         color: #888;
-        .iconfont{
+        .iconfont {
             display: inline-block;
-            
         }
-        .iconfont-expand{
+        .iconfont-expand {
             transform: rotateZ(180deg);
         }
-        .label{
-            padding-left: .1rem;
-            font-size: .35rem;
+        .label {
+            padding-left: 0.1rem;
+            font-size: 0.35rem;
         }
     }
 }

src/components/scroll-view/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="scroll-wrapper" ref="wrapper" :style="{height: wrapperHeight + 'px'}">
+    <div class="scroll-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
         <div class="scroll-content">
             <slot></slot>
         </div>
@@ -11,10 +11,10 @@ import BScroll from "better-scroll";
 
 export default {
     name: "scroll-view",
-    data(){
+    data() {
         return {
-            wrapperHeight: 0
-        }
+            wrapperHeight: 0,
+        };
     },
     props: {
         /**
@@ -83,12 +83,12 @@ export default {
             default: 20,
         },
         height: {
-            type: Number
-        }
+            type: Number,
+        },
     },
     mounted() {
         // 保证在DOM渲染完毕后初始化better-scroll
-        this.wrapperHeight = this.height || this.$parent.$el.offsetHeight
+        this.wrapperHeight = this.height || this.$parent.$el.offsetHeight;
         setTimeout(() => {
             this._initScroll();
         }, 20);
@@ -118,7 +118,6 @@ export default {
             if (this.pullup) {
                 this.scroll.on("scrollEnd", () => {
                     // 滚动到底部
-					console.log(this.scroll.y, this.scroll.maxScrollY + 50)
                     if (this.scroll.y <= this.scroll.maxScrollY + 50) {
                         this.$emit("pullup");
                     }
@@ -160,8 +159,7 @@ export default {
         },
         scrollToElement() {
             // 代理better-scroll的scrollToElement方法
-			this.scroll &&
-				this.scroll.scrollToElement.apply(this.scroll, arguments);
+            this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments);
         },
     },
     watch: {
@@ -172,11 +170,11 @@ export default {
             }, this.refreshDelay);
         },
         height: {
-            handler(val){
+            handler(val) {
                 this.wrapperHeight = val;
                 this.scroll && this.scroll.refresh();
-            }
-        }
+            },
+        },
     },
 };
 </script>

src/components/uploader/index.vue

@@ -4,62 +4,57 @@
 </template>
 
 <script>
-import { uploadFile } from '@/api'
+import { uploadFile } from "@/api";
 export default {
-    name: 'uploader',
+    name: "uploader",
     props: {
         maxCount: {
             type: Number,
-            default: Infinity
+            default: Infinity,
         },
         maxSize: Number,
         value: {
             type: Array,
-            default(){
-                return []
-            }
-        }
+            default() {
+                return [];
             },
-    data(){
+        },
+    },
+    data() {
         return {
-            fileList: []
-        }
+            fileList: [],
+        };
     },
     watch: {
-        fileList(val){
-            this.$emit('input', val)
-        }
+        fileList(val) {
+            this.$emit("input", val);
+        },
     },
     methods: {
-        isOverSize(){
-            console.log(this.maxCount * this.maxSize * 1024)
-            return 500 * 1024
+        isOverSize() {
+            return 500 * 1024;
         },
-        onOversize(){
-            console.log(this.$props)
-            this.$toast(`文件大小不能超过${this.isOverSize()}kb`)
+        onOversize() {
+            this.$toast(`文件大小不能超过${this.isOverSize()}kb`);
         },
-        async onBeforeUpload(obj){
-            console.log(obj.file.size)
+        async onBeforeUpload(obj) {
             const type = Object.prototype.toString;
-            if(type.call(obj) === '[object Object]'){
+            if (type.call(obj) === "[object Object]") {
                 const formData = new FormData();
-                formData.append('photo', obj.file)
-                const res = await uploadFile(formData)
-                obj.url = res.url
+                formData.append("photo", obj.file);
+                const res = await uploadFile(formData);
+                obj.url = res.url;
             }
 
-            if(type.call(obj) === '[object Array]'){
-                for(let file of obj){
+            if (type.call(obj) === "[object Array]") {
+                for (let file of obj) {
                     const formData = new FormData();
-                    formData.append('photo', file.file)
-                    const res = await uploadFile(formData)
-                    file.url = res.url
+                    formData.append("photo", file.file);
+                    const res = await uploadFile(formData);
+                    file.url = res.url;
                 }
-                
             }
-           
         },
-    }
-}
+    },
+};
 </script>

src/mixins/index.js

@@ -1,50 +1,50 @@
-import { Toast } from 'vant';
-import { getWechatSign } from '@/api';
-import { signToWechat } from '@/common/wechat-web';
+import { Toast } from "vant";
+import { getWechatSign } from "@/api";
+import { signToWechat } from "@/common/wechat-web";
 
 export default {
     directives: {
         numberOnly: {
-            bind: function(el) {
-                el.handler = function() {
+            bind: function (el) {
+                el.handler = function () {
                     // el.value = el.value.replace(/\D+/, '')
-                    el.value = el.value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')
-                }
-                el.addEventListener('input', el.handler)
+                    el.value = el.value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, "$1");
+                };
+                el.addEventListener("input", el.handler);
+            },
+            unbind: function (el) {
+                el.removeEventListener("input", el.handler);
             },
-            unbind: function(el) {
-                el.removeEventListener('input', el.handler)
-            }
         },
         copy: {
-            bind(el, binding, vnode){
-                console.log(el, binding, vnode)
-
-                el.addEventListener('click', () => {
-                    const input = document.createElement('textarea');
+            bind(el, binding) {
+                el.addEventListener(
+                    "click",
+                    () => {
+                        const input = document.createElement("textarea");
                         input.value = binding.value;
-                    document.body.appendChild(input)
+                        document.body.appendChild(input);
                         input.select();
-                    document.execCommand('copy');
-                    document.body.removeChild(input)
-                    Toast.success('复制成功')
-                }, false)
+                        document.execCommand("copy");
+                        document.body.removeChild(input);
+                        Toast.success("复制成功");
+                    },
+                    false
+                );
+            },
         },
-        }
     },
     methods: {
-        wechatReady(shareConfig){
-            console.log('wechatReady get share config', shareConfig)
-            getWechatSign(location.href).then(res => {
+        wechatReady(shareConfig) {
+            console.log("wechatReady get share config", shareConfig);
+            getWechatSign(location.href).then((res) => {
                 signToWechat(res, shareConfig);
             });
         },
-        shareToWechat(wx, shareConfig){
-            if(!shareConfig){
+        shareToWechat(wx, shareConfig) {
+            if (!shareConfig) {
                 return console.error(`wechat share config error: ${shareConfig}`);
             }
-            console.log('share', wx, shareConfig)
-
         },
         getHasFullScreen() {
             let result = false;
@@ -62,33 +62,33 @@ export default {
          * @param temple_id: 寺院id
          * @return void
          */
-        onPushToGoodsDetail(goods_type, goods_id, temple_id, spec_ids = ''){
+        onPushToGoodsDetail(goods_type, goods_id, temple_id, spec_ids = "") {
             const type = Object.prototype.toString;
-            if(type.call(spec_ids) !== '[object String]'){
-                spec_ids = spec_ids.toString()
+            if (type.call(spec_ids) !== "[object String]") {
+                spec_ids = spec_ids.toString();
             }
 
             if (goods_type == 1 || goods_type == 2 || goods_type == 4) {
                 this.$router.push({
-                    name: 'everyday-donation',
+                    name: "everyday-donation",
                     query: {
                         goods_type,
                         goods_id,
                         temple_id,
-                        spec_ids
+                        spec_ids,
                     },
                 });
                 return;
             }
             this.$router.push({
-                name: 'goods-detail',
+                name: "goods-detail",
                 query: {
                     goods_type,
                     goods_id,
                     temple_id,
-                    spec_ids
+                    spec_ids,
                 },
             });
-        }
-    }
-}
+        },
+    },
+};

src/pages/everyday-donation/index.vue

@@ -2,20 +2,20 @@
     <div class="everyday-donation" v-if="data">
         <div class="content-view">
             <div class="topbar" ref="topbar">
-                <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
+                <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{ backgroundColor: $route.meta.navBarBackgroundColor }" />
             </div>
             <swiper class="swiper-container" :options="swiperOption">
                 <swiper-slide v-for="(picture, index) in data.pictures" :key="index">
-                    <div style="height: 100vw;" class="picture">
-                        <img :src="picture" alt="">
+                    <div style="height: 100vw" class="picture">
+                        <img :src="picture" alt="" />
                     </div>
                 </swiper-slide>
             </swiper>
             <div class="monk-profile">
-                <h1 class="position">{{data.name}}</h1>
+                <h1 class="position">{{ data.name }}</h1>
                 <div class="bar">
                     <span class="status">进行中</span>
-                    <span>已有{{data.sales || 0}}人参与</span>
+                    <span>已有{{ data.sales || 0 }}人参与</span>
                 </div>
             </div>
             <div class="divider"></div>
@@ -44,7 +44,7 @@
                 <div class="support-head">
                     <span class="label">感恩功德</span>
                     <ul class="external">
-                        <li :class="[lTypeId === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType.id, 1)">{{lType.name}}</li>
+                        <li :class="[lTypeId === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType.id, 1)">{{ lType.name }}</li>
                     </ul>
                 </div>
                 <div>
@@ -67,11 +67,11 @@
                 </div>
                 <ul class="spec">
                     <li class="random">
-<!--                        <span class="border-circle" @click="showRandom = true">随喜</span>-->
+                        <!--                        <span class="border-circle" @click="showRandom = true">随喜</span>-->
                         <span class="border-circle" @click="onCustomeBrike">随喜</span>
                     </li>
                     <li v-for="(spec, index) in data.spec" :key="index">
-                        <span class="border-circle" :class="[Number(spec.money) === priceUnit && 'active', isDisabled(spec)]" @click="onPriceUnit(spec)">{{spec.money}}元</span>
+                        <span class="border-circle" :class="[Number(spec.money) === priceUnit && 'active', isDisabled(spec)]" @click="onPriceUnit(spec)">{{ spec.money }}元</span>
                     </li>
                 </ul>
                 <div class="auto-donate">
@@ -91,7 +91,7 @@
                     </div>
                 </div>
                 <div class="next-group">
-                    <span class="total">合计：￥{{priceTotal}}</span>
+                    <span class="total">合计：￥{{ priceTotal }}</span>
                     <button class="next" @click="onToPay">下一步</button>
                 </div>
             </div>
@@ -103,18 +103,13 @@
                 </div>
                 <ul class="spec brick-spec">
                     <li class="random" v-if="onlySpecs && onlySpecs.length == 0">
-                        <span class="border-circle" :class="[is_assign && 'active']" @click="onCustomeBrike">{{data.rule_btn}}</span>
+                        <span class="border-circle" :class="[is_assign && 'active']" @click="onCustomeBrike">{{ data.rule_btn }}</span>
                         <van-stepper v-model="buy_quantity" step="1" v-if="is_assign" />
                     </li>
                     <li v-for="(spec, index) in data.spec" :key="index">
-                        <span 
-                            class="border-circle" 
-                            :class="[
-                                Number(spec.money) === priceUnit && !is_assign &&  'active',
-                                isDisabled(spec),
-                            ]"
-                            @click="onPriceUnit(spec)"
-                        >{{spec.spec_name}} {{spec.donate_number * Number(data.price)}}元</span>
+                        <span class="border-circle" :class="[Number(spec.money) === priceUnit && !is_assign && 'active', isDisabled(spec)]" @click="onPriceUnit(spec)"
+                            >{{ spec.spec_name }} {{ spec.donate_number * Number(data.price) }}元</span
+                        >
                     </li>
                 </ul>
                 <div class="auto-donate">
@@ -135,8 +130,10 @@
                 </div>
                 <div class="next-group-wrapper">
                     <safe-area>
-                        <div class='next-group'>
-                            <span class="total">合计：<em>￥{{priceTotal}}</em></span>
+                        <div class="next-group">
+                            <span class="total"
+                                >合计：<em>￥{{ priceTotal }}</em></span
+                            >
                             <button class="next" :disabled="!priceUnitId" @click="onToPay">下一步</button>
                         </div>
                     </safe-area>
@@ -150,8 +147,8 @@
 </template>
 
 <script>
-import 'swiper/css/swiper.css'
-import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import "swiper/css/swiper.css";
+import { swiper, swiperSlide } from "vue-awesome-swiper";
 import { getDynamicDataByGoodsId, getGoodsDetail, getOrderCompare, hasLogin } from "@/api";
 
 export default {
@@ -159,20 +156,20 @@ export default {
         swiper,
         swiperSlide,
     },
-    data(){
+    data() {
         const { query } = this.$route;
-        let title = '详情';
-        if(query.goods_type === '1'){
-            title = '日行一善';
+        let title = "详情";
+        if (query.goods_type === "1") {
+            title = "日行一善";
         }
-        if(query.goods_type === '2'){
-            title = '添砖加瓦'
+        if (query.goods_type === "2") {
+            title = "添砖加瓦";
         }
         document.title = title;
-        for(let i in query){
-            query[i] = query[i].toString()
+        for (let i in query) {
+            query[i] = query[i].toString();
         }
-        let onlySpecs = query.spec_ids ? query.spec_ids.split(',').map(v => Number(v)) : null;
+        let onlySpecs = query.spec_ids ? query.spec_ids.split(",").map((v) => Number(v)) : null;
 
         return {
             onlySpecs,
@@ -184,92 +181,91 @@ export default {
             is_auto: false, // 是否自动行善
             showSpec: false,
             priceUnit: 0,
-            priceUnitId: '',
+            priceUnitId: "",
             monthQuantity: 1,
             is_assign: false, // 是否为自动认捐砖块数
             buy_quantity: 1, // 自定义认捐砖块数
             goodsDynamicList: [], // 商品动态列表
-            banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
+            banners: ["/1.jpg", "/2.jpg", "/3.jpg"],
             swiperOption: {
                 autoplay: 8000,
                 initialSlide: 1,
                 loop: true,
-                pagination: '.swiper-pagination',
+                pagination: ".swiper-pagination",
             },
             listType: 1,
             listTypes: [
-                { id: 1, name: '实时', },
-                { id: 2, name: '月榜', },
-                { id: 3, name: '总榜', },
+                { id: 1, name: "实时" },
+                { id: 2, name: "月榜" },
+                { id: 3, name: "总榜" },
             ],
             lTypeId: 1,
             payList: [],
             page: 1,
             noMore: false,
-        }
+        };
     },
     computed: {
-        priceTotal(){
+        priceTotal() {
             const { priceUnit, is_assign, is_auto, buy_quantity, monthQuantity } = this;
-            if(is_assign){
+            if (is_assign) {
                 return (priceUnit * 100 * buy_quantity) / 100;
             }
-            if(is_auto){
-                return (priceUnit * 100 * monthQuantity * 30) / 100
-            }
-            return (priceUnit * 100 ) / 100;
+            if (is_auto) {
+                return (priceUnit * 100 * monthQuantity * 30) / 100;
             }
+            return (priceUnit * 100) / 100;
         },
-    mounted(){
-        if(this.query.goods_type === '1'){
-            return this.getGoodsDetail('friendly');
+    },
+    mounted() {
+        if (this.query.goods_type === "1") {
+            return this.getGoodsDetail("friendly");
         }
-        if(this.query.goods_type === '2'){
-            return this.getGoodsDetail('tile');
+        if (this.query.goods_type === "2") {
+            return this.getGoodsDetail("tile");
         }
-        
     },
     methods: {
-        backHome(){
+        backHome() {
             const { query } = this.$router.currentRoute;
-            const name = query.temple_id === '1' ? 'home': 'temple-home'
-            this.$router.replace({ name, query: { temple_id: query.temple_id }})
+            const name = query.temple_id === "1" ? "home" : "temple-home";
+            this.$router.replace({ name, query: { temple_id: query.temple_id } });
         },
-        async onHasLoginToNext(){
+        async onHasLoginToNext() {
             await hasLogin();
-            this.showSpec = true
+            this.showSpec = true;
         },
-        isDisabled(spec){
+        isDisabled(spec) {
             const { id } = spec;
-            if(!this.onlySpecs) return false;
-            return !this.onlySpecs.includes(id) ? 'spec-disabled': ''
+            if (!this.onlySpecs) return false;
+            return !this.onlySpecs.includes(id) ? "spec-disabled" : "";
         },
         // 获取更多感恩功德1
-        loadMoreFn(){
+        loadMoreFn() {
             this.page += 1;
-            this.getPayRecords(this.lTypeId, this.page)
+            this.getPayRecords(this.lTypeId, this.page);
         },
         getSelectedSpec() {
             const { goods_type } = this.query;
-            if(goods_type === '2' || goods_type === '1'){
+            if (goods_type === "2" || goods_type === "1") {
                 // 随喜
-                if(this.is_assign){
+                if (this.is_assign) {
                     return {
-                        specId: '',
-                        specName: goods_type === '1' ? '随喜': this.data.rule_btn
+                        specId: "",
+                        specName: goods_type === "1" ? "随喜" : this.data.rule_btn,
+                    };
                 }
-                }
-                const spec = this.data.spec.find(item => item.id === this.priceUnitId);
-                if(!spec){
+                const spec = this.data.spec.find((item) => item.id === this.priceUnitId);
+                if (!spec) {
                     return {
-                        specId: '',
-                        specName: ''
-                    }
+                        specId: "",
+                        specName: "",
+                    };
                 }
                 return {
                     specId: spec.id,
                     specName: spec.spec_name,
-                }
+                };
             }
         },
         // 获取商品详情
@@ -278,43 +274,41 @@ export default {
             type = tile: 获取添砖加瓦商品
             type = common: 获取普通商品
         */
-        async getGoodsDetail(type){
+        async getGoodsDetail(type) {
             const { goods_id, temple_id, goods_type } = this.$route.query;
             const response = await getGoodsDetail(type, goods_id, temple_id);
-            if(this.query.goods_type === '2'){
-                response.spec = response.spec.map(v => ({ ...v, money: this.amountAbs(v.donate_number, Number(response.price))}))
+            if (this.query.goods_type === "2") {
+                response.spec = response.spec.map((v) => ({ ...v, money: this.amountAbs(v.donate_number, Number(response.price)) }));
             }
             await this.getDynamicDataByGoodsId(goods_id, goods_type);
             await this.getPayRecords(this.lTypeId, 1);
             this.data = response;
             this.$nextTick(() => {
-
-                this.$refs.contentWrap.refresh()
-                console.log('a', this.$refs.contentWrap)
-            })
-            if(!this.onlySpecs){
+                this.$refs.contentWrap.refresh();
+            });
+            if (!this.onlySpecs) {
                 const { donate_number, money, id } = this.data.spec[0];
                 const priceUnit = donate_number || money;
-                this.priceUnit = Number(priceUnit) * Number(this.data.price)
+                this.priceUnit = Number(priceUnit) * Number(this.data.price);
                 this.priceUnitId = id;
             }
             this.wechatReady({
                 ...this.data.shareConfig,
-                link: location.href
-            })
+                link: location.href,
+            });
         },
         // 获取感恩功德
-        async getPayRecords(lTypeId, page){
+        async getPayRecords(lTypeId, page) {
             this.page = page;
             this.lTypeId = lTypeId;
-            const res = await getOrderCompare(this.query.temple_id, this.page, this.lTypeId, this.query.goods_id, this.query.goods_type );
-            if(this.page === 1){
+            const res = await getOrderCompare(this.query.temple_id, this.page, this.lTypeId, this.query.goods_id, this.query.goods_type);
+            if (this.page === 1) {
                 this.payList = [];
             }
             this.payList = this.payList.concat(res.list);
             this.noMore = res.list.length === 0;
         },
-        async getDynamicDataByGoodsId(goods_id, goods_type){
+        async getDynamicDataByGoodsId(goods_id, goods_type) {
             const { temple_id } = this.$route.query;
             const res = await getDynamicDataByGoodsId(temple_id, this.page, goods_id, goods_type);
             this.goodsDynamicList = res;
@@ -322,49 +316,49 @@ export default {
         onMoreProcess() {
             const { goods_id, temple_id } = this.$route.query;
             this.$router.push({
-                name: 'buddha-activity',
+                name: "buddha-activity",
                 query: {
                     temple_id,
-                    goods_id
-                }
+                    goods_id,
+                },
             });
         },
         // 设置行善单价
-        onPriceUnit({id, money}){
+        onPriceUnit({ id, money }) {
             this.is_assign = false;
             this.priceUnit = Number(money);
             this.priceUnitId = id;
             this.buy_quantity = 1;
-            this.spec_id = '';
+            this.spec_id = "";
         },
-        onRandomNext({ money}){
+        onRandomNext({ money }) {
             this.anyPrice = money;
             this.priceUnit = money;
             this.onToPay();
         },
-        onToPay(){
+        onToPay() {
             // 不需要跳转到功德芳名
-            if(this.query.goods_type === '1'){
+            if (this.query.goods_type === "1") {
                 this.$router.push({
-                    name: 'pay',
+                    name: "pay",
                     query: {
                         ...this.$route.query,
                         is_auto: this.is_auto ? 1 : 0,
                         spec_id: this.priceUnitId,
                         friendly_time: this.monthQuantity,
                         title: this.data.name,
-                        subTitle: '日行一善捐赠',
+                        subTitle: "日行一善捐赠",
                         quantity: 1,
                         amount: this.priceTotal,
                         is_customized: this.is_assign ? 1 : 0,
                         price: this.priceUnit,
-                        from: 'friendly_day', // 标识为日行一善
+                        from: "friendly_day", // 标识为日行一善
+                    },
+                });
             }
-                })
-            }
-            if(this.query.goods_type === '2'){
+            if (this.query.goods_type === "2") {
                 this.$router.push({
-                    name: 'pay',
+                    name: "pay",
                     query: {
                         ...this.$route.query,
                         is_auto: this.is_auto ? 1 : 0,
@@ -378,105 +372,106 @@ export default {
                         is_customized: this.is_assign ? 1 : 0,
                         price: this.priceUnit,
                         buy_quantity: this.buy_quantity,
-                        from: 'brike', // 标识为填砖加瓦
-                    }
-                })
+                        from: "brike", // 标识为填砖加瓦
+                    },
+                });
             }
         },
-        amountAbs(number, price){
-            return (parseInt(number * 100, 10) * price) / 100
+        amountAbs(number, price) {
+            return (parseInt(number * 100, 10) * price) / 100;
         },
         // 自定义砖数
-        onCustomeBrike(){
+        onCustomeBrike() {
             this.priceUnit = Number(this.data.price) || 0;
             this.buy_quantity = 1;
             this.is_assign = true;
             this.showRandom = true;
-        }
-    }
-}
+        },
+    },
+};
 </script>
 
 <style lang="scss">
-.swiper-container{
+.swiper-container {
     background: #f5f5f5;
-    .picture, img{
+    .picture,
+    img {
         width: 100%;
         height: 100%;
     }
 }
 
-.process-content{
-    *{
+.process-content {
+    * {
         max-width: 100%;
     }
 }
 
-.caret{
-    padding-bottom: .2rem;
-    .head{
+.caret {
+    padding-bottom: 0.2rem;
+    .head {
         display: flex;
         justify-content: space-between;
-        font-size: .4rem;
-        padding: .4rem;
+        font-size: 0.4rem;
+        padding: 0.4rem;
         align-items: center;
-        margin-top: .13rem;
-        .iconfont{
-            font-size: .7rem;
+        margin-top: 0.13rem;
+        .iconfont {
+            font-size: 0.7rem;
         }
     }
-    .spec{
+    .spec {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr 1fr;
         grid-template-rows: 1fr 1fr;
-        grid-gap: .3rem;
-        padding: .4rem;
-        .random{
+        grid-gap: 0.3rem;
+        padding: 0.4rem;
+        .random {
             grid-column-start: 1;
             grid-column-end: 5;
             text-align: left;
-            span{
-                font-size: .35rem;
-                border-radius: .11rem;
+            span {
+                font-size: 0.35rem;
+                border-radius: 0.11rem;
                 width: auto;
                 display: inline-block;
-                padding: .3rem .7rem;
-                &:active{
+                padding: 0.3rem 0.7rem;
+                &:active {
                     background: #f5f5f5;
                 }
             }
-            span.spec-disabled{
+            span.spec-disabled {
                 pointer-events: none;
                 opacity: 0.6;
             }
         }
-        li{
+        li {
             text-align: center;
-            span{
-                font-size: .35rem;
+            span {
+                font-size: 0.35rem;
                 width: 100%;
                 display: inline-block;
                 vertical-align: top;
-                padding: .3rem 0;
+                padding: 0.3rem 0;
                 line-height: 1.2;
                 user-select: none;
                 color: #666;
-                &:active{
+                &:active {
                     background: rgba($primary-color, 0.1);
                 }
             }
-            span.spec-disabled{
+            span.spec-disabled {
                 pointer-events: none;
                 background: #f9f9f9;
                 color: #aaa;
             }
         }
     }
-    .brick-spec{
+    .brick-spec {
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 1fr 1fr 1fr;
-        grid-gap: .3rem;
-        .random{
+        grid-gap: 0.3rem;
+        .random {
             grid-column-start: 1;
             grid-column-end: 3;
             text-align: left;
@@ -484,117 +479,117 @@ export default {
             justify-content: space-between;
             align-items: center;
         }
-        span.active{
+        span.active {
             color: $primary-color;
         }
     }
-    .auto-donate{
-        padding: 0 .4rem;
-        margin-top: .6rem;
-        .label{
-            font-size: .4rem;
+    .auto-donate {
+        padding: 0 0.4rem;
+        margin-top: 0.6rem;
+        .label {
+            font-size: 0.4rem;
         }
-        .donate{
+        .donate {
             display: flex;
-            margin-top: .3rem;
+            margin-top: 0.3rem;
             justify-content: space-between;
             align-items: center;
-            span{
-                font-size: .35rem;
+            span {
+                font-size: 0.35rem;
             }
         }
     }
-    .auto-donate-time{
-        padding: .4rem ;
-        margin-top: .4rem;
-        .donate{
-            .label{
-                font-size: .4rem;
+    .auto-donate-time {
+        padding: 0.4rem;
+        margin-top: 0.4rem;
+        .donate {
+            .label {
+                font-size: 0.4rem;
             }
             display: flex;
             align-items: center;
             justify-content: space-between;
         }
-        .time-cycle{
+        .time-cycle {
             display: flex;
             align-items: flex-end;
-            .unit{
-                font-size: .3rem;
+            .unit {
+                font-size: 0.3rem;
                 color: #666;
-                padding-left: .2rem;
+                padding-left: 0.2rem;
             }
         }
     }
-    .next-group-wrapper{
+    .next-group-wrapper {
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         border-top: 1px solid #ededed;
     }
-    .next-group{
+    .next-group {
         display: flex;
         justify-content: space-between;
-        padding: .4rem;
+        padding: 0.4rem;
         background: white;
         align-items: center;
 
-        .total{
-            font-size: .4rem;
-            em{
+        .total {
+            font-size: 0.4rem;
+            em {
                 color: $primary-color;
-                font-size: .4rem;
+                font-size: 0.4rem;
                 font-weight: bold;
             }
         }
-        .next{
-            font-size: .4rem;
-            padding: .3rem 1rem;
+        .next {
+            font-size: 0.4rem;
+            padding: 0.3rem 1rem;
             background: $primary-color;
             border: 1px solid $primary-color;
             color: white;
-            border-radius: .1rem;
+            border-radius: 0.1rem;
         }
     }
 }
-.support{
-    .support-head{
-        padding: 0 .4rem;
+.support {
+    .support-head {
+        padding: 0 0.4rem;
         display: flex;
         justify-content: space-between;
         height: 1.07rem;
         line-height: 1.07rem;
-        .label{
-            font-size: .4rem;
+        .label {
+            font-size: 0.4rem;
             font-weight: bold;
         }
-        .external{
+        .external {
             display: flex;
             align-items: center;
-            li{
-                margin-left: .3rem;
-                font-size: .35rem;
+            li {
+                margin-left: 0.3rem;
+                font-size: 0.35rem;
                 color: #666;
             }
-            li.active{
+            li.active {
                 color: #333;
                 font-weight: bold;
             }
         }
     }
 }
-.everyday-donation{
+.everyday-donation {
     height: 100vh;
     position: relative;
-    .goods-content{
-        padding-left: .3rem;
-        padding-right: .3rem;
+    .goods-content {
+        padding-left: 0.3rem;
+        padding-right: 0.3rem;
         * {
             max-width: 100%;
-            font-size: .35rem;
+            font-size: 0.35rem;
         }
     }
-    .content-view{
+    .content-view {
         position: absolute;
         left: 0;
         top: 0;
@@ -603,34 +598,34 @@ export default {
         overflow-y: scroll;
         padding-bottom: calc(env(safe-area-inset-bottom) + 1.6rem);
     }
-    .monk-profile{
-        padding: .4rem;
-        margin-bottom: .2rem;
-        .position{
-            font-size: .5rem;
-            padding-top: .2rem;
+    .monk-profile {
+        padding: 0.4rem;
+        margin-bottom: 0.2rem;
+        .position {
+            font-size: 0.5rem;
+            padding-top: 0.2rem;
             text-align: justify;
             line-height: 1.3;
-            color: #19282E;
+            color: #19282e;
         }
-        .bar{
-            margin-top: .27rem;
+        .bar {
+            margin-top: 0.27rem;
         }
-        .status{
-            padding: .2rem .3rem;
+        .status {
+            padding: 0.2rem 0.3rem;
             background: orange;
             color: white;
             display: inline-block;
-            border-radius: .04rem;
-            margin-right: .3rem;
-            font-size: .3rem;
+            border-radius: 0.04rem;
+            margin-right: 0.3rem;
+            font-size: 0.3rem;
         }
-        span{
+        span {
             color: #666;
-            font-size: .28rem;
+            font-size: 0.28rem;
         }
     }
-    .merit-button-group{
+    .merit-button-group {
         text-align: center;
         position: fixed;
         bottom: 0;
@@ -638,18 +633,18 @@ export default {
         left: 0;
         right: 0;
         background: white;
-		padding: .4rem 0;
-        padding-bottom: calc(env(safe-area-inset-bottom) + .2rem);
-		.merit-button{
+        padding: 0.4rem 0;
+        padding-bottom: calc(env(safe-area-inset-bottom) + 0.2rem);
+        .merit-button {
             display: inline-block;
             background: $primary-color;
             color: white;
             height: 1.2rem;
-			font-size: .37rem;
+            font-size: 0.37rem;
             width: 60%;
-			padding: 0 .53rem;
-			border: .01rem solid $primary-color;
-			border-radius: 1.33rem
+            padding: 0 0.53rem;
+            border: 0.01rem solid $primary-color;
+            border-radius: 1.33rem;
         }
     }
 }

src/pages/goods-detail/components/fill-information.vue

@@ -1,19 +1,19 @@
 <template>
     <div>
         <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-group>
         <van-popup v-model="showDialog" position="bottom" safe-area-inset-bottom style="min-height: 50vh">
             <div class="add-merit-name" v-if="actionName === 'name'">
                 <h3 class="title">功德芳名</h3>
                 <div class="add-name">
-                    <input class="input" type="text" v-model="name" placeholder="请输入功德主姓名">
+                    <input class="input" type="text" v-model="name" placeholder="请输入功德主姓名" />
                     <button class="btn" @click="addName">添加</button>
                 </div>
                 <div class="name-group">
                     <span class="name" v-for="(name, index) in names" :key="name.id" @click="onSelectName(name)">
-                        {{name.name}} 
+                        {{ name.name }}
                         <i class="iconfont icon-biaodankongjianshanchu" @click.stop="onDeleteName(name, index)"></i>
                     </span>
                 </div>
@@ -23,7 +23,7 @@
                 <h3 class="title">心愿</h3>
                 <div class="desire-input">
                     <textarea class="desire-textarea" v-model="dream" type="text" maxlength="50" placeholder="请输入您的心愿" />
-                    <span>{{dream.length}}/50</span>
+                    <span>{{ dream.length }}/50</span>
                 </div>
                 <div class="desire-quike">
                     <div class="bar">
@@ -31,7 +31,7 @@
                         <span class="update" @click="getDreamList">换一组<i class="iconfont icon-shuaxin"></i></span>
                     </div>
                     <div class="name-group">
-                        <span class="name" v-for="(dream, index) in dreamList" :key="index" @click="desire = dream">{{dream}}</span>
+                        <span class="name" v-for="(dream, index) in dreamList" :key="index" @click="desire = dream">{{ dream }}</span>
                     </div>
                 </div>
                 <button class="confirm" @click="onConfirmDream">确认</button>
@@ -41,43 +41,43 @@
 </template>
 
 <script>
-import { getDreamList, getMeritName } from '@/api';
+import { getDreamList, getMeritName } from "@/api";
 
 export default {
-    data(){
+    data() {
         return {
             checked: false,
             showDialog: false,
-            actionName: 'name',
+            actionName: "name",
             person: {},
-            name: '',
-            dream: '',
-            desire: '',
+            name: "",
+            dream: "",
+            desire: "",
             names: [],
-            dreamList: []
-        }
+            dreamList: [],
+        };
     },
-    mounted(){
+    mounted() {
         this.getName();
         this.getDreamList();
     },
     methods: {
-        onAction(name){
+        onAction(name) {
             this.showDialog = true;
             this.actionName = name;
         },
-        onConfirmMeritName(){
-            this.$emit('change', {
+        onConfirmMeritName() {
+            this.$emit("change", {
                 ...this.person,
                 merit_name_id: this.person.id,
                 dream: this.dream,
-            })
+            });
         },
-        onSelectName(name){
+        onSelectName(name) {
             this.person = name;
             this.showDialog = false;
         },
-        onConfirmDream(){
+        onConfirmDream() {
             this.showDialog = false;
             this.dream = this.desire;
             this.onConfirmMeritName();
@@ -88,115 +88,113 @@ export default {
             this.names = data;
         },
         //获取心愿列表
-        async getDreamList(){
+        async getDreamList() {
             const list = await getDreamList();
-            console.log(list)
             this.dreamList = list;
-        }
-    }
+        },
+    },
 };
 </script>
 
 <style lang="scss">
-.add-merit-name{
-    padding: .4rem;
-    .title{
-        font-size: .4rem;
-        margin-bottom: .4rem;
+.add-merit-name {
+    padding: 0.4rem;
+    .title {
+        font-size: 0.4rem;
+        margin-bottom: 0.4rem;
     }
-    .add-name{
+    .add-name {
         display: flex;
-        .input{
+        .input {
             flex: 1;
-            height: .8rem;
-            line-height: .8rem;
-            padding-left: .3rem;
+            height: 0.8rem;
+            line-height: 0.8rem;
+            padding-left: 0.3rem;
             border: 1px solid #ddd;
-            border-radius: .11rem;
-            font-size: .4rem;
+            border-radius: 0.11rem;
+            font-size: 0.4rem;
         }
-        .btn{
-            padding: .2rem .6rem;
+        .btn {
+            padding: 0.2rem 0.6rem;
             background: $primary-color;
             color: white;
             border: 1px solid $primary-color;
-            font-size: .4rem;
-            border-radius: .11rem;
-            margin-left: .3rem;
+            font-size: 0.4rem;
+            border-radius: 0.11rem;
+            margin-left: 0.3rem;
         }
     }
-    .name-group{
-        padding: .5rem 0;
-        span{
+    .name-group {
+        padding: 0.5rem 0;
+        span {
             display: inline-block;
-            padding: .2rem .3rem;
+            padding: 0.2rem 0.3rem;
             background: #fff;
             border: 1px solid #ddd;
-            border-radius: .08rem;
+            border-radius: 0.08rem;
             position: relative;
-            margin-right: .4rem;
-            margin-bottom: .3rem;
-            font-size: .35rem;
+            margin-right: 0.4rem;
+            margin-bottom: 0.3rem;
+            font-size: 0.35rem;
             vertical-align: top;
-            .iconfont{
+            .iconfont {
                 position: absolute;
-                right: -.25rem;
-                top: -.25rem;
-                font-size: .5rem;
+                right: -0.25rem;
+                top: -0.25rem;
+                font-size: 0.5rem;
                 color: red;
             }
         }
     }
-    .desire-input{
+    .desire-input {
         border: 1px solid #ddd;
-        border-radius: .13rem;
+        border-radius: 0.13rem;
         overflow: hidden;
-        .desire-textarea{
+        .desire-textarea {
             border: none;
             display: block;
-            font-size: .35rem;
-            width: calc(100% - .5rem);
-            padding: .25rem;
+            font-size: 0.35rem;
+            width: calc(100% - 0.5rem);
+            padding: 0.25rem;
             height: 2rem;
             resize: none;
         }
-        span{
+        span {
             display: block;
             text-align: right;
-            padding: .2rem;
-            font-size: .35rem;
+            padding: 0.2rem;
+            font-size: 0.35rem;
         }
     }
-    .desire-quike{
+    .desire-quike {
         margin-top: 1rem;
-        .bar{
+        .bar {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            font-size: .4rem;
-            margin-bottom: .3rem;
-            .update{
-                font-size: .35rem;
+            font-size: 0.4rem;
+            margin-bottom: 0.3rem;
+            .update {
+                font-size: 0.35rem;
                 color: $primary-color;
             }
         }
-        .name-group{
-            padding: .1rem 0;
-            .name{
-              
+        .name-group {
+            padding: 0.1rem 0;
+            .name {
             }
         }
     }
-    .confirm{
+    .confirm {
         background: $primary-color;
         color: white;
         border: 1px solid $primary-color;
         width: 3rem;
-        padding: .3rem 0;
-        border-radius: .07rem;
+        padding: 0.3rem 0;
+        border-radius: 0.07rem;
         display: block;
         margin: 0 auto;
-        font-size: .4rem;
+        font-size: 0.4rem;
     }
 }
 </style>

src/pages/goods-detail/index.vue

@@ -1,17 +1,17 @@
 <template>
-    <div class="goods-detail" v-if="data" :style="{paddingBottom: paddingBottom + 'px'}">
+    <div class="goods-detail" v-if="data" :style="{ paddingBottom: paddingBottom + 'px' }">
         <swiper class="swiper-container" :options="swiperOption">
             <swiper-slide>
-                <div style="height: 100vw;" class="picture">
-                    <img :src="data.cover_url" alt="">
+                <div style="height: 100vw" class="picture">
+                    <img :src="data.cover_url" alt="" />
                 </div>
             </swiper-slide>
         </swiper>
         <div class="monk-profile">
-            <h1 class="position">{{data.name}}</h1>
+            <h1 class="position">{{ data.name }}</h1>
             <div class="bar">
                 <span class="status">进行中</span>
-                <span>已有{{data.sales || 0}}人参与</span>
+                <span>已有{{ data.sales || 0 }}人参与</span>
             </div>
         </div>
 
@@ -29,7 +29,7 @@
             <div class="support-head">
                 <span class="label">感恩功德</span>
                 <ul class="external">
-                    <li :class="[lTypeId === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType.id, 1)">{{lType.name}}</li>
+                    <li :class="[lTypeId === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType.id, 1)">{{ lType.name }}</li>
                 </ul>
             </div>
             <div>
@@ -42,54 +42,56 @@
 
         <fixed-bottom ref="fixedBottom">
             <button class="iconfont icon-home" v-if="query.no_login === '1'" @click="backHome"></button>
-            <button class="merit-button" @click="onHasLoginToNext">{{data.pay_name}}</button>
+            <button class="merit-button" @click="onHasLoginToNext">{{ data.pay_name }}</button>
         </fixed-bottom>
 
         <van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" safe-area-inset-bottom :close-on-click-overlay="false" :close-on-popstate="true">
-            <div class="caret-spec" >
+            <div class="caret-spec">
                 <div class="head">
                     <span>参与流程： </span>
                     <ul class="step-inline">
-                        <li :class="[ current === 0 && 'current']">选择类型</li>
-                        <li :class="[ current === 1 && 'current']">填写信息</li>
-                        <li :class="[ current === 2 && 'current']">参与成功</li>
+                        <li :class="[current === 0 && 'current']">选择类型</li>
+                        <li :class="[current === 1 && 'current']">填写信息</li>
+                        <li :class="[current === 2 && 'current']">参与成功</li>
                     </ul>
                 </div>
                 <transition>
-                    <template >
+                    <template>
                         <select-spec v-if="current === 0" v-model="spec_id" :number.sync="quantity" :data="data"></select-spec>
                         <fill-information v-if="current === 1" :data="data" @change="onDreamInfoChange"></fill-information>
                     </template>
                 </transition>
                 <div class="next-group">
-                    <span class="total">合计：<em>￥{{priceTotal}}</em></span>
+                    <span class="total"
+                        >合计：<em>￥{{ priceTotal }}</em></span
+                    >
                     <button class="next" @click="onNextStep">下一步</button>
                 </div>
             </div>
         </van-popup>
 
-<!--        随喜金额-->
+        <!--        随喜金额-->
         <random-money v-if="showAnyAmount" :value.sync="showAnyAmount" @change="onReceiveAnyAmount"></random-money>
     </div>
 </template>
 
 <script>
-import 'swiper/css/swiper.css'
-import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import "swiper/css/swiper.css";
+import { swiper, swiperSlide } from "vue-awesome-swiper";
 import { getGoodsDetail, getOrderCompare, hasLogin } from "@/api";
-import SelectSpec from './components/select-spec.vue'
-import FillInformation from './components/fill-information.vue';
+import SelectSpec from "./components/select-spec.vue";
+import FillInformation from "./components/fill-information.vue";
 
 export default {
     components: {
         swiper,
         swiperSlide,
         SelectSpec,
-        FillInformation
+        FillInformation,
     },
-    data(){
+    data() {
         return {
-            result: 'a',
+            result: "a",
             showAnyAmount: false,
             paddingBottom: 0,
             fixedBottomHeight: 0,
@@ -98,8 +100,8 @@ export default {
             checked: false,
             current: 0,
             data: null,
-            value: '',
-            spec_id: '',
+            value: "",
+            spec_id: "",
             step: 0,
             quantity: 1,
             dreamInfo: null,
@@ -108,92 +110,91 @@ export default {
                 autoplay: 8000,
                 initialSlide: 1,
                 loop: false,
-                pagination: '.swiper-pagination',
-                onSlideChangeEnd: swiper => {
-                    console.log('onSlideChangeEnd', swiper.realIndex)
-                }
+                pagination: ".swiper-pagination",
+                onSlideChangeEnd: () => {},
             },
             listType: 1,
             listTypes: [
-                { id: 1, name: '实时', },
-                { id: 2, name: '月榜', },
-                { id: 3, name: '总榜', },
+                { id: 1, name: "实时" },
+                { id: 2, name: "月榜" },
+                { id: 3, name: "总榜" },
             ],
             lTypeId: 1,
             payList: [],
             page: 1,
             noMore: false,
-        }
+        };
     },
     computed: {
-        priceUnit(){
-            if(this.spec_id === 'is_customized'){
+        priceUnit() {
+            if (this.spec_id === "is_customized") {
                 return this.anyPrice;
             }
-            const spec = this.data.spec.find(item => item.id === this.spec_id);
-            if(!spec){
+            const spec = this.data.spec.find((item) => item.id === this.spec_id);
+            if (!spec) {
                 return 0;
             }
-            return Number(spec.price)
+            return Number(spec.price);
         },
-        priceTotal(){
-            if(this.is_auto){
-                return (parseInt(this.priceUnit * 100, 10) * this.quantity * 30) / 100
+        priceTotal() {
+            if (this.is_auto) {
+                return (parseInt(this.priceUnit * 100, 10) * this.quantity * 30) / 100;
             }
             return (parseInt(this.priceUnit * 100, 10) * this.quantity) / 100;
         },
-
     },
-    mounted(){
-        this.getGoodsDetail('common');
+    mounted() {
+        this.getGoodsDetail("common");
     },
     methods: {
-        backHome(){
+        backHome() {
             const { query } = this.$router.currentRoute;
-            const name = query.temple_id === '1' ? 'home': 'temple-home'
-            this.$router.replace({ name, query: { temple_id: query.temple_id }})
+            const name = query.temple_id === "1" ? "home" : "temple-home";
+            this.$router.replace({ name, query: { temple_id: query.temple_id } });
         },
-        async onHasLoginToNext(){
+        async onHasLoginToNext() {
             await hasLogin();
-            this.showSpec = true
+            this.showSpec = true;
         },
-        // 接收随喜金额
-        onReceiveAnyAmount(anyObj){
+        // 接收随喜金额·
+        onReceiveAnyAmount(anyObj) {
             this.anyPrice = anyObj.money;
             this.onToFillMeritName();
         },
         // dreamInfo: 心愿信息
-        onDreamInfoChange(dreamInfo){
+        onDreamInfoChange(dreamInfo) {
             this.dreamInfo = dreamInfo;
         },
-        getSelectedSpec(){
-            const spec = this.data.spec.find(spec => spec.id === this.spec_id);
-            return spec || {
-                id: '',
-                spec_name: this.data.rule_btn || '随喜'
-            };
+        getSelectedSpec() {
+            const spec = this.data.spec.find((spec) => spec.id === this.spec_id);
+            return (
+                spec || {
+                    id: "",
+                    spec_name: this.data.rule_btn || "随喜",
+                }
+            );
         },
-        onNextStep(){
-            if(!this.spec_id){
-                this.$toast.fail('请选择类型')
+        onNextStep() {
+            if (!this.spec_id) {
+                this.$toast.fail("请选择类型");
                 return;
             }
 
-            if( this.spec_id === 'is_customized'){
+            if (this.spec_id === "is_customized") {
                 this.showAnyAmount = true;
-                return ;
+                return;
             }
 
             this.current += 1;
 
-            if(this.current > 0){
+            if (this.current > 0) {
                 this.onToFillMeritName();
             }
         },
-        onToFillMeritName(){
+        onToFillMeritName() {
             const selectedSpec = this.getSelectedSpec();
             this.$router.push({
-                name: 'fill-name',
+                name: "fill-name",
                 query: {
                     ...this.query,
                     is_auto: this.is_auto ? 1 : 0,
@@ -204,78 +205,78 @@ export default {
                     subTitle: selectedSpec.spec_name,
                     is_die: selectedSpec.is_die,
                     amount: this.priceTotal,
-                    is_customized: this.spec_id === 'is_customized' ? 1 : 0,
-                    from: 'common_goods', // 标识为通用商品
-                }
-            })
+                    is_customized: this.spec_id === "is_customized" ? 1 : 0,
+                    from: "common_goods", // 标识为通用商品
                 },
-        async getGoodsDetail(type){
+            });
+        },
+        async getGoodsDetail(type) {
             const { goods_id, temple_id } = this.$route.query;
             const response = await getGoodsDetail(type, goods_id, temple_id);
             this.data = response;
             await this.getPayRecords(this.lTypeId, 1);
             this.$nextTick(() => {
-                this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() - 50
-            })
+                this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() - 50;
+            });
             this.wechatReady({
                 ...this.data.shareConfig,
-                link: location.href
-            })
+                link: location.href,
+            });
         },
         // 获取更多感恩功德1
-        loadMoreFn(){
+        loadMoreFn() {
             this.page += 1;
-            this.getPayRecords(this.lTypeId, this.page)
+            this.getPayRecords(this.lTypeId, this.page);
         },
         // 获取感恩功德
-        async getPayRecords(lTypeId, page){
+        async getPayRecords(lTypeId, page) {
             this.page = page;
             this.lTypeId = lTypeId;
-            const res = await getOrderCompare(this.query.temple_id, this.page, this.lTypeId, this.query.goods_id, this.query.goods_type );
-            if(this.page === 1){
+            const res = await getOrderCompare(this.query.temple_id, this.page, this.lTypeId, this.query.goods_id, this.query.goods_type);
+            if (this.page === 1) {
                 this.payList = [];
             }
             this.payList = this.payList.concat(res.list);
             this.noMore = res.list.length === 0;
         },
-    }
-}
+    },
+};
 </script>
 
 <style lang="scss">
 $lightWidth: 1.3rem;
-.goods-detail{
-    .goods-content{
-        padding-left: .3rem;
-        padding-right: .3rem;
+.goods-detail {
+    .goods-content {
+        padding-left: 0.3rem;
+        padding-right: 0.3rem;
         * {
             max-width: 100%;
-            font-size: .35rem;
+            font-size: 0.35rem;
         }
     }
-    .light-container{
-        padding-left: .4rem;
-        padding-right: .4rem;
+    .light-container {
+        padding-left: 0.4rem;
+        padding-right: 0.4rem;
         max-height: 10rem;
         overflow: auto;
-        .light-wrapper{
+        .light-wrapper {
             border-top: 1px solid #ddd;
-            h1{
-                font-size: .4rem;
-                margin-top: .4rem;
+            h1 {
+                font-size: 0.4rem;
+                margin-top: 0.4rem;
                 margin-bottom: 3px;
             }
-            .light-group{
-                img.light-icon{
+            .light-group {
+                img.light-icon {
                     width: $lightWidth;
                     height: $lightWidth;
                     vertical-align: top;
                 }
-                span{
-                    font-size: .4rem;
+                span {
+                    font-size: 0.4rem;
                     display: block;
                     text-align: center;
-                    padding-top: .3rem;
+                    padding-top: 0.3rem;
                 }
             }
             .van-swipe__indicators {
@@ -292,119 +293,120 @@ $lightWidth: 1.3rem;
             }
         }
         .light-size,
-        .light-count{
-            font-size: .4rem;
+        .light-count {
+            font-size: 0.4rem;
             display: flex;
             justify-content: space-between;
-            margin-top: .6rem;
+            margin-top: 0.6rem;
             align-items: center;
-            margin-bottom: .65rem;
-            span{
+            margin-bottom: 0.65rem;
+            span {
                 color: black;
                 opacity: 1;
             }
         }
-        .light-size{
+        .light-size {
             margin-top: 1.1rem;
         }
-        .light-count{
+        .light-count {
             align-items: center;
-            margin-bottom: .2rem;
+            margin-bottom: 0.2rem;
         }
     }
-    .support{
-        margin-bottom: .5rem;
-        .support-head{
-            padding: 0 .4rem;
+    .support {
+        margin-bottom: 0.5rem;
+        .support-head {
+            padding: 0 0.4rem;
             display: flex;
             justify-content: space-between;
             height: 1.07rem;
             line-height: 1.07rem;
-            .label{
-                font-size: .4rem;
+            .label {
+                font-size: 0.4rem;
                 font-weight: bold;
             }
-            .external{
+            .external {
                 display: flex;
                 align-items: center;
-                li{
-                    margin-left: .3rem;
-                    font-size: .35rem;
+                li {
+                    margin-left: 0.3rem;
+                    font-size: 0.35rem;
                     color: #666;
                 }
-                li.active{
+                li.active {
                     color: #333;
                     font-weight: bold;
                 }
             }
         }
     }
-    .swiper-container{
+    .swiper-container {
         background: #f5f5f5;
-        .picture, img{
+        .picture,
+        img {
             width: 100%;
             height: 100%;
         }
     }
-    .monk-profile{
-        padding: .4rem;
-        .position{
-            font-size: .5rem;
-            padding-top: .2rem;
-            color: #19282E;
+    .monk-profile {
+        padding: 0.4rem;
+        .position {
+            font-size: 0.5rem;
+            padding-top: 0.2rem;
+            color: #19282e;
             line-height: 1.3;
         }
 
-        .introduction{
-            font-size: .37rem;
-            margin-top: .4rem;
+        .introduction {
+            font-size: 0.37rem;
+            margin-top: 0.4rem;
             line-height: 1.3;
             text-align: justify;
             color: #666;
         }
-        .bar{
-            margin-top: .27rem;
+        .bar {
+            margin-top: 0.27rem;
         }
-        .status{
-            padding: .2rem .3rem;
+        .status {
+            padding: 0.2rem 0.3rem;
             background: orange;
             color: white;
             display: inline-block;
-            border-radius: .04rem;
-            margin-right: .3rem;
-            font-size: .3rem;
+            border-radius: 0.04rem;
+            margin-right: 0.3rem;
+            font-size: 0.3rem;
         }
-        span{
+        span {
             color: #666;
-            font-size: .28rem;
+            font-size: 0.28rem;
         }
     }
-    .temple-info{
+    .temple-info {
         border-top: 1px solid #ddd;
-        padding: .3rem .4rem;
+        padding: 0.3rem 0.4rem;
         display: flex;
         align-items: center;
-        .temple-img{
+        .temple-img {
             width: 1rem;
             height: 1rem;
             border-radius: 1rem;
-            margin-right: .3rem;
+            margin-right: 0.3rem;
         }
-        .temple-name{
+        .temple-name {
             flex: 1;
-            .name{
-                font-size: .35rem;
+            .name {
+                font-size: 0.35rem;
                 color: #333;
             }
-            .visitor{
+            .visitor {
                 color: #666;
-                font-size: .3rem;
-                margin-top: .2rem;
+                font-size: 0.3rem;
+                margin-top: 0.2rem;
                 display: block;
             }
         }
     }
-    .detail-button-group{
+    .detail-button-group {
         text-align: center;
         position: fixed;
         bottom: 0;
@@ -412,98 +414,96 @@ $lightWidth: 1.3rem;
         left: 0;
         right: 0;
         background: white;
-		border-top: .01rem solid #ddd;
-        padding: .3rem;
-
+        border-top: 0.01rem solid #ddd;
+        padding: 0.3rem;
     }
-    .merit-button{
+    .merit-button {
         display: block;
         background: $primary-color;
         color: white;
         height: 1.2rem;
-        font-size: .37rem;
+        font-size: 0.37rem;
         min-width: 60%;
-        padding: 0 .53rem;
-        margin-top: .3rem;
+        padding: 0 0.53rem;
+        margin-top: 0.3rem;
         margin-left: auto;
         margin-right: auto;
-        border: .01rem solid $primary-color;
-        border-radius: .13rem;
-        margin-bottom: .3rem;
+        border: 0.01rem solid $primary-color;
+        border-radius: 0.13rem;
+        margin-bottom: 0.3rem;
     }
-    .caret-spec{
-        .head{
+    .caret-spec {
+        .head {
             display: flex;
             justify-content: space-between;
-            font-size: .4rem;
-            padding: .4rem;
+            font-size: 0.4rem;
+            padding: 0.4rem;
             align-items: center;
-            margin-top: .13rem;
-            .iconfont{
-                font-size: .7rem;
+            margin-top: 0.13rem;
+            .iconfont {
+                font-size: 0.7rem;
             }
-            .step-inline{
+            .step-inline {
                 display: inline-block;
                 flex: 1;
-                font-size: .35rem;
-                li{
+                font-size: 0.35rem;
+                li {
                     display: inline-block;
-                    & ~ li:before{
-                        content: '-';
-                        padding: 0 .1rem;
+                    & ~ li:before {
+                        content: "-";
+                        padding: 0 0.1rem;
                     }
-                    
                 }
-                li.current{
+                li.current {
                     color: $primary-color;
                 }
             }
         }
 
-        .auto-donate-time{
-            padding: .4rem ;
-            margin-top: .4rem;
+        .auto-donate-time {
+            padding: 0.4rem;
+            margin-top: 0.4rem;
             margin-bottom: 1rem;
-            .donate{
-                .label{
-                    font-size: .4rem;
+            .donate {
+                .label {
+                    font-size: 0.4rem;
                 }
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
             }
-            .time-cycle{
+            .time-cycle {
                 display: flex;
                 align-items: flex-end;
-                .unit{
-                    font-size: .3rem;
+                .unit {
+                    font-size: 0.3rem;
                     color: #666;
-                    padding-left: .2rem;
+                    padding-left: 0.2rem;
                 }
             }
         }
-        .next-group{
+        .next-group {
             display: flex;
             justify-content: space-between;
-            padding: .2rem .4rem ;
+            padding: 0.2rem 0.4rem;
             background: white;
             align-items: center;
             border-top: 1px solid #ededed;
-            .total{
-                font-size: .4rem;
-                em{
+            .total {
+                font-size: 0.4rem;
+                em {
                     color: $primary-color;
-                    font-size: .4rem;
+                    font-size: 0.4rem;
                     font-weight: bold;
                 }
             }
-            .next{
-                font-size: .4rem;
-                padding: .3rem 1rem;
+            .next {
+                font-size: 0.4rem;
+                padding: 0.3rem 1rem;
                 background: $primary-color;
                 border: 1px solid $primary-color;
                 color: white;
-                border-radius: .1rem;
+                border-radius: 0.1rem;
             }
         }
     }

src/pages/goods-light-detail/components/fill-information.vue

@@ -1,19 +1,19 @@
 <template>
     <div>
         <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-group>
         <van-popup v-model="showDialog" position="bottom" safe-area-inset-bottom style="min-height: 50vh">
             <div class="add-merit-name" v-if="actionName === 'name'">
                 <h3 class="title">功德芳名</h3>
                 <div class="add-name">
-                    <input class="input" type="text" v-model="name" placeholder="请输入功德主姓名">
+                    <input class="input" type="text" v-model="name" placeholder="请输入功德主姓名" />
                     <button class="btn" @click="addName">添加</button>
                 </div>
                 <div class="name-group">
                     <span class="name" v-for="(name, index) in names" :key="name.id" @click="onSelectName(name)">
-                        {{name.name}} 
+                        {{ name.name }}
                         <i class="iconfont icon-biaodankongjianshanchu" @click.stop="onDeleteName(name, index)"></i>
                     </span>
                 </div>
@@ -23,7 +23,7 @@
                 <h3 class="title">心愿</h3>
                 <div class="desire-input">
                     <textarea class="desire-textarea" v-model="dream" type="text" maxlength="50" placeholder="请输入您的心愿" />
-                    <span>{{dream.length}}/50</span>
+                    <span>{{ dream.length }}/50</span>
                 </div>
                 <div class="desire-quike">
                     <div class="bar">
@@ -31,7 +31,7 @@
                         <span class="update" @click="getDreamList">换一组<i class="iconfont icon-shuaxin"></i></span>
                     </div>
                     <div class="name-group">
-                        <span class="name" v-for="(dream, index) in dreamList" :key="index" @click="desire = dream">{{dream}}</span>
+                        <span class="name" v-for="(dream, index) in dreamList" :key="index" @click="desire = dream">{{ dream }}</span>
                     </div>
                 </div>
                 <button class="confirm" @click="onConfirmDream">确认</button>
@@ -41,43 +41,43 @@
 </template>
 
 <script>
-import { getDreamList, getMeritName } from '@/api';
+import { getDreamList, getMeritName } from "@/api";
 
 export default {
-    data(){
+    data() {
         return {
             checked: false,
             showDialog: false,
-            actionName: 'name',
+            actionName: "name",
             person: {},
-            name: '',
-            dream: '',
-            desire: '',
+            name: "",
+            dream: "",
+            desire: "",
             names: [],
-            dreamList: []
-        }
+            dreamList: [],
+        };
     },
-    mounted(){
+    mounted() {
         this.getName();
         this.getDreamList();
     },
     methods: {
-        onAction(name){
+        onAction(name) {
             this.showDialog = true;
             this.actionName = name;
         },
-        onConfirmMeritName(){
-            this.$emit('change', {
+        onConfirmMeritName() {
+            this.$emit("change", {
                 ...this.person,
                 merit_name_id: this.person.id,
                 dream: this.dream,
-            })
+            });
         },
-        onSelectName(name){
+        onSelectName(name) {
             this.person = name;
             this.showDialog = false;
         },
-        onConfirmDream(){
+        onConfirmDream() {
             this.showDialog = false;
             this.dream = this.desire;
             this.onConfirmMeritName();
@@ -88,115 +88,113 @@ export default {
             this.names = data;
         },
         //获取心愿列表
-        async getDreamList(){
+        async getDreamList() {
             const list = await getDreamList();
-            console.log(list)
             this.dreamList = list;
-        }
-    }
+        },
+    },
 };
 </script>
 
 <style lang="scss">
-.add-merit-name{
-    padding: .4rem;
-    .title{
-        font-size: .4rem;
-        margin-bottom: .4rem;
+.add-merit-name {
+    padding: 0.4rem;
+    .title {
+        font-size: 0.4rem;
+        margin-bottom: 0.4rem;
     }
-    .add-name{
+    .add-name {
         display: flex;
-        .input{
+        .input {
             flex: 1;
-            height: .8rem;
-            line-height: .8rem;
-            padding-left: .3rem;
+            height: 0.8rem;
+            line-height: 0.8rem;
+            padding-left: 0.3rem;
             border: 1px solid #ddd;
-            border-radius: .11rem;
-            font-size: .4rem;
+            border-radius: 0.11rem;
+            font-size: 0.4rem;
         }
-        .btn{
-            padding: .2rem .6rem;
+        .btn {
+            padding: 0.2rem 0.6rem;
             background: $primary-color;
             color: white;
             border: 1px solid $primary-color;
-            font-size: .4rem;
-            border-radius: .11rem;
-            margin-left: .3rem;
+            font-size: 0.4rem;
+            border-radius: 0.11rem;
+            margin-left: 0.3rem;
         }
     }
-    .name-group{
-        padding: .5rem 0;
-        span{
+    .name-group {
+        padding: 0.5rem 0;
+        span {
             display: inline-block;
-            padding: .2rem .3rem;
+            padding: 0.2rem 0.3rem;
             background: #fff;
             border: 1px solid #ddd;
-            border-radius: .08rem;
+            border-radius: 0.08rem;
             position: relative;
-            margin-right: .4rem;
-            margin-bottom: .3rem;
-            font-size: .35rem;
+            margin-right: 0.4rem;
+            margin-bottom: 0.3rem;
+            font-size: 0.35rem;
             vertical-align: top;
-            .iconfont{
+            .iconfont {
                 position: absolute;
-                right: -.25rem;
-                top: -.25rem;
-                font-size: .5rem;
+                right: -0.25rem;
+                top: -0.25rem;
+                font-size: 0.5rem;
                 color: red;
             }
         }
     }
-    .desire-input{
+    .desire-input {
         border: 1px solid #ddd;
-        border-radius: .13rem;
+        border-radius: 0.13rem;
         overflow: hidden;
-        .desire-textarea{
+        .desire-textarea {
             border: none;
             display: block;
-            font-size: .35rem;
-            width: calc(100% - .5rem);
-            padding: .25rem;
+            font-size: 0.35rem;
+            width: calc(100% - 0.5rem);
+            padding: 0.25rem;
             height: 2rem;
             resize: none;
         }
-        span{
+        span {
             display: block;
             text-align: right;
-            padding: .2rem;
-            font-size: .35rem;
+            padding: 0.2rem;
+            font-size: 0.35rem;
         }
     }
-    .desire-quike{
+    .desire-quike {
         margin-top: 1rem;
-        .bar{
+        .bar {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            font-size: .4rem;
-            margin-bottom: .3rem;
-            .update{
-                font-size: .35rem;
+            font-size: 0.4rem;
+            margin-bottom: 0.3rem;
+            .update {
+                font-size: 0.35rem;
                 color: $primary-color;
             }
         }
-        .name-group{
-            padding: .1rem 0;
-            .name{
-              
+        .name-group {
+            padding: 0.1rem 0;
+            .name {
             }
         }
     }
-    .confirm{
+    .confirm {
         background: $primary-color;
         color: white;
         border: 1px solid $primary-color;
         width: 3rem;
-        padding: .3rem 0;
-        border-radius: .07rem;
+        padding: 0.3rem 0;
+        border-radius: 0.07rem;
         display: block;
         margin: 0 auto;
-        font-size: .4rem;
+        font-size: 0.4rem;
     }
 }
 </style>

src/pages/goods-light-detail/index.vue

@@ -1,26 +1,26 @@
 <template>
-    <div class="goods-detail" v-if="data" :style="{paddingBottom: paddingBottom + 'px'}">
+    <div class="goods-detail" v-if="data" :style="{ paddingBottom: paddingBottom + 'px' }">
         <swiper class="swiper-container" :options="swiperOption">
             <swiper-slide v-for="(cover, index) in data.details.covers" :key="index">
-                <div style="height: 100vw;" class="picture">
-                    <img :src="cover" alt="">
+                <div style="height: 100vw" class="picture">
+                    <img :src="cover" alt="" />
                 </div>
             </swiper-slide>
         </swiper>
         <div class="monk-profile">
-            <h1 class="position">{{data.details.title}}</h1>
+            <h1 class="position">{{ data.details.title }}</h1>
             <div class="bar">
                 <span class="status">进行中</span>
-                <span>已有{{data.details.sales || 0}}人参与</span>
+                <span>已有{{ data.details.sales || 0 }}人参与</span>
             </div>
         </div>
-<!--        <div class="temple-info">-->
-<!--            <img class="temple-img" :src="data.temple.picture" alt="">-->
-<!--            <div class="temple-name">-->
-<!--                <h4 class="name">{{data.temple.unit_name}}</h4>-->
-<!--                <p class="visitor">已有 <span>{{data.temple.visit}}</span> 人到访过</p>-->
-<!--            </div>-->
-<!--        </div>-->
+        <!--        <div class="temple-info">-->
+        <!--            <img class="temple-img" :src="data.temple.picture" alt="">-->
+        <!--            <div class="temple-name">-->
+        <!--                <h4 class="name">{{data.temple.unit_name}}</h4>-->
+        <!--                <p class="visitor">已有 <span>{{data.temple.visit}}</span> 人到访过</p>-->
+        <!--            </div>-->
+        <!--        </div>-->
         <div class="divider"></div>
         <div class="panel">
             <div class="panel-head">
@@ -33,7 +33,7 @@
             <div class="support-head">
                 <span class="label">感恩功德</span>
                 <ul class="external">
-                    <li :class="[listType === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType, 1)">{{lType.name}}</li>
+                    <li :class="[listType === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType, 1)">{{ lType.name }}</li>
                 </ul>
             </div>
             <div>
@@ -49,13 +49,13 @@
         </fixed-bottom>
 
         <van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" safe-area-inset-bottom :close-on-click-overlay="false" :close-on-popstate="true">
-            <div class="caret-spec" >
+            <div class="caret-spec">
                 <div class="head">
                     <span>参与流程： </span>
                     <ul class="step-inline">
-                        <li :class="[ current === 0 && 'current']">选择类型</li>
-                        <li :class="[ current === 1 && 'current']">填写信息</li>
-                        <li :class="[ current === 2 && 'current']">参与成功</li>
+                        <li :class="[current === 0 && 'current']">选择类型</li>
+                        <li :class="[current === 1 && 'current']">填写信息</li>
+                        <li :class="[current === 2 && 'current']">参与成功</li>
                     </ul>
                 </div>
                 <transition>
@@ -69,7 +69,7 @@
                                             <van-grid-item icon="photo-o" :text="nav.name" v-for="(nav, _index) in item" :key="_index" @click="onSelectLight(nav)">
                                                 <div class="light" :class="[currentLight.id === nav.id && 'current-light']">
                                                     <img :src="nav.picture" class="light-icon" />
-                                                    <span class="light-name">{{nav.name}}</span>
+                                                    <span class="light-name">{{ nav.name }}</span>
                                                 </div>
                                             </van-grid-item>
                                         </van-grid>
@@ -80,7 +80,7 @@
                         <div class="light-size">
                             <span>灯型</span>
                             <van-radio-group v-model="currentLightSize" direction="horizontal">
-                                <van-radio :name="size.id" v-for="size in currentLight.children" :key="size.id" shape="square">{{size.name}}</van-radio>
+                                <van-radio :name="size.id" v-for="size in currentLight.children" :key="size.id" shape="square">{{ size.name }}</van-radio>
                             </van-radio-group>
                         </div>
                         <div class="light-count">
@@ -90,20 +90,22 @@
                     </div>
                 </transition>
                 <div class="next-group">
-                    <span class="total">合计：<em>￥{{totalPrice}}</em></span>
+                    <span class="total"
+                        >合计：<em>￥{{ totalPrice }}</em></span
+                    >
                     <button class="next" @click="onNextStep">下一步</button>
                 </div>
             </div>
         </van-popup>
 
-<!--        随喜金额-->
+        <!--        随喜金额-->
         <random-money v-if="showAnyAmount" :value.sync="showAnyAmount" @change="onReceiveAnyAmount"></random-money>
     </div>
 </template>
 
 <script>
-import 'swiper/css/swiper.css'
-import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import "swiper/css/swiper.css";
+import { swiper, swiperSlide } from "vue-awesome-swiper";
 import { getGoodsLightDetail, getOrderCompare, hasLogin } from "@/api";
 
 export default {
@@ -111,7 +113,7 @@ export default {
         swiper,
         swiperSlide,
     },
-    data(){
+    data() {
         return {
             result: [],
             showAnyAmount: false,
@@ -122,8 +124,8 @@ export default {
             checked: false,
             current: 0,
             data: null,
-            value: '',
-            spec_id: '',
+            value: "",
+            spec_id: "",
             step: 0,
             dreamInfo: null,
             anyPrice: 0, // 随喜金额
@@ -131,16 +133,16 @@ export default {
                 autoplay: 8000,
                 initialSlide: 1,
                 loop: false,
-                pagination: '.swiper-pagination',
-                onSlideChangeEnd: swiper => {
-                    console.log('onSlideChangeEnd', swiper.realIndex)
-                }
+                pagination: ".swiper-pagination",
+                onSlideChangeEnd: (swiper) => {
+                    console.log("onSlideChangeEnd", swiper.realIndex);
+                },
             },
             listType: 1,
             listTypes: [
-                { id: 1, name: '实时', },
-                { id: 2, name: '月榜', },
-                { id: 3, name: '总榜', },
+                { id: 1, name: "实时" },
+                { id: 2, name: "月榜" },
+                { id: 3, name: "总榜" },
             ],
             page: 1,
             payList: [],
@@ -149,77 +151,77 @@ export default {
             currentLightSize: 53,
             buy_quantity: 1, // 购买数量
             noMore: false,
-        }
+        };
     },
     computed: {
-        lightSize(){
+        lightSize() {
             const { currentLight, currentLightSize } = this;
-            if(!this.currentLightSize) return 0;
-            return currentLight.children.find(item => item.id === currentLightSize);
+            if (!this.currentLightSize) return 0;
+            return currentLight.children.find((item) => item.id === currentLightSize);
         },
-        lights(){
+        lights() {
             const data = this.data;
-            if(!data) return [];
+            if (!data) return [];
             const { goods } = data;
             const sliceNumber = 16;
             const len = Math.ceil(goods.length / sliceNumber);
             const lights = [];
-            for(let i = 0; i < len; i++){
-                lights.push(goods.slice(sliceNumber * i, i * sliceNumber + sliceNumber))
+            for (let i = 0; i < len; i++) {
+                lights.push(goods.slice(sliceNumber * i, i * sliceNumber + sliceNumber));
             }
             return lights;
         },
-        totalPrice(){
-            if(!this.lightSize) return 0;
-            return this.lightSize.price * this.buy_quantity
-        }
+        totalPrice() {
+            if (!this.lightSize) return 0;
+            return this.lightSize.price * this.buy_quantity;
         },
-    mounted(){
-        this.getGoodsLightDetail('common');
+    },
+    mounted() {
+        this.getGoodsLightDetail("common");
     },
     methods: {
-        backHome(){
+        backHome() {
             const { query } = this.$router.currentRoute;
-            const name = query.temple_id === '1' ? 'home': 'temple-home'
-            this.$router.replace({ name, query: { temple_id: query.temple_id }})
+            const name = query.temple_id === "1" ? "home" : "temple-home";
+            this.$router.replace({ name, query: { temple_id: query.temple_id } });
         },
-        async onLightAction(){
+        async onLightAction() {
             await hasLogin();
-            this.showSpec = true
+            this.showSpec = true;
         },
         // 选择供灯种类
-        onSelectLight(light){
+        onSelectLight(light) {
             this.currentLight = light;
             this.currentLightSize = light.children[0].id;
         },
         // 接收随喜金额
-        onReceiveAnyAmount(anyObj){
+        onReceiveAnyAmount(anyObj) {
             this.anyPrice = anyObj.money;
             this.onToFillMeritName();
         },
         // dreamInfo: 心愿信息
-        onDreamInfoChange(dreamInfo){
+        onDreamInfoChange(dreamInfo) {
             this.dreamInfo = dreamInfo;
         },
 
-        onNextStep(){
-            if(!this.currentLightSize){
-                this.$toast.fail('请选择灯型')
+        onNextStep() {
+            if (!this.currentLightSize) {
+                this.$toast.fail("请选择灯型");
                 return;
             }
             this.current += 1;
-            if(this.current > 0){
+            if (this.current > 0) {
                 this.onToFillMeritName();
             }
         },
         // 获取更多感恩功德1
-        loadMoreFn(){
+        loadMoreFn() {
             this.page += 1;
-            this.getPayRecords({id: this.listType}, this.page, 10)
+            this.getPayRecords({ id: this.listType }, this.page, 10);
         },
-        onToFillMeritName(){
+        onToFillMeritName() {
             this.$router.push({
-                name: 'fill-name',
+                name: "fill-name",
                 query: {
                     ...this.query,
                     goods_id: this.currentLight.id,
@@ -227,102 +229,102 @@ export default {
                     friendly_time: this.number,
                     quantity: this.buy_quantity,
                     title: this.data.details.title,
-                    subTitle: this.currentLight.name + '：'+this.lightSize.name,
+                    subTitle: this.currentLight.name + "：" + this.lightSize.name,
                     amount: this.totalPrice,
                     is_die: this.currentLight.is_die,
-                    from: 'goods_light', // 标识为通用商品
-                }
-            })
+                    from: "goods_light", // 标识为通用商品
                 },
-        async getGoodsLightDetail(type){
+            });
+        },
+        async getGoodsLightDetail(type) {
             const { goods_id, temple_id } = this.$route.query;
             const response = await getGoodsLightDetail(type, goods_id, temple_id);
             this.data = response;
             this.currentLight = response.goods[0];
-            this.currentLightSize = this.currentLight.children[0].id
-            await this.getPayRecords({ id: 1}, 1);
+            this.currentLightSize = this.currentLight.children[0].id;
+            await this.getPayRecords({ id: 1 }, 1);
             this.$nextTick(() => {
-                this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() - 50
-            })
+                this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() - 50;
+            });
             this.wechatReady({
                 ...this.data.shareConfig,
-                link: location.href
-            })
+                link: location.href,
+            });
         },
         // 获取感恩功德
-        async getPayRecords(lType, page, size = 3){
+        async getPayRecords(lType, page, size = 3) {
             this.listType = lType.id;
             this.page = page;
-            const res = await getOrderCompare(this.query.temple_id, this.page, this.listType, '', this.query.goods_type, size );
-            if(this.page === 1){
+            const res = await getOrderCompare(this.query.temple_id, this.page, this.listType, "", this.query.goods_type, size);
+            if (this.page === 1) {
                 this.payList = [];
             }
             this.payList = this.payList.concat(res.list);
             this.noMore = res.list.length < 3;
         },
-    }
-}
+    },
+};
 </script>
 
 <style lang="scss">
 $lightWidth: 1.15rem;
-.goods-detail{
-    .goods-content{
-        padding-left: .3rem;
-        padding-right: .3rem;
+.goods-detail {
+    .goods-content {
+        padding-left: 0.3rem;
+        padding-right: 0.3rem;
         * {
             max-width: 100%;
-            font-size: .35rem;
+            font-size: 0.35rem;
         }
     }
-    .light-container{
-        padding-left: .4rem;
-        padding-right: .4rem;
+    .light-container {
+        padding-left: 0.4rem;
+        padding-right: 0.4rem;
         max-height: 13rem;
         overflow: auto;
-        .light-wrapper{
+        .light-wrapper {
             border-top: 1px solid #ddd;
-            h1{
-                font-size: .35rem;
-                margin-top: .4rem;
-                margin-bottom: .5rem;
+            h1 {
+                font-size: 0.35rem;
+                margin-top: 0.4rem;
+                margin-bottom: 0.5rem;
             }
-            .light-group{
-                .light{
+            .light-group {
+                .light {
                     padding: 5px;
                     text-align: center;
                     border: 1px solid transparent;
                 }
-                .van-swipe{
-                    padding-bottom: .5rem;
+                .van-swipe {
+                    padding-bottom: 0.5rem;
                 }
-                .van-grid-item__content{
+                .van-grid-item__content {
                     padding-bottom: 0;
                     padding-left: 0;
                     padding-right: 0;
                 }
-                .current-light{
+                .current-light {
                     border: 1px solid $primary-color;
                     border-radius: 4px;
-                    span{
+                    span {
                         color: $primary-color;
                     }
                 }
-                img.light-icon{
+                img.light-icon {
                     width: $lightWidth;
                     height: $lightWidth;
                     vertical-align: top;
                 }
-                span{
-                    font-size: .35rem;
+                span {
+                    font-size: 0.35rem;
                     display: block;
                     text-align: center;
-                    padding-top: .3rem;
+                    padding-top: 0.3rem;
                     white-space: nowrap;
                     overflow: hidden;
                 }
-                .van-grid-item__content{
-                    padding-top: .1rem;
+                .van-grid-item__content {
+                    padding-top: 0.1rem;
                 }
             }
             .van-swipe__indicators {
@@ -339,132 +341,133 @@ $lightWidth: 1.15rem;
             }
         }
         .light-size,
-        .light-count{
-            font-size: .4rem;
+        .light-count {
+            font-size: 0.4rem;
             display: flex;
             justify-content: space-between;
             align-items: center;
-            span{
+            span {
                 color: black;
                 opacity: 1;
             }
         }
-        .light-size{
-            margin-top: .4rem;
-            margin-bottom: .4rem;
+        .light-size {
+            margin-top: 0.4rem;
+            margin-bottom: 0.4rem;
 
-            .van-radio__label{
+            .van-radio__label {
                 margin-left: 4px;
-                font-size: .35rem;
+                font-size: 0.35rem;
             }
-            .van-radio__icon .van-icon{
-                width: .45rem;
-                height: .45rem;
-                line-height: .45rem;
+            .van-radio__icon .van-icon {
+                width: 0.45rem;
+                height: 0.45rem;
+                line-height: 0.45rem;
             }
-            .van-radio__icon--checked .van-icon{
-                background: #CF9E3B;
-                border-color: #CF9E3B;
+            .van-radio__icon--checked .van-icon {
+                background: #cf9e3b;
+                border-color: #cf9e3b;
             }
         }
-        .light-count{
+        .light-count {
             align-items: center;
-            margin-bottom: .5rem;
+            margin-bottom: 0.5rem;
         }
     }
-    .support{
-        margin-bottom: .5rem;
-        .support-head{
-            padding: 0 .4rem;
+    .support {
+        margin-bottom: 0.5rem;
+        .support-head {
+            padding: 0 0.4rem;
             display: flex;
             justify-content: space-between;
             height: 1.07rem;
             line-height: 1.07rem;
-            .label{
-                font-size: .4rem;
+            .label {
+                font-size: 0.4rem;
                 font-weight: bold;
             }
-            .external{
+            .external {
                 display: flex;
                 align-items: center;
-                li{
-                    margin-left: .3rem;
-                    font-size: .35rem;
+                li {
+                    margin-left: 0.3rem;
+                    font-size: 0.35rem;
                     color: #666;
                 }
-                li.active{
+                li.active {
                     color: #333;
                     font-weight: bold;
                 }
             }
         }
     }
-    .swiper-container{
+    .swiper-container {
         background: #f5f5f5;
-        .picture, img{
+        .picture,
+        img {
             width: 100%;
             height: 100%;
         }
     }
-    .monk-profile{
-        padding: .4rem;
-        .position{
-            font-size: .5rem;
-            padding-top: .2rem;
-            color: #19282E;
+    .monk-profile {
+        padding: 0.4rem;
+        .position {
+            font-size: 0.5rem;
+            padding-top: 0.2rem;
+            color: #19282e;
             line-height: 1.3;
         }
 
-        .introduction{
-            font-size: .37rem;
-            margin-top: .4rem;
+        .introduction {
+            font-size: 0.37rem;
+            margin-top: 0.4rem;
             line-height: 1.3;
             text-align: justify;
             color: #666;
         }
-        .bar{
-            margin-top: .27rem;
+        .bar {
+            margin-top: 0.27rem;
         }
-        .status{
-            padding: .2rem .3rem;
+        .status {
+            padding: 0.2rem 0.3rem;
             background: orange;
             color: white;
             display: inline-block;
-            border-radius: .04rem;
-            margin-right: .3rem;
-            font-size: .3rem;
+            border-radius: 0.04rem;
+            margin-right: 0.3rem;
+            font-size: 0.3rem;
         }
-        span{
+        span {
             color: #666;
-            font-size: .28rem;
+            font-size: 0.28rem;
         }
     }
-    .temple-info{
+    .temple-info {
         border-top: 1px solid #ddd;
-        padding: .3rem .4rem;
+        padding: 0.3rem 0.4rem;
         display: flex;
         align-items: center;
-        .temple-img{
+        .temple-img {
             width: 1rem;
             height: 1rem;
             border-radius: 1rem;
-            margin-right: .3rem;
+            margin-right: 0.3rem;
         }
-        .temple-name{
+        .temple-name {
             flex: 1;
-            .name{
-                font-size: .35rem;
+            .name {
+                font-size: 0.35rem;
                 color: #333;
             }
-            .visitor{
+            .visitor {
                 color: #666;
-                font-size: .3rem;
-                margin-top: .2rem;
+                font-size: 0.3rem;
+                margin-top: 0.2rem;
                 display: block;
             }
         }
     }
-    .detail-button-group{
+    .detail-button-group {
         text-align: center;
         position: fixed;
         bottom: 0;
@@ -472,98 +475,96 @@ $lightWidth: 1.15rem;
         left: 0;
         right: 0;
         background: white;
-		border-top: .01rem solid #ddd;
-        padding: .3rem;
-
+        border-top: 0.01rem solid #ddd;
+        padding: 0.3rem;
     }
-    .merit-button{
+    .merit-button {
         display: block;
         background: $primary-color;
         color: white;
         height: 1.2rem;
-        font-size: .37rem;
+        font-size: 0.37rem;
         min-width: 60%;
-        padding: 0 .53rem;
-        margin-top: .3rem;
+        padding: 0 0.53rem;
+        margin-top: 0.3rem;
         margin-left: auto;
         margin-right: auto;
-        border: .01rem solid $primary-color;
-        border-radius: .13rem;
-        margin-bottom: .3rem;
+        border: 0.01rem solid $primary-color;
+        border-radius: 0.13rem;
+        margin-bottom: 0.3rem;
     }
-    .caret-spec{
-        .head{
+    .caret-spec {
+        .head {
             display: flex;
             justify-content: space-between;
-            font-size: .4rem;
-            padding: .4rem;
+            font-size: 0.4rem;
+            padding: 0.4rem;
             align-items: center;
-            margin-top: .13rem;
-            .iconfont{
-                font-size: .7rem;
+            margin-top: 0.13rem;
+            .iconfont {
+                font-size: 0.7rem;
             }
-            .step-inline{
+            .step-inline {
                 display: inline-block;
                 flex: 1;
-                font-size: .35rem;
-                li{
+                font-size: 0.35rem;
+                li {
                     display: inline-block;
-                    & ~ li:before{
-                        content: '-';
-                        padding: 0 .1rem;
+                    & ~ li:before {
+                        content: "-";
+                        padding: 0 0.1rem;
                     }
-                    
                 }
-                li.current{
+                li.current {
                     color: $primary-color;
                 }
             }
         }
 
-        .auto-donate-time{
-            padding: .4rem ;
-            margin-top: .4rem;
+        .auto-donate-time {
+            padding: 0.4rem;
+            margin-top: 0.4rem;
             margin-bottom: 1rem;
-            .donate{
-                .label{
-                    font-size: .4rem;
+            .donate {
+                .label {
+                    font-size: 0.4rem;
                 }
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
             }
-            .time-cycle{
+            .time-cycle {
                 display: flex;
                 align-items: flex-end;
-                .unit{
-                    font-size: .3rem;
+                .unit {
+                    font-size: 0.3rem;
                     color: #666;
-                    padding-left: .2rem;
+                    padding-left: 0.2rem;
                 }
             }
         }
-        .next-group{
+        .next-group {
             display: flex;
             justify-content: space-between;
-            padding: .2rem .4rem ;
+            padding: 0.2rem 0.4rem;
             background: white;
             align-items: center;
             border-top: 1px solid #ededed;
-            .total{
-                font-size: .4rem;
-                em{
+            .total {
+                font-size: 0.4rem;
+                em {
                     color: $primary-color;
-                    font-size: .4rem;
+                    font-size: 0.4rem;
                     font-weight: bold;
                 }
             }
-            .next{
-                font-size: .4rem;
-                padding: .3rem 1rem;
+            .next {
+                font-size: 0.4rem;
+                padding: 0.3rem 1rem;
                 background: $primary-color;
                 border: 1px solid $primary-color;
                 color: white;
-                border-radius: .1rem;
+                border-radius: 0.1rem;
             }
         }
     }

src/pages/home.vue

@@ -1,11 +1,11 @@
 <template>
-    <div v-if="data" class="platform_home" >
+    <div v-if="data" class="platform_home">
         <van-search v-model="value" readonly placeholder="寺院、主持、监寺" @click="onSearch" />
         <div class="container">
             <div class="swiper">
                 <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                     <van-swipe-item v-for="(banner, index) in data.banner_data" :key="index">
-                        <img :src="banner.cover" alt="" @click="onLocationTo(banner)"/>
+                        <img :src="banner.cover" alt="" @click="onLocationTo(banner)" />
                     </van-swipe-item>
                 </van-swipe>
             </div>
@@ -57,7 +57,7 @@
                 </div>
             </div>
             <div class="divider"></div>
-            <thanks-giving :temple-id="query.temple_id " :agent-id="query.agent_id"></thanks-giving>
+            <thanks-giving :temple-id="query.temple_id" :agent-id="query.agent_id"></thanks-giving>
         </div>
     </div>
 </template>
@@ -66,13 +66,12 @@
 import { getPlatformHome, getTempleIndex } from "@/api";
 
 export default {
-    components: {
-    },
-    inject: ['safeAreaInsetBottom'],
+    components: {},
+    inject: ["safeAreaInsetBottom"],
     data() {
         return {
             query: this.$route.query,
-            value: '',
+            value: "",
             data: null,
             mescrollDown: {},
             mescrollUp: {},
@@ -83,74 +82,74 @@ export default {
         this.getTempleIndex();
     },
     methods: {
-        onLocationTo({url}){
-            if(url){
+        onLocationTo({ url }) {
+            if (url) {
                 location.href = url;
             }
         },
-        mescrollInit(mescroll){
+        mescrollInit(mescroll) {
             this.mescroll = mescroll;
         },
-        onToGoods(goods){
+        onToGoods(goods) {
             this.$router.push({
-                name: 'goods-detail',
+                name: "goods-detail",
                 query: {
                     goods_id: goods.goods_id,
                     temple_id: goods.temple_id,
-                    goods_type: goods.goods_type
-                }
-            })
+                    goods_type: goods.goods_type,
+                },
+            });
         },
         locationTo(nav) {
             // nav.type: 0外部链接，1日行一善商品，2添砖加瓦类商品，3通用商品，4功德箱，5进展动态
-            if(nav.icon_type === 6){
+            if (nav.icon_type === 6) {
                 this.$router.push({
-                    name: 'goods-light-detail',
+                    name: "goods-light-detail",
                     query: {
                         goods_type: nav.goods_type,
                         temple_id: nav.temple_id,
-                    }
-                })
-                return
+                    },
+                });
+                return;
             }
 
-            if(nav.icon_type === 0){
+            if (nav.icon_type === 0) {
                 window.location.href = nav.url;
-                return
+                return;
             }
 
-            if(nav.icon_type === 5){
+            if (nav.icon_type === 5) {
                 this.$router.push({
-                    name: 'buddha-detail',
-                    query: { id: nav.dynamic_id }
-                })
-                return
+                    name: "buddha-detail",
+                    query: { id: nav.dynamic_id },
+                });
+                return;
             }
 
-            if(nav.icon_type === 4){
+            if (nav.icon_type === 4) {
                 this.$router.push({
-                    name: 'merit-box'
-                })
-                return
+                    name: "merit-box",
+                });
+                return;
             }
 
-            if(nav.icon_type === 3){
+            if (nav.icon_type === 3) {
                 this.$router.push({
-                    name: 'goods-detail',
+                    name: "goods-detail",
                     query: {
                         goods_type: nav.goods_type,
-                        goods_id: nav.goods_id ,
+                        goods_id: nav.goods_id,
                         temple_id: nav.temple_id,
-                    }
-                })
+                    },
+                });
             }
 
-            if(nav.icon_type === 1 || nav.icon_type === 2){
+            if (nav.icon_type === 1 || nav.icon_type === 2) {
                 this.$router.push({
-                    name: 'everyday-donation',
+                    name: "everyday-donation",
                     query: {
                         goods_type: nav.goods_type,
-                        goods_id: nav.goods_id ,
+                        goods_id: nav.goods_id,
                         temple_id: nav.temple_id,
                     },
                 });
@@ -159,27 +158,26 @@ export default {
         async getTempleIndex() {
             const { agent_id } = this.$route.query;
             let res;
-            if(agent_id){
-                res = await getPlatformHome(agent_id)
+            if (agent_id) {
+                res = await getPlatformHome(agent_id);
             } else {
                 res = await getTempleIndex(this.query.temple_id);
             }
             this.data = res;
-            this.$store.commit('setTempleMeritId', res.temple_merit_id);
+            this.$store.commit("setTempleMeritId", res.temple_merit_id);
             this.data.icon_data = this.sliceNav(res.icon_data);
-            console.log(123, this.data)
             setTimeout(() => {
-                document.title = '自在福田';
-            }, 10)
+                document.title = "自在福田";
+            }, 10);
         },
         onMoreProcess() {
             this.$router.push({
-                name: 'buddha-activity',
+                name: "buddha-activity",
             });
         },
         onSearch() {
             this.$router.push({
-                name: 'search',
+                name: "search",
                 query: {},
             });
         },
@@ -204,13 +202,13 @@ export default {
 }
 .merit-rank-container {
 }
-.van-search{
-    padding: .4rem
+.van-search {
+    padding: 0.4rem;
 }
-.goods-panel-body{
-    .buddha-process{
-        padding-left:  .4rem;
-        padding-right:  .4rem;
+.goods-panel-body {
+    .buddha-process {
+        padding-left: 0.4rem;
+        padding-right: 0.4rem;
     }
 }
 .container {
@@ -228,7 +226,7 @@ export default {
         }
     }
     .swiper {
-        margin-bottom: 0
+        margin-bottom: 0;
     }
     .van-notice-bar {
         border: 1px solid #e6b759;
@@ -254,7 +252,7 @@ export default {
         }
     }
     .van-swipe__indicators {
-        bottom: .1rem;
+        bottom: 0.1rem;
         .van-swipe__indicator {
             width: 20px;
             height: 2px;
@@ -264,20 +262,20 @@ export default {
             background: $primary-color;
         }
     }
-    .panel{
+    .panel {
         padding-bottom: 0;
     }
 }
-.merit-scroll-container{
-    margin: 0 .4rem;
+.merit-scroll-container {
+    margin: 0 0.4rem;
     height: 3.39rem;
     overflow-x: auto;
-    .merit-scroll-wrapper{
+    .merit-scroll-wrapper {
         white-space: nowrap;
     }
 }
-.merit-group{
-    padding-bottom: .4rem;
+.merit-group {
+    padding-bottom: 0.4rem;
 }
 .merit {
     width: 3.39rem;

src/pages/merit-box/index.vue

@@ -1,45 +1,34 @@
 <template>
-	<div class="merit-box" :style="{height: root.minHeight + 'px'}">
-		<van-nav-bar
-			left-arrow
-			v-if="$route.meta.showNavBar"
-			:title="$route.meta.title"
-			@click-left="$router.back()"
-			:style="{ backgroundColor: $route.meta.navBarBackgroundColor }"
-		/>
+    <div class="merit-box" :style="{ height: root.minHeight + 'px' }">
+        <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{ backgroundColor: $route.meta.navBarBackgroundColor }" />
         <div class="merit-container">
-			<img class="goods-picture" :style="{width: width + 'px', height: width / 2 + 'px'}" :src="info.merit_box_cover" alt="">
+            <img class="goods-picture" :style="{ width: width + 'px', height: width / 2 + 'px' }" :src="info.merit_box_cover" alt="" />
             <div class="merit-rank-container">
                 <div class="head">
                     <span class="title">
-						{{info.merit_box_title}}
-						<b class="sub-title">{{info.unit_name}}</b>
+                        {{ info.merit_box_title }}
+                        <b class="sub-title">{{ info.unit_name }}</b>
                     </span>
                     <div class="list">
-						<span :class="[n.id === type_id && 'current']" v-for="(n, index) in nav" :key="n.id" @click="onListBy(n, index)">{{n.title}}</span>
+                        <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"
-                    >
+                    <scroll-view ref="scrollView" :height="containerHeight - 20" pulldown pullup @pulldown="refresh" @pullup="loadMoreFn">
                         <user-merit v-for="(merit, _index) in list" :key="_index" :data="merit"></user-merit>
                         <div class="loadmore" v-if="!noMore">
-                            <img class="icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAAJ1BMVEUAAACHh4eHh4eIiIiJiYmJiYmIiIiIiIiHh4eIiIiJiYmIiIiIiIhR8CECAAAADHRSTlMAQFW/f6qekV+Hc2n78NS+AAAB3klEQVR42uzXv0lDYRiF8Rv/gKhF3CADWAgu4ACOYOEIDpLCQRzBSlAJnKECKd7mgTfc76QIyTnt5eN5f+WdsizLsizLsiw7li2ed1tOzfyIdkskkWlKJJFETiKymhO5Gmtc/8yJvH4ORd5UFEQI0WYIIhUFEUKkjyGIioIIIdL/EERFYYQQ6X0IUhRGCJH+RiBFYYSQjtJDisIIIdLvvMaFRAojBeFJHPeId4gAUhc5FEYIcSmMEGJTGCHEpTBCiE1hhBCXwgghNoURQlwKI4TYFEYIcSmMEOJT+GNKiE/BCPEpGCE+xYA4FEJ8Sg/xKF3EhhSlOfbLhRSlOfbWhhSlOfbbhRSlOfbOhhSlOXbtQorSHHtjQ4rSHLt2IUVZtd+yLMvOYosHbHnwN/fCXvZFLoU9JZJIItv2zdgGQBgGggsyDIMxAsMhhGhD7IA4R3eti++Q+L8Y8nLI/x9IEZFpePjFrlMWDNYe4wXOft6qVFGtUm27bjXqwVbRudy3CpVtZ/nMr9G7BwH6tBEYadhzU2g4I0+AwTGTO8uGB2bqVJ4Y/Zn6QkrEIColOTmGqPnkhCWiepWUyL7X4Vam2JdQFKmyZVgb5QqwE/nChhhiiCGGwB7oiYiIiIhIiAOEKKREjkzh3gAAAABJRU5ErkJggg==" alt="">
+                            <img
+                                class="icon"
+                                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAAJ1BMVEUAAACHh4eHh4eIiIiJiYmJiYmIiIiIiIiHh4eIiIiJiYmIiIiIiIhR8CECAAAADHRSTlMAQFW/f6qekV+Hc2n78NS+AAAB3klEQVR42uzXv0lDYRiF8Rv/gKhF3CADWAgu4ACOYOEIDpLCQRzBSlAJnKECKd7mgTfc76QIyTnt5eN5f+WdsizLsizLsiw7li2ed1tOzfyIdkskkWlKJJFETiKymhO5Gmtc/8yJvH4ORd5UFEQI0WYIIhUFEUKkjyGIioIIIdL/EERFYYQQ6X0IUhRGCJH+RiBFYYSQjtJDisIIIdLvvMaFRAojBeFJHPeId4gAUhc5FEYIcSmMEGJTGCHEpTBCiE1hhBCXwgghNoURQlwKI4TYFEYIcSmMEOJT+GNKiE/BCPEpGCE+xYA4FEJ8Sg/xKF3EhhSlOfbLhRSlOfbWhhSlOfbbhRSlOfbOhhSlOXbtQorSHHtjQ4rSHLt2IUVZtd+yLMvOYosHbHnwN/fCXvZFLoU9JZJIItv2zdgGQBgGggsyDIMxAsMhhGhD7IA4R3eti++Q+L8Y8nLI/x9IEZFpePjFrlMWDNYe4wXOft6qVFGtUm27bjXqwVbRudy3CpVtZ/nMr9G7BwH6tBEYadhzU2g4I0+AwTGTO8uGB2bqVJ4Y/Zn6QkrEIColOTmGqPnkhCWiepWUyL7X4Vam2JdQFKmyZVgb5QqwE/nChhhiiCGGwB7oiYiIiIhIiAOEKKREjkzh3gAAAABJRU5ErkJggg=="
+                                alt=""
+                            />
                             正在加载更多数据...
                         </div>
-                        <div class="loadmore" v-if="noMore">
-                            没有更多了
-                        </div>
+                        <div class="loadmore" v-if="noMore">没有更多了</div>
                     </scroll-view>
                 </div>
             </div>
-			<div class="merit-button-group" :style="{bottom: tabHeight + 'px'}">
+            <div class="merit-button-group" :style="{ bottom: tabHeight + 'px' }">
                 <button class="iconfont icon-arrow-left" @click="back"></button>
                 <button class="merit-button" @click="openBox">随喜功德</button>
             </div>
@@ -49,12 +38,12 @@
 </template>
 
 <script>
-import { getMeritBox,  } from '@/api';
-import { mapState } from 'vuex';
+import { getMeritBox } from "@/api";
+import { mapState } from "vuex";
 
 export default {
-    inject: ['screenHeight', 'root'],
-	data(){
+    inject: ["screenHeight", "root"],
+    data() {
         const { query } = this.$route;
         return {
             query,
@@ -63,9 +52,9 @@ export default {
             type_id: 1,
             page: 1,
             nav: [
-				{ id: 1, title: '实时', page: 1, size: 10, list: [], },
-				{ id: 2, title: '月榜', page: 1, size: 10, list: [], },
-				{ id: 3, title: '总榜', page: 1, size: 10, list: [], },
+                { id: 1, title: "实时", page: 1, size: 10, list: [] },
+                { id: 2, title: "月榜", page: 1, size: 10, list: [] },
+                { id: 3, title: "总榜", page: 1, size: 10, list: [] },
             ],
             containerHeight: 0,
             tabHeight: 0,
@@ -73,181 +62,179 @@ export default {
             list: [],
             loading: true,
             total: 0,
-		}
+        };
     },
     computed: {
-        ...mapState(['temple_merit_id']),
-        noMore(){
+        ...mapState(["temple_merit_id"]),
+        noMore() {
             return this.list.length === this.total;
-        }
         },
-	mounted(){
+    },
+    mounted() {
         this.width = window.innerWidth;
         this.getMeritBox();
-        if(this.query.open_box){
-            this.openBox()
+        if (this.query.open_box) {
+            this.openBox();
         }
     },
     methods: {
-        back(){
-            if(this.query.fromPathName){
-                this.$router.replace({ name: this.query.fromPathName,query: { temple_id: this.query.temple_id } })
+        back() {
+            if (this.query.fromPathName) {
+                this.$router.replace({ name: this.query.fromPathName, query: { temple_id: this.query.temple_id } });
                 return;
             }
-            this.$router.replace({ name: 'home', query: { temple_id: this.query.temple_id }});
+            this.$router.replace({ name: "home", query: { temple_id: this.query.temple_id } });
         },
-        openBox(){
-            this.randVisible = true
+        openBox() {
+            this.randVisible = true;
         },
-		async getMeritBox(){
-			const res = await getMeritBox(this.temple_merit_id || this.query.temple_id || '1', this.type_id, this.page, 10);
+        async getMeritBox() {
+            const res = await getMeritBox(this.temple_merit_id || this.query.temple_id || "1", this.type_id, this.page, 10);
             // this.loading = false;
-            if(this.page === 1){
+            if (this.page === 1) {
                 this.list = [];
             }
             this.info = res.merit_box_info;
             this.total = res.merit_box_order.total;
-			this.list = this.list.concat(res.merit_box_order.list)
+            this.list = this.list.concat(res.merit_box_order.list);
 
             const query = this.$utils.setSearchParamsFromObj({ ...this.$route.query, temple_id: this.info.temple_id });
-            if(!this.$route.query.temple_id){
-                history.pushState('', '', location.href + query)
+            if (!this.$route.query.temple_id) {
+                history.pushState("", "", location.href + query);
             }
 
             this.wechatReady({
                 title: `${this.info.unit_name} - 在线功德箱 | 已有 ${this.total} 人广种福田，布施增福慧，转发即功德！`,
-                desc: '随缘布施，广种福田，喜结善缘',
-                imgUrl: 'https://temple-h5.oss-cn-hangzhou.aliyuncs.com/uploads/common/merit_box.png',
-                link: location.href
-            })
+                desc: "随缘布施，广种福田，喜结善缘",
+                imgUrl: "https://temple-h5-new.oss-cn-hangzhou.aliyuncs.com/uploads/common/merit_box.png",
+                link: location.href,
+            });
 
             this.$nextTick(() => {
                 this.containerHeight = this.$refs.swiper.offsetHeight;
                 this.$refs.scrollView.refresh();
-            })
-
+            });
         },
 
-        onListBy(n){
+        onListBy(n) {
             this.type_id = n.id;
             this.page = 1;
             this.total = 0;
             this.list = [];
             this.getMeritBox();
         },
-		loadMoreFn(){
-            if(this.noMore) return;
+        loadMoreFn() {
+            if (this.noMore) return;
             this.loading = true;
             this.page += 1;
             this.getMeritBox();
         },
-        refresh(){
-            console.log('refresh')
+        refresh() {
             this.page = 1;
             this.total = 0;
             this.getMeritBox();
         },
-		onRandNext(obj){
+        onRandNext(obj) {
             this.$router.push({
-				name: 'pay',
+                name: "pay",
                 query: {
                     ...this.$route.query,
-					title: '功德箱/供奉',
-					subTitle: '随喜',
+                    title: "功德箱/供奉",
+                    subTitle: "随喜",
                     amount: obj.money,
                     quantity: 1,
-					from: 'meritBox', // 标识为功德箱
-				}
-			})
-		}
-	}
+                    from: "meritBox", // 标识为功德箱
+                },
+            });
+        },
+    },
 };
 </script>
 
 <style lang="scss">
-.merit-box{
+.merit-box {
     position: relative;
     height: 100%;
-	.goods-picture{
+    .goods-picture {
         vertical-align: top;
         position: fixed;
         left: 0;
         top: 0;
         right: 0;
     }
-    .merit-container{
+    .merit-container {
         height: 100%;
         position: relative;
         overflow: hidden;
     }
-	.merit-rank-container{
+    .merit-rank-container {
         background: white;
         position: relative;
         border-top-left-radius: 10px;
         border-top-right-radius: 10px;
         margin-top: 5rem;
         height: 61vh;
-		.head{
-			padding: .53rem .4rem;
-			padding-bottom: .13rem;
+        .head {
+            padding: 0.53rem 0.4rem;
+            padding-bottom: 0.13rem;
             display: flex;
             justify-content: space-between;
-			.title{
-				font-size: .43rem;
+            .title {
+                font-size: 0.43rem;
                 color: #222222;
-				.sub-title{
-					font-size: .35rem;
-					margin-left: .4rem;
+                .sub-title {
+                    font-size: 0.35rem;
+                    margin-left: 0.4rem;
                     display: inline-block;
                     color: #666;
                 }
             }
-			.list{
+            .list {
                 display: flex;
-			span{
-				font-size: .37rem;
+                span {
+                    font-size: 0.37rem;
                     color: #999999;
                     display: inline-block;
-				margin-left: .4rem;
-				border-bottom: .03rem solid transparent;
-				padding-bottom: .13rem;
+                    margin-left: 0.4rem;
+                    border-bottom: 0.03rem solid transparent;
+                    padding-bottom: 0.13rem;
                 }
-			span.current{
+                span.current {
                     color: #222;
                     border-bottom-color: rgb(168, 28, 28);
                 }
             }
         }
-		.body{
+        .body {
             height: calc(100% - 1.16rem);
             overflow: hidden;
-			.swiper-container{
+            .swiper-container {
                 height: 100%;
             }
         }
     }
-	.merit-button-group{
+    .merit-button-group {
         text-align: center;
         position: absolute;
         z-index: 1;
         left: 0;
         right: 0;
         background: white;
-		padding-top: .2rem;
-		padding-bottom: calc(.2rem );
-		border-top: .01rem solid #ddd;
+        padding-top: 0.2rem;
+        padding-bottom: calc(0.2rem);
+        border-top: 0.01rem solid #ddd;
         display: flex;
-        padding-left: .4rem;
-        padding-right: .4rem;
-        .iconfont{
+        padding-left: 0.4rem;
+        padding-right: 0.4rem;
+        .iconfont {
             width: 20%;
             background: white;
             border: 1px solid #ddd;
-            margin-right: .4rem;
+            margin-right: 0.4rem;
             border-radius: 4px;
-            font-size: .6rem;
+            font-size: 0.6rem;
         }
-		.merit-button{
+        .merit-button {
             //display: inline-block;
             //vertical-align: top;
             //background: $primary-color;
@@ -260,12 +247,12 @@ export default {
             //flex: 1;
 
             flex: 1;
-            font-size: .4rem;
-            padding: .3rem 1rem;
+            font-size: 0.4rem;
+            padding: 0.3rem 1rem;
             background: $primary-color;
             border: 1px solid $primary-color;
             color: white;
-            border-radius: .1rem;
+            border-radius: 0.1rem;
         }
     }
 }

src/pages/mescroll-test/index.vue

@@ -3,110 +3,114 @@
         <!--mescroll滚动区域的基本结构-->
         <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
             <!--内容...-->
-            <div class="div" v-for="(v, i) in dataList" :key="i">{{v}}</div>
+            <div class="div" v-for="(v, i) in dataList" :key="i">{{ v }}</div>
         </mescroll-vue>
     </div>
 </template>
 
 <script>
 // 引入mescroll的vue组件
-import MescrollVue from 'mescroll.js/mescroll.vue'
+import MescrollVue from "mescroll.js/mescroll.vue";
 const axios = {
     current: 0,
-    get(){
+    get() {
         return new Promise((resolve) => {
             this.current += 1;
             setTimeout(() => {
-                console.log(this.current)
-                if(this.current === 3){
+                if (this.current === 3) {
                     resolve({
-                        data: []
-                    })
-                    return
+                        data: [],
+                    });
+                    return;
                 }
                 resolve({
-                    data: Array.from(Array(10), () => Math.random() * 100)
-                })
-            }, Math.random() * 1000)
-        })
-    }
-}
+                    data: Array.from(Array(10), () => Math.random() * 100),
+                });
+            }, Math.random() * 1000);
+        });
+    },
+};
 export default {
     components: {
-        MescrollVue // 注册mescroll组件
+        MescrollVue, // 注册mescroll组件
     },
-    data () {
+    data() {
         return {
             data: [],
             mescroll: null, // mescroll实例对象
-            mescrollDown:{}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
-            mescrollUp: { // 上拉加载的配置.
+            mescrollDown: {}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
+            mescrollUp: {
+                // 上拉加载的配置.
                 callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
                 //以下是一些常用的配置,当然不写也可以的.
                 page: {
                     num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
-                    size: 10 //每页数据条数,默认10
+                    size: 10, //每页数据条数,默认10
                 },
                 htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
                 noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据; 避免列表数据过少(比如只有一条数据),显示无更多数据会不好看这就是为什么无更多数据有时候不显示的原因
                 toTop: {
                     //回到顶部按钮
                     src: "./static/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图
-                    offset: 1000 //列表滚动1000px才显示回到顶部按钮
+                    offset: 1000, //列表滚动1000px才显示回到顶部按钮
                 },
                 empty: {
                     //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
                     warpId: "xxid", //父布局的id (1.3.5版本支持传入dom元素)
                     icon: "./static/mescroll/mescroll-empty.png", //图标,默认null,支持网络图
-                    tip: "暂无相关数据~" //提示
-                }
+                    tip: "暂无相关数据~", //提示
                 },
-            dataList: [] // 列表数据
-        }
             },
-    beforeRouteEnter (to, from, next) { // 如果没有配置顶部按钮或isBounce,则beforeRouteEnter不用写
-        next(vm => {
+            dataList: [], // 列表数据
+        };
+    },
+    beforeRouteEnter(to, from, next) {
+        // 如果没有配置顶部按钮或isBounce,则beforeRouteEnter不用写
+        next((vm) => {
             // 滚动到原来的列表位置,恢复顶部按钮和isBounce的配置
-            vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter()
-        })
+            vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter();
+        });
     },
-    beforeRouteLeave (to, from, next) { // 如果没有配置顶部按钮或isBounce,则beforeRouteLeave不用写
+    beforeRouteLeave(to, from, next) {
+        // 如果没有配置顶部按钮或isBounce,则beforeRouteLeave不用写
         // 记录列表滚动的位置,隐藏顶部按钮和isBounce的配置
-        this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave()
-        next()
+        this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave();
+        next();
     },
     methods: {
         // mescroll组件初始化的回调,可获取到mescroll对象
-        mescrollInit (mescroll) {
-            this.mescroll = mescroll  // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
+        mescrollInit(mescroll) {
+            this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
         },
         // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
-        upCallback (page, mescroll) {
-
+        upCallback(page, mescroll) {
             // 联网请求
-            axios.get({
+            axios
+                .get({
                     params: {
                         num: page.num, // 页码
-                    size: page.size // 每页长度
-                }
-            }).then((response) => {
+                        size: page.size, // 每页长度
+                    },
+                })
+                .then((response) => {
                     // 请求的列表数据
-                let arr = response.data
+                    let arr = response.data;
                     // 如果是第一页需手动置空列表
-                if (page.num === 1) this.dataList = []
+                    if (page.num === 1) this.dataList = [];
                     // 把请求到的数据添加到列表
-                this.dataList = this.dataList.concat(arr)
+                    this.dataList = this.dataList.concat(arr);
                     // 数据渲染成功后,隐藏下拉刷新的状态
                     this.$nextTick(() => {
-                    mescroll.endSuccess(arr.length)
+                        mescroll.endSuccess(arr.length);
+                    });
                 })
-            }).catch(() => {
+                .catch(() => {
                     // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
-                mescroll.endErr()
-            })
-        }
-    }
-}
+                    mescroll.endErr();
+                });
+        },
+    },
+};
 </script>
 
 <style scoped>
@@ -117,7 +121,7 @@ export default {
     bottom: 0;
     height: auto;
 }
-.div{
+.div {
     height: 40px;
     background: red;
     border: 10px solid blue;

src/pages/pay-result/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="pay-result">
         <div class="cert-show">
-            <img :src="src">
+            <img :src="src" />
             <span class="long-press">长按图片保存到手机</span>
         </div>
         <div class="pay-info">
@@ -19,41 +19,41 @@
 
 <script>
 export default {
-    data(){
+    data() {
         return {
-            query: this.$route.query
-        }
+            query: this.$route.query,
+        };
     },
     computed: {
-        src(){
-            return `https://temple-h5.oss-cn-hangzhou.aliyuncs.com//uploads/merit/certificate/${this.query.order_id}.jpg`
-        }
+        src() {
+            return `https://temple-h5-new.oss-cn-hangzhou.aliyuncs.com//uploads/merit/certificate/${this.query.order_id}.jpg`;
+        },
     },
     methods: {
-        onToOder(){
-            this.$router.push('/user/order')
+        onToOder() {
+            this.$router.push("/user/order");
         },
-        onPayAgain(){
+        onPayAgain() {
             // 功德箱订单再结善缘重新随喜
-            if(this.query.from === 'meritBox'){
-                this.$router.replace({ name: 'merit-box', query: { temple_id: this.query.temple_id , open_box: 1}})
-                return
+            if (this.query.from === "meritBox") {
+                this.$router.replace({ name: "merit-box", query: { temple_id: this.query.temple_id, open_box: 1 } });
+                return;
             }
             // 佛前供灯再结善缘
-            if(this.query.from === 'goods_light'){
+            if (this.query.from === "goods_light") {
                 this.$router.replace({
-                    name: 'goods-light-detail',
+                    name: "goods-light-detail",
                     query: {
                         goods_type: this.query.goods_type,
                         temple_id: this.query.temple_id,
-                    }
-                })
-                return
+                    },
+                });
+                return;
             }
             const { goods_type, goods_id, temple_id, spec_ids } = this.query;
-            this.onPushToGoodsDetail(goods_type, goods_id, temple_id, spec_ids)
-        }
-    }
+            this.onPushToGoodsDetail(goods_type, goods_id, temple_id, spec_ids);
+        },
+    },
 };
 </script>
 
@@ -65,50 +65,50 @@ export default {
         display: flex;
         justify-content: center;
         align-items: center;
-        padding: .2rem;
+        padding: 0.2rem;
         position: relative;
-        img{
+        img {
             max-width: 90%;
             max-height: 100%;
             display: inline-block;
         }
-        .long-press{
+        .long-press {
             position: absolute;
-            font-size: .3rem;
-            bottom: .1rem;
+            font-size: 0.3rem;
+            bottom: 0.1rem;
             color: #999;
         }
     }
-    .pay-info{
+    .pay-info {
         text-align: center;
-        padding: .4rem 0;
+        padding: 0.4rem 0;
         padding-top: 1rem;
-        font-size: .5rem;
+        font-size: 0.5rem;
         color: #888;
-        .iconfont{
+        .iconfont {
             color: #07c160;
             font-size: 1rem;
             vertical-align: middle;
-            margin-right: .3rem;
+            margin-right: 0.3rem;
         }
     }
-    .button-group{
+    .button-group {
         text-align: center;
         margin-top: 1rem;
-        button{
+        button {
             width: 4rem;
-            margin: 0 .4rem;
+            margin: 0 0.4rem;
             height: 1.2rem;
-            font-size: .4rem;
+            font-size: 0.4rem;
             border-radius: 4px;
             border: 1px solid #ddd;
             background: white;
         }
-        .detail{
+        .detail {
             color: $primary-color;
             border-color: $primary-color;
         }
-        .again{
+        .again {
             background: $primary-color;
             color: white;
             border-color: $primary-color;

src/pages/pay/index.vue

@@ -1,24 +1,24 @@
 <template>
     <div class="pay">
         <div class="topbar" ref="topbar">
-            <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
+            <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{ backgroundColor: $route.meta.navBarBackgroundColor }" />
         </div>
         <div class="adv" v-if="adv">
-            <img :src="adv.cover"  alt="">
+            <img :src="adv.cover" alt="" />
         </div>
         <div class="pay-info">
-            <h1 class="amount"><b>￥</b>{{query.amount}}</h1>
+            <h1 class="amount"><b>￥</b>{{ query.amount }}</h1>
             <div class="order-info">
-                <h3 class="goods_title">{{query.title}}</h3>
-                <div class="goods-lucky-to" >
-                    <span>功德芳名：{{query.merit_name}}</span>
-                    <span v-if="query.is_die == '1'">阳上人：{{query.live_name}}</span>
-                    <span v-if="query.is_die == '1'">往生人：{{query.die_name}}</span>
+                <h3 class="goods_title">{{ query.title }}</h3>
+                <div class="goods-lucky-to">
+                    <span>功德芳名：{{ query.merit_name }}</span>
+                    <span v-if="query.is_die == '1'">阳上人：{{ query.live_name }}</span>
+                    <span v-if="query.is_die == '1'">往生人：{{ query.die_name }}</span>
                 </div>
                 <div class="desc">
                     <!-- subTitle: 规格名称 -->
-                    <span>{{query.subTitle}}</span>
-                    <span>数量：x{{query.quantity}}</span>
+                    <span>{{ query.subTitle }}</span>
+                    <span>数量：x{{ query.quantity }}</span>
                 </div>
             </div>
 
@@ -28,7 +28,7 @@
                     <van-cell-group>
                         <van-cell title="微信" clickable @click="radio = '1'" icon="wechat">
                             <template #icon>
-                                <img style="width: 40px" src="@/assets/img/wechat.jpg" alt="">
+                                <img style="width: 40px" src="@/assets/img/wechat.jpg" alt="" />
                             </template>
                             <template #right-icon>
                                 <van-radio name="1" />
@@ -47,173 +47,162 @@
 </template>
 
 <script>
-import {
-    createFriendlyDayOrder,
-    createBrickDayOrder,
-    createPay,
-    createMeritBoxOrder,
-    createCommonOrder,
-    createLightOrder, getPayAdv
-} from "@/api";
-import { requestPayment } from '@/common/wechat-web';
+import { createFriendlyDayOrder, createBrickDayOrder, createPay, createMeritBoxOrder, createCommonOrder, createLightOrder, getPayAdv } from "@/api";
+import { requestPayment } from "@/common/wechat-web";
 import { mapState } from "vuex";
 
 export default {
-    components: {
-    },
-    data(){
+    components: {},
+    data() {
         return {
             query: this.$route.query,
-            payType: '1',
+            payType: "1",
             adv: null,
-        }
+        };
     },
     computed: {
-        ...mapState(['temple_merit_id', 'launch']),
+        ...mapState(["temple_merit_id", "launch"]),
     },
-    mounted(){
-        this.wechatReady(() => {
-
-        })
-        getPayAdv().then(res => {
-            if(res){
+    mounted() {
+        this.wechatReady(() => {});
+        getPayAdv().then((res) => {
+            if (res) {
                 this.adv = res;
             }
-        })
+        });
     },
     methods: {
-        onContinuePayOrder(){
-            this.onPayment({ id: this.query.order_id })
+        onContinuePayOrder() {
+            this.onPayment({ id: this.query.order_id });
         },
-        async onCreatePayOrder(){
+        async onCreatePayOrder() {
             // 创建日行一善支付订单
-            if(this.query.goods_type == '1'){
-                const request = { ...this.query }
-                const order = await createFriendlyDayOrder(request)
-                this.onPayment(order)
-                return
+            if (this.query.goods_type == "1") {
+                const request = { ...this.query };
+                const order = await createFriendlyDayOrder(request);
+                this.onPayment(order);
+                return;
             }
             // 创建填砖加瓦订单
-            if(this.query.goods_type == '2'){
-                const request = { ...this.query }
-                const order = await createBrickDayOrder(request)
-                await this.onPayment(order)
-                return
+            if (this.query.goods_type == "2") {
+                const request = { ...this.query };
+                const order = await createBrickDayOrder(request);
+                await this.onPayment(order);
+                return;
             }
 
             // 创建功德箱订单
-            if(this.query.from === 'meritBox'){
-                const domain = this.launch?.agent_id ? '2': '3'
+            if (this.query.from === "meritBox") {
+                const domain = this.launch?.agent_id ? "2" : "3";
                 const request = {
                     temple_id: this.temple_merit_id || this.query.temple_id,
                     price: this.query.amount,
-                    domain
-                }
-                const order = await createMeritBoxOrder(request)
-                this.onPayment(order)
-                return
+                    domain,
+                };
+                const order = await createMeritBoxOrder(request);
+                this.onPayment(order);
+                return;
             }
 
             // 创建通用商品订单
-            if(this.query.from === 'common_goods'){
+            if (this.query.from === "common_goods") {
                 const request = {
                     ...this.query,
                     price: this.query.amount,
-                    buy_quantity: this.query.quantity
-                }
+                    buy_quantity: this.query.quantity,
+                };
 
                 const order = await createCommonOrder(request);
                 await this.onPayment(order);
             }
 
             // 创建佛前供灯订单
-            if(this.query.from === 'goods_light'){
+            if (this.query.from === "goods_light") {
                 const request = {
                     ...this.query,
                     price: this.query.amount,
-                    buy_quantity: this.query.quantity
-                }
+                    buy_quantity: this.query.quantity,
+                };
 
                 const order = await createLightOrder(request);
                 await this.onPayment(order);
             }
         },
-        async onPayment(order){
+        async onPayment(order) {
             const result = await createPay(order.id);
-            const payResult = await requestPayment(result)
+            const payResult = await requestPayment(result);
             await this.$router.push({
-                name: 'pay-result',
+                name: "pay-result",
                 query: {
                     ...this.query,
                     order_id: order.id,
                     ...result,
-                    ...payResult
-                }
-            })
-        }
-    }
-}
+                    ...payResult,
+                },
+            });
+        },
+    },
+};
 </script>
 
 <style lang="scss">
-
-.pay{
-    .adv{
-        img{
+.pay {
+    .adv {
+        img {
             height: 4rem;
             width: 100%;
             vertical-align: middle;
         }
     }
-    .pay-info{
+    .pay-info {
         padding-top: 1rem;
-        .amount{
-            b{
-                font-size: .5rem;
+        .amount {
+            b {
+                font-size: 0.5rem;
                 color: rgb(236, 188, 98);
-                padding-right: .1rem;
+                padding-right: 0.1rem;
             }
             text-align: center;
             font-size: 1.07rem;
             color: rgb(255, 140, 8);
             font-weight: bold;
         }
-        .order-info{
+        .order-info {
             margin-top: 1rem;
-            padding: .4rem;
-            .goods_title{
-                font-size: .4rem;
+            padding: 0.4rem;
+            .goods_title {
+                font-size: 0.4rem;
                 font-weight: bold;
                 line-height: 1.4;
             }
-            .goods-lucky-to{
-                font-size: .35rem;
-                padding-top: .4rem;
-                span ~ span{
-                    padding-left: .2rem;
+            .goods-lucky-to {
+                font-size: 0.35rem;
+                padding-top: 0.4rem;
+                span ~ span {
+                    padding-left: 0.2rem;
                     border-left: 1px solid #ddd;
-                    margin-left: .2rem;
+                    margin-left: 0.2rem;
                 }
             }
-            .desc{
-                padding-top: .5rem;
+            .desc {
+                padding-top: 0.5rem;
                 color: #666;
-                font-size: .35rem;
+                font-size: 0.35rem;
                 display: flex;
                 justify-content: space-between;
             }
         }
-        .pay-type{
-            padding: .4rem;
-            margin-top: .6rem;
-            .label{
-                font-size: .4rem;
+        .pay-type {
+            padding: 0.4rem;
+            margin-top: 0.6rem;
+            .label {
+                font-size: 0.4rem;
                 font-weight: bold;
-                margin-bottom: .3rem;
+                margin-bottom: 0.3rem;
             }
         }
-        .pay-button-container{
-            padding: .4rem;
+        .pay-button-container {
+            padding: 0.4rem;
         }
     }
 }

src/pages/temple-list/index.vue

@@ -1,14 +1,14 @@
 <template>
-    <div class="temple-list" :style="{height: root.minHeight - root.tabHeight + 'px'}">
+    <div class="temple-list" :style="{ height: root.minHeight - root.tabHeight + 'px' }">
         <div class="topbar" ref="topbar">
-            <van-nav-bar left-arrow :title="$route.meta.title" v-if="$route.meta.showNavBar" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
+            <van-nav-bar left-arrow :title="$route.meta.title" v-if="$route.meta.showNavBar" @click-left="$router.back()" :style="{ backgroundColor: $route.meta.navBarBackgroundColor }" />
             <van-search v-model="keyword" show-action action-text="搜索" placeholder="请输入寺院、方丈、监院名称" @search="onSearch" @cancel="onCancel">
                 <template #action>
                     <span @click="onSearch">搜索</span>
                 </template>
             </van-search>
             <div class="operation-bar">
-                <div class="position" v-if="positioning" >
+                <div class="position" v-if="positioning">
                     <span class="iconfont icon-dingwei positioning"></span>
                     <span>正在获取位置...</span>
                 </div>
@@ -16,37 +16,36 @@
                     <span class="iconfont icon-dingwei"></span>
                     <span>重新定位</span>
                 </div>
-<!--                <div class="show-mode" v-if="mode === 'list'" @click="onModeSwitch('map')">-->
-<!--                    <span>地图模式</span>-->
-<!--                    <span class="iconfont icon-ditu"></span>-->
-<!--                </div>-->
-<!--                <div class="show-mode" v-if="mode === 'map'" @click="onModeSwitch('list')">-->
-<!--                    <span>列表模式</span>-->
-<!--                    <span class="iconfont icon-liebiao"></span>-->
-<!--                </div>-->
+                <!--                <div class="show-mode" v-if="mode === 'list'" @click="onModeSwitch('map')">-->
+                <!--                    <span>地图模式</span>-->
+                <!--                    <span class="iconfont icon-ditu"></span>-->
+                <!--                </div>-->
+                <!--                <div class="show-mode" v-if="mode === 'map'" @click="onModeSwitch('list')">-->
+                <!--                    <span>列表模式</span>-->
+                <!--                    <span class="iconfont icon-liebiao"></span>-->
+                <!--                </div>-->
             </div>
         </div>
-        <div  >
-
-            <div class="temple-list-container" :style="{height: containerHeight + 'px'}" v-if="mode === 'list'" >
-<!--                <scroll-view -->
-<!--                    class="temple-container content"-->
-<!--                    :height="containerHeight - 20" -->
-<!--                    ref="scroll"-->
-<!--                    pulldown -->
-<!--                    pullup-->
-<!--                    @pulldown="refresh"-->
-<!--                    @pullup="loadMore"-->
-<!--                >-->
-<!--                    <temple v-for="temple in templeList" :key="temple.id" :data="temple" @location-to="onLocationTo"></temple>-->
-<!--                </scroll-view>-->
-                <div class="temple-container content" :style="{height: containerHeight+'px'}" @scroll="onScroll">
+        <div>
+            <div class="temple-list-container" :style="{ height: containerHeight + 'px' }" v-if="mode === 'list'">
+                <!--                <scroll-view -->
+                <!--                    class="temple-container content"-->
+                <!--                    :height="containerHeight - 20" -->
+                <!--                    ref="scroll"-->
+                <!--                    pulldown -->
+                <!--                    pullup-->
+                <!--                    @pulldown="refresh"-->
+                <!--                    @pullup="loadMore"-->
+                <!--                >-->
+                <!--                    <temple v-for="temple in templeList" :key="temple.id" :data="temple" @location-to="onLocationTo"></temple>-->
+                <!--                </scroll-view>-->
+                <div class="temple-container content" :style="{ height: containerHeight + 'px' }" @scroll="onScroll">
                     <temple v-for="temple in templeList" :key="temple.id" :data="temple" @location-to="onLocationTo"></temple>
                     <div v-if="loading" class="no-more">正在加载...</div>
                     <div class="no-more" v-if="!loading && noMore">没有更多了</div>
                 </div>
             </div>
-            <div class="temple-map" v-show="mode === 'map'" :style="{height: containerHeight + 'px'}">
+            <div class="temple-map" v-show="mode === 'map'" :style="{ height: containerHeight + 'px' }">
                 <div id="container" style="height: 100%"></div>
             </div>
         </div>
@@ -54,217 +53,216 @@
 </template>
 
 <script>
-import { getTempleList } from '@/api';
-import TMAPLoader from '@/common/tmap';
+import { getTempleList } from "@/api";
+import TMAPLoader from "@/common/tmap";
 import { getLocation, openLocation } from "@/common/wechat-web";
 
 export default {
-    data(){
+    data() {
         return {
             query: this.$route.query,
             containerHeight: 0,
-            keyword: '',
-            mode: 'list',
+            keyword: "",
+            mode: "list",
             page: 1,
             templeList: [],
-            lng: '106.45233',
-            lat: '29.507471',
+            lng: "106.45233",
+            lat: "29.507471",
             map: null,
             positioning: false,
             noMore: false,
             timer: null,
-            loading: false
-        }
+            loading: false,
+        };
     },
-    inject: ['root', 'parentHeight'],
+    inject: ["root", "parentHeight"],
     computed: {
-        scroll(){
-            return this.$refs.scroll
-        }
+        scroll() {
+            return this.$refs.scroll;
         },
-    mounted(){
+    },
+    mounted() {
         setTimeout(() => {
-            if(this.query.hideTab === '1'){
+            if (this.query.hideTab === "1") {
                 this.containerHeight = this.root.minHeight - this.$refs.topbar.offsetHeight;
             } else {
                 this.containerHeight = this.root.minHeight - this.$refs.topbar.offsetHeight - 100;
             }
-        }, 50)
+        }, 50);
 
-        if(this.query.search){
+        if (this.query.search) {
             this.keyword = this.query.search;
         }
 
         this.getTempleList();
-        this.wechatReady()
+        this.wechatReady();
     },
     methods: {
-        onScroll(e){
+        onScroll(e) {
             const scrollTop = e.target.scrollTop;
             const scrollHeight = e.target.offsetHeight;
             const windowHeight = this.templeList.length * 220;
-            if(scrollTop === 0){
+            if (scrollTop === 0) {
                 this.page = 1;
-                this.getTempleList()
-                return
+                this.getTempleList();
+                return;
             }
-            if(((scrollTop + scrollHeight) / windowHeight) > 0.9){
-                this.loadMore()
+            if ((scrollTop + scrollHeight) / windowHeight > 0.9) {
+                this.loadMore();
             }
         },
-        initMap(){
+        initMap() {
             TMAPLoader.load({
-                key: process.env.VUE_APP_TMAP_KEY
-            }).then(TMap => {
+                key: process.env.VUE_APP_TMAP_KEY,
+            }).then((TMap) => {
                 var center = new TMap.LatLng(39.984104, 116.307503);
                 //初始化地图
                 var map = new TMap.Map("container", {
-                    zoom:12,//设置地图缩放级别
-                    center: center//设置地图中心点坐标
+                    zoom: 12, //设置地图缩放级别
+                    center: center, //设置地图中心点坐标
                 });
                 this.map = map;
-                this.setMarker(TMap)
-            })
+                this.setMarker(TMap);
+            });
         },
-        setMarker(TMap){
-            const markers = []
-            this.templeList.forEach(temple => {
-                console.log(temple)
+        setMarker(TMap) {
+            const markers = [];
+            this.templeList.forEach((temple) => {
                 const infoWindow = new TMap.InfoWindow({
                     map: this.map,
                     position: new TMap.LatLng(temple.lat, temple.lng),
-                    content: temple.unit_name
-                })  
-                markers.push(infoWindow)
-            })
+                    content: temple.unit_name,
+                });
+                markers.push(infoWindow);
+            });
             this.markers = markers;
         },
-        async getTempleList(){
+        async getTempleList() {
             this.loading = true;
             const res = await getTempleList(this.keyword, this.lng, this.lat, this.page);
             this.loading = false;
             this.total = res.total;
-            if(this.page === 1){
+            if (this.page === 1) {
                 this.templeList = [];
             }
             this.templeList = this.templeList.concat(res.results);
             this.noMore = res.results.length < 10;
-            if(this.mode === 'map'){
+            if (this.mode === "map") {
                 this.setMarker();
             }
         },
-        async onGetLocation(){
+        async onGetLocation() {
             this.positioning = true;
-            console.log(getLocation)
-            getLocation().then(res => {
-                this.positioning = false
+            getLocation()
+                .then((res) => {
+                    this.positioning = false;
                     this.lng = res.longitude;
                     this.lat = res.latitude;
                     this.page = 1;
                     this.templeList = [];
                     this.getTempleList();
-            }).catch(() => {
-                this.positioning = false;
                 })
+                .catch(() => {
+                    this.positioning = false;
+                });
         },
-        refresh(){
+        refresh() {
             this.page = 1;
-            this.getTempleList()
+            this.getTempleList();
         },
-        onLocationTo(data){
+        onLocationTo(data) {
             openLocation({
                 longitude: data.lng,
                 latitude: data.lat,
                 name: data.unit_name,
-                address: data.address
-            })
+                address: data.address,
+            });
         },
-        onModeSwitch(mode){
+        onModeSwitch(mode) {
             this.mode = mode;
-            if(mode === 'map' && !this.map){
+            if (mode === "map" && !this.map) {
                 this.initMap();
             }
         },
-        onCancel(){
-            this.keyword = ''
+        onCancel() {
+            this.keyword = "";
             this.page = 1;
             this.getTempleList();
         },
-        onSearch(){
+        onSearch() {
             this.getTempleList();
         },
-        loadMore(){
-            if(this.noMore) return;
-            clearTimeout(this.timer)
+        loadMore() {
+            if (this.noMore) return;
+            clearTimeout(this.timer);
             this.timer = setTimeout(() => {
                 this.page += 1;
-                this.getTempleList()
-            }, 300)
+                this.getTempleList();
+            }, 300);
         },
-    }
-}
+    },
+};
 </script>
 
 <style lang="scss">
 @keyframes positioning {
-    0%{
+    0% {
         opacity: 1;
     }
-    25%{
+    25% {
         opacity: 0;
     }
-    50%{
+    50% {
         opacity: 1;
     }
-    75%{
+    75% {
         opacity: 0;
     }
-    100%{
+    100% {
         opacity: 1;
     }
 }
-.temple-list{
-    .operation-bar{
+.temple-list {
+    .operation-bar {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: 0 .4rem;
+        padding: 0 0.4rem;
         color: #333;
-        padding-bottom: .4rem;
-        padding-top: .3rem;
-        .position{
-            line-height: .37rem;
+        padding-bottom: 0.4rem;
+        padding-top: 0.3rem;
+        .position {
+            line-height: 0.37rem;
             color: green;
-            span{
-                font-size: .37rem;
+            span {
+                font-size: 0.37rem;
                 display: inline-block;
-                margin-right: .13rem;
+                margin-right: 0.13rem;
             }
-            .positioning{
+            .positioning {
                 animation: positioning 3s linear infinite;
             }
         }
-        .show-mode{
-            line-height: .37rem;
-            span{
-                font-size: .37rem;
+        .show-mode {
+            line-height: 0.37rem;
+            span {
+                font-size: 0.37rem;
                 display: inline-block;
-                margin-left: .13rem;
+                margin-left: 0.13rem;
             }
         }
     }
-    .temple-list-container{
+    .temple-list-container {
         background: #f5f5f5;
         overflow: hidden;
-        padding: .3rem;
-        .temple-map{
+        padding: 0.3rem;
+        .temple-map {
             height: 100%;
             background: #f5f5f5;
         }
-        .temple-container{
+        .temple-container {
             overflow: scroll;
         }
     }
 }
-
 </style>

src/pages/user/approve/index.vue

@@ -153,7 +153,6 @@ export default {
             })
         },
         onSelect(action){
-            console.log(action)
             this.form.rank_id = action.id;
             this.form.rank_text = action.name;
         },

src/pages/user/certificate/index.vue

@@ -2,76 +2,77 @@
     <div class="user-certificate" :style="style">
         <div class="certificate" v-for="(li, index) in list" :key="index">
             <div class="img-wrapper">
-              <img class="img" :src="li.picture_url" alt="" @click="onDownloadCert(li)">
+                <img class="img" :src="li.picture_url" alt="" @click="onDownloadCert(li)" />
             </div>
             <div class="info">
-              <h3 class="title">{{li.goods_name}}我都去无群我带我去带我去带我去强无敌我去去带我去带我去带我去请问我去请问带我去带我去</h3>
-              <span class="date">{{li.date}}</span>
-              <p class="number">第<span>{{li.count}}</span>份功德</p>
+                <h3 class="title">{{ li.goods_name }}我都去无群我带我去带我去带我去强无敌我去去带我去带我去带我去请问我去请问带我去带我去</h3>
+                <span class="date">{{ li.date }}</span>
+                <p class="number">
+                    第<span>{{ li.count }}</span
+                    >份功德
+                </p>
                 <div class="download" @click="onDownloadCert(li)">
                     <span class="iconfont icon-24px"></span>
                     <p>长按保存功德证书</p>
                 </div>
             </div>
         </div>
-
     </div>
 </template>
 
 <script>
-import { getCertList } from '@/api';
-import { previewImage } from '@/common/wechat-web';
+import { getCertList } from "@/api";
+import { previewImage } from "@/common/wechat-web";
 
 export default {
-    data(){
+    data() {
         return {
             list: [],
-            bg: ''
-        }
+            bg: "",
+        };
     },
-    created(){
-        this.wechatReady()
+    created() {
+        this.wechatReady();
         this.getCertList();
     },
     computed: {
-        style(){
+        style() {
             return {
-                backgroundColor: '#f5f5f5',
+                backgroundColor: "#f5f5f5",
                 backgroundImage: `url(${this.bg})`,
-                backgroundSize: 'contain',
-                backgroundPosition: 'top center',
-                backgroundRepeat: 'no-repeat'
-            }
-        }
+                backgroundSize: "contain",
+                backgroundPosition: "top center",
+                backgroundRepeat: "no-repeat",
+            };
+        },
     },
     methods: {
-        async getCertList(){
+        async getCertList() {
             const res = await getCertList();
-            console.log(res)
             this.list = res.results;
             this.bg = res.cert_bg;
         },
-        onDownloadCert(cert){
-            previewImage(cert.picture_url, [cert.picture_url])
-        }
-    }
-}
+        onDownloadCert(cert) {
+            previewImage(cert.picture_url, [cert.picture_url]);
+        },
+    },
+};
 </script>
 
 <style lang="scss">
-.user-certificate{
+.user-certificate {
     // max-height: 100vh;
     padding-top: 4.67rem;
-    padding-bottom: .5rem;
-    .certificate{
+    padding-bottom: 0.5rem;
+    .certificate {
         display: flex;
-        font-size: .37rem;
+        font-size: 0.37rem;
         background: white;
-        margin: .4rem;
-        border-radius: .13rem;
-        padding: .4rem;
-        box-shadow: 0 0 .2rem rgba(0,0,0,0.05);
-        .img-wrapper{
+        margin: 0.4rem;
+        border-radius: 0.13rem;
+        padding: 0.4rem;
+        box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.05);
+        .img-wrapper {
             width: 2.5rem;
             height: 2.5rem;
             display: flex;
@@ -79,46 +80,46 @@ export default {
             justify-content: center;
             background: #f9f9f9;
         }
-        img{
+        img {
             max-width: 100%;
             max-height: 100%;
         }
-        .info{
+        .info {
             flex: 1;
-            margin-left: .4rem;
+            margin-left: 0.4rem;
             position: relative;
-            .title{
-                font-size: .35rem;
+            .title {
+                font-size: 0.35rem;
                 line-height: 1.3;
                 @extend .text-multiple-2;
                 height: 2.4em;
             }
-            .date{
-                margin-top: .8rem;
+            .date {
+                margin-top: 0.8rem;
                 display: block;
-                font-size: .35rem;
+                font-size: 0.35rem;
                 color: #aaa;
             }
-            .number{
-                margin-top: .15rem;
-                font-size: .35rem;
+            .number {
+                margin-top: 0.15rem;
+                font-size: 0.35rem;
                 color: #444;
-                span{
+                span {
                     color: red;
                     font-weight: bold;
-                    padding: 0 .13rem;
+                    padding: 0 0.13rem;
                 }
             }
-            .download{
+            .download {
                 position: absolute;
                 right: 0;
                 bottom: 0;
                 color: #666;
                 text-align: center;
-                font-size: .29rem;
-                .iconfont{
-                    font-size: .8rem;
-                    padding-bottom: .1rem;
+                font-size: 0.29rem;
+                .iconfont {
+                    font-size: 0.8rem;
+                    padding-bottom: 0.1rem;
                     display: inline-block;
                 }
             }

src/pages/user/course/count/index.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="course-detail-count" v-if="data">
         <div class="topbar" ref="topbar">
-            <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
+            <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{ backgroundColor: $route.meta.navBarBackgroundColor }" />
         </div>
         <div class="course-container">
             <h1 class="title border-bottom">
-                <span class="title-text">{{data.name || '波若波罗密多心经'}}</span>
+                <span class="title-text">{{ data.name || "波若波罗密多心经" }}</span>
                 <span class="feedback" @click="backVisible = true">回向文</span>
             </h1>
             <h2 class="content-name">经文内容</h2>
@@ -22,11 +22,11 @@
                     <i class="iconfont" :class="[!muted ? 'icon-shengyinkai' : 'icon-shengyinguan']"></i>
                 </span>
             </div>
-            <h4 class="volumn-count">{{count}}</h4>
+            <h4 class="volumn-count">{{ count }}</h4>
             <div class="picture-wrapper">
                 <span @touchstart="onTouchstart" @touchend="onTouchEnd">
-                    <img v-if="pressed" src="@/assets/img/down.jpg" alt="">
-                    <img v-else src="@/assets/img/up.jpg" alt="">
+                    <img v-if="pressed" src="@/assets/img/down.jpg" alt="" />
+                    <img v-else src="@/assets/img/up.jpg" alt="" />
                 </span>
             </div>
             <div class="save-group">
@@ -40,12 +40,12 @@
         <van-popup v-model="visible" round>
             <div class="input-count">
                 <h1 class="title">直接报数</h1>
-                <input class="input" v-model="inputCount" type="tel" placeholder="请输入1-9的数字" v-number-only>
+                <input class="input" v-model="inputCount" type="tel" placeholder="请输入1-9的数字" v-number-only />
                 <button class="confirm" @click="onConfirm">确认</button>
             </div>
         </van-popup>
 
-        <van-popup v-model="backVisible" round :overlay-style="{backgroundColor: 'rgba(0,0,0,0.5)'}" class="backward-popup">
+        <van-popup v-model="backVisible" round :overlay-style="{ backgroundColor: 'rgba(0,0,0,0.5)' }" class="backward-popup">
             <div class="backword">
                 <h4 class="title">回向文</h4>
                 <textarea v-model="backwards" name="" class="textarea"></textarea>
@@ -59,10 +59,10 @@
 </template>
 
 <script>
-import { getCourseDetail, postCount } from "@/api"
+import { getCourseDetail, postCount } from "@/api";
 
 export default {
-    data(){
+    data() {
         const { query } = this.$route;
         return {
             query,
@@ -73,45 +73,45 @@ export default {
             inputCount: 0,
             visible: false,
             backVisible: false,
-            backwards: ''
-        }
+            backwards: "",
+        };
     },
-    mounted(){
+    mounted() {
         this.getCourseDetail();
     },
     methods: {
-        async getCourseDetail(){
+        async getCourseDetail() {
             const res = await getCourseDetail(this.query.id);
             this.data = res;
-            this.backwards = res.backward
+            this.backwards = res.backward;
         },
-        onTouchstart(){
+        onTouchstart() {
             this.pressed = true;
             const audio = this.$refs.audio;
-            audio.muted = this.muted
-            audio.play()
-            this.count += 1
+            audio.muted = this.muted;
+            audio.play();
+            this.count += 1;
         },
-        onTouchEnd(){
+        onTouchEnd() {
             this.pressed = false;
         },
-        onConfirm(){
+        onConfirm() {
             this.count = Number(this.inputCount);
             this.visible = false;
         },
-        async saveCount(){
+        async saveCount() {
             const request = {
                 course_id: this.query.id,
                 quantity: this.count,
-                backward: this.backwards
-            }
-            const res = await postCount(this.query.id, request)
-            console.log(res)
-            this.$toast.success('成功')
+                backward: this.backwards,
+            };
+            await postCount(this.query.id, request);
+            this.$toast.success("成功");
         },
-        clear(){
-            this.$dialog.confirm({
-                message: '确认清除计数器？',
+        clear() {
+            this.$dialog
+                .confirm({
+                    message: "确认清除计数器？",
                 })
                 .then(() => {
                     // on confirm
@@ -120,235 +120,234 @@ export default {
                 .catch(() => {
                     // on cancel
                 });
-        }
-    }
-}
+        },
+    },
+};
 </script>
 
 <style lang="scss">
-.course-detail-count{
+.course-detail-count {
     background-size: 100%;
-    .audio{
+    .audio {
         display: none;
     }
-    .on-count{
+    .on-count {
         position: fixed;
         right: 0;
         bottom: 4rem;
-        padding: 0 .7rem;
+        padding: 0 0.7rem;
         border-top-left-radius: 1rem;
         border-bottom-left-radius: 1rem;
         background: $primary-color;
         opacity: 0.8;
         height: 1.07rem;
         line-height: 1.07rem;
-        font-size: .4rem;
+        font-size: 0.4rem;
         color: white;
     }
-    .course-container{
-        padding: 0 .4rem;
+    .course-container {
+        padding: 0 0.4rem;
         flex: 1;
-        .title{
+        .title {
             height: 1.2rem;
             line-height: 1.2rem;
             display: flex;
             justify-content: space-between;
-            .feedback{
-                font-size: .4rem;
+            .feedback {
+                font-size: 0.4rem;
                 color: $primary-color;
             }
-            .title-text{
-                font-size: .5rem;
+            .title-text {
+                font-size: 0.5rem;
                 color: #555;
             }
         }
-        .content-name{
-            font-size: .45rem;
+        .content-name {
+            font-size: 0.45rem;
             color: #666;
-            padding-top: .5rem;
+            padding-top: 0.5rem;
         }
-        .content{
-            font-size: .4rem;
+        .content {
+            font-size: 0.4rem;
             line-height: 1.8;
             letter-spacing: 2px;
             text-align: justify;
-            margin-top: .5rem;
+            margin-top: 0.5rem;
             color: #777;
-            padding-bottom: .5rem;
+            padding-bottom: 0.5rem;
             height: 40vh;
             overflow-y: scroll;
         }
     }
-    .operation{
-        .bar{
+    .operation {
+        .bar {
             display: flex;
             justify-content: space-between;
             height: 1rem;
             align-items: center;
-            padding: 0 .4rem;
-            span{
-               
+            padding: 0 0.4rem;
+            span {
             }
-            .volumn{
+            .volumn {
                 display: inline-block;
                 width: 1.2rem;
                 height: 1.2rem;
                 text-align: center;
                 line-height: 1.2rem;
-                .iconfont{
-                    font-size: .5rem;
+                .iconfont {
+                    font-size: 0.5rem;
                 }
             }
         }
-        .btn-group{
+        .btn-group {
             display: flex;
-            font-size: .4rem;
+            font-size: 0.4rem;
             flex: 1;
-            .btn{
+            .btn {
                 background: $primary-color;
                 color: white;
-                font-size: .3rem;
+                font-size: 0.3rem;
                 border-radius: 2px;
                 display: inline-block;
-                margin-right: .2rem;
-                padding: .2rem .4rem;
+                margin-right: 0.2rem;
+                padding: 0.2rem 0.4rem;
             }
         }
-        .volumn-count{
+        .volumn-count {
             text-align: center;
             font-size: 1.3rem;
-            padding: .5rem 0;
+            padding: 0.5rem 0;
             color: #666;
         }
-        .picture-wrapper{
+        .picture-wrapper {
             width: 3rem;
             height: 3rem;
             border-radius: 3rem;
             margin-left: auto;
             margin-right: auto;
-            margin-top: .3rem;
+            margin-top: 0.3rem;
             position: relative;
-            span{
+            span {
                 width: 100%;
                 height: 100%;
                 display: inline-block;
             }
             &::after,
-            &::before{
+            &::before {
                 pointer-events: none;
             }
-            &::before{
-                content: '';
+            &::before {
+                content: "";
                 width: 3rem;
                 height: 3rem;
                 border-radius: 3rem;
                 position: absolute;
-                left: -.2rem;
-                top: -.2rem;
-                border: .2rem solid $primary-color;
-                transition: transform .1s linear;
+                left: -0.2rem;
+                top: -0.2rem;
+                border: 0.2rem solid $primary-color;
+                transition: transform 0.1s linear;
                 transform-origin: center center;
             }
-            &::after{
-                content: '';
+            &::after {
+                content: "";
                 width: 3rem;
                 height: 3rem;
                 border-radius: 3rem;
                 position: absolute;
-                left: -.2rem;
-                top: -.2rem;
-                border: .2rem solid #ddd;
+                left: -0.2rem;
+                top: -0.2rem;
+                border: 0.2rem solid #ddd;
             }
-            &:active{
-                &::before{
-                    animation: scale .1s linear;
+            &:active {
+                &::before {
+                    animation: scale 0.1s linear;
                 }
-                &::after{
+                &::after {
                     border-color: $primary-color;
                 }
             }
-            span{
-                img{
+            span {
+                img {
                     width: 3rem;
                     height: 3rem;
                 }
             }
         }
-        .save-group{
+        .save-group {
             text-align: center;
-            font-size: .4rem;
-            padding-top: .8rem;
-            span{
+            font-size: 0.4rem;
+            padding-top: 0.8rem;
+            span {
                 display: inline-block;
                 padding: 0 1rem;
-                .iconfont{
-                    margin-right: .1rem;
+                .iconfont {
+                    margin-right: 0.1rem;
                     vertical-align: middle;
                 }
             }
         }
     }
 }
-.backward-popup{
-    top: 44%
+.backward-popup {
+    top: 44%;
 }
-.input-count{
-    padding: .4rem ;
+.input-count {
+    padding: 0.4rem;
     width: 8rem;
-    .title{
-        font-size: .4rem;
+    .title {
+        font-size: 0.4rem;
         text-align: center;
-        padding-bottom: .8rem;
+        padding-bottom: 0.8rem;
     }
-    .input{
+    .input {
         width: 100%;
-        font-size: .4rem;
+        font-size: 0.4rem;
         background: #f5f5f5;
         border: 1px solid #ddd;
         height: 1rem;
         line-height: 1rem;
-        border-radius: .06rem;
+        border-radius: 0.06rem;
         text-indent: 1em;
     }
-    .confirm{
+    .confirm {
         margin: 0 auto;
         width: 100%;
         height: 1.2rem;
         line-height: 1rem;
         display: block;
-        margin-top: .4rem;
-        font-size: .4rem;
+        margin-top: 0.4rem;
+        font-size: 0.4rem;
         color: $primary-color;
     }
 }
-.backword{
+.backword {
     width: 90vw;
     height: 80vh;
-    background: #ECF1F4 url('~@/assets/img/backward2.jpg') bottom center no-repeat;
+    background: #ecf1f4 url("~@/assets/img/backward2.jpg") bottom center no-repeat;
     background-size: contain;
-    .title{
-        font-size: .5rem;
+    .title {
+        font-size: 0.5rem;
         text-align: center;
-        padding-top: .8rem;
-        padding-bottom: .8rem;
+        padding-top: 0.8rem;
+        padding-bottom: 0.8rem;
     }
-    .textarea{
-        background:transparent;
+    .textarea {
+        background: transparent;
         border: 1px solid transparent;
         width: calc(100% - 1.2rem);
-        padding-left: .6rem;
-        padding-right: .6rem;
+        padding-left: 0.6rem;
+        padding-right: 0.6rem;
         height: 6rem;
         line-height: 1.4;
         color: #333;
-        font-size: .4rem;
+        font-size: 0.4rem;
     }
 }
 @keyframes scale {
-    0%{
+    0% {
         transform: scale(1, 1);
     }
-    100%{
+    100% {
         transform: scale(1.2, 1.2);
         opacity: 0;
     }

src/pages/user/course/index.vue

@@ -1,32 +1,38 @@
 <template>
     <div class="course" v-if="data">
         <div class="topbar" ref="topbar">
-            <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
+            <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{ backgroundColor: $route.meta.navBarBackgroundColor }" />
         </div>
         <div class="course-container">
             <div class="my-course border-bottom">
                 <h3 class="title">我的功课</h3>
-               <p class="progress">已修行<span>{{data.practise_day}}</span>天 功课总计<span>{{data.practise_total}}</span>遍</p>
+                <p class="progress">
+                    已修行<span>{{ data.practise_day }}</span
+                    >天 功课总计<span>{{ data.practise_total }}</span
+                    >遍
+                </p>
             </div>
             <div class="course-wrapper">
-                <div class="course-item" v-for="course in data.list" :key="course.id" @click="$router.push({name: 'user-course-detail', query: { id: course.id}})">
-                    <img :src="course.cover" alt="">
+                <div class="course-item" v-for="course in data.list" :key="course.id" @click="$router.push({ name: 'user-course-detail', query: { id: course.id } })">
+                    <img :src="course.cover" alt="" />
                     <div class="course-info">
-                        <h3 class="title">{{course.name}}</h3>
+                        <h3 class="title">{{ course.name }}</h3>
                         <p class="summary">
                             <span>
                                 <i class="iconfont icon-shuben-"></i>
-                                <b>总{{course.target}}遍</b>
+                                <b>总{{ course.target }}遍</b>
                             </span>
                             <span>
                                 <i class="iconfont icon-shuben-"></i>
-                                <b>今日{{course.now_target}}遍</b>
+                                <b>今日{{ course.now_target }}遍</b>
                             </span>
                         </p>
                         <div class="progress-group">
-                            <label for="">今日进度 <span>{{course.progress}}%</span></label>
+                            <label for=""
+                                >今日进度 <span>{{ course.progress }}%</span></label
+                            >
                             <div class="progress-bar">
-                                <div class="progress" :style="{width: course.progress + '%'}"></div>
+                                <div class="progress" :style="{ width: course.progress + '%' }"></div>
                             </div>
                         </div>
                     </div>
@@ -37,114 +43,113 @@
 </template>
 
 <script>
-import { getCourseList } from '@/api';
+import { getCourseList } from "@/api";
 
 export default {
-    data(){
+    data() {
         return {
             data: null,
-            courseList: []
-        }
+            courseList: [],
+        };
     },
-    mounted(){
-        this.getCourseList()
+    mounted() {
+        this.getCourseList();
     },
     methods: {
-        async getCourseList(){
+        async getCourseList() {
             const res = await getCourseList();
-            console.log(res)
             this.data = res;
-        }
-    }
-}
+        },
+    },
+};
 </script>
 
 <style lang="scss">
-.course{
-    .course-container{
-        .my-course{
-            padding: .4rem;
-            margin-bottom: .4rem;
-            .title{
-                font-size: .4rem;
+.course {
+    .course-container {
+        .my-course {
+            padding: 0.4rem;
+            margin-bottom: 0.4rem;
+            .title {
+                font-size: 0.4rem;
             }
-            .progress{
-                font-size: .35rem;
+            .progress {
+                font-size: 0.35rem;
                 color: #999;
-                padding-top: .2rem;
-                span{
+                padding-top: 0.2rem;
+                span {
                     color: $primary-color;
-                    padding: 0 .13rem;
+                    padding: 0 0.13rem;
                     font-weight: bold;
                 }
             }
         }
     }
-    .course-wrapper{
-        padding: 0 .4rem;
-        .course-item{
+    .course-wrapper {
+        padding: 0 0.4rem;
+        .course-item {
             display: flex;
-            padding: .4rem;
-            box-shadow: 0 0 .13rem rgba(0,0,0,0.1);
-            border-radius: .13rem;
-            & ~ .course-item{
-                margin-top: .53rem;
+            padding: 0.4rem;
+            box-shadow: 0 0 0.13rem rgba(0, 0, 0, 0.1);
+            border-radius: 0.13rem;
+            & ~ .course-item {
+                margin-top: 0.53rem;
             }
-            img{
+            img {
                 width: 2.67rem;
                 height: 2.67rem;
                 vertical-align: top;
-                border-radius: .08rem;
+                border-radius: 0.08rem;
             }
-            .course-info{
+            .course-info {
                 flex: 1;
-                margin-left: .53rem;
-                .title{
-                    font-size: .4rem;
-                    padding-top: .13rem;
+                margin-left: 0.53rem;
+                .title {
+                    font-size: 0.4rem;
+                    padding-top: 0.13rem;
                 }
-                .summary{
-                    font-size: .30rem;
-                    padding: .1rem 0;
-                    margin-top: .2rem;
-                    span{
+                .summary {
+                    font-size: 0.3rem;
+                    padding: 0.1rem 0;
+                    margin-top: 0.2rem;
+                    span {
                         vertical-align: middle;
                         display: inline-block;
-                        margin-right: .67rem;
+                        margin-right: 0.67rem;
                         color: #666;
-                        i{
+                        i {
                             vertical-align: text-bottom;
                         }
-                        b{
+                        b {
                             vertical-align: middle;
-                            padding-left: .11rem;
+                            padding-left: 0.11rem;
                             line-height: 1.3;
                         }
                     }
                 }
-                .progress-group{
-                    font-size: .35rem;
-                    padding-top: .6rem;
-                    label{
-                        font-size: .3rem;
+                .progress-group {
+                    font-size: 0.35rem;
+                    padding-top: 0.6rem;
+                    label {
+                        font-size: 0.3rem;
                         color: #666;
-                        span{
+                        span {
                             color: $primary-color;
                             font-weight: bold;
                         }
                     }
-                    .progress-bar{
+                    .progress-bar {
                         background: #f5f5f5;
-                        margin-top: .2rem;
-                        height: .11rem;
+                        margin-top: 0.2rem;
+                        height: 0.11rem;
                         position: relative;
                         border-radius: 4px;
                         overflow: hidden;
-                        .progress{
+                        .progress {
                             position: absolute;
                             left: 0;
                             top: 0;
-                            height: .11rem;
+                            height: 0.11rem;
                             width: 50%;
                             background: $primary-color;
                             border-radius: 4px;

src/pages/user/order/index.vue

@@ -1,9 +1,9 @@
 <template>
     <div>
         <div class="topbar" ref="topbar">
-            <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
+            <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{ backgroundColor: $route.meta.navBarBackgroundColor }" />
         </div>
-        <div class="temple-list-container" :style="{height: containerHeight + 'px'}">
+        <div class="temple-list-container" :style="{ height: containerHeight + 'px' }">
             <van-tabs v-model="status" @change="onOrderChange">
                 <van-tab :title="order.name" :name="order.status" v-for="order in orders" :key="order.status">
                     <div class="order-container">
@@ -16,82 +16,78 @@
 </template>
 
 <script>
-import { getOrderList } from '@/api'
+import { getOrderList } from "@/api";
 
 export default {
-    data(){
+    data() {
         const { query } = this.$route;
         return {
             query,
             containerHeight: window.innerHeight,
-            status: Number( query.current),
+            status: Number(query.current),
             orders: [
-                { status: 0, name: '全部', list: [] },
-                { status: 1, name: '待支付', list: [] },
-                { status: 2, name: '处理中', list: [] },
-                { status: 3, name: '已处理', list: [] },
-            ]
-        }
+                { status: 0, name: "全部", list: [] },
+                { status: 1, name: "待支付", list: [] },
+                { status: 2, name: "处理中", list: [] },
+                { status: 3, name: "已处理", list: [] },
+            ],
+        };
     },
-    inject: ['root', 'tabbar'],
-    mounted(){
-
+    inject: ["root", "tabbar"],
+    mounted() {
         this.getOrderList();
     },
     methods: {
-        async getOrderList(){
+        async getOrderList() {
             const res = await getOrderList(this.status);
-            console.log(res)
-            const current = this.orders.find(item => item.status === this.status);
-            current.list = res.results
+            const current = this.orders.find((item) => item.status === this.status);
+            current.list = res.results;
         },
-        onOrderChange(e){
-            console.log(e, this.status)
+        onOrderChange() {
             this.getOrderList();
-        }
-    }
-}
+        },
+    },
+};
 </script>
 
 <style lang="scss">
-.operation-bar{
+.operation-bar {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0 .4rem;
+    padding: 0 0.4rem;
     color: #333;
-    margin-bottom: .4rem;
-    .position{
-        line-height: .37rem;
+    margin-bottom: 0.4rem;
+    .position {
+        line-height: 0.37rem;
         color: green;
-        span{
-            font-size: .37rem;
+        span {
+            font-size: 0.37rem;
             display: inline-block;
-            margin-right: .13rem;
+            margin-right: 0.13rem;
         }
     }
-    .show-mode{
-        line-height: .37rem;
-        span{
-            font-size: .37rem;
+    .show-mode {
+        line-height: 0.37rem;
+        span {
+            font-size: 0.37rem;
             display: inline-block;
-            margin-left: .13rem;
+            margin-left: 0.13rem;
         }
     }
 }
-.temple-list-container{
+.temple-list-container {
     background: #f5f5f5;
-    .temple-container{
-        padding: .4rem;
+    .temple-container {
+        padding: 0.4rem;
     }
-    .temple-map{
+    .temple-map {
         height: 100%;
         background: #f5f5f5;
     }
-    
 }
-.order-container{
+.order-container {
     background: #f5f5f5;
-    padding: .4rem;
+    padding: 0.4rem;
 }
 </style>

vue.config.js

@@ -1,28 +1,31 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = {
-    publicPath: '/wap/',
-    outputDir: 'wap',
+    publicPath: "./",
+    outputDir: "wap",
     productionSourceMap: false,
     filenameHashing: true,
     devServer: {
         // https:true,
-        host: '0.0.0.0',
+        host: "0.0.0.0",
         disableHostCheck: false,
         proxy: {
-            '/api': {
+            "/api": {
                 target: process.env.VUE_APP_HOST,
-                changeOrigin: true
-            }
-        }
+                changeOrigin: true,
             },
-    chainWebpack: config => {
-        const oneOfsMap = config.module.rule('scss').oneOfs.store;
-        oneOfsMap.forEach(item => {
-            item.use('sass-resources-loader').loader('sass-resources-loader').options({
-                resources: './src/assets/scss/common.scss'
-            }).end();
+        },
+    },
+    chainWebpack: (config) => {
+        const oneOfsMap = config.module.rule("scss").oneOfs.store;
+        oneOfsMap.forEach((item) => {
+            item.use("sass-resources-loader")
+                .loader("sass-resources-loader")
+                .options({
+                    resources: "./src/assets/scss/common.scss",
                 })
+                .end();
+        });
 
         // config.plugin('compression').use(
         //     new CompressionWebpackPlugin({
@@ -37,27 +40,23 @@ module.exports = {
 
         // config.resolve.plugins.delete('prefetch');
         // config.resolve.plugins.delete('prerload');
-
     },
-    configureWebpack: config => {
-        config.plugins.forEach(plugin => {
-            if(plugin instanceof HtmlWebpackPlugin){
-                plugin.options.title = '自在福田 - 寺庙联盟'
+    configureWebpack: (config) => {
+        config.plugins.forEach((plugin) => {
+            if (plugin instanceof HtmlWebpackPlugin) {
+                plugin.options.title = "自在福田 - 寺庙联盟";
             }
-        })
+        });
     },
     css: {
         sourceMap: false,
         loaderOptions: {
             scss: {
                 data: null,
-                
             },
             postcss: {
-                plugins: [
-                    
-                ]
-            }
-        }
-    }
-}
+                plugins: [],
+            },
+        },
+    },
+};