englishread-front/pages/index/user.vue

<template>
  <view class="user-container">
    <!-- 用户信息区域 -->
    <view class="user-info-section">
      <!-- #ifndef H5 -->
      
      <view class="page-title">我的</view>
      <!-- #endif -->
      <view class="user-info">
        <view class="user-avatar" @click="goLogin">
          <image :src="isLogin ? userInfo.avatar === 'undefined' ?  displayInfo.avatar : userInfo.avatar : displayInfo.avatar" mode="aspectFill"></image>
        </view>
        <view class="user-details" @click="clickInfo">

          <view class="user-name">{{ isLogin ? userInfo.name : displayInfo.name }}</view>
          <view class="user-phone">手机号：{{ isLogin ? userInfo.phone || displayInfo.phone : displayInfo.phone }}</view>
          <!-- <view class="user-desc">{{ displayInfo.description }}</view> -->
        </view>
      </view> 
    </view>

    <!-- 功能菜单列表 -->
    <!-- 第一组菜单 -->
    <!-- 会员中心 -->
    <view class="menu-item special-item" @click="goToMember">
      <view class="menu-left">
        <image src="/static/member-diamond.png" class="menu-icon"></image>
        <text class="menu-title">会员中心</text>
      </view>
      <view class="menu-right">
        <uv-button shape="circle" :customStyle="{
          width: '170rpx',
          height: '70rpx',
          fontSize: '28rpx',
          fontWeight: '500',
          lineHeight: '70rpx',
          letterSpacing: '0%',
          verticalAlign: 'middle',
          backgroundColor: '#06DADC',
          color: '#fff',
        }">查看会员</uv-button>
      </view>
    </view>

    <view class="menu-list">

      <!-- 推广中心 -->
      <view class="menu-item" @click="goToPromotion" v-if="userInfo.isPromote === 'Y'">
        <view class="menu-left">
          <image src="/static/promotion-icon.png" class="menu-icon"></image>
          <text class="menu-title">推广中心</text>
        </view>
        <view class="menu-right">
          <uv-icon name="arrow-right" color="#999" size="16"></uv-icon>
        </view>
      </view>

      <!-- 我的优惠券 -->
      <view class="menu-item" @click="goToCoupons">
        <view class="menu-left">
          <image src="/static/coupon-icon.png" class="menu-icon"></image>
          <text class="menu-title">我的优惠券</text>
        </view>
        <view class="menu-right">
          <uv-icon name="arrow-right" color="#999" size="16"></uv-icon>
        </view>
      </view>

      <!-- 产品介绍 -->
      <view class="menu-item" @click="goToProduct">
        <view class="menu-left">
          <image src="/static/intro-icon.png" class="menu-icon"></image>
          <text class="menu-title">产品介绍</text>
        </view>
        <view class="menu-right">
          <uv-icon name="arrow-right" color="#999" size="16"></uv-icon>
        </view>
      </view>
    </view>

    <!-- 第二组菜单 -->
    <view class="menu-list">
      <!-- 联系我们 -->
      <view class="menu-item" @click="goToContact">
        <view class="menu-left">
          <image src="/static/contact-icon.png" class="menu-icon"></image>
          <text class="menu-title">联系我们</text>
        </view>
        <view class="menu-right">
          <uv-icon name="arrow-right" color="#999" size="16"></uv-icon>
        </view>
      </view>

      <!-- 服务协议与隐私政策 -->
      <view class="menu-item" @click="goToPolicy">
        <view class="menu-left">
          <image src="/static/privacy-icon.png" class="menu-icon"></image>
          <text class="menu-title">服务与隐私</text>
        </view>
        <view class="menu-right">
          <text class="menu-arrow">></text>
        </view>
      </view>

      <view class="menu-item" @click="goToProfile">
        <view class="menu-left">
          <image src="/static/edit-info-icon.png" class="menu-icon"></image>
          <text class="menu-title">修改信息</text>
        </view>
        <view class="menu-right">
          <uv-icon name="arrow-right" color="#999" size="16"></uv-icon>
        </view>
      </view>

      <view class="menu-item" @click="logout" v-if="isLogin">
        <view class="menu-left">
          <image src="/static/logout-icon.png" class="menu-icon"></image>
          <text class="menu-title">退出登录</text>
        </view>
        <view class="menu-right">
          <uv-icon name="arrow-right" color="#999" size="16"></uv-icon>
        </view>
      </view>
    </view>

    <view>
      <uv-popup ref="contactModal" closeIconPos="top-left" closeable round="30rpx" :safeAreaInsetBottom="false">
        <view class="contact-content">
          <view class="title">联系我们</view>
          <view class="contact-item" @click="callPhone">
            <text class="contact-phone">{{ configParamContent('contact_us') }}</text>
            <image src="/static/phone-icon.png" class="contact-icon"></image>
          </view>
        </view>
      </uv-popup>
    </view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      userInfo: {
        avatar: '/static/default-avatar.png',
        name: '请先登录',
        id: 'XXXXX'
      },
      isLogin: uni.getStorageSync('token'),
      // 用户展示信息
      displayInfo: {
        name: '点击登录',
        phone: 'xxxxxxxxx',
        avatar: '/static/default-avatar.png'
      }
    }
  },
  computed: {
    // 检查是否已登录
    
  },
  onShow() {
    this.isLogin = uni.getStorageSync('token')
    // 如果没登陆过 就别登了
    if (uni.getStorageSync('token')) {
      
      this.getUserInfo();
    }
  },
  methods: {
    // 拨打电话
    callPhone() {
      uni.makePhoneCall({
        phoneNumber: this.configParamContent('contact_us'),
      })
    },
    // 跳转登录页面
    goLogin() {
      if (!this.isLogin) {
        uni.navigateTo({
          url: '/subPages/login/login'
        })
      }else {
        uni.navigateTo({
          url: '/subPages/user/profile'
        })
      }
    },

    // 跳转到基本信息页面
    goToBasicInfo() {
      uni.navigateTo({
        url: '/subPages/user/profile' 
      })
    },
    
    // 获取用户信息
    async getUserInfo() {
      const res = await this.$api.login.getUserInfo();
      if (res.code === 200) {
        this.userInfo = res.result;
        // 存储用户信息到store
					this.$store.dispatch('updateUserInfo', this.userInfo)
      }
    },
    
    // 显示隐私政策弹窗
    showPrivacyPolicy() {
      this.$refs.privacyModal.open()
    },
    
    // 跳转到会员页面
    goToMember() {
      uni.switchTab({
        url: '/pages/index/member'
      })
    },
    
    // 跳转到推广中心
    goToPromotion() {
      uni.navigateTo({
        url: '/subPages/user/promote'
      })
    },
    
    // 跳转到我的优惠券
    goToCoupons() {
      uni.navigateTo({
        url: '/subPages/user/discount'
      })
    },
    
    // 跳转到产品介绍
    goToProduct() {
      uni.navigateTo({ url: '/subPages/user/introduce' })
    },
    
    //// 跳转到联系我们
    goToContact() {
      this.$refs.contactModal.open('bottom')
    },
    
    // 跳转到隐私政策页面
    goToPolicy() {
      uni.navigateTo({
        url: '/subPages/user/policy'
      })
    },

    // 跳转到登陆页面
    clickInfo() {
      if (!this.isLogin){
        
        uni.navigateTo({
          url: '/subPages/login/login'
        })
      }else {
        uni.navigateTo({
          url: '/subPages/user/profile'
        })
      }
    },

    // 退出登录
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        confirmColor: '#06DADC',
        success: (res) => {
          if (res.confirm) {
            // 清除本地存储的用户信息
            uni.removeStorageSync('token')
            // 清空store中的用户信息
            this.$store.commit('updateUserInfo', { })

            // 重置用户信息
            this.userInfo = {
              avatar: '/static/default-avatar.png',
              name: '请先登录',
              id: 'XXXXX'
            }
            
            this.isLogin = false;

            // 显示退出成功提示
            uni.showToast({
              title: '退出成功',
              icon: 'success'
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.user-container {
  min-height: 100vh;
  background: #fff;
  
  /* 用户信息区域 */
  .user-info-section {
    background: linear-gradient(180deg, #ABFFFF 0%, #FFFFFF 100%);
    
    height: 300rpx;

    /* #ifdef H5 */
    height: 200rpx;
    /* #endif */
    // display: flex;
    // align-items: center;
    padding: 60rpx 32rpx 0rpx;
    gap: 40rpx;
    
    .user-info {
      display: flex;
      align-items: center;
    }
    
    .page-title {
      text-align: center;
      margin: 0 auto;
      margin-top: 60rpx;
      margin-bottom: 40rpx;
      font-size: 32rpx;
      font-weight: 500;
    }
  }

  .user-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 30rpx;
    border: 2px solid #FFFFFF;
    
    image {
      width: 100%;
      height: 100%;
    }
  }

  .user-details {
    flex: 1;
  }

  .user-name {
    font-size: 36rpx;
    line-height: 44rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }

  .user-phone {
    font-size: 24rpx;
    color: #252545;
    margin-bottom: 8rpx;
  }

  .user-desc {
    font-size: 24rpx;
    color: #252545;
  }

  /* 菜单列表 */
  .menu-list {
    background: #F8F8F8;
    border-radius: 32rpx;
    overflow: hidden;
    margin: 0 32rpx;
    margin-bottom: 32rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
  }

  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40rpx 30rpx;
    border: 2rpx solid #F2F2F2;
    
    &:last-child {
      border-bottom: none;
    }
    
    &.special-item {
      background: linear-gradient(180deg, #DEFFFF 0%, #FBFEFF 22.65%, #F0FBFF 100%);
      border: 1px solid #06DADC12;
      height: 98rpx;
      border-radius: 32rpx;
      border-width: 2rpx;
      padding-top: 12rpx;
      padding-right: 40rpx;
      padding-bottom: 12rpx;
      padding-left: 40rpx;
      gap: 24rpx;
      margin: 0 32rpx;
      margin-bottom: 32rpx;
      .menu-icon{
        width: 60rpx;
        height: 60rpx;
      }

      .menu-title{
        font-size: 36rpx;
        font-weight: 600;
      }
    }
  }

  .menu-left {
    display: flex;
    align-items: center;
  }

  .menu-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 20rpx;
  }

  .menu-title {
    font-size: 32rpx;
    color: #333;
  }

  .menu-right {
    display: flex;
    align-items: center;
  }

  /* 联系我们弹窗样式 */
  .contact-content {
    // padding: 40rpx 0;
    .title{
      height: 90rpx;
      text-align: center;
      line-height: 90rpx;
      font-size: 34rpx;
      font-weight: 500;
      border-bottom: 2rpx solid #EEEEEE
    }
    // text-align: center;
  }

  .contact-item {
    // background: red;
    height: 240rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20rpx;
  }

  .contact-icon {
    width: 72rpx;
    height: 72rpx;
  }

  .contact-phone {
    font-size: 36rpx;
    color: #181818;

  }
}
</style>