提交

马宇豪

2024-07-24 33413c6be7f338ba1ee92b3218e5c078364675dc

 pages/tabBar/count/count.vue

@@ -8,34 +8,55 @@
         <view style="display: flex; flex-direction: column;">
            <view class="navBar">
<!--               <u-icon style=" margin-left: -25px;" name="arrow-left" color="black" size="17" @click="goBack" />-->
               <view class="barText">我的成绩</view>
               <view class="barText">我的</view>
            </view>
         </view>
      </view>
    <view class="m-p-15">
      <view class="card-list">
          <scroll-view v-if="examList && examList.length>0" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" lower-threshold="150" @scroll="scrollView" style="height:350px">
            <view class="paper-card" v-for="(item,index) in examList" :key="index" @click="toDetail(item,2)">
              <view class="paper-card-l">
                <view class="paper-card-t">{{item.examPaper.name}}</view>
                <view style="color: #999;margin-bottom: 15px;font-size: 12px">{{item.examPaper.code}}</view>
                <view style="display: flex;align-items: center">
                  <u-tag style="margin-right: 20rpx" :text="item.examPaper.categoryName" size="mini"></u-tag>
                  <u-tag :text="item.createName" plain plainFill size="mini"></u-tag>
                </view>
              </view>
              <view class="paper-card-r">
                <view :class="item.passed == 0?'red':'green'">
                  <view>{{item.score}}</view>
                  <view class="divide"></view>
                  <view>{{item.passed == 0?'不合格':'合格'}}</view>
                </view>
              </view>
            </view>
          </scroll-view>
          <u-empty v-else text="暂无已完成的考试记录" mode="list"></u-empty>
      <view class="userInfo">
        <view class="info-l">
          <image src="../../../static/avator.png" mode="widthFix"></image>
          <view class="info-icons">
            <u-icon v-if="user.sex==0" name="man" color="#0f7ff9" bold size="24"></u-icon>
            <u-icon v-else-if="user.sex==1" name="woman" color="#ff69bf" bold size="24"></u-icon>
            <u-icon v-else name="question" color="#ff69bf" bold size="24"></u-icon>
          </view>
        </view>

        <view class="info-r">
          <view class="info-n">
<!--            用户：-->
            <span>{{user.name}}</span>

          </view>
          <view class="info-id">
            ID：<span>{{user.idNo}}</span>
          </view>
        </view>
      </view>
      <view>
      <view class="card-list">
        <view class="paper-card">
          <view class="company-info">
            <view class="company-i">
              <view>电话：</view>
              <span>{{getPhoneNumber(user.phone)}}</span>
            </view>
            <view class="company-i">
              <view>公司：</view>
              <span v-if="user.company && user.company.name">{{user.company.name?user.company.name:'暂无'}}</span>
            </view>
          </view>
          <view class="menu-i" @click="toMyScore">
            <view class="menu-l">
              <u-icon name="info-circle-fill" color="#0f7ff9" size="20"></u-icon>
              <view>我的成绩</view>
            </view>
            <u-icon name="arrow-right" color="#ccc" size="20"></u-icon>
          </view>
        </view>
<!--          <u-empty v-else text="暂无已完成的考试记录" mode="list"></u-empty>-->
      </view>
      <view class="loginBtn">
        <u-button @click="loginOut" type="primary" text="退出登录" style="width: 80%" shape="circle"></u-button>
      </view>
    </view>
@@ -45,7 +66,7 @@

