123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230 |
- <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>
|