From 9d5b4d650e5b01081d3537c750e7469db4d161e3 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期二, 29 四月 2025 08:53:20 +0800 Subject: [PATCH] 提交 --- pages/tabBar/count/count.vue | 402 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 380 insertions(+), 22 deletions(-) diff --git a/pages/tabBar/count/count.vue b/pages/tabBar/count/count.vue index c7a50a8..a246841 100644 --- a/pages/tabBar/count/count.vue +++ b/pages/tabBar/count/count.vue @@ -7,20 +7,95 @@ <!-- 真正的导航栏内容 --> <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="userInfo"> + <view class="info-l"> + <image :src="avator" mode="aspectFill"></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>{{username}}</span> + + </view> + <view class="info-id" @click="resetPwd()"> + <u-icon name="edit-pen" color="#e6e6e6" size="16"></u-icon><span>修改密码</span> + </view> + </view> + </view> + <view class="card-list"> + <view class="paper-card"> + <view :class="user.useProd == 1?'menu-i':'menu-i-l'" @click="toHazmat"> + <view class="menu-l"> + <u-icon name="warning" color="#0f7ff9" size="32"></u-icon> + <view><span style="color: #ed6464">危化品</span>操作记录</view> + </view> + <u-icon name="arrow-right" color="#ccc" size="20"></u-icon> + </view> + <view class="menu-i" @click="toProduct" v-if="user.useProd == 1"> + <view class="menu-l"> + <u-icon name="bag" color="#0f7ff9" size="32"></u-icon> + <view><span style="color: #5fb734">成品</span>操作记录</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> + <u-modal :show="showModal" title="修改密码" :showConfirmButton="false" :closeOnClickOverlay="true" ref="uModal" :asyncClose="true" @close="closeModal()"> + <view> + <u-form labelPosition="top" labelWidth="120" :model="pwdForm" :rules="rules" ref="uForm"> + <u-form-item + prop="password" + ref="password" + label="新密码" + > + <u-input v-model="pwdForm.password" placeholder="请输入新密码" :password="isPwd1"> + <template slot="suffix"> + <u-icon :name="isPwd1?'eye':'eye-off'" color="#999" size="20" @click="isPwd1 = !isPwd1"></u-icon> + </template> + </u-input> + </u-form-item> + <u-form-item + prop="rePassword" + ref="rePassword" + label="确认密码" + > + <u-input v-model="pwdForm.rePassword" placeholder="请输入新密码" :password="isPwd2"> + <template slot="suffix"> + <u-icon :name="isPwd2?'eye':'eye-off'" color="#999" size="20" @click="isPwd2 = !isPwd2"></u-icon> + </template> + </u-input> + </u-form-item> + </u-form> + <u-button type="primary" style="margin-top: 20px" text="确认" @click="confirmPwd()"></u-button> + </view> + </u-modal> + <u-toast ref="uToast"></u-toast> <tabBar :currentPagePath="page"></tabBar> </view> </template> <script> import tabBar from '../tabBarIndex.vue' + import {loginOut, postHazmatReturn, resetPwd} from "../../../api"; + import VUE_APP_BASE_URL from 'common/constant.js' + import avatorPic from '../../../static/avator.png' export default { components:{ tabBar @@ -28,22 +103,180 @@ data() { return { page: 'pages/tabBar/count/count', - statusBarHeight: '' + statusBarHeight: '', + username: '', + examParams: { + pageNum: 1, + pageSize: 10, + completed: 1 + }, + examList: [], + totalPage: 0, + user: {}, + avator: avatorPic, + showModal: false, + pwdForm:{ + id: null, + password: '', + rePassword: '' + }, + rules: { + password: [ + { + type: 'string', + required: true, + message: '新密码不可为空', + trigger: ['blur', 'change'] + }, + { + validator: (rule, value, callback) => { + return /^(?![a-zA-Z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)(?![a-zA-Z\d]+$)(?![a-zA-Z!@#$%^&\.*]+$)(?![\d!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*\-_]{6,16}$/.test(value) + }, + message: '密码须同时包含字母、数字和特殊字符,长度在6-16之间', + trigger: ['change','blur'], + } + ], + rePassword: [ + { + type: 'string', + required: true, + message: '请再次确认密码', + trigger: ['blur', 'change'], + }, + { + validator: (rule, value, callback) => { + return value == this.pwdForm.password; + }, + message: '两次输入密码不一致', + trigger: ['change','blur'], + } + ] + }, + isPwd1: true, + isPwd2: true } }, + created(){ + uni.hideTabBar() + }, onLoad() { - //获取手机状态栏高度 this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; - uni.hideTabBar(); + this.username = uni.getStorageSync('name') + // uni.hideTabBar(); + // this.getUserInfo() + this.user = uni.getStorageSync('userSet') + // if(this.user.logoPath && this.user.logoPath !== ''){ + // this.avator = VUE_APP_BASE_URL + '/api/' + this.user.logoPath + // }else{ + // this.avator = avatorPic + // } }, + methods: { - goBack() { - console.log("1111") - uni.switchTab({ - url:'/pages/tabBar/firstPage/firstPage' - }); - }, + base64Encode(str) { + return btoa(unescape(encodeURIComponent(str))); + }, + + toHazmat(){ + uni.setStorageSync("prevPage", '/pages/tabBar/count/count'); + uni.navigateTo({ + url: '/pages/tabBar/count/countDetail' + }) + }, + + toProduct(){ + uni.setStorageSync("prevPage", '/pages/tabBar/count/count'); + uni.navigateTo({ + url: '/pages/tabBar/count/productDetail' + }) + }, + + 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('用户点击取消'); + } + } + }) + }, + + resetPwd(){ + const t = this + t.showModal = true + }, + + confirmPwd(){ + const t = this + t.$refs.uForm.validate().then(res => { + let data = {} + data.id = uni.getStorageSync("uid"); + data.password = t.base64Encode(t.pwdForm.password) + resetPwd(data).then((r)=>{ + if(r.code == 200){ + t.$refs.uToast.show({ + type: 'default', + message: '密码已修改,请重新登录', + duration: 1000 + }) + loginOut().then(res=>{ + if(res.code == 200){ + setTimeout(()=>{ + uni.clearStorageSync(); + uni.clearStorage(); + uni.navigateTo({ + url: '/pages/index/index' + }) + },1000) + } + }) + }else{ + t.$refs.uToast.show({ + type: 'default', + message: r.message + }) + } + }).catch((err) => { + uni.showToast({ + title: err, + duration: 2000 + }) + }) + t.closeModal() + }).catch(errors => { + uni.$u.toast('请按要求完善信息') + }) + }, + + closeModal(){ + this.showModal = false + this.pwdForm = { + id: null, + password: '', + rePassword: '' + } + this.isPwd1 = true + this.isPwd2 = true + } } } @@ -56,6 +289,9 @@ width: 100%; height: 100%; } +.u-icon{ + margin: 0 !important; +} .fix{ position: sticky; top: 0; @@ -65,12 +301,13 @@ z-index: 1; } .navBarBox .navBar { - background-color:lightgrey; - height: 45px; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; + 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; @@ -82,7 +319,128 @@ .statusBar{ background-color:lightgrey; } -.content{ - margin-top: 50%; + +/deep/ .u-modal__title{ + padding-top: 20px !important; +} + +/deep/ .u-modal__content{ + display: flex; + flex-direction: column !important; + align-items: center; + text-align: left; + padding-top: 0 !important; + + &>view{ + width: 100%; + } +} + +.m-p-15{ + width: 100%; + padding-top: 50rpx; + background: url("../../../static/my-bg.jpg") no-repeat top; + background-size: 100% auto; + + .userInfo{ + display: flex; + align-items: center; + width: calc(100% - 60px); + margin: 20rpx auto; + + .info-l{ + width: 150rpx; + height: 150rpx; + border-radius: 75rpx; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + margin-right: 20px; + border: 2px solid #fff; + box-sizing: border-box; + image{ + width: calc(100% + 4px) !important; + height: calc(100% + 4px) !important; + } + } + + .info-r{ + color: #fff; + .info-n{ + display: flex; + align-items: center; + font-size: 36rpx; + font-weight: bold; + margin-bottom: 10px; + + span{ + margin-right: 10px; + } + } + + .info-id{ + display: flex; + align-items: center; + + span{ + font-size: 24rpx; + color: #e6e6e6; + } + } + } + } + + .card-list{ + width: 100%; + margin: 20px 0; + + .paper-card{ + width: calc(100% - 40px); + margin: 0 auto 15px; + display: flex; + align-items: center; + justify-content: space-between; + + .menu-i,.menu-i-l{ + width: calc(50% - 5px); + background: rgba(255,255,255,1); + border-radius: 12px; + display: flex; + align-items: center; + box-shadow: 0 3px 8px rgba(150,150,150,.1); + justify-content: space-between; + padding: 18px 15px; + box-sizing: border-box; + cursor: pointer; + + .menu-l{ + display: flex; + align-items: center; + font-size: 22rpx; + color: #999; + view{ + margin-left: 6px; + display: flex; + flex-direction: column; + align-items: flex-start; + span{ + font-size: 32rpx; + font-weight: bold; + color: #333; + } + } + } + } + .menu-i-l{ + width: 100%; + } + } + } +} +.loginBtn{ + width: 100%; + position: fixed; + bottom: 90px; } </style> \ No newline at end of file -- Gitblit v1.9.2