onecric_h5/pages/more/index.vue

<template>
  <div>
    <div class="header">
      <div class="top">
        <img class="logo" src="/static/logo_big.png" alt="">
        <u--image
          class="border"
          :showLoading="true"
          :src="info.avatar || '/static/image/match/teams_avatar_ico@2x.png'"
          @click="go('/pages/Match/member/usermanger', true)"
          width="24px"
          height="24px"
          shape="circle"
        ></u--image>
      </div>
      <div class="title-box">
        <!-- More -->
        {{ $t('more.lab') }}
      </div>
    </div>
    <div class="user-box" @click="go('/pages/Match/member/infomation')">
      <u--image
        :showLoading="true"
        class="u-skeleton-circle"
        :src="info.avatar || '/static/image/match/teams_avatar_ico@2x.png'"
        width="60px"
        height="60px"
        shape="circle"
      ></u--image>
      <div>
        <div class="name">{{ isLogin == 1 ? info.user_nickname : $t('login.login') }}</div>
        <div class="email" v-if="isLogin == 1 && info.mobile">{{ info.mobile }}</div>
      </div>
    </div>
    <div class="list">
      <div class="item" @click="toLive">
        <div class="flex">
          <img class="icon" src="/static/image/more/icon1.png" alt="">
          <!-- Live Score -->
        {{ $t('more.lab1') }}
        </div>
        <u-icon name="arrow-right" color="#242424" size="16px" bold></u-icon>
      </div>
      <div class="item" @click="$toUrl('/pages/News/news')">
        <div class="flex">
          <img class="icon" src="/static/image/more/icon2.png" alt="">
          <!-- News -->
        {{ $t('more.lab2') }}
        </div>
        <u-icon name="arrow-right" color="#242424" size="16px" bold></u-icon>
      </div>
      <div class="item" @click="go('/pages/Match/member/author')">
        <div class="flex">
          <img class="icon" src="/static/image/more/icon2.png" alt="">
          <!-- My Friend -->
        {{ $t('more.lab3') }}
        </div>
        <u-icon name="arrow-right" color="#242424" size="16px" bold></u-icon>
      </div>
      <div class="item" @click="go('/pages/Match/setting/setting')">
        <div class="flex">
          <img class="icon" src="/static/image/more/icon2.png" alt="">
          <!-- Setting -->
        {{ $t('more.lab4') }}
        </div>
        <u-icon name="arrow-right" color="#242424" size="16px" bold></u-icon>
      </div>
      <div class="item" @click="$toUrl('/pages/Match/setting/language')">
        <div class="flex">
          <img class="icon" src="/static/image/more/icon2.png" alt="">
          <!-- Language -->
        {{ $t('more.lab6') }}
        </div>
        <u-icon name="arrow-right" color="#242424" size="16px" bold></u-icon>
      </div>
      <!-- <div class="item" @click="$toUrl('/pages/News/news')">
        <div class="flex">
          <img class="icon" src="/static/image/more/icon2.png" alt="">
          Others
        </div>
        <u-icon name="arrow-right" color="#242424" size="16px" bold></u-icon>
      </div> -->
    </div>
    <div class="btn-box" v-if="isLogin == 1">
      <div class="btn" @click="logOut">
        <!-- Log Out -->
        {{ $t('more.lab5') }}
      </div>
    </div>
  </div>
</template>
<script>
import { setTabBar } from '@/utils/util'
export default {
  data () {
    return {
      
    }
  },
  computed: {
    info() {
      return this.$store.state.info;
    },
    isLogin() {
      return this.$store.state.isLogin;
    },
  },
  created() {
    this.setBar()
  },
  activated() {
    this.setBar()
  },
  methods: {
    go(url) {
      if (this.isLogin == 2) {
        this.$toUrl('/pages/login/login')
        return
      };
      this.$toUrl(url)
    },
    logOut() {
      this.$common.del("information");
      this.$common.del("imTouristAccount");
      this.$store.state.info = {};
      this.$store.state.isLogin = 2;
    },
    toLive() {
      uni.switchTab({
        url: '/pages/Live/Live'
      })
    },
    setBar() {
      setTabBar(this)
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  position: sticky;
  top: 0;
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8rpx 16px 16rpx;
  background-color: #10044A;
  .logo {
    height: 24px;
  }
  .border {
    border: 1px solid #CC2900;
    border-radius: 50%;
  }
}
.title-box {
  height: 40px;
  background-color: #262E4A;
  padding: 0 16px;
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 500;
  font-size: 16px;
}
.user-box {
  margin-top: 26px;
  margin-bottom: 52px;
  background-color: #F9F9F9;
  padding: 28px 10px 28px 33px;
  display: flex;
  align-items: center;
  .name {
    margin-left: 19px;
    font-weight: 500;
    font-size: 16px;
    color: #242424;
  }
  .email {
    font-weight: 500;
    font-size: 14px;
    color: #7E7C7C;
    margin-top: 12px;
    margin-left: 19px;
  }
  .u-skeleton-circle {
    border: 1px solid #CC2900;
    border-radius: 50%;
  }
}
.list {
  .item {
    height: 48px;
    background-color: #F9F9F9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 15px;
    padding-right: 18px;
    font-weight: 500;
    font-size: 16px;
    color: #242424;
    .icon {
      width: 18px;
      margin-right: 9px;
    }
    &+.item {
      margin-top: 6px;
    }
  }
}
.btn-box {
  padding: 0 16px calc(var(--window-bottom) + 10px);
  margin-top: 75rpx;
  .btn {
    cursor: pointer;
    background: linear-gradient(94.25deg, #FF3300 -3.08%, #D22A00 100%);
    border-radius: 4px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 16px;
    color: #fff;
  }
}
</style>