<script>
   import tabBar from '../tabBarIndex.vue'
  import {getExamList, loginOut} from "../../../api";
  import {getExamList, getUserInfo, loginOut} from "../../../api";
  import {getCleanRecord} from "../../../api/wearhouse";
   export default {
      components:{
@@ -55,6 +76,7 @@
         return {
            page: 'pages/tabBar/count/count',
            statusBarHeight: '',
        user: {},
        examParams: {
          pageNum: 1,
          pageSize: 10,
@@ -65,17 +87,33 @@
         }
         
      },
    created(){
      uni.hideTabBar()
    },
      onLoad() {
         this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
         // uni.hideTabBar();
      this.getUserInfo()
      this.getExamList()
      },

      methods: {
         goBack() {
            uni.switchTab({
                url:'/pages/tabBar/firstPage/firstPage'
            });
         },

      getUserInfo(){
        getUserInfo(uni.getStorageSync('uid')).then(res => {
          if(res.code == 200) {
            this.user = res.data
          }else{
            uni.$u.toast(res.message)
          }
        })
      },

      getExamList(){
        getExamList(this.examParams).then(res => {
          if(res.code == 200) {
@@ -98,7 +136,12 @@
          url: `/pages/tabBar/firstPage/exam?bank=` + encodeURIComponent(JSON.stringify(item)) + `&type=` + encodeURIComponent(JSON.stringify(type))
        })
      },

      toMyScore(){
        uni.setStorageSync("prevPage", '/pages/tabBar/count/count');
        uni.navigateTo({
          url: `/pages/tabBar/count/countDetail`
        })
      },
      loginOut(){
        uni.showModal({
          title: '提示',
@@ -143,6 +186,11 @@
      scrollView(e) {
        // console.log(e)
      },
      getPhoneNumber(phone) {
        const firstThree = phone?phone.slice(0, 3):''
        const lastFour = phone?phone.slice(-4):''
        return `${firstThree}****${lastFour}`
      }
      }
   }

@@ -154,6 +202,11 @@
   flex-direction: column; 
   width: 100%; 
   height: 100%;
  background: url("../../../static/my-bg.png") no-repeat top fixed;
  background-size: 100% auto;
}
.u-icon{
  margin: 0 !important;
}
.fix{
   position: sticky;
@@ -182,88 +235,118 @@
.statusBar{
   background-color:lightgrey;
}

.myImg{
  width: 100%;
  height: 100%
}

.m-p-15{
  width: 100%;
  margin-top: 50rpx;

  .card-list{
    width: 100%;
    height: calc(100vh - 220px);
    margin: 20px 0;
  .userInfo{
    display: flex;
    align-items: center;
    justify-content: left;
    width: calc(100% - 60px);
    margin: 0 auto;

    .paper-card{
      width: calc(100% - 30px);
      background: #fff;
      border-radius: 20px;
      padding: 15px;
      margin: 0 auto 15px;
      //position: relative;
      box-sizing: border-box;
      box-shadow: 0 3px 8px rgba(150,150,150,.1);
      display: flex;
      align-items: center;
      justify-content: space-between;

      &:last-of-type{
        margin-bottom: 0;
    .info-l{
      width: 150rpx;
      height: 150rpx;
      border-radius: 50%;
      margin-right: 40rpx;
      position: relative;
      image{
        width: 150rpx;
        height: 150rpx;
        border-radius: 50%;
      }

      //.isPassed{
      //  position: absolute;
      //  right: 15px;
      //  top: 15px;
      //}

      .paper-card-l{
        width: 75%;

        .paper-card-t{
          font-size: 32rpx;
          margin-bottom: 10rpx;
          font-family: "PingFang SC";
          font-weight: 800;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      .info-icons{
        width: 48rpx;
        height: 48rpx;
        border-radius: 90%;
        position: absolute;
        bottom: 10rpx;
        right: 0;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 4px rgba(0,0,0,.1);
      }
    }

      .paper-card-r{
        width: 25%;
        &>view{
          width: 140rpx;
          height: 140rpx;
          border-radius: 50%;
          color: #fff;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 20rpx;
          line-height: 1;
    .info-r{
      color: #fff;
      .info-n{
        display: flex;
        align-items: center;
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 10px;

          view:first-of-type{
            font-size: 44rpx;
            font-weight: 600;
          }

          .divide{
            width: 60%;
            height: 1rpx;
            background: #fff;
            margin: 10rpx 0;
          }
        }

        .green{
          background: #5fb734;
        }
        .red{
          background: #ed6464
        span{
          margin-right: 10px;
        }
      }
    }
  }

  .card-list{
    width: 100%;
    margin: 20px 0;

    .paper-card{
      width: calc(100% - 60px);
      background: #fff;
      border-radius: 20px;
      padding: 15px 15px 20px;
      margin: 0 auto 15px;
      box-sizing: border-box;
      box-shadow: 0 3px 8px rgba(150,150,150,.1);
      .company-info{
        margin-bottom: 15px;
        border-bottom: 1px solid #e6e6e6;
        .company-i{
          display: flex;
          align-items: center;
          font-size: 28rpx;
          color: #999;
          margin-bottom: 15px;
          view{
            margin-left: 4px;
          }
          span{
            color: #333;
          }
          &:first-of-type{
            margin-bottom: 5px;
          }
        }
      }

      .menu-i{
        display: flex;
        align-items: center;
        justify-content: space-between;

        .menu-l{
          display: flex;
          align-items: center;
          font-size: 28rpx;
          view{
            margin-left: 6px;
          }
        }
      }
    }
  }
}
.loginBtn{
  width: 100%;
  position: fixed;
  bottom: 90px;
}
</style>