bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/pages/mine/mine.vue

@@ -1,49 +1,49 @@
<template>

<view>

   <div class="box">

      <div class="box_info" :style="{background: 'url(' + img + ')'}">

         <image :src="userInfo.avatar ? userInfo.avatar : avatar" mode="widthFix" />

         <div class="box_info_box">

            <text>{{userInfo.realname}}</text>

            <div class="box_info_box_x" @click="switchOrganization">

               <text>{{userInfo.curComDepartment ? userInfo.curComDepartment.name : ''}}</text>

               <image src="@/static/mine_ic_change@2x.png" alt="" />

            </div>

         </div>

      </div>

      <div class="box_function">

         <div class="box_function_item" v-for="(item, index) in MENU" :key="index" @click="jump(item.url)">

            <div class="box_function_item_left">

               <image :src="item.icon" alt="" />

               <text>{{item.name}}</text>

            </div>

            <div class="box_function_item_right">

               <van-icon name="arrow" size="20" color="#CCCCCC" />

            </div>

         </div>

      </div>

      <div class="box_out" @click="loginOut"><text>退出登录</text></div>

   </div>

   <!-- 部门选择器 -->

   <u-picker :show="show" :columns="columns" @confirm="onConfirm" @cancel="show = false"></u-picker>

   <myTabbar :index="2" />

</view>

</template>



<script>

   import { changeCom, getDepartmentListByConditon } from '@/util/api/PersonalAPI'

   import myTabbar from "@/components/myTabber.vue"

   import { wxLoginOut } from '@/util/api'

   import { mapState } from 'vuex'

   export default {

      components: {

         myTabbar

      },

      computed: mapState([

         'userInfo'

      ]),

      data() {

         return {

<template>
<view>
   <div class="box">
      <div class="box_info" :style="{background: 'url(' + img + ')'}">
         <image :src="avatar" mode="widthFix" />
         <div class="box_info_box">
            <text>{{userInfo.realname}}</text>
            <div class="box_info_box_x" @click="switchOrganization">
               <text>{{userInfo.curComDepartment ? userInfo.curComDepartment.name : ''}}</text>
               <image src="@/static/mine_ic_change@2x.png" alt="" />
            </div>
         </div>
      </div>
      <div class="box_function">
         <div class="box_function_item" v-for="(item, index) in MENU" :key="index" @click="jump(item.url)">
            <div class="box_function_item_left">
               <image :src="item.icon" alt="" />
               <text>{{item.name}}</text>
            </div>
            <div class="box_function_item_right">
               <van-icon name="arrow" size="20" color="#CCCCCC" />
            </div>
         </div>
      </div>
      <div class="box_out" @click="loginOut"><text>退出登录</text></div>
   </div>
   <!-- 部门选择器 -->
   <u-picker :show="show" :columns="columns" @confirm="onConfirm" @cancel="show = false"></u-picker>
   <myTabbar :index="2" />
</view>
</template>

<script>
   import { changeCom, getDepartmentListByConditon } from '@/util/api/PersonalAPI'
   import myTabbar from "@/components/myTabber.vue"
   import { wxLoginOut } from '@/util/api'
   import { mapState } from 'vuex'
   export default {
      components: {
         myTabbar
      },
      computed: mapState([
         'userInfo'
      ]),
      data() {
         return {
            MENU: [
               { name: '个人信息', url: '/pages/personal/personal', icon: require('@/static/mine_ic_gerenxinxi@2x.png') },
               // { name: '系统通知', url: '', icon: require('@/assets/icon/mine_ic_xitonggonggao@2x.png') },
@@ -51,154 +51,154 @@
               { name: '更新邮箱号', url: '/pages/updateMailbox/updateMailbox', icon: require('@/static/mine_ic_youxianghao@2x.png') },
               { name: '扫码绑定账号', url: '', icon: require('@/static/mine_ic_bangding@2x.png') },
               { name: '修改密码', url: '/pages/changePassword/changePassword', icon: require('@/static/mine_ic_xiugaimima@2x.png') },
            ],

            img: require('@/static/mine_bg@2x.png'),

            avatar: require('@/static/2@2x.png'),

            show: false,

            columns: []

         }

      },

      onLoad() {

         uni.hideTabBar()

      },

      methods: {

         // 退出登录

         loginOut() {

            wxLoginOut({

               companyUserId: this.userInfo.companyUser.id

            }).then(res => {

               if (res.code === 200) {

                  this.$store.commit('clearCache')

                  uni.reLaunch({

                     url: '/pages/login/login'

                  });

               }

            })

         },

         // 确认切换组织

         onConfirm(e) {

            changeCom(e.value[0].id).then(res => {

               if (res.code === 200) {

                  this.show = false

                  uni.showToast({ title: '更新组织成功', icon: 'success', duration: 2000 });

                  this.$store.dispatch('getUserInfos')

               }

            })

         },

         // 获取组织

         switchOrganization() {

            getDepartmentListByConditon({

               type: 0

            }).then(res => {

               if (res.code === 200) {

                  this.columns = []

                  let arr = []

                  res.data.forEach((item) => {

                     let obj = {

                        text: item.name, id: item.id

                     }

                     arr.push(obj)

                  })

                  this.columns.push(arr)

                  this.show = true

               }

            })

         },

         // 跳转页面

         jump(url) {

            if (!url) return

            uni.navigateTo({ url })

         }

      }

   }

</script>



<style lang="scss" scoped>

   .box {

      width: 100%;

      padding: 30rpx;

      box-sizing: border-box;

      .box_info {

         padding: 0 30rpx;

         height: 168rpx;

         border-radius: 16rpx;

         display: flex;

         align-items: center;

         background-repeat: no-repeat;

         background-size: cover;

         image {

            width: 88rpx;

            height: 88rpx;

         }

         .box_info_box {

            height: 88rpx;

            display: flex;

            margin-left: 30rpx;

            flex-direction: column;

            justify-content: space-between;

            .box_info_box_x {

               display: flex;

               align-items: center;

               text {

                  font-size: 26rpx;

                  font-weight: 400;

                  color: rgba(255, 255, 255, 0.8);

               }

               image {

                  width: 26rpx;

                  height: 26rpx;

                  margin-left: 10rpx;

               }

            }

            text {

               font-size: 34rpx;

               font-weight: 500;

               color: #FFFFFF;

            }

         }

      }

      .box_function {

         margin-top: 30rpx;

         .box_function_item {

            display: flex;

            align-items: center;

            justify-content: space-between;

            height: 98rpx;

            border-bottom: 1rpx solid #E5E5E5;

            /*&:last-child {*/

            /*    border: none;*/

            /*}*/

            .box_function_item_left {

               display: flex;

               align-items: center;

               image {

                  width: 36rpx;

                  height: 36rpx;

                  margin-right: 24rpx;

               }

               text {

                  font-size: 30rpx;

                  font-weight: 400;

                  color: #222222;

               }

            }

         }

      }

      .box_out {

         position: fixed;

         bottom: 200rpx;

         left: 50%;

         transform: translate(-50%, 0);

         width: 350rpx;

         height: 88rpx;

         background: #F7F7F7;

         border-radius: 8rpx;

         display: flex;

         align-items: center;

         justify-content: center;

         font-size: 30rpx;

         font-weight: 400;

         color: #333333;

      }

   }

            ],
            img: require('@/static/mine_bg@2x.png'),
            avatar: require('@/static/2@2x.png'),
            show: false,
            columns: []
         }
      },
      onLoad() {
         uni.hideTabBar()
      },
      methods: {
         // 退出登录
         loginOut() {
            wxLoginOut({
               companyUserId: this.userInfo.companyUser.id
            }).then(res => {
               if (res.code === 200) {
                  this.$store.commit('clearCache')
                  uni.reLaunch({
                     url: '/pages/login/login'
                  });
               }
            })
         },
         // 确认切换组织
         onConfirm(e) {
            changeCom(e.value[0].id).then(res => {
               if (res.code === 200) {
                  this.show = false
                  uni.showToast({ title: '更新组织成功', icon: 'success', duration: 2000 });
                  this.$store.dispatch('getUserInfos')
               }
            })
         },
         // 获取组织
         switchOrganization() {
            getDepartmentListByConditon({
               type: 0
            }).then(res => {
               if (res.code === 200) {
                  this.columns = []
                  let arr = []
                  res.data.forEach((item) => {
                     let obj = {
                        text: item.name, id: item.id
                     }
                     arr.push(obj)
                  })
                  this.columns.push(arr)
                  this.show = true
               }
            })
         },
         // 跳转页面
         jump(url) {
            if (!url) return
            uni.navigateTo({ url })
         }
      }
   }
