talk_appAmin/pages/mine/index.vue

<template>
  <view>
    <view class="cards">
      <image class="bg" :src="bjt"></image>
      <view>
        <view v-if="!name">
          <view class="userInfoNot" @click="handleToLogin">
            <up-avatar  size="148rpx"></up-avatar>
            <up-text text="请登录" size="44rpx" color="#FFFFFF" bold="400" margin="24rpx"></up-text>
          </view>
        </view>
        <view v-else>
          <view class="userInfoNot">
            <up-avatar :src="avatar" size="148rpx"></up-avatar>
            <up-text :text="nickName" size="44rpx" color="#FFFFFF" bold="400" margin="24rpx"></up-text>
            <up-text :text="sex" size="44rpx" color="#FFFFFF" bold="400" margin="24rpx"></up-text>
          </view>
        </view>
        <view class="smallUserInfo">
          <view class="small1">
            <up-text :text="infoAssist" size="36rpx" color="#FFFFFF" bold="400" align="center"></up-text>
            <up-text text="点赞" size="28rpx" color="#FFFFFF" align="center"></up-text>
          </view>
          <view class="small1">
            <up-text :text="followCount" size="36rpx" color="#FFFFFF" bold="400" align="center"></up-text>
            <up-text text="关注" size="28rpx" color="#FFFFFF" align="center"></up-text>
          </view>
          <view class="small1">
            <up-text :text="fanCount" size="36rpx" color="#FFFFFF" bold="400" align="center"></up-text>
            <up-text text="粉丝" size="28rpx" color="#FFFFFF" align="center"></up-text>
          </view>
        </view>
      </view>
    </view>
    <view class="cardz1">
      <text class="text1">我的话题</text>
      <view>
        <up-grid :border="false" col="5" @click="grid1Click1">
          <up-grid-item v-for="(listItem, listIndex) in list1" :key="listIndex"
            customStyle="padding-top: 24rpx; ">
            <image :src="listItem.icon" style="width: 66rpx; height: 66rpx;"></image>
            <text style="font-size: 24rpx;color: #999999;margin-top: 20rpx;">{{ listItem.title }}</text>
          </up-grid-item>
        </up-grid>
      </view>
    </view>
    <view class="cardz1">
      <text class="text1">我的活动</text>
      <view>
        <up-grid :border="false" col="5" @click="grid1Click2">
          <up-grid-item v-for="(listItem, listIndex) in list2" :key="listIndex"
            customStyle="padding-top: 24rpx; ">
            <image :src="listItem.icon" style="width: 66rpx; height: 66rpx;"></image>
            <text style="font-size: 24rpx;color: #999999;margin-top: 20rpx;">{{ listItem.title }}</text>
          </up-grid-item>
        </up-grid>
      </view>
    </view>
    <view class="cardz3">
      <text class="text1">更多功能</text>
      <view>
        <up-grid :border="false" col="4" @click="grid1Click3">
          <up-grid-item v-for="(listItem, listIndex) in list3" :key="listIndex"
            customStyle="padding-top: 24rpx; ">
            <image :src="listItem.icon" style="width: 66rpx; height: 66rpx;"></image>
            <text style="font-size: 24rpx;color: #999999;margin-top: 20rpx;">{{ listItem.title }}</text>
          </up-grid-item>
        </up-grid>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ref, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const iconConfig = proxy.iconConfig;
