创建小程序
This commit is contained in:
浅念
@@ -0,0 +1,964 @@
|
||||
<template>
|
||||
<view class="detail-page">
|
||||
<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000"
|
||||
backgroundColor="#fff" :statusBar="true" title="详情"></uni-nav-bar>
|
||||
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="detail-scroll"
|
||||
refresher-enabled
|
||||
:refresher-triggered="refreshing"
|
||||
@refresherrefresh="onRefreshComments"
|
||||
@scrolltolower="onLoadMoreComments"
|
||||
>
|
||||
<!-- 顶部轮播图 -->
|
||||
<swiper class="media-swiper" circular autoplay indicator-dots indicator-color="rgba(255,255,255,.4)"
|
||||
indicator-active-color="#FFB400">
|
||||
<swiper-item v-for="(img, index) in detail.media" :key="index">
|
||||
<image class="media-image" :src="img.url_pull" mode="aspectFill" @click="previewImage(index)" @longpress="downloadImage(img)"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<!-- 内容信息 -->
|
||||
<view class="post-info">
|
||||
<view class="author">
|
||||
<image class="avatar" :src="detail.user.avatar_pull"></image>
|
||||
<view class="author-meta">
|
||||
<view class="name-box">
|
||||
<text class="name">{{detail.user.nickname}}<text class="role-tag">作者</text></text>
|
||||
</view>
|
||||
<text class="time">{{detail.publishTime}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="post-content">
|
||||
<text>{{detail.content}}</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>
|
||||
<text>{{detail.like}}</text>
|
||||
</view>
|
||||
<view class="action-item" @click="toggleCollect">
|
||||
<uni-icons :type="detail.is_favorite ? 'star-filled' : 'star'" :color="detail.is_favorite ? '#FFB400' : '#999'" size="20"></uni-icons>
|
||||
<text>{{detail.favorite}}</text>
|
||||
</view>
|
||||
<view class="action-item">
|
||||
<image :src="detail.is_comment == 0 ? '/static/image/msg.png' : '/static/image/msga.png'" mode="" class="icons18"></image>
|
||||
<text>{{detail.comment}}</text>
|
||||
</view>
|
||||
<view class="action-item">
|
||||
<button open-type="share" class="share"><uni-icons type="redo" color="#206ff4" size="20"></uni-icons></button>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 评论列表 -->
|
||||
<view class="comment-section">
|
||||
<view class="comment-title">全部评论</view>
|
||||
<view v-if="comments.length == 0">
|
||||
<view class="comment-item">
|
||||
<text>暂无评论</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view v-for="(item, index) in comments" :key="index" class="comment-item">
|
||||
<image class="comment-avatar" :src="item.user.avatar_pull"></image>
|
||||
<view class="comment-body">
|
||||
<view class="comment-header">
|
||||
<view class="comment-header-left">
|
||||
<text class="comment-name">{{item.user.nickname}}</text>
|
||||
<text class="comment-time">{{item.created_at}}</text>
|
||||
</view>
|
||||
<image @click="replyComment(item)" src="/static/image/msg.png" mode="" class="icons20"></image>
|
||||
</view>
|
||||
<text class="comment-text">{{item.content}}</text>
|
||||
<view class="comment-footer">
|
||||
<text class="comment-reply" @click="replyComment(item)">回复</text>
|
||||
<view class="comment-icons">
|
||||
|
||||
<!-- <uni-icons type="hand-thumbsup" size="16" color="#999"></uni-icons>
|
||||
<text>{{item.like}}</text> -->
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.child && item.child.length" class="comment-reply-box">
|
||||
<view v-for="(reply, rIndex) in item.child" :key="rIndex" class="reply-item">
|
||||
<view class="reply-item-left">
|
||||
<image class="reply-avatar" :src="reply.user.avatar_pull"></image>
|
||||
<text class="reply-name">{{reply.user.nickname}}：</text>
|
||||
</view>
|
||||
<view>
|
||||
<view class="reply-text">{{reply.content}}</view>
|
||||
<view class="reply-text">{{reply.created_at}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="comment-reply" v-if="item.count> 1" @click="viewMoreReply(item)">展开{{item.count-1}}条回复</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="!hasMore && comments.length" class="comment-end">
|
||||
<text class="comment-end-text">没有更多评论了</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="scroll-bottom"></view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="bottom-bar">
|
||||
<view class="input-box">
|
||||
<uni-icons type="compose" size="20" color="#bbb"></uni-icons>
|
||||
<input class="input"
|
||||
type="text"
|
||||
:placeholder="commentPlaceholder"
|
||||
v-model="commentText"
|
||||
confirm-type="send"
|
||||
@confirm="sendComment"
|
||||
:focus="commentFocus"
|
||||
@focus="commentFocus = true"
|
||||
@blur="handleInputBlur"
|
||||
/>
|
||||
<view class="send-btn" :class="{disabled: !commentText.trim()}" :disabled="!commentText.trim()" @click="sendComment">发送</view>
|
||||
</view>
|
||||
<view class="bottom-actions">
|
||||
<view class="bottom-action" @click="toggleLike(detail)">
|
||||
<uni-icons :type="detail.is_like ? 'heart-filled' : 'heart'" :color="detail.is_like ? '#FF5757' : '#333'" size="22"></uni-icons>
|
||||
<text>{{detail.like}}</text>
|
||||
</view>
|
||||
<view class="bottom-action" @click="toggleCollect(detail)">
|
||||
<uni-icons :type="detail.is_favorite ? 'star-filled' : 'star'" :color="detail.is_favorite ? '#FFB400' : '#333'" size="24"></uni-icons>
|
||||
<text>{{detail.favorite}}</text>
|
||||
</view>
|
||||
<view class="bottom-action" @click="startComment()">
|
||||
<image :src="detail.is_comment == 0 ? '/static/image/msg.png' : '/static/image/msga.png'" mode="" class="icons20"></image>
|
||||
<text>{{detail.comment}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-popup :show="showlogin" :closeOnClickOverlay="false" :round="20" mode="center">
|
||||
<view class="popupcontent">
|
||||
<image class="log1" src="/static/image/log1.png"></image>
|
||||
<view class="title">{{$t('home.loginmsg')}}</view>
|
||||
<view class="yhxy">
|
||||
<checkbox-group name="" style="width: 28px;display: inline-block;">
|
||||
<label @tap="selfChangde()">
|
||||
<checkbox :checked="selfChecked" activeBackgroundColor="#3F435B"
|
||||
style="transform:scale(0.7);border-radius: 50%" />
|
||||
</label>
|
||||
</checkbox-group>
|
||||
{{$t('home.argin')}}<text class="xy" @click="gouser">{{$t('home.UserAgreement')}}</text>{{$t('home.and')}}<text
|
||||
class="xy" @click="goprivacy">{{$t('home.Privacy')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cent">
|
||||
<button class="btn1" @click="showlogin = !showlogin">{{$t('cancel')}}</button>
|
||||
<button v-if="selfChecked" class="btn" open-type="getPhoneNumber" @click="showlogin = !showlogin"
|
||||
@getphonenumber="getPhoneNumber">{{$t('login')}}</button>
|
||||
<button v-else class="btn" @click="loginbtn">{{$t('login')}}</button>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request,showToast } from '@/api/apiT.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showlogin: false,
|
||||
detail: {},
|
||||
comments: [],
|
||||
postid:'',
|
||||
commentText: '',
|
||||
commentPlaceholder: '说点什么...',
|
||||
commentFocus: false,
|
||||
replyTarget: null,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
hasMore: true,
|
||||
loading: false,
|
||||
refreshing: false,
|
||||
selfChecked: false,
|
||||
loadingMore: false,
|
||||
article:{},
|
||||
share:'',
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.postid = options.id;
|
||||
this.share = options.share
|
||||
this.getshows()
|
||||
this.loadComments(true)
|
||||
this.getCommentCount()
|
||||
},
|
||||
methods: {
|
||||
leftClick() {
|
||||
if(this.share=='share'){
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index',// 替换为你要跳转的页面路径
|
||||
});
|
||||
}else{
|
||||
uni.navigateBack()
|
||||
}
|
||||
},
|
||||
goprivacy(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/agreement',// 替换为你要跳转的页面路径
|
||||
});
|
||||
},
|
||||
selfChangde(e) {
|
||||
this.selfChecked = !this.selfChecked;
|
||||
},
|
||||
loginbtn(){
|
||||
if(!this.selfChecked){
|
||||
uni.showToast({
|
||||
title:this.$t('home.arginimg'),
|
||||
icon: 'none'
|
||||
});
|
||||
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) {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
});
|
||||
|
||||
} else if (res.data.code == 200) {
|
||||
//返回数据接收成功
|
||||
uni.setStorageSync('is_login', true);
|
||||
}
|
||||
})
|
||||
},
|
||||
gouser(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/agreementuser',// 替换为你要跳转的页面路径
|
||||
});
|
||||
},
|
||||
//获取详情
|
||||
getshows(){
|
||||
|
||||
let that = this;
|
||||
request({
|
||||
url:'common/post/show',
|
||||
method:'GET',
|
||||
data:{
|
||||
id:that.postid
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.article = res.data.data
|
||||
this.detail = res.data.data
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取评论（分页）
|
||||
loadComments(isRefresh = false){
|
||||
if (this.loading) return;
|
||||
if (isRefresh) {
|
||||
this.page = 1;
|
||||
this.hasMore = true;
|
||||
} else if (!this.hasMore) {
|
||||
this.loadingMore = false;
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
request({
|
||||
url:'common/post/comment/list',
|
||||
method:'GET',
|
||||
data:{
|
||||
post_id:this.postid,
|
||||
parent_id:0,
|
||||
current:this.page,
|
||||
size:this.pageSize
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
const records = res.data.data.records || [];
|
||||
if (isRefresh) {
|
||||
this.comments = records;
|
||||
} else {
|
||||
const existingIds = new Set(this.comments.map(item => item.id));
|
||||
const appendList = records.filter(item => !existingIds.has(item.id));
|
||||
this.comments = [...this.comments, ...appendList];
|
||||
}
|
||||
if (records.length < this.pageSize) {
|
||||
this.hasMore = false;
|
||||
} else {
|
||||
this.page += 1;
|
||||
}
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:res.data.message || '获取评论失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}).finally(()=>{
|
||||
this.loading = false;
|
||||
if (isRefresh) {
|
||||
this.refreshing = false;
|
||||
}
|
||||
this.loadingMore = false;
|
||||
})
|
||||
},
|
||||
onRefreshComments(){
|
||||
if (this.refreshing) return;
|
||||
this.refreshing = true;
|
||||
this.loadComments(true);
|
||||
},
|
||||
onLoadMoreComments(){
|
||||
if (this.loadingMore || this.refreshing || this.loading || !this.hasMore) return;
|
||||
this.loadingMore = true;
|
||||
this.loadComments(false);
|
||||
},
|
||||
islogin(){
|
||||
if(uni.getStorageSync('is_login')){
|
||||
return true
|
||||
}else{
|
||||
return false
|
||||
}
|
||||
},
|
||||
toggleLike(items) {
|
||||
if(!this.islogin()){
|
||||
this.showlogin = true
|
||||
return false
|
||||
}
|
||||
const likeUrl = this.detail.is_like ? 'common/post/like/destroy' : 'common/post/like/store'
|
||||
const method = this.detail.is_like ? 'GET' : 'POST'
|
||||
const data = {
|
||||
post_id: items.id
|
||||
}
|
||||
if (this.detail.is_like) {
|
||||
data.user_id = this.detail.user_id
|
||||
}
|
||||
request({
|
||||
url: likeUrl,
|
||||
method,
|
||||
data
|
||||
}).then(res => {
|
||||
if(res.data.code === 200){
|
||||
if(this.detail.is_like){
|
||||
this.detail.is_like = 0
|
||||
this.detail.like += this.detail.is_like ? 1 : -1
|
||||
// newTarget.like = Math.max(0, (Number(newTarget.like) || 0) - 1)
|
||||
uni.showToast({
|
||||
title: '取消成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}else{
|
||||
this.detail.is_like =1
|
||||
this.detail.like += this.detail.is_like ? 1 : -1
|
||||
uni.showToast({
|
||||
title: '点赞成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:res.data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
toggleCollect(items) {
|
||||
if(!this.islogin()){
|
||||
this.showlogin = true
|
||||
return false
|
||||
}
|
||||
const collectUrl = this.detail.is_favorite ? 'common/post/favorite/destroy' : 'common/post/favorite/store'
|
||||
const method = this.detail.is_favorite ? 'GET' : 'POST'
|
||||
const data = {
|
||||
post_id: this.detail.id
|
||||
}
|
||||
if (this.detail.is_favorite) {
|
||||
data.user_id = this.detail.user_id
|
||||
}
|
||||
request({
|
||||
url: collectUrl,
|
||||
method,
|
||||
data
|
||||
}).then(res => {
|
||||
if(res.data.code === 200){
|
||||
if(this.detail.is_favorite){
|
||||
this.detail.is_favorite = 0
|
||||
this.detail.favorite += this.detail.is_favorite ? 1 : -1
|
||||
uni.showToast({
|
||||
title: '取消收藏成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}else{
|
||||
this.detail.is_favorite = 1
|
||||
this.detail.favorite += this.detail.is_favorite ? 1 : -1
|
||||
uni.showToast({
|
||||
title: '收藏成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:res.data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
startComment(target = null) {
|
||||
if(!this.islogin()){
|
||||
this.showlogin = true
|
||||
return false
|
||||
}
|
||||
this.replyTarget = target
|
||||
this.commentPlaceholder = target ? `回复 ${target.user.nickname}...` : '说点什么...'
|
||||
this.commentText = ''
|
||||
this.commentFocus = true
|
||||
},
|
||||
handleInputBlur() {
|
||||
this.commentFocus = false
|
||||
},
|
||||
replyComment(item) {
|
||||
if(!this.islogin()){
|
||||
this.showlogin = true
|
||||
return false
|
||||
}
|
||||
this.commentText = ''
|
||||
this.startComment(item)
|
||||
},
|
||||
viewMoreReply(item) {
|
||||
let that = this;
|
||||
request({
|
||||
url:'common/post/comment/list',
|
||||
method:'GET',
|
||||
data:{
|
||||
post_id:that.postid,
|
||||
parent_id:item.id,
|
||||
received_id:item.child[0].id
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
item.child = item.child || []
|
||||
const index = this.comments.findIndex(item1 => item1.id === item.id)
|
||||
if (index > -1) {
|
||||
this.$set(
|
||||
this.comments[index],
|
||||
'child',
|
||||
[...this.comments[index].child, ...res.data.data.records]
|
||||
)
|
||||
this.comments[index].count = 0
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
//获取评论数量
|
||||
getCommentCount(){
|
||||
let that = this;
|
||||
request({
|
||||
url:'common/post/interaction',
|
||||
method:'GET',
|
||||
data:{
|
||||
id:that.postid
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.detail.comment = res.data.data.comment
|
||||
}
|
||||
})
|
||||
},
|
||||
sendComment() {
|
||||
if (!this.commentText.trim()) return
|
||||
if(!this.islogin()){
|
||||
this.showlogin = true
|
||||
return false
|
||||
}
|
||||
const data = {
|
||||
post_id: this.detail.id,
|
||||
parent_id: 0,
|
||||
content: this.commentText
|
||||
}
|
||||
if(this.replyTarget){
|
||||
data.parent_id = this.replyTarget.id
|
||||
}
|
||||
request({
|
||||
url: 'common/post/comment/store',
|
||||
method: 'POST',
|
||||
data: data
|
||||
}).then(res => {
|
||||
if(res.data.code === 200){
|
||||
uni.showToast({
|
||||
title: '评论成功',
|
||||
icon: 'none'
|
||||
});
|
||||
this.loadComments(true)
|
||||
this.getCommentCount()
|
||||
this.commentText = ''
|
||||
this.commentPlaceholder = '说点什么...'
|
||||
this.replyTarget = null
|
||||
this.commentFocus = false
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:res.data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
// 预览图片（点击放大）
|
||||
previewImage(index) {
|
||||
if (!this.detail.media || this.detail.media.length === 0) return
|
||||
const urls = this.detail.media.map(item => item.url_pull)
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: urls
|
||||
})
|
||||
},
|
||||
// 下载图片（长按）
|
||||
downloadImage(img) {
|
||||
if (!img || !img.url_pull) return
|
||||
|
||||
uni.showActionSheet({
|
||||
itemList: ['保存图片'],
|
||||
success: (res) => {
|
||||
if (res.tapIndex === 0) {
|
||||
// 保存图片
|
||||
uni.showLoading({
|
||||
title: '下载中...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
uni.downloadFile({
|
||||
url: img.url_pull,
|
||||
success: (downloadRes) => {
|
||||
if (downloadRes.statusCode === 200) {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: downloadRes.tempFilePath,
|
||||
success: () => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.hideLoading()
|
||||
if (err.errMsg.includes('auth deny')) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '需要授权保存图片到相册',
|
||||
showCancel: false
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '下载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '下载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 分享给好友
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: this.article.content,
|
||||
path: `/pages/square/detiles?share=share&id=${this.article.id}`,
|
||||
imageUrl: "/static/image/share.jpg" // 封面图
|
||||
}
|
||||
},
|
||||
// 分享到朋友圈
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: this.article.content,
|
||||
query: `id=${this.article.id}`,
|
||||
imageUrl: "/static/image/share.jpg"
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page,
|
||||
.detail-page {
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.icons20{
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
.icons18{
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
.detail-scroll {
|
||||
height: calc(100% - 120rpx);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.media-swiper {
|
||||
width: 100%;
|
||||
height: 520rpx;
|
||||
}
|
||||
|
||||
.media-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.post-info {
|
||||
padding: 30rpx;
|
||||
border-bottom: 16rpx solid #F7F7F7;
|
||||
}
|
||||
|
||||
.author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.author-meta {
|
||||
flex: 1;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.name-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 99%;
|
||||
}
|
||||
|
||||
.role-tag {
|
||||
font-size: 22rpx;
|
||||
color: #fff;
|
||||
background: #206ff4;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.post-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.comment-section {
|
||||
padding: 20rpx 30rpx 140rpx;
|
||||
}
|
||||
|
||||
.comment-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.comment-item {
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1px solid #F0F0F0;
|
||||
}
|
||||
|
||||
.comment-avatar {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.comment-body {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: space-between;
|
||||
// gap: 20rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.comment-header-left{
|
||||
display: flex;
|
||||
width: 78%;
|
||||
}
|
||||
|
||||
.comment-name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.comment-time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.comment-footer {
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.comment-reply {
|
||||
font-size: 26rpx;
|
||||
color: #206ff4;
|
||||
}
|
||||
|
||||
.comment-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.comment-reply-box {
|
||||
margin-top: 20rpx;
|
||||
background: #F8F8F8;
|
||||
padding: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.comment-end {
|
||||
padding: 24rpx 0 40rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.comment-end-text {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.reply-item {
|
||||
margin-bottom: 16rpx;
|
||||
line-height: 1.4;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.reply-item-left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.reply-avatar {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.reply-name {
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 60%;
|
||||
|
||||
}
|
||||
|
||||
.reply-text {
|
||||
color: #555;
|
||||
margin-left: 22px;
|
||||
}
|
||||
|
||||
.scroll-bottom {
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
border-top: 1px solid #F0F0F0;
|
||||
padding: 16rpx 30rpx calc(env(safe-area-inset-bottom) + 16rpx);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #F6F7F8;
|
||||
border-radius: 999rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
background: #297EFF;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 999rpx;
|
||||
padding: 0 20rpx;
|
||||
height: 46rpx;
|
||||
line-height: 46rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.send-btn.disabled {
|
||||
background: #dcdcdc;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 30rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.bottom-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
}
|
||||
.popupcontent{
|
||||
background-size: 100% 100%;
|
||||
padding: 26px 15px;
|
||||
text-align: center;
|
||||
background-repeat: no-repeat;
|
||||
.title{
|
||||
color: #333333;
|
||||
font-size: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
.log1{
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
.yhxy{
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
margin-bottom: 5px;
|
||||
.xy{
|
||||
color: #297EFF;
|
||||
}
|
||||
}
|
||||
.share{
|
||||
background-color: #fff;
|
||||
border: 1px solid #fff;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
.share:after{
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
.cent{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 0px 10px 20px;
|
||||
.btn1{
|
||||
background-color: #fff;
|
||||
border: 1px solid #206ff4;
|
||||
color: #206ff4;
|
||||
border-radius: 50px;
|
||||
width: 46%;
|
||||
margin: 10px 0px 20px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.btn{
|
||||
background-color: #206ff4;
|
||||
color: white;
|
||||
border-radius: 50px;
|
||||
width: 46%;
|
||||
margin: 10px 0px 20px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,449 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<uni-nav-bar leftText=" " :fixed="true" :border="false" @clickLeft="leftClick" color="#000000" backgroundColor="#fff" :statusBar="true" title="广场"></uni-nav-bar>
|
||||
<view class="content-con">
|
||||
<scroll-view scroll-y class="left-aside">
|
||||
<view v-for="item in flist" :key="item.id" class="f-item b-b" :class="{active: item.id === currentCategoryId}"
|
||||
@click="onCategoryChange(item.id)">
|
||||
<view class="category-icon" v-if="item.icon_active_pull">
|
||||
<image :src="item.id === currentCategoryId?item.icon_active_pull:item.icon_inactive_pull" mode=""></image>
|
||||
️</view>
|
||||
{{item.name}}
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view scroll-y class="right-aside"
|
||||
refresher-enabled
|
||||
:refresher-triggered="refreshing"
|
||||
@refresherrefresh="onRefresh"
|
||||
:lower-threshold="100"
|
||||
@scrolltolower="onLoadMore">
|
||||
<view class="t-lists">
|
||||
<square-post-card
|
||||
class="t-item"
|
||||
v-for="sitem in slist"
|
||||
:key="sitem.id"
|
||||
:item="sitem"
|
||||
:isshow="true"
|
||||
@view="navToList"
|
||||
@comment="navTomsg"
|
||||
@like="navTozan" />
|
||||
<!-- 加载更多提示 -->
|
||||
<view v-if="hasMore" class="load-more">
|
||||
<text v-if="loadingMore">加载中...</text>
|
||||
<text v-else>上拉加载更多</text>
|
||||
</view>
|
||||
<view v-else-if="slist.length > 0" class="load-more">
|
||||
<text>没有更多了</text>
|
||||
</view>
|
||||
<view class="empty" v-if="slist.length==0">
|
||||
<image src="/static/image/empty.png" mode=""></image>
|
||||
<view class="">
|
||||
暂无数据！
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 加载提示 -->
|
||||
<view v-if="loading" class="loading-mask">
|
||||
<view class="loading-text">加载中...</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request,showToast } from '@/api/apiT.js'
|
||||
import SquarePostCard from '@/components/SquarePostCard.vue'
|
||||
export default {
|
||||
components: {
|
||||
SquarePostCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
flist: [],
|
||||
slist: [],
|
||||
currentCategoryId: '', // 当前选中的分类id
|
||||
loading: false, // 加载状态
|
||||
refreshing: false, // 下拉刷新状态
|
||||
loadingMore: false, // 上拉加载状态
|
||||
page: 1, // 当前页码
|
||||
pageSize: 10, // 每页数量
|
||||
hasMore: true, // 是否还有更多数据
|
||||
categoriesLoaded: false // 分类是否已加载完成
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 加载第一级分类列表
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.loadCategoryList();
|
||||
this.syncTabbar()
|
||||
// // 从详情页返回后，重新拉取当前分类数据
|
||||
// if (this.categoriesLoaded) {
|
||||
// this.refreshCurrentCategory()
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
// 加载第一级分类列表
|
||||
loadCategoryList() {
|
||||
// TODO: 替换为实际的后端接口
|
||||
let that = this;
|
||||
|
||||
request({
|
||||
url:'common/post/category/list',
|
||||
method:'GET'
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
const records = res.data.data.records || [];
|
||||
this.flist = [{
|
||||
id: '',
|
||||
name: '全部分类'
|
||||
}, ...records];
|
||||
this.categoriesLoaded = true;
|
||||
// 默认加载第一个分类的数据
|
||||
if (this.flist.length > 0) {
|
||||
this.onCategoryChange(this.flist[0].id);
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 重新加载当前分类数据
|
||||
refreshCurrentCategory() {
|
||||
const targetCategory = this.currentCategoryId !== undefined ? this.currentCategoryId : (this.flist[0] && this.flist[0].id) || '';
|
||||
this.loadCategoryData(targetCategory, false);
|
||||
},
|
||||
|
||||
// 分类切换事件
|
||||
onCategoryChange(categoryId) {
|
||||
// 如果点击的是当前分类且已有数据，不重复加载
|
||||
if (this.currentCategoryId === categoryId && this.slist.length > 0) {
|
||||
return;
|
||||
}
|
||||
// 切换分类时，重置所有状态
|
||||
this.currentCategoryId = categoryId;
|
||||
this.page = 1;
|
||||
this.hasMore = true;
|
||||
this.loading = false;
|
||||
this.loadingMore = false;
|
||||
this.refreshing = false;
|
||||
this.slist = []; // 先清空数据
|
||||
this.loadCategoryData(categoryId, false);
|
||||
},
|
||||
|
||||
// 根据分类id加载分类下的内容
|
||||
loadCategoryData(categoryId, isLoadMore = false) {
|
||||
// 防止重复请求：如果是加载更多，需要检查所有加载状态
|
||||
if (isLoadMore) {
|
||||
if (this.loadingMore || this.loading || this.refreshing) {
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
// 下拉刷新或初次加载，检查加载状态
|
||||
if (this.loading || this.loadingMore) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (isLoadMore) {
|
||||
this.loadingMore = true;
|
||||
this.page += 1;
|
||||
} else {
|
||||
this.loading = true;
|
||||
this.page = 1;
|
||||
this.hasMore = true;
|
||||
this.slist = []; // 清空之前的数据
|
||||
}
|
||||
|
||||
request({
|
||||
url:'common/post/list',
|
||||
method:'GET',
|
||||
data:{
|
||||
category_id:categoryId,
|
||||
current: this.page,
|
||||
size: this.pageSize
|
||||
}
|
||||
}).then(res => {
|
||||
this.loading = false;
|
||||
this.loadingMore = false;
|
||||
this.refreshing = false;
|
||||
|
||||
if (res.data.code == 200) {
|
||||
const records = res.data.data.records || [];
|
||||
const total = res.data.data.total || 0;
|
||||
|
||||
if (isLoadMore) {
|
||||
// 上拉加载更多，追加数据并去重
|
||||
const existingIds = new Set(this.slist.map(item => item.id));
|
||||
const newRecords = records.filter(item => !existingIds.has(item.id));
|
||||
this.slist = [...this.slist, ...newRecords];
|
||||
} else {
|
||||
// 下拉刷新或初次加载，替换数据
|
||||
this.slist = records;
|
||||
}
|
||||
|
||||
// 判断是否还有更多数据
|
||||
this.hasMore = this.slist.length < total;
|
||||
}
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
this.loadingMore = false;
|
||||
this.refreshing = false;
|
||||
if (isLoadMore) {
|
||||
this.page -= 1; // 加载失败，页码回退
|
||||
}
|
||||
})
|
||||
},
|
||||
// 下拉刷新
|
||||
onRefresh() {
|
||||
// 如果正在加载中，不执行刷新
|
||||
if (this.loading || this.loadingMore) {
|
||||
this.refreshing = false;
|
||||
return;
|
||||
}
|
||||
this.refreshing = true;
|
||||
this.loadCategoryData(this.currentCategoryId, false);
|
||||
},
|
||||
// 上拉加载更多
|
||||
onLoadMore() {
|
||||
if (!this.hasMore || this.loadingMore || this.loading || this.refreshing) {
|
||||
return;
|
||||
}
|
||||
this.loadCategoryData(this.currentCategoryId, true);
|
||||
},
|
||||
|
||||
// 点击商品项
|
||||
navToList(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/square/detiles?id='+item.id
|
||||
});
|
||||
},
|
||||
//点赞
|
||||
navTozan(item){
|
||||
const targetIndex = this.slist.findIndex(post => post.id === item.id)
|
||||
if(targetIndex === -1){
|
||||
return
|
||||
}
|
||||
const target = this.slist[targetIndex]
|
||||
const isLiked = Number(target.is_like) === 1
|
||||
const likeUrl = isLiked ? 'common/post/like/destroy' : 'common/post/like/store'
|
||||
const method = isLiked ? 'GET' : 'POST'
|
||||
const data = {
|
||||
post_id: target.id
|
||||
}
|
||||
if (isLiked) {
|
||||
data.user_id = target.user_id
|
||||
}
|
||||
request({
|
||||
url: likeUrl,
|
||||
method,
|
||||
data
|
||||
}).then(res => {
|
||||
if(res.data.code === 200){
|
||||
const newTarget = { ...target }
|
||||
if(isLiked){
|
||||
newTarget.is_like = 0
|
||||
newTarget.like = Math.max(0, (Number(newTarget.like) || 0) - 1)
|
||||
uni.showToast({
|
||||
title: '取消成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}else{
|
||||
newTarget.is_like = 1
|
||||
newTarget.like = (Number(newTarget.like) || 0) + 1
|
||||
uni.showToast({
|
||||
title: '点赞成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
this.$set(this.slist, targetIndex, newTarget)
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:res.data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
//消息
|
||||
navTomsg(item){
|
||||
request({
|
||||
url:'common/like/store',
|
||||
method:'GET',
|
||||
data:{
|
||||
post_id:item.id
|
||||
}
|
||||
}).then(res => {
|
||||
})
|
||||
},
|
||||
leftClick(){
|
||||
uni.navigateBack()
|
||||
},
|
||||
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') })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.empty{
|
||||
text-align: center;
|
||||
margin-top: 30%;
|
||||
width: 100%;
|
||||
}
|
||||
.empty image{
|
||||
width: 252px;
|
||||
height: 164px;
|
||||
}
|
||||
page,
|
||||
.content {
|
||||
height: 100%;
|
||||
background-color: #f8f8f8;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.loading-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
|
||||
.loading-text {
|
||||
color: #fff;
|
||||
font-size: 28upx;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
padding: 20upx 40upx;
|
||||
border-radius: 8upx;
|
||||
}
|
||||
}
|
||||
.content-con {
|
||||
height: calc(100% - 128rpx);
|
||||
background-color: #f8f8f8;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.left-aside {
|
||||
flex-shrink: 0;
|
||||
width: 200upx;
|
||||
height: 100%;
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
|
||||
.f-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
position: relative;
|
||||
padding-left: 24rpx;
|
||||
|
||||
&.active {
|
||||
color: #0071FC;
|
||||
background: #fff;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 36upx;
|
||||
width: 8upx;
|
||||
background-color: #0071FC;
|
||||
border-radius: 0 4px 4px 0;
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
}
|
||||
.iconview{
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.icons {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.right-aside {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
/* padding-left: 20upx; */
|
||||
/* padding-top: 20upx; */
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.t-lists {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 20rpx;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.t-item{
|
||||
width: 48%;
|
||||
/* background: #fff; */
|
||||
/* border-radius: 24rpx; */
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
/* box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.06); */
|
||||
}
|
||||
.grid-image{
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
background: #E5E5E5;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.grid-footer{
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.grid-avatar{
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.grid-info{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 70%;
|
||||
}
|
||||
.grid-tag{
|
||||
font-size: 24rpx;
|
||||
color: #3F435B;
|
||||
margin-bottom: 4rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 87%;
|
||||
}
|
||||
.category-icon image{
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.load-more{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 30rpx 0;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user