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;
pages/mine/changinfo.vue
+10 -3
View File
@@ -17,6 +17,13 @@
<uni-icons type="right" size="18"></uni-icons>
</view>
</view>
<view class="cell1">
<view>工号</view>
<view class="right select">
<input placeholder="请输入工号" v-model="userinfo.sn"></input>
<uni-icons type="right" size="18"></uni-icons>
</view>
</view>
</view>
<view class="foot">
<button class="btn" @click="bcFn">{{$t('button.save')}}</button>
@@ -38,8 +45,7 @@
userinfo:{
nickname:'',
avatar:'',
company:'',
phone:'',
sn:''
},
}
@@ -87,7 +93,8 @@
method:'POST',
data:{
nickname:this.userinfo.nickname,
avatar:this.userinfo.avatar
avatar:this.userinfo.avatar,
sn:this.userinfo.sn
}
}).then(res => {
uni.showToast({
pages/mine/my_favorites.vue
+249 -12
View File
@@ -1,7 +1,48 @@
<template>
<view class="content">
<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000" backgroundColor="#fff" :statusBar="true" title="我的发布"></uni-nav-bar>
<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>
</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>
</view>
</view>
</view>
<view class="year-selector" @click="showYearPicker">
<text class="year-text">{{selectedYear}}年</text>
<uni-icons type="arrowdown" size="14" color="#666"></uni-icons>
@@ -21,9 +62,15 @@
<text class="date-month">{{group.month}}月</text>
</view>
<view class="posts-container">
<view v-for="post in group.posts" :key="post.id" class="post-item" @click="viewPost(post)">
<image class="post-image" :src="post.media && post.media[0] ? post.media[0].url_pull : '/static/image/placeholder.png'" mode="aspectFill"></image>
<text class="post-tag">{{post.content || ''}}</text>
<view v-for="post in group.posts" :key="post.id" class="post-item">
<image @click="viewPost(post)" class="post-image" :src="post.media && post.media[0] ? post.media[0].url_pull : '/static/image/placeholder.png'" mode="aspectFill"></image>
<view class="" style="flex: 1;display: flex;">
<view @click="viewPost(post)" class="post-tag">{{ formatContent(post.content) }}</view>
<view class="" style="width: 80rpx;text-align: right;">
<uni-icons @click="delpost(post.id)" type="trash" color="#999" size="20"></uni-icons>
</view>
</view>
</view>
</view>
</view>
@@ -86,6 +133,10 @@
pageSize: 10, // 每页数量
hasMore: true, // 是否还有更多数据
total: 0, // 总数据量
searchKeyword: '',
searchTag: '', // 搜索标签（如 #包豪斯）
sortField: '', // 排序字段：''(时间) 或 'browse'(观看量) 或 'favorite'(收藏量)
sortOrder: 'desc', // 排序方向：'asc' 升序 或 'desc' 降序
}
},
computed: {
@@ -100,6 +151,10 @@
this.loadPostList();
},
methods: {
formatContent(str) {
if (!str) return '';
return str.length > 30 ? str.slice(0, 30) + '...' : str;
},
leftClick() {
// uni.navigateBack()
uni.reLaunch({
@@ -122,6 +177,101 @@
this.loadPostList(false);
}
},
//删除帖子
delpost(item){
const that = this;
uni.showModal({
title: '提示',
content: '确定要删除当前帖子吗？',
success: function (res) {
if (res.confirm) {
request({
url:'common/post/destroy',
method:'POST',
data:{
id:item
}
}).then(res => {
if(res.data.code === 200){
// 从帖子列表中移除
const index = that.postList.findIndex(post => post.id === item);
if(index > -1){
that.postList.splice(index, 1);
// 重新分组
that.groupPostsByDate();
// 更新总数
that.total = Math.max(0, that.total - 1);
}
uni.showToast({
title:res.data.message || '删除成功',
icon: 'none'
});
} else {
uni.showToast({
title:res.data.message || '删除失败',
icon: 'none'
});
}
})
}
},
})
},
// 处理搜索输入
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.page = 1;
this.hasMore = true;
this.postList = [];
this.groupedPosts = {};
this.loadPostList(false);
},
// 移除搜索标签
removeSearchTag() {
this.searchTag = '';
this.searchKeyword = '';
// 重新加载数据
this.page = 1;
this.hasMore = true;
this.postList = [];
this.groupedPosts = {};
this.loadPostList(false);
},
// 切换排序
toggleSort(field) {
if(this.sortField === field){
// 如果点击的是当前排序字段，切换排序方向
this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
} else {
// 如果点击的是新字段，设置为降序
this.sortField = field;
this.sortOrder = 'desc';
}
// 重新加载数据
this.page = 1;
this.hasMore = true;
this.postList = [];
this.groupedPosts = {};
this.loadPostList(false);
},
// 加载帖子列表
loadPostList(isLoadMore = false) {
// 防止重复请求
@@ -144,17 +294,37 @@
}
}
// 构建请求参数
const params = {
// 只获取当前用户发布的帖子，后端应该根据token自动过滤
current: this.page,
size: this.pageSize,
scene:'self',
year:this.selectedYear
};
// 添加搜索参数
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: {
// 只获取当前用户发布的帖子，后端应该根据token自动过滤
current: this.page,
size: this.pageSize,
scene:'self',
year:this.selectedYear
}
data: params
}).then(res => {
this.loading = false;
this.loadingMore = false;
@@ -255,6 +425,11 @@
this.refreshing = false;
return;
}
// 下拉刷新时重置为默认时间排序
if(this.sortField !== ''){
this.sortField = '';
this.sortOrder = 'desc';
}
this.refreshing = true;
this.page = 1;
this.hasMore = true;
@@ -284,7 +459,69 @@
height: 100%;
background-color: #fff;
}
.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;
}
.year-selector {
display: flex;
align-items: center;
pages/mine/my_release.vue
+173 -5
View File
@@ -3,6 +3,48 @@
<z-paging ref="paging" :auto="false" v-model="contList" @query="queryList" empty-view-text="暂无数据！">
<template #top>
<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000" backgroundColor="#fff" :statusBar="true" title="我的收藏"></uni-nav-bar>
<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>
</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>
</view>
</view>
</view>
</template>
<!-- 内容网格 -->
<view class="content-grid">
@@ -29,7 +71,11 @@
},
data() {
return {
contList:[]
contList:[],
searchKeyword: '',
searchTag: '', // 搜索标签（如 #包豪斯）
sortField: '', // 排序字段：''(时间) 或 'browse'(观看量) 或 'favorite'(收藏量)
sortOrder: 'desc', // 排序方向：'asc' 升序 或 'desc' 降序
}
},
onLoad() {
@@ -54,13 +100,29 @@
queryList(pageNo, pageSize) {
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/favorite/self',
method:'get',
data: {
current:pageNo,
size:10
}
data: params
}).then(res => {
if(res.data.code ==200){
@@ -74,6 +136,49 @@
//
})
},
// 处理搜索输入
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();
}
}
}
@@ -86,6 +191,69 @@
box-sizing: border-box;
padding-bottom: 120rpx;
}
.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;
pages/publish/index.vue
+239 -206
View File
@@ -14,6 +14,14 @@
<u-icon name="arrow-down" color="#fff" size="20"></u-icon>
</view>
</picker>
<view class="mag-top">
<view class="section-label">型号</view>
<MultiSelectSearch
v-model="form.model"
:options="modelOptions"
placeholder="请输入型号，支持搜索和直接输入"
/>
</view>
<view class="mag-top">
<textarea v-model="form.content" class="content-textarea" placeholder="请输入文字内容"
:maxlength="maxWords" @input="handleContentInput" />
@@ -45,6 +53,10 @@
<u-icon name="info-circle" size="18" color="#A6ABB7"></u-icon>
<text>文字不多于2000字,图片不多于9张</text>
</view>
<view class="mag-top">
<view class="section-label">小区名称(选填)</view>
<input type="text" v-model="form.location_name" placeholder="请输入小区名称" />
</view>
</view>
<view class="agreement">
@@ -95,229 +107,250 @@
<script>
import { request,showToast } from '@/api/apiT.js'
export default {
name: 'PublishPage',
data(){
return {
categoryOptions:[],
form:{
category:'',
category_id:'',
content:'',
media:[]
import MultiSelectSearch from '@/components/MultiSelectSearch.vue'
export default {
components: {
MultiSelectSearch
},
name: 'PublishPage',
data(){
return {
categoryOptions:[],
modelOptions:[], // 型号选项列表
form:{
category:'',
category_id:'',
model:[], // 改为数组支持多选
content:'',
location_name:'',
media:[]
},
selfChecked: false,
showlogin:false,
viewAgreementcont:'',
iconurl:'',
maxWords:2000,
maxMedia:9,
agree:false,
show:false,
}
},
computed:{
canSubmit(){
return this.agree && this.form.content.trim().length>0 && this.form.media.length>0
}
},
onLoad() {
this.getcategory()
this.getModelOptions()
},
onShow() {
this.syncTabbar()
},
methods:{
goprivacy(){
uni.navigateTo({
url: '/pages/login/agreement',// 替换为你要跳转的页面路径
});
},
selfChecked: false,
showlogin:false,
viewAgreementcont:'',
iconurl:'',
maxWords:2000,
maxMedia:9,
agree:false,
show:false,
}
},
computed:{
canSubmit(){
return this.agree && this.form.content.trim().length>0 && this.form.media.length>0
}
},
onLoad() {
this.getcategory()
},
onShow() {
this.syncTabbar()
},
methods:{
goprivacy(){
uni.navigateTo({
url: '/pages/login/agreement',// 替换为你要跳转的页面路径
});
},
gouser(){
uni.navigateTo({
url: '/pages/login/agreementuser',// 替换为你要跳转的页面路径
});
},
selfChangde(e) {
this.selfChecked = !this.selfChecked;
},
loginbtn(){
if(!this.selfChecked){
uni.showToast({
title:this.$t('home.arginimg'),
icon: 'none'
gouser(){
uni.navigateTo({
url: '/pages/login/agreementuser',// 替换为你要跳转的页面路径
});
return false
}
},
getPhoneNumber(e) {
let that = this;
request({
url:'miniapp/phone',
method:'POST',
data:{
phone_code: e.detail.code,
}
}).then(res => {
if (res.data.code == -1) {
},
selfChangde(e) {
this.selfChecked = !this.selfChecked;
},
loginbtn(){
if(!this.selfChecked){
uni.showToast({
title: res.data.msg,
title:this.$t('home.arginimg'),
icon: 'none'
});
} else if (res.data.code == 200) {
uni.showToast({
title: '登录成功',
icon: 'none'
});
//返回数据接收成功
uni.setStorageSync('is_login', true);
return false
}
})
},
getcategory(){
request({
url:'common/post/category/list',
method:'GET'
}).then(res => {
if (res.data.code == 200) {
this.categoryOptions = res.data.data.records || [];
this.form.category = res.data.data.records[0].name
this.form.category_id = res.data.data.records[0].id
this.iconurl = res.data.data.records[0].icon_preset_pull
}
})
},
syncTabbar(){
uni.setTabBarItem({ index:0, text:this.$t('tabbar.home') })
uni.setTabBarItem({ index:1, text:this.$t('tabbar.square') })
uni.setTabBarItem({ index:2, text:this.$t('tabbar.publish') })
uni.setTabBarItem({ index:3, text:this.$t('tabbar.mine') })
},
goBack(){
uni.navigateBack()
},
onCategoryChange(e){
console.log(e)
const index = e.detail.value; // picker 返回的 index
const selectCity = this.categoryOptions[index]; // 直接取整条数据
this.iconurl = selectCity.icon_preset_pull
this.form.category = selectCity.name
this.form.category_id = selectCity.id
},
handleContentInput(e){
if(e.detail.value.length>this.maxWords){
this.form.content = e.detail.value.slice(0,this.maxWords)
}
},
uploadfn(imgUrl){
return new Promise((resolve, reject) => {
uni.uploadFile({
url: 'https://bsh.info.hb.hnzhwlkj.cn/upload/image?scene=postlist',
filePath: imgUrl,
name: 'image',
header:{'content-type': 'application/x-www-form-urlencoded','Fdesk-Auth-Token': 'Bearer ' + uni.getStorageSync('token'),'Fdesk-Language': uni.getStorageSync('i18locale')?uni.getStorageSync('i18locale'):'zh','Fdesk-Login-Type': 'wechat','Fdesk-System-Code':'wechat'},
success: (uploadFileRes) => {
const res = JSON.parse(uploadFileRes.data || '{}')
if(res && res.data && res.data.href){
resolve(res.data.href)
}else{
reject('上传失败')
}
},
fail: (err) => reject(err)
});
})
},
selectMedia(e){
const allowCount = this.maxMedia - this.form.media.length
if(allowCount <= 0){
uni.showToast({
title:`最多只能上传${this.maxMedia}张图片`,
icon:'none'
})
return
}
const tempFilePaths = e.tempFilePaths || (e.tempFiles || []).map(item => item.path || item.url)
const paths = tempFilePaths.slice(0, allowCount)
if(paths.length === 0){
return
}
Promise.all(paths.map(p => this.uploadfn(p))).then(urls => {
urls.forEach(url => {
this.form.media.push(url)
})
}).catch(() => {
uni.showToast({
title:'图片上传失败，请重试',
icon:'none'
})
})
},
delfn(e){
this.form.media.splice(e.index, 1)
},
deleteMedia(index){
this.form.media.splice(index, 1)
},
toggleAgreement(){
this.agree = !this.agree
},
viewAgreement(){
request({
url:'common/agreement?type=release_agreement',
method:'GET'
}).then(res => {
if (res.data.code == 200) {
this.viewAgreementcont = res.data.data.content
this.show = true
}
})
},
agreementbtn(){
this.agree = true
this.show = false
},
submitForm(){
if(!this.agree){
uni.showToast({
title: '请先同意发布协议！',
icon: 'none'
});
return
}
if(this.form.content==''||this.form.media.length==0){
uni.showToast({
title: '发布内容或图片不能为空！',
icon: 'none'
});
return
}
if(uni.getStorageSync('is_login')){
},
getPhoneNumber(e) {
let that = this;
request({
url:'common/post/store',
method:'post',
data:this.form
url:'miniapp/phone',
method:'POST',
data:{
phone_code: e.detail.code,
}
}).then(res => {
uni.showToast({
title: res.data.message,
icon: 'none'
});
if(res.data.code ==200){
setTimeout(() => {
uni.reLaunch({
url: '/pages/square/index',// 替换为你要跳转的页面路径
});
}, 1000);
if (res.data.code == 200) {
this.showlogin = false
//返回数据接收成功
uni.setStorageSync('is_login', true);
}
})
}else{
this.showlogin = true
},
getcategory(){
request({
url:'common/post/category/list',
method:'GET'
}).then(res => {
if (res.data.code == 200) {
this.categoryOptions = res.data.data.records || [];
this.form.category = res.data.data.records[0].name
this.form.category_id = res.data.data.records[0].id
this.iconurl = res.data.data.records[0].icon_preset_pull
}
})
},
getModelOptions(){
// 获取型号选项列表，如果后端有接口可以在这里调用
// 示例：从接口获取型号列表
request({
url:'common/sku/preset',
method:'GET'
}).then(res => {
if (res.data.code == 200) {
this.modelOptions = res.data.data || [];
}
})
},
syncTabbar(){
uni.setTabBarItem({ index:0, text:this.$t('tabbar.home') })
uni.setTabBarItem({ index:1, text:this.$t('tabbar.square') })
uni.setTabBarItem({ index:2, text:this.$t('tabbar.publish') })
uni.setTabBarItem({ index:3, text:this.$t('tabbar.mine') })
},
goBack(){
uni.navigateBack()
},
leftClick(){
uni.navigateBack()
},
onCategoryChange(e){
console.log(e)
const index = e.detail.value; // picker 返回的 index
const selectCity = this.categoryOptions[index]; // 直接取整条数据
this.iconurl = selectCity.icon_preset_pull
this.form.category = selectCity.name
this.form.category_id = selectCity.id
},
handleContentInput(e){
if(e.detail.value.length>this.maxWords){
this.form.content = e.detail.value.slice(0,this.maxWords)
}
},
uploadfn(imgUrl){
return new Promise((resolve, reject) => {
uni.uploadFile({
url: 'https://bsh.info.hb.hnzhwlkj.cn/upload/image?scene=postlist',
filePath: imgUrl,
name: 'image',
header:{'content-type': 'application/x-www-form-urlencoded','Fdesk-Auth-Token': 'Bearer ' + uni.getStorageSync('token'),'Fdesk-Language': uni.getStorageSync('i18locale')?uni.getStorageSync('i18locale'):'zh','Fdesk-Login-Type': 'wechat','Fdesk-System-Code':'wechat'},
success: (uploadFileRes) => {
const res = JSON.parse(uploadFileRes.data || '{}')
if(res && res.data && res.data.href){
resolve(res.data.href)
}else{
reject('上传失败')
}
},
fail: (err) => reject(err)
});
})
},
selectMedia(e){
const allowCount = this.maxMedia - this.form.media.length
if(allowCount <= 0){
uni.showToast({
title:`最多只能上传${this.maxMedia}张图片`,
icon:'none'
})
return
}
const tempFilePaths = e.tempFilePaths || (e.tempFiles || []).map(item => item.path || item.url)
const paths = tempFilePaths.slice(0, allowCount)
if(paths.length === 0){
return
}
Promise.all(paths.map(p => this.uploadfn(p))).then(urls => {
urls.forEach(url => {
this.form.media.push(url)
})
}).catch(() => {
uni.showToast({
title:'图片上传失败，请重试',
icon:'none'
})
})
},
delfn(e){
this.form.media.splice(e.index, 1)
},
deleteMedia(index){
this.form.media.splice(index, 1)
},
toggleAgreement(){
this.agree = !this.agree
},
viewAgreement(){
request({
url:'common/agreement?type=release_agreement',
method:'GET'
}).then(res => {
if (res.data.code == 200) {
this.viewAgreementcont = res.data.data.content
this.show = true
}
})
},
agreementbtn(){
this.agree = true
this.show = false
},
submitForm(){
if(!this.agree){
uni.showToast({
title: '请先同意发布协议！',
icon: 'none'
});
return
}
if(this.form.content==''||this.form.media.length==0){
uni.showToast({
title: '发布内容或图片不能为空！',
icon: 'none'
});
return
}
this.form.model = this.form.model.map(item => {
return item.model
})
if(uni.getStorageSync('is_login')){
request({
url:'common/post/store',
method:'post',
data:this.form
}).then(res => {
uni.showToast({
title: res.data.message,
icon: 'none'
});
if(res.data.code ==200){
setTimeout(() => {
uni.reLaunch({
url: '/pages/square/index',// 替换为你要跳转的页面路径
});
}, 1000);
}
})
}else{
this.showlogin = true
}
}
}
}
}
</script>
<style lang="scss">
pages/square/detiles.vue
+72 -10
View File
@@ -36,6 +36,9 @@
<view class="post-content">
<text>{{detail.content}}</text>
</view>
<view class="post-content" v-if="detail.model">
型号：<text>{{detail.model}}</text>
</view>
<view class="post-actions">
<view class="action-item" @click="toggleLike(detail)">
<uni-icons :type="detail.is_like ? 'heart-filled' : 'heart'" :color="detail.is_like ? '#FF5757' : '#999'" size="18"></uni-icons>
@@ -71,6 +74,8 @@
<text class="comment-time">{{item.created_at}}</text>
</view>
<image @click="replyComment(item)" src="/static/image/msg.png" mode="" class="icons20"></image>
<uni-icons @click="delComment(item.id)" v-if="openid==item.user.openid ||openid==detail.user.openid" type="trash" color="#999" size="20"></uni-icons>
</view>
<text class="comment-text">{{item.content}}</text>
<view class="comment-footer">
@@ -86,8 +91,9 @@
<view class="reply-item-left">
<image class="reply-avatar" :src="reply.user.avatar_pull"></image>
<text class="reply-name">{{reply.user.nickname}}：</text>
<uni-icons type="trash" @click="delComment(reply.id)" v-if="openid==reply.user.openid||openid==detail.user.openid" color="#999" size="20"></uni-icons>
</view>
<view>
<view>
<view class="reply-text">{{reply.content}}</view>
<view class="reply-text">{{reply.created_at}}</view>
</view>
@@ -166,6 +172,7 @@
data() {
return {
showlogin: false,
openid:uni.getStorageSync('openid'),
detail: {},
comments: [],
postid:'',
@@ -227,13 +234,12 @@
phone_code: e.detail.code,
}
}).then(res => {
if (res.data.code == -1) {
uni.showToast({
title: res.data.msg,
icon: 'none'
});
} else if (res.data.code == 200) {
uni.showToast({
title: res.data.message,
icon: 'none'
});
if(res.data.code == 200) {
this.showlogin = false
//返回数据接收成功
uni.setStorageSync('is_login', true);
}
@@ -258,6 +264,7 @@
if (res.data.code == 200) {
this.article = res.data.data
this.detail = res.data.data
this.detail.model = this.detail.model.join(',')
}
})
},
@@ -513,6 +520,61 @@
}
})
},
//删除评论
delComment(item){
const that = this;
uni.showModal({
title: '提示',
content: '确定要删除当前评论吗？',
success: function (res) {
if (res.confirm) {
request({
url:'common/post/comment/destroy',
method:'POST',
data:{
id:item
}
}).then(res => {
if(res.data.code === 200){
// 从评论列表中移除
// 先尝试在主评论列表中找到
const mainIndex = that.comments.findIndex(comment => comment.id === item);
if(mainIndex > -1){
// 删除主评论
that.comments.splice(mainIndex, 1);
} else {
// 在子评论中查找并删除
for(let i = 0; i < that.comments.length; i++){
if(that.comments[i].child && that.comments[i].child.length > 0){
const childIndex = that.comments[i].child.findIndex(child => child.id === item);
if(childIndex > -1){
that.comments[i].child.splice(childIndex, 1);
// 如果子评论数组为空，可以删除child属性或保持为空数组
if(that.comments[i].child.length === 0){
that.$set(that.comments[i], 'child', []);
}
break;
}
}
}
}
// 更新评论数量
that.getCommentCount();
uni.showToast({
title:res.data.message || '删除成功',
icon: 'none'
});
} else {
uni.showToast({
title:res.data.message || '删除失败',
icon: 'none'
});
}
})
}
}
});
},
// 预览图片（点击放大）
previewImage(index) {
if (!this.detail.media || this.detail.media.length === 0) return
@@ -742,6 +804,7 @@
.comment-header {
display: flex;
align-items: center;
justify-content: space-between;
// justify-content: space-between;
// gap: 20rpx;
margin-bottom: 10rpx;
@@ -834,8 +897,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 60%;
flex: 1;
}
.reply-text {