13 changed files with 2104 additions and 17 deletions
Split View
Diff Options
-
+1 -1components/base/navbar.vue
-
+2 -2components/base/tabbar.vue
-
+100 -0components/list/square/waterfallContainer.vue
-
+297 -0components/list/square/waterfallItem.vue
-
+1 -1components/userShop/userShopCommission.vue
-
+1 -1config.js
-
+27 -5pages.json
-
+12 -1pages/index/center.vue
-
+0 -1pages/index/product.vue
-
+371 -0pages/index/square.vue
-
+19 -5pages_order/marketing/turntable.vue
-
+476 -0pages_order/profile/fansList.vue
-
+797 -0pages_order/profile/userProfile.vue
+ 1
- 1
components/base/navbar.vue
View File
+ 2
- 2
components/base/tabbar.vue
View File
+ 100
- 0
components/list/square/waterfallContainer.vue
View File
| @ -0,0 +1,100 @@ | |||
| <template> | |||
| <view class="waterfall-container"> | |||
| <view class="waterfall-columns"> | |||
| <!-- 左列 --> | |||
| <view class="waterfall-column"> | |||
| <waterfallItem | |||
| v-for="(item, index) in leftColumnData" | |||
| :key="'left_' + index" | |||
| :item="item" | |||
| @click="handleItemClick" | |||
| @like="handleItemLike" | |||
| /> | |||
| </view> | |||
| <!-- 右列 --> | |||
| <view class="waterfall-column"> | |||
| <waterfallItem | |||
| v-for="(item, index) in rightColumnData" | |||
| :key="'right_' + index" | |||
| :item="item" | |||
| @click="handleItemClick" | |||
| @like="handleItemLike" | |||
| /> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import waterfallItem from './waterfallItem.vue' | |||
| export default { | |||
| components: { | |||
| waterfallItem | |||
| }, | |||
| props: { | |||
| list: { | |||
| type: Array, | |||
| default: () => [] | |||
| } | |||
| }, | |||
| data() { | |||
| return { | |||
| leftColumnData: [], | |||
| rightColumnData: [] | |||
| } | |||
| }, | |||
| watch: { | |||
| list: { | |||
| handler(newList) { | |||
| this.distributeItems(newList) | |||
| }, | |||
| immediate: true | |||
| } | |||
| }, | |||
| methods: { | |||
| // 将数据分配到左右两列 | |||
| distributeItems(items) { | |||
| this.leftColumnData = [] | |||
| this.rightColumnData = [] | |||
| items.forEach((item, index) => { | |||
| // 简单的奇偶分配，也可以根据内容高度智能分配 | |||
| if (index % 2 === 0) { | |||
| this.leftColumnData.push(item) | |||
| } else { | |||
| this.rightColumnData.push(item) | |||
| } | |||
| }) | |||
| }, | |||
| // 处理点击事件 | |||
| handleItemClick(item) { | |||
| this.$emit('item-click', item) | |||
| }, | |||
| // 处理点赞事件 | |||
| handleItemLike(item) { | |||
| this.$emit('item-like', item) | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .waterfall-container { | |||
| padding: 20rpx; | |||
| .waterfall-columns { | |||
| display: flex; | |||
| gap: 20rpx; | |||
| .waterfall-column { | |||
| flex: 1; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
+ 297
- 0
components/list/square/waterfallItem.vue
View File
| @ -0,0 +1,297 @@ | |||
| <template> | |||
| <view class="waterfall-item" @click="handleClick"> | |||
| <!-- 主图片 --> | |||
| <view class="main-image" v-if="mainImage"> | |||
| <image :src="mainImage" mode="aspectFill" @click.stop="previewImage([mainImage])"></image> | |||
| <!-- 分类标签 --> | |||
| <view class="category-tag" v-if="item.classId_dictText"> | |||
| #{{ item.classId_dictText }} | |||
| </view> | |||
| </view> | |||
| <!-- 内容区域 --> | |||
| <view class="content"> | |||
| <!-- 标题/内容 --> | |||
| <view class="title" v-if="item.title" v-html="formatContent(item.title)"></view> | |||
| <!-- 地址信息 --> | |||
| <view class="address" v-if="item.address"> | |||
| <uv-icon name="map-pin" size="24rpx" color="#999"></uv-icon> | |||
| <text>{{ item.address }}</text> | |||
| </view> | |||
| <!-- 用户信息 --> | |||
| <view class="user-info"> | |||
| <view class="user-avatar"> | |||
| <image :src="item.userImage" mode="aspectFill" @click.stop="previewImage([item.userImage])"></image> | |||
| </view> | |||
| <view class="user-details"> | |||
| <view class="username">{{ item.userName }}</view> | |||
| <view class="user-tags"> | |||
| <text class="tag" v-if="item.sex" :style="{'background-color': sexColors[item.sex] || '#999'}">{{ item.sex }}</text> | |||
| <text class="tag" v-if="item.yearDate">{{ item.yearDate }}</text> | |||
| <text class="auth-tag" v-if="item.isContent">{{ item.isContent }}</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- 互动数据 --> | |||
| <view class="interaction"> | |||
| <view class="interaction-item"> | |||
| <uv-icon name="eye" size="24rpx" color="#999"></uv-icon> | |||
| <text>{{ item.isBrowse || 0 }}</text> | |||
| </view> | |||
| <view class="interaction-item"> | |||
| <uv-icon name="chat" size="24rpx" color="#999"></uv-icon> | |||
| <text>{{ item.isComment || 0 }}</text> | |||
| </view> | |||
| <view class="interaction-item" @click.stop="handleLike"> | |||
| <uv-icon name="thumb-up" size="24rpx" :color="isLiked ? '#ff4757' : '#999'"></uv-icon> | |||
| <text :style="{color: isLiked ? '#ff4757' : '#999'}">{{ item.isUp || 0 }}</text> | |||
| </view> | |||
| <!-- 发布时间 --> | |||
| <view class="publish-time"> | |||
| {{ formatTime(item.createTime) }} | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| props: { | |||
| item: { | |||
| type: Object, | |||
| default: () => ({}) | |||
| } | |||
| }, | |||
| data() { | |||
| return { | |||
| isLiked: false, | |||
| sexColors: { | |||
| '男': '#4A90E2', | |||
| '女': '#FF69B4', | |||
| '其他': '#999' | |||
| } | |||
| } | |||
| }, | |||
| computed: { | |||
| // 主图片 - 优先显示微信图片，然后是第一张图片 | |||
| mainImage() { | |||
| if (this.item.wxImage) { | |||
| return this.item.wxImage | |||
| } | |||
| if (this.item.image) { | |||
| const images = this.item.image.split(',').filter(img => img.trim()) | |||
| return images.length > 0 ? images[0] : null | |||
| } | |||
| return null | |||
| } | |||
| }, | |||
| methods: { | |||
| // 处理点击事件 | |||
| handleClick() { | |||
| this.$emit('click', this.item) | |||
| }, | |||
| // 处理点赞事件 | |||
| handleLike() { | |||
| this.isLiked = !this.isLiked | |||
| this.$emit('like', this.item) | |||
| }, | |||
| // 预览图片 | |||
| previewImage(urls, current = 0) { | |||
| if (!urls || urls.length === 0) return | |||
| uni.previewImage({ | |||
| urls: urls, | |||
| current: current | |||
| }) | |||
| }, | |||
| // 格式化内容 | |||
| formatContent(content) { | |||
| if (!content) return '' | |||
| // 尝试使用全局utils，如果不存在则返回原内容 | |||
| if (this.$utils && this.$utils.stringFormatHtml) { | |||
| return this.$utils.stringFormatHtml(content) | |||
| } | |||
| // 简单的HTML处理 | |||
| return content.replace(/\n/g, '<br/>') | |||
| }, | |||
| // 格式化时间 | |||
| formatTime(timeStr) { | |||
| if (!timeStr) return '' | |||
| // 如果已经包含"发布"，直接返回 | |||
| if (timeStr.includes('发布')) { | |||
| return timeStr | |||
| } | |||
| // 简单的时间格式处理 | |||
| const now = new Date() | |||
| const time = new Date(timeStr) | |||
| const diff = now - time | |||
| const days = Math.floor(diff / (1000 * 60 * 60 * 24)) | |||
| if (days === 0) { | |||
| return '今天' | |||
| } else if (days === 1) { | |||
| return '昨天' | |||
| } else if (days < 7) { | |||
| return `${days}天前` | |||
| } else { | |||
| // 返回月-日格式 | |||
| const month = time.getMonth() + 1 | |||
| const day = time.getDate() | |||
| return `${month}-${day}` | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .waterfall-item { | |||
| background-color: #fff; | |||
| border-radius: 16rpx; | |||
| overflow: hidden; | |||
| box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); | |||
| margin-bottom: 20rpx; | |||
| .main-image { | |||
| position: relative; | |||
| width: 100%; | |||
| image { | |||
| width: 100%; | |||
| height: 400rpx; | |||
| object-fit: cover; | |||
| } | |||
| .category-tag { | |||
| position: absolute; | |||
| top: 16rpx; | |||
| right: 16rpx; | |||
| background: rgba(255, 215, 0, 0.9); | |||
| color: #333; | |||
| padding: 8rpx 16rpx; | |||
| border-radius: 20rpx; | |||
| font-size: 22rpx; | |||
| font-weight: 500; | |||
| } | |||
| } | |||
| .content { | |||
| padding: 24rpx; | |||
| .title { | |||
| font-size: 28rpx; | |||
| line-height: 1.4; | |||
| color: #333; | |||
| margin-bottom: 16rpx; | |||
| display: -webkit-box; | |||
| -webkit-box-orient: vertical; | |||
| -webkit-line-clamp: 3; | |||
| overflow: hidden; | |||
| } | |||
| .address { | |||
| display: flex; | |||
| align-items: center; | |||
| margin-bottom: 20rpx; | |||
| text { | |||
| font-size: 24rpx; | |||
| color: #666; | |||
| margin-left: 8rpx; | |||
| } | |||
| } | |||
| .user-info { | |||
| display: flex; | |||
| align-items: center; | |||
| margin-bottom: 20rpx; | |||
| .user-avatar { | |||
| width: 60rpx; | |||
| height: 60rpx; | |||
| border-radius: 30rpx; | |||
| overflow: hidden; | |||
| margin-right: 16rpx; | |||
| image { | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| } | |||
| .user-details { | |||
| flex: 1; | |||
| .username { | |||
| font-size: 26rpx; | |||
| color: #333; | |||
| font-weight: 500; | |||
| margin-bottom: 6rpx; | |||
| } | |||
| .user-tags { | |||
| display: flex; | |||
| align-items: center; | |||
| flex-wrap: wrap; | |||
| .tag { | |||
| font-size: 20rpx; | |||
| color: white; | |||
| background-color: #999; | |||
| padding: 4rpx 12rpx; | |||
| border-radius: 12rpx; | |||
| margin-right: 8rpx; | |||
| margin-bottom: 4rpx; | |||
| } | |||
| .auth-tag { | |||
| font-size: 20rpx; | |||
| color: white; | |||
| background-color: #ffd036; | |||
| padding: 4rpx 12rpx; | |||
| border-radius: 12rpx; | |||
| margin-right: 8rpx; | |||
| margin-bottom: 4rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .interaction { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: space-between; | |||
| .interaction-item { | |||
| display: flex; | |||
| align-items: center; | |||
| text { | |||
| font-size: 24rpx; | |||
| color: #999; | |||
| margin-left: 6rpx; | |||
| } | |||
| } | |||
| .publish-time { | |||
| font-size: 24rpx; | |||
| color: #999; | |||
| margin-left: auto; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
+ 1
- 1
components/userShop/userShopCommission.vue
View File
+ 1
- 1
config.js
View File
+ 27
- 5
pages.json
View File
+ 12
- 1
pages/index/center.vue
View File
+ 0
- 1
pages/index/product.vue
View File
+ 371
- 0
pages/index/square.vue
View File
| @ -0,0 +1,371 @@ | |||
| <template> | |||
| <view class="square-page"> | |||
| <navbar title="广场"/> | |||
| <!-- 一级分类：关注/发现 --> | |||
| <view class="primary-tabs"> | |||
| <view | |||
| class="primary-tab-item" | |||
| :class="{active: currentPrimaryTab === 0}" | |||
| @click="switchPrimaryTab(0)" | |||
| > | |||
| 关注 | |||
| </view> | |||
| <view | |||
| class="primary-tab-item" | |||
| :class="{active: currentPrimaryTab === 1}" | |||
| @click="switchPrimaryTab(1)" | |||
| > | |||
| 发现 | |||
| </view> | |||
| </view> | |||
| <!-- 二级分类：城市列表 --> | |||
| <!-- <view class="secondary-tabs"> | |||
| <scroll-view scroll-x="true" class="city-scroll"> | |||
| <view class="city-tabs"> | |||
| <view | |||
| class="city-tab-item" | |||
| :class="{active: currentCityIndex === -1}" | |||
| @click="switchCity(-1, null)" | |||
| > | |||
| 全部 | |||
| </view> | |||
| <view | |||
| v-for="(city, index) in cityList" | |||
| :key="city.id || index" | |||
| class="city-tab-item" | |||
| :class="{active: currentCityIndex === index}" | |||
| @click="switchCity(index, city)" | |||
| > | |||
| {{ city.name || city.cityName }} | |||
| </view> | |||
| </view> | |||
| </scroll-view> | |||
| </view> --> | |||
| <!-- 使用uv-tabs组件的城市分类 --> | |||
| <view class="city-tabs-container"> | |||
| <uv-tabs | |||
| :list="cityTabsList" | |||
| :current="currentCityTabIndex" | |||
| :activeStyle="{color: '#5baaff', fontWeight: 600}" | |||
| lineColor="#5baaff" | |||
| lineHeight="6rpx" | |||
| lineWidth="40rpx" | |||
| keyName="name" | |||
| @click="onCityTabClick" | |||
| /> | |||
| </view> | |||
| <!-- 瀑布流列表 --> | |||
| <view class="content-container"> | |||
| <waterfallContainer | |||
| :list="List" | |||
| @item-click="onItemClick" | |||
| @item-like="onItemLike" | |||
| /> | |||
| <!-- 加载更多提示 --> | |||
| <view v-if="loadmore && List.length > 0" class="load-more"> | |||
| <uv-loading-icon size="28"></uv-loading-icon> | |||
| <text class="load-more-text">加载更多...</text> | |||
| </view> | |||
| <!-- 没有更多数据提示 --> | |||
| <view v-if="!loadmore && List.length > 0" class="no-more"> | |||
| <text>— 没有更多了 —</text> | |||
| </view> | |||
| </view> | |||
| <!-- 空状态 --> | |||
| <view v-if="!loading && List.length === 0" class="empty-state"> | |||
| <uv-empty | |||
| text="暂无动态" | |||
| textColor="#999" | |||
| icon="list" | |||
| iconColor="#ddd" | |||
| iconSize="120" | |||
| ></uv-empty> | |||
| </view> | |||
| <!-- 加载状态 --> | |||
| <view v-if="loading && List.length === 0" class="loading-state"> | |||
| <uv-loading-icon size="40"></uv-loading-icon> | |||
| <text class="loading-text">加载中...</text> | |||
| </view> | |||
| <tabber select="1" /> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import navbar from '@/components/base/navbar.vue' | |||
| import tabber from '@/components/base/tabbar.vue' | |||
| import waterfallContainer from '@/components/list/square/waterfallContainer.vue' | |||
| import mixinsList from '@/mixins/loadList.js' | |||
| import { mapState } from 'vuex' | |||
| export default { | |||
| mixins: [mixinsList], | |||
| components: { | |||
| navbar, | |||
| tabber, | |||
| waterfallContainer | |||
| }, | |||
| data() { | |||
| return { | |||
| mixinsListApi: 'getPostPage', // 使用与首页相同的API | |||
| currentPrimaryTab: 1, // 默认显示发现 | |||
| currentCityIndex: -1, // 默认全部城市 | |||
| currentCity: null, | |||
| currentCityTabIndex: 0 // uv-tabs当前选中的城市索引 | |||
| } | |||
| }, | |||
| onLoad() { | |||
| // 获取城市列表 | |||
| this.$store.commit('getCityList') | |||
| // 初始化查询参数 | |||
| this.initQueryParams() | |||
| }, | |||
| onShow() { | |||
| this.refreshList() | |||
| }, | |||
| onPullDownRefresh() { | |||
| this.refreshList() | |||
| }, | |||
| onReachBottom() { | |||
| this.loadMore() | |||
| }, | |||
| computed: { | |||
| ...mapState(['cityList']), | |||
| // 城市标签页列表（包含"全部"选项） | |||
| cityTabsList() { | |||
| const allTab = { id: null, name: '全部' } | |||
| const cityTabs = this.cityList.map(city => ({ | |||
| id: city.id || city.cityId, | |||
| name: city.name || city.cityName || city.title | |||
| })) | |||
| return [allTab, ...cityTabs] | |||
| } | |||
| }, | |||
| methods: { | |||
| // 初始化查询参数 | |||
| initQueryParams() { | |||
| // 设置默认查询参数 | |||
| this.queryParams = { | |||
| ...this.queryParams, | |||
| type: this.currentPrimaryTab // 0: 关注, 1: 发现 | |||
| } | |||
| // 如果有选择城市，添加城市参数 | |||
| if (this.currentCity) { | |||
| this.queryParams.cityId = this.currentCity.id || this.currentCity.cityId | |||
| } | |||
| }, | |||
| // 切换一级分类 | |||
| switchPrimaryTab(index) { | |||
| if (this.currentPrimaryTab === index) return | |||
| this.currentPrimaryTab = index | |||
| this.queryParams.type = index | |||
| this.refreshList() | |||
| }, | |||
| // 切换城市（已注释，改用uv-tabs的onCityTabClick方法） | |||
| // switchCity(index, city) { | |||
| // if (this.currentCityIndex === index) return | |||
| // | |||
| // this.currentCityIndex = index | |||
| // this.currentCity = city | |||
| // | |||
| // // 更新查询参数 | |||
| // if (city) { | |||
| // this.queryParams.cityId = city.id || city.cityId | |||
| // } else { | |||
| // delete this.queryParams.cityId | |||
| // } | |||
| // | |||
| // this.refreshList() | |||
| // }, | |||
| // 重写刷新方法 | |||
| onRefresh() { | |||
| this.refreshList() | |||
| }, | |||
| // 点击动态项 | |||
| onItemClick(item) { | |||
| this.$utils.navigateTo('/pages_order/post/postDetail?id=' + item.id) | |||
| }, | |||
| // 点赞动态 | |||
| onItemLike(item) { | |||
| console.log('点赞动态:', item.id) | |||
| // 这里可以添加点赞API调用 | |||
| }, | |||
| // uv-tabs城市切换事件 | |||
| onCityTabClick(item) { | |||
| this.currentCityTabIndex = item.index | |||
| // 如果是第一个（全部），清除城市筛选 | |||
| if (item.index === 0) { | |||
| this.currentCity = null | |||
| this.currentCityIndex = -1 | |||
| delete this.queryParams.cityId | |||
| } else { | |||
| // 获取对应的城市数据 | |||
| const cityData = this.cityList[item.index - 1] // 减1是因为第一个是"全部" | |||
| this.currentCity = cityData | |||
| this.currentCityIndex = item.index - 1 | |||
| this.queryParams.cityId = cityData.id || cityData.cityId | |||
| } | |||
| this.refreshList() | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .square-page { | |||
| background-color: #f5f5f5; | |||
| min-height: 100vh; | |||
| } | |||
| .primary-tabs { | |||
| background-color: #fff; | |||
| display: flex; | |||
| padding: 0 30rpx; | |||
| border-bottom: 1rpx solid #eee; | |||
| .primary-tab-item { | |||
| flex: 1; | |||
| text-align: center; | |||
| padding: 30rpx 0; | |||
| font-size: 32rpx; | |||
| color: #666; | |||
| position: relative; | |||
| &.active { | |||
| color: #5baaff; | |||
| font-weight: bold; | |||
| &::after { | |||
| content: ''; | |||
| position: absolute; | |||
| bottom: 0; | |||
| left: 50%; | |||
| transform: translateX(-50%); | |||
| width: 60rpx; | |||
| height: 6rpx; | |||
| background-color: #5baaff; | |||
| border-radius: 3rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| // 原有的二级分类样式（已注释） | |||
| // .secondary-tabs { | |||
| // background-color: #fff; | |||
| // border-bottom: 1rpx solid #eee; | |||
| // | |||
| // .city-scroll { | |||
| // padding: 20rpx 0; | |||
| // | |||
| // .city-tabs { | |||
| // display: flex; | |||
| // white-space: nowrap; | |||
| // padding: 0 30rpx; | |||
| // | |||
| // .city-tab-item { | |||
| // flex-shrink: 0; | |||
| // padding: 16rpx 32rpx; | |||
| // margin-right: 20rpx; | |||
| // background-color: #f8f9fa; | |||
| // border-radius: 30rpx; | |||
| // font-size: 28rpx; | |||
| // color: #666; | |||
| // border: 1rpx solid transparent; | |||
| // | |||
| // &.active { | |||
| // background-color: #5baaff; | |||
| // color: #fff; | |||
| // } | |||
| // | |||
| // &:last-child { | |||
| // margin-right: 30rpx; | |||
| // } | |||
| // } | |||
| // } | |||
| // } | |||
| // } | |||
| // uv-tabs城市分类容器 | |||
| .city-tabs-container { | |||
| background-color: #fff; | |||
| border-bottom: 1rpx solid #eee; | |||
| padding: 0 20rpx; | |||
| } | |||
| .content-container { | |||
| padding: 0; | |||
| } | |||
| .empty-state { | |||
| padding: 100rpx 0; | |||
| text-align: center; | |||
| } | |||
| .loading-state { | |||
| padding: 100rpx 0; | |||
| text-align: center; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| .loading-text { | |||
| margin-top: 20rpx; | |||
| font-size: 28rpx; | |||
| color: #999; | |||
| } | |||
| } | |||
| .load-more { | |||
| padding: 30rpx 0; | |||
| text-align: center; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| .load-more-text { | |||
| margin-top: 15rpx; | |||
| font-size: 24rpx; | |||
| color: #999; | |||
| } | |||
| } | |||
| .no-more { | |||
| padding: 30rpx 0; | |||
| text-align: center; | |||
| text { | |||
| font-size: 24rpx; | |||
| color: #ccc; | |||
| } | |||
| } | |||
| // 原有的城市滚动条隐藏样式（已注释，uv-tabs自带滚动处理） | |||
| // /deep/ .city-scroll::-webkit-scrollbar { | |||
| // display: none; | |||
| // } | |||
| </style> | |||
+ 19
- 5
pages_order/marketing/turntable.vue
View File
+ 476
- 0
pages_order/profile/fansList.vue
View File
| @ -0,0 +1,476 @@ | |||
| <template> | |||
| <view class="fans-list-page"> | |||
| <navbar title="粉丝列表" leftClick @leftClick="$utils.navigateBack" /> | |||
| <!-- 标签页切换 --> | |||
| <view class="tabs-container"> | |||
| <uv-tabs | |||
| :list="tabsList" | |||
| :current="currentTab" | |||
| :activeStyle="{color: '#333', fontWeight: 600}" | |||
| lineColor="#5baaff" | |||
| lineHeight="6rpx" | |||
| lineWidth="40rpx" | |||
| keyName="name" | |||
| @click="onTabClick" | |||
| /> | |||
| </view> | |||
| <!-- 用户列表 --> | |||
| <view class="user-list"> | |||
| <view | |||
| class="user-item" | |||
| v-for="(user, index) in userList" | |||
| :key="index" | |||
| @click="goToUserProfile(user)" | |||
| > | |||
| <view class="user-avatar"> | |||
| <image :src="user.headImage" mode="aspectFill"></image> | |||
| </view> | |||
| <view class="user-info"> | |||
| <view class="user-name">{{ user.nickName }}</view> | |||
| <view class="user-desc"> | |||
| <view class="user-tags"> | |||
| <text class="tag" v-if="user.sex">{{ user.sex }}</text> | |||
| <text class="tag" v-if="user.address">{{ user.address }}</text> | |||
| <text class="auth-tag" v-if="user.idCardOpen">{{ getAuthText(user.idCardOpen) }}</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view class="user-action" v-if="!isCurrentUserPage"> | |||
| <button | |||
| class="follow-btn" | |||
| :class="{followed: user.isFollowed}" | |||
| @click.stop="toggleFollow(user, index)" | |||
| > | |||
| {{ user.isFollowed ? '已关注' : '关注' }} | |||
| </button> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- 空状态 --> | |||
| <view v-if="!loading && userList.length === 0" class="empty-state"> | |||
| <uv-empty | |||
| :text="emptyText" | |||
| icon="account" | |||
| iconSize="120" | |||
| ></uv-empty> | |||
| </view> | |||
| <!-- 加载状态 --> | |||
| <view v-if="loading" class="loading-state"> | |||
| <uv-loading-icon size="40"></uv-loading-icon> | |||
| <text>加载中...</text> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import { mapState } from 'vuex' | |||
| export default { | |||
| data() { | |||
| return { | |||
| userId: '', // 用户ID | |||
| type: 'fans', // fans: 粉丝, following: 关注 | |||
| currentTab: 0, | |||
| tabsList: [ | |||
| { name: '粉丝', type: 'fans' }, | |||
| { name: '关注', type: 'following' } | |||
| ], | |||
| userList: [], // 用户列表 | |||
| loading: false, | |||
| // 模拟数据 | |||
| mockFansData: [ | |||
| { | |||
| id: '1', | |||
| nickName: '小美同学', | |||
| headImage: 'https://picsum.photos/100/100?random=1', | |||
| sex: '女', | |||
| address: '北京', | |||
| idCardOpen: 1, | |||
| isFollowed: false | |||
| }, | |||
| { | |||
| id: '2', | |||
| nickName: '程序员小王', | |||
| headImage: 'https://picsum.photos/100/100?random=2', | |||
| sex: '男', | |||
| address: '上海', | |||
| idCardOpen: 2, | |||
| isFollowed: true | |||
| }, | |||
| { | |||
| id: '3', | |||
| nickName: '设计师小李', | |||
| headImage: 'https://picsum.photos/100/100?random=3', | |||
| sex: '女', | |||
| address: '深圳', | |||
| idCardOpen: 0, | |||
| isFollowed: false | |||
| }, | |||
| { | |||
| id: '4', | |||
| nickName: '产品经理老张', | |||
| headImage: 'https://picsum.photos/100/100?random=4', | |||
| sex: '男', | |||
| address: '广州', | |||
| idCardOpen: 1, | |||
| isFollowed: true | |||
| }, | |||
| { | |||
| id: '5', | |||
| nickName: '运营小姐姐', | |||
| headImage: 'https://picsum.photos/100/100?random=5', | |||
| sex: '女', | |||
| address: '杭州', | |||
| idCardOpen: 2, | |||
| isFollowed: false | |||
| }, | |||
| { | |||
| id: '6', | |||
| nickName: '前端工程师', | |||
| headImage: 'https://picsum.photos/100/100?random=6', | |||
| sex: '男', | |||
| address: '成都', | |||
| idCardOpen: 1, | |||
| isFollowed: true | |||
| }, | |||
| { | |||
| id: '7', | |||
| nickName: 'UI设计师', | |||
| headImage: 'https://picsum.photos/100/100?random=7', | |||
| sex: '女', | |||
| address: '武汉', | |||
| idCardOpen: 0, | |||
| isFollowed: false | |||
| }, | |||
| { | |||
| id: '8', | |||
| nickName: '后端大神', | |||
| headImage: 'https://picsum.photos/100/100?random=8', | |||
| sex: '男', | |||
| address: '西安', | |||
| idCardOpen: 2, | |||
| isFollowed: true | |||
| } | |||
| ], | |||
| mockFollowingData: [ | |||
| { | |||
| id: '9', | |||
| nickName: '技术大牛', | |||
| headImage: 'https://picsum.photos/100/100?random=9', | |||
| sex: '男', | |||
| address: '北京', | |||
| idCardOpen: 2, | |||
| isFollowed: true | |||
| }, | |||
| { | |||
| id: '10', | |||
| nickName: '设计总监', | |||
| headImage: 'https://picsum.photos/100/100?random=10', | |||
| sex: '女', | |||
| address: '上海', | |||
| idCardOpen: 2, | |||
| isFollowed: true | |||
| }, | |||
| { | |||
| id: '11', | |||
| nickName: '产品总监', | |||
| headImage: 'https://picsum.photos/100/100?random=11', | |||
| sex: '男', | |||
| address: '深圳', | |||
| idCardOpen: 1, | |||
| isFollowed: true | |||
| }, | |||
| { | |||
| id: '12', | |||
| nickName: '运营总监', | |||
| headImage: 'https://picsum.photos/100/100?random=12', | |||
| sex: '女', | |||
| address: '广州', | |||
| idCardOpen: 2, | |||
| isFollowed: true | |||
| }, | |||
| { | |||
| id: '13', | |||
| nickName: '架构师', | |||
| headImage: 'https://picsum.photos/100/100?random=13', | |||
| sex: '男', | |||
| address: '杭州', | |||
| idCardOpen: 1, | |||
| isFollowed: true | |||
| }, | |||
| { | |||
| id: '14', | |||
| nickName: '资深设计师', | |||
| headImage: 'https://picsum.photos/100/100?random=14', | |||
| sex: '女', | |||
| address: '成都', | |||
| idCardOpen: 2, | |||
| isFollowed: true | |||
| } | |||
| ] | |||
| } | |||
| }, | |||
| computed: { | |||
| ...mapState(['userInfo']), | |||
| // 页面标题 | |||
| pageTitle() { | |||
| return this.type === 'fans' ? '粉丝列表' : '关注列表' | |||
| }, | |||
| // 空状态文本 | |||
| emptyText() { | |||
| return this.type === 'fans' ? '暂无粉丝' : '暂无关注' | |||
| }, | |||
| // 是否是当前用户的页面 | |||
| isCurrentUserPage() { | |||
| return this.userId === this.userInfo.id | |||
| } | |||
| }, | |||
| onLoad(options) { | |||
| this.userId = options.userId || this.userInfo.id | |||
| this.type = options.type || 'fans' | |||
| // 设置初始tab | |||
| this.currentTab = this.type === 'fans' ? 0 : 1 | |||
| this.loadUserList() | |||
| }, | |||
| onPullDownRefresh() { | |||
| this.loadUserList() | |||
| }, | |||
| methods: { | |||
| // 返回上一页 | |||
| goBack() { | |||
| uni.navigateBack() | |||
| }, | |||
| // 标签页切换 | |||
| onTabClick(item) { | |||
| this.currentTab = item.index | |||
| this.type = item.type | |||
| this.loadUserList() | |||
| }, | |||
| // 获取认证文本 | |||
| getAuthText(status) { | |||
| const authTexts = ['审核中', '个人认证', '店铺认证'] | |||
| return authTexts[status] || '未认证' | |||
| }, | |||
| // 跳转到用户主页 | |||
| goToUserProfile(user) { | |||
| uni.navigateTo({ | |||
| url: `/pages_order/profile/userProfile?userId=${user.id}` | |||
| }) | |||
| }, | |||
| // 切换关注状态 | |||
| toggleFollow(user, index) { | |||
| if (!uni.getStorageSync('token')) { | |||
| uni.showToast({ | |||
| title: '请先登录', | |||
| icon: 'none' | |||
| }) | |||
| return | |||
| } | |||
| const isFollowed = !user.isFollowed | |||
| // 模拟API调用 | |||
| setTimeout(() => { | |||
| // 更新本地数据 | |||
| this.userList[index].isFollowed = isFollowed | |||
| // 同时更新模拟数据源 | |||
| if (this.type === 'fans') { | |||
| const mockIndex = this.mockFansData.findIndex(item => item.id === user.id) | |||
| if (mockIndex !== -1) { | |||
| this.mockFansData[mockIndex].isFollowed = isFollowed | |||
| } | |||
| } else { | |||
| const mockIndex = this.mockFollowingData.findIndex(item => item.id === user.id) | |||
| if (mockIndex !== -1) { | |||
| this.mockFollowingData[mockIndex].isFollowed = isFollowed | |||
| } | |||
| } | |||
| uni.showToast({ | |||
| title: isFollowed ? '关注成功' : '取消关注', | |||
| icon: 'success' | |||
| }) | |||
| }, 500) | |||
| }, | |||
| // 加载用户列表 | |||
| loadUserList() { | |||
| this.loading = true | |||
| // 模拟网络延迟 | |||
| setTimeout(() => { | |||
| this.loading = false | |||
| uni.stopPullDownRefresh() | |||
| // 使用模拟数据 | |||
| if (this.type === 'fans') { | |||
| this.userList = [...this.mockFansData] | |||
| } else { | |||
| this.userList = [...this.mockFollowingData] | |||
| } | |||
| // 模拟API调用成功 | |||
| console.log(`加载${this.type === 'fans' ? '粉丝' : '关注'}列表成功`) | |||
| }, 1000) | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .fans-list-page { | |||
| background-color: #f5f5f5; | |||
| min-height: 100vh; | |||
| } | |||
| .navbar { | |||
| position: fixed; | |||
| top: 0; | |||
| left: 0; | |||
| right: 0; | |||
| z-index: 100; | |||
| height: 88rpx; | |||
| background: #fff; | |||
| border-bottom: 1rpx solid #eee; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: space-between; | |||
| padding: 0 30rpx; | |||
| padding-top: var(--status-bar-height, 44rpx); | |||
| .nav-title { | |||
| color: #333; | |||
| font-size: 32rpx; | |||
| font-weight: 600; | |||
| } | |||
| .nav-left, .nav-right { | |||
| width: 60rpx; | |||
| height: 60rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| } | |||
| } | |||
| .tabs-container { | |||
| margin-top: 88rpx; | |||
| padding-top: var(--status-bar-height, 44rpx); | |||
| background: #fff; | |||
| border-bottom: 1rpx solid #eee; | |||
| padding-left: 20rpx; | |||
| padding-right: 20rpx; | |||
| } | |||
| .user-list { | |||
| padding: 20rpx; | |||
| .user-item { | |||
| display: flex; | |||
| align-items: center; | |||
| background: #fff; | |||
| padding: 30rpx; | |||
| margin-bottom: 20rpx; | |||
| border-radius: 16rpx; | |||
| box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); | |||
| .user-avatar { | |||
| width: 100rpx; | |||
| height: 100rpx; | |||
| border-radius: 50rpx; | |||
| overflow: hidden; | |||
| margin-right: 30rpx; | |||
| image { | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| } | |||
| .user-info { | |||
| flex: 1; | |||
| .user-name { | |||
| font-size: 32rpx; | |||
| font-weight: 600; | |||
| color: #333; | |||
| margin-bottom: 12rpx; | |||
| } | |||
| .user-desc { | |||
| .user-tags { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| gap: 8rpx; | |||
| .tag { | |||
| background: #f0f0f0; | |||
| color: #666; | |||
| padding: 4rpx 12rpx; | |||
| border-radius: 12rpx; | |||
| font-size: 20rpx; | |||
| } | |||
| .auth-tag { | |||
| background: #52c41a; | |||
| color: #fff; | |||
| padding: 4rpx 12rpx; | |||
| border-radius: 12rpx; | |||
| font-size: 20rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .user-action { | |||
| .follow-btn { | |||
| background: #5baaff; | |||
| color: #fff; | |||
| border: none; | |||
| padding: 16rpx 32rpx; | |||
| border-radius: 30rpx; | |||
| font-size: 24rpx; | |||
| &.followed { | |||
| background: #f0f0f0; | |||
| color: #666; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .empty-state { | |||
| padding: 100rpx 0; | |||
| text-align: center; | |||
| } | |||
| .loading-state { | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 60rpx 0; | |||
| text { | |||
| margin-top: 20rpx; | |||
| font-size: 28rpx; | |||
| color: #999; | |||
| } | |||
| } | |||
| </style> | |||
+ 797
- 0
pages_order/profile/userProfile.vue
View File
| @ -0,0 +1,797 @@ | |||
| <template> | |||
| <view class="profile-page"> | |||
| <!-- 顶部导航 --> | |||
| <!-- <navbar | |||
| :title="userProfile.nickName || '用户主页'" | |||
| :leftClick="true" | |||
| :moreClick="showMoreOptions" | |||
| bgColor="transparent" | |||
| color="#fff" | |||
| @leftClick="$utils.navigateBack" | |||
| /> --> | |||
| <!-- 用户信息头部 --> | |||
| <view class="profile-header"> | |||
| <!-- 背景装饰 --> | |||
| <view class="header-bg"></view> | |||
| <!-- 返回按钮 --> | |||
| <view class="back-btn" @click="$utils.navigateBack"> | |||
| <uv-icon name="arrow-left" size="30rpx" color="#fff"></uv-icon> | |||
| </view> | |||
| <!-- 用户基本信息 --> | |||
| <view class="user-info"> | |||
| <view class="user-avatar"> | |||
| <image :src="userProfile.headImage" mode="aspectFill" @click="previewAvatar"></image> | |||
| <!-- VIP标识 --> | |||
| <view class="vip-badge" v-if="userProfile.isPay"> | |||
| <text>{{ getVipLevel(userProfile.isPay) }}</text> | |||
| </view> | |||
| </view> | |||
| <view class="user-details"> | |||
| <view class="username">{{ userProfile.nickName }}</view> | |||
| <view class="user-tags"> | |||
| <!-- 性别年龄 --> | |||
| <view class="tag gender-tag" v-if="userProfile.sex"> | |||
| <uv-icon :name="sexIcons[userProfile.sex]" size="24rpx" :color="sexColors[userProfile.sex]"></uv-icon> | |||
| <text>{{ userProfile.sex }}</text> | |||
| <text v-if="userProfile.yearDate">{{ getAge() }}岁</text> | |||
| </view> | |||
| <!-- 地址 --> | |||
| <view class="tag location-tag" v-if="userProfile.address"> | |||
| <uv-icon name="map-pin" size="20rpx" color="#666"></uv-icon> | |||
| <text>{{ userProfile.address }}</text> | |||
| </view> | |||
| <!-- 认证状态 --> | |||
| <view class="tag auth-tag" v-if="userProfile.idCardOpen"> | |||
| <uv-icon name="checkmark-circle-fill" size="20rpx" color="#52c41a"></uv-icon> | |||
| <text>{{ getAuthText(userProfile.idCardOpen) }}</text> | |||
| </view> | |||
| </view> | |||
| <!-- 学校信息 --> | |||
| <view class="school-info" v-if="userProfile.czSchool || userProfile.gzSchool"> | |||
| <text v-if="userProfile.czSchool">🎓 {{ userProfile.czSchool }}</text> | |||
| <text v-if="userProfile.gzSchool">🏫 {{ userProfile.gzSchool }}</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- 数据统计 --> | |||
| <view class="stats-row"> | |||
| <view class="stat-item" @click="showFans"> | |||
| <view class="stat-number">{{ userProfile.intentionNum || 0 }}</view> | |||
| <view class="stat-label">粉丝</view> | |||
| </view> | |||
| <view class="stat-item" @click="showFollowing"> | |||
| <view class="stat-number">{{ userProfile.followNum || 0 }}</view> | |||
| <view class="stat-label">关注</view> | |||
| </view> | |||
| <view class="stat-item" @click="showLikes"> | |||
| <view class="stat-number">{{ userProfile.likeNum || 0 }}</view> | |||
| <view class="stat-label">获赞</view> | |||
| </view> | |||
| </view> | |||
| <!-- 操作按钮 --> | |||
| <view class="action-buttons" v-if="!isCurrentUser"> | |||
| <button class="follow-btn" :class="{followed: isFollowed}" @click="toggleFollow"> | |||
| <uv-icon :name="isFollowed ? 'checkmark' : 'plus'" size="24rpx"></uv-icon> | |||
| <text>{{ isFollowed ? '已关注' : '关注' }}</text> | |||
| </button> | |||
| <button class="message-btn" @click="sendMessage"> | |||
| <uv-icon name="chat" size="24rpx"></uv-icon> | |||
| <text>私信</text> | |||
| </button> | |||
| </view> | |||
| </view> | |||
| <!-- 内容标签页 --> | |||
| <view class="content-tabs"> | |||
| <uv-tabs | |||
| :list="contentTabs" | |||
| :current="currentTabIndex" | |||
| :activeStyle="{color: '#333', fontWeight: 600}" | |||
| lineColor="#5baaff" | |||
| lineHeight="6rpx" | |||
| lineWidth="40rpx" | |||
| keyName="name" | |||
| @click="onTabClick" | |||
| /> | |||
| </view> | |||
| <!-- 内容区域 --> | |||
| <view class="content-container"> | |||
| <!-- 帖子 - 瀑布流展示 --> | |||
| <view v-if="currentTabIndex === 0" class="posts-content"> | |||
| <waterfallContainer | |||
| v-if="postsList.length > 0" | |||
| :list="postsList" | |||
| @item-click="onPostClick" | |||
| @item-like="onPostLike" | |||
| /> | |||
| </view> | |||
| <!-- 租房信息 --> | |||
| <view v-else-if="currentTabIndex === 1" class="renting-content"> | |||
| <rentingItem | |||
| v-for="(item, index) in rentingList" | |||
| :key="index" | |||
| :item="item" | |||
| @click="onRentingClick(item)" | |||
| /> | |||
| </view> | |||
| <!-- 招聘信息 --> | |||
| <view v-else-if="currentTabIndex === 2" class="work-content"> | |||
| <workItem | |||
| v-for="(item, index) in workList" | |||
| :key="index" | |||
| :item="item" | |||
| @click="onWorkClick(item)" | |||
| /> | |||
| </view> | |||
| <!-- 店铺信息 --> | |||
| <view v-else-if="currentTabIndex === 3" class="shop-content"> | |||
| <gourmetItem | |||
| v-for="(item, index) in shopList" | |||
| :key="index" | |||
| :item="item" | |||
| @click="onShopClick(item)" | |||
| /> | |||
| </view> | |||
| <!-- 加载更多提示 --> | |||
| <view v-if="showLoadMore" class="load-more-state"> | |||
| <uv-loading-icon size="32"></uv-loading-icon> | |||
| <text>加载更多...</text> | |||
| </view> | |||
| <!-- 没有更多数据提示 --> | |||
| <view v-if="showNoMore" class="no-more-state"> | |||
| <text>— 没有更多了 —</text> | |||
| </view> | |||
| </view> | |||
| <!-- 空状态 --> | |||
| <view v-if="showEmptyState" class="empty-state"> | |||
| <uv-empty | |||
| :text="getEmptyText()" | |||
| :icon="getEmptyIcon()" | |||
| iconSize="120" | |||
| ></uv-empty> | |||
| </view> | |||
| <!-- 初始加载状态 --> | |||
| <view v-if="loading && currentList.length === 0" class="loading-state"> | |||
| <uv-loading-icon size="40"></uv-loading-icon> | |||
| <text>加载中...</text> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import navbar from '@/components/base/navbar.vue' | |||
| import waterfallContainer from '@/components/list/square/waterfallContainer.vue' | |||
| import rentingItem from '@/components/list/renting/rentingItem.vue' | |||
| import workItem from '@/components/list/work/workItem.vue' | |||
| import gourmetItem from '@/components/list/gourmet/gourmetItem.vue' | |||
| import { mapState } from 'vuex' | |||
| export default { | |||
| components: { | |||
| navbar, | |||
| waterfallContainer, | |||
| rentingItem, | |||
| workItem, | |||
| gourmetItem | |||
| }, | |||
| data() { | |||
| return { | |||
| userId: '', // 要查看的用户ID | |||
| userProfile: {}, // 用户资料 | |||
| currentTabIndex: 0, // 当前标签页索引 | |||
| contentTabs: [ | |||
| { name: '帖子', icon: 'grid' }, | |||
| { name: '租房', icon: 'home' }, | |||
| { name: '招聘', icon: 'search' }, | |||
| { name: '店铺', icon: 'shop' } | |||
| ], | |||
| postsList: [], // 帖子列表 | |||
| rentingList: [], // 租房列表 | |||
| workList: [], // 招聘列表 | |||
| shopList: [], // 店铺列表 | |||
| loading: false, // 初始加载状态 | |||
| loadingMore: false, // 加载更多状态 | |||
| isFollowed: false, // 是否已关注 | |||
| // 分页参数 | |||
| pageParams: { | |||
| postsList: { pageNum: 1, hasMore: true }, | |||
| rentingList: { pageNum: 1, hasMore: true }, | |||
| workList: { pageNum: 1, hasMore: true }, | |||
| shopList: { pageNum: 1, hasMore: true } | |||
| }, | |||
| sexIcons: { | |||
| '男': 'mars', | |||
| '女': 'venus', | |||
| '其他': 'transgender' | |||
| }, | |||
| sexColors: { | |||
| '男': '#4A90E2', | |||
| '女': '#FF69B4', | |||
| '其他': '#999' | |||
| } | |||
| } | |||
| }, | |||
| computed: { | |||
| ...mapState(['userInfo']), | |||
| // 是否是当前登录用户 | |||
| isCurrentUser() { | |||
| return this.userInfo.id === this.userId | |||
| }, | |||
| // 当前显示的列表 | |||
| currentList() { | |||
| const listMap = ['postsList', 'rentingList', 'workList', 'shopList'] | |||
| return this[listMap[this.currentTabIndex]] || [] | |||
| }, | |||
| // 当前列表的分页参数 | |||
| currentPageParams() { | |||
| const listMap = ['postsList', 'rentingList', 'workList', 'shopList'] | |||
| return this.pageParams[listMap[this.currentTabIndex]] | |||
| }, | |||
| // 是否显示空状态 | |||
| showEmptyState() { | |||
| return !this.loading && this.currentList.length === 0 | |||
| }, | |||
| // 是否显示加载更多 | |||
| showLoadMore() { | |||
| return this.currentList.length > 0 && this.currentPageParams.hasMore && this.loadingMore | |||
| }, | |||
| // 是否显示没有更多 | |||
| showNoMore() { | |||
| return this.currentList.length > 0 && !this.currentPageParams.hasMore | |||
| } | |||
| }, | |||
| onLoad(options) { | |||
| this.userId = options.userId || this.userInfo.id | |||
| this.loadUserProfile() | |||
| this.loadUserContent(false) | |||
| }, | |||
| onPullDownRefresh() { | |||
| this.loadUserProfile() | |||
| this.refreshUserContent() | |||
| }, | |||
| onReachBottom() { | |||
| this.loadMoreContent() | |||
| }, | |||
| methods: { | |||
| // 显示更多选项 | |||
| showMoreOptions() { | |||
| uni.showActionSheet({ | |||
| itemList: ['举报用户', '拉黑用户'], | |||
| success: (res) => { | |||
| if (res.tapIndex === 0) { | |||
| this.reportUser() | |||
| } else if (res.tapIndex === 1) { | |||
| this.blockUser() | |||
| } | |||
| } | |||
| }) | |||
| }, | |||
| // 预览头像 | |||
| previewAvatar() { | |||
| if (this.userProfile.headImage) { | |||
| uni.previewImage({ | |||
| urls: [this.userProfile.headImage] | |||
| }) | |||
| } | |||
| }, | |||
| // 获取VIP等级 | |||
| getVipLevel(level) { | |||
| const levels = ['', 'VIP', 'SVIP'] | |||
| return levels[level] || '' | |||
| }, | |||
| // 获取年龄 | |||
| getAge() { | |||
| if (!this.userProfile.yearDate) return '' | |||
| const birthYear = parseInt(this.userProfile.yearDate) | |||
| const currentYear = new Date().getFullYear() | |||
| return currentYear - birthYear | |||
| }, | |||
| // 获取认证文本 | |||
| getAuthText(status) { | |||
| const authTexts = ['审核中', '个人认证', '店铺认证'] | |||
| return authTexts[status] || '未认证' | |||
| }, | |||
| // 标签页切换 | |||
| onTabClick(item) { | |||
| this.currentTabIndex = item.index | |||
| this.refreshUserContent() | |||
| }, | |||
| // 切换关注状态 | |||
| toggleFollow() { | |||
| if (!uni.getStorageSync('token')) { | |||
| uni.showToast({ | |||
| title: '请先登录', | |||
| icon: 'none' | |||
| }) | |||
| return | |||
| } | |||
| this.isFollowed = !this.isFollowed | |||
| // 这里调用关注/取消关注API | |||
| this.$api(this.isFollowed ? 'followUser' : 'unfollowUser', { | |||
| userId: this.userId | |||
| }, res => { | |||
| if (res.code === 200) { | |||
| uni.showToast({ | |||
| title: this.isFollowed ? '关注成功' : '取消关注', | |||
| icon: 'success' | |||
| }) | |||
| } | |||
| }) | |||
| }, | |||
| // 发送私信 | |||
| sendMessage() { | |||
| if (!uni.getStorageSync('token')) { | |||
| uni.showToast({ | |||
| title: '请先登录', | |||
| icon: 'none' | |||
| }) | |||
| return | |||
| } | |||
| uni.navigateTo({ | |||
| url: `/pages_order/chat/chatDetail?userId=${this.userId}` | |||
| }) | |||
| }, | |||
| // 显示粉丝列表 | |||
| showFans() { | |||
| uni.navigateTo({ | |||
| url: `/pages_order/profile/fansList?userId=${this.userId}&type=fans` | |||
| }) | |||
| }, | |||
| // 显示关注列表 | |||
| showFollowing() { | |||
| uni.navigateTo({ | |||
| url: `/pages_order/profile/fansList?userId=${this.userId}&type=following` | |||
| }) | |||
| }, | |||
| // 显示点赞列表 | |||
| showLikes() { | |||
| uni.showToast({ | |||
| title: '功能开发中', | |||
| icon: 'none' | |||
| }) | |||
| }, | |||
| // 加载用户资料 | |||
| loadUserProfile() { | |||
| this.loading = true | |||
| this.$api('getUserProfile', { userId: this.userId }, res => { | |||
| this.loading = false | |||
| uni.stopPullDownRefresh() | |||
| if (res.code === 200) { | |||
| this.userProfile = res.result | |||
| // 检查是否已关注（如果不是当前用户） | |||
| if (!this.isCurrentUser) { | |||
| this.checkFollowStatus() | |||
| } | |||
| } | |||
| }) | |||
| }, | |||
| // 检查关注状态 | |||
| checkFollowStatus() { | |||
| this.$api('checkFollowStatus', { userId: this.userId }, res => { | |||
| if (res.code === 200) { | |||
| this.isFollowed = res.result.isFollowed | |||
| } | |||
| }) | |||
| }, | |||
| // 刷新用户内容（重置分页） | |||
| refreshUserContent() { | |||
| const listMap = ['postsList', 'rentingList', 'workList', 'shopList'] | |||
| const currentListKey = listMap[this.currentTabIndex] | |||
| // 重置分页参数 | |||
| this.pageParams[currentListKey].pageNum = 1 | |||
| this.pageParams[currentListKey].hasMore = true | |||
| // 清空当前列表 | |||
| this[currentListKey] = [] | |||
| // 加载第一页数据 | |||
| this.loadUserContent(false) | |||
| }, | |||
| // 加载用户内容 | |||
| loadUserContent(isLoadMore = false) { | |||
| const apiMap = [ | |||
| 'getUserPosts', // 帖子 | |||
| 'getUserRenting', // 租房 | |||
| 'getUserWork', // 招聘 | |||
| 'getUserShop' // 店铺 | |||
| ] | |||
| const listMap = ['postsList', 'rentingList', 'workList', 'shopList'] | |||
| const currentListKey = listMap[this.currentTabIndex] | |||
| const currentPageParams = this.pageParams[currentListKey] | |||
| // 设置加载状态 | |||
| if (isLoadMore) { | |||
| this.loadingMore = true | |||
| } else { | |||
| this.loading = true | |||
| } | |||
| this.$api(apiMap[this.currentTabIndex], { | |||
| userId: this.userId, | |||
| pageNum: currentPageParams.pageNum, | |||
| pageSize: 20 | |||
| }, res => { | |||
| // 清除加载状态 | |||
| this.loading = false | |||
| this.loadingMore = false | |||
| uni.stopPullDownRefresh() | |||
| if (res.code === 200) { | |||
| const newData = res.result.records || res.result || [] | |||
| if (isLoadMore) { | |||
| // 加载更多：追加数据 | |||
| this[currentListKey] = [...this[currentListKey], ...newData] | |||
| } else { | |||
| // 首次加载：替换数据 | |||
| this[currentListKey] = newData | |||
| } | |||
| // 更新分页状态 | |||
| if (newData.length < 20) { | |||
| // 数据不足一页，说明没有更多了 | |||
| this.pageParams[currentListKey].hasMore = false | |||
| } else { | |||
| // 还有更多数据，页码+1 | |||
| this.pageParams[currentListKey].pageNum += 1 | |||
| } | |||
| } else { | |||
| // 请求失败，恢复分页参数 | |||
| if (isLoadMore && currentPageParams.pageNum > 1) { | |||
| this.pageParams[currentListKey].pageNum -= 1 | |||
| } | |||
| } | |||
| }) | |||
| }, | |||
| // 加载更多内容 | |||
| loadMoreContent() { | |||
| // 检查是否有更多数据和是否正在加载 | |||
| if (!this.currentPageParams.hasMore || this.loadingMore || this.loading) { | |||
| return | |||
| } | |||
| // 检查当前列表是否有数据 | |||
| if (this.currentList.length === 0) { | |||
| return | |||
| } | |||
| this.loadUserContent(true) | |||
| }, | |||
| // 点击帖子 | |||
| onPostClick(item) { | |||
| this.$utils.navigateTo(`/pages_order/post/postDetail?id=${item.id}`) | |||
| }, | |||
| // 点赞帖子 | |||
| onPostLike(item) { | |||
| console.log('点赞帖子:', item.id) | |||
| }, | |||
| // 点击租房 | |||
| onRentingClick(item) { | |||
| this.$utils.navigateTo(`/pages_order/renting/rentingDetail?id=${item.id}`) | |||
| }, | |||
| // 点击招聘 | |||
| onWorkClick(item) { | |||
| this.$utils.navigateTo(`/pages_order/work/workDetail?id=${item.id}`) | |||
| }, | |||
| // 点击店铺 | |||
| onShopClick(item) { | |||
| this.$utils.navigateTo(`/pages_order/gourmet/gourmetDetail?id=${item.id}`) | |||
| }, | |||
| // 举报用户 | |||
| reportUser() { | |||
| uni.showToast({ | |||
| title: '举报功能开发中', | |||
| icon: 'none' | |||
| }) | |||
| }, | |||
| // 拉黑用户 | |||
| blockUser() { | |||
| uni.showModal({ | |||
| title: '确认拉黑该用户？', | |||
| success: (res) => { | |||
| if (res.confirm) { | |||
| // 调用拉黑API | |||
| uni.showToast({ | |||
| title: '拉黑功能开发中', | |||
| icon: 'none' | |||
| }) | |||
| } | |||
| } | |||
| }) | |||
| }, | |||
| // 获取空状态文本 | |||
| getEmptyText() { | |||
| const emptyTexts = ['暂无帖子', '暂无租房信息', '暂无招聘信息', '暂无店铺信息'] | |||
| return emptyTexts[this.currentTabIndex] || '暂无数据' | |||
| }, | |||
| // 获取空状态图标 | |||
| getEmptyIcon() { | |||
| const emptyIcons = ['list', 'home', 'search', 'shop'] | |||
| return emptyIcons[this.currentTabIndex] || 'list' | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .profile-page { | |||
| background-color: #f5f5f5; | |||
| min-height: 100vh; | |||
| } | |||
| .profile-header { | |||
| position: relative; | |||
| padding: 40rpx 30rpx 40rpx; | |||
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |||
| padding-top: 180rpx; | |||
| .header-bg { | |||
| position: absolute; | |||
| top: 0; | |||
| left: 0; | |||
| right: 0; | |||
| bottom: 0; | |||
| background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%); | |||
| } | |||
| .back-btn { | |||
| position: absolute; | |||
| top: 80rpx; | |||
| left: 30rpx; | |||
| z-index: 3; | |||
| width: 70rpx; | |||
| height: 70rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| background: rgba(255, 255, 255, 0.2); | |||
| border-radius: 50%; | |||
| backdrop-filter: blur(10rpx); | |||
| } | |||
| .user-info { | |||
| position: relative; | |||
| z-index: 2; | |||
| display: flex; | |||
| margin-bottom: 40rpx; | |||
| .user-avatar { | |||
| position: relative; | |||
| margin-right: 30rpx; | |||
| image { | |||
| width: 160rpx; | |||
| height: 160rpx; | |||
| border-radius: 80rpx; | |||
| border: 6rpx solid rgba(255, 255, 255, 0.3); | |||
| } | |||
| .vip-badge { | |||
| position: absolute; | |||
| bottom: -10rpx; | |||
| left: 50%; | |||
| transform: translateX(-50%); | |||
| background: linear-gradient(45deg, #FFD700, #FFA500); | |||
| color: #333; | |||
| padding: 6rpx 16rpx; | |||
| border-radius: 20rpx; | |||
| font-size: 20rpx; | |||
| font-weight: 600; | |||
| } | |||
| } | |||
| .user-details { | |||
| flex: 1; | |||
| color: #fff; | |||
| .username { | |||
| font-size: 36rpx; | |||
| font-weight: 600; | |||
| margin-bottom: 16rpx; | |||
| } | |||
| .user-tags { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| gap: 12rpx; | |||
| margin-bottom: 16rpx; | |||
| .tag { | |||
| display: flex; | |||
| align-items: center; | |||
| background: rgba(255, 255, 255, 0.2); | |||
| padding: 8rpx 16rpx; | |||
| border-radius: 20rpx; | |||
| font-size: 22rpx; | |||
| text { | |||
| margin-left: 6rpx; | |||
| } | |||
| } | |||
| } | |||
| .school-info { | |||
| font-size: 24rpx; | |||
| opacity: 0.9; | |||
| text { | |||
| display: block; | |||
| margin-bottom: 6rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .stats-row { | |||
| position: relative; | |||
| z-index: 2; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| margin-bottom: 40rpx; | |||
| .stat-item { | |||
| text-align: center; | |||
| color: #fff; | |||
| .stat-number { | |||
| font-size: 40rpx; | |||
| font-weight: 600; | |||
| margin-bottom: 8rpx; | |||
| } | |||
| .stat-label { | |||
| font-size: 24rpx; | |||
| opacity: 0.8; | |||
| } | |||
| } | |||
| } | |||
| .action-buttons { | |||
| position: relative; | |||
| z-index: 2; | |||
| display: flex; | |||
| gap: 20rpx; | |||
| button { | |||
| flex: 1; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| padding: 20rpx 0; | |||
| border-radius: 50rpx; | |||
| font-size: 28rpx; | |||
| border: none; | |||
| text { | |||
| margin-left: 8rpx; | |||
| } | |||
| } | |||
| .follow-btn { | |||
| background: #fff; | |||
| color: #333; | |||
| &.followed { | |||
| background: rgba(255, 255, 255, 0.3); | |||
| color: #fff; | |||
| } | |||
| } | |||
| .message-btn { | |||
| background: rgba(255, 255, 255, 0.3); | |||
| color: #fff; | |||
| } | |||
| } | |||
| } | |||
| .content-tabs { | |||
| background: #fff; | |||
| border-bottom: 1rpx solid #eee; | |||
| padding: 0 20rpx; | |||
| } | |||
| .content-container { | |||
| min-height: 400rpx; | |||
| .posts-content, | |||
| .renting-content, | |||
| .work-content, | |||
| .shop-content { | |||
| padding: 20rpx 0; | |||
| } | |||
| } | |||
| .empty-state { | |||
| padding: 100rpx 0; | |||
| text-align: center; | |||
| } | |||
| .loading-state { | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 60rpx 0; | |||
| text { | |||
| margin-top: 20rpx; | |||
| font-size: 28rpx; | |||
| color: #999; | |||
| } | |||
| } | |||
| .load-more-state { | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 40rpx 0; | |||
| text { | |||
| margin-top: 15rpx; | |||
| font-size: 24rpx; | |||
| color: #666; | |||
| } | |||
| } | |||
| .no-more-state { | |||
| padding: 30rpx 0; | |||
| text-align: center; | |||
| text { | |||
| font-size: 24rpx; | |||
| color: #ccc; | |||
| } | |||
| } | |||
| </style> | |||