hzd/visitor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

处理偶尔循环登录问题

Browse Source
This commit is contained in:
lzyyj
2025-08-23 17:51:36 +08:00
parent 9b1947f7c0
commit 81dc87c388
8 changed files with 884 additions and 579 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/face-model.vue
+117 -71
View File
@@ -12,149 +12,195 @@
</header>
<p class="tips">注：点击照片框进行人脸照片上传</p>
<div class="button-box">
<div @click="onClickCancel" class="cancel-button">取消</div>
<div @click="onClickSave" class="save-button">保存</div>
<div @click="onClickCancel" class="cancel-button">取消</div>
<div @click="onClickSave" class="save-button" :class="{ disabled: !file }" :style="{ pointerEvents: file ? 'auto' : 'none' }">保存</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { rulesForm, resetForm, rulesPhone } from '@/com/index'
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
import {rulesForm, resetForm, rulesPhone} from '@/com/index'
/* @data */
const router = useRouter()
const store = useStore()
const emits = defineEmits(['change', 'cancel', 'save'])
const router = useRouter()
const store = useStore()
const emits = defineEmits(['change', 'cancel', 'save'])
const props = defineProps({
faceImg: {
default: ''
},
})
const file = ref()
const props = defineProps({
faceImg: {
default: ''
},
})
const file = ref()
/* @setup */
/* @method */
// 上传图片
const onChangeFile = (e) =>{
file.value = e.target.files[0]
emits('change', e.target.files[0])
// 上传图片
const onChangeFile = (e) => {
file.value = e.target.files[0]
emits('change', e.target.files[0])
}
const onClickCancel = () => {
emits('cancel')
}
const onClickSave = () => {
// 如果既没有新文件也没有原始图片，则不允许保存
if (!file.value && !props.faceImg) {
return;
}
const onClickCancel = () =>{
emits('cancel')
}
const onClickSave = () =>{
emits('save', file.value)
}
emits('save', file.value)
}
</script>
<style lang='scss' scoped>
.fixed-model{
.fixed-model {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(60,60,67,0.6);
.model{
background: rgba(60, 60, 67, 0.6);
.model {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-65%) ;
width: 8.1867rem /* 614/75 */;
transform: translateX(-50%) translateY(-65%);
width: 8.1867rem /* 614/75 */
;
// height: 394px;
background: #FFFFFF;
border-radius: .5333rem /* 40/75 */;
padding: 0 0 .7733rem /* 58/75 */;
border-radius: .5333rem /* 40/75 */
;
padding: 0 0 .7733rem /* 58/75 */
;
box-sizing: border-box;
header{
header {
width: 100%;
height: 10.5333rem /* 790/75 */;
height: 10.5333rem /* 790/75 */
;
background: #FFFFFF;
border-radius: .5333rem /* 40/75 */;
border-radius: .5333rem /* 40/75 */
;
background: url('../assets/img/renlianbeijing.png') left top/100% 100% no-repeat;
h3{
line-height: .7733rem /* 58/75 */;
font-size: .5333rem /* 40/75 */;
font-family: Source Han Sans CN, Source Han Sans CN;
h3 {
line-height: .7733rem /* 58/75 */
;
font-size: .5333rem /* 40/75 */
;
font-family: Source Han Sans CN, serif;
font-weight: 500;
color: #222222;
padding: .8533rem /* 64/75 */ 0 0 ;
padding: .8533rem /* 64/75 */
0 0;
text-align: center;
box-sizing: border-box;
}
.upload-box{
.upload-box {
position: relative;
width: 4.4rem /* 330/75 */;
height: 4.4rem /* 330/75 */;
width: 4.4rem /* 330/75 */
;
height: 4.4rem /* 330/75 */
;
background: #FFFFFF;
box-shadow: 0px .1067rem /* 8/75 */ .8rem /* 60/75 */ .2667rem /* 20/75 */ rgba(68,140,247,0.4);
border-radius: .2667rem /* 20/75 */;
margin: 1.28rem /* 96/75 */ auto 0;
box-shadow: 0px .1067rem /* 8/75 */
.8rem /* 60/75 */
.2667rem /* 20/75 */
rgba(68, 140, 247, 0.4);
border-radius: .2667rem /* 20/75 */
;
margin: 1.28rem /* 96/75 */
auto 0;
overflow: hidden;
.span{
.span {
text-align: center;
line-height: 4.4rem /* 330/75 */;
line-height: 4.4rem /* 330/75 */
;
font-size: $size30;
font-family: Source Han Sans CN, Source Han Sans CN;
font-family: Source Han Sans CN, serif;
font-weight: 400;
color: #999999;
}
// display: flex;
.face-img, input{
.face-img, input {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: .2667rem /* 20/75 */;
border-radius: .2667rem /* 20/75 */
;
opacity: 0;
}
.face-img{
.face-img {
opacity: 1;
}
}
}
.tips{
line-height: .5333rem /* 40/75 */;
.tips {
line-height: .5333rem /* 40/75 */
;
font-size: $md-size;
font-family: Source Han Sans CN, Source Han Sans CN;
font-family: Source Han Sans CN, serif;
font-weight: 400;
color: #5F6583;
text-align: center;
margin-top: -1.6rem /* 120/75 */;
margin-top: -1.6rem /* 120/75 */
;
}
.button-box{
.button-box {
// margin-top: 1.1467rem /* 86/75 */;
display: flex;
padding: 0 .7733rem /* 58/75 */;
padding: 0 .7733rem /* 58/75 */
;
box-sizing: border-box;
margin-top: .6133rem /* 46/75 */;
div{
margin-top: .6133rem /* 46/75 */
;
div {
// width: 240px;
flex: 1;
height: 1.0667rem /* 80/75 */;
line-height: 1.0667rem /* 80/75 */;
height: 1.0667rem /* 80/75 */
;
line-height: 1.0667rem /* 80/75 */
;
background: #448CF7;
border-radius: 1.3333rem /* 100/75 */;
border-radius: 1.3333rem /* 100/75 */
;
text-align: center;
font-size: $md-size;
color: #FFFFFF;
}
.cancel-button{
margin-right: .2667rem /* 20/75 */;
background: #D9D9D9;
color: #999999;
.cancel-button {
margin-right: .2667rem /* 20/75 */
;
background: #448CF7; // #D9D9D9;
color: #FFFFFF; // #999999;
}
.save-button {
&.disabled {
background: #D9D9D9;
color: #999999;
}
}
}
}