380 lines
11 KiB
Vue
380 lines
11 KiB
Vue
<template lang="html">
|
|
<div style="background-color: #f2f2f2; min-height: 100vh" v-loading="load">
|
|
<div style="width: 100%; height: 10rem; background-color: #ffffff">
|
|
<div class="my_header">
|
|
<div style="width: 50%; height: 100%">
|
|
<div style="width: 100%; height: 3rem"></div>
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
height: 1.5rem;
|
|
line-height: 1.5rem;
|
|
color: black;
|
|
font-size: 1.3rem;
|
|
"
|
|
class="login_name"
|
|
>
|
|
{{user.name?user.name:'微信人员'}}
|
|
</div>
|
|
<div style="width: 100%; height: 1rem"></div>
|
|
<div style="width: 100%; height: 2.5rem; color: #a2a2a2">
|
|
<div
|
|
style="width: 100%; height: 1.25rem; line-height: 1.25rem"
|
|
class="login_tel"
|
|
>
|
|
{{user.telphone}}
|
|
</div>
|
|
<div
|
|
style="width: 100%; height: 1.25rem; line-height: 1.25rem"
|
|
class="login_roles"
|
|
>
|
|
住宅-{{user.fjNum}}
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%; height: 2rem"></div>
|
|
</div>
|
|
<div
|
|
style="
|
|
width: 30%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
"
|
|
>
|
|
<div
|
|
style="
|
|
width: 5rem;
|
|
height: 5rem;
|
|
background-color: #f4f4f6;
|
|
border-radius: 2.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
"
|
|
class="user_photo"
|
|
@click="handleUpload"
|
|
>
|
|
<van-icon name="contact" color="#b2b2b2" size="2.8rem" v-if="!user.facePhoto" />
|
|
<img :src="user.facePhoto" alt="" style="width: 100%;height: 100%; border-radius: 2.5rem;" v-if="user.facePhoto">
|
|
<!-- <i class="layui-icon layui-icon-username" style="color:#b2b2b2;font-size:2.8rem"></i> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%; height: 1rem"></div>
|
|
<div style="background: #ffffff; width: 100%; height: 4rem" @click="$router.push('/applyFamily')">
|
|
<div style="width: 90%; height: 4rem; display: flex; margin: auto">
|
|
<div
|
|
style="width: 50%; height: 100%; display: flex; align-items: center"
|
|
>
|
|
<van-icon name="wap-home" color="#d6d6da" size="1.4rem" />
|
|
<span style="margin-left: 8%; color: #676767; font-size: 1rem"
|
|
>成员管理</span
|
|
>
|
|
</div>
|
|
<div
|
|
style="
|
|
width: 50%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<van-icon name="arrow" color="#d6d6da" size="1.4rem" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%; height: 1rem"></div>
|
|
<div style="background: #ffffff; width: 100%; height: 4rem" @click="$router.push('/applyCar')">
|
|
<div style="width: 90%; height: 4rem; display: flex; margin: auto">
|
|
<div
|
|
style="width: 50%; height: 100%; display: flex; align-items: center"
|
|
>
|
|
<van-icon name="cluster" color="#d6d6da" size="1.4rem" />
|
|
<span style="margin-left: 8%; color: #676767; font-size: 1rem"
|
|
>车辆管理</span
|
|
>
|
|
</div>
|
|
<div
|
|
style="
|
|
width: 50%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<van-icon name="arrow" color="#d6d6da" size="1.4rem" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%; height: 1rem"></div>
|
|
<div style="background: #ffffff; width: 100%; height: 4rem" @click="go('invite')">
|
|
<div style="width: 90%; height: 4rem; display: flex; margin: auto">
|
|
<div
|
|
style="width: 50%; height: 100%; display: flex; align-items: center"
|
|
>
|
|
<van-icon name="friends" color="#d6d6da" size="1.4rem" />
|
|
<span style="margin-left: 8%; color: #676767; font-size: 1rem">邀请访客</span>
|
|
</div>
|
|
<div
|
|
style="
|
|
width: 50%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<van-icon name="arrow" color="#d6d6da" size="1.4rem" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%; height: 1rem"></div>
|
|
<div style="background: #ffffff; width: 100%; height: 4rem" @click="go('applylog')">
|
|
<div style="width: 90%; height: 4rem; display: flex; margin: auto">
|
|
<div
|
|
style="width: 50%; height: 100%; display: flex; align-items: center"
|
|
>
|
|
<van-icon name="notes-o" color="#d6d6da" size="1.4rem" />
|
|
<span style="margin-left: 8%; color: #676767; font-size: 1rem">访客记录</span>
|
|
</div>
|
|
<div
|
|
style="
|
|
width: 50%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<van-icon name="arrow" color="#d6d6da" size="1.4rem" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%; height: 1rem"></div>
|
|
<div style="background: #ffffff; width: 100%; height: 4rem" @click="go('applyforQrcode?id='+user.id+'&fjNum='+user.fjNum)">
|
|
<div style="width: 90%; height: 4rem; display: flex; margin: auto">
|
|
<div
|
|
style="width: 50%; height: 100%; display: flex; align-items: center"
|
|
>
|
|
<van-icon name="guide-o" color="#d6d6da" size="1.4rem" />
|
|
<span style="margin-left: 8%; color: #676767; font-size: 1rem">访客申请码</span>
|
|
</div>
|
|
<div
|
|
style="
|
|
width: 50%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<van-icon name="arrow" color="#d6d6da" size="1.4rem" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="admin-footer">
|
|
<span>copyright@宁波大招科技有限公司 0574-23668886 23668889</span
|
|
>
|
|
</div>
|
|
<van-popup v-model="popShow" round position="bottom" :style="{ height: '80%' }">
|
|
<Keyboards :submitBack="submitBack"></Keyboards>
|
|
</van-popup>
|
|
<van-uploader :after-read="afterRead" ref="uploader" v-show="false" />
|
|
<van-dialog v-model="doalogshow" title="绑定车牌" show-cancel-button @confirm="evaluateConfirm">
|
|
<div style="width: 80%;height:auto;margin: auto;" @click="popShow = true">
|
|
<el-input
|
|
type="text"
|
|
placeholder="请输入车牌"
|
|
readonly
|
|
v-model="evaluateValue">
|
|
</el-input>
|
|
</div>
|
|
</van-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Dialog } from "vant";
|
|
import axios from "axios";
|
|
import Keyboards from '../../../components/keyboards/keyboards.vue'
|
|
export default {
|
|
data() {
|
|
return {
|
|
url: "",
|
|
load:false,
|
|
doalogshow:false,
|
|
user: {},
|
|
evaluateValue:"",
|
|
popShow:false,
|
|
};
|
|
},
|
|
activated() {
|
|
|
|
},
|
|
components:{Keyboards},
|
|
mounted() {
|
|
this.url = this.$store.state.url;
|
|
// localStorage.setItem("userInfo",JSON.stringify({id:100005,name:'王德法',telphone:'18058587597',unit:'',fjNum:'010101',facePhoto:''}));
|
|
// localStorage.setItem("userInfo",JSON.stringify( {
|
|
// id: 1184,
|
|
// personId: 128,
|
|
// name: "王德法",
|
|
// telphone: "18058587597",
|
|
// companyName: "宁波大招科技有限公司",
|
|
// }));
|
|
this.getInit();
|
|
},
|
|
methods: {
|
|
|
|
submitBack(val){
|
|
this.popShow = false;
|
|
this.evaluateValue = val;
|
|
},
|
|
evaluateConfirm(){
|
|
if(!this.evaluateValue){
|
|
this.$toast.fail("必须填不能为空");
|
|
return
|
|
}
|
|
axios
|
|
.post(this.url + "/Person/AddCar", {personId:this.user.id,carNo:this.evaluateValue})
|
|
.then((res) => {
|
|
let result = res.data;
|
|
if (result.code == 0) {
|
|
this.$toast.success('绑定成功');
|
|
|
|
} else {
|
|
this.$toast.fail(result.msg);
|
|
}
|
|
});
|
|
},
|
|
afterRead(file){
|
|
const formData = new FormData();
|
|
formData.append('file', file.file);
|
|
this.load = true;
|
|
axios
|
|
.post(this.url + "/Person/UploadFacePhoto/"+this.user.id, formData)
|
|
.then((res) => {
|
|
let result = res.data;
|
|
this.load = false;
|
|
if (result.code == 0) {
|
|
this.$toast.success('更新成功');
|
|
this.user.facePhoto = result.data;
|
|
console.log(this.user)
|
|
localStorage.setItem("userInfo",JSON.stringify(this.user));
|
|
} else {
|
|
this.$toast.fail(result.msg);
|
|
}
|
|
});
|
|
console.log(file);
|
|
},
|
|
handleUpload() {
|
|
console.log(this.$refs.uploader)
|
|
this.$refs.uploader.chooseFile(); // 触发上传组件的点击事件
|
|
},
|
|
go(url){
|
|
this.$router.push("/"+url);
|
|
},
|
|
getInit() {
|
|
if (localStorage.getItem("userInfo")) {
|
|
this.user = JSON.parse(localStorage.getItem("userInfo"));
|
|
} else{
|
|
this.$toast.fail("暂无人员信息");
|
|
// this.$router.push('/bind');
|
|
}
|
|
},
|
|
getJson() {},
|
|
getUser(openid) {},
|
|
submit() {},
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
html{
|
|
font-size: 16px;
|
|
}
|
|
</style>
|
|
<style scoped>
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
:root {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
:root body {
|
|
position: absolute;
|
|
}
|
|
|
|
html {
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
body {
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
-webkit-text-size-adjust: 100% !important;
|
|
text-size-adjust: 100% !important;
|
|
-moz-text-size-adjust: 100% !important;
|
|
}
|
|
|
|
.navi_footer {
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
position: fixed;
|
|
bottom: 0%;
|
|
height: 3rem;
|
|
width: 100%;
|
|
color: #888b93;
|
|
}
|
|
|
|
.navi_footer_check {
|
|
font-weight: bold;
|
|
}
|
|
.admin-footer {
|
|
width: 100%;
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: 0;
|
|
font-size: 0.7rem;
|
|
color: #9999b3;
|
|
margin-bottom: 10px;
|
|
}
|
|
.navi_footer_check div {
|
|
height: 50%;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.navi_footer_this div {
|
|
height: 50%;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.navi_footer_this {
|
|
color: #57b88f;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.my_header {
|
|
width: 90%;
|
|
height: 10rem;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: auto;
|
|
}
|
|
</style>
|