297 lines
8.7 KiB
Vue
297 lines
8.7 KiB
Vue
<template>
|
||
<div class="admin-wrap">
|
||
<!-- <div class="title">操作中心</div> -->
|
||
<div class="scan-wrap">
|
||
<div class="main" @click="onScan">
|
||
<img src="@/assets/image/scan1.png" alt="" class="outside">
|
||
<img src="@/assets/image/scan2.png" alt="" class="interior">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info">
|
||
<div class="main">
|
||
<div class="detail">
|
||
<div class="main">
|
||
<div class="temp">
|
||
<div class="userInfo">
|
||
<span>姓名：</span>
|
||
<span class="value">{{userData.Name}}</span>
|
||
</div>
|
||
<div class="userInfo">
|
||
<span class='type'>身份证号：</span>
|
||
<span class="value">{{idCard}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="img-wrap">
|
||
<!-- <div class="imgs" :style="{backgroundImage:`url(${userData.imgUrl})`}" @click="showPreview = true"></div> -->
|
||
<van-image
|
||
class="imgs"
|
||
fit="contain"
|
||
:src="userData.FaceImgUrl"
|
||
@click="showPreview = true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="input-wrap">
|
||
<input v-model="code" type="text" placeholder='请输入编号'>
|
||
<div class="button" @click="onSubmit">确认发放</div>
|
||
</div>
|
||
<van-image-preview
|
||
v-model="showPreview"
|
||
:images="images"
|
||
>
|
||
</van-image-preview>
|
||
<img class="bottom-img" src="@/assets/image/logo.png" alt="">
|
||
|
||
</div>
|
||
|
||
</template>
|
||
<script>
|
||
import {Icon, ImagePreview, Image,Dialog } from 'vant'
|
||
import WeChatScan from 'utils/WeChatScan.js'
|
||
import Vue from 'vue';
|
||
Vue.use(ImagePreview);
|
||
import { GetPeopleData, AddNo } from 'api/admin'
|
||
|
||
|
||
export default {
|
||
name:"Admin",
|
||
data(){
|
||
return {
|
||
userData:{IdCard:'',Name:''},
|
||
showPreview:false,
|
||
code:'',
|
||
}
|
||
},
|
||
components:{
|
||
[Icon.name] :Icon,
|
||
[Image.name]:Image,
|
||
[Dialog.name]:Dialog,
|
||
},
|
||
computed:{
|
||
images(){
|
||
return [this.userData.FaceImgUrl]
|
||
},
|
||
idCard(){
|
||
if(this.userData.IdCard){
|
||
let str = this.userData.IdCard
|
||
let difference = str.length - 5 - 3;
|
||
return str.slice(0, 5) + '*'.repeat(difference) + str.slice(-3)
|
||
}else{
|
||
return ''
|
||
}
|
||
|
||
// let replaceStr = new Array(difference + 1).join('*')
|
||
// return this.userData.IdCard.replace(/^(.{5})(?:\d+)(.{3})$/,'$1' + replaceStr + '$2');
|
||
}
|
||
},
|
||
activated(){
|
||
this.$Toast.success('欢迎您！管理员！')
|
||
},
|
||
methods:{
|
||
onScan(){
|
||
WeChatScan(this.handleScanCode) //调用微信扫一扫一系列流程，传入回调函数
|
||
},
|
||
handleScanCode(ScanCode){
|
||
this.userData = {}
|
||
GetPeopleData(ScanCode).then(res => {
|
||
if(res.code === 0){
|
||
this.$Toast.success('查询成功！')
|
||
this.userData = res.data
|
||
if(res.data.No){
|
||
Dialog.alert({
|
||
title: '改用户已经绑定，无需再次绑定',
|
||
message: '绑定编号为：' + this.userData.No
|
||
});
|
||
}
|
||
}else{
|
||
this.$Toast.error(res.msg)
|
||
}
|
||
})
|
||
},
|
||
onSubmit(){
|
||
var reg = new RegExp('^[0-9]*$')
|
||
if(this.code){
|
||
if(!reg.test(this.code)){
|
||
this.$Toast.error('请输入数字！')
|
||
return
|
||
}
|
||
AddNo(this.userData.CodeMd5,this.code).then(res=> {
|
||
if(res.code != 0 && res.code != 2018){
|
||
this.$Toast.error('绑定失败：' + res.msg)
|
||
}
|
||
if(res.code === 0){
|
||
this.$Toast.success('绑定成功！')
|
||
}else if(res.code === 2018){
|
||
Dialog.alert({
|
||
title: '改用户已经绑定，请勿重复绑定',
|
||
message: '绑定编号为：' + this.userData.No
|
||
});
|
||
}
|
||
this.userData = {} //操作成功清空
|
||
this.code = ''
|
||
})
|
||
}else{
|
||
this.$Toast.error('请输入编号')
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style>
|
||
@keyframes rotate{
|
||
0%{
|
||
transform: rotate(0deg) scale(1);
|
||
}
|
||
50%{
|
||
transform:rotate(180deg) scale(1.2)
|
||
}
|
||
100%{
|
||
transform: rotate(360deg) scale(1);
|
||
|
||
}
|
||
}
|
||
</style>
|
||
|
||
|
||
<style lang="stylus" scoped>
|
||
.admin-wrap
|
||
width 100%
|
||
.bottom-img
|
||
position absolute
|
||
bottom 0px
|
||
width 100%
|
||
left 0
|
||
.title
|
||
padding 10px
|
||
font-size 14px
|
||
background rgb(64,158,255)
|
||
text-align center
|
||
color white
|
||
.scan-wrap
|
||
display flex
|
||
justify-content center
|
||
padding 30px 0
|
||
.main
|
||
width 25%
|
||
position relative
|
||
.outside
|
||
width 100%
|
||
animation rotate 5s linear 0s normal infinite
|
||
.interior
|
||
position absolute
|
||
left 50%
|
||
top 50%
|
||
transform translate(-50%,-50%)
|
||
width 50%
|
||
.info
|
||
width 90%
|
||
border-radius 5px
|
||
margin 0 auto
|
||
min-height 100px
|
||
background white
|
||
overflow hidden
|
||
.title
|
||
background #eee
|
||
color black
|
||
.main
|
||
width 100%
|
||
padding 10px
|
||
box-sizing border-box
|
||
display flex
|
||
justify-content space-between
|
||
.img-wrap
|
||
width 26%
|
||
height 0
|
||
background rgb(250,250,250)
|
||
padding-bottom 30%
|
||
box-sizing border-box
|
||
position relative
|
||
.imgs
|
||
position absolute
|
||
left 5px
|
||
top 5px
|
||
right 5px
|
||
bottom 5px
|
||
.detail
|
||
width 72%
|
||
box-sizing border-box
|
||
vertical-align top
|
||
height 0
|
||
padding-bottom 30%
|
||
background rgb(250,250,250)
|
||
position relative
|
||
font-size 16px
|
||
.main
|
||
position absolute
|
||
left 0
|
||
right 0
|
||
top 0
|
||
bottom 0
|
||
display flex
|
||
justify-content center
|
||
align-items center
|
||
.temp
|
||
width 100%
|
||
.userInfo
|
||
color #666
|
||
margin 10px 0
|
||
word-wrap break-word
|
||
white-space:normal
|
||
font-size 14px
|
||
.type
|
||
width 5em
|
||
display inline-block
|
||
vertical-align top
|
||
.value
|
||
width calc(100% - 5em)
|
||
display inline-block
|
||
color #0086ff
|
||
font-size 15px
|
||
.input-wrap
|
||
background white
|
||
margin 0 auto
|
||
width 90%
|
||
border-radius 5px
|
||
overflow hidden
|
||
padding 20px 0
|
||
display flex
|
||
flex-direction column
|
||
align-items center
|
||
margin-top 5px
|
||
box-sizing border-box
|
||
position relative
|
||
z-index 999
|
||
input
|
||
border none
|
||
border-bottom 1px solid rgb(64,158,255)
|
||
width 110px
|
||
text-align center
|
||
padding 10px
|
||
border-radius 0
|
||
font-size 25px
|
||
color rgb(64,158,255)
|
||
&::-webkit-input-placeholder
|
||
text-align center
|
||
font-size 16px
|
||
color rgba(64,158,255,0.7)
|
||
.button
|
||
Button()
|
||
margin-top 25px
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</style>
|
||
|
||
|