FE-V2-XCX/pages/mine.vue

<!-- 我的 -->
<template>
  <view id="mine">
    <view class="top-max-big-box" v-if="pageType">
      <!--老师-->
      <view class="top-max-box-two" v-if="userType==1&&certification.auditStatus">
        <view class="user-img-box" @click="selectImage">
          <img v-if="userData.avatar" :src="userData.avatarUrl">
          <img v-else  src="@/images/icon_01.png">
          <view>{{userData.avatar?'编辑':'未上传'}}</view>
        </view>
        <view class="name-box">
          <view>{{userData.userName}}</view>
          <view>{{userData.professional}}丨{{userData.deptName}}</view>
        </view>
      </view>
      <!--学生-->
      <view class="user-top-max-box-one" v-if="userType==2">
        <view class="back-posi"></view>
        <view class="top-max-box-one">
          <view class="user-img-box" @click="selectImage">
            <img v-if="userData.avatar" :src="userData.avatar">
            <img v-else  src="@/images/icon_01.png">
            <view>{{userData.avatar?'编辑':'未上传'}}</view>
          </view>
          <view class="name-box">
            <view class="name-box-min">
              <view>{{userData.userName}}</view>
              <view :class="userData.status == 2?'view-color-one':(userData.status == 3?'view-color-two':(userData.status == 1?'view-color-tree':''))">{{userData.status == 2?'负面清单':(userData.status == 3?'黑名单':(userData.status == 1?'正常':''))}}</view>
            </view>
            <view class="name-box-user">{{userData.professional}}丨{{userData.deptName}}</view>
          </view>
        </view>
        <view class="num-max-box">
          <view class="min-num-box" @click="goUserPage(1)">
            <view class="min-num-view color-one">{{creditScore}}</view>
            <view class="bottom-min-num-view">
              <img class="img-one" src="@/images/icon_wd_xyf.png">
              <view>信用分</view>
            </view>
          </view>
          <view class="null-p"></view>
          <view class="min-num-box" @click="goUserPage(2)">
            <view class="min-num-view color-two">{{bonusPoints}}</view>
            <view class="bottom-min-num-view">
              <img class="img-two" src="@/images/icon_wd_jlf.png">
              <view>奖励分</view>
            </view>
          </view>
          <view class="null-p"></view>
          <view class="min-num-box" @click="goUserPage(3)">
            <view class="min-num-view">扫一扫</view>
            <view class="bottom-min-num-view">
              <img class="img-two" src="@/images/icon_wd_dh.png">
              <view>兑换礼品</view>
            </view>
          </view>
        </view>
      </view>
      <view class="button-max-big-box">
        <view class="button-max-box" @click="goPage('alarm')" v-if="userType==1">
          <img class="left-img" src="@/images/icon_003.png">
          <view>安全报警</view>
          <view class="view-three-one" v-if="securityAlertNum>0">{{securityAlertNum}}</view>
          <img class="right-img" src="@/images/icon_04.png">
        </view>
        <view class="button-max-box" @click="goPage('laboratory')" v-if="userType==1">
          <img class="left-img" src="@/images/icon_002.png">
          <view>我的实验室</view>
          <view class="view-three-two" v-if="adminSubCount>0">{{adminSubCount}}</view>
          <img class="right-img" src="@/images/icon_04.png">
        </view>
        <view class="button-max-box" @click="goPage('record')" v-if="userType==1">
          <img class="left-img" src="@/images/icon_004.png">
          <view>预案执行记录</view>
          <view class="view-three-two" v-if="wranDoCount>0">{{wranDoCount}}</view>
          <img class="right-img" src="@/images/icon_04.png">
        </view>
        <view class="button-max-box" @click="goPage('faceImage')">
          <img class="left-img" src="@/images/icon_001.png">
          <view>人脸图像</view>
          <view class="view-three-type" :class="!ifFaceFeature?'colorA':'marginType'">{{!ifFaceFeature?'去认证':'已认证'}}</view>
          <img class="right-img" src="@/images/icon_04.png">
        </view>
        <view class="button-max-box" @click="goPage('signature')">
          <img class="left-img" src="@/images/icon_wd_dzqm.png">
          <view>电子签名</view>
          <view class="view-three-type" :class="!isUpload?'colorA':'marginType'">{{!isUpload?'未上传':'已上传'}}</view>
          <img class="right-img" src="@/images/icon_04.png">
        </view>
        <view class="button-max-box" @click="goPage('upStudentCard')" v-if="userType==2&&certification.auditStatus">
          <img class="left-img" src="@/images/icon_03.png">
          <view>学生卡绑定</view>
          <view class="view-three-type" :class="certification.auditStatus.code == 2 || certification.auditStatus.code == 3?'colorA':'marginType'">
            {{certification.auditStatus.code == 0?'待审核':(certification.auditStatus.code == 1?'已绑定':(certification.auditStatus.code == 2?'未通过':(certification.auditStatus.code == 3?'去绑定':'')))}}
          </view>
          <img class="right-img" v-if="certification.auditStatus.code == 2 || certification.auditStatus.code == 3" src="@/images/icon_04.png">
        </view>
        <view class="button-max-box" @click="fingerprintClick()">
          <img class="left-img" src="@/images/icon_wd_zw.png">
          <view>指纹</view>
          <view class="view-three-type" :class="Quantity>0?'marginType':'colorA'">{{Quantity>0?'已配置'+Quantity+'个':''}}</view>
          <img class="right-img" src="@/images/icon_04.png">
        </view>
      </view>
    </view>
    <view class="out-button" @click="clickOut">退出登录</view>
    <tab-bar></tab-bar>
  </view>
