修改photos页面（未完善）

src/styles/variables.styl

@@ -1,6 +1,5 @@
 .home-wrap
     overflow hidden
-    height: 100vh
     .hint
         width 100%
         box-sizing border-box
@@ -20,13 +19,15 @@
         color: white
         text-align: center
         margin-top: 15vh
+    // .container-wrap
+    //     width: 90%
     .card
         position relative
         width 90%
         box-shadow: 0 4px 10px #00000012
         background white
         margin 10vh auto auto auto
-        .van-form
+    .van-form, .button-wrap
         width 100%
         padding 30px
         box-sizing border-box
@@ -50,35 +51,39 @@
         flex-direction column
         justify-content center
         align-items center
-    .main
+    .van-image
-        width 100vw
+        box-shadow: 0 4px 10px #00000012
-        position relative
-        .hint
-            width 70%
-            border-radius 10px
-            height 100px
-            background rgba(255,255,255,0.9)
-            position absolute 
-            left 50%
-            top 50%
-            transform translate(-50%,-50%)
-            display flex
-            justify-content center
-            align-items center
-            color rgba(0,133,208,1)
-        .imgs-wrap
-            overflow hidden
-            width 100%
-            padding 8px
-            padding-top 40px
-            padding-bottom 50px
-            box-sizing border-box
-            .imgs-item
-                font-size 0
-                border 1px solid white
-                width 100%
-                margin-bottom 10px
-                border-radius 10px
-                overflow hidden
         img
-                    width 100%
+            border-radius 10px
+    // .main
+    //     width 100vw
+    //     position relative
+    //     .hint
+    //         width 70%
+    //         border-radius 10px
+    //         height 100px
+    //         background rgba(255,255,255,0.9)
+    //         position absolute 
+    //         left 50%
+    //         top 50%
+    //         transform translate(-50%,-50%)
+    //         display flex
+    //         justify-content center
+    //         align-items center
+    //         color rgba(0,133,208,1)
+    //     .imgs-wrap
+    //         overflow hidden
+    //         width 100%
+    //         padding 8px
+    //         padding-top 40px
+    //         padding-bottom 50px
+    //         box-sizing border-box
+    //         .imgs-item
+    //             font-size 0
+    //             border 1px solid white
+    //             width 100%
+    //             margin-bottom 10px
+    //             border-radius 10px
+    //             overflow hidden
+    //             img 
+    //                 width 100%

src/views/photos/index.vue

@@ -3,54 +3,34 @@
         <div class="background-wrap">
             <img class="background-image" src="@/assets/image/track.jpg" />
         </div>
-        <!-- <div class="top-bgimg-wrap">
-            <img class="top-img" src="@/assets/image/bgimg-top.png"/>
-            <div class="logo-wrap">
-                <img class="yidong-img" src="@/assets/image/yidong.png"/>
-                <img class="fiveG-img" src="@/assets/image/5g.png"/>
-            </div>
-        </div> -->
-        <div class="flex-container">
-            <template v-if="!hintFlag">
         <div class="top-brand-wrap">
-                    <h1 class="title">您的 5G 纪念册</h1>
+            <h1 class="title">您的纪念册</h1>
         </div>
-                <div class="main">
+        <div class="flex-container container-wrap">
-                    <div class="imgs-wrap">
+            <template v-if="!hintFlag">
-                        <div class="imgs-item" v-for="(item,index) in imgs" :key="index">
+                <div v-for="(item,index) in imgs" :key="index">
-                            <img :src="item" alt="" >
+                    <van-image :src="item" fit="cover" alt="" />
                 </div>
-                    </div>
+                <div v-show='showHint'>
-                    <div class="hint" v-show='showHint'>
                     <span>您没有任何纪念照哦！</span>
                 </div>
-                </div>
             </template>
-            <div class="button" @click="onRegister">重新注册</div>
             <template v-if="hintFlag">
-                <div class="title">您的5G纪念册为空</div>
+                <div class="title">未找到和您匹配的纪念照</div>
-                <div class="hint-wrap">
+                <p>为保证识别效果，请使用只有自己正面头像的清晰照片注册；</p>
-                    <div class="main">
+                <p>若之前上传的照片效果不佳，没有匹配到照片，可以重新注册。</p>
-                        <div class="info-title">温馨提示</div>
-                        <div class="info">
-                            <p>1、为保证识别效果，请使用只有自己正面头像的清晰照片注册；</p>
-                            <p>2、若之前上传的照片效果不佳，没有匹配到照片，可以使用新的手机号码和头像照片，重新注册。</p>
-                        </div>
-                    </div>
-                </div>
             </template>
+            <div class="button-wrap">
+                <van-button type="primary" block round @click="onShare">分享</van-button>
+                <van-button type="primary" block round class="register" @click="onRegister">重新注册</van-button>
+            </div>
         </div>
-        <!-- <img class="bottom-img" src="@/assets/image/bgimg-bottom.png" alt=""> -->
-        <!-- <van-image-preview v-model="showPreview" :images="imgs"> </van-image-preview> -->
     </div>
 </template>
 
 <script>
-import { Field, CellGroup, Dialog } from 'vant';
+import { Field, CellGroup, Dialog, Image, Button, Toast, Lazyload } from 'vant';
-// import { ImagePreview} from 'vant'
+// import { GetUserAttestation } from 'api/home'
-// import Vue from 'vue';
-// Vue.use(ImagePreview);
-import { GetUserAttestation } from 'api/home'
 import drawAndShareImage from '@/utils/waterMark'
 
 export default {
@@ -59,23 +39,31 @@ export default {
         [Field.name]: Field,
         [CellGroup.name]: CellGroup,
         [Dialog.name]: Dialog,
+        [Image.name]: Image,
+        [Button.name]: Button,
+        [Toast.name]: Toast,
+        [Lazyload.name]: Lazyload,
     },
-    activated(){
+    created(){ // 此处用 activated 则不会被调用，不知道为啥
         this.hintFlag = this.$route.query.type
         if (this.hintFlag) return
         let imgs = JSON.parse(localStorage.images)
         if (imgs){
-            console.log(imgs,47)
+            console.log(imgs)
             if (imgs.length === 0){
                 this.showHint = true
             }
-            this.handlerMark(imgs)
+            // this.handlerMark(imgs)
+            // console.log(imgs)
+            this.imgs = imgs
+        } else {
+            this.showHint = true
         }
     },
     data(){
         return {
             imgs: [],
-            hintFlag:false,       //空白页提示flag
+            hintFlag: false, // hintFlag: 未找到该用户匹配的纪念照
             // showPreview:false,
             showHint: false
         }
@@ -83,19 +71,30 @@ export default {
     methods: {
         onRegister(){
             Dialog.alert({
-                title: '温馨提示',
+                title: '提示',
-                message: '请务必使用新的手机号码重新注册！'
+                message: '请使用新的手机号码重新注册。'
             }).then(() => {
                 this.$router.replace('/home')
             });
         },
+        onShare(){
+            Dialog.alert({
+                title: '提示',
+                message: '分享功能尚未开发完善。'
+            }).then(() => {
+                // this.$router.replace('/home')
+            });
+        },
         handlerMark(arr){
             this.imgs = []
             arr.forEach(ele => {
-                this.$Loading.show('正在处理图片...')
+                Toast.loading({
+                    message: '正在处理图片……',
+                    forbidClick: true,
+                });
                 drawAndShareImage(ele).then(res => {
                     this.imgs.push(res)
-                    this.$Loading.hidden()
+                    Toast.clear()
                 })
             })
         }