skywt
/
5g-track
1
0
Fork 0
Code Releases Activity

修改photos页面（未完善）

This commit is contained in:
skywt2003 2022-05-26 18:48:37 +08:00
parent db6e59df25
commit aff4632717
2 changed files with 108 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/styles/variables.styl
View File

@ -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%

85
src/views/photos/index.vue
View File

@ -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="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 {
@ -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: '温馨提示',
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('正在处理图片...')
Toast.loading({
message: '正在处理图片……',
forbidClick: true,
});
drawAndShareImage(ele).then(res => {
this.imgs.push(res)
this.$Loading.hidden()
Toast.clear()
})
})
}