对接接口

.env.development

@@ -1,2 +1,3 @@
-VUE_APP_HOST=http://test-temple.wdx-tc.com/
+VUE_APP_HOST=http://temple.free.idcfengye.com
-NODE_ENV = development
+NODE_ENV = development
+VUE_APP_TMAP_KEY=ZFGBZ-76ICF-BG5JY-NH4HX-MQOOJ-VJB4E

.env.production

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

.env.test

@@ -1,2 +1,3 @@
-VUE_APP_HOST=http://test-temple.wdx-tc.com/
+VUE_APP_HOST=http://https-temple.wdx-tc.com/
+VUE_APP_TMAP_KEY=ZFGBZ-76ICF-BG5JY-NH4HX-MQOOJ-VJB4E
 NODE_ENV = test

https/6500549_test-temple.wdx-tc.com.key

@@ -0,0 +1,27 @@
+-----BEGIN RSA PRIVATE KEY-----
+MIIEowIBAAKCAQEAjOzQOMFq0ofA8HGWq+SI2UGLfl4Wrm6QpWZS9JggjFRxpWCR
+pwnbSeO76sOxPMXx2fzd++1X2gOLDguoNVIyk8zWfA2aIQ7iUfCvOdJg45kMv0Rv
+139LAVQwfrC50TuKbvwTPKfEgtrfiBDEs0K/C5TKJ++77oYyxsiIwZ8zsorbpNEA
+JZgGXthHgTddnetmnYiH9dqs3eJIEricMhGpKx9psq8B3J9YksoD5CFHfz0QLIC4
+DhyfAa72b2nj0wJcX2XMP4QkEgDM+nf2Iq0QOkgKH6KT2fgFflCqQQKAwQ6XmqSj
+NNXiCr9GCQmZw4er/pH1BUHvI5t0IYCltJ6CIwIDAQABAoIBAA/R4coNRG2f2bPk
+PHLNc+NXrU4hR9CLDufSZcuZbEX0kNFs1sz2mUxhKU5Aa5wT6IN9FHpceXk63phU
+DKz3rj/TRdylNkExx4xFRZZrHH9QRhMOnrOFUakzh0Ihmqp3UaIF4C718mRyJ5fB
+siMhggrNyCfVjLZJEFgqWNfLhGUtcLePjD+K40jv4iG3R1Oorgo/rVaNbezw3TUj
+rz35JKFBbBEDPEmfj5arYuZKYVQnthh2NJu2bv+4ckbczo47XZPlaFjUzDucO+EB
+VCDgvo0uPktejXsrb39rgRhPUQRgnv5gpnkv5DEuPuxTT1Ws1Z9yUtrP3b15KIM3
+VEMFC9kCgYEAvuwCeHLW2v9JHolmUCYXyl2GogWKFwNKSbRZi5G+TFiJdCTipQ/Q
+b1gcgoRT4WrzzOLqv7/SakIZrnmvZSlFcD9MuDm9jW7pngidZYGMSyNQGb6XAJLs
+mjxImt1hLbNC+4LG/x5fk3aAZgjV4aBWnG9umNGyJhqBqDSJzYtrWFcCgYEAvPYK
+NpVzcHxdd8MM5s+eYblsWyBXqtLOevDnhlIonHO6WG5mrQL1E2UYjifosVN5y69S
+N9j9CWvG5sL96pnxZw2n+uz+0VwfqCI2zn2srD9XBadFPSFc0fusG+wokXSHL7OG
+M6o7Plx8ZGH5EFAkqaoSnMeP57/Sf5puh1nD9RUCgYAyNXj02iac0zQUfsfUXiA1
+jOECLPjC0o+v0GkYJkzoYQRM8gJUrFMBZSeiP1Cb4HebMzXPFZAtd5KvarrwnKjx
+OwRfEnhCAKAZemSCNE6D2BaRnqixcvIcIaxqZbvPu+vqntrcbs1tx2U+8CXnPzZn
+z3pDYCo8kQ32AVMYJgkl4wKBgDY5yQ6G7tzN46i1oaMu232hz3WLH31XB4gCT/6c
+3yiekVBFRlPJ8HiDX3uT+lPA58fK5SY/r8WfVzHrrSBA0yTGp3j7v9hmvnLqdp3l
+NMMtXhSyPs1fIJrlxSsyJyYusYi/1PhIlr27nrrT3ryOsya5NqQlJKfVxVt2/tb6
+rKBNAoGBALBwk93oGAvRSzQTfHiO8b0JNxNjX2HyLQ0vKciNKvcaGXxaOFO0yj0S
+spsoXWsx2uA8RBs4mxkp14mhOQ/KJbtzxn05eX8rkpwuZUwRZU4CwiIBdEBEPEAC
+Sh/hzYWNMsB1Enle/+35wohfdlV5LbHiZC/dUa7LR17MRBSloXjX
+-----END RSA PRIVATE KEY-----

https/6500549_test-temple.wdx-tc.com.pem

@@ -0,0 +1,62 @@
+-----BEGIN CERTIFICATE-----
+MIIGATCCBOmgAwIBAgIQC/WwdIdUJZZP8hOOr/tdhTANBgkqhkiG9w0BAQsFADBu
+MQswCQYDVQQGEwJVUzEVMBMGA1UEChMMRGlnaUNlcnQgSW5jMRkwFwYDVQQLExB3
+d3cuZGlnaWNlcnQuY29tMS0wKwYDVQQDEyRFbmNyeXB0aW9uIEV2ZXJ5d2hlcmUg
+RFYgVExTIENBIC0gRzEwHhcNMjExMDI3MDAwMDAwWhcNMjIxMDI3MjM1OTU5WjAh
+MR8wHQYDVQQDExZ0ZXN0LXRlbXBsZS53ZHgtdGMuY29tMIIBIjANBgkqhkiG9w0B
+AQEFAAOCAQ8AMIIBCgKCAQEAjOzQOMFq0ofA8HGWq+SI2UGLfl4Wrm6QpWZS9Jgg
+jFRxpWCRpwnbSeO76sOxPMXx2fzd++1X2gOLDguoNVIyk8zWfA2aIQ7iUfCvOdJg
+45kMv0Rv139LAVQwfrC50TuKbvwTPKfEgtrfiBDEs0K/C5TKJ++77oYyxsiIwZ8z
+sorbpNEAJZgGXthHgTddnetmnYiH9dqs3eJIEricMhGpKx9psq8B3J9YksoD5CFH
+fz0QLIC4DhyfAa72b2nj0wJcX2XMP4QkEgDM+nf2Iq0QOkgKH6KT2fgFflCqQQKA
+wQ6XmqSjNNXiCr9GCQmZw4er/pH1BUHvI5t0IYCltJ6CIwIDAQABo4IC5jCCAuIw
+HwYDVR0jBBgwFoAUVXRPsnJP9WC6UNHX5lFcmgGHGtcwHQYDVR0OBBYEFHpk8ROV
+lQtVOZKu5qc7np6AslobMCEGA1UdEQQaMBiCFnRlc3QtdGVtcGxlLndkeC10Yy5j
+b20wDgYDVR0PAQH/BAQDAgWgMB0GA1UdJQQWMBQGCCsGAQUFBwMBBggrBgEFBQcD
+AjA+BgNVHSAENzA1MDMGBmeBDAECATApMCcGCCsGAQUFBwIBFhtodHRwOi8vd3d3
+LmRpZ2ljZXJ0LmNvbS9DUFMwgYAGCCsGAQUFBwEBBHQwcjAkBggrBgEFBQcwAYYY
+aHR0cDovL29jc3AuZGlnaWNlcnQuY29tMEoGCCsGAQUFBzAChj5odHRwOi8vY2Fj
+ZXJ0cy5kaWdpY2VydC5jb20vRW5jcnlwdGlvbkV2ZXJ5d2hlcmVEVlRMU0NBLUcx
+LmNydDAJBgNVHRMEAjAAMIIBfgYKKwYBBAHWeQIEAgSCAW4EggFqAWgAdwApeb7w
+njk5IfBWc59jpXflvld9nGAK+PlNXSZcJV3HhAAAAXzA1qNlAAAEAwBIMEYCIQCi
++I5gizS7zedy++e2jEe8AXpj7TfOv8CMom2uv8ZyjQIhALgAe5DjRrqjUwF54wYc
+urNW++wS7z0R+6hvK0KiY2dPAHYAUaOw9f0BeZxWbbg3eI8MpHrMGyfL956IQpoN
+/tSLBeUAAAF8wNajogAABAMARzBFAiEA4IL8L69sZloHgEt+RcoWY+V7fS+VwNim
+RAz8nyi5qL4CIHUiBtPn3EO3Pz1+Ti0AxRLXEHKjulPW3roeQMS4n4uqAHUAQcjK
+sd8iRkoQxqE6CUKHXk4xixsD6+tLx2jwkGKWBvYAAAF8wNajPwAABAMARjBEAiA8
+Nym+BTQfaov/Jc8n1hxG5srV5mb6QV6NqOksFmWjCQIgKpIZoW/kmLeEepfo2Arn
+njAXmCDSH5LiqR5KLiAEFLQwDQYJKoZIhvcNAQELBQADggEBAALiKq7t5xLeKipg
+KSSTWLv8kOuin2ETUL1VDuDUdnMy2CeMcmadebsbz8XbwdJSvlAQk98SA9yTM4sZ
+6wU1jLPrQ/6lJR+BgyoDOkN81QZozpVe2VwOMX6FQdOu3YL01wZFGj9yT0/89Doy
+cGUdq97tGIqOO/qK2ZyxoP2e4OZ0Nw0bTXoajCGEVD2darphN2++ThBKqu1B8lEO
+kq7cTcgsJ2WWv40bcV21jqgPKSgCVENJ0BejVN7DcN3F8J0MoMJ2ecvx4UbelzRb
+eydFifag+aqIegSqXSpycny4OpWv+V8MjEpK/6doglq6Xq/PCErdAcUzN/FNNOsN
+P6vug9M=
+-----END CERTIFICATE-----
+-----BEGIN CERTIFICATE-----
+MIIEqjCCA5KgAwIBAgIQAnmsRYvBskWr+YBTzSybsTANBgkqhkiG9w0BAQsFADBh
+MQswCQYDVQQGEwJVUzEVMBMGA1UEChMMRGlnaUNlcnQgSW5jMRkwFwYDVQQLExB3
+d3cuZGlnaWNlcnQuY29tMSAwHgYDVQQDExdEaWdpQ2VydCBHbG9iYWwgUm9vdCBD
+QTAeFw0xNzExMjcxMjQ2MTBaFw0yNzExMjcxMjQ2MTBaMG4xCzAJBgNVBAYTAlVT
+MRUwEwYDVQQKEwxEaWdpQ2VydCBJbmMxGTAXBgNVBAsTEHd3dy5kaWdpY2VydC5j
+b20xLTArBgNVBAMTJEVuY3J5cHRpb24gRXZlcnl3aGVyZSBEViBUTFMgQ0EgLSBH
+MTCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEBALPeP6wkab41dyQh6mKc
+oHqt3jRIxW5MDvf9QyiOR7VfFwK656es0UFiIb74N9pRntzF1UgYzDGu3ppZVMdo
+lbxhm6dWS9OK/lFehKNT0OYI9aqk6F+U7cA6jxSC+iDBPXwdF4rs3KRyp3aQn6pj
+pp1yr7IB6Y4zv72Ee/PlZ/6rK6InC6WpK0nPVOYR7n9iDuPe1E4IxUMBH/T33+3h
+yuH3dvfgiWUOUkjdpMbyxX+XNle5uEIiyBsi4IvbcTCh8ruifCIi5mDXkZrnMT8n
+wfYCV6v6kDdXkbgGRLKsR4pucbJtbKqIkUGxuZI2t7pfewKRc5nWecvDBZf3+p1M
+pA8CAwEAAaOCAU8wggFLMB0GA1UdDgQWBBRVdE+yck/1YLpQ0dfmUVyaAYca1zAf
+BgNVHSMEGDAWgBQD3lA1VtFMu2bwo+IbG8OXsj3RVTAOBgNVHQ8BAf8EBAMCAYYw
+HQYDVR0lBBYwFAYIKwYBBQUHAwEGCCsGAQUFBwMCMBIGA1UdEwEB/wQIMAYBAf8C
+AQAwNAYIKwYBBQUHAQEEKDAmMCQGCCsGAQUFBzABhhhodHRwOi8vb2NzcC5kaWdp
+Y2VydC5jb20wQgYDVR0fBDswOTA3oDWgM4YxaHR0cDovL2NybDMuZGlnaWNlcnQu
+Y29tL0RpZ2lDZXJ0R2xvYmFsUm9vdENBLmNybDBMBgNVHSAERTBDMDcGCWCGSAGG
+/WwBAjAqMCgGCCsGAQUFBwIBFhxodHRwczovL3d3dy5kaWdpY2VydC5jb20vQ1BT
+MAgGBmeBDAECATANBgkqhkiG9w0BAQsFAAOCAQEAK3Gp6/aGq7aBZsxf/oQ+TD/B
+SwW3AU4ETK+GQf2kFzYZkby5SFrHdPomunx2HBzViUchGoofGgg7gHW0W3MlQAXW
+M0r5LUvStcr82QDWYNPaUy4taCQmyaJ+VB+6wxHstSigOlSNF2a6vg4rgexixeiV
+4YSB03Yqp2t3TeZHM9ESfkus74nQyW7pRGezj+TC44xCagCQQOzzNmzEAP2SnCrJ
+sNE2DpRVMnL8J6xBRdjmOsC3N6cQuKuRXbzByVBjCqAA8t1L0I+9wXJerLPyErjy
+rMKWaBFLmfK/AHNF4ZihwPGOc7w6UHczBZXH5RFzJNnww+WnKuTPI0HfnVH8lg==
+-----END CERTIFICATE-----

jsconfig.json

@@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["src/*"],
+        }
+    },
+    "include": ["./src/**/*.vue", "./src/**/*.js"],
+    "exclude": ["node_modules"]
+}

package.json

@@ -10,14 +10,16 @@
   },
   "dependencies": {
     "axios": "^0.24.0",
+    "better-scroll": "^2.4.2",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.7",
+    "swiper": "5",
     "vant": "^2.12.30",
     "vue": "^2.6.11",
+    "vue-awesome-swiper": "2.6.7",
     "vue-router": "^3.5.3"
   },
   "devDependencies": {
-    "@nbfe/postcss-px2rem": "^0.1.2",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
@@ -25,13 +27,16 @@
     "babel-plugin-import": "^1.13.3",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "postcss-short": "^5.0.0",
     "sass": "^1.43.4",
     "sass-loader": "^7.1.0",
+    "sass-resources-loader": "^2.2.4",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {
     "root": true,
+    "globals": {
+      "wx": true
+    },
     "env": {
       "node": true
     },

public/index.html

@@ -3,7 +3,8 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
+    <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>

src/App.vue

@@ -1,23 +1,70 @@
 <template>
-  <div id="app">
+  <div id="app" :style="{paddingBottom: paddingBottom + 'px'}">
     <router-view />
+    <van-tabbar v-model="active" v-if="showTabbar" class="tabbar" ref="tabbar" route>
+      <van-tabbar-item icon="home-o" v-for="(tab, index) in tabbar" :key="index" :to="tab.path">{{tab.title}}</van-tabbar-item>
+    </van-tabbar>
   </div>
 </template>
 
 <script>
+import { tabbar } from '../src/router'
 export default {
   name: 'App',
+  data(){
+    return {
+      active: '0',
+      paddingBottom: 0,
+      tabbar
+    }
+  },
+  provide(){
+    return {
+      root: this,
+      tabbar: this.$refs.tabbar
+    }
+  },
+  computed: {
+    showTabbar(){
+      const path = tabbar.map(tab => tab.path);
+      return path.includes(this.$route.path)
+    }
+  },
   components: {
+  },
+  watch: {
+    '$route': {
+      immediate: true,
+      handler(to){
+        document.title = to.meta.title || '自在福田';
+      }
+    }
+  },
+  mounted(){
+    if(this.showTabbar){
+      this.paddingBottom = this.$refs.tabbar.$el.offsetHeight;
+    } else{
+      this.paddingBottom = 0
+    }
   }
 }
 </script>
 
 <style>
 @import '~@/assets/css/reset.css';
+@import '//at.alicdn.com/t/font_2897403_zb1glrkwpij.css';
 
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  max-width: 750px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.tabbar{
+  padding-top: .57rem;
+  background: url('~@/assets/img/bg.png') top center no-repeat;
+  background-size: contain;
 }
 </style>

src/api/index.js

@@ -0,0 +1,74 @@
+import service from './service';
+
+function formatRegion(data){
+    const result = [];
+    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)
+        }
+        result.push(obj)
+    }
+    return result;
+}
+
+// 获取法师称谓
+const getMonkAppellation = () => service.get('/api/master/get-rank');
+
+// 获取省市区数据
+const getRegion = async () => {
+    const region = localStorage.getItem('region');
+    let data = [];
+    if(region === null){
+        const _data = await service.get('/api/region/get-region');
+        data = [].concat(formatRegion(_data));
+        localStorage.setItem('region', JSON.stringify(data))
+    } else {
+        data = JSON.parse(region)
+    }
+    return data
+}
+
+// 寺院进驻
+const postTemple = data => service.post('/api/temple/settled', data);
+
+// 上传
+const uploadFile = data => service.post('/api/upload', data);
+
+// 认证法师提交
+const certifyMonk = data => service.post('/api/master/certify', data);
+
+// 用户数据
+const getUserData = () => service.get('/api/get-user-data');
+
+// 添砖加瓦日行一善商品
+const getGoodsDetail = (goods_type, goods_id, temple_id) => service.get(`/api/${goods_type}/get-info?id=${goods_id}&temple_id=${temple_id}`);
+
+// 创建日行一善商品订单
+const createFriendlyDayOrder = data => service.post('/api/order/create-friendly', data);
+
+// 创建添砖加瓦订单
+const createBrickDayOrder = data => service.post('/api/order/create-tile', data);
+
+// 获取功德芳名
+const getMeritName = () => service.get(`/api/order/get-merit-list`)
+
+// 添加功德芳名
+const postMeritName = name => service.post(`/api/order/create-merit-name?name=${name}`)
+
+export {
+    getMonkAppellation,
+    getRegion,
+    postTemple,
+    uploadFile,
+    certifyMonk,
+    getUserData,
+    getGoodsDetail,
+    getMeritName,
+    createFriendlyDayOrder,
+    createBrickDayOrder,
+    postMeritName
+}

src/api/service.js

@@ -0,0 +1,30 @@
+import axios from 'axios';
+import { Toast } from 'vant';
+
+const baseURL = process.env.NODE_ENV === 'development' ? '/' : process.env.VUE_APP_HOST
+
+const instance = axios.create({
+    baseURL,
+    timeout: 15000,
+})
+
+instance.interceptors.request.use(request => {
+    return request;
+})
+
+instance.interceptors.response.use(response => {
+    if(response.status === 200){
+        if(response.data.code === 0){
+            return response.data.data;
+        }
+        if(response.data.code !== 0){
+            Toast.fail(response.data.message)
+        }
+    }
+    if(response.status !== 200){
+        Toast.fail('服务器错误')
+    }
+    return Promise.reject(response);
+})
+
+export default instance;

src/assets/scss/common.scss

