init

cloudroam

2025-07-17 f3ea52bf97e61f6917ccaab904817d74d9d4860c

 sub-pages/mine/index.vue

@@ -3,9 +3,10 @@
    <view class="profile-section" :style="backgroundStyle">
      <up-sticky bgColor="#000">
        <view class="top-bar">
          <up-icon name="list" size="60rpx" color="#D0E1E9" @click="onSettingClick" />
          <up-icon name="setting" size="60rpx" color="#D0E1E9" @click="onSettingClick" />
<!--          <up-icon name="list" size="60rpx" color="#D0E1E9" @click="showUnderDevelopment" />-->
          <view class="top-bar-right">
            <up-icon name="share" size="60rpx" color="#D0E1E9" />
<!--            <up-icon name="share" size="60rpx" color="#D0E1E9" @click="showUnderDevelopment" />-->
          </view>
        </view>
      </up-sticky>
@@ -21,45 +22,45 @@
            </view>
          </view>
          <view class="user-info">
            <view class="username">影途 {{ userStore?.userInfo?.customerDTO?.name }}</view>
            <view class="user-id">影途号：{{ userStore?.userInfo?.customerDTO?.id }}</view>
            <view class="username">影游四方 {{ userStore?.userInfo?.customerDTO?.name }}</view>
            <view class="user-id">影游四方号：{{ userStore?.userInfo?.customerDTO?.id }}</view>
            <view class="location">IP 属地：{{ userStore.address?.ad_info?.province }}</view>
          </view>
        </view>

        <view class="edit-profile" >点击这里，填写简介</view>
<!--        <view class="edit-profile" >点击这里，填写简介</view>-->

        <view class="stats">
          <view class="stat-row">
            <view class="stat-item">
              <text class="number">0</text>
              <text class="label">关注</text>
            </view>
            <view class="stat-item">
              <text class="number">0</text>
              <text class="label">粉丝</text>
            </view>
            <view class="stat-item">
<!--            <view class="stat-item">-->
<!--              <text class="number">0</text>-->
<!--              <text class="label">关注</text>-->
<!--            </view>-->
<!--            <view class="stat-item">-->
<!--              <text class="number">0</text>-->
<!--              <text class="label">粉丝</text>-->
<!--            </view>-->
<!--            <view class="stat-item">
              <text class="number">1</text>
              <text class="label">获赞与收藏</text>
            </view>
            </view> -->
          </view>
          <view class="action-buttons">
            <up-button text="编辑资料" size="mini" type="info" plain hairline @click="navigateTo('/sub-pages/mine/profile-edit')"
              :custom-style="{ backgroundColor: 'transparent', borderColor: '#B1ABA9' }" />
            <up-icon name="setting" size="40rpx" @click="navigateTo('/sub-pages/mine/settings')" />
<!--            <up-button text="编辑资料" size="mini" type="info" plain hairline @click="navigateTo('/sub-pages/mine/profile-edit')"-->
<!--              :custom-style="{ backgroundColor: 'transparent', borderColor: '#B1ABA9' }" />-->
<!--            <up-icon name="setting" size="40rpx" @click="navigateTo('/sub-pages/mine/settings')" />-->
          </view>
        </view>
      </view>

      <scroll-view class="function-cards" scroll-x show-scrollbar="false">
        <view class="card" v-for="item in cardList" :key="item.title">
          <view class="card-content">
            <text class="card-title">{{ item.title }}</text>
            <text class="card-subtitle">{{ item.subtitle }}</text>
          </view>
        </view>
      </scroll-view>
<!--      <scroll-view class="function-cards" scroll-x show-scrollbar="false">-->
<!--        <view class="card" v-for="item in cardList" :key="item.title"  @click="showUnderDevelopment">-->
<!--          <view class="card-content">-->
<!--            <text class="card-title">{{ item.title }}</text>-->
<!--            <text class="card-subtitle">{{ item.subtitle }}</text>-->
<!--          </view>-->
<!--        </view>-->
<!--      </scroll-view>-->
    </view>

    <view class="tab-section">
@@ -68,20 +69,67 @@
          activeStyle="color: #2979ff" />
      </up-sticky>


<!--      <swiper class="swiper-box" :current="current" @change="onSwiperChange" duration="300">-->
<!--        <swiper-item v-for="(item, index) in tabList" :key="index">-->
<!--          <view v-if="!userStore.hasLogin" class="empty-state">-->
<!--            <text class="empty-text">请登录后查看{{ item.name }}</text>-->
<!--          </view>-->
<!--          <view v-else-if="getCurrentList.length === 0" class="empty-state">-->
<!--            <text class="empty-text">暂无{{ item.name }}内容</text>-->
<!--          </view>-->
<!--          <view v-else class="list-view">-->
<!--            <up-waterfall v-model="getCurrentList">-->
<!--              <template #left="{ leftList }">-->
<!--                <FlowCard-->
<!--                    v-for="(item, index) in leftList"-->
<!--                    :key="index"-->
<!--                    :item="item"-->
<!--                    @click="handleDetailClick"-->
<!--                />-->
<!--              </template>-->
<!--              <template #right="{ rightList }">-->
<!--                <FlowCard-->
<!--                    v-for="(item, index) in rightList"-->
<!--                    :key="index"-->
<!--                    :item="item"-->
<!--                    @click="handleDetailClick"-->
<!--                />-->
<!--              </template>-->
<!--            </up-waterfall>-->
<!--            <up-loadmore :status="loading ? 'loading' : 'nomore'" :line="true" />-->
<!--          </view>-->
<!--        </swiper-item>-->
<!--      </swiper>-->
      <swiper class="swiper-box" :current="current" @change="onSwiperChange" duration="300">
        <swiper-item v-for="(item, index) in tabList" :key="index">
          <view class="empty-state">
            <image class="empty-icon"
              src="https://ai-public.mastergo.com/ai/img_res/fc3cb775274ef0f5e58ac01687a9c121.jpg" mode="aspectFit" />
            <text class="empty-text">快去发布你的笔记吧</text>
            <up-button class="publish-btn" size="mini" type="warning" shape="circle">去发布</up-button>
          <view class="list-view">
            <up-waterfall v-model="getCurrentList">
              <template #left="{ leftList }">
                <FlowCard
                    v-for="(item, index) in leftList"
                    :key="index"
                    :item="item"
                    @click="handleDetailClick"
                />
              </template>
              <template #right="{ rightList }">
                <FlowCard
                    v-for="(item, index) in rightList"
                    :key="index"
                    :item="item"
                    @click="handleDetailClick"
                />
              </template>
            </up-waterfall>
            <up-loadmore :status="loading ? 'loading' : 'nomore'" :line="true" />
          </view>
        </swiper-item>
      </swiper>
    </view>

    <common-footer flg="0" />
    <setting-popup v-model="settingShow" />
