修改photos页面（未完善）
This commit is contained in:
skywt2003
parent
db6e59df25
commit
aff4632717
|
|
@ -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
|
||||
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
|
||||
.van-image
|
||||
box-shadow: 0 4px 10px #00000012
|
||||
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%
|
||||
|
|
@ -3,99 +3,98 @@
|
|||
<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="imgs-wrap">
|
||||
<div class="imgs-item" v-for="(item,index) in imgs" :key="index">
|
||||
<img :src="item" alt="" >
|
||||
<div class="flex-container container-wrap">
|
||||
<template v-if="!hintFlag">
|
||||
<div v-for="(item,index) in imgs" :key="index">
|
||||
<van-image :src="item" fit="cover" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint" v-show='showHint'>
|
||||
<div 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>
|
||||
<div class="title">未找到和您匹配的纪念照</div>
|
||||
<p>为保证识别效果，请使用只有自己正面头像的清晰照片注册；</p>
|
||||
<p>若之前上传的照片效果不佳，没有匹配到照片，可以重新注册。</p>
|
||||
</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 { ImagePreview} from 'vant'
|
||||
// import Vue from 'vue';
|
||||
// Vue.use(ImagePreview);
|
||||
import { GetUserAttestation } from 'api/home'
|
||||
import { Field, CellGroup, Dialog, Image, Button, Toast, Lazyload } from 'vant';
|
||||
// import { GetUserAttestation } from 'api/home'
|
||||
import drawAndShareImage from '@/utils/waterMark'
|
||||
|
||||
export default {
|
||||
name:'Home',
|
||||
components:{
|
||||
[Field.name]:Field,
|
||||
[CellGroup.name]:CellGroup,
|
||||
[Dialog.name]:Dialog,
|
||||
name: 'Home',
|
||||
components: {
|
||||
[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
|
||||
if (this.hintFlag) return
|
||||
let imgs = JSON.parse(localStorage.images)
|
||||
if(imgs){
|
||||
console.log(imgs,47)
|
||||
if(imgs.length === 0){
|
||||
if (imgs){
|
||||
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
|
||||
imgs: [],
|
||||
hintFlag: false, // hintFlag: 未找到该用户匹配的纪念照
|
||||
// showPreview:false,
|
||||
showHint:false
|
||||
showHint: false
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
methods: {
|
||||
onRegister(){
|
||||
Dialog.alert({
|
||||
title: '温馨提示',
|
||||
message: '请务必使用新的手机号码重新注册！'
|
||||
title: '提示',
|
||||
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('正在处理图片...')
|
||||
drawAndShareImage(ele).then(res =>{
|
||||
Toast.loading({
|
||||
message: '正在处理图片……',
|
||||
forbidClick: true,
|
||||
});
|
||||
drawAndShareImage(ele).then(res => {
|
||||
this.imgs.push(res)
|
||||
this.$Loading.hidden()
|
||||
Toast.clear()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue