init

马宇豪

2024-07-16 f591c27b57e2418c9495bc02ae8cfff84d35bc18

 pages/tabBar/count/count.vue

@@ -7,20 +7,46 @@
         <!-- 真正的导航栏内容 -->
         <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>
<!--               <u-icon style=" margin-left: -25px;" name="arrow-left" color="black" size="17" @click="goBack" />-->
               <view class="barText">我的成绩</view>
            </view>
         </view>
      </view>
      <view class="content">
         <u-empty text="数据累积中，统计分析模块待呈现……" mode="data"></u-empty>
      </view>
    <view class="m-p-15">
      <view class="card-list">
          <scroll-view 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>
      </view>
      <view>
        <u-button @click="loginOut" type="primary" text="退出登录" style="width: 80%" shape="circle"></u-button>
      </view>
    </view>
      <tabBar :currentPagePath="page"></tabBar>
   </view>
</template>

<script>
   import tabBar from '../tabBarIndex.vue'
  import {getExamList, loginOut} from "../../../api";
  import {getCleanRecord} from "../../../api/wearhouse";
   export default {
      components:{
         tabBar
@@ -28,22 +54,95 @@
      data() {
         return {
            page: 'pages/tabBar/count/count',
            statusBarHeight: ''
            statusBarHeight: '',
        examParams: {
          pageNum: 1,
          pageSize: 10,
          completed: 1
        },
        examList: [],
        totalPage: 0
         }
         
      },
      onLoad() {
         //获取手机状态栏高度
         this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
         uni.hideTabBar();
         // uni.hideTabBar();
      this.getExamList()
      },
      methods: {
         goBack() {
            console.log("1111")
            uni.switchTab({
                url:'/pages/tabBar/firstPage/firstPage'
            });
         },
      getExamList(){
        getExamList(this.examParams).then(res => {
          if(res.code == 200) {
            let list = res.data.list?res.data.list: [];
            if (res.pageNum != 1) {
              this.examList = this.examList.concat(list)
            } else {
              this.examList = res.data.list
            }
            this.totalPage = res.data.totalPage
          }else{
            uni.$u.toast(res.message)
          }
        })
      },

      toDetail(item,type){
        uni.setStorageSync("prevPage", '/pages/tabBar/count/count');
        uni.navigateTo({
          url: `/pages/tabBar/firstPage/exam?bank=` + encodeURIComponent(JSON.stringify(item)) + `&type=` + encodeURIComponent(JSON.stringify(type))
        })
      },

      loginOut(){
        uni.showModal({
          title: '提示',
          content: '是否确认退出该账号？',
          success: async function (res) {
            if (res.confirm) {
              loginOut().then(res=>{
                if(res.code == 200){
                  uni.showToast({
                    title: '账户已退出',
                    duration: 1000
                  })
                  setTimeout(()=>{
                    uni.clearStorageSync();
                    uni.clearStorage();
                    uni.navigateTo({
                      url: '/pages/index/index'
                    })
                  },1000)
                }
              })
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        })
      },

      upper(e) {
        // console.log(e)
      },
      lower(e) {
        //并且让页码+1,调用获取数据的方法获取第二页数据
        this.examParams.pageNum++
        //此处调用自己获取数据列表的方法
        if (this.examParams.pageNum > this.totalPage){
          uni.$u.toast('已加载全部数据')
          return
        }
        this.getExamList()
      },
      scrollView(e) {
        // console.log(e)
      },
      }
   }

@@ -71,7 +170,7 @@
     flex-direction: row;
     justify-content: center;
     align-items: center;
     box-shadow: 0 3px 12px rgba(0,0,0,0.05);
    box-shadow: 4px 4px 12px rgba(150,150,150,.05);
}
.barText{
   text-align: center;
@@ -83,7 +182,88 @@
.statusBar{
   background-color:lightgrey;
}
.content{
   margin-top: 50%;
.m-p-15{
  width: 100%;

  .card-list{
    width: 100%;
    height: calc(100vh - 220px);
    margin: 20px 0;

    .paper-card{
      width: calc(100% - 30px);
      background: #fff;
      border-radius: 16px;
      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;
      }

      //.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;
        }
      }

      .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;

          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
        }
      }
    }
  }
}
</style>