</script>

<style lang="scss" scoped>
   .box {
      width: 100%;
      padding: 30rpx;
      box-sizing: border-box;
      .box_info {
         padding: 0 30rpx;
         height: 168rpx;
         border-radius: 16rpx;
         display: flex;
         align-items: center;
         background-repeat: no-repeat;
         background-size: cover;
         image {
            width: 88rpx;
            height: 88rpx;
         }
         .box_info_box {
            height: 88rpx;
            display: flex;
            margin-left: 30rpx;
            flex-direction: column;
            justify-content: space-between;
            .box_info_box_x {
               display: flex;
               align-items: center;
               text {
                  font-size: 26rpx;
                  font-weight: 400;
                  color: rgba(255, 255, 255, 0.8);
               }
               image {
                  width: 26rpx;
                  height: 26rpx;
                  margin-left: 10rpx;
               }
            }
            text {
               font-size: 34rpx;
               font-weight: 500;
               color: #FFFFFF;
            }
         }
      }
      .box_function {
         margin-top: 30rpx;
         .box_function_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 98rpx;
            border-bottom: 1rpx solid #E5E5E5;
            /*&:last-child {*/
            /*    border: none;*/
            /*}*/
            .box_function_item_left {
               display: flex;
               align-items: center;
               image {
                  width: 36rpx;
                  height: 36rpx;
                  margin-right: 24rpx;
               }
               text {
                  font-size: 30rpx;
                  font-weight: 400;
                  color: #222222;
               }
            }
         }
      }
      .box_out {
         position: fixed;
         bottom: 200rpx;
         left: 50%;
         transform: translate(-50%, 0);
         width: 350rpx;
         height: 88rpx;
         background: #F7F7F7;
         border-radius: 44rpx;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 30rpx;
         font-weight: 400;
         color: #333333;
      }
   }
</style>