From 893ff90c6e21fa3a5241a8ae9b33836037cd5912 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期四, 29 八月 2024 15:19:17 +0800 Subject: [PATCH] 提交 --- pages/tabBar/count/count.vue | 293 +++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 278 insertions(+), 15 deletions(-) diff --git a/pages/tabBar/count/count.vue b/pages/tabBar/count/count.vue index acad9d0..731455e 100644 --- a/pages/tabBar/count/count.vue +++ b/pages/tabBar/count/count.vue @@ -1,21 +1,73 @@ <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="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 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> <tabBar :currentPagePath="page"></tabBar> </view> </template> <script> import tabBar from '../tabBarIndex.vue' + import {getExamList, getUserInfo, loginOut} from "../../../api"; + import {getCleanRecord} from "../../../api/wearhouse"; export default { components:{ tabBar @@ -23,27 +75,106 @@ data() { return { page: 'pages/tabBar/count/count', - statusBarHeight: '' + statusBarHeight: '', + user: {}, + examParams: { + pageNum: 1, + pageSize: 10, + completed: 1 + }, + examList: [], + totalPage: 0 } }, + created(){ + uni.hideTabBar() + }, onLoad() { - //获取手机状态栏高度 this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; - uni.hideTabBar(); + // uni.hideTabBar(); + this.getUserInfo() + }, + + 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) + } + }) + }, + + 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)) + }) + }, + toMyScore(){ + uni.setStorageSync("prevPage", '/pages/tabBar/count/count'); + uni.navigateTo({ + url: '/pages/tabBar/count/countDetail' + }) + }, + + loginOut(){ + uni.showModal({ + title: '提示', + content: '是否确认退出该账号?', + success: async function (res) { + if (res.confirm) { + loginOut().then(res=>{ + if(res.code == 200){ + uni.showToast({ + title: '账户已退出', + duration: 800 + }) + setTimeout(()=>{ + uni.clearStorageSync(); + uni.clearStorage(); + uni.navigateTo({ + url: '/pages/index/index' + }) + },800) + } + }) + } else if (res.cancel) { + console.log('用户点击取消'); + } + } + }) + }, + + getPhoneNumber(phone) { + const firstThree = phone?phone.slice(0, 3):'' + const lastFour = phone?phone.slice(-4):'' + return `${firstThree}****${lastFour}` + } } } </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%; + background: url("../../../static/my-bg.png") no-repeat top fixed; + background-size: 100% auto; +} +.u-icon{ + margin: 0 !important; } .fix{ position: sticky; @@ -53,7 +184,139 @@ 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; } + +.myImg{ + width: 100%; + height: 100% +} + +.m-p-15{ + width: 100%; + margin-top: 50rpx; + + .userInfo{ + display: flex; + align-items: center; + justify-content: left; + width: calc(100% - 60px); + margin: 0 auto; + + .info-l{ + width: 150rpx; + height: 150rpx; + border-radius: 50%; + margin-right: 40rpx; + position: relative; + image{ + width: 150rpx; + height: 150rpx; + border-radius: 50%; + } + .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); + } + } + + .info-r{ + color: #fff; + .info-n{ + display: flex; + align-items: center; + font-size: 36rpx; + font-weight: bold; + margin-bottom: 10px; + + 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 5px; + margin: 0 auto 15px; + box-sizing: border-box; + box-shadow: 0 3px 8px rgba(150,150,150,.1); + .company-info{ + 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; + padding: 15px 0; + box-sizing: border-box; + cursor: pointer; + + .menu-l{ + display: flex; + align-items: center; + font-size: 28rpx; + view{ + margin-left: 6px; + } + } + } + } + } +} +.loginBtn{ + width: 100%; + position: fixed; + bottom: 90px; +} </style> \ No newline at end of file -- Gitblit v1.9.2