104 lines
3.6 KiB
Vue
104 lines
3.6 KiB
Vue
<template>
|
||
<div class='home-wrap'>
|
||
<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>
|
||
</div>
|
||
<div class="main">
|
||
<div class="imgs-wrap">
|
||
<div class="imgs-item" v-for="(item,index) in imgs" :key="index">
|
||
<img :src="item" alt="" >
|
||
</div>
|
||
</div>
|
||
<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="hint-wrap">
|
||
<div class="main">
|
||
<div class="info-title">温馨提示</div>
|
||
<div class="info">
|
||
<p>1、为保证识别效果，请使用只有自己正面头像的清晰照片注册；</p>
|
||
<p>2、若之前上传的照片效果不佳，没有匹配到照片，可以使用新的手机号码和头像照片，重新注册。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</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 { ImagePreview} from 'vant'
|
||
// import Vue from 'vue';
|
||
// Vue.use(ImagePreview);
|
||
import { GetUserAttestation } from 'api/home'
|
||
import drawAndShareImage from '@/utils/waterMark'
|
||
|
||
export default {
|
||
name:'Home',
|
||
components:{
|
||
[Field.name]:Field,
|
||
[CellGroup.name]:CellGroup,
|
||
[Dialog.name]:Dialog,
|
||
},
|
||
activated(){
|
||
this.hintFlag = this.$route.query.type
|
||
if(this.hintFlag) return
|
||
let imgs = JSON.parse(localStorage.images)
|
||
if(imgs){
|
||
console.log(imgs,47)
|
||
if(imgs.length === 0){
|
||
this.showHint = true
|
||
}
|
||
this.handlerMark(imgs)
|
||
}
|
||
},
|
||
data(){
|
||
return {
|
||
imgs:[],
|
||
hintFlag:false, //空白页提示flag
|
||
// showPreview:false,
|
||
showHint:false
|
||
}
|
||
},
|
||
methods:{
|
||
onRegister(){
|
||
Dialog.alert({
|
||
title: '温馨提示',
|
||
message: '请务必使用新的手机号码重新注册！'
|
||
}).then(() => {
|
||
this.$router.replace('/home')
|
||
});
|
||
},
|
||
handlerMark(arr){
|
||
this.imgs = []
|
||
arr.forEach(ele => {
|
||
this.$Loading.show('正在处理图片...')
|
||
drawAndShareImage(ele).then(res =>{
|
||
this.imgs.push(res)
|
||
this.$Loading.hidden()
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script> |