xinyouhe/panel-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整

Browse Source
This commit is contained in:
浅念
2025-12-26 11:52:22 +08:00
parent 988a4f47c2
commit 1fa9dfd61e
6 changed files with 981 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/index/index.vue
+238 -16
View File
@@ -1,6 +1,6 @@
<template>
<view class="home-page">
<z-paging ref="paging" :auto="false" v-model="contList" @query="queryList" empty-view-text="暂无数据！">
<z-paging ref="paging" :auto="false" v-model="contList" @query="queryList" empty-view-text="暂无数据！">
<!-- <template #top> -->
<!-- 轮播Banner -->
<swiper class="banner-swiper" circular autoplay :interval="4000" indicator-dots indicator-color="rgba(255,255,255,.4)"
@@ -14,6 +14,60 @@
</swiper>
<!-- </template> -->
<!-- 内容网格 -->
<!-- <u-sticky offset-top="40"> -->
<view class="search">
<view class="search-input-wrapper">
<view class="search-input-box">
<view v-if="searchTag" class="search-tag">
<text>{{searchTag}}</text>
<uni-icons type="closeempty" size="14" color="#666" @click="removeSearchTag"></uni-icons>
</view>
<input
class="search-input"
:placeholder="searchTag ? '' : '请输入搜索内容'"
v-model="searchKeyword"
@confirm="handleSearch"
@input="handleSearchInput"
/>
<uni-icons type="search" size="18" color="#909399" @click="handleSearch"></uni-icons>
</view>
</view>
<view class="sort-options">
<view
class="sort-item"
:class="{active: sortField === 'browse'}"
@click="toggleSort('browse')"
>
<text>观看量</text>
<view class="">
<u-icon name="arrow-up-fill" size="8" :color="sortField === 'browse'&&sortOrder === 'asc' ? '#206ff4' : '#666'"></u-icon>
<u-icon name="arrow-down-fill" size="8" :color="sortField === 'browse'&&sortOrder === 'desc' ? '#206ff4' : '#666'" ></u-icon>
</view>
<!-- <uni-icons
:type="sortField === 'like' ? (sortOrder === 'desc' ? 'arrowdown' : 'arrowup') : 'arrowup'"
:color="sortField === 'like' ? '#206ff4' : '#666'"
size="14"
></uni-icons> -->
</view>
<view
class="sort-item"
:class="{active: sortField === 'favorite'}"
@click="toggleSort('favorite')"
>
<text>收藏量</text>
<view class="">
<u-icon name="arrow-up-fill" size="8" :color="sortField === 'favorite'&&sortOrder === 'asc' ? '#206ff4' : '#666'"></u-icon>
<u-icon name="arrow-down-fill" size="8" :color="sortField === 'favorite'&&sortOrder === 'desc' ? '#206ff4' : '#666'" ></u-icon>
</view>
<!-- <uni-icons
:type="sortField === 'favorite' ? (sortOrder === 'desc' ? 'arrowdown' : 'arrowup') : 'arrowup'"
:color="sortField === 'favorite' ? '#206ff4' : '#666'"
size="14"
></uni-icons> -->
</view>
</view>
</view>
<!-- </u-sticky> -->
<view class="content-grid">
<square-post-card
class="grid-item"
@@ -58,9 +112,12 @@
<script>
import { request,showToast } from '@/api/apiT.js'
import SquarePostCard from '@/components/SquarePostCard.vue'
import uInput from '@/uni_modules/uview-ui/components/u-input/u-input.vue'
// import uSticky from '@/uni_modules/uview-ui/components/u-sticky/u-sticky.vue'
export default {
components: {
SquarePostCard
SquarePostCard,uInput
},
data() {
return {
@@ -71,8 +128,11 @@
show: false,
showlang: false,
searchKeyword: '',
searchTag: '', // 搜索标签（如 #包豪斯）
bannerList: [],
contList: [],
sortField: '', // 排序字段：''(时间) 或 'browse'(观看量) 或 'favorite'(收藏量)
sortOrder: 'desc', // 排序方向：'asc' 升序 或 'desc' 降序
columns: [
[{
label: this.$t('zh'),
@@ -88,18 +148,19 @@
}
},
onLoad() {
// if(uni.getStorageSync('token')){
// // this.$refs.paging && this.$refs.paging.reload()
// }else{
// this.mini_login()
// }
if (!uni.getStorageSync('token')) {
this.mini_login().then(() => {
this.bannerListfn()
this.$refs.paging && this.$refs.paging.reload()
})
}else{
this.bannerListfn()
this.$refs.paging && this.$refs.paging.reload()
}
},
onTabItemTap() {
this.reloadPage()
},
onShow() {
uni.setTabBarItem({
index: 0,
@@ -117,16 +178,19 @@
index: 3,
text: this.$t('tabbar.mine')
})
if(uni.getStorageSync('token')){
this.bannerListfn()
this.$refs.paging && this.$refs.paging.reload()
}
// if(uni.getStorageSync('token')){
// this.bannerListfn()
// this.$refs.paging && this.$refs.paging.reload()
// }
},
methods: {
async initPage(){
await this.mini_login()
await this.bannerListfn()
},
reloadPage() {
this.$refs.paging.reload()
},
bannerListfn(){
request({
url:'common/banner/list',
@@ -156,19 +220,48 @@
close(value){
this[value] = false
},
queryList(pageNo, pageSize) {
queryList(pageNo, pageSize, from) {
// 如果是用户下拉刷新（from === 'user-pull-down'），重置为默认时间排序
if(from === 'user-pull-down' && this.sortField !== ''){
this.sortField = '';
this.sortOrder = 'desc';
}
this.loading = true;
var that = this;
const params = {
current:pageNo,
size:10
};
// 添加搜索参数
if(this.searchTag){
params.keyword = this.searchTag.replace('#', '');
} else if(this.searchKeyword){
params.keyword = this.searchKeyword;
}
// 添加排序参数（如果后端支持）
if(this.sortField){
params.sort_by = this.sortField;
params.order = this.sortOrder;
} else {
// 默认按时间排序
params.sort_by = '';
params.order = 'desc';
}
request({
url:'common/post/list',
method:'get',
data: {
current:pageNo,
size:10
}
data: params
}).then(res => {
if(res.data.code ==200){
var datas = res.data.data.records;
// // 前端排序作为备选方案（如果后端不支持排序参数）
// if(this.sortField && datas.length > 0){
// datas = this.sortList(datas);
// } else if(!this.sortField && datas.length > 0){
// // 默认按时间排序
// datas = this.sortListByTime(datas);
// }
this.$refs.paging.complete(datas);
}else{
// this.$refs.paging.complete(null);
@@ -178,6 +271,71 @@
//
})
},
// 处理搜索输入
handleSearchInput(e) {
const value = e.detail.value;
// 检测是否输入了标签格式（#开头）
if(value.startsWith('#')){
this.searchTag = value;
this.searchKeyword = '';
} else {
this.searchKeyword = value;
if(this.searchTag){
this.searchTag = '';
}
}
},
// 处理搜索
handleSearch() {
if(this.searchKeyword && this.searchKeyword.startsWith('#')){
this.searchTag = this.searchKeyword;
this.searchKeyword = '';
}
// 重新加载数据
this.$refs.paging && this.$refs.paging.reload();
},
// 移除搜索标签
removeSearchTag() {
this.searchTag = '';
this.searchKeyword = '';
// 重新加载数据
this.$refs.paging && this.$refs.paging.reload();
},
// 切换排序
toggleSort(field) {
if(this.sortField === field){
// 如果点击的是当前排序字段，切换排序方向
this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
} else {
// 如果点击的是新字段，设置为降序
this.sortField = field;
this.sortOrder = 'desc';
}
// 重新加载数据
this.$refs.paging && this.$refs.paging.reload();
},
// 前端排序（如果后端不支持排序，使用这个）
sortList(list) {
const field = this.sortField;
const order = this.sortOrder;
return [...list].sort((a, b) => {
const aVal = a[field] || 0;
const bVal = b[field] || 0;
if(order === 'asc'){
return aVal - bVal;
} else {
return bVal - aVal;
}
});
},
// 按时间排序
sortListByTime(list) {
return [...list].sort((a, b) => {
const aTime = new Date(a.created_at || a.create_time || a.createdAt || 0).getTime();
const bTime = new Date(b.created_at || b.create_time || b.createdAt || 0).getTime();
return bTime - aTime; // 降序：最新的在前
});
},
//语言切换事件
confirmlang(e) {
var that = this
@@ -297,6 +455,7 @@
uni.setStorageSync('openid', res.data.data.openid);
uni.setStorageSync('token', res.data.data.token);
uni.setStorageSync('user_id', res.data.data.id);
if (res.data.data.mobile) {
uni.setStorageSync('is_login', true);
@@ -383,6 +542,69 @@
color: #51B6FF;
text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2);
}
.search{
padding: 20rpx;
display: flex;
align-items: center;
gap: 20rpx;
background: #fff;
}
.search-input-wrapper{
flex: 1;
}
.search-input-box{
display: flex;
align-items: center;
background: #F5F6FA;
border-radius: 10rpx;
padding: 15rpx 24rpx;
gap: 12rpx;
}
.search-tag{
display: flex;
align-items: center;
background: #fff;
border-radius: 20rpx;
padding: 4rpx 12rpx;
gap: 8rpx;
font-size: 24rpx;
color: #333;
margin-right: 8rpx;
flex-shrink: 0;
}
.search-tag text{
font-size: 24rpx;
color: #333;
}
.search-input{
flex: 1;
font-size: 28rpx;
color: #333;
background: transparent;
border: none;
}
.sort-options{
display: flex;
align-items: center;
gap: 24rpx;
flex-shrink: 0;
}
.sort-item{
display: flex;
align-items: center;
gap: 6rpx;
font-size: 26rpx;
color: #666;
cursor: pointer;
transition: color 0.3s;
}
.sort-item.active{
color: #206ff4;
font-weight: 500;
}
.sort-item text{
font-size: 26rpx;
}
.content-grid{
display: flex;
flex-wrap: wrap;