From f591c27b57e2418c9495bc02ae8cfff84d35bc18 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期二, 16 七月 2024 16:27:56 +0800 Subject: [PATCH] init --- pages/tabBar/count/count.vue | 240 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 225 insertions(+), 15 deletions(-) diff --git a/pages/tabBar/count/count.vue b/pages/tabBar/count/count.vue index acad9d0..366f6d9 100644 --- a/pages/tabBar/count/count.vue +++ b/pages/tabBar/count/count.vue @@ -1,21 +1,52 @@ <template> - <view> + <view class="box"> <!-- 自定义导航栏 --> <view class="navBarBox fix"> <!-- 状态栏占位 --> <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view> <!-- 真正的导航栏内容 --> - <view class="navBar"> - <view class="barText"></view> + <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> </view> </view> - <text>信息统计模块待呈现</text> + <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 @@ -23,27 +54,106 @@ 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() { + 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) + }, } } </script> -<style> -.navBarBox .navBar { - background-color:lightgrey; - height: 15px; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; +<style lang='scss' scoped> +.box { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; } .fix{ position: sticky; @@ -53,7 +163,107 @@ width: 100%; z-index: 1; } +.navBarBox .navBar { + background-color:#fff; + height: 50px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + box-shadow: 4px 4px 12px rgba(150,150,150,.05); +} +.barText{ + text-align: center; + width: 85%; + font-size: 16px; + /* text-align: center; */ + font-weight: 600; +} .statusBar{ background-color:lightgrey; } +.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> \ No newline at end of file -- Gitblit v1.9.2