v3-lab-xcx/pages/mine/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/basicsModules/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.avatarUrl">
            <img v-else src="@/images/basicsModules/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('none')">
            <view class="min-num-view color-one">{{creditScore}}</view>
            <view class="bottom-min-num-view">
              <img class="img-one" src="@/images/basicsModules/icon_wd_xyf.png">
              <view>信用分</view>
            </view>
          </view>
          <view class="null-p"></view>
          <view class="min-num-box" @click="goUserPage('none')">
            <view class="min-num-view color-two">{{bonusPoints}}</view>
            <view class="bottom-min-num-view">
              <img class="img-two" src="@/images/basicsModules/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/basicsModules/icon_wd_dh.png">
              <view>兑换礼品</view>
            </view>
          </view>
        </view>
      </view>

    </view>

    <mineConfigurationSlot v-for="(item,index) in mineConfigData" :key="index" :mineConfig="item">
    </mineConfigurationSlot>
    <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,
  systemAppletLayoutSelect
} from '@/api/basicsModules/index.js'
import {
  tabBar
} from '@/component/tabBar.vue'

import {
  mineConfigurationSlot
} from '@/component/mineConfigurationSlot'
import {
  getMineConfig
} from '@/utils/mineConfig'

export default {
  components: {
    tabBar,
    mineConfigurationSlot,
  },
  data() {
    return {
      mineConfigData: [],
      //页面状态
      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() {

    this.systemAppletLayoutSelect();
    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: {
    //获取菜单配置
    async systemAppletLayoutSelect() {
      const {
        data
      } = await systemAppletLayoutSelect({
        module: 'mine'
      })
      if (data.code == 200) {
        let list = JSON.parse(JSON.stringify(data.data))
        for (let i = 0; i < list.length; i++) {
          list[i].layout = JSON.parse(list[i].layout);
        }
        this.$set(this, 'mineConfigData', getMineConfig(list));
        console.log('mineConfigData', this.mineConfigData)
      }
    },
    //学生端-信用分/奖励分/扫一扫按钮
    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))
            });
          }
        });
      } else if (type == 'none') {
        uni.showToast({
          title: '暂未开放',
          icon: "none",
          mask: true,
          duration: 2000
        });
      }
    },
    //获取个人信息
    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;
        console.log(config.base_url)
        console.log(this.userData.avatarUrl)
        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() {
      uni.clearStorageSync();
      uni.redirectTo({
        url: '/pages/login/login',
      });
      // 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 == '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/earlyWarningManage/earlyWarningList', //安全警报
        });
      } 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/basicsModules/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/basicsModules/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>