</template>

<script>
import { config } from '@/api/request/config.js'
import { logout,studentinfoFacemy,simpleInfo,getSafeWarnList,getMyPointsLogInfo,querySignature,fingerprintQuantity,fingerprintQueryList} from '@/api/index.js'
import { tabBar } from '@/component/tabBar.vue'
export default {
  components: {
    tabBar
  },
  data() {
    return {
      //页面状态
      pageType:false,
      //认证数据
      certification:{

      },
      userType:0,
      userData:{
        deptName: "",
        professional: "",
        userName: "",
      },
      securityAlertNum:0,
      adminSubCount:0,
      wranDoCount:0,
      //奖励分
      bonusPoints:0,
      //信用分
      creditScore:0,
      //用户签名
      signatureUrl:'',
      // 人脸
      ifFaceFeature:"",
      //签名
      isUpload:"",
      Quantity:0,//指纹录取数量

    }
  },
  onLoad() {

  },
  onShow(){

    if(uni.getStorageSync('token')&&uni.getStorageSync('userId')&&uni.getStorageSync('userType')){
      this.userType = uni.getStorageSync('userType')
      this.studentinfoFacemy();
      this.simpleInfo();
      this.querySignature();
    }else{
      uni.removeStorageSync('token');
      uni.removeStorageSync('userId');
      uni.removeStorageSync('userType');
      uni.redirectTo({
        url: '/pages/login',
      });
    }
  },

  methods: {
    //学生端-信用分/奖励分/扫一扫按钮
    goUserPage(type){
      let self = this;
      if(type == 1){
        uni.navigateTo({
          url: '/pages_student/mine/creditPoints',
        });
      }else if(type == 2){
        uni.navigateTo({
          url: '/pages_student/mine/rewardPoints',
        });
      }else if(type == 3){
        uni.scanCode({
          onlyFromCamera: true,
          success: function (res) {
            uni.navigateTo({
              url: '/pages_student/mine/codeSuccess?q='+encodeURIComponent(JSON.stringify(res.result))
            });
          }
        });
      }
    },
    //获取个人信息
    async simpleInfo(){
      const {data} = await simpleInfo();
      if(data.code == 200){
        this.userData = data.data;
        this.userData.avatar=data.data.avatar;
        this.userData.avatarUrl=config.base_url+data.data.avatar;
        if(this.userType == 1){
          this.getSafeWarnList();
        }else if(this.userType == 2){
          this.getMyPointsLogInfo();
        }
        if(data.data.count){
          this.adminSubCount = data.data.count.adminSubCount;
          this.wranDoCount = data.data.count.wranDoCount;
        }
        this.pageType = true;
      }
    },

    //查询用户指纹录取数量
    async fingerprintQuantityFun(){
      let _this=this;
      const {data} = await fingerprintQuantity(uni.getStorageSync('userId'));
      if(data.code == 200){
        _this.Quantity=data.data;

      }
    },
    //查询用户指纹录取数据
    async fingerprintClick(){
      let _this=this;
      const {data} = await fingerprintQueryList(uni.getStorageSync('userId'));
      if(data.code == 200){
        uni.navigateTo({
          url: '/pages/fingerprint',//指纹信息
        });
      }
    },
    //查询用户电子签名
    async querySignature(){
      let _this=this;
      const {data} = await querySignature();
      if(data.code == 200){

        _this.isUpload=data.data.isUpload;
        _this.signatureUrl=data.data.signature;
      }
    },
    //获取个人奖励分/信用分
    async getMyPointsLogInfo(){
      const {data} = await getMyPointsLogInfo();
      if(data.code == 200){
        this.bonusPoints = data.data.bonusPoints;
        this.creditScore = data.data.creditScore;
      }
    },
    //获取报警信息列表
    async getSafeWarnList(){
      let obj = {
        pageNum:1,
        pageSize:1,
        count:0,
        groupStatus:1,
      };
      const {data} = await getSafeWarnList(obj);
      if(data.code == 200){
        if(data.rows[0]){
          this.securityAlertNum = data.rows[0].todayHappenCount;
        }else{
          this.securityAlertNum = 0;
        }
      }
    },
    //获取当前身份人脸验证状态与学生卡上传状态
    async studentinfoFacemy(){
      let obj = {
        studentsId:uni.getStorageSync('userId')
      }
      const {data} = await studentinfoFacemy(obj)
      if(data.code == 200){
        this.certification = data.data;
        this.ifFaceFeature = data.data.ifFaceFeature;
      }
    },
    //退出按钮
    clickOut(){
      let self = this;
      uni.showModal({
        // title: '确认要退出吗?',
        content: '确认要退出吗',
        cancelColor:"#999",
        confirmColor:"#0183FA",
        success: function (res) {
          if (res.confirm) {
            self.logout();
          } else if (res.cancel) {
          }
        }
      });
    },
    //退出登录
    async logout() {
      let self = this;
      const {data} = await logout();
      if(data.code == 200){
        uni.removeStorageSync('token');
        uni.removeStorageSync('userId');
        uni.removeStorageSync('userType');
        uni.redirectTo({
          url: '/pages/login',
        });
      }
    },
    //页面跳转
    goPage(type){
      if(type == 'upStudentCard'){//学生卡上传
        // if(this.certification.auditStatus.code  == 2||this.certification.auditStatus.code  == 3){
        uni.navigateTo({
          url: '/pages_student/mine/upStudentCard',
        });
        // }
      }else if(type == 'pointsRecord'){//积分记录
        uni.navigateTo({
          url: '/pages_student/mine/pointsRecord',
        });
      }else if(type == 'faceImage'){//人脸图像
        uni.navigateTo({
          url: '/pages/faceImage',
        });
      }else if(type == 'laboratory'){
        uni.navigateTo({
          url: '/pages_manage/workbench/laboratory/meLaboratory',//我的实验室
        });
      }else if(type == 'alarm'){
        uni.navigateTo({
          url: '/pages_manage/workbench/securityAlert/securityAlertList',//安全警报
        });
      }else if(type == 'record'){
        uni.navigateTo({
          url: '/pages_manage/workbench/plan/planList',//预案执行记录
        });
      }else if(type == 'signature'){
        uni.navigateTo({
          url: '/pages_manage/workbench/signature/signature?item='+this.signatureUrl,//电子签名
        });
      }


    },
    // 头像上传
    selectImage() {
      let self = this;
      wx.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: function(res) {
          let tempFilePaths = res.tempFilePaths[0];
          self.uploadImg(tempFilePaths);
        }
      });
    },
    async uploadImg(tempFilePaths){
      var self = this;
      uni.showLoading({
        title: '上传中',
        mask: true
      });
      uni.uploadFile({
        url: config.base_url+'/base/file/upload', //仅为示例，非真实的接口地址
        header:{'Authorization':uni.getStorageSync('token')},
        filePath: tempFilePaths,
        name: 'file',
        formData: {
          'user': 'test'
        },
        success: (uploadFileRes) => {
          let res = JSON.parse(uploadFileRes.data);
          if(res.code == 200){
            uni.navigateTo({
              url: '/pages/avatar?src='+config.base_url+res.data.url,//预案执行记录
            });



          }else{
            uni.showToast({
              title: res.msg,
              icon:"none",
              mask:true,
              duration: 2000
            });
          }
        },
        fail: err => {},
        complete: () => {
          uni.hideLoading()
        }
      });
    },
  },
}
</script>

