xiangan/pages/user/index.vue

<template>
  <view class="user-page">
    <!-- 顶部背景和用户卡片 -->
    <view class="header-bg">
      <view class="user-header">
        <u-avatar class="avatar" mode="aspectFill" :src="userData ? userData.avatar : null"/>
        <view class="user-info">
          <view class="nickname">{{ userData ? userData.nickname : '请登录' }}</view>
          <view class="auth-row" v-if="userData">
            <button class="auth-btn" v-if="userData.wechatUser.isAudit === 3" size="mini"
                    @click="navTo('/pages/user/auth')">
              去认证
            </button>
            <button class="auth-btn" v-if="userData.wechatUser.isAudit === 0" size="mini">认证审核中</button>
            <button class="auth-btn" v-if="userData.wechatUser.isAudit === 1" size="mini">认证通过</button>
            <button class="auth-btn" v-if="userData.wechatUser.isAudit === 2" size="mini"
                    @click="navTo('/pages/user/auth')">
              认证拒绝
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 积分卡片 -->
    <!--    <view class="score-card">-->
    <!--      <view class="score-left">-->
    <!--        <image class="score-icon" src="https://img.icons8.com/color/48/000000/hexagonal-structure.png"/>-->
    <!--        <text class="score-title">我的积分</text>-->
    <!--      </view>-->
    <!--      <view class="score-value">&#45;&#45;-->
    <!--        <text class="score-unit">分</text>-->
    <!--      </view>-->
    <!--    </view>-->

    <!-- 快捷入口 -->
    <view class="quick-entry">
      <image mode="widthFix" src="https://img.ggsxiangan.com/微信图片_2025-08-24_233250_706.png"
             @click="navTo('/pages/user/my-properties')"></image>
      <image mode="widthFix" src="https://img.ggsxiangan.com/微信图片_20250913111718_10226_7.png"
             @click="navTo('/servicePages/pages/survey')"></image>
      <!--      <image mode="widthFix" src="https://img.ggsxiangan.com/微信图片_2025-08-24_233247_500.png"-->
      <!--             @click="dev"></image>-->
    </view>

    <!-- 功能区 -->
    <view class="func-area">
      <!--      <view class="func-item" @click="navTo('/pages/user/my-properties')">-->
      <!--        <image class="entry-img" src="/static/我的家人.png"/>-->
      <!--        <text class="func-text">添加家人</text>-->
      <!--      </view>-->
      <!--      <view class="func-item">-->
      <!--        <image class="entry-img" src="/static/汽车.png" @click="dev"/>-->
      <!--        <text class="func-text">添加车辆</text>-->
      <!--      </view>-->
      <view class="func-item">
        <image class="entry-img" src="/static/访客.png" @click="jumpWithAuth('/userPages/pages/inviteLog')"/>
        <text class="func-text">访客记录</text>
      </view>
      <view class="func-item" @click="jumpWithAuth('/pages/user/property-bill')">
        <image class="entry-img" src="/static/20-缴费记录.png"/>
        <text class="func-text">我的账单</text>
      </view>
      <button class="share-btn flex-1" open-type="contact">
        <view class="func-item">
          <image class="entry-img" src="https://img.ggsxiangan.com/客服.png"/>
          <text class="func-text">联系客服</text>
        </view>
      </button>
    </view>

    <!-- 列表区 -->
    <!--    <view class="list-area">-->
    <!--      <view class="list-item">-->
    <!--        <u-icon name="https://img.ggsxiangan.com/工单.png"/>-->
    <!--        <text class="list-title">我的工单</text>-->
    <!--        <text class="arrow">›</text>-->
    <!--      </view>-->
    <!--      <view class="list-item">-->
    <!--        <u-icon name="https://img.ggsxiangan.com/index_top_bg.jpg"/>-->
    <!--        <text class="list-title">我的发布</text>-->
    <!--        <text class="arrow">›</text>-->
    <!--      </view>-->
    <!--      <view class="list-item">-->
    <!--        <u-icon name="https://img.ggsxiangan.com/static/收藏.png"/>-->
    <!--        <text class="list-title">我的收藏</text>-->
    <!--        <text class="arrow">›</text>-->
    <!--      </view>-->
    <!--    </view>-->
    <view class="m-20">
      <u-button type="primary" shape="circle" @click="logout" v-if="isLogin">退出登录</u-button>
    </view>
    <Login ref="Login" @done="getUserData" is-hide/>
    <custom-tabbar :current="3"/>
  </view>
</template>

<script>
import Login from "@/components/Login.vue";
import {clearUserInfo, getUserInfo} from "@/util/user";
import {userInfoReq} from "@/api/user";
import CustomTabbar from "@/components/customTabbar.vue";

