大屏

Mr.Shi

2023-08-23 c43e9ca8e4baa3e31c1da3c086ec8f1a7d12e438

 minipro_standard/pages/mine/mine.vue

@@ -1,8 +1,31 @@
<template>

   <view>



      <myTabbar :index="2" />

   </view>

<view>

   <div class="box">

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

         <image src="@/static/2@2x.png" mode="widthFix" />

         <div class="box_info_box">

            <text>张三</text>

            <div class="box_info_box_x">

               <text>豆米科技</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">

            <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"><text>退出登录</text></div>

   </div>

   <myTabbar :index="2" />

</view>

</template>



<script>

@@ -13,15 +36,19 @@
      },

      data() {

         return {

            form: {

               account: '',

               password: '',

            },

            logining: false,

            openId: ''

            MENU: [
               { name: '个人信息', url: '/personal/personalInformation', icon: require('@/static/mine_ic_gerenxinxi@2x.png') },
               // { name: '系统通知', url: '', icon: require('@/assets/icon/mine_ic_xitonggonggao@2x.png') },
               { name: '更新手机号', url: '/personal/updatePhone', icon: require('@/static/mine_ic_shoujihao@2x.png') },
               { name: '更新邮箱号', url: '/personal/updateMailbox', icon: require('@/static/mine_ic_youxianghao@2x.png') },
               { name: '扫码绑定账号', url: '', icon: require('@/static/mine_ic_bangding@2x.png') },
               { name: '修改密码', url: '/personal/changePassword', icon: require('@/static/mine_ic_xiugaimima@2x.png') },
            ],

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

         }

      },

      onLoad() {

         uni.hideTabBar()

         // uni.login({

         //    success: data => {

         //       this.wxLogin(data.code)

@@ -32,43 +59,96 @@
         // })

      },

      methods: {

         // loginAction() {

         //    if (!this.form.account || !this.form.password) {

         //       uni.$u.toast('账号或者密码不能为空')

         //    }

         //    this.logining = true

         //    coustomLogin({...this.form, openid: this.openId})

         //       .then(res => {

         //          this.$store.commit('SETTOKEN', res.token)

         //          this.$store.commit('SETUSERINFO', res)

         //          uni.navigateTo({

         //             url:'/pages/projectList/projectList'

         //          })

         //       })

         //       .finally(() => {

         //          this.logining = false

         //       })

         // },

         // wxLogin(code) {

         //    wxEmpower({code})

         //       .then(res => {

         //          this.openId = res.openid

         //          if (res.userInfo) {

         //             this.$store.commit('SETTOKEN', res.userInfo.token)

         //             this.$store.commit('SETUSERINFO', res.userInfo)

         //             uni.navigateTo({

         //                url:'/pages/projectList/projectList'

         //             })

         //          } 
         //       })

         //       .catch(err => {

         //          uni.$u.toast(err)

         //       })

         // }

      }

   }

</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;

      }

   }

</style>