<style lang="stylus" scoped>
#mine{
  height:100%;
  .top-max-big-box{
    /*background:#ffffff;*/
    .user-top-max-box-one{
      overflow hidden
      background url("@/images/img_wd_bg.png") no-repeat
      background-size:100%;
      height:350rpx;
      .top-max-box-one{
        background #fff
        margin:40rpx 40rpx 0;
        z-index:1;
        height:180rpx;
        border-top-right-radius 20rpx
        border-top-left-radius 20rpx
        display flex
        overflow hidden
        .user-img-box{
          height:120rpx;
          width:100rpx;
          margin:30rpx 53rpx 0 22rpx;
          img{
            height:100rpx;
            width:100rpx;
            border-radius:50%;
          }
          view{
            font-size:22rpx;
            color:#666666;
            text-align center
            line-height:22rpx;
            margin-top:10rpx;
          }
        }
        .name-box{
          margin-top:30rpx;
          .name-box-min{
            display flex
            overflow hidden
            margin-bottom:11rpx;
            view:nth-child(1){
              height:48rpx;
              line-height:48rpx;
              font-size: 30rpx;
              color: #333;
            }
            view:nth-child(2){
              height:30rpx;
              line-height:30rpx;
              font-size:20rpx;
              padding:0 20rpx;
              margin:9rpx 0 9rpx 20rpx;
            }
            view-color-one{
              background #FDD255;
            }
            view-color-two{
              background #A2A2A2;
            }
            view-color-tree{
              background #0183FA;
            }
          }
          .name-box-user{
            line-height:41rpx;
            font-size: 22rpx;
            color: #333;
          }
        }

      }
      .num-max-box{
        width:670rpx;
        background #fff
        border-bottom-right-radius 20rpx
        border-bottom-left-radius 20rpx
        height:130rpx;
        margin:0 40rpx;
        display flex
        .min-num-box{
          flex:1;
          .min-num-view{
            margin-top:30rpx;
            height:30rpx;
            line-height:30rpx;
            font-size:22rpx;
            text-align center
          }
          .color-one{
            font-weight:700;
            font-size:26rpx;
            color:#2B99FE;
          }
          .color-two{
            font-weight:700;
            font-size:26rpx;
            color:#FDD255;
          }
          .bottom-min-num-view{
            display flex
            margin-top:20rpx;
            .img-one{
              width:25rpx;
              height:28rpx;
              margin: 0 10rpx 0 58rpx;
            }
            .img-two{
              width:28rpx;
              height:26rpx;
              margin: 0 10rpx 0 59rpx;
            }
            view{
              font-size:22rpx;
            }
          }
        }
      }
      .null-p{
        background #dedede
        height:30rpx;
        width:2rpx;
        margin:50rpx 0 0;
      }
    }
    .top-max-box-two{
      background url("@/images/img_wd_bg.png")
      background-size:100%;
      height:245rpx;
      display flex
      overflow hidden
      .user-img-box{
        height:120rpx;
        width:100rpx;
        margin:50rpx 53rpx 0 22rpx;
        img{
          height:100rpx;
          width:100rpx;
          border-radius:50%;
        }
        view{
          font-size:22rpx;
          color:#fff;
          text-align center
          line-height:22rpx;
          margin-top:10rpx;
        }
      }
      .name-box{
        margin-top:50rpx;
        view:nth-child(1){
          line-height:48rpx;
          margin-bottom:11rpx;
          font-size: 30rpx;
          color: #fff;
        }
        view:nth-child(2){
          line-height:41rpx;
          font-size: 22rpx;
          color: #fff;
        }
      }

    }
    .button-max-big-box{
      background #fff
      padding:0 20rpx;
      margin-top:30rpx;
      .button-max-box{
        height:100rpx;
        display flex
        border-top:1rpx solid #e0e0e0;
        .left-img{
          height:30rpx;
          width:30rpx;
          margin:34rpx 44rpx 0 0;
        }
        view{
          line-height:100rpx;
        }
        view:nth-child(2){
          flex:1;
          color:#333333;
          font-size: 30rpx;
        }
        .right-img{
          height:24rpx;
          width:12rpx;
          margin:39rpx 0 0 0;
        }
        .colorA{
          color:#E45656!important;
        }
        .marginType{
          margin-right:12rpx;
        }
        .view-three-one{
          width:30rpx;
          height:30rpx;
          text-align center
          background #FF4552
          border-radius:50%;
          font-size:20rpx;
          line-height:30rpx;
          color:#fff;
          margin:36rpx 20rpx;
        }
        .view-three-two{
          width:30rpx;
          height:30rpx;
          text-align center
          border-radius:50%;
          font-size:20rpx;
          line-height:30rpx;
          color:#999;
          margin:36rpx 20rpx;

        }
        .view-three-type{
          width:120rpx;
          text-align center;
          color:#CCCCCC;
          font-size: 26rpx;
        }
      }
      .button-max-box:nth-child(1){
        border:none;
      }
    }
  }
  .out-button{
    position absolute
    bottom:140rpx;
    left:25rpx;
    width:700rpx;
    height:100rpx;
    line-height:100rpx;
    border-radius:10rpx;
    text-align center
    background #E0E0E0
    color:#0183FA;
    font-size: 30rpx;
    margin:0 auto;
  }
}
</style>