<!--    <setting-popup v-model="settingShow" />-->
  </view>
</template>

@@ -93,6 +141,8 @@
import { useUserStore } from '@/store/user'
import { useLocation } from '@/composables/useLocation'
import { useNavigator } from '@/composables/useNavigator'
import { FilmWorks } from '@/types/index'
import{ getFilmCollectList, getFilmLikeList} from '@/sub-pages/utils/api'

const { apitype } = usePlatformLoginType()
const userStore = useUserStore()
@@ -104,12 +154,26 @@
  () => userStore.userInfo,      // 监听 userInfo 这个响应式属性
  (newVal, oldVal) => {
    console.log('userInfo 发生变化:', newVal)
    if (newVal && userStore.hasLogin) {
      fetchList();
    } else {
      // 用户未登录，清空列表
      likeList.value = [];
      collectList.value = [];
    }
  },
  { deep: true } // 如果 userInfo 是对象，需要深度监听其属性变化
)

onShow(() => {
  getLocation()
  if (userStore.hasLogin) {
    fetchList();
  }else {
    // 用户未登录，清空列表
    likeList.value = [];
    collectList.value = [];
  }
});


@@ -122,9 +186,13 @@
// 控制设置弹窗显示
const settingShow = ref(false);

const likeList = ref<FilmWorks[]>([]);
const collectList = ref<FilmWorks[]>([]);
const loading = ref(false);
const noMore = ref(false);
// tab 列表
const tabList = ref([
  { name: '笔记' },
  // { name: '笔记' },
  { name: '收藏' },
  { name: '赞过' },
]);
@@ -146,20 +214,67 @@

// 方法定义
const onSettingClick= ()=> {
  settingShow.value = true;
  // settingShow.value = true;
  uni.navigateTo({ url: '/sub-pages/mine/settings' })
}

const onTabChange=(item: { index: number })=> {
  current.value = item.index;
  // 切换tab时检查是否需要加载数据
  if (userStore.hasLogin &&
      ((current.value === 0 && collectList.value.length === 0) ||
          (current.value === 1 && likeList.value.length === 0))) {
    fetchList();
  }
}

const onSwiperChange=(e: any) => {
  current.value = e.detail.current;
  onTabChange({ index: e.detail.current });
}

const handleDetailClick = (item: FilmWorks) => {
  navigateTo(`/sub-pages/film-list/film-detail?id=${item.id}`);
};

const getCurrentList = computed(() => {
  return current.value === 0 ? collectList.value : likeList.value;
});
const fetchList = async () => {
  if (!userStore.hasLogin || loading.value || noMore.value) return;
  loading.value = true;
  try {
    if (current.value === 0) {
      // 获取收藏列表
      collectList.value = [];
      const res = await getFilmCollectList({
        userId: userStore.userInfo?.customerDTO?.id
      });
      collectList.value = res || [];
    } else {
      // 获取点赞列表
      likeList.value = [];
      const res = await getFilmLikeList({
        userId: userStore.userInfo?.customerDTO?.id
      });
      likeList.value = res || [];
    }
  } catch (error) {
    console.error('获取列表失败:', error);
    uni.showToast({ title: '获取数据失败', icon: 'none' });
  } finally {
    loading.value = false;
  }
};
const goToProfile=  ()=> {
  navigateTo('/sub-pages/mine/edit-profile');
};

const showUnderDevelopment = () => {
  uni.showToast({
    title: '功能正在开发中',
    icon: 'none'
  });
}
</script>

@@ -327,7 +442,7 @@

.card {
  display: inline-block;
  width: 180rpx;
  width: 100%;
  height: 80rpx;
  margin-left: 20rpx;
  background-color: rgba(60, 60, 60, 0.4);
@@ -426,11 +541,21 @@
  border-radius: 32rpx !important;
  padding: 0 48rpx !important;
}
.swiper-box {
  min-height: calc(100vh - 200rpx);
  /*padding: 20rpx 0;*/
}

.list-view {
  /*padding: 0 20rpx;*/
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
.swiper-box {
  // min-height: 600rpx;
  /* 或 100vh，或具体 px */
  min-height: 800px;
}
//.swiper-box {
//  // min-height: 600rpx;
//  /* 或 100vh，或具体 px */
//  min-height: 800px;
//}

</style>