export default {
  components: {CustomTabbar, Login},
  data() {
    return {
      isLogin: false,
      userInfo: {
        avatar: '',
        mobile: ''
      },
      roleName: '注册用户',
      defaultAvatar: 'https://oss.wsdns.cn/20250627/340ae6bd9c014e75bb1da95e074a027e.png',
      userData: null
    }
  },
  methods: {
    navTo(url) {
      if (!this.isLogin) return this.$refs.Login.open()
      uni.navigateTo({url})
    },
    async getUserData() {
      const res = await userInfoReq()
      if (res) {
        this.userData = res.data
        this.isLogin = true
      }
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            this.isLogin = false
            this.userData = null
            clearUserInfo()
            this.$refs.Login.open()
          }
        }
      })
    },
    jumpWithAuth(url) {
      if (!this.isLogin) return this.$refs.Login.open()
      if (!this.userData || this.userData.wechatUser.isAudit === 3) {
        this.$toast('请先完成认证')
        setTimeout(() => {
          this.$jump('/pages/user/auth')
        }, 1500)
      } else {
        if (this.userData.wechatUser.isAudit === 0)
          this.$toast('认证审核中')
        else this.$jump(url)
      }
    },
    dev() {
      uni.showToast({
        title: '功能维护中',
        icon: 'none'
      })
    }
  },
  onShow() {
    if (getUserInfo().token) this.getUserData()
  },
}
</script>

<style scoped lang="scss">
page {
  background: linear-gradient(to bottom, #e9fff2, #f9fafb);
  min-height: 100vh;
}

.header-bg {
  background: url('https://img.ggsxiangan.com/index_top_bg.jpg');
  padding-bottom: 40rpx;
  position: relative;
}

.user-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 180rpx 40rpx 20rpx;
  position: relative;
}

.avatar {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  background: #fff;
  border: 4rpx solid #e6e6e6;
  margin-right: 24rpx;
}

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nickname {
  font-size: 32rpx;
  color: #fff;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.auth-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.auth-status {
  font-size: 22rpx;
  color: #4facfe;
  background: #fff;
  border-radius: 10rpx;
  padding: 2rpx 18rpx;
  margin-right: 12rpx;
  border: 1rpx solid #4facfe;
}

.auth-btn {
  font-size: 22rpx;
  color: #fff;
  background: #19b6ff;
  border-radius: 10rpx;
  padding: 2rpx 18rpx;
  border: none;
  line-height: 1.8;
  margin: 0 15rpx;
}

.header-icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  right: 30rpx;
  top: 50rpx;
}

.icon-btn {
  width: 48rpx;
  height: 48rpx;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 16rpx;
}

.iconfont {
  font-size: 32rpx;
  color: #7ecb6f;
}

.score-card {
  margin: -40rpx 24rpx 0 24rpx;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36rpx;
  height: 100rpx;
  position: relative;
  z-index: 2;
}

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

.score-icon {
  width: 44rpx;
  height: 44rpx;
  margin-right: 12rpx;
}

.score-title {
  font-size: 30rpx;
  color: #222;
  font-weight: bold;
}

.score-value {
  font-size: 36rpx;
  color: #ff6f00;
  font-weight: bold;
}

.score-unit {
  font-size: 22rpx;
  color: #999;
  margin-left: 2rpx;
}

.quick-entry {
  display: flex;
  justify-content: space-between;
  margin: 32rpx 24rpx 0 24rpx;

  image {
    width: 50%;

  }
}


.entry-img {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 12rpx;
}

.entry-title {
  font-size: 26rpx;
  color: #6a7a8c;
  font-weight: 500;
}

.func-area {
  display: flex;
  justify-content: space-between;
  background: #fff;
  border-radius: 20rpx;
  margin: 32rpx 24rpx 0 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  padding: 32rpx 0;
}

.func-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.func-icon {
  font-size: 44rpx;
  margin-bottom: 10rpx;
}

.func-text {
  font-size: 24rpx;
  color: #333;
}

.list-area {
  background: #fff;
  border-radius: 20rpx;
  margin: 32rpx 24rpx 0 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 32rpx 0 32rpx 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
  font-size: 28rpx;
  color: #333;
  position: relative;

  &:last-child {
    border-bottom: none;
  }
}

.list-icon {
  font-size: 32rpx;
  margin-right: 24rpx;
}

.list-title {
  flex: 1;
}

.arrow {
  font-size: 36rpx;
  color: #c0c0c0;
  margin-right: 32rpx;
}

</style>