完成个人中心

.prettierrc.json

@@ -1,5 +1,5 @@
 {
     "tabWidth": 4,
-    "singleQuote": true,
+    "singleQuote": false,
     "printWidth": 200
 }

package.json

@@ -9,6 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "async-validator": "^4.0.7",
     "axios": "^0.24.0",
     "better-scroll": "^2.4.2",
     "core-js": "^3.6.5",

src/App.vue

@@ -41,7 +41,8 @@ export default {
         '$route': {
             handler(val) {
                 this.active = tabbar.map(v => v.name).indexOf(val.name).toString();
-            }
+            },
+            deep: true,
         }
     },
     computed: {

src/common/tmap.js

@@ -20,7 +20,6 @@ module.exports = {
             const script = document.createElement('script');
             script.src = `https://map.qq.com/api/gljs?v=${config.version}&key=${config.key}&${libraries}`;
             document.head.appendChild(script)
-            console.log(script)
             script.setAttribute('async', true)
             script.setAttribute('charset', 'utf-8')
             script.onload = () => {

src/common/wechat-web.js

@@ -91,5 +91,12 @@ function updateTimelineShareData(title = '', desc = '', link = '', imgUrl = '')
     });
 }
 
+function previewImage(current, urls){
+    console.log(current, urls)
+    wechatInstance.previewImage({
+        current, urls
+    })
+}
 
-export { signToWechat, getLocation, requestPayment, openLocation, updateAppMessageShareData, updateTimelineShareData };
+
+export { signToWechat, getLocation, requestPayment, openLocation, updateAppMessageShareData, updateTimelineShareData, previewImage };

src/config/index.js

@@ -0,0 +1,8 @@
+export default {
+    qrcode: {
+        wechatAccount: 'https://wdx-temple.oss-cn-hangzhou.aliyuncs.com/uploads/common/temple_wechat.jpg'
+    },
+    RegExp: {
+        mobile: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/
+    }
+}

src/main.js

@@ -8,10 +8,12 @@ import '@/assets/js/flexable.js';
 import './common/vant';
 import './components/index'
 import 'swiper/css/swiper.css'
+import config from './config';
 
 Vue.mixin(globalMixin)
 Vue.config.productionTip = false
 Vue.prototype.$delay = delay;