@@ -0,0 +1,98 @@
+@import './variable.scss';
+
+.divider {
+    height: .24rem;
+    background: #F9F9FC;
+}
+
+.panel {
+    .panel-head {
+        padding: .53rem .4rem;
+        display: flex;
+        justify-content: space-between;
+
+        .title {
+            font-size: .43rem;
+            color: #222222;
+            font-weight: bold;
+        }
+
+        .external {
+            font-size: .37rem;
+            color: #666666;
+        }
+    }
+
+    .panel-body {
+        overflow-x: scroll;
+
+        .merit-group {
+            display: flex;
+            width: 11.36rem;
+            margin-bottom: .91rem;
+        }
+    }
+}
+.process-more{
+    line-height: 1.17rem;
+    text-align: center;
+    font-size: .37rem;
+    .iconfont{
+      vertical-align: middle;
+    }
+}
+
+.border-bottom{
+    position: relative;
+    &::after{
+        content: '';
+        height: 1px;
+        width: 200%;
+        background: #ededed;
+        transform: scale(0.5, 0.5);
+        transform-origin: left top;
+        display: block;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+    }
+}
+.border-top{
+    position: relative;
+    &::before{
+        content: '';
+        height: 1px;
+        width: 200%;
+        background: #ededed;
+        transform: scale(0.5, 0.5);
+        transform-origin: left top;
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+}
+.border-circle{
+    position: relative;
+    &::before{
+        content: '';
+        height: 199%;
+        width: 200%;
+        border: 1px solid #ededed;
+        transform: scale(0.5, 0.5);
+        transform-origin: left top;
+        display: block;
+        position: absolute;
+        pointer-events: none;
+        border-radius: .22rem;
+        top: 0;
+        left: 0;
+    }
+}
+
+.active{
+    &::before{
+        border-color: $primary-color;
+    }
+    color: $primary-color;
+}

src/assets/scss/variable.scss

@@ -0,0 +1,2 @@
+$primary-color: #CF9E3B;
+$btn-border-radius: .07rem;

src/common/tmap.js

@@ -0,0 +1,29 @@
+let TMAP;
+const defaultConfig = {
+    version: '1.exp',
+    key: ''
+}
+module.exports = {
+    load(config){
+        config = {
+            ...defaultConfig,
+            ...config
+        }
+        return new Promise((resolve) => {
+            if(TMAP){
+                resolve(TMAP)
+                return 
+            }
+            const script = document.createElement('script');
+            script.src = `https://map.qq.com/api/gljs?v=${config.version}&key=${config.key}`;
+            document.head.appendChild(script)
+            console.log(script)
+            script.setAttribute('async', true)
+            script.setAttribute('charset', 'utf-8')
+            script.onload = () => {
+                TMAP = window.TMap;
+                resolve(TMAP)
+            }
+        })
+    }
+}

src/common/vant.js

@@ -1,11 +1,60 @@
-import Vue from 'vue'
+import Vue from "vue";
-import 'vant/lib/index.css';
+import "vant/lib/index.css";
-import { Button, NavBar, Search, Swipe, SwipeItem,  Grid, GridItem  } from 'vant';
+import {
+	Button,
+	NavBar,
+	Search,
+	Swipe,
+	SwipeItem,
+	Grid,
+	GridItem,
+	NoticeBar,
+    Tabbar, 
+    TabbarItem,
+	Cell,
+	CellGroup,
+	Tab, Tabs,
+	Progress,
+	Form,
+	Field,
+	Uploader,
+	Step, Steps,
+	Checkbox, CheckboxGroup,
+	Popup,
+	Stepper,
+	Radio,
+	RadioGroup,
+	Switch,
+	Cascader,
+	ActionSheet
+} from "vant";
 
-Vue.use(Button)
+Vue.use(Button);
-Vue.use(NavBar)
+Vue.use(NavBar);
-Vue.use(Search)
+Vue.use(Search);
-Vue.use(Swipe)
+Vue.use(Swipe);
-Vue.use(SwipeItem)
+Vue.use(SwipeItem);
-Vue.use(Grid)
+Vue.use(Grid);
-Vue.use(GridItem)
+Vue.use(GridItem);
+Vue.use(NoticeBar);
+Vue.use(Tabbar);
+Vue.use(TabbarItem);
+Vue.use(Cell);
+Vue.use(CellGroup);
+Vue.use(Tab);
+Vue.use(Tabs);
+Vue.use(Progress);
+Vue.use(Form);
+Vue.use(Field);
+Vue.use(Uploader);
+Vue.use(Step);
+Vue.use(Steps);
+Vue.use(Checkbox);
+Vue.use(CheckboxGroup);
+Vue.use(Popup);
+Vue.use(Stepper);
+Vue.use(Radio)
+Vue.use(RadioGroup)
+Vue.use(Switch)
+Vue.use(ActionSheet)
+Vue.use(Cascader)

src/common/wechat-web.js

@@ -0,0 +1,15 @@
+export default {
+    install(Vue){
+        wx.config({
+            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
+            appId: '', // 必填，公众号的唯一标识
+            timestamp: 123, // 必填，生成签名的时间戳
+            nonceStr: '', // 必填，生成签名的随机串
+            signature: '',// 必填，签名
+            jsApiList: [] // 必填，需要使用的JS接口列表
+        });
+        wx.ready(function(){
+            Vue.prototype.$wx = wx;
+        })
+    }
+}

src/components/buddha-process/index.vue

@@ -0,0 +1,132 @@
+<template>
+    <div class="process" >
+        <span class="date">1995.04.09</span>
+        <div class="process-detail">
+        <h1 class="title">九月十九观音护法魔法会</h1>
+        <p class="desc">套用模型省时省力，不用冥思苦想，但是，每一个需要设计的内容和体系应…</p>
+        <div class="image-group">
+            <img src="https://img2.baidu.com/it/u=1300380272,3129731350&fm=26&fmt=auto" alt="">
+            <img src="https://img2.baidu.com/it/u=1300380272,3129731350&fm=26&fmt=auto" alt="">
+            <img src="https://img2.baidu.com/it/u=1300380272,3129731350&fm=26&fmt=auto" alt="">
+        </div>
+        <button class="purchase">护膜祈福 功德圆满</button>
+        <div class="bar">
+            <span class="join">已有23784人参与</span>
+            <div class="btn-group">
+            <span class="btn">
+                <i class="iconfont icon-guanzhu-yiguanzhu"></i>
+                <b>关注</b>
+            </span> 
+            <span class="btn">
+                <i class="iconfont icon-zhuanfa"></i>
+                <b>转发</b>
+            </span>
+            </div>
+        </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'buddha-process'
+}
+</script>
+
+<style lang="scss">
+.process{
+  display: flex;
+  position: relative;
+  padding: 0 .4rem;
+  &::after{
+    content: '';
+    height: 1px;
+    width: 200%;
+    background: #ededed;
+    transform: scale(0.5, 0.5);
+    transform-origin: left top;
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+  & ~ .process{
+    padding-top: .53rem;
+  }
+  .date{
+    font-size: .35rem;
+    color: #666666;
+    display: inline-block;
+    width: 2.19rem;
+    margin-top: .07rem;
+  }
+  .process-detail{
+    flex: 1;
+    .title{
+      font-size: .43rem;
+      color: #222;
+      margin-bottom: .32rem;
+    }
+    .desc{
+      font-size: .37rem;
+      line-height: .53rem;
+      color: #333;
+    }
+    .image-group{
+      white-space: nowrap;
+      margin-top: .27rem;
+      img{
+        width: 2.16rem;
+        height: 2.16rem;
+        vertical-align: top;
+        border-radius: .16rem;
+        & ~ img{
+          margin-left: .27rem;
+        }
+      }
+    }
+    .purchase{
+      background: #CF9E3B;
+      height: .77rem;
+      color: white;
+      padding: 0 .27rem;
+      line-height: .77rem;
+      border-radius: .07rem;
+      font-size: .35rem;
+      border:1px solid #CF9E3B;
+      margin-bottom: .32rem;
+      display: inline-block;
+      vertical-align: top;
+      margin-top: .4rem 
+    }
+    .bar{
+      display: flex;
+      justify-content: space-between;
+      padding-bottom: .37rem;
+      .join{
+        font-size: .3rem;
+        color: #666;
+      }
+      .btn-group{
+        display: flex;
+        .btn{
+          display: flex;
+          margin-left: .5rem;
+          line-height: .40rem;
+          
+          .iconfont{
+            color:$primary-color;
+            vertical-align: middle;
+            font-size: .3rem;
+          }
+          b{
+            font-size: .3rem;
+            padding-left: .07rem;
+            color: #888;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue';
+
+import UserMerit from './user-merit';
+import Temple from './temple'
+import BuddhaProcess from './buddha-process';
+import MeritGoods from './merit-goods';
+import Order from './order';
+import ScrollView from './scroll-view'
+
+Vue.component(UserMerit.name, UserMerit)
+Vue.component(Temple.name, Temple)
+Vue.component(BuddhaProcess.name, BuddhaProcess)
+Vue.component(MeritGoods.name, MeritGoods)
+Vue.component(Order.name, Order)
+Vue.component(ScrollView.name, ScrollView)

src/components/merit-goods/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="merit-goods">
+      <img  class="goods" src="https://img1.baidu.com/it/u=1786251324,3168622427&fm=26&fmt=auto" alt="">
+      <div class="info">
+          <h3 class="title">放生修复|观音出家月放生佛祖坚持护佑，第一迅猛的运转方法</h3>
+          <div class="bar">
+              <span class="join-number">已有100000人参与</span>
+              <button class="join">参与</button>
+          </div>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'merit-goods'
+}
+</script>
+
+<style lang="scss">
+    .merit-goods{
+        display: flex;
+        justify-content: space-between;
+        padding: .4rem;
+        border-bottom: .01rem solid #f2f2f2;
+        .goods{
+            width: 2.93rem;
+            height: 2.93rem;
+            margin-right: .4rem;
+            border-radius: .11rem;
+        }
+        .info{
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            .title{
+                font-size: .4rem;
+                line-height: 1.3;
+            }
+            .bar{
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .join-number{
+                    font-size: .35rem;
+                    color: #666;
+                }
+                .join{
+                    height: .67rem;
+                    padding: 0 .4rem;
+                    background: #CF9E3B;
+                    border: .01rem solid #CF9E3B;
+                    color: white;
+                    border-radius: .05rem;
+                    font-size: .37rem;
+                    line-height: .67rem;
+                }
+            }
+        }
+    }
+</style>

src/components/order/index.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="order">
+        <div class="order-head">
+            <span class="temple-name">重庆石林寺<i class="iconfont icon-arrow-right"></i></span>
+            <span class="status">已处理</span>
+        </div>
+        <div class="order-body">
+            <img class="goods-picture" src="https://img0.baidu.com/it/u=2890176269,287120071&fm=26&fmt=auto" alt="">
+            <div class="order-flex">
+                <h4 class="name">功德箱捐赠</h4>
+                <span class="date">2021-10-3</span>
+            </div>
+            <div class="order-flex-quantity">
+                <span class="amount">￥ 200.01</span>
+                <span class="quantity">数量： 1</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'order'
+}
+</script>
+
+<style lang="scss">
+.order{
+    font-size: .37rem;
+    background: white;
+    padding: .4rem;
+    border-radius: .27rem;
+    & ~ .order{
+        margin-top: .4rem;
+    }
+    .order-head{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .temple-name{
+            .iconfont{
+                vertical-align: middle;
+            }
+        }
+        .status{
+            font-size: .37rem;
+        }
+    }
+    .order-body{
+        display: flex;
+        margin-top: .4rem;
+        .order-flex{
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            padding: .13rem 0;
+            .name{
+                font-size: .43rem;
+            }
+            .date{
+                color: #555;
+                font-size: .37rem;
+            }
+        }
+        .goods-picture{
+            width: 1.87rem;
+            height: 1.87rem;
+            border-radius: .13rem;
+            margin-right: .4rem;
+        }
+        .order-flex-quantity{
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            padding: .13rem 0;
+            .amount{
+                font-weight: bold;
+            }
+            .quantity{
+                color: #666;
+                font-size: .35rem;
+            }
+
+        }
+    }
+}
+</style>

src/components/scroll-view/index.vue

@@ -0,0 +1,184 @@
+<template>
+	<div class="scroll-wrapper" ref="wrapper" :style="{height: wrapperHeight + 'px'}">
+        <div class="scroll-content">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+import BScroll from "better-scroll";
+
+export default {
+	name: "scroll-view",
+    data(){
+        return {
+            wrapperHeight: 0
+        }
+    },
+	props: {
+		/**
+		 * 1 滚动的时候会派发scroll事件，会截流。
+		 * 2 滚动的时候实时派发scroll事件，不会截流。
+		 * 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
+		 */
+		probeType: {
+			type: Number,
+			default: 1,
+		},
+		/**
+		 * 点击列表是否派发click事件
+		 */
+		click: {
+			type: Boolean,
+			default: true,
+		},
+		/**
+		 * 是否开启横向滚动
+		 */
+		scrollX: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * 是否派发滚动事件
+		 */
+		listenScroll: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * 列表的数据
+		 */
+		data: {
+			type: Array,
+			default: null,
+		},
+		/**
+		 * 是否派发滚动到底部的事件，用于上拉加载
+		 */
+		pullup: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * 是否派发顶部下拉的事件，用于下拉刷新
+		 */
+		pulldown: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * 是否派发列表滚动开始的事件
+		 */
+		beforeScroll: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * 当数据更新后，刷新scroll的延时。
+		 */
+		refreshDelay: {
+			type: Number,
+			default: 20,
+		},
+        height: {
+            type: Number
+        }
+	},
+	mounted() {
+		// 保证在DOM渲染完毕后初始化better-scroll
+        this.wrapperHeight = this.height || this.$parent.$el.offsetHeight
+		setTimeout(() => {
+			this._initScroll();
+		}, 20);
+	},
+    
+	methods: {
+		_initScroll() {
+			if (!this.$refs.wrapper) {
+				return;
+			}
+
+			// better-scroll的初始化
+			this.scroll = new BScroll(this.$refs.wrapper, {
+				probeType: this.probeType,
+				click: this.click,
+				scrollX: this.scrollX,
+			});
+
+			// 是否派发滚动事件
+			if (this.listenScroll) {
+				this.scroll.on("scroll", (pos) => {
+					this.$emit("scroll", pos);
+				});
+			}
+
+			// 是否派发滚动到底部事件，用于上拉加载
+			if (this.pullup) {
+				this.scroll.on("scrollEnd", () => {
+					// 滚动到底部
+					console.log(this.scroll.y, this.scroll.maxScrollY + 50)
+					if (this.scroll.y <= this.scroll.maxScrollY + 50) {
+						this.$emit("pullup");
+					}
+				});
+			}
+
+			// 是否派发顶部下拉事件，用于下拉刷新
+			if (this.pulldown) {
+				this.scroll.on("touchEnd", (pos) => {
+					// 下拉动作
+					if (pos.y > 50) {
+						this.$emit("pulldown");
+					}
+				});
+			}
+
+			// 是否派发列表滚动开始的事件
+			if (this.beforeScroll) {
+				this.scroll.on("beforeScrollStart", () => {
+					this.$emit("beforeScroll");
+				});
+			}
+		},
+		disable() {
+			// 代理better-scroll的disable方法
+			this.scroll && this.scroll.disable();
+		},
+		enable() {
+			// 代理better-scroll的enable方法
+			this.scroll && this.scroll.enable();
+		},
+		refresh() {
+			// 代理better-scroll的refresh方法
+			this.scroll && this.scroll.refresh();
+		},
+		scrollTo() {
+			// 代理better-scroll的scrollTo方法
+			this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments);
+		},
+		scrollToElement() {
+			// 代理better-scroll的scrollToElement方法
+			this.scroll &&
+				this.scroll.scrollToElement.apply(this.scroll, arguments);
+		},
+	},
+	watch: {
+		// 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常
+		data() {
+			setTimeout(() => {
+				this.refresh();
+			}, this.refreshDelay);
+		},
+         height: {
+            handler(val){
+                this.wrapperHeight = val;
+                this.scroll && this.scroll.refresh();
+            }
+        }
+	},
+};
+</script>
+
+<style></style>

src/components/temple/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="temple-card" @click="onTo">
+      <img :src="data.url" alt="">
+      <div class="info">
+          <span class="name">{{data.name}}</span>
+          <span class="visitor">{{data.visitor}} 人到访</span>
+          <span class="iconfont icon-dingwei"></span>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'temple',
+    props: {
+        data: {
+            type: Object,
+            default(){
+                return {
+                    url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg8.zol.com.cn%2Fbbs%2Fupload%2F24237%2F24236884.jpg&refer=http%3A%2F%2Fimg8.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638518604&t=074af50479ac14ca13fc6616380fe0f5',
+                    name: '重庆石林寺',
+                    visitor: 100
+                }
+            }
+        }
+    },
+    methods: {
+        onTo(){
+            this.$router.push({ name: 'temple-detail', query: { id: this.data.id }})
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.temple-card{
+    background: white;
+    border-radius: .13rem;
+    box-shadow: 0 0 .13rem rgba(0,0,0,0.1);
+    overflow: hidden;
+    & ~ .temple-card{
+        margin-top: .5rem;
+    }
+    img{
+        height: 4rem;
+        width: 100%;
+    }
+    .info{
+       display: flex;
+       height: 1.07rem;
+       align-items: center;
+       padding: 0 .4rem;
+       .name{
+           font-size: .37rem;
+           flex: 1;
+       } 
+       .visitor{
+           font-size: .3rem;
+           color: #666;
+           margin-right: .4rem;
+       }
+       .iconfont{
+            font-size: .4rem;
+            padding: 0;
+            color: rgb(60, 202, 60);           
+       }
+    }
+}
+</style>

src/components/user-merit/index.vue

@@ -0,0 +1,80 @@
+<template>
+	<div class="user-merit border-bottom">
+		<img
+			src="https://img0.baidu.com/it/u=199023397,1701150760&fm=26&fmt=auto"
+			alt=""
+		/>
+		<div class="profile">
+			<div>
+				<div class="name">
+					<span>李晓华</span>
+					<span>湖南长沙</span>
+				</div>
+				<p>为佛像贴金身，菩萨护佑</p>
+			</div>
+		</div>
+		<div class="result">
+            <p class="money">24212.23元</p>
+            <span class="date">2021-10-3 21：58</span>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "user-merit",
+};
+</script>
+
+<style lang="scss">
+.user-merit {
+	display: flex;
+	padding: .27rem 0.4rem;
+	img {
+		width: 1.17rem;
+		height: 1.17rem;
+		border-radius: 1.17rem;
+		margin-right: 0.4rem;
+	}
+	.profile {
+		flex: 1;
+        padding-top: .13rem;
+		.name {
+            display: flex;
+            align-items: flex-end;
+            margin-bottom: .27rem;
+			span:first-child {
+				font-size: 0.4rem;
+				color: #222;
+				vertical-align: top;
+				display: inline-block;
+				margin-right: .4rem;
+			}
+			span:last-child {
+				font-size: 0.32rem;
+				color: #666;
+				vertical-align: text-bottom;
+				display: inline-block;
+			}
+		}
+		p {
+			font-size: 0.32rem;
+		}
+	}
+	.result {
+		font-size: 0.32rem;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        padding: .13rem 0;
+        text-align: right;
+		.money {
+			font-size: 0.37rem;
+		}
+		.date {
+			font-size: 0.32rem;
+            color: #666;
+		}
+	}
+}
+</style>

src/main.js

@@ -1,10 +1,16 @@
 import Vue from 'vue'
+import VueAwesomeSwiper from 'vue-awesome-swiper';
 import App from './App.vue'
 import router from './router';
 import '@/assets/js/flexable.js';
 import './common/vant';
+import './components/index'
+import 'swiper/css/swiper.css'
+import WechatWeb from './common/wechat-web';
 
 Vue.config.productionTip = false
+Vue.use(VueAwesomeSwiper)
+Vue.use(WechatWeb)
 
 new Vue({
   render: h => h(App),

src/pages/buddha-activity/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="buddha-activity">
+      <van-nav-bar left-arrow :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
+      <div class="process-container">
+          <buddha-process v-for="i in 10" :key="i"></buddha-process>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+.process-container{
+    padding: .4rem 0;
+}
+</style>

src/pages/everyday-donation/index.vue

@@ -0,0 +1,478 @@
+<template>
+    <div class="everyday-donation" 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}" />
+        </div>
+        <swiper class="swiper-container" :options="swiperOption">
+            <swiper-slide>
+                <div style="height: 100vw;" class="picture">
+                    <img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
+                </div>
+            </swiper-slide>
+            <swiper-slide>
+                <div style="height: 100vw;" class="picture">
+                    <img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
+                </div>
+            </swiper-slide>
+        </swiper>
+        <div class="monk-profile">
+            <h1 class="position">{{data.name}}</h1>
+            <div class="bar">
+                <span class="status">进行中</span>
+                <span>已有{{data.sales || 0}}人参与</span>
+            </div>
+        </div>
+        <div class="divider"></div>
+        <div class="panel">
+            <div class="panel-head">
+                <span class="title">进展动态</span>
+            </div>
+            <div class="panel-body">
+                <buddha-process></buddha-process>
+                <div class="process-more">
+                    <span>查看更多进展状态</span>
+                    <i class="iconfont icon-arrow-right"></i>
+                </div>
+            </div>
+        </div>
+        <div class="support">
+            <div class="support-head">
+                <span class="label">感恩功德</span>
+                <ul class="external">
+                    <li class="active">实时</li>
+                    <li>月榜</li>
+                    <li>总榜</li>
+                </ul>
+            </div>
+            <div>
+                <user-merit></user-merit>
+                <user-merit></user-merit>
+                <user-merit></user-merit>
+                <user-merit></user-merit>
+            </div>
+        </div>
+        <div class="merit-button-group border-top">
+            <button class="merit-button" @click="showSpec = true">去行善</button>
+        </div>
+
+        <van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" :close-on-click-overlay="false" :close-on-popstate="true">
+            <!-- 显示日行一善的商品规格 -->
+            <div class="caret" v-if="query.goods_type === '-1'">
+                <div class="head">
+                    <span>选择行善金额</span>
+                </div>
+                <ul class="spec">
+                    <li class="random">
+                        <span class="border-circle">随喜</span>
+                    </li>
+                    <li v-for="(spec, index) in data.spec" :key="index">
+                        <span class="border-circle" :class="[Number(spec.money) === priceUnit && 'active']" @click="onPriceUnit(spec)">{{spec.money}}元</span>
+                    </li>
+                </ul>
+                <div class="auto-donate">
+                    <p class="label">自动行善</p>
+                    <div class="donate">
+                        <span>每天早上六点寺院联盟帮你自动行善一次</span>
+                        <van-checkbox v-model="is_auto" shape="square" checked-color="#cf9e3b"></van-checkbox>
+                    </div>
+                </div>
+                <div class="auto-donate-time" v-if="is_auto">
+                    <div class="donate">
+                        <span class="label">行善时间</span>
+                        <span class="time-cycle">
+                            <van-stepper v-model="number" step="1" />
+                            <span class="unit">个月</span>
+                        </span>
+                    </div>
+                </div>
+                <div class="next-group">
+                    <span class="total">合计：￥{{priceTotal}}</span>
+                    <button class="next" @click="onToPay">下一步</button>
+                </div>
+            </div>
+
+            <!-- 显示添砖加瓦的商品规格 -->
+            <div class="caret" v-if="query.goods_type === '-2'">
+                <div class="head">
+                    <span>选择行善金额</span>
+                </div>
+                <ul class="spec brick-spec">
+                    <li class="random">
+                        <span class="border-circle" :class="[is_assign && 'active']" @click="onCustomeBrike">自定义砖数认捐</span>
+                        <van-stepper v-model="buy_quantity" step="1" />
+                    </li>
+                    <li v-for="(spec, index) in data.spec" :key="index">
+                        <span 
+                            class="border-circle" 
+                            :class="[Number(spec.money) === priceUnit && 'active']" 
+                            @click="onPriceUnit(spec)"
+                        >认捐{{spec.donate_number}}块砖 {{spec.money}}元</span>
+                    </li>
+                </ul>
+                <div class="auto-donate">
+                    <p class="label">每日填砖</p>
+                    <div class="donate">
+                        <span>每天早上六点寺院联盟帮你自动填砖一次</span>
+                        <van-checkbox v-model="is_auto" shape="square" checked-color="#cf9e3b"></van-checkbox>
+                    </div>
+                </div>
+                <div class="auto-donate-time" v-if="is_auto">
+                    <div class="donate">
+                        <span class="label">行善时间</span>
+                        <span class="time-cycle">
+                            <van-stepper v-model="number" step="1" />
+                            <span class="unit">个月</span>
+                        </span>
+                    </div>
+                </div>
+                <div class="next-group">
+                    <span class="total">合计：￥{{priceTotal}}</span>
+                    <button class="next" @click="onToPay">下一步</button>
+                </div>
+            </div>
+
+        </van-popup>
+    </div>
+</template>
+
+<script>
+import 'swiper/css/swiper.css'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import { getGoodsDetail } from '@/api'
+
+export default {
+    components: {
+        swiper, swiperSlide
+    },
+    data(){
+        const { query } = this.$route;
+        let title = '详情';
+        if(query.goods_type === '-1'){
+            title = '日行一善';
+        }
+        if(query.goods_type === '-2'){
+            title = '添砖加瓦'
+        }
+        document.title = title;
+        return {
+            documentTitle: title,
+            query,
+            data: null,
+            value: 1,
+            is_auto: false, // 是否自动行善
+            showSpec: true,
+            priceUnit: 0,
+            priceUnitId: '',
+            number: 1,
+            is_assign: false, // 是否为自动认捐砖块数
+            buy_quantity: 1, // 自定义认捐砖块数
+            banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
+            swiperOption: {
+                autoplay: 8000,
+                initialSlide: 1,
+                loop: true,
+                pagination: '.swiper-pagination',
+            }
+        }
+    },
+    computed: {
+        priceTotal(){
+            if(this.is_auto){
+                return (parseInt(this.priceUnit * 100, 10) * this.number * 30) / 100
+            }
+            return (parseInt(this.priceUnit * 100, 10) * this.number) / 100;
+        }
+    },
+    mounted(){
+        if(this.query.goods_type === '-1'){
+            return this.getGoodsDetail('friendly');
+        }
+        if(this.query.goods_type === '-2'){
+            return this.getGoodsDetail('tile');
+        } 
+        
+    },
+    methods: {
+        // 获取商品详情
+        /*
+            type = friendly: 获取日行一善商品
+            type = tile: 获取添砖加瓦商品
+            type = common: 获取普通商品
+        */
+        async getGoodsDetail(type){
+            const { goods_id, temple_id } = 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))}))
+            }
+            this.data = response;
+        },
+        // 设置行善单价
+        onPriceUnit({id, money}){
+            this.priceUnit = Number(money);
+            this.priceUnitId = id;
+            if(this.query.goods_type === '-2'){
+                this.is_assign = false;
+            }
+        },
+        onToPay(){
+            if(this.query.goods_type === '-1'){
+                this.$router.push({
+                    name: 'pay',
+                    query: {
+                        ...this.$route.query,
+                        is_auto: this.is_auto ? 1 : 0,
+                        spec_id: this.priceUnitId,
+                        friendly_time: this.number,
+                        title: this.title,
+                        subTitle: this.data.name,
+                        amount: this.priceTotal,
+                        is_customized: 0,
+                        from: 'friendly_day', // 标识为日行一善
+                    }
+                })
+            }
+            if(this.query.goods_type === '-2'){
+                this.$router.push({
+                    name: 'pay',
+                    query: {
+                        ...this.$route.query,
+                        is_auto: this.is_auto ? 1 : 0,
+                        is_assign: this.is_assign ? 1 : 0,
+                        spec_id: this.priceUnitId,
+                        friendly_time: this.number,
+                        title: this.title,
+                        subTitle: this.data.name,
+                        amount: this.priceTotal,
+                        is_customized: 0,
+                        buy_quantity: this.buy_quantity,
+                        from: 'brike', // 标识为填砖加瓦
+                    }
+                })
+            }
+        },
+        amountAbs(number, price){
+            return (parseInt(number * 100, 10) * price) / 100
+        },
+        // 自定义砖数
+        onCustomeBrike(){
+            this.priceUnit = Number(this.data.price);
+            this.is_assign = true;
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.swiper-container{
+    background: #f5f5f5;
+    .picture, img{
+        width: 100%;
+        height: 100%;
+    }
+}
+.caret{
+    padding-bottom: 2.2rem;
+    .head{
+        display: flex;
+        justify-content: space-between;
+        font-size: .4rem;
+        padding: .4rem;
+        align-items: center;
+        margin-top: .13rem;
+        .iconfont{
+            font-size: .7rem;
+        }
+    }
+    .spec{
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-template-rows: 1fr 1fr;
+        grid-gap: .3rem;
+        padding: .4rem;
+        .random{
+            grid-column-start: 1;   
+            grid-column-end: 5;   
+            text-align: left;
+            span{
+                font-size: .35rem;
+                border-radius: .11rem;
+                width: auto;
+                display: inline-block;
+                padding: .3rem .7rem;
+                &:active{
+                    background: #f5f5f5;
+                }
+            }
+        }
+        li{
+            text-align: center;
+            span{
+                font-size: .35rem;
+                width: 100%;
+                display: inline-block;
+                vertical-align: top;
+                padding: .3rem 0;
+                line-height: 1.2;
+                user-select: none;
+                color: #666;
+                &:active{
+                    background: #f5f5f5;
+                }
+            }
+        }
+    }
+    .brick-spec{
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr 1fr;
+        grid-gap: .3rem;
+        .random{
+            grid-column-start: 1;   
+            grid-column-end: 3;   
+            text-align: left;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        span.active{
+            color: $primary-color;
+        }
+    }
+    .auto-donate{
+        padding: 0 .4rem;
+        margin-top: .6rem;
+        .label{
+            font-size: .4rem;
+        }
+        .donate{
+            display: flex;
+            margin-top: .3rem;
+            justify-content: space-between;
+            align-items: center;
+            span{
+                font-size: .35rem;
+            }
+        }
+    }
+    .auto-donate-time{
+        padding: .4rem ;
+        margin-top: .4rem;
+        .donate{
+            .label{
+                font-size: .4rem;
+            }
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .time-cycle{
+            display: flex;
+            align-items: flex-end;
+            .unit{
+                font-size: .3rem;
+                color: #666;
+                padding-left: .2rem;
+            }
+        }
+    }
+    .next-group{
+        display: flex;
+        justify-content: space-between;
+        padding: .4rem ;
+        position: absolute;
+        background: white;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        align-items: center;
+        border-top: 1px solid #ededed;
+        .total{
+            font-size: .4rem;
+        }
+        .next{
+            font-size: .4rem;
+            padding: .3rem 1rem;
+            background: $primary-color;
+            border: 1px solid $primary-color;
+            color: white;
+            border-radius: .1rem;
+        }
+    }
+}
+.support{
+    .support-head{
+        padding: 0 .4rem;
+        display: flex;
+        justify-content: space-between;
+        height: 1.07rem;
+        line-height: 1.07rem;
+        .label{
+            font-size: .4rem;
+            font-weight: bold;
+        }
+        .external{
+            display: flex;
+            align-items: center;
+            li{
+                margin-left: .3rem;
+                font-size: .35rem;
+                color: #666;
+            }
+            li.active{
+                color: #333;
+                font-weight: bold;
+            }
+        }
+    }
+}
+.everyday-donation{
+    .monk-profile{
+        padding: .4rem;
+        margin-bottom: .2rem;
+        .position{
+            font-size: .5rem;
+            padding-top: .2rem;
+            text-align: justify;
+            line-height: 1.3;
+            color: #19282E;
+        }
+        .bar{
+            margin-top: .27rem;
+        }
+        .status{
+            padding: .2rem .3rem;
+            background: orange;
+            color: white;
+            display: inline-block;
+            border-radius: .04rem;
+            margin-right: .3rem;
+            font-size: .3rem;
+        }
+        span{
+            color: #666;
+            font-size: .28rem;
+        }
+    }   
+    .merit-button-group{
+		text-align: center;
+		position: fixed;
+		bottom: 0;
+		z-index: 10;
+		left: 0;
+		right: 0;
+		background: white;
+		padding: .4rem 0;
+		.merit-button{
+			display: inline-block;
+			background: $primary-color;
+			color: white;
+			height: 1.2rem;
+			font-size: .37rem;
+            width: 60%;
+			padding: 0 .53rem;
+			border: .01rem solid $primary-color;
+			border-radius: 1.33rem
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,193 @@
+<template>
+	<div>
+		<van-cell-group>
+			<van-cell title="功德芳名" :value="person.name" is-link @click="onAction('name')"/>
+			<van-cell title="心愿" :value="dream"  is-link @click="onAction('desire')" />
+			<van-cell title="匿名参与" >
+                <van-switch v-model="checked" size="24px" />
+            </van-cell>
+		</van-cell-group>
+        <van-popup v-model="showDialog" position="bottom" :close-on-click-overlay="false" 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="请输入功德主姓名">
+                    <button class="btn" @click="addName">添加</button>
+                </div>
+                <div class="name-group">
+                    <span class="name" v-for="name in names" :key="name.id" @click="onSelectName(name)">
+                        {{name.name}} 
+                        <i class="iconfont icon-biaodankongjianshanchu"></i>
+                    </span>
+                </div>
+                <button class="confirm" @click="showDialog = false">确认</button>
+            </div>
+            <div class="add-merit-name" v-if="actionName === 'desire'">
+                <h3 class="title">心愿</h3>
+                <div class="desire-input">
+                    <textarea class="desire-textarea" v-model="desire" type="text" maxlength="50" placeholder="请输入功德主姓名" />
+                    <span>{{dream.length}}/50</span>
+                </div>
+                <div class="desire-quike">
+                    <div class="bar">
+                        <span>快捷输入</span>
+                        <span class="update">换一组<i class="iconfont icon-shuaxin"></i></span>
+                    </div>
+                    <div class="name-group">
+                        <span class="name">白头偕老</span>
+                        <span class="name">白头偕老</span>
+                        <span class="name">白头偕老</span>
+                        <span class="name">白头偕老</span>
+                    </div>
+                </div>
+                <button class="confirm" @click="showDialog = false">确认</button>
+            </div>
+        </van-popup>
+	</div>
+</template>
+
+<script>
+import { getMeritName, postMeritName } from '@/api';
+
+export default {
+    data(){
+        return {
+            checked: false,
+            showDialog: false,
+            actionName: 'name',
+            person: {},
+            dream: '',
+            names: []
+        }
+    },
+    mounted(){
+        this.getName()
+    },
+    methods: {
+        onAction(name){
+            this.showDialog = true;
+            this.actionName = name;
+        },
+        onSelectName(name){
+            this.person = name;
+            this.showDialog = false;
+        },
+        async addName(){
+            if(!this.name) return 
+            await postMeritName(this.name)
+            this.name = ''
+            this.getName()
+        },
+        async getName(){
+            const data = await getMeritName();
+            this.names = data;
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+.add-merit-name{
+    padding: .4rem;
+    .title{
+        font-size: .4rem;
+        margin-bottom: .4rem;
+    }
+    .add-name{
+        display: flex;
+        
+        .input{
+            flex: 1;
+            height: .8rem;
+            line-height: .8rem;
+            padding-left: .3rem;
+            font-size: .35rem;
+            border: 1px solid #ddd;
+            border-radius: .11rem;
+            font-size: .4rem;
+        }
+        .btn{
+            padding: .2rem .6rem;
+            background: $primary-color;
+            color: white;
+            border: 1px solid $primary-color;
+            font-size: .4rem;
+            border-radius: .11rem;
+            margin-left: .3rem;
+        }
+    }
+    .name-group{
+        padding: .5rem 0;
+        span{
+            display: inline-block;
+            padding: .2rem .3rem;
+            background: #fff;
+            border: 1px solid #ddd;
+            border-radius: .08rem;
+            position: relative;
+            margin-right: .4rem;
+            margin-bottom: .3rem;
+            font-size: .35rem;
+            vertical-align: top;
+            .iconfont{
+                position: absolute;
+                right: -.25rem;
+                top: -.25rem;
+                font-size: .5rem;
+                color: red;
+            }
+        }
+    }
+    .desire-input{
+        border: 1px solid #ddd;
+        border-radius: .13rem;
+        overflow: hidden;
+        .desire-textarea{
+            border: none;
+            display: block;
+            font-size: .35rem;
+            width: calc(100% - .5rem);
+            padding: .25rem;
+            height: 2rem;
+            resize: none;
+        }
+        span{
+            display: block;
+            text-align: right;
+            padding: .2rem;
+            font-size: .35rem;
+        }
+    }
+    .desire-quike{
+        margin-top: 1rem;
+        .bar{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: .4rem;
+            margin-bottom: .3rem;
+            .update{
+                font-size: .35rem;
+                color: $primary-color;
+            }
+        }
+        .name-group{
+            padding: .1rem 0;
+            .name{
+              
+            }
+        }
+    }
+    .confirm{
+        background: $primary-color;
+        color: white;
+        border: 1px solid $primary-color;
+        width: 3rem;
+        padding: .3rem 0;
+        border-radius: .07rem;
+        display: block;
+        margin: 0 auto;
+        font-size: .4rem;
+    }
+}
+</style>

src/pages/goods-detail/components/select-spec.vue

@@ -0,0 +1,83 @@
+<template>
+	<span>
+		<ul class="spec-group">
+			<li class="border-circle">
+				<span>季度放生（每周放/反馈）</span>
+				<span>随喜</span>
+			</li>
+			<li class="border-circle" v-for="spec in data.spec" :key="spec.id" :class="[ value === spec.id && 'active']" @click="onSelectSpec(spec)">
+				<span>{{spec.spec_name}}</span>
+				<span>￥ {{spec.price}}</span>
+			</li>
+		</ul>
+
+		<div class="auto-donate-time">
+			<div class="donate">
+				<span class="label">数量 {{ number}}</span>
+				<span class="time-cycle">
+					<van-stepper v-model="num" step="1" @change="onChangeNumber"/>
+				</span>
+			</div>
+		</div>
+	</span>
+</template>
+
+<script>
+
+
+export default {
+    props: {
+        value: {
+            type: [String, Number]
+        },
+        data: {
+            type: Object,
+        },
+        number: Number,
+    },
+    data(){
+        return {
+            num: 0,
+        }
+    },
+    watch: {
+        number: {
+            handler: val => {
+                this.num = val;
+            }
+        }
+    },
+    
+    methods: {
+        onChangeNumber(value){
+            this.$emit('update:number', value)
+        },
+        onSelectSpec(spec){
+            this.$emit('input', spec.id)
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+.spec-group{
+    padding: .2rem .4rem;
+    max-height: 50vh;
+    overflow: scroll;
+    li{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 .4rem;
+        font-size: .4rem;
+        height: 1rem;
+        & ~ li{
+            margin-top: .3rem;
+        }
+    }
+    li.active{
+        border-color: $primary-color;
+        color: $primary-color;
+    }
+}
+</style>

src/pages/goods-detail/index.vue

@@ -0,0 +1,288 @@
+<template>
+    <div class="goods-detail" v-if="data">
+        <swiper class="swiper-container" :options="swiperOption">
+            <swiper-slide>
+                <div style="height: 100vw;" class="picture">
+                    <img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
+                </div>
+            </swiper-slide>
+            <swiper-slide>
+                <div style="height: 100vw;" class="picture">
+                    <img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
+                </div>
+            </swiper-slide>
+        </swiper>
+        <div class="monk-profile">
+            <h1 class="position">{{data.name}}</h1>
+            <div class="bar">
+                <span class="status">进行中</span>
+                <span>已有{{data.sales || 0}}人参与</span>
+            </div>
+        </div>
+        <div class="support">
+            <div class="support-head">
+                <span class="label">供养者</span>
+                <ul class="external">
+                    <li class="active">实时</li>
+                    <li>月榜</li>
+                    <li>总榜</li>
+                </ul>
+            </div>
+            <div>
+                <user-merit></user-merit>
+                <user-merit></user-merit>
+                <user-merit></user-merit>
+                <user-merit></user-merit>
+            </div>
+        </div>
+        <div class="detail-button-group">
+            <button class="merit-button" @click="showSpec = true">{{data.pay_name}}</button>
+        </div>
+
+        <van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" :close-on-click-overlay="false" :close-on-popstate="true">
+            <div class="caret-spec">
+                <div class="head">
+                    <span>参与流程： </span>
+                    <ul class="step-inline">
+                        <li :class="[ current === 0 && 'current']" @click="current = 0">选择类型</li>
+                        <li :class="[ current === 1 && 'current']" @click="current = 1">填写信息</li>
+                        <li :class="[ current === 2 && 'current']" >参与成功</li>
+                    </ul>
+                </div>
+                <transition>
+                    <template>
+                        <select-spec v-if="current === 0" v-model="spec_id" :data="data"></select-spec>
+                        <fill-information v-if="current === 1" :data="data"></fill-information>
+                    </template>
+                </transition>
+                <div class="next-group">
+                    <span class="total">合计：￥289</span>
+                    <button class="next" @click="onNextStep">下一步</button>
+                </div>
+            </div>
+        </van-popup>
+    </div>
+</template>
+
+<script>
+import 'swiper/css/swiper.css'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import { getGoodsDetail } from '@/api'
+import SelectSpec from './components/select-spec.vue'
+import FillInformation from './components/fill-information.vue';
+
+export default {
+    components: {
+        swiper, 
+        swiperSlide,
+        SelectSpec,
+        FillInformation
+    },
+    data(){
+        return {
+            query: this.$route.query,
+            showSpec: true,
+            checked: false,
+            current: 0,
+            data: null,
+            value: '',
+            spec_id: '',
+            banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
+            step: 0,
+            swiperOption: {
+                autoplay: 8000,
+                initialSlide: 1,
+                loop: true,
+                pagination: '.swiper-pagination',
+                onSlideChangeEnd: swiper => {
+                    console.log('onSlideChangeEnd', swiper.realIndex)
+                }
+            }
+        }
+    },
+    mounted(){
+        this.getGoodsDetail('common');
+    },
+    methods: {
+        onNextStep(){
+            this.current += 1;
+            if(this.current > 3){
+                this.current = 0
+            }
+        },
+        async getGoodsDetail(type){
+            const { goods_id, temple_id } = this.$route.query;
+            const response = await getGoodsDetail(type, goods_id, temple_id);
+            this.data = response;
+        },
+    }
+}
+</script>
+
+<style lang="scss">
+.goods-detail{
+    .support{
+        .support-head{
+            padding: 0 .4rem;
+            display: flex;
+            justify-content: space-between;
+            height: 1.07rem;
+            line-height: 1.07rem;
+            .label{
+                font-size: .4rem;
+                font-weight: bold;
+            }
+            .external{
+                display: flex;
+                align-items: center;
+                li{
+                    margin-left: .3rem;
+                    font-size: .35rem;
+                    color: #666;
+                }
+                li.active{
+                    color: #333;
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+    .swiper-container{
+        background: #f5f5f5;
+        .picture, img{
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .monk-profile{
+        padding: .4rem;
+        margin-bottom: .53rem;
+        .position{
+            font-size: .5rem;
+            padding-top: .2rem;
+            color: #19282E;
+        }
+        .introduction{
+            font-size: .37rem;
+            margin-top: .4rem;
+            line-height: 1.3;
+            text-align: justify;
+            color: #666;
+        }
+        .bar{
+            margin-top: .27rem;
+        }
+        .status{
+            padding: .2rem .3rem;
+            background: orange;
+            color: white;
+            display: inline-block;
+            border-radius: .04rem;
+            margin-right: .3rem;
+            font-size: .3rem;
+        }
+        span{
+            color: #666;
+            font-size: .28rem;
+        }
+    }   
+    .detail-button-group{
+		text-align: center;
+		position: fixed;
+		bottom: 0;
+		z-index: 10;
+		left: 0;
+		right: 0;
+		background: white;
+		border-top: .01rem solid #ddd;
+        padding: .3rem;
+		.merit-button{
+			display: inline-block;
+			background: $primary-color;
+			color: white;
+			height: 1.2rem;
+			font-size: .37rem;
+            min-width: 60%;
+			padding: 0 .53rem;
+			border: .01rem solid $primary-color;
+            border-radius: .13rem;
+		}
+	}
+    .caret-spec{
+        padding-bottom: 1.6rem;
+        .head{
+            display: flex;
+            justify-content: space-between;
+            font-size: .4rem;
+            padding: .4rem;
+            align-items: center;
+            margin-top: .13rem;
+            .iconfont{
+                font-size: .7rem;
+            }
+            .step-inline{
+                display: inline-block;
+                flex: 1;
+                font-size: .35rem;
+                li{
+                    display: inline-block;
+                    & ~ li:before{
+                        content: '-';
+                        padding: 0 .1rem;
+                    }
+                    
+                }
+                li.current{
+                    color: $primary-color;
+                }
+            }
+        }
+        
+        .auto-donate-time{
+            padding: .4rem ;
+            margin-top: .4rem;
+            margin-bottom: 1rem;
+            .donate{
+                .label{
+                    font-size: .4rem;
+                }
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+            .time-cycle{
+                display: flex;
+                align-items: flex-end;
+                .unit{
+                    font-size: .3rem;
+                    color: #666;
+                    padding-left: .2rem;
+                }
+            }
+        }
+        .next-group{
+            display: flex;
+            justify-content: space-between;
+            padding: .4rem ;
+            position: absolute;
+            background: white;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            align-items: center;
+            border-top: 1px solid #ededed;
+            .total{
+                font-size: .4rem;
+            }
+            .next{
+                font-size: .4rem;
+                padding: .3rem 1rem;
+                background: $primary-color;
+                border: 1px solid $primary-color;
+                color: white;
+                border-radius: .1rem;
+            }
+        }
+    }
+}
+</style>

src/pages/home.vue

@@ -3,33 +3,106 @@
     <van-nav-bar title="自在福田" style="background: #BF9330; color: white" />
     <van-search v-model="value" placeholder="寺院、主持、监寺" />
     <div class="container">
-      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+      <div class="swiper">
-        <van-swipe-item>
+        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
-          <img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
+          <van-swipe-item>
-        </van-swipe-item>
+            <img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
-        <van-swipe-item>
+          </van-swipe-item>
-          <img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
+          <van-swipe-item>
-        </van-swipe-item>
+            <img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
-        <van-swipe-item>
+          </van-swipe-item>
-          <img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
+          <van-swipe-item>
-        </van-swipe-item>
+            <img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
-        <van-swipe-item>
+          </van-swipe-item>
-          <img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
+          <van-swipe-item>
-        </van-swipe-item>
+            <img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
-      </van-swipe>
+          </van-swipe-item>
-      <van-grid>
+        </van-swipe>
-        <van-grid-item icon="photo-o" text="文字" />
+      </div>
-        <van-grid-item icon="photo-o" text="文字" />
+      <van-grid :border="false">
-        <van-grid-item icon="photo-o" text="文字" />
+        <van-grid-item icon="photo-o" text="佛前供灯" />
-        <van-grid-item icon="photo-o" text="文字" />
+        <van-grid-item icon="photo-o" text="日行一善" />
+        <van-grid-item icon="photo-o" text="祈福" />
+        <van-grid-item icon="photo-o" text="放生修福" />
+        <van-grid-item icon="photo-o" text="供养三宝" />
+        <van-grid-item icon="photo-o" text="供奉排位" />
+        <van-grid-item icon="photo-o" text="捐建寺院" />
+        <van-grid-item icon="photo-o" text="功德箱" />
       </van-grid>
+      <van-notice-bar
+        border
+        left-icon="https://img2.baidu.com/it/u=2192265457,2884791613&fm=26&fmt=auto"
+        :scrollable="false"
+        mode="closeable"
+        text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
+      />
+    </div>
+    <div class="divider"></div>
+    <div class="panel">
+      <div class="panel-head">
+        <span class="title">功德无量</span>
+        <span class="external">更多</span>
+      </div>
+      <div class="panel-body">
+        <div class="merit-group">
+          <div class="merit">
+            <img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt="">
+            <p class="title">为佛像贴金身，菩萨菩萨</p>
+          </div>
+          <div class="merit">
+            <img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt="">
+            <p class="title">为佛像贴金身，菩萨菩萨</p>
+          </div>
+          <div class="merit">
+            <img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt="">
+            <p class="title">为佛像贴金身，菩萨菩萨</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="divider"></div>
+    <div class="panel">
+      <div class="panel-head">
+        <span class="title">进展状态</span>
+        <span class="external">更多</span>
+      </div>
+      <div class="panel-body">
+        
+        <div class="process-more">
+          <span>查看更多进展状态</span>
+          <i class="iconfont icon-arrow-right"></i>
+        </div>
+      </div>
+      <div class="divider"></div>
+      <div class="merit-rank-container">
+        <div class="head">
+          <span class="title">感恩功德</span>
+          <div class="list">
+            <span class="current">实时</span>
+            <span>月榜</span>
+            <span>总榜</span>
+          </div>
+        </div>
+        <div class="body">
+          <user-merit></user-merit>
+          <user-merit></user-merit>
+          <user-merit></user-merit>
+          <user-merit></user-merit>
+          <user-merit></user-merit>
+          <user-merit></user-merit>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-
+  data(){
+    return {
+      value: ''
+    }
+  }
 }
 </script>
 
@@ -37,8 +110,38 @@ export default {
 .van-nav-bar__title{
   color: white;
 }
+.merit-rank-container{
+  .head{
+    padding: .53rem .4rem;
+    padding-bottom: .13rem;
+    display: flex;
+    justify-content: space-between;
+    .title{
+      font-size: .43rem;
+      color: #222222;
+    }
+    .list{
+      display: flex;
+      span{
+        font-size: .37rem;
+        color: #999999;
+        display: inline-block;
+        margin-left: .4rem;
+        border-bottom: .03rem solid transparent;
+        padding-bottom: .13rem;
+      }
+      span.current{
+        color: #222;
+        border-bottom-color: rgb(168, 28, 28);
+      }
+    }
+  }
+}
+
+
 .container{
   padding: .4rem;
+  padding-bottom: .53rem;
   .my-swipe .van-swipe-item {
     color: #fff;
     font-size: 20px;
@@ -50,5 +153,45 @@ export default {
       border-radius: .16rem;
     }
   }
+  .swiper{
+    margin-bottom: .4rem;
+  }
+  .van-notice-bar{
+    border: 1px solid #E6B759;
+    border-radius: .16rem;
+  }
+}
+
+
+.merit{
+  width: 3.39rem;
+  height: 3.39rem;
+  display: inline-block;
+  position: relative;
+  border-radius: .16rem;
+  vertical-align: top;
+  overflow: hidden;
+  & ~ .merit{
+    margin-left: .4rem;
+  }
+  img{
+    width: 100%;
+    height: 100%;
+  }
+  .title{
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: .91rem;
+    background: rgba(0,0,0,0.7);
+    color: white;
+    line-height: .91rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: .37rem;
+    padding: 0 .11rem;
+  }
 }
 </style>

src/pages/merit-box/index.vue

@@ -0,0 +1,113 @@
+<template>
+	<div class="merit-box">
+		<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 + 'px'}" src="https://img1.baidu.com/it/u=614501043,2936454496&fm=26&fmt=auto" alt="">
+			<div class="merit-rank-container">
+				<div class="head">
+					<span class="title">
+						感恩功德
+						<b class="sub-title">重庆石林寺</b>
+					</span>
+					<div class="list">
+						<span class="current">实时</span>
+						<span>月榜</span>
+						<span>总榜</span>
+					</div>
+				</div>
+				<div class="body">
+					<user-merit></user-merit>
+					<user-merit></user-merit>
+					<user-merit></user-merit>
+					<user-merit></user-merit>
+					<user-merit></user-merit>
+					<user-merit></user-merit>
+				</div>
+			</div>
+			<div class="merit-button-group">
+				<button class="merit-button">随喜功德</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	data(){
+		return {
+			width: 0
+		}
+	},
+	mounted(){
+		this.width = window.innerWidth;
+	}
+};
+</script>
+
+<style lang="scss">
+.merit-box{
+	.goods-picture{
+		vertical-align: top;
+	}
+	.merit-rank-container{
+		.head{
+			padding: .53rem .4rem;
+			padding-bottom: .13rem;
+			display: flex;
+			justify-content: space-between;
+			.title{
+				font-size: .43rem;
+				color: #222222;
+				.sub-title{
+					font-size: .35rem;
+					margin-left: .4rem;
+					display: inline-block;
+					color: #666;
+				}
+			}
+			.list{
+			display: flex;
+			span{
+				font-size: .37rem;
+				color: #999999;
+				display: inline-block;
+				margin-left: .4rem;
+				border-bottom: .03rem solid transparent;
+				padding-bottom: .13rem;
+			}
+			span.current{
+				color: #222;
+				border-bottom-color: rgb(168, 28, 28);
+			}
+			}
+		}
+	}
+	.merit-button-group{
+		text-align: center;
+		position: fixed;
+		bottom: 0;
+		z-index: 10;
+		left: 0;
+		right: 0;
+		background: white;
+		padding: .4rem 0;
+		border-top: .01rem solid #ddd;
+		.merit-button{
+			display: inline-block;
+			background: $primary-color;
+			color: white;
+			height: .93rem;
+			font-size: .37rem;
+			padding: 0 .53rem;
+			border: .01rem solid $primary-color;
+			border-radius: $btn-border-radius;
+		}
+	}
+}
+</style>

src/pages/merit-list/index.vue

@@ -0,0 +1,19 @@
+<template>
+	<div class="buddha-activity">
+		<van-nav-bar
+			left-arrow
+			:title="$route.meta.title"
+			@click-left="$router.back()"
+			:style="{ backgroundColor: $route.meta.navBarBackgroundColor }"
+		/>
+		<div class="merit-container">
+			<merit-goods v-for="i in 10" :key="i"></merit-goods>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>

src/pages/monk/index.vue

@@ -0,0 +1,143 @@
+<template>
+    <div class="monk-detail">
+        <div class="topbar" ref="topbar">
+            <van-nav-bar left-arrow :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
+        </div>
+        <swiper class="swiper-container" :options="swiperOption">
+            <swiper-slide>
+                <div style="height: 100vw;" class="picture">
+                    <img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
+                </div>
+            </swiper-slide>
+            <swiper-slide>
+                <div style="height: 100vw;" class="picture">
+                    <img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
+                </div>
+            </swiper-slide>
+        </swiper>
+        <div class="monk-profile">
+            <h1 class="position">方丈： 素全大法师</h1>
+            <p class="introduction">素全法师的法名智国，是属羊人，他毕业于电子科技大学，他出生于成都市。他出于对佛教文化的特别喜爱，在1989年于昭觉寺皈依清定上师，法名智国。在2006-7-28日入驻四川省什邡市的罗汉寺，在1994年，于山西五台山碧山寺依本焕大和尚、一诚大和尚、香港圣一大和尚为三师，美国寿冶大和尚为学戒和尚受具足戒。并且在1996～1999年，于山西五台山塔院寺学修。曾任传戒引礼、尊证等职先后参加了四川省佛教协会宝光寺、峨眉山、石经寺、广德寺的传授三坛大戒法会。</p>
+        </div>
+        <div class="support">
+            <div class="support-head">
+                <span class="label">供养者</span>
+                <ul class="external">
+                    <li class="active">实时</li>
+                    <li>月榜</li>
+                    <li>总榜</li>
+                </ul>
+            </div>
+            <div>
+                <user-merit></user-merit>
+                <user-merit></user-merit>
+                <user-merit></user-merit>
+                <user-merit></user-merit>
+            </div>
+        </div>
+        <div class="merit-button-group">
+            <button class="merit-button">供养</button>
+        </div>
+    </div>
+</template>
+
+<script>
+import 'swiper/css/swiper.css'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+
+export default {
+    components: {
+        swiper, swiperSlide
+    },
+    data(){
+        return {
+            banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
+            swiperOption: {
+                autoplay: 8000,
+                initialSlide: 1,
+                loop: true,
+                pagination: '.swiper-pagination',
+                onSlideChangeEnd: swiper => {
+                    console.log('onSlideChangeEnd', swiper.realIndex)
+                }
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.swiper-container{
+    background: #f5f5f5;
+    .picture, img{
+        width: 100%;
+        height: 100%;
+    }
+}
+.support{
+    .support-head{
+        padding: 0 .4rem;
+        display: flex;
+        justify-content: space-between;
+        height: 1.07rem;
+        line-height: 1.07rem;
+        .label{
+            font-size: .4rem;
+            font-weight: bold;
+        }
+        .external{
+            display: flex;
+            align-items: center;
+            li{
+                margin-left: .3rem;
+                font-size: .35rem;
+                color: #666;
+            }
+            li.active{
+                color: #333;
+                font-weight: bold;
+            }
+        }
+    }
+}
+.monk-detail{
+    .monk-profile{
+        padding: .4rem;
+        margin-bottom: .53rem;
+        .position{
+            font-size: .5rem;
+            padding-top: .2rem;
+            color: #19282E;
+        }
+        .introduction{
+            font-size: .37rem;
+            margin-top: .4rem;
+            line-height: 1.3;
+            text-align: justify;
+            color: #666;
+        }
+    }   
+    .merit-button-group{
+		text-align: center;
+		position: fixed;
+		bottom: 0;
+		z-index: 10;
+		left: 0;
+		right: 0;
+		background: white;
+		padding: .4rem 0;
+		border-top: .01rem solid #ddd;
+		.merit-button{
+			display: inline-block;
+			background: $primary-color;
+			color: white;
+			height: 1.2rem;
+			font-size: .37rem;
+            width: 60%;
+			padding: 0 .53rem;
+			border: .01rem solid $primary-color;
+			border-radius: 1.33rem
+		}
+	}
+}
+</style>

src/pages/pay/index.vue

@@ -0,0 +1,121 @@
+<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}" />
+        </div>
+        <div class="pay-info">
+            <h1 class="amount"><b>￥</b>{{query.amount}}</h1>
+            <div class="order-info">
+                <h3 class="title">{{query.title}}</h3>
+                <p class="desc">{{query.subTitle}}</p>
+            </div>
+
+            <div class="pay-type">
+                <p class="label">支付方式</p>
+                <van-radio-group v-model="payType">
+                    <van-cell-group>
+                        <van-cell title="微信" clickable @click="radio = '1'" icon="wechat">
+                            <template #icon>
+                                <img style="width: 40px" src="@/assets/img/wechat.jpg" alt="">
+                            </template>
+                            <template #right-icon>
+                                <van-radio name="1" />
+                            </template>
+                        </van-cell>
+                    </van-cell-group>
+                </van-radio-group>
+            </div>
+            
+            <div class="pay-button-container">
+                <van-button block type="primary" round class="pay-button" @click="onCreatePayOrder">确认支付</van-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { createFriendlyDayOrder, createBrickDayOrder, createCommonOrder } from '@/api';
+
+export default {
+    components: {
+    },
+    data(){
+        return {
+            query: this.$route.query,
+            payType: 0
+        }
+    },
+    methods: {
+        async onCreatePayOrder(){
+            // 创建日行一善支付订单
+            if(this.query.goods_type === '-1'){
+                const request = {
+                    ...this.query,
+
+                }
+                return createFriendlyDayOrder(request)
+            }
+            // 创建填砖加瓦订单
+            if(this.query.goods_type === '-2'){
+                const request = {
+                    ...this.query,
+
+                }
+                return createBrickDayOrder(request)
+                 
+            }
+
+            const request = {
+                ...this.query
+            }
+
+            createCommonOrder(request)
+
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.pay{
+    .pay-info{
+        padding-top: 2rem;
+        .amount{
+            b{
+                font-size: .5rem;
+                color: rgb(236, 188, 98);
+                padding-right: .1rem;
+            }
+            text-align: center;
+            font-size: 1.07rem;
+            color: rgb(255, 140, 8);
+            font-weight: bold;
+        }
+        .order-info{
+            margin-top: 1rem;
+            padding: .4rem;
+            .title{
+                font-size: .4rem;
+                font-weight: bold;
+            }
+            .desc{
+                padding-top: .3rem;
+                color: #666;
+                font-size: .35rem;
+            }
+        }
+        .pay-type{
+            padding: .4rem;
+            margin-top: .6rem;
+            .label{
+                font-size: .4rem;
+                font-weight: bold;
+                margin-bottom: .3rem;
+            }
+        }
+        .pay-button-container{
+            padding: .4rem;
+        }
+    }
+}
+</style>

src/pages/search/index.vue

@@ -0,0 +1,90 @@
+<template>
+	<div class="search-result">
+        <form action="/">
+            <van-search
+                v-model="value"
+                show-action
+                placeholder="请输入搜索关键词"
+                @search="onSearch"
+                @cancel="onCancel"
+            />
+        </form>
+        <div class="search-history">
+            <h1 class="title">热门搜索</h1>
+            <div class="search-text-group">
+                <span class="search-text">放生修福<i class="iconfont icon-hotfill"></i></span>
+                <span class="search-text">在宮腔佛</span>
+                <span class="search-text">在宮腔</span>
+                <span class="search-text">在宮腔</span>
+                <span class="search-text">在宮腔</span>
+                <span class="search-text">在宮腔</span>
+            </div>
+        </div>
+        <div class="search-history">
+            <div class="flex">
+                <h1 class="title">历史记录</h1>
+                <span>
+                    <i class="iconfont icon-delete"></i>
+                </span>
+            </div>
+            <div class="search-text-group">
+                <span class="search-text">放生修福</span>
+                <span class="search-text">在宮腔佛</span>
+                <span class="search-text">在宮腔</span>
+                <span class="search-text">在宮腔</span>
+                <span class="search-text">在宮腔</span>
+                <span class="search-text">在宮腔</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            value: '',
+        }
+    },
+    methods: {
+        onSearch(){
+
+        },
+        onCancel(){
+
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+.search-history{
+    padding: 0 .4rem;
+    margin-bottom: .53rem;
+    .title{
+        font-size: .4rem;
+        color: #222;
+    }
+    .flex{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+    .search-text-group{
+        .search-text{
+            font-size: .37rem;
+            color: #222;
+            display: inline-block;
+            padding: .16rem .27rem;
+            border: .01rem solid #ddd;
+            border-radius: .11rem;
+            margin-right: .4rem;
+        }
+        .iconfont{
+            display: inline-block;
+            color: red;
+            margin-left: .13rem;
+        }
+    }
+}
+</style>

src/pages/temple-detail/index.vue

@@ -0,0 +1,117 @@
+<template>
+    <div class="temple-detail">
+        <img class="banner" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg8.zol.com.cn%2Fbbs%2Fupload%2F24237%2F24236884.jpg&refer=http%3A%2F%2Fimg8.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638518604&t=074af50479ac14ca13fc6616380fe0f5" alt="">
+        <div class="authed border-bottom">
+            <span>已通过 寺院联盟 认证 可放心访问</span>
+        </div>
+
+        <div class="auth">
+            <h4 class="title border-bottom">基础信息</h4>
+            <ul class="list">
+                <li>
+                    <span class="label">单位名称：</span>
+                    <span class="value">重庆石林寺</span>
+                </li>
+                <li>
+                    <span class="label">登记编号：</span>
+                    <span class="value">宗场证字（渝）F3232412324 号</span>
+                </li>
+                <li>
+                    <span class="label">负责人：</span>
+                    <span class="value">道济</span>
+                </li>
+                <li>
+                    <span class="label">所在地址：</span>
+                    <span class="value">深圳市宝安区十包度假村内</span>
+                </li>
+            </ul>
+        </div>
+
+        <div class="auth">
+            <h4 class="title border-bottom">认证授权</h4>
+            <ul class="cert">
+                <li>
+                    <img src="https://img1.baidu.com/it/u=167820301,4019853019&fm=26&fmt=auto" alt="">
+                </li>
+                <li>
+                    <img src="https://img1.baidu.com/it/u=167820301,4019853019&fm=26&fmt=auto" alt="">
+                </li>
+                <li>
+                    <img src="https://img1.baidu.com/it/u=167820301,4019853019&fm=26&fmt=auto" alt="">
+                </li>
+            </ul>
+        </div>
+
+        <div class="auth">
+            <h4 class="title border-bottom">寺院简介</h4>
+            <p class="description">少林寺始建于北魏太和十九年（495年），是孝文帝为了安置他所敬仰的印度高僧跋陀尊者，在与都城洛阳相望的嵩山少室山北麓敕建而成。少林寺常住院占地面积约57600平方米，现任方丈是曹洞正宗第47世、第33代嗣祖沙门释永信。 [1-2]  少林寺是世界著名的佛教寺院，是汉传佛教的禅宗祖庭，在中国佛教史上占有重要地位，被誉为“天下第一名刹”。因其历代少林武僧潜心研创和不断发展的少林功夫而名扬天下，素有“天下功夫出少林，少林功夫甲天下”之说。</p>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    
+}
+</script>
+
+<style lang="scss">
+.temple-detail{
+    .banner{
+        width: 100%;
+    }
+    .authed{
+        font-size: .4rem;
+        line-height: 1.2rem;
+        padding-left: .4rem;
+    }
+    .auth{
+        margin: .4rem;
+        margin-top: .8rem;
+        .title{
+            font-size: .4rem;
+            font-weight: bold;
+            padding-bottom: .3rem;
+        }
+        .list{
+            margin-top: .2rem;
+            li{
+                line-height: .8rem;
+                font-size: .4rem;
+                .label{
+                    display: inline-block;
+                    width: 5em;
+                    color: #777;
+                }
+                .value{
+                    color: #666;
+                }
+            }
+        }
+        .cert{
+            white-space: nowrap;
+            margin-top: .3rem;
+            overflow-x: scroll;
+            li{
+                width: 5rem;
+                display: inline-block;
+                border: 1px solid #ddd;
+                margin-right: .3rem;
+                img{
+                    width: 100%;
+                }
+            }
+        }
+        .description{
+            font-size: .4rem;
+            color: #666;
+            text-indent: 2em;
+            line-height: 1.4;
+            padding-top: .35rem;
+            letter-spacing: 1px;
+            text-align: justify;
+        }
+    }
+}
+</style>

src/pages/temple-home/index.vue

@@ -0,0 +1,487 @@
+<template>
+  <div class="temple-home-page">
+    <div class="temple-home">
+        <span class="temple-name">重庆石林寺</span>
+        <div class="visitor">
+            <span>重庆市大渡口区</span>
+            <span>123232到访</span>
+        </div>
+    </div>
+    <div class="certed-temple">
+        <span class="text">佛教协会认证寺院 可放心访问</span>
+        <span class="btn">查看</span>
+    </div>
+    <van-search v-model="value" placeholder="寺院、主持、监寺" />
+    <div class="container">
+      <div class="swiper">
+        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+          <van-swipe-item>
+            <img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
+          </van-swipe-item>
+          <van-swipe-item>
+            <img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
+          </van-swipe-item>
+          <van-swipe-item>
+            <img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
+          </van-swipe-item>
+          <van-swipe-item>
+            <img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
+          </van-swipe-item>
+        </van-swipe>
+      </div>
+      <van-grid :border="false">
+        <van-grid-item icon="photo-o" text="佛前供灯" />
+        <van-grid-item icon="photo-o" text="日行一善" />
+        <van-grid-item icon="photo-o" text="祈福" />
+        <van-grid-item icon="photo-o" text="放生修福" />
+        <van-grid-item icon="photo-o" text="供养三宝" />
+        <van-grid-item icon="photo-o" text="供奉排位" />
+        <van-grid-item icon="photo-o" text="捐建寺院" />
+        <van-grid-item icon="photo-o" text="功德箱" />
+      </van-grid>
+      <van-notice-bar
+        border
+        left-icon="https://img2.baidu.com/it/u=2192265457,2884791613&fm=26&fmt=auto"
+        :scrollable="false"
+        mode="closeable"
+        text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
+      />
+    </div>
+    <div class="divider"></div>
+    <div class="user-dynamic">
+      <img class="avatar" src="https://img2.baidu.com/it/u=2192265457,2884791613&fm=26&fmt=auto" alt="">
+      <span class="username">信众信众信众信众</span>
+      <span class="content">永沐佛恩，慈悲加持，世代永沐佛恩，慈悲加持，世代...</span>
+      <span class="time">2小时前</span>
+    </div>
+    <div class="temple-manager">
+      <div class="manager">
+        <img class="avatar" src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
+        <div class="manager-container">
+          <h3 class="name">住持：素全大法师</h3>
+          <p class="content">
+            <span>素全法师，法名智国，属羊，出生于成都市。2006-7-28日入驻四川省什邡市的罗汉寺。1989年，出于对佛教文化的特别喜爱，于昭觉寺皈依清定上师，法名智国。1992～1996年，受隆莲法师影响和介绍到成都市的龙泉驿区的石经寺依贞意大和尚出家。1994年，于山西五台山碧山寺依本焕大和尚、一诚大和尚、香港圣一大和尚为三师，美国寿冶大和尚为学戒和尚受具足戒。1996～1999年，于山西五台山塔院寺学修。曾任传戒引礼、尊证等职先后参加了四川省佛教协会宝光寺、峨眉山、石经寺、广德寺的传授三坛大戒法会。</span>
+          </p>
+        </div>
+      </div>
+      <div class="manager">
+        <img class="avatar" src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
+        <div class="manager-container">
+          <h3 class="name">住持：素全大法师</h3>
+          <p class="content">
+            <span>素全法师，法名智国，属羊，出生于成都市。2006-7-28日入驻四川省什邡市的罗汉寺。1989年，出于对佛教文化的特别喜爱，于昭觉寺皈依清定上师，法名智国。1992～1996年，受隆莲法师影响和介绍到成都市的龙泉驿区的石经寺依贞意大和尚出家。1994年，于山西五台山碧山寺依本焕大和尚、一诚大和尚、香港圣一大和尚为三师，美国寿冶大和尚为学戒和尚受具足戒。1996～1999年，于山西五台山塔院寺学修。曾任传戒引礼、尊证等职先后参加了四川省佛教协会宝光寺、峨眉山、石经寺、广德寺的传授三坛大戒法会。</span>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="panel">
+      <div class="panel-head">
+        <span class="title">功德无量</span>
+        <span class="external">更多</span>
+      </div>
+      <div class="panel-body">
+        <div class="merit-group">
+          <div class="merit">
+            <img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt="">
+            <p class="title">为佛像贴金身，菩萨菩萨</p>
+          </div>
+          <div class="merit">
+            <img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt="">
+            <p class="title">为佛像贴金身，菩萨菩萨</p>
+          </div>
+          <div class="merit">
+            <img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt="">
+            <p class="title">为佛像贴金身，菩萨菩萨</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="divider"></div>
+    <div class="panel">
+      <div class="panel-head">
+        <span class="title">进展状态</span>
+        <span class="external">更多</span>
+      </div>
+      <div class="panel-body">
+        <buddha-process></buddha-process>
+        <buddha-process></buddha-process>
+        <buddha-process></buddha-process>
+        <div class="process-more">
+          <span>查看更多进展状态</span>
+          <i class="iconfont icon-arrow-right"></i>
+        </div>
+      </div>
+      <div class="divider"></div>
+      <div class="merit-rank-container">
+        <div class="head">
+          <span class="title">感恩功德</span>
+          <div class="list">
+            <span class="current">实时</span>
+            <span>月榜</span>
+            <span>总榜</span>
+          </div>
+        </div>
+        <div class="body">
+          <user-merit></user-merit>
+          <user-merit></user-merit>
+          <user-merit></user-merit>
+          <user-merit></user-merit>
+          <user-merit></user-merit>
+          <user-merit></user-merit>
+        </div>
+      </div>
+    </div>
+
+    <div class="panel-menu-btn" @click="showUserMenu = true">
+      <span><i class="iconfont icon-jingwen"></i></span>
+      <span class="menu-text">菜单</span>
+    </div>
+
+    <van-popup v-model="showUserMenu" position="left" style="width: 80%; height: 100%">
+      <div class="user-menu">
+        <div class="user">
+          <img class="avatar" src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
+          <div class="profile">
+            <h5 class="name">奔跑</h5>
+            <p class="account">用户号: 1452134</p>
+          </div>
+        </div>
+        <ul class="user-list">
+          <li>
+            <img src="@/assets/img/user-popup/我的善缘.png" alt="">
+            <span>我的善缘</span>
+          </li>
+          <li>
+            <img src="@/assets/img/user-popup/联系客服.png" alt="">
+            <span>联系客服</span>
+          </li>
+          <li>
+            <img src="@/assets/img/user-popup/功德箱.png" alt="">
+            <span>功德箱</span>
+          </li>
+          <li>
+            <img src="@/assets/img/user-popup/查看更多寺院.png" alt="">
+            <span>查看更多寺院</span>
+          </li>
+        </ul>
+      </div>
+      <p class="put-away" @click="showUserMenu = false">
+        <span class="iconfont icon-arrow-left"></span>
+      </p>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+export default {
+  data(){
+    return {
+      showUserMenu: true,
+      value: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scope>
+.van-nav-bar__title{
+  color: white;
+}
+.van-popup{
+  .put-away{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1.3rem;
+    line-height: 1.3rem;
+    border-top: 1px solid #f1f1f1;
+    text-align: right;
+    .iconfont{
+      font-size: .8rem;
+    }
+  }
+}
+.user-menu{
+  .user{
+    margin-top: 1.33rem;
+    display: flex;
+    padding-left: 1rem;
+    align-items: center;
+    .avatar{
+      width: 1.33rem;
+      height: 1.33rem;
+      border-radius: 1.33rem;
+      margin-right: .4rem;
+    }
+    .profile{
+      .name{
+        font-size: .4rem;
+        color: #666;
+      }
+      .account{
+        margin-top: .2rem;
+        color: #666;
+        font-size: .3rem;
+      }
+    }
+  }
+  .user-list{
+    padding-left: 1rem;
+    margin-top: 1rem;
+    margin-right: .6rem;
+    li{
+      height: 1.2rem;
+      line-height: 1.2rem;
+      font-size: .4rem;
+      display: flex;
+      align-items: center;
+      img{
+        width: .8rem;
+        margin-right: .27rem;
+      }
+      & ~ li{
+        border-top: 1px solid #ddd;
+      }
+    }
+  }
+}
+.panel-menu-btn{
+  position: fixed;
+  left: .53rem;
+  bottom: 1.33rem;
+  z-index: 1000;
+  width: 1.33rem;
+  height: 1.33rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background: #f1f1f1;
+  border: 1px solid #ddd;
+  border-radius: 50%;
+  .menu-text{
+    font-size: .27rem;
+    margin-top: .1rem;
+  }
+}
+.user-dynamic{
+  display: flex;
+  border: 1px solid #d6d6d6;
+  border-radius: .08rem;
+  background: white;
+  padding:  .2rem .2rem;
+  margin: .3rem .4rem;
+  align-items: center;
+  .avatar{
+    width: 1.07rem;
+    height: 1.07rem;
+    border-radius: 1.07rem;
+  }
+  .username{
+    padding: 0 .2rem;
+    white-space: nowrap;
+    max-width: 1.33rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: .37rem;
+  }
+  .content{
+    flex: 1;
+    font-size: .32rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-right: .4rem;
+  }
+  .time{
+    font-size: .3rem;
+    color: rgb(105, 105, 105);
+  }
+}
+.temple-manager{
+  .manager{
+    display: flex;
+    margin: .4rem;
+    & ~ .manager{
+      border-top: 1px solid #ddd;
+      padding-top: .4rem;
+    }
+    .avatar{
+      width: 1.33rem;
+      height: 1.33rem;
+      border-radius: 1.33rem;
+    }
+    .manager-container{
+      flex: 1;
+      margin-left: .4rem;
+      .name{
+        padding: .3rem .3rem .3rem 0;
+        font-size: .4rem;
+      }
+      .content{
+        font-size: .37rem;
+        line-height: 1.3;
+        display: -webkit-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-all;
+        -webkit-line-clamp: 3;
+        text-align: justify;
+        height: 3.8em;
+        -webkit-box-orient: vertical;
+        color: #666;
+      }
+    }
+  }
+  
+}
+.merit-rank-container{
+  .head{
+    padding: .53rem .4rem;
+    padding-bottom: .13rem;
+    display: flex;
+    justify-content: space-between;
+    .title{
+      font-size: .43rem;
+      color: #222222;
+    }
+    .list{
+      display: flex;
+      span{
+        font-size: .37rem;
+        color: #999999;
+        display: inline-block;
+        margin-left: .4rem;
+        border-bottom: .03rem solid transparent;
+        padding-bottom: .13rem;
+      }
+      span.current{
+        color: #222;
+        border-bottom-color: rgb(168, 28, 28);
+      }
+    }
+  }
+}
+.certed-temple{
+    display: flex;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin: 0 .4rem;
+    font-size: .37rem;
+    padding: .4rem;
+    margin-bottom: .2rem;
+    .text{
+        flex: 1;
+        font-size: .35rem;
+        color: #666;
+    }
+    .btn{
+        color: $primary-color;
+    }
+}
+.process-more{
+  line-height: 1.17rem;
+  text-align: center;
+  font-size: .37rem;
+  .iconfont{
+    vertical-align: middle;
+  }
+}
+.container{
+  padding: .4rem;
+  padding-bottom: .53rem;
+  .my-swipe .van-swipe-item {
+    color: #fff;
+    font-size: 20px;
+    height: 3.57rem;
+    text-align: center;
+    img{
+      width: 100%;
+      height: 100%;
+      border-radius: .16rem;
+    }
+  }
+  .swiper{
+    margin-bottom: .4rem;
+  }
+  .van-notice-bar{
+    border: 1px solid #E6B759;
+    border-radius: .16rem;
+  }
+}
+
+.panel{
+  .panel-head{
+    padding: .53rem .4rem;
+    display: flex;
+    justify-content: space-between;
+    .title{
+      font-size: .43rem;
+      color: #222222;
+    }
+    .external{
+      font-size: .37rem;
+      color: #666666;
+    }
+  }
+  .panel-body{
+    padding: 0 .4rem;
+    overflow-x: scroll;
+    .merit-group{
+      display: flex;
+      width: 11.36rem;
+      margin-bottom: .91rem;
+    }
+  }
+}
+.merit{
+  width: 3.39rem;
+  height: 3.39rem;
+  display: inline-block;
+  position: relative;
+  border-radius: .16rem;
+  vertical-align: top;
+  overflow: hidden;
+  & ~ .merit{
+    margin-left: .4rem;
+  }
+  img{
+    width: 100%;
+    height: 100%;
+  }
+  .title{
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: .91rem;
+    background: rgba(0,0,0,0.7);
+    color: white;
+    line-height: .91rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: .37rem;
+    padding: 0 .11rem;
+  }
+}
+.temple-home-page{
+    .temple-home{
+        display: flex;
+        font-size: .37rem;
+        justify-content: space-between;
+        align-items: center;
+        padding: .4rem .3rem;
+        .temple-name{
+            font-size: .45rem;
+        }
+        .visitor{
+            color: #666;
+            span{
+                padding-left: 10px;
+            }
+        }
+    }
+}
+</style>

src/pages/temple-list/index.vue

@@ -0,0 +1,124 @@
+<template>
+    <div>
+        <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-search v-model="keyword" show-action action-text="搜索" placeholder="请输入寺院、方丈、监院名称" />
+            <div class="operation-bar">
+                <div class="position">
+                    <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>
+        </div>
+        <div class="temple-list-container" :style="{height: containerHeight + 'px'}" >
+            <!-- <div class="temple-container content" v-if="mode === 'list'">
+                <temple v-for="i in 10" :key="i"></temple>
+            </div> -->
+            <scroll-view 
+                v-if="mode === 'list'" 
+                class="temple-container content" 
+                :height="containerHeight - 20" 
+                pulldown 
+                pullup
+                @pulldown="refresh"
+                @pullup="loadMore"
+            >
+                <temple v-for="i in 10" :key="i"></temple>
+            </scroll-view>
+            <div class="temple-map" id="container" v-show="mode === 'map'">
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import TMAPLoader from '@/common/tmap';
+
+export default {
+    data(){
+        return {
+            containerHeight: 0,
+            keyword: '',
+            mode: 'list'
+        }
+    },
+    inject: ['root', 'tabbar'],
+    mounted(){
+        this.$nextTick(() => {
+            const { offsetHeight } = this.root.$refs.tabbar.$el;
+            this.containerHeight = window.innerHeight - this.$refs.topbar.offsetHeight - offsetHeight - 20;
+        })
+        TMAPLoader.load({
+            key: process.env.VUE_APP_TMAP_KEY
+        }).then(TMap => {
+            console.log(TMap)
+            var center = new TMap.LatLng(39.984104, 116.307503);
+            //初始化地图
+            var map = new TMap.Map("container", {
+                zoom:12,//设置地图缩放级别
+                center: center//设置地图中心点坐标
+            });
+            console.log(map)
+        })
+        
+    },
+    methods: {
+        onModeSwitch(mode){
+            this.mode = mode;
+        },
+        loadMore(){
+            console.log('加载更多')
+        },
+        refresh(){
+            console.log('refresh')
+        },
+    }
+}
+</script>
+
+<style lang="scss">
+.operation-bar{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 .4rem;
+    color: #333;
+    margin-bottom: .4rem;
+    margin-top: .3rem;
+    .position{
+        line-height: .37rem;
+        color: green;
+        span{
+            font-size: .37rem;
+            display: inline-block;
+            margin-right: .13rem;
+        }
+    }
+    .show-mode{
+        line-height: .37rem;
+        span{
+            font-size: .37rem;
+            display: inline-block;
+            margin-left: .13rem;
+        }
+    }
+}
+.temple-list-container{
+    background: #f5f5f5;
+    overflow: hidden;
+    padding: .3rem;
+    .temple-map{
+        height: 100%;
+        background: #f5f5f5;
+    }
+}
+</style>

src/pages/user/approve/index.vue

@@ -0,0 +1,191 @@
+<template>
+    <div class="mega-approve">
+        <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}" />
+        </div>
+        <template v-if="authing">
+            <div class="reviewing">
+                <i class="iconfont icon-shizhong"></i>
+                <p class="review-text">审核中</p>
+                <van-button type="warning" @click="authing = false">返回修改</van-button>
+            </div>
+        </template>
+        <template v-if="!authing">
+            <van-notice-bar
+                text="真实法师社区，法师身份认证审核通过后才能使用"
+            />
+            <van-form @submit="onSubmit">
+                <van-field
+                    v-model="form.nickname"
+                    label="法号"
+                    placeholder="请输入法号全称"
+                    :rules="[{ required: true }]"
+                />
+                <van-field label="称谓" v-model="form.rank_text" :rules="[{ required: true }]" readonly placeholder="请选择称谓" @click="showTitle = true">
+                    <template #right-icon>
+                        <span class="iconfont icon-arrow-down-filling"></span>
+                    </template>
+                </van-field>
+                <van-field label="所在地区" v-model="form.city_name"  :rules="[{ required: true }]" readonly placeholder="请选择省-市-区名称" @click="showProvince = true">
+                    <template #right-icon>
+                        <span class="iconfont icon-arrow-down-filling"></span>
+                    </template>
+                </van-field>
+                <van-field
+                    v-model="form.place_temple"
+                    type="text"
+                    label="驻赐寺院"
+                    placeholder="名称含所在城市； 如：深圳弘法寺"
+                    :rules="[{ required: true }]"
+                />
+                <van-field
+                    label="真人头像"
+                    placeholder="真人头像"
+                >
+                    <template #input>
+                        <div>
+                            <p class="input-small-tip">照片需清晰美观，用于信众展示</p>
+                            <van-uploader v-model="uploader" />
+                        </div>
+                    </template>
+                </van-field>
+                <van-field
+                    v-model="form.cert_url"
+                    type="text"
+                    label="戒牒照片"
+                    readonly
+                    placeholder="戒牒照片"
+                >
+                    <template #input>
+                        <div>
+                            <p class="input-small-tip">仅用于认证，不公开</p>
+                            <van-uploader v-model="uploader" />
+                        </div>
+                    </template>
+                </van-field>
+                <van-field
+                    v-model="form.description"
+                    type="textarea"
+                    label="自我介绍"
+                    placeholder="向他人展示自己的文字说明"
+                    :rules="[{ required: true }]"
+                />
+                <div style="margin: 16px;">
+                    <van-button round block type="temple" native-type="submit">提交</van-button>
+                </div>
+            </van-form>
+        </template>
+
+        <!-- 选择称谓 -->
+        <van-action-sheet v-model="showTitle" :actions="actions" @select="onSelect" cancel-text="取消" close-on-click-action/>
+
+        <!-- 选择城市 -->
+        <van-popup v-model="showProvince" round position="bottom">
+            <van-cascader
+                v-model="cascaderValue"
+                title="请选择所在地区"
+                :options="cityOptions"
+                @close="showProvince = false"
+                @finish="onFinishProvince"
+            />
+        </van-popup>
+    </div>
+</template>
+
+<script>
+import { getMonkAppellation, getRegion, certifyMonk } from '@/api';
+
+export default {
+    data(){
+       return {
+           showProvince: false, // 显示城市选择
+           showTitle: false, // 显示法师称谓
+           form: {
+               nickname: '', // 法号
+               rank_id: '', // 称谓
+               rank_text: '', // 称谓
+               region: '',
+               place_temple: '', // 驻赐寺院
+               avatar_url: 'http://test.url',
+               cert_url: 'http://test.url',
+               description: ''
+           },
+           cascaderValue: [3,40, 431],
+           cityOptions: [],
+           uploader: [],
+           actions: [],
+           authing: false, // 是否正在认证
+       }
+    },
+    mounted(){
+        this.getParams();
+    },
+    methods: {
+        async onSubmit(e){
+            console.log(e);
+            const [province_id, city_id, county_id] = this.form.city_id;
+            const params = {
+                ...this.form,
+                province_id,
+                city_id,
+                county_id
+            }
+            await certifyMonk(params)
+            this.authing = true;
+        },
+        
+        getParams(){
+            getMonkAppellation().then(res => {
+                this.actions = res;
+            })
+            getRegion().then(city => {
+                this.cityOptions = city
+            })
+        },
+        onSelect(action){
+            console.log(action)
+            this.form.rank_id = action.id;
+            this.form.rank_text = action.name;
+        },
+        onFinishProvince({selectedOptions}){
+            this.showProvince = false;
+            this.form.city_name = selectedOptions.map(v => v.text).join(' / ')
+            this.form.city_id = selectedOptions.map(v => v.value)
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.mega-approve{
+    .input-small-tip{
+        font-size: .32rem;
+        color: #aaa;
+    }
+    .van-uploader__upload{
+        width: 3.13rem;
+        height: 3.13rem;
+    }
+    .van-button--temple{
+        background: $primary-color;
+        border: 1px solid $primary-color;
+        color: white;
+    }
+    .reviewing{
+        text-align: center;
+        padding-top: 1.33rem;
+        .iconfont{
+            font-size: 2.33rem;
+            color: $primary-color;
+        }
+        .review-text{
+            padding: .4rem 0;
+            font-size: .4rem;
+        }
+        .van-button{
+            width: 60%;
+            margin-top: 1.33rem;
+        }
+    }
+}
+</style>

src/pages/user/certificate/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="user-certificate">
+      <div class="certificate" v-for="i in 10" :key="i">
+          <img class="img" src="" alt="">
+          <div class="info">
+              <h3 class="title">为佛像贴金身，每日功德</h3>
+              <span class="date">2021-10-3</span>
+              <p class="number">第<span>12</span>份功德</p>
+              <div class="download">
+                  <span class="iconfont icon-24px"></span>
+                  <p>下载功德证书</p>
+              </div>
+          </div>
+      </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+.user-certificate{
+    min-height: 100vh;
+    background: #f5f5f5 url('https://img1.baidu.com/it/u=3658625472,1613220951&fm=26&fmt=auto') center top no-repeat;
+    background-size: contain;
+    padding-top: 4.67rem;
+    .certificate{
+        display: flex;
+        font-size: .37rem;
+        background: white;
+        margin: .4rem;
+        border-radius: .13rem;
+        padding: .4rem;
+        img{
+            width: 2rem;
+            height: 2rem;
+        }
+        .info{
+            flex: 1;
+            margin-left: .4rem;
+            position: relative;
+            .title{
+                font-size: .4rem;
+            }
+            .date{
+                margin-top: .8rem;
+                display: block;
+                font-size: .35rem;
+                color: #aaa;
+            }
+            .number{
+                margin-top: .15rem;
+                font-size: .35rem;
+                color: #444;
+                span{
+                    color: red;
+                    font-weight: bold;
+                    padding: 0 .13rem;
+                }
+            }
+            .download{
+                position: absolute;
+                right: 0;
+                bottom: 0;
+                color: #666;
+                text-align: center;
+                font-size: .29rem;
+                .iconfont{
+                    font-size: .8rem;
+                    padding-bottom: .1rem;
+                    display: inline-block;
+                }
+            }
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,273 @@
+<template>
+    <div class="course-detail">
+        <div class="topbar" ref="topbar">
+            <van-nav-bar left-arrow :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
+        </div>
+       <div class="course-container">
+            <div class="practice">
+                <h1 class="title">阿弥陀佛圣号</h1>
+                <div class="accumulation">
+                    <p>
+                        <span>今日计数 / 今日目标（遍）：</span>
+                        <span>
+                            <b>23</b>
+                            <i>/</i>
+                            <b>108</b>
+                            <i class="iconfont icon-bianjisekuai"></i>
+                        </span>
+                    </p>
+                    <div class="progress">
+                        <div class="progress-bar">
+                            <div class="progress-inline"></div>
+                        </div>
+                        <span class="">50%</span>
+                    </div>
+                </div>
+                <div class="accumulation">
+                    <p>
+                        <span>总计数 / 总目标（遍）：</span>
+                        <span>
+                            <b>23</b>
+                            <i>/</i>
+                            <b>108</b>
+                            <i class="iconfont icon-bianjisekuai"></i>
+                        </span>
+                    </p>
+                    <div class="progress">
+                        <div class="progress-bar">
+                            <div class="progress-inline"></div>
+                        </div>
+                        <span class="">50%</span>
+                    </div>
+                </div>
+            </div>
+       </div>
+        <div class="buddhist-scriptures">
+            <div class="scriptures">
+                <h3 class="title">功德利益</h3>
+                <p class="content">
+                    <span>功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益</span>
+                </p>
+                <span class="expand">
+                    <i class="iconfont icon-arrow-down"></i>
+                </span>
+            </div>
+            <div class="scriptures">
+                <h3 class="title">经文内容</h3>
+                <p class="content">
+                    <span>功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益功德利益</span>
+                </p>
+                <span class="expand">
+                    <i class="iconfont icon-arrow-down"></i>
+                </span>
+            </div>
+        </div>
+        <a href="#">
+            <img src="" alt="">
+        </a>
+       <div class="merit-rank-container">
+			<div class="head">
+				<span class="title">排行榜</span>
+				<div class="list">
+					<span class="current">实时</span>
+					<span>月榜</span>
+					<span>总榜</span>
+				</div>
+			</div>
+			<div class="body">
+				<div class="user-merit-course" v-for="i in 10" :key="i">
+                    <img
+                        src="https://img0.baidu.com/it/u=199023397,1701150760&fm=26&fmt=auto"
+                        alt=""
+                    />
+                    <div class="profile">
+                        <div>
+                            <div class="name">
+                                <span>李晓华</span>
+                                <span>湖南长沙</span>
+                            </div>
+                            <p>3</p>
+                        </div>
+                    </div>
+                    <div class="result">
+                        <p class="money">23 遍</p>
+                    </div>
+                </div>
+			</div>
+		</div>
+        <div class="button-buff">
+            <button class="button">恭请法师加持</button>
+        </div>
+    </div>
+</template>
+
+<script>
+
+
+export default {
+    
+}
+</script>
+
+<style lang="scss">
+.course-detail{
+    .course-container{
+        padding: .4rem;
+        background: #f5f5f5;
+        border-bottom: 1px solid #ddd;
+        .practice{
+            .title{
+                font-size: .4rem;
+                margin-bottom: 1.33rem;
+            }
+            .accumulation{
+                font-size: .35rem;
+                margin-bottom: .8rem;
+                p{
+                    .iconfont{
+                        margin-left: .4rem;
+                        display: inline-block;
+                    }
+                }
+                .progress{
+                    display: flex;
+                    margin-top: .4rem;
+                    align-items: center;
+                    .progress-bar{
+                        flex: 1;
+                        border-radius: 8px;
+                        margin-right: .27rem;
+                        height: .13rem;
+                        background: #ddd;
+                        position: relative;
+                        .progress-inline{
+                            position: absolute;
+                            left: 0;
+                            top: 0;
+                            height: .13rem;
+                            width: 50%;
+                            background: #188fff;
+                            border-radius: 8px;
+                        }
+                    }
+                }
+            }
+            
+        }
+    }
+    .buddhist-scriptures{
+        padding: .4rem;
+        .scriptures{
+            margin-bottom: .4rem;
+            .title{
+                font-size: .4rem;
+            }
+            .content{
+                padding: .2rem 0;
+                line-height: 1.2;
+                font-size: .4rem;
+            }
+            .expand{
+                text-align: center;
+                display: block;
+                height: 1.07rem;
+                line-height: 1.07rem;
+            }
+        }
+    }
+
+    .merit-rank-container{
+        .head{
+            padding: .53rem .4rem;
+            padding-bottom: .13rem;
+            display: flex;
+            justify-content: space-between;
+            .title{
+            font-size: .43rem;
+            color: #222222;
+            }
+            .list{
+            display: flex;
+            span{
+                font-size: .37rem;
+                color: #999999;
+                display: inline-block;
+                margin-left: .4rem;
+                border-bottom: .03rem solid transparent;
+                padding-bottom: .13rem;
+            }
+            span.current{
+                color: #222;
+                border-bottom-color: rgb(168, 28, 28);
+            }
+            }
+        }
+        .body{
+            .user-merit-course{
+                display: flex;
+                padding: .27rem 0.4rem;
+                border-bottom: 1px solid #ddd;
+                img {
+                    width: 1.17rem;
+                    height: 1.17rem;
+                    border-radius: 1.17rem;
+                    margin-right: 0.4rem;
+                }
+                .profile {
+                    flex: 1;
+                    padding-top: .13rem;
+                    .name {
+                        display: flex;
+                        align-items: flex-end;
+                        margin-bottom: .27rem;
+                        span:first-child {
+                            font-size: 0.4rem;
+                            color: #222;
+                            vertical-align: top;
+                            display: inline-block;
+                            margin-right: .4rem;
+                        }
+                        span:last-child {
+                            font-size: 0.32rem;
+                            color: #666;
+                            vertical-align: text-bottom;
+                            display: inline-block;
+                        }
+                    }
+                    p {
+                        font-size: 0.32rem;
+                    }
+                }
+                .result {
+                    font-size: 0.32rem;
+                    display: flex;
+                    justify-content: space-between;
+                    flex-direction: column;
+                    padding: .13rem 0;
+                    text-align: right;
+                    .money {
+                        font-size: 0.37rem;
+                    }
+                    .date {
+                        font-size: 0.32rem;
+                        color: #666;
+                    }
+                }
+            }
+        }
+    }
+    .button-buff{
+        text-align: center;
+        padding: .4rem;
+        .button{
+            background: $primary-color;
+            border: 1px solid $primary-color;
+            font-size: .4rem;
+            color: white;
+            border-radius: .13rem;
+            padding: .27rem .4rem;
+        }
+    }
+    
+}
+</style>

src/pages/user/course/index.vue

@@ -0,0 +1,141 @@
+<template>
+    <div class="course">
+        <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}" />
+        </div>
+       <div class="course-container">
+           <div class="my-course border-bottom">
+               <h3 class="title">我的功课</h3>
+               <p class="progress">已修行<span>0</span>天 功课总计<span>0</span>遍</p>
+           </div>
+            <div class="course-wrapper">
+                <div class="course-item" v-for="i in 10" :key="i">
+                    <img src="https://img1.baidu.com/it/u=3055253142,1855499744&fm=26&fmt=auto" alt="">
+                    <div class="course-info">
+                        <h3 class="title">阿弥陀佛圣号</h3>
+                        <p class="summary">
+                            <span>
+                                <i class="iconfont icon-shuben-"></i>
+                                <b>总58遍</b>
+                            </span>
+                            <span>
+                                <i class="iconfont icon-shuben-"></i>
+                                <b>今日58遍</b>
+                            </span>
+                        </p>
+                        <div class="progress-group">
+                            <label for="">今日进度 <span>60%</span></label>
+                            <div class="progress-bar">
+                                <div class="progress"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+       </div>
+    </div>
+</template>
+
+<script>
+
+
+export default {
+    
+}
+</script>
+
+<style lang="scss">
+.course{
+    .course-container{
+        .my-course{
+            padding: .4rem;
+            margin-bottom: .4rem;
+            .title{
+                font-size: .4rem;
+            }
+            .progress{
+                font-size: .35rem;
+                color: #999;
+                padding-top: .2rem;
+                span{
+                    color: $primary-color;
+                    padding: 0 .13rem;
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+    .course-wrapper{
+        padding: 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;
+            }
+            img{
+                width: 2.67rem;
+                height: 2.67rem;
+                vertical-align: top;
+                border-radius: .08rem;
+            }
+            .course-info{
+                flex: 1;
+                margin-left: .53rem;
+                .title{
+                    font-size: .4rem;
+                    padding-top: .13rem;
+                }
+                .summary{
+                    font-size: .30rem;
+                    padding: .1rem 0;
+                    span{
+                        vertical-align: middle;
+                        display: inline-block;
+                        margin-right: .67rem;
+                        color: #666;
+                        i{
+                            vertical-align: text-bottom;
+                        }
+                        b{
+                            vertical-align: middle;
+                            padding-left: .11rem;
+                            line-height: 1.3;
+                        }
+                    }
+                }
+                .progress-group{
+                    font-size: .35rem;
+                    padding-top: .8rem;
+                    label{
+                        font-size: .35rem;
+                        color: #333;
+                        span{
+                            color: red;
+                        }
+                    }
+                    .progress-bar{
+                        background: #f5f5f5;
+                        margin-top: .2rem;
+                        height: .11rem;
+                        position: relative;
+                        border-radius: 4px;
+                        overflow: hidden;
+                        .progress{
+                            position: absolute;
+                            left: 0;
+                            top: 0;
+                            height: .11rem;
+                            width: 50%;
+                            background: $primary-color;
+                            border-radius: 4px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/pages/user/customer/index.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="customer-page">
+        <div class="title">
+            <img class="icon" src="@/assets/img/heshang.jpg" alt="">
+            <div class="info">
+                <h1>阿弥陀佛，我是客服小僧</h1>
+                <p>使用寺院联盟遇到任何疑问都可以联系我</p>
+            </div>
+        </div>
+        <div class="customer-type-group">
+            <img src="https://img1.baidu.com/it/u=2403234292,1073721747&fm=26&fmt=auto" alt="">
+            <div class="info">
+                <h1>在线客服</h1>
+                <p>服务时间：周一至周五 10：00-18：00</p>
+                <p>如不在服务时间，留言后我们会及时与您联系</p>
+            </div>
+        </div>
+        <div class="customer-type-group">
+            <img src="https://img1.baidu.com/it/u=2403234292,1073721747&fm=26&fmt=auto" alt="">
+            <div class="info">
+                <h1>电话客服</h1>
+                <p>服务时间：周一至周五 10：00-18：00</p>
+            </div>
+        </div>
+        <div class="customer-type-group">
+            <img src="https://img1.baidu.com/it/u=2403234292,1073721747&fm=26&fmt=auto" alt="">
+            <div class="info">
+                <h1>客服微信号</h1>
+                <p>点击即可复制微信号，在微信中添加好友，我们会及时与您联系</p>
+            </div>
+        </div>
+        <img class="qrcode" src="https://login.weixin.qq.com/qrcode/4eUoxEzS0A==" alt="">
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.customer-page{
+    min-height: 100vh;
+    background: #f5f5f5 url('~@/assets/img/customer_background.jpg') center top no-repeat;
+    background-size: contain;
+    .title{
+        display: flex;
+        font-size: .4rem;
+        height: 4rem;
+        align-items: center;
+        padding: 0 .53rem;
+        .icon{
+            width: 1.33rem;
+            height: 1.33rem;
+            margin-right: .4rem;
+        }
+        .info{
+            color: white;
+            h1{
+                font-size: .4rem;
+                margin-bottom: .27rem;
+            }
+            p{
+                font-size: .37rem;
+            }
+        }
+    }
+    .customer-type-group{
+        display: flex;
+        background: white;
+        margin-left: .4rem;
+        margin-right: .4rem;
+        margin-bottom: .4rem;
+        height: 2.67rem;
+        border-radius: .27rem;
+        padding:.2rem .4rem ;
+        align-items: center;
+        img{
+            width: 1.07rem;
+            height: 1.07rem;
+            border-radius: 50%;
+            margin-right: .13rem;
+        }
+        .info{
+            flex: 1;
+            font-size: .37rem;
+            h1{
+                font-size: .4rem;
+                margin-bottom: .4rem;
+            }
+            p{
+                color: #aaa;
+                font-size: .35rem;
+                line-height: 1.3;
+            }
+        }
+    }
+    .qrcode{
+        width: 4rem;
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+</style>

src/pages/user/focus/index.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="focus">
+        <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}" />
+        </div>
+        <div class="focus-list-container">
+            <buddha-process></buddha-process>
+            <buddha-process></buddha-process>
+            <buddha-process></buddha-process>
+            <buddha-process></buddha-process>
+        </div>
+    </div>
+</template>
+
+<script>
+import TMAPLoader from '@/common/tmap';
+
+export default {
+    data(){
+        return {
+            containerHeight: 0,
+            keyword: '',
+            activeName: ''
+        }
+    },
+    inject: ['root', 'tabbar'],
+    mounted(){
+        this.$nextTick(() => {
+            const { offsetHeight } = this.root.$refs.tabbar.$el;
+            this.containerHeight = window.innerHeight - this.$refs.topbar.offsetHeight - offsetHeight - 20;
+        })
+        TMAPLoader.load({
+            key: process.env.VUE_APP_TMAP_KEY
+        }).then(TMap => {
+            console.log(TMap)
+            var center = new TMap.LatLng(39.984104, 116.307503);
+            //初始化地图
+            var map = new TMap.Map("container", {
+                zoom:12,//设置地图缩放级别
+                center: center//设置地图中心点坐标
+            });
+            console.log(map)
+        })
+    }
+}
+</script>
+
+<style lang="scss">
+.focus{
+    .focus-list-container{
+        margin-top: .4rem;
+    }
+}
+</style>

src/pages/user/index.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="user-home" v-show="data">
+      <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="light">
+          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx4.sinaimg.cn%2Forj360%2F97cc0d35ly1fwmdvbemq4j20zk0k0taz.jpg&refer=http%3A%2F%2Fwx4.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638084364&t=1e0d9bd2dcb2906674f8b5142889db7a" alt="">
+      </div>
+      <div class="divider"></div>
+      <div class="user-profile">
+          <img class="avatar" :src="data.avatar" alt="">
+          <span class="name">{{data.nickname}}</span>
+          <div class="total">
+              <p>累计行善<span>{{data.total_friendly}}</span>天</p>
+              <p>累计功德<span>{{data.total_merit}}</span>元</p>
+          </div>
+      </div>
+      <div class="group">
+          <div class="item customer" @click="$router.push({ name: 'user-customer'})">
+              <h3>客服中心</h3>
+              <span>答疑问</span>
+              <i class="iconfont icon-kefu"></i>
+          </div>
+          <div class="item certificate" @click="$router.push({ name: 'user-certificate' })">
+              <h3>功德证书</h3>
+              <span>积功德</span>
+              <i class="iconfont icon-zhengshu"></i>
+          </div>
+      </div>
+      <div class="my-group">
+          <p class="label">我的善缘</p>
+          <div class="order-type">
+              <div class="tab-order" @click="$router.push('/user/order?current=1')">
+                  <span class="iconfont icon-qianbao"></span>
+                  <p>待支付</p>
+              </div>
+              <div class="tab-order" @click="$router.push('/user/order?current=2')">
+                  <span class="iconfont icon-dingdanchulizhong"></span>
+                  <p>处理中</p>
+              </div>
+              <div class="tab-order" @click="$router.push('/user/order?current=3')">
+                  <span class="iconfont icon-yichuli"></span>
+                  <p>已处理</p>
+              </div>
+              <div class="tab-order" @click="$router.push('/user/order?current=4')">
+                  <span class="iconfont icon-quanbudingdan"></span>
+                  <p>全部订单</p>
+              </div>
+          </div>
+      </div>
+      <div class="divider"></div>
+        <van-cell-group>
+            <van-cell title="我的关注" is-link to="/user/focus" />
+            <van-cell title="我的功课" is-link to="/user/course" />
+        </van-cell-group>
+        <div class="divider"></div>
+         <van-cell-group>
+            <van-cell title="认证法师 领取信众供奉" is-link :value="getMonkStatus(data.master_certify)" to="/user/approve"/>
+            <van-cell title="寺院入驻" is-link  :value="getTempleStatus(data.temple_settled)" to="/user/temple-station"/>
+        </van-cell-group>
+  </div>
+</template>
+
+<script>
+import { getUserData } from '@/api';
+
+export default {
+    data(){
+        return {
+            data: null,
+        }
+    },
+    mounted(){
+        getUserData().then(data => {
+            console.log(data)
+            this.data = data;
+        })
+    },
+    methods: {
+        getTempleStatus(k){
+            const m = { 
+                0: '未入驻',
+                1: '审核中',
+                2: '已入驻'
+            }
+            return m[k]
+        },
+        getMonkStatus(k){
+            const m = { 
+                0: '未认证',
+                1: '认证中',
+                2: '已认证'
+            }
+            return m[k]
+        },
+    }
+}
+</script>
+
+<style lang="scss">
+.user-home{
+    .light{
+        margin: .4rem;
+        img{
+            width: 100%;
+            border-radius: .13rem;
+        }
+        display: block;
+    }
+    .user-profile{
+        display: flex;
+        align-items: center;
+        padding: .4rem;
+        .avatar{
+            width: 1.33rem;
+            height: 1.33rem;
+            border-radius: 1.33rem;
+            vertical-align: top;
+            
+        }
+        .name{
+            padding: 0 .3rem;
+            display: inline-block;
+            font-size: .37rem;
+        }
+        .total{
+            text-align: right;
+            flex: 1;
+            p{
+                margin-bottom: .2rem;
+                font-size: .37rem;
+                color: #333;
+            }
+            span{
+                color: red;
+                font-weight: bold;
+                padding: 0 .2rem;
+                display: inline-block;
+            }
+        }
+    }
+    .group{
+        display: flex;
+        justify-content: space-between;
+        padding: 0 .4rem;
+        margin-top: .27rem;
+        .item{
+            width: 3.7rem;
+            color: white;
+            padding: .27rem;
+            font-size: .37rem;
+            border-radius: .13rem;
+            position: relative;
+            h3{
+                margin-bottom: .4rem;
+            }
+            span{
+                opacity: 0.4;
+                font-size: .53rem;
+            }
+            .iconfont{
+                font-size: 1.33rem;
+                opacity: 0.6;
+                position: absolute;
+                right: .4rem;
+                top: .27rem;
+            }
+        }
+        .customer{
+            background: rgb(243, 120, 63);
+        }
+        .certificate{
+            background: rgb(224, 114, 114)
+        }
+    }
+    .my-group{
+        padding: .4rem;
+        margin-top: .4rem;
+        .label{
+            font-size: .37rem;
+        }
+        .order-type{
+            display: flex;
+            justify-content: space-between;
+            margin-top: .4rem;
+            .tab-order{
+                text-align: center;
+                font-size: .37rem;
+                color: #555;
+                .iconfont{
+                    font-size: .67rem;
+                    color: #555;
+                }
+                p{
+                    margin-top: .13rem;
+                    font-size: .35rem;
+                    color: #666;
+                }
+            }
+        }
+    }
+}
+</style>

src/pages/user/order/index.vue

@@ -0,0 +1,103 @@
+<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}" />
+        </div>
+        <div class="temple-list-container" :style="{height: containerHeight + 'px'}">
+            <van-tabs v-model="activeName">
+                <van-tab title="全部" name="a">
+                    <div class="order-container">
+                        <order></order>
+                        <order></order>
+                        <order></order>
+                        <order></order>
+                        <order></order>
+                        <order></order>
+                        <order></order>
+                        <order></order>
+                        <order></order>
+                    </div>
+                </van-tab>
+                <van-tab title="待支付" name="b">待支付</van-tab>
+                <van-tab title="处理中" name="c">处理中</van-tab>
+                <van-tab title="已处理" name="c">已处理</van-tab>
+            </van-tabs>
+        </div>
+    </div>
+</template>
+
+<script>
+import TMAPLoader from '@/common/tmap';
+
+export default {
+    data(){
+        return {
+            containerHeight: 0,
+            keyword: '',
+            activeName: ''
+        }
+    },
+    inject: ['root', 'tabbar'],
+    mounted(){
+        this.$nextTick(() => {
+            const { offsetHeight } = this.root.$refs.tabbar.$el;
+            this.containerHeight = window.innerHeight - this.$refs.topbar.offsetHeight - offsetHeight - 20;
+        })
+        TMAPLoader.load({
+            key: process.env.VUE_APP_TMAP_KEY
+        }).then(TMap => {
+            console.log(TMap)
+            var center = new TMap.LatLng(39.984104, 116.307503);
+            //初始化地图
+            var map = new TMap.Map("container", {
+                zoom:12,//设置地图缩放级别
+                center: center//设置地图中心点坐标
+            });
+            console.log(map)
+        })
+    }
+}
+</script>
+
+<style lang="scss">
+.operation-bar{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 .4rem;
+    color: #333;
+    margin-bottom: .4rem;
+    .position{
+        line-height: .37rem;
+        color: green;
+        span{
+            font-size: .37rem;
+            display: inline-block;
+            margin-right: .13rem;
+        }
+    }
+    .show-mode{
+        line-height: .37rem;
+        span{
+            font-size: .37rem;
+            display: inline-block;
+            margin-left: .13rem;
+        }
+    }
+}
+.temple-list-container{
+    background: #f5f5f5;
+    .temple-container{
+        padding: .4rem;
+    }
+    .temple-map{
+        height: 100%;
+        background: #f5f5f5;
+    }
+    
+}
+.order-container{
+    background: #f5f5f5;
+    padding: .4rem;
+}
+</style>

src/pages/user/root.vue

@@ -0,0 +1,13 @@
+<template>
+  <router-view />
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/pages/user/temple-station/index.vue

@@ -0,0 +1,277 @@
+<template>
+    <div class="settle-in">
+        <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}" />
+        </div>
+        <div class="steps">
+            <div class="step" :class="[step == 1 && 'active']" >
+                <span class="circle">1</span>
+                <span class="text">资料准备</span>
+            </div>
+            <div class="step" :class="[step == 2 && 'active']">
+                <span class="circle">2</span>
+                <span class="text">填写信息</span>
+            </div>
+            <div class="step" :class="[step == 3 && 'active']">
+                <span class="circle">3</span>
+                <span class="text">提交资料</span>
+            </div>
+        </div>
+        <div class="infor" v-if="step === 1">
+            <p class="title">请准备好如下材料的扫描件或彩色照片，要求清晰可辨认：</p>
+            <div class="cert-group">
+                <p class="cert">《宗教场地登记证》</p>
+                <div class="uploader">
+                    <van-uploader :max-size="500 * 1024" @oversize="onOversize" :after-read="onBeforeUpload"></van-uploader>
+                </div>
+            </div>
+            <p class="attention">寺院联盟认证将谨慎、严格的验证真实性，能够更好地保护寺院及用户的合法权益。</p>
+            <p class="attention">认证资料仅在寺院联盟后台进行备注和核实信息使用，通过认证后将展示在认证页面。</p>
+            <div class="agreement">
+                <van-checkbox v-model="checked">同意寺院联盟服务协议</van-checkbox>
+            </div>
+            <van-button type="warning" block @click="onNextStep">下一步</van-button>
+        </div>
+        <div class="form" v-if="step === 2">
+            <van-form>
+                <div class="group">
+                    <label class="label-temple" for="#">寺院信息设置</label>
+                    <van-field label="单位名称" v-model="form.unit_name"  name="单位名称" placeholder="单位名称" />
+                    <van-field label="机构代码" v-model="form.institution_code"  name="机构代码" placeholder="机构代码" />
+                    <van-field label="省份城市" v-model="form.city_name"  name="省份城市" is-link readonly placeholder="省份城市" @click="showProvince = true" />
+                    <van-field label="详细地址" v-model="form.detail_address"  name="详细地址" placeholder="请输入详细地址" >
+                        <template #right-icon>
+                            <van-button type="info" size="small">自动获取</van-button>
+                        </template>
+                    </van-field>
+                    <van-field label="寺院法人" v-model="form.represent"  name="寺院法人" placeholder="请输入真实姓名" />
+                    <van-field label="手机号码" v-model="form.mobile"  name="手机号码" placeholder="请输入法人手机号码" />
+                    <van-field label="寺院来源" v-model="form.source"  name="寺院来源" placeholder="请输入来源" />
+                </div>
+                <div class="group">
+                    <label class="label-temple" for="#">后台登录设置</label>
+                    <div class="legal-person">
+                        <span class="label">您是寺院法人？</span>
+                        <van-checkbox v-model="checked" shape="aquare"></van-checkbox>
+                    </div>
+                    <van-field v-if="!checked" label="注册人" placeholder="请输入真实姓名"></van-field>
+                    <van-field label="手机号码" placeholder="请输入手机号码">
+                        <template #right-icon>
+                            <van-button type="info" size="small">自动获取</van-button>
+                        </template>
+                    </van-field>
+                    <van-field label="登录密码" v-model="form.password" placeholder="请输入至少6位数字、字母和符号组合"></van-field>
+                    <van-field label="确认密码" v-model="form.password_confirm" placeholder="请确认密码"></van-field>
+                </div>
+            </van-form>
+            <div class="button-group">
+                <van-button type="info" block class="confirm" @click="onSubmit">提交</van-button>
+            </div>
+        </div>
+
+        <van-popup v-model="showProvince" round position="bottom">
+            <van-cascader
+                v-model="cascaderValue"
+                title="请选择所在地区"
+                :options="cityOptions"
+                @close="showProvince = false"
+                @finish="onFinishProvince"
+                @change="onChangeProvince"
+            />
+        </van-popup>
+    </div>
+</template>
+
+<script>
+import { getMonkAppellation, getRegion, postTemple, uploadFile } from '@/api'
+export default {
+    data(){
+        return {
+            active: 0,
+            checked: false,
+            showProvince: false,
+            register_cert_url: '',
+            cityOptions: [],
+            cascaderValue: [3,40, 431],
+            form: {
+                unit_name: '', // 单位名称
+                institution_code: '', // 机构代码
+                province_id: '', // 省份ID
+                city_name: '', // 省份ID
+                detail_address: '', // 详细地址
+                lng: '', // 经度
+                lat: '', // 纬度
+                represent: '', // 寺院法人
+                mobile: '', // 手机号
+                source: '', // 寺院来源
+                extra_url: '', // 寺院简介附件
+                is_representd: '', // 是否为寺院法人
+                register_name: '', // 法人姓名
+                login_mobile: '', // 登录手机号
+                password: '', // 登录密码
+                password_confirm: '', // 确认密码
+            }
+        }
+    },
+    computed: {
+        step: {
+            get(){
+                return Number(this.$route.query.step);
+            }
+        }
+    },
+    mounted(){
+        this.getParams();
+    },
+    methods: {
+        onBeforeUpload({ file }){
+            console.log(file)
+            const formData = new FormData();
+            formData.append('photo', file)
+            uploadFile(formData)
+        },
+        onOversize(){
+            this.$toast('文件大小不能超过500kb')
+        },
+        onNextStep(){
+            this.$router.push({ query: { step: this.step + 1 }})
+        },
+        getParams(){
+            getMonkAppellation().then(res => {
+                console.log(res)
+            })
+            getRegion().then(city => {
+                this.cityOptions = city
+            })
+        },
+        onChangeProvince(){
+
+        },
+        async onSubmit(){
+            const res = await postTemple(this.form);
+            console.log(res)
+        },
+        onFinishProvince({selectedOptions}){
+            this.showProvince = false;
+            this.form.city_name = selectedOptions.map(v => v.text).join(' / ')
+            this.form.city_id = selectedOptions.map(v => v.value)
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.steps{
+    background: #f5f5f5;
+    padding: .27rem .4rem;
+    font-size: .37rem;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #ddd;
+    .circle{
+        width: .8rem;
+        height: .8rem;
+        display: inline-block;
+        text-align: center;
+        vertical-align: middle;
+        line-height: .9rem;
+        background: #ddd;
+        color: white;
+        border-radius: .53rem;
+        margin-right: .27rem;
+    }
+    .text{
+        font-size: .37rem;
+        color: #666;
+    }
+    .active{
+        .circle{
+            background: rgb(187, 95, 95);
+            color: white;
+        }
+        span{
+            color: rgb(187, 95, 95);;
+        }
+    }
+}
+.settle-in{
+    .infor{
+        padding: .53rem .7rem;
+        .title{
+            font-size: .37rem;
+            line-height: 1.2;
+            margin-bottom: 1rem;
+        }
+        
+        .cert-group{
+            .cert{
+                font-size: .37rem;
+                color: #666;
+            }
+            .uploader{
+                text-align: center;
+                padding: .4rem 0;
+                margin-top: .4rem;
+            }
+            .van-uploader__upload{
+                width: 4.33rem;
+                height: 3.33rem;
+            }
+        }
+        .attention{
+            font-size: .35rem;
+            color: #999;
+            margin-top: .3rem;
+            line-height: 1.4;
+            text-align: justify;
+            &::before{
+                content: '*';
+                color: red;
+                margin-right: .1rem;
+            }
+        }
+        .agreement{
+            text-align: center;
+            font-size: .37rem;
+            padding: 1rem 0;
+            display: flex;
+            justify-content: center;
+        }
+        
+    }
+    .form{
+        padding: .4rem 0;
+        .group{
+            margin-bottom: .6rem;
+            .label-temple{
+                font-size: .4rem;
+                padding-left: .4rem;
+                &::before{
+                    content: '';
+                    width: 4px;
+                    height: .37rem;
+                    background: #bb5f5f;
+                    display: inline-block;
+                    margin-right: 5px;
+                    vertical-align: middle;
+                    margin-top: -4px;
+                }
+            }
+            .legal-person{
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: .5rem .4rem .3rem;
+                .label{
+                    font-size: .37rem;
+                }
+            }
+        }
+    }
+    .button-group{
+        padding: 0 .4rem;
+        padding-top: 0rem;
+    }
+    
+}
+</style>

src/router/index.js

@@ -8,6 +8,155 @@ const routes = [
         path: '/',
         name: 'home',
         component: () => import('../pages/home.vue') 
+    },
+    {
+        path: '/search',
+        name: 'search',
+        meta: { title: '搜索' },
+        component: () => import('@/pages/search')
+    },
+    {
+        path: '/temple',
+        name: 'temple',
+        meta: { title: '寺院', navBarBackgroundColor: 'white', showNavBar: false },
+        component: { render: h => h('router-view') },
+        children: [
+            {
+                path: '',
+                name: 'temple-home',
+                meta: { title: '寺院', navBarBackgroundColor: 'white', showNavBar: false },
+                component: () => import('@/pages/temple-home')
+            },
+            {
+                path: 'list',
+                name: 'temple-list',
+                meta: { title: '寺院列表', navBarBackgroundColor: 'white',showNavBar: false },
+                component: () => import('@/pages/temple-list')
+            },
+            {
+                path: 'detail',
+                name: 'temple-detail',
+                meta: { title: '寺院详情', navBarBackgroundColor: 'white',showNavBar: false },
+                component: () => import('@/pages/temple-detail')
+            }
+        ]
+    },
+    {
+        path: '/buddha-activity',
+        name: 'buddha-activity',
+        meta: { title: '进展活动', navBarBackgroundColor: 'white' },
+        component: () => import('@/pages/buddha-activity')
+    },
+    {
+        path: '/merit-list',
+        name: 'merit-list',
+        meta: { title: '功德无量', navBarBackgroundColor: 'white' },
+        component: () => import('@/pages/merit-list')
+    },
+    {
+        path: '/merit-box',
+        name: 'merit-box',
+        meta: { title: '功德无量', navBarBackgroundColor: 'white', showNavBar: false},
+        component: () => import('@/pages/merit-box')
+    },
+  
+    {
+        path: '/monk',
+        name: 'monk',
+        meta: { title: '详情', navBarBackgroundColor: 'white' },
+        component: () => import('@/pages/monk')
+    },
+    {
+        path: '/pay',
+        name: 'pay',
+        meta: { title: '支付', navBarBackgroundColor: 'white' },
+        component: () => import('@/pages/pay')
+    },
+    {
+        path: '/join-cert',
+        name: 'join-cert',
+        meta: { title: '参与成功', navBarBackgroundColor: 'white' },
+        component: () => import('@/pages/join-cert')
+    },
+    {
+        path: '/goods-detail',
+        name: 'goods-detail',
+        meta: { title: '详情', navBarBackgroundColor: 'white' },
+        component: () => import('@/pages/goods-detail')
+    },
+    {
+        path: '/everyday-donation',
+        name: 'everyday-donation',
+        meta: { title: '日行一善', navBarBackgroundColor: 'white', showNavBar: false },
+        component: () => import('@/pages/everyday-donation')
+    },
+    {
+        path: '/user',
+        name: 'user',
+        component: () => import('@/pages/user/root'),
+        children: [
+            {
+                path: '',
+                name: 'user-home',
+                meta: { title: '个人中心', showNavBar: false },
+                component: () => import('@/pages/user/index')
+            },
+            {
+                path: 'customer',
+                name: 'user-customer',
+                meta: { title: '客服中心' },
+                component: () => import('@/pages/user/customer')
+            },
+            {
+                path: 'temple-station',
+                name: 'user-temple-station',
+                meta: { title: '寺院入驻', showNavBar: false },
+                component: () => import('@/pages/user/temple-station')
+            },
+            {
+                path: 'certificate',
+                name: 'user-certificate',
+                meta: { title: '客服中心' },
+                component: () => import('@/pages/user/certificate')
+            },
+            {
+                path: 'order',
+                name: 'user-order',
+                meta: { title: '我的善缘' },
+                component: () => import('@/pages/user/order')
+            },
+            {
+                path: 'focus',
+                name: 'user-focus',
+                meta: { title: '我的关注' },
+                component: () => import('@/pages/user/focus')
+            },
+            {
+                path: 'approve',
+                name: 'user-approve',
+                meta: { title: '认证法师' },
+                component: () => import('@/pages/user/approve')
+            },
+            {
+                path: 'course',
+                name: 'user-course',
+                meta: { title: '修行' },
+                component: { render: h => h('router-view')},
+                children: [
+                    { 
+                        path: '',
+                        name: 'user-course-list',
+                        meta: { title: '修行' },
+                        component: () => import('@/pages/user/course'),
+                    },
+                    { 
+                        path: 'detail',
+                        name: 'user-course-detail',
+                        meta: { title: '我的功课' },
+                        component: () => import('@/pages/user/course/detail'),
+                    },                ]
+            },
+        ]
     }
 ]
 const router = new Router({
@@ -15,4 +164,32 @@ const router = new Router({
     routes
 })
 
-export default router;
+export default router;
+
+export const tabbar = [
+    {
+        path: '/',
+        name: 'home',
+        title: '首页'
+    },
+    {
+        path: '/user/course',
+        name: 'user-course',
+        title: '修行'
+    },
+    {
+        path: '/merit-box',
+        name: 'merit-box',
+        title: '每日功德'
+    },
+    {
+        path: '/temple/list',
+        name: 'temple-list',
+        title: '参寺'
+    },
+    {
+        path: '/user',
+        name: 'user',
+        title: '我的'
+    },
+]

vue.config.js

@@ -1,17 +1,30 @@
 
 module.exports = {
+    publicPath: '/wap/',
+    outputDir: 'wap',
     devServer: {
-        disableHostCheck: true,
+        // https:true,
+        disableHostCheck: false,
         proxy: {
             '/api': {
-                target: process.env.VUE_APP_HOST
+                target: process.env.VUE_APP_HOST,
+                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();
+        })
+    },
     css: {
         loaderOptions: {
             scss: {
                 data: null,
+                
             },
             postcss: {
                 plugins: [

wap/css/app.52f2182d.css

@@ -0,0 +1 @@
+a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

wap/css/chunk-70dca92d.9d10e032.css

@@ -0,0 +1 @@
+.van-nav-bar__title{color:#fff}.container{padding:.4rem}.container .my-swipe .van-swipe-item{color:#fff;font-size:20px;height:3.57rem;text-align:center}.container .my-swipe .van-swipe-item img{width:100%;height:100%;border-radius:.16rem}

wap/index.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/wap/favicon.ico"><title>temple-union</title><link href="/wap/css/chunk-70dca92d.9d10e032.css" rel="prefetch"><link href="/wap/js/chunk-70dca92d.df499dad.js" rel="prefetch"><link href="/wap/css/app.52f2182d.css" rel="preload" as="style"><link href="/wap/css/chunk-vendors.21b6897d.css" rel="preload" as="style"><link href="/wap/js/app.056ddee4.js" rel="preload" as="script"><link href="/wap/js/chunk-vendors.b282726d.js" rel="preload" as="script"><link href="/wap/css/chunk-vendors.21b6897d.css" rel="stylesheet"><link href="/wap/css/app.52f2182d.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but temple-union doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/wap/js/chunk-vendors.b282726d.js"></script><script src="/wap/js/app.056ddee4.js"></script></body></html>

wap/js/chunk-70dca92d.df499dad.js

@@ -0,0 +1,2 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-70dca92d"],{"334d":function(t,a,i){},c6e3:function(t,a,i){"use strict";i("334d")},eea6:function(t,a,i){"use strict";i.r(a);var e=function(){var t=this,a=t.$createElement,i=t._self._c||a;return i("div",[i("van-nav-bar",{staticStyle:{background:"#BF9330",color:"white"},attrs:{title:"自在福田"}}),i("van-search",{attrs:{placeholder:"寺院、主持、监寺"},model:{value:t.value,callback:function(a){t.value=a},expression:"value"}}),i("div",{staticClass:"container"},[i("van-swipe",{staticClass:"my-swipe",attrs:{autoplay:3e3,"indicator-color":"white"}},[i("van-swipe-item",[i("img",{attrs:{src:"https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420",alt:""}})]),i("van-swipe-item",[i("img",{attrs:{src:"https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420",alt:""}})]),i("van-swipe-item",[i("img",{attrs:{src:"https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420",alt:""}})]),i("van-swipe-item",[i("img",{attrs:{src:"https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420",alt:""}})])],1),i("van-grid",[i("van-grid-item",{attrs:{icon:"photo-o",text:"文字"}}),i("van-grid-item",{attrs:{icon:"photo-o",text:"文字"}}),i("van-grid-item",{attrs:{icon:"photo-o",text:"文字"}}),i("van-grid-item",{attrs:{icon:"photo-o",text:"文字"}})],1)],1)],1)},o=[],s={},n=s,c=(i("c6e3"),i("2877")),r=Object(c["a"])(n,e,o,!1,null,null,null);a["default"]=r.exports}}]);
+//# sourceMappingURL=chunk-70dca92d.df499dad.js.map

yarn.lock

@@ -903,6 +903,109 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
+"@better-scroll/core@^2.4.2":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@better-scroll/core/-/core-2.4.2.tgz#e69470012d79923a18034c3e4931720fbb06eae5"
+  integrity sha512-IqVZLnh04YpaEAy9wJDxtFK/stxVQjB9A9Wcr3Uwkj7Av1TtFpin+t/TObl53diNDG5ZJ+vck/OAthphpuugLA==
+  dependencies:
+    "@better-scroll/shared-utils" "^2.4.2"
+
+"@better-scroll/indicators@^2.4.2":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@better-scroll/indicators/-/indicators-2.4.2.tgz#9c72647a764e540f3ff356937c54d82c771c78aa"
+  integrity sha512-dScI0HIt06L1thLO+1W7w1enqRtegWF1izKYhswiyTXLgagLh2QbAi+oexNiPSOGBuNz8w1mO7hZvVJez/ZFkw==
+  dependencies:
+    "@better-scroll/core" "^2.4.2"
+
+"@better-scroll/infinity@^2.4.2":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@better-scroll/infinity/-/infinity-2.4.2.tgz#82c3e61555feaf1d3882cfa35eeb1cce09f91e1b"
+  integrity sha512-KGpCWLTyMzcGBT59c3N/JaVauLmi0jG2YZApdnqON+Oz4AJiHnzGkzWc4EJxcxR3Vy+m5Jp91y6xrpsvRmOdIg==
+  dependencies:
+    "@better-scroll/core" "^2.4.2"
+
+"@better-scroll/mouse-wheel@^2.4.2":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@better-scroll/mouse-wheel/-/mouse-wheel-2.4.2.tgz#dea70a60dc2a3795ef6ad569d2dea5b4c7e9af4c"
+  integrity sha512-dLc8vlYkSYN9AQEo4NDPQloPhscCV17TY98JUBcio4I2STDlYYIQqofqm1GQPfByfK9f057DnrcgZ/bPVx7PTA==
+  dependencies:
+    "@better-scroll/core" "^2.4.2"
+
+"@better-scroll/movable@^2.4.2":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@better-scroll/movable/-/movable-2.4.2.tgz#f385e65d23cea2031fddc52dd4eb4f52bd5fc4e7"
+  integrity sha512-y4FbKx9FTUfAfM6wW+PCKA3CONc4nfjaE4N1ImGsIorzkSWV2eGO+LTD6FVv5+gVINI/o9Xj/gHmEJUaupUeSg==
+  dependencies:
+    "@better-scroll/core" "^2.4.2"
+
+"@better-scroll/nested-scroll@^2.4.2":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@better-scroll/nested-scroll/-/nested-scroll-2.4.2.tgz#44680f4b02176461250e6be6d95f2ac6169a1c98"
+  integrity sha512-JnC2sqtDqVkj9F5J39u52b6qDsMqXbnURG67dHf97tYoYP2dluwjkvhhxjSFrghREoQzT/KWcDbkfcGy47lQwQ==
+  dependencies:
+    "@better-scroll/core" "^2.4.2"
+
+"@better-scroll/observe-dom@^2.4.2":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@better-scroll/observe-dom/-/observe-dom-2.4.2.tgz#cc1e6d82a8f53525c282c9a4bcea5d1be8c21c95"
+  integrity sha512-eeS77CZs+V72dkya10e5ptndBAbhQVcXoYGvfoIihOJgCPqO5MdYTpzRmlbshYCEE5juUMLe82Kx8FSbOejpAw==
+  dependencies:
+    "@better-scroll/core" "^2.4.2"
+
+"@better-scroll/observe-image@^2.4.2":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@better-scroll/observe-image/-/observe-image-2.4.2.tgz#b6e55d231d0bb2571dbb18778da92cfbdde2dd54"
+  integrity sha512-ToYVf5vn0cio5B9uaL5NyvFX3JNU6L0Po20Lw7uxa0+FE+kMvSAMJN+9POg6G+cfIqI8GVHhyyR+4Ev8v2Nl5Q==
+  dependencies:
+    "@better-scroll/core" "^2.4.2"
+
+"@better-scroll/pull-down@^2.4.2":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@better-scroll/pull-down/-/pull-down-2.4.2.tgz#6b98b28bd73e9b694b0857a9c73879e70339cb96"
+  integrity sha512-bqMLk33o4oesTXIIOteBKHQgfVKjIVvity39TM/MfzkbY1WDBxD+HFS7ySgoqw7Kl2Wiv/U76Wfqzmm6yDdg7Q==
+  dependencies:
+    "@better-scroll/core" "^2.4.2"
+
+"@better-scroll/pull-up@^2.4.2":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@better-scroll/pull-up/-/pull-up-2.4.2.tgz#25357ceef7bac7520930f0631896b63a10f82a6f"
+  integrity sha512-07Cke3oa96lN9/inxJZ0ixh0nBbbqxOi2IKcBGtD6dP+susiMcdhgd/c7zNRjXkwlw0vzTNfXTgExIOEWzLHYg==
+  dependencies:
+    "@better-scroll/core" "^2.4.2"
+
+"@better-scroll/scroll-bar@^2.4.2":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@better-scroll/scroll-bar/-/scroll-bar-2.4.2.tgz#257856a1da27d65eb899ac26f01060afbf800bdb"
+  integrity sha512-zZd0+sWfzTCXJeuA001o5bea7AvLYz7BCE7dolxFbPTIPnV5V5UEH8LLdXQ/HIwgxI0Pj9PoY9njSuhooh6lfg==
+  dependencies:
+    "@better-scroll/core" "^2.4.2"
+
+"@better-scroll/shared-utils@^2.4.2":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@better-scroll/shared-utils/-/shared-utils-2.4.2.tgz#1ac5c97495727093a22a8009560795dd5e3c18da"
+  integrity sha512-Gy/Jfbpu+hq0u+PcjkTqyXGqAf+0dexTzEZ5IDXEVwJVLmd3cx8A73oTcAZ8QZgk4wSHvlMjXecSaptkhnNPEw==
+
+"@better-scroll/slide@^2.4.2":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@better-scroll/slide/-/slide-2.4.2.tgz#024528ae57516a2ee99bea346381589e4e6a039c"
+  integrity sha512-VfdFHm/meo4nEyfx0JLn8rUHfQdQCnoBHs/BsV+vmjVivKg+cVgfS+QaytrIulWKqNAWNlfXbAaNtZMv8gNKZg==
+  dependencies:
+    "@better-scroll/core" "^2.4.2"
+
+"@better-scroll/wheel@^2.4.2":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@better-scroll/wheel/-/wheel-2.4.2.tgz#0dd74b03599e01a82d55d29f6dcad7a8a503bd75"
+  integrity sha512-oJw68glWbrYBbRK8RJnKo3Fw9bU7Cd4zDbBHbKZ062/YJAJUZW9wF/3Lout4PnolkjuJIp2TZiEgJNtuRd+Njg==
+  dependencies:
+    "@better-scroll/core" "^2.4.2"
+
+"@better-scroll/zoom@^2.4.2":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@better-scroll/zoom/-/zoom-2.4.2.tgz#c26c2df3312ed75b31f0203c5f2e6181abc06c5e"
+  integrity sha512-rN/BTE3lf2sNNvKowGL/tUKZ/BgdZcZa0pjE/rVW0tBL/7x68cBowWQD5HF2Z2Bge8OPXRjkwN/xN1aFYhEtWA==
+  dependencies:
+    "@better-scroll/core" "^2.4.2"
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.nlark.com/@hapi/address/download/@hapi/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -952,13 +1055,6 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
-"@nbfe/postcss-px2rem@^0.1.2":
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/@nbfe/postcss-px2rem/-/postcss-px2rem-0.1.2.tgz#24e56927b6a78b5eaa4220c43a62960f3ef9c680"
-  integrity sha512-PMaLkM/sJZGGtsiOLp6zg3it2hkhAJxFvBshIKlcqMnidADsopj6HRPPx4prHcl7D3rwZjJcAeY6yzUP/lXtFg==
-  dependencies:
-    css "^3.0.0"
-
 "@nodelib/fs.stat@^1.1.2":
   version "1.1.3"
   resolved "https://registry.nlark.com/@nodelib/fs.stat/download/@nodelib/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
@@ -1827,6 +1923,11 @@ async@^2.6.2:
   dependencies:
     lodash "^4.17.14"
 
+async@^3.2.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.2.tgz#2eb7671034bb2194d45d30e31e24ec7e7f9670cd"
+  integrity sha512-H0E+qZaDEfx/FY4t7iLRv1W2fFI6+pyCeTw1uN20AQPiwqwM6ojPxHxdLv4z8hi2DtnW9BOckSspLucW7pIE5g==
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.nlark.com/asynckit/download/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -1963,6 +2064,26 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
+better-scroll@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/better-scroll/-/better-scroll-2.4.2.tgz#7496b14310eed969da4db5ff1fa33ea032d4ef18"
+  integrity sha512-I/JzJNUay2vMAkczBa/4x52QBdUGA3Bs/QtrKrxVjSbBHUMG6yR14srQr4aCAWlIra1FBmuddwGRfI6zRagI9Q==
+  dependencies:
+    "@better-scroll/core" "^2.4.2"
+    "@better-scroll/indicators" "^2.4.2"
+    "@better-scroll/infinity" "^2.4.2"
+    "@better-scroll/mouse-wheel" "^2.4.2"
+    "@better-scroll/movable" "^2.4.2"
+    "@better-scroll/nested-scroll" "^2.4.2"
+    "@better-scroll/observe-dom" "^2.4.2"
+    "@better-scroll/observe-image" "^2.4.2"
+    "@better-scroll/pull-down" "^2.4.2"
+    "@better-scroll/pull-up" "^2.4.2"
+    "@better-scroll/scroll-bar" "^2.4.2"
+    "@better-scroll/slide" "^2.4.2"
+    "@better-scroll/wheel" "^2.4.2"
+    "@better-scroll/zoom" "^2.4.2"
+
 bfj@^6.1.1:
   version "6.1.2"
   resolved "https://registry.nlark.com/bfj/download/bfj-6.1.2.tgz#325c861a822bcb358a41c78a33b8e6e2086dde7f"
@@ -2919,15 +3040,6 @@ css-what@^5.0.0:
   resolved "https://registry.npmmirror.com/css-what/download/css-what-5.1.0.tgz#3f7b707aadf633baf62c2ceb8579b545bb40f7fe"
   integrity sha1-P3tweq32M7r2LCzrhXm1RbtA9/4=
 
-css@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/css/-/css-3.0.0.tgz#4447a4d58fdd03367c516ca9f64ae365cee4aa5d"
-  integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==
-  dependencies:
-    inherits "^2.0.4"
-    source-map "^0.6.1"
-    source-map-resolve "^0.6.0"
-
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.nlark.com/cssesc/download/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -3242,6 +3354,13 @@ dom-serializer@^1.0.1:
     domhandler "^4.2.0"
     entities "^2.0.0"
 
+dom7@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/dom7/-/dom7-2.1.5.tgz#a79411017800b31d8400070cdaebbfc92c1f6377"
+  integrity sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==
+  dependencies:
+    ssr-window "^2.0.0"
+
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.nlark.com/domain-browser/download/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
@@ -4131,7 +4250,7 @@ glob-to-regexp@^0.3.0:
   resolved "https://registry.npm.taobao.org/glob-to-regexp/download/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
   integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
 
-glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
+glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
   version "7.2.0"
   resolved "https://registry.npmmirror.com/glob/download/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
   integrity sha1-0VU1r3cy4C6Uj0xBYovZECk/YCM=
@@ -6334,13 +6453,6 @@ postcss-discard-overridden@^4.0.1:
   dependencies:
     postcss "^7.0.0"
 
-postcss-font-weights@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-font-weights/-/postcss-font-weights-5.0.0.tgz#11b0f846f342a40488e5bb5e8ab19887097b1fc5"
-  integrity sha512-n/1sLibDcRcFS4HcGVzB81eUdxjG8p3XZFvM3Q+0Szz+e8f64dV3bJyUMs7Nw8ZV4qmO293SUVmOMmmhNMkzjw==
-  dependencies:
-    postcss "^7.0.5"
-
 postcss-load-config@^2.0.0:
   version "2.1.2"
   resolved "https://registry.nlark.com/postcss-load-config/download/postcss-load-config-2.1.2.tgz#c5ea504f2c4aef33c7359a34de3573772ad7502a"
@@ -6581,78 +6693,6 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-short-border-radius@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-short-border-radius/-/postcss-short-border-radius-3.0.0.tgz#44d5d4af9e74caf2e16229f145b2dc605509a9ac"
-  integrity sha512-s4g/NSUFA71+s4fJMUFo/IqcJL1ZdmWSz90GctW/f3msdhetgaU2OuORYQtUB2HGX5BdsvBFai8FBv/D3/lrVQ==
-  dependencies:
-    postcss "^7.0.5"
-
-postcss-short-border@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-short-border/-/postcss-short-border-4.0.0.tgz#c7ffa685d4e2b350fbb7c3571a1cc47302e9efd6"
-  integrity sha512-o9lZZ7yavQAs2Tj1BazltLBTDH4XdNtUuY15NhV6Nr1R+1sG4e9k2QZRhaOazPbntrw7pDHFqRwDYQND9DB8jw==
-  dependencies:
-    postcss "^7.0.5"
-
-postcss-short-color@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-short-color/-/postcss-short-color-4.0.0.tgz#e4ebcdda0c6d69ace1553ffb78b0628db9f5b513"
-  integrity sha512-2cIbOysfLRXweXDqVpt+csXNaAF46S150lN8SgItvKN3naWXfKSanYLefzF9xZ2eVl7qgkv7Fkd8NgNI0PZFHQ==
-  dependencies:
-    postcss "^7.0.5"
-
-postcss-short-font-size@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-short-font-size/-/postcss-short-font-size-5.0.0.tgz#064de7de2a6206ac0955fd809c370e1b5c2db12e"
-  integrity sha512-CaEzUc/YSOq2PDblqZuSxdecmCqN5HbxLLLu5h53GoKJpXPNxrk6R9cfBvB/cO1LQyXNFtzZuQwL/JglkuBy4A==
-  dependencies:
-    postcss "^7.0.5"
-
-postcss-short-overflow@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-short-overflow/-/postcss-short-overflow-1.0.0.tgz#02a8018ed5bf5d5c527077b58d04ef5745173b18"
-  integrity sha512-nYFZGCt4+/x3kyQjgX3unxx7942sU/7ZI3JE8jHdgJZ/c/sAOrwWyjrNdrdckJzUj1xrCYcrp+vcrj2wspsCJA==
-  dependencies:
-    postcss "^7.0.5"
-
-postcss-short-position@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-short-position/-/postcss-short-position-4.0.1.tgz#b5e628c081180bca43545142bacb54367f3b202a"
-  integrity sha512-/k2v8v+Wwrb+nIcXqOuD32y6Yss1lci1fq7FMzsJsu7nfWHf48mpgPR/afliGdZvrXRRB9IW2aJbwugoOCgDsw==
-  dependencies:
-    postcss "^7.0.5"
-
-postcss-short-size@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-short-size/-/postcss-short-size-4.0.0.tgz#66da8f2d816b2a7334abcc951f67fb12d394b219"
-  integrity sha512-/RRw2JFj+7xmX+GO5HIp9+sVNZTm+bXWKwHlxxXcxEJDPng/dNeWGXIdExbuknqgDeDX/lv5YfgjD2g5TUtUtA==
-  dependencies:
-    postcss "^7.0.5"
-
-postcss-short-spacing@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-short-spacing/-/postcss-short-spacing-4.0.0.tgz#0de9bf226915c66aca6f4262fb691de817e817f1"
-  integrity sha512-ThWP8vse9jtT26+l8fqfCriPVR7QGYUX7gEXYNPJ2+smD4XHpMJAmbhqa8aKuYsCMhvzeC9ZxCsR/B+nXA7iEw==
-  dependencies:
-    postcss "^7.0.5"
-
-postcss-short@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-short/-/postcss-short-5.0.0.tgz#1e6ebaa829dc4c1644a21b66d2f9746fafab6206"
-  integrity sha512-7VvAeY8Bm01cK+honNsQIisaJsUdhdNTPlYuo7iQq80Fbjl844pVNBXhjXjVeXi/+dKK5aRtCNKod7U0hSeTug==
-  dependencies:
-    postcss "^7.0.5"
-    postcss-font-weights "^5.0.0"
-    postcss-short-border "^4.0.0"
-    postcss-short-border-radius "^3.0.0"
-    postcss-short-color "^4.0.0"
-    postcss-short-font-size "^5.0.0"
-    postcss-short-overflow "^1.0.0"
-    postcss-short-position "^4.0.1"
-    postcss-short-size "^4.0.0"
-    postcss-short-spacing "^4.0.0"
-
 postcss-svgo@^4.0.3:
   version "4.0.3"
   resolved "https://registry.nlark.com/postcss-svgo/download/postcss-svgo-4.0.3.tgz#343a2cdbac9505d416243d496f724f38894c941e"
@@ -7204,6 +7244,16 @@ sass-loader@^7.1.0:
     pify "^4.0.1"
     semver "^6.3.0"
 
+sass-resources-loader@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/sass-resources-loader/-/sass-resources-loader-2.2.4.tgz#1a86fba499e74a88cb7ce95f0c98449f348d360e"
+  integrity sha512-hIQhBygYky+rLf+4cuoGYONZ623CEH4Swo1fs1WRJkukbqdvN1VIu2KCL59du6vX92bNELzNkGPLx+NorN73xA==
+  dependencies:
+    async "^3.2.0"
+    chalk "^4.1.0"
+    glob "^7.1.6"
+    loader-utils "^2.0.0"
+
 sass@^1.43.4:
   version "1.43.4"
   resolved "https://registry.yarnpkg.com/sass/-/sass-1.43.4.tgz#68c7d6a1b004bef49af0d9caf750e9b252105d1f"
@@ -7498,14 +7548,6 @@ source-map-resolve@^0.5.0:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-resolve@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz#3d9df87e236b53f16d01e58150fc7711138e5ed2"
-  integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==
-  dependencies:
-    atob "^2.1.2"
-    decode-uri-component "^0.2.0"
-
 source-map-support@~0.5.12:
   version "0.5.20"
   resolved "https://registry.nlark.com/source-map-support/download/source-map-support-0.5.20.tgz#12166089f8f5e5e8c56926b377633392dd2cb6c9"
@@ -7610,6 +7652,11 @@ sshpk@^1.7.0:
     safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
+ssr-window@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-2.0.0.tgz#98c301aef99523317f8d69618f0010791096efc4"
+  integrity sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A==
+
 ssri@^6.0.1:
   version "6.0.2"
   resolved "https://registry.nlark.com/ssri/download/ssri-6.0.2.tgz?cache=0&sync_timestamp=1621364735533&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-6.0.2.tgz#157939134f20464e7301ddba3e90ffa8f7728ac5"
@@ -7842,6 +7889,19 @@ svgo@^1.0.0:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+swiper@5:
+  version "5.4.5"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-5.4.5.tgz#a350f654bf68426dbb651793824925512d223c0f"
+  integrity sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==
+  dependencies:
+    dom7 "^2.1.5"
+    ssr-window "^2.0.0"
+
+swiper@^3.4.2:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-3.4.2.tgz#39d6b410b1a39833e1f72d3b72999df5f5e38392"
+  integrity sha1-Oda0ELGjmDPh9y07cpmd9fXjg5I=
+
 table@^5.2.3:
   version "5.4.6"
   resolved "https://registry.npmmirror.com/table/download/table-5.4.6.tgz?cache=0&sync_timestamp=1633019371192&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Ftable%2Fdownload%2Ftable-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
@@ -8323,6 +8383,13 @@ vm-browserify@^1.0.1:
   resolved "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha1-eGQcSIuObKkadfUR56OzKobl3aA=
 
+vue-awesome-swiper@2.6.7:
+  version "2.6.7"
+  resolved "https://registry.yarnpkg.com/vue-awesome-swiper/-/vue-awesome-swiper-2.6.7.tgz#23b12cf107503305c267df3c7c2903fb39896cd0"
+  integrity sha512-kUmCds5HTcV9Uz0eYnvajbxpVgAKQFrX0r+akk8XtuUouI5e2ImhO7aZ8iVhTLE4hwKwoyFP8jekAa0JlNqifA==
+  dependencies:
+    swiper "^3.4.2"
+
 vue-eslint-parser@^7.0.0:
   version "7.11.0"
   resolved "https://registry.npmmirror.com/vue-eslint-parser/download/vue-eslint-parser-7.11.0.tgz?cache=0&sync_timestamp=1634603045111&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.11.0.tgz#214b5dea961007fcffb2ee65b8912307628d0daf"