提交

马宇豪

2025-04-29 9d5b4d650e5b01081d3537c750e7469db4d161e3

 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>