const bjt = iconConfig.bjt;
//+更多
const gd11 = iconConfig.gd11;
const gd12 = iconConfig.gd12;
const gd13 = iconConfig.gd13;
const gd14 = iconConfig.gd14;
const gd21 = iconConfig.gd21;
const gd22 = iconConfig.gd22;
const gd23 = iconConfig.gd23;
const gd24 = iconConfig.gd24;
//+我的话题
const ht11 = iconConfig.ht11;
const ht12 = iconConfig.ht12;
const ht13 = iconConfig.ht13;
const ht14 = iconConfig.ht14;
const ht15 = iconConfig.ht15;
// +我的活动
const hd11 = iconConfig.hd11;
const hd12 = iconConfig.hd12;
const hd13 = iconConfig.hd13;
const hd14 = iconConfig.hd14;
const hd15 = iconConfig.hd15;
const list1 = ref([
  {icon: ht11, title: '全部话题' }, 
{ icon: ht12, title: '已发布' },
{ icon: ht13, title: '审核中' }, 
{ icon: ht14, title: '未通过' }, 
{ icon: ht15, title: '草稿箱' }
])
const list2 = ref([
  {icon: hd11, title: '全部活动' }, 
{ icon: hd12, title: '已发布' },
{ icon: hd13, title: '审核中' }, 
{ icon: hd14, title: '未通过' }, 
{ icon: hd15, title: '草稿箱' }
])
const list3 = ref([
  {icon: gd11, title: '外卖订单' }, 
{ icon: gd12, title: '我的兼职' },
{ icon: gd13, title: '证件证明' }, 
{ icon: gd14, title: '地址管理' }, 
{ icon: gd21, title: '优惠卡券' },
{icon: gd22, title: '联系客服' }, 
{ icon: gd23, title: '邀请好友' },
{ icon: gd24, title: '系统设置' }
])

const infoAssist = ref(0)
const followCount = ref(0)
const fanCount = ref(0)


const name = ref(proxy.$store.state.user.name)
const nickName = ref(proxy.$store.state.user.nickName)
const sex = ref(proxy.$store.state.user.sex)
const version = ref(getApp().globalData.config.appInfo.version)
const avatar = ref(proxy.$store.state.user.avatar)
function handleLogout() {
  proxy.$modal.confirm('确定注销并退出系统吗？').then(() => {
    proxy.$store.dispatch('LogOut').then(() => {
      proxy.$tab.reLaunch('/pages/index')
    })
  })
}

const grid1Click1 = (e) => {
  console.log(e);
}
const grid1Click2 = (e) => {
  console.log(e);
}
const grid1Click3 = (e) => {
  console.log(e);
}

const info = () => {
  console.log(avatar);
}
info();
function handleToLogin() {
  proxy.$tab.reLaunch('/pages/loginInfo/login')
}
const handleToUserInfo = () => {
  proxy.$tab.navigateTo('/pages/mine/info/userInfo')
}

function windowHeight() {
  return uni.getSystemInfoSync().windowHeight - 50
}

function handleToInfo() {
  proxy.$tab.navigateTo('/pages/mine/info/index')
}
function handleToEditInfo() {
  proxy.$tab.navigateTo('/pages/mine/info/edit')
}
function handleToSetting() {
  proxy.$tab.navigateTo('/pages/mine/setting/index')
}

function handleToAvatar() {
  proxy.$tab.navigateTo('/pages/mine/avatar/index')
}

function handleHelp() {
  proxy.$tab.navigateTo('/pages/mine/help/index')
}
function handleAbout() {
  proxy.$tab.navigateTo('/pages/mine/about/index')
}
function handleJiaoLiuQun() {
  proxy.$modal.showToast('QQ群：①133713780、②146013835')
}
function handleBuilding() {
  proxy.$modal.showToast('模块建设中~')
}

</script>

<style lang="scss">
page {
  background-color: #F4F5F6;
}

.cards {
  position: relative;

  .userInfoNot {
    position: absolute;
    top: 200rpx;
    left: 32rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .smallUserInfo {
    position: absolute;
    left: 47rpx;
    bottom: 26rpx;
    width: 656rpx;
    height: 66rpx;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .small1 {}
  }

}

.bg {
  width: 100%;
  height: 500rpx;
}

.cardz1 {
  width: 686rpx;
  height: 212rpx;
  border-radius: 24rpx;
  background: #ffffff;
  margin: 24rpx auto;
  padding-top: 24rpx; // 在父元素上添加 padding

  .text1 {
    font-weight: 400;
    font-size: 28rpx;
    text-align: left;
    color: #010101 !important;
    margin: 0 24rpx; // 调整 margin 确保 top margin 不会折叠
  }
}
.cardz3 {
  width: 686rpx;
  height: 356rpx;
  border-radius: 24rpx;
  background: #ffffff;
  margin: 24rpx auto;
  padding-top: 24rpx; // 在父元素上添加 padding

  .text1 {
    font-weight: 400;
    font-size: 28rpx;
    text-align: left;
    color: #010101 !important;
    margin: 0 24rpx; // 调整 margin 确保 top margin 不会折叠
  }
}
</style>