mp_exhibitor_miniprog/pages/user/index.vue

<template>
  <page-layout class="user-index">
    <nav-bar title="个人中心" @init="onInitNavbar"></nav-bar>
    <u-scroll-view :tabbar-conflict="true">
      <view class="main-container">
        <view class="user-info" @click="navigateToAdLink('/pages/user/info')">
          <view class="user-avator">
            <image v-if="isLoginState && avatar" :src="avatar"/>
            <van-icon v-else class="icon" name="user"/>
          </view>
          <view class="user-title">
            <view class="user-name">
              <template v-if="isLoginState">{{ nickName || phone }}</template>
              <template v-else>请登录/注册</template>
            </view>
            <view v-if="isLoginState && nickName" class="user-phone">手机号：{{ phone }}</view>
          </view>
          <view class="user-option" @click.stop="navigateToAdLink('/pages/user/setting')">
            <view class="iconfont icon-setting"></view>
            <view>设置</view>
          </view>
        </view>
        <view class="user-grid-menu">
          <view hover-class="active" @click="navigateToAdLink('/pages/user/like')">
            <view class="iconfont icon-heart1"></view>
            <view>点赞</view>
          </view>
          <view hover-class="active" @click="navigateToAdLink('/pages/user/favorites')">
            <view class="iconfont icon-Favourites-Add-Large"></view>
            <view>收藏</view>
          </view>
          <view hover-class="active" @click="navigateToAdLink('/pages/user/vote')">
            <view class="iconfont icon-xiaochengxu-toupiaoicon"></view>
            <view>投票</view>
          </view>
          <view hover-class="active" @click="navigateTo('https://pc.global-eservice.com/h5/?lang=cn&channel=xcx#/')">
            <view class="iconfont icon-bishi"></view>
            <view>参观登记</view>
          </view>
        </view>
        <view class="user-list-item">
          <van-cell-group>
            <van-cell title="隐私政策" is-link @click="navigateToAdLink('/pages/disclaimer/privacy')">
            </van-cell>
            <van-cell title="法律信息" is-link @click="navigateToAdLink('/pages/disclaimer/legalNotice')">
            </van-cell>
          </van-cell-group>
        </view>
        <view class="ad-space" v-if="adInfo && adInfo.ad_file" @tap="navigateToAdLink(adInfo.ad_link)">
          <image :src="adInfo.ad_file" mode="widthFix"/>
        </view>
      </view>
    </u-scroll-view>
  </page-layout>
</template>

<script>
import NavBar from '@/components/layout/nav-bar'
import UScrollView from '@/components/common/u-scroll-view'
import VanCell from '@/wxcomponents/vant/cell/index'
import VanCellGroup from '@/wxcomponents/vant/cell-group/index'
import PageLayout from "@/components/layout/page-layout";
import {getAdInfo} from '@/api'
import store from "@/store";

export default {
  options: {
    styleIsolation: 'shared'
  },
  components: {
    PageLayout,
    NavBar,
    UScrollView,
    VanCell,
    VanCellGroup
  },
  computed: {
    isLoginState() {
      return this.$store.getters.user !== null
    },
    avatar() {
      const user = this.$store.getters.user
      if (user) {
        return user.avatar
      } else {
        return ''
      }
    },
    nickName() {
      const user = this.$store.getters.user
      if (user) {
        return user.nick_name
      } else {
        return ''
      }
    },
    phone() {
      const user = this.$store.getters.user
      if (user) {
        return user.phone
      } else {
        return ''
      }
    }
  },
  data() {
    return {
      adInfo: {
        ad_file: ''
      }
    }
  },
  created() {
    this.getAdData()
  },
  methods: {
    getAdData() {
      getAdInfo({
        number: "UserCenter001"
      }).then(res => {
        this.adInfo = res.data[0]
      })
    },
    navigateToAdLink(href) {
      if (!store.getters.user) {
        this.navigateTo('/pages/user/login?redirect=' + encodeURIComponent(href))
        return false
      } else {
        this.navigateTo(href)
      }
    }
  }
}
</script>

<style lang="scss">
.user-info {
  display: flex;
  align-items: center;
  .user-title {
    flex: 1;
    min-width: 1px;
  }
  .user-option {
    display: flex;
    align-items: center;
    grid-gap: 6px;
    font-size: 28rpx;
    padding-left: 30rpx;
    height: 100rpx;
    padding-right: 20rpx;
    .iconfont {
      font-size: 36rpx;
    }
  }
  .user-avator {
    @include display-flex-center;
    width: 111rpx;
    height: 111rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 23rpx;
    background-color: $buttonPrimaryColor;

    .icon {
      color: #ffffff;
      opacity: 0.67;
      font-size: 70rpx;
    }
  }

  .user-name {
    font-size: 30rpx;
    color: #333333;
    //height: 100rpx;
  }

  .user-phone {
    font-size: $fontSize3;
    color: #7d7d7d;
  }
}

.user-grid-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 192rpx;
  margin-top: 60rpx;
  background-color: #FFFFFF;

  & > view {
    @include display-flex-center;
    flex-direction: column;
    font-size: $fontSize3;
    color: #333333;
    cursor: pointer;

    &.active {
      background-color: rgba(0, 0, 0, 0.05)
    }
  }

  .iconfont {
    margin-bottom: 19rpx;
    font-size: 44rpx;
  }

  .icon-Heart,
  .icon-xiaochengxu-toupiaoicon {
    font-size: 48rpx;
  }
}

.user-list-item {
  margin-top: 23rpx;

  .van-cell {
    --cell-horizontal-padding: 58rpx;
  }
}

.ad-space {
  width: 100%;
  margin-top: 23rpx;
}
</style>