+Vue.prototype.$config = config;
 Vue.use(VueAwesomeSwiper)
 
 new Vue({

src/mixins/index.js

@@ -1,3 +1,5 @@
+import { Toast } from 'vant';
+
 export default {
     directives: {
         numberOnly: {
@@ -10,6 +12,21 @@ export default {
             unbind: function(el) {
                 el.removeEventListener('input', el.handler)
             }
+        },
+        copy: {
+            bind(el, binding, vnode){
+                console.log(el, binding, vnode)
+
+                el.addEventListener('click', () => {
+                    const input = document.createElement('textarea');
+                    input.value = binding.value;
+                    document.body.appendChild(input)
+                    input.select();
+                    document.execCommand('copy');
+                    document.body.removeChild(input)
+                    Toast.success('复制成功')
+                }, false)
+            },
         }
     },
     methods: {

src/pages/buddha-activity/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="buddha-activity">
         <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="process-container">
+        <div class="process-container">
             <scroll-view  :height="height - 50" ref="scrollView">
                 <buddha-process v-for="(p, i) in list" :key="i" :data="p" :show-goods-btn="!query.goods_id"></buddha-process>
                 <div v-if="total === list.length && list.length > 3" class="no-more">没有更多了</div>
@@ -32,13 +32,11 @@ export default {
     methods: {
         async getDynamicData(){
             const res = await getDynamicData(this.page, this.query.goods_id, this.size)
-            console.log(res)
             this.total = res.total;
             this.list = res.results;
             this.$nextTick(() => {
                 this.$refs.scrollView.refresh();
             })
-            console.log(res)
         }
     }
 }

src/pages/user/approve/index.vue

@@ -11,9 +11,7 @@
             </div>
         </template>
         <template v-if="!authing">
-            <van-notice-bar
+            <van-notice-bar ext="真实法师社区，法师身份认证审核通过后才能使用" />
-                text="真实法师社区，法师身份认证审核通过后才能使用"
-            />
             <van-form @submit="onSubmit">
                 <van-field
                     v-model="form.nickname"
@@ -34,7 +32,7 @@
                 <van-field
                     v-model="form.place_temple"
                     type="text"
-                    label="驻赐寺院"
+                    label="驻锡寺院"
                     placeholder="名称含所在城市； 如：深圳弘法寺"
                     :rules="[{ required: true }]"
                 />
@@ -81,7 +79,7 @@
         <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-popup v-model="showProvince" round position="bottom" safe-area-inset-bottom>
             <van-cascader
                 v-model="cascaderValue"
                 title="请选择所在地区"
@@ -111,7 +109,7 @@ export default {
                cert_url: [], // 戒牒照片
                description: ''
            },
-           cascaderValue: [3,40, 431],
+           cascaderValue: '',
            cityOptions: [],
            uploader: [],
            actions: [],

src/pages/user/certificate/index.vue

@@ -1,14 +1,16 @@
 <template>
   <div class="user-certificate" :style="style">
       <div class="certificate" v-for="(li, index) in list" :key="index">
-          <img class="img" :src="li.picture_url" alt="">
+          <div class="img-wrapper">
+              <img class="img" :src="li.picture_url" alt="" @click="onDownloadCert(li)">
+          </div>
           <div class="info">
-              <h3 class="title">{{li.goods_name}}</h3>
+              <h3 class="title">{{li.goods_name}}我都去无群我带我去带我去带我去强无敌我去去带我去带我去带我去请问我去请问带我去带我去</h3>
               <span class="date">{{li.date}}</span>
               <p class="number">第<span>{{li.count}}</span>份功德</p>
-              <div class="download">
+              <div class="download" @click="onDownloadCert(li)">
                   <span class="iconfont icon-24px"></span>
-                  <p>下载功德证书</p>
+                  <p>长按保存功德证书</p>
               </div>
           </div>
       </div>
@@ -18,6 +20,7 @@
 
 <script>
 import { getCertList } from '@/api';
+import { previewImage } from '@/common/wechat-web';
 
 export default {
     data(){
@@ -32,7 +35,11 @@ export default {
     computed: {
         style(){
             return {
-                background: `#f5f5f5 url(${this.bg}) center top no-repeat`
+                backgroundColor: '#f5f5f5',
+                backgroundImage: `url(${this.bg})`,
+                backgroundSize: 'contain',
+                backgroundPosition: 'top center',
+                backgroundRepeat: 'no-repeat'
             }
         }
     },
@@ -42,6 +49,9 @@ export default {
             console.log(res)
             this.list = res.results;
             this.bg = res.cert_bg;
+        },
+        onDownloadCert(cert){
+            previewImage(cert.picture_url, [cert.picture_url])
         }
     }
 }
@@ -50,8 +60,6 @@ export default {
 <style lang="scss">
 .user-certificate{
     // max-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;
     padding-bottom: .5rem;
     .certificate{
@@ -61,16 +69,28 @@ export default {
         margin: .4rem;
         border-radius: .13rem;
         padding: .4rem;
+        box-shadow: 0 0 .2rem rgba(0,0,0,0.05);
+        .img-wrapper{
+            width: 2.5rem;
+            height: 2.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #f9f9f9;
+        }
         img{
-            width: 2rem;
+            max-width: 100%;
-            height: 2rem;
+            max-height: 100%;
         }
         .info{
             flex: 1;
             margin-left: .4rem;
             position: relative;
             .title{
-                font-size: .4rem;
+                font-size: .35rem;
+                line-height: 1.3;
+                @extend .text-multiple-2;
+                height: 2.4em;
             }
             .date{
                 margin-top: .8rem;

src/pages/user/customer/index.vue

@@ -7,37 +7,15 @@
                 <p>使用寺院联盟遇到任何疑问都可以联系我</p>
             </div>
         </div>
-        <div class="customer-type-group" v-for="(cus, index) in list" :key="index">
+        <div class="customer-type-group" v-for="(cus, index) in list" :key="index" >
             <img :src="cus.icon_url" alt="">
             <div class="info">
-                <h1>{{cus.title}} <span v-if="cus.title == '客服微信号'" class="wechat-account">{{cus.value}}</span></h1>
+                <h1>{{cus.title}} <span v-if="cus.title == '客服微信号'" class="wechat-account" v-copy="cus.value">{{cus.value}}</span></h1>
-                <p v-html="cus.content"></p>
+                <p v-html="cus.content" ></p>
             </div>
             <a class="phone" :href="'tel:'+cus.value" v-if="cus.title === '电话客服'"></a>
+        </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="qrcode" alt="">
     </div>
 </template>
@@ -58,9 +36,8 @@ export default {
     methods: {
         async getCustomerList(){
             const res = await getCustomerList();
-            console.log(res)
             this.list = res.list;
-            this.qrcode = res.platform_code;
+            this.qrcode = this.$config.qrcode.wechatAccount || res.platform_code;
         }
     }
 }
@@ -71,6 +48,7 @@ export default {
     min-height: 100vh;
     background: #f5f5f5 url('~@/assets/img/customer_background.jpg') center top no-repeat;
     background-size: contain;
+    padding-bottom: env(safe-area-inset-bottom);
     .title{
         display: flex;
         font-size: .4rem;

src/pages/user/index.vue

@@ -2,7 +2,7 @@
   <div class="user-home" v-if="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="">
+          <img :src="data.banner" alt="">
       </div>
       <div class="divider"></div>
       <div class="user-profile">
@@ -116,6 +116,8 @@ export default {
         img{
             width: 100%;
             border-radius: .13rem;
+            vertical-align: top;
+            max-height: 4rem;
         }
         display: block;
     }

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

@@ -75,7 +75,7 @@
             </div>
         </div>
 
-        <van-popup v-model="showProvince" round position="bottom">
+        <van-popup v-model="showProvince" round position="bottom" safe-area-inset-bottom>
             <van-cascader
                 v-model="cascaderValue"
                 title="请选择所在地区"
@@ -92,6 +92,7 @@
 import { getRegion, postTemple } from '@/api'
 import { getLocation } from '@/common/wechat-web';
 import TMAPLoader from '@/common/tmap';
+import Schema from 'async-validator';
 
 export default {
     data(){
@@ -119,7 +120,6 @@ export default {
         return {
             query: this.$route.query,
             active: 0,
-            
             agreement: true, // 是否同意寺院联盟服务协议
             showProvince: false,
             cityOptions: [],
@@ -131,7 +131,7 @@ export default {
                 unit_name: '', // 单位名称
                 institution_code: '', // 机构代码
                 province_id: '', // 省份ID
-                city_name: '', // 省份ID
+                city_name: '', // 城市名称
                 details_address: '', // 详细地址
                 lng: '', // 经度
                 lat: '', // 纬度
@@ -144,6 +144,25 @@ export default {
                 password: '', // 登录密码
                 password_confirm: '', // 确认密码
             },
+            formRules: {
+                unit_name: { required: true, message: '请输入单位名称' },
+                institution_code: [
+                    { required: true, message: '请输入机构代码' },
+                    { message: '请输入18位的机构代码', validator: (rule, value) => value.length === 18 }
+                ],
+                city_id: { required: true, message: '请选择城市' },
+                details_address: { required: true, message: '请输入详细地址' },
+                represent: { required: true, message: '请输入寺院法人' },
+                mobile: [
+                    { required: true, message: '请输入手机号码' },
+                    { validator: (rule, value) => this.$config.RegExp.mobile.test(value), message: '请输入合法的手机号码'}
+                ],
+                source: { required: true, message: '请输入寺院来源' },
+                register_name: {  validator: {}  },
+                login_mobile: { required: true, message: '请输入法人手机号码' },
+                password: { required: true, message: '请输入登陆密码' },
+                password_confirm: { required: true, message: '请确认登录密码' }
+            },
             // form: testForm,
             geocoder: null,
             TMap: null
@@ -173,9 +192,16 @@ export default {
         if(this.form.register_cert_url.length === 0 && Number(this.$route.query.step) !== 1){
             return this.$router.push({ query: { step: 1 }});
         }
-       
     },
     methods: {
+        handleErrors(errors){
+            for(let i = 0; i < errors.length; i++){
+                if(errors[i]){
+                    this.$toast.fail(errors[i].message)
+                    break;
+                }
+            }
+        },
         onNextStep(){
             this.$router.push({ query: { step: this.step + 1 }})
         },
@@ -198,8 +224,15 @@ export default {
         onChangeProvince(){
 
         },
-        async onSubmitBefore(){
+        onSubmitBefore(){
-            this.onNextStep();
+            const validator = new Schema(this.formRules);
+            validator.validate(this.form, ((errors) => {
+                if(errors){
+                    return this.handleErrors(errors)
+                }
+                //
+                this.onNextStep();
+            }))
         },
         async onSubmit(){
             const [province_id, city_id, country_id] = this.form.city_id;

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

@@ -3,7 +3,7 @@
         <img class="icon" src="@/assets/img/review.jpg" alt="">
         <h1 class="title">审核中</h1>
         <p class="desc">请长按下方【寺院联盟官方公众号】二维码并关注</p>
-        <img class="qrcode" src="https://img0.baidu.com/it/u=3101623223,11353193&fm=26&fmt=auto" />
+        <img class="qrcode" :src="$config.qrcode.wechatAccount" />
     </div>
 </template>
 
@@ -34,8 +34,8 @@ export default {};
         margin-bottom: .3rem;
     }
     .qrcode{
-        width: 4rem;
+        width: 5rem;
-        height: 4rem;
+        height: 5rem;
         margin-left: auto;
         margin-right: auto;
         display: block;

src/router/index.js

@@ -17,7 +17,6 @@ const routes = [
     },
     {
         path: '/temple',
-        name: 'temple',
         meta: { title: '寺院', navBarBackgroundColor: 'white', showNavBar: false },
         component: { render: h => h('router-view') },
         children: [
@@ -110,7 +109,6 @@ const routes = [
     },
     {
         path: '/user',
-        name: 'user',
         component: () => import('@/pages/user/root'),
         children: [
             {
@@ -163,7 +161,6 @@ const routes = [
             },
             {
                 path: 'course',
-                name: 'user-course',
                 meta: { title: '修行' },
                 component: { render: h => h('router-view')},
                 children: [

yarn.lock

@@ -1916,6 +1916,11 @@ async-limiter@~1.0.0:
   resolved "https://registry.npm.taobao.org/async-limiter/download/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
   integrity sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=
 
+async-validator@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.npmmirror.com/async-validator/download/async-validator-4.0.7.tgz#034a0fd2103a6b2ebf010da75183bec299247afe"
+  integrity sha1-A0oP0hA6ay6/AQ2nUYO+wpkkev4=
+
 async@^2.6.2:
   version "2.6.3"
   resolved "https://registry.nlark.com/async/download/async-2.6.3.tgz?cache=0&sync_timestamp=1628205815983&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fasync%2Fdownload%2Fasync-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"