talk
/
talk_appAmin
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into main

main
26947 2024-06-05 16:58:17 +08:00
parent 06ff1dc23f a2f702cace
commit 3bbf2694b9
2 changed files with 565 additions and 562 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

429
pages/common/postview/index.vue
View File

@ -1,85 +1,368 @@
<template>
<view class="post-item">
<view class="post-list-item">
<view @click.stop="toUser('跳转到用户个人空间')">
<up-avatar :src="src" size="50"></up-avatar>
</view>
<view class="center">
<view class="post-top-box">
<view class="uname">
<text v-if="userType == 1" class="official">官方</text>
<text class="username">{{ username.substring(0, 10) }}</text>
<!-- 话题 -->
<view class="center-content-post">
<view class="center-content-post-padding">
<view class="center-content-post-head">
<!-- 左对齐 -->
<view class="flex alignCenter">
<!-- 头像 -->
<div class="avatar-container">
<u-avatar class="avatar-1" size="84rpx" :src="postValue.avatar"></u-avatar>
<image v-if="postValue.isOfficial" class="official-1" src="../static/images/icon/tu3-6.png"></image>
</div>
<!-- 用户名 -->
<view class="center-content-post-head-title">
<text class="center-content-post-head-title-uname">{{postValue.uname}}</text>
<text class="center-content-post-head-title-timeAddress">{{postValue.createTime + '·' + postValue.address}}</text>
</view>
</view>
<!-- 右对齐 -->
<view class="flex alignCenter" v-if="postViewIndex != 0">
<text class="no-focus-text" v-if="postValue.isFocus" @click="addFocus(index)">关注</text>
<text class="focus-text" v-else @click="cancelFocus()">已关注</text>
</view>
</view>
<text class="center-content-post-title" v-if="postValue.title">{{postValue.title}}</text>
<text class="center-content-post-content-0" v-if="postViewType == 0">{{postValue.content}}</text>
<text class="center-content-post-content-1" v-if="postViewType == 1">{{postValue.content}}</text>
<!-- 图片 -->
<!--一张图片-->
<block v-if="postValue.media.length == 1">
<image :lazy-load="true" mode="aspectFill" class="img-style-1" :src="postValue.media[0]"
@tap="previewImage(postValue.media[0], postValue.media)"></image>
</block>
<!--二张图片-->
<block v-if="postValue.media.length == 2">
<view class="img-style-2">
<image :lazy-load="true" v-for="(mediaItem, index2) in postValue.media" :key="index2"
@tap.stop="previewImage(mediaItem, postValue.media)" mode="aspectFill"
:src="mediaItem"></image>
</view>
</block>
<!--三张图片-->
<block v-if="postValue.media.length >= 3">
<u-album :urls="postValue.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album>
</block>
<!-- tab -->
<view class="center-content-post-tab" style="display: flex;">
<text
class="center-content-post-tab-text"
v-for="(tabItem, index2) in postValue.tab" :key="index2"
:text="'#' + tabItem">{{'#' + tabItem}}</text>
</view>
<view class="post-list-bottom" v-if="postViewType == 0" style="display: flex; justify-content: space-between;">
<!-- 靠左对齐 -->
<view class="">
<text v-if="postTop>0" class="officials">置顶</text>
<text v-if="poststatus==1" class="officials">审核中</text>
<text v-if="poststatus==2" class="officials">已下架</text>
<view class="p-item">
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu2-9.png" mode=""></image>
<text class="count">{{ postValue.transmitCount }}</text>
</view>
</view>
</view>
<view>
<text class="time">{{createTime}}</text>
</view>
<!-- 靠右对齐 -->
<view class="flex alignCenter">
<view v-if="postValue.isLike" class="p-item" @click.stop="cancelCollection()">
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-8.png" mode=""></image>
<text class="count">{{ postValue.likeCount }}</text>
</view>
<!-- 靠右对齐 -->
<view v-if="!postValue.isLike" class="p-item" @click.stop="addCollection()">
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-7.png" mode=""></image>
<text class="count">{{ postValue.likeCount }}</text>
</view>
<!-- 靠右对齐 -->
<view class="p-item margin50">
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-3.png" mode=""></image>
<text class="count">{{ postValue.commentCount }}</text>
</view>
<!-- 靠右对齐 -->
<view class="p-item margin50" v-if="postValue.ifFavorite" @click.stop="cancelFavorite()">
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-2.png" mode=""></image>
<text class="count">{{ postValue.favoriteCount }}</text>
</view>
<!-- 靠右对齐 -->
<view class="p-item margin50" v-if="!postValue.ifFavorite" @click.stop="addFavorite()">
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-1.png" mode=""></image>
<text class="count">{{ postValue.favoriteCount }}</text>
</view>
</view>
</view>
</view>
<u-line></u-line>
</view>
<view class="post-content">
<rich-text class="post-text" :nodes="postcontent"></rich-text>
<block v-if="posttype == 1">
<up-album :urls="urls2" multipleSize="95" space="3"></up-album>
</block>
</view>
<!-- 位置 -->
<view class="address" v-if="postaddress">
<u-icon class="icon" name="map-fill"></u-icon>
<text>{{ postaddress }}</text>
</view>
<!-- 底部 -->
<view class="post-list-bottom">
<view class="p-item margin50">
<!-- <text class="iconfont icon-quanzi"></text> -->
<u-icon name="share"></u-icon>
<text class="count">{{ readCount }}</text>
</view>
<view v-show="isLike" class="p-item" @click.stop="cancelCollection('取消点赞')">
<u-icon name="heart-fill" color="#cc0000"></u-icon>
<text class="count">{{ likeCount }}</text>
</view>
<view v-show="!isLike" class="p-item" @click.stop="addCollection('点赞')">
<u-icon name="heart"></u-icon>
<text class="count">{{ likeCount }}</text>
</view>
<view class="p-item margin50">
<!-- <text class="iconfont icon-pinglun"></text> -->
<u-icon name="chat"></u-icon>
<text class="count">{{ commentCount }}</text>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
talkPost: {
type: Object,
required: true
}
},
methods: {
toUser(message) {
// 跳转到用户个人空间的逻辑
console.log(message);
},
cancelCollection(message) {
// 取消点赞的逻辑
console.log(message);
},
addCollection(message) {
// 点赞的逻辑
console.log(message);
}
}
<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
const props = defineProps({
postValue: Object,
postViewIndex: Number,
postViewType: Number
});
// const postValue = reactive(
// {
// avatar: 'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
// uname: '爱吃饭的小张',
// createTime: '11分钟前',
// address: '南开大学',
// isFocus: false,
// isOfficial: true,
// title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
// content: '八年前，学弟在工地上杀了一个工友，杀人前，他给警察打了电话，预告杀人的时间和地点，并......',
// type: '1',
// media: [
// 'https://tu.sioe.cn/gj/qiege/image.jpg',
// 'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
// 'https://bpic.51yuansu.com/backgd/cover/00/63/09/64b52b1426fff_800.jpg?x-oss-process=image/resize,w_780/sharpen,100',
// 'https://tu.sioe.cn/gj/qiege/image.jpg',
// ],
// tab: ['学术讨论组', '校园风景'],
// transmitCount: 136,
// isLike: true,
// likeCount: 999,
// commentCount: 136,
// ifFavorite: true,
// favoriteCount: 136
// }
// );
const previewImage = (url, urls) => {
uni.previewImage({
current: url, // 当前显示图片的http链接
urls: urls // 需要预览的图片http链接列表
});
};
const cancelCollection = () => {
props.postValue.likeCount -= 1;
props.postValue.isLike = !props.postValue.isLike;
};
const addCollection = () => {
props.postValue.likeCount += 1;
props.postValue.isLike = !props.postValue.isLike;
};
const cancelFavorite = () => {
props.postValue.favoriteCount -= 1;
props.postValue.ifFavorite = !props.postValue.ifFavorite;
};
const addFavorite = () => {
props.postValue.favoriteCount += 1;
props.postValue.ifFavorite = !props.postValue.ifFavorite;
};
const cancelFocus = () => {
props.postValue.isFocus = !props.postValue.isFocus;
};
const addFocus = () => {
props.postValue.isFocus = !props.postValue.isFocus;
};
</script>
<style>
<style lang="scss">
.center-content-post {
}
.center-content-post-padding {
padding: 46rpx 32rpx;
}
.center-content-post-head {
display: flex;
justify-content: space-between;
}
.center-content-post-head-title {
display: flex;
flex-direction: column;
margin-left: 20rpx;
}
.center-content-post-head-title-uname {
font-weight: 400;
font-size: 30rpx;
text-align: left;
color: #000000;
align-self: flex-start; /* 垂直起始对齐 */
margin-bottom: 20rpx;
height: 32rpx;
line-height: 32rpx;
}
.center-content-post-head-title-timeAddress {
font-weight: 400;
font-size: 30rpx;
text-align: left;
color: #999999;
align-self: flex-end; /* 垂直结束对齐 */
height: 30rpx;
line-height: 30rpx;
}
.no-focus-text {
font-weight: 400;
width: 58rpx;
// height: 30rpx;
font-size: 28rpx;
text-align: left;
color: #3477FC;
}
.focus-text {
font-weight: 400;
/* width: 58rpx; */
// height: 30rpx;
font-size: 28rpx;
text-align: left;
color: #2553b4;
}
.center-content-post-title{
display: block;
font-weight: 600;
/* width: 670rpx; */
// height: 80rpx;
font-size: 32rpx;
text-align: left;
color: #000000;
margin-top: 30rpx;
display: -webkit-box; /* 将文本视为弹性盒子 */
-webkit-line-clamp: 2; /* 设置最大行数 */
-webkit-box-orient: vertical; /* 垂直方向排列文本 */
overflow: hidden; /* 隐藏超出部分 */
}
.center-content-post-content-0{
display: block;
font-weight: 400;
/* width: 670rpx; */
// height: 80rpx;
font-size: 32rpx;
text-align: left;
color: #333333;
margin-top: 18rpx;
margin-bottom: 28rpx;
display: -webkit-box; /* 将文本视为弹性盒子 */
-webkit-line-clamp: 2; /* 设置最大行数 */
-webkit-box-orient: vertical; /* 垂直方向排列文本 */
overflow: hidden; /* 隐藏超出部分 */
}
.center-content-post-content-1{
display: block;
font-weight: 400;
/* width: 670rpx; */
// height: 80rpx;
font-size: 32rpx;
text-align: left;
color: #333333;
margin-top: 18rpx;
margin-bottom: 28rpx;
}
.u-album__row[data-v-723ad357] {
justify-content: center !important;
}
.u-album__row.data-v-723ad357 {
justify-content: center !important;
/* height: 200rpx !important; */
}
.u-album__row__wrapper {}
.data-v-6fcabaad {
border-radius: 20rpx 20rpx 20rpx 20rpx !important;
/* width: 200rpx !important;
height: 200rpx !important; */
}
.center-content-post-tab{
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.post-list-bottom {
display: flex;
justify-content: center; /* 水平居中 */
}
.p-item {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.center-content-post-tab-text{
font-weight: 400;
/* width: 139rpx; */
// height: 26rpx;
font-size: 24rpx;
text-align: left;
color: #3477FC;
/* width: 130rpx; */
// height: 44rpx;
// line-height: 44rpx;
border-radius: 10rpx 10rpx 10rpx 10rpx;
background: #f7f8fa;
padding: 8rpx;
/* margin-left: 50rpx; */
}
.center-content-post-tab-text:nth-child(2) {
/* 您的样式 */
margin-left: 24rpx; /* 添加额外的左边距 */
}
.margin50 {
margin-left: 50rpx; /* 添加额外的左边距 */
}
.count{
font-weight: 400;
width: 48rpx;
/* height: 23rpx; */
font-size: 28rpx;
text-align: left;
color: #787878;
margin-left: 10rpx;
}
.avatar-1 {
position: relative;
}
.official-1 {
position: absolute;
width: 32rpx;
height: 32rpx;
bottom: 0;
right: 0;
}
.img-style-1 {
display: block;
width: 100%;
height: 600rpx;
border-radius: 6px;
overflow: hidden;
width: 686rpx;
height: 370rpx;
border-radius: 18rpx 18rpx 18rpx 18rpx;
background: #b3d7ff;
}
.img-style-2 {
display: flex;
image {
margin: 6rpx;
width: 100%;
height: 306rpx;
border-radius: 18rpx 18rpx 18rpx 18rpx;
}
}
</style>

698
pages/index.vue
View File

@ -56,129 +56,26 @@
<u-avatar class="center-content-focus-item-avatat" size="120rpx" :src="item.avatar"></u-avatar>
<text class="center-content-focus-item-text">{{item.uname}}</text>
</view>
</view>
</view>
</u-scroll-list>
</view>
</view>
<view class="center-content-focus-line"></view>
</view>
<!-- 话题 -->
<view class="center-content-post" v-for="(item, index) in postList" :key="index">
<!-- <view class="center-content-post-head flex alignCenter justifyBetween">
<u-avatar size="84rpx" :src="item.avatar"></u-avatar>
<view class="center-content-post-head-title">
<text class="center-content-post-head-title-uname">{{item.uname}}</text>
<text class="center-content-post-head-title-timeAddress">{{item.createTime + '·' + item.address}}</text>
</view>
<text v-if="item.isFocus">关注</text>
<text>已关注</text>
</view> -->
<view class="center-content-post-padding">
<view class="center-content-post-head">
<!-- 左对齐 -->
<view class="flex alignCenter">
<!-- 头像 -->
<div class="avatar-container">
<u-avatar class="avatar-1" size="84rpx" :src="item.avatar"></u-avatar>
<image v-if="item.isOfficial" class="official-1" src="../static/images/icon/tu3-6.png"></image>
</div>
<!-- 用户名 -->
<view class="center-content-post-head-title">
<text class="center-content-post-head-title-uname">{{item.uname}}</text>
<text class="center-content-post-head-title-timeAddress">{{item.createTime + '·' + item.address}}</text>
</view>
</view>
<!-- 右对齐 -->
<view class="flex alignCenter" v-if="viewIndex != 0">
<text class="no-focus-text" v-if="item.isFocus" @click="addFocus(index)">关注</text>
<text class="focus-text" v-else @click="cancelFocus(index)">已关注</text>
</view>
</view>
<text class="center-content-post-title" v-if="item.title">{{item.title}}</text>
<text class="center-content-post-content">{{item.content}}</text>
<!-- 图片 -->
<!--一张图片-->
<block v-if="item.media.length == 1">
<image :lazy-load="true" mode="aspectFill" class="img-style-1" :src="item.media[0]"
@tap="previewImage(item.media[0], item.media)"></image>
</block>
<!--二张图片-->
<block v-if="item.media.length == 2">
<view class="img-style-2">
<image :lazy-load="true" v-for="(mediaItem, index2) in item.media" :key="index2"
@tap.stop="previewImage(mediaItem, item.media)" mode="aspectFill"
:src="mediaItem"></image>
</view>
</block>
<!--三张图片-->
<block v-if="item.media.length >= 3">
<u-album :urls="item.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album>
</block>
<!-- tab -->
<view class="center-content-post-tab" style="display: flex;">
<text
class="center-content-post-tab-text"
v-for="(tabItem, index2) in item.tab" :key="index2"
:text="'#' + tabItem">{{'#' + tabItem}}</text>
</view>
<view class="post-list-bottom" style="display: flex; justify-content: space-between;">
<!-- 靠左对齐 -->
<view class="">
<view class="p-item">
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu2-9.png" mode=""></image>
<text class="count">{{ item.transmitCount }}</text>
</view>
</view>
<!-- 靠右对齐 -->
<view class="flex alignCenter">
<view v-if="item.isLike" class="p-item" @click.stop="cancelCollection(index)">
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-8.png" mode=""></image>
<text class="count">{{ item.likeCount }}</text>
</view>
<!-- 靠右对齐 -->
<view v-if="!item.isLike" class="p-item" @click.stop="addCollection(index)">
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-7.png" mode=""></image>
<text class="count">{{ item.likeCount }}</text>
</view>
<!-- 靠右对齐 -->
<view class="p-item margin50">
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-3.png" mode=""></image>
<text class="count">{{ item.commentCount }}</text>
</view>
<!-- 靠右对齐 -->
<view class="p-item margin50" v-if="item.ifFavorite" @click.stop="cancelFavorite(index)">
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-2.png" mode=""></image>
<text class="count">{{ item.favoriteCount }}</text>
</view>
<!-- 靠右对齐 -->
<view class="p-item margin50" v-if="!item.ifFavorite" @click.stop="addFavorite(index)">
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-1.png" mode=""></image>
<text class="count">{{ item.favoriteCount }}</text>
</view>
</view>
</view>
</view>
<u-line></u-line>
<view class="" v-for="(postItem, postIndex) in postList" :key="postIndex">
<PostView :postValue="postItem" :postViewIndex="viewIndex" :postViewType="0"></PostView>
</view>
</view>
<!-- 热门弹出层 -->
<u-popup :round="20" :show="searchOpen" mode="bottom" @close="searchOpen = false" @open="searchOpen = true">
<view style="height: 77vh; position: relative;margin-left: 32rpx;">
<view style="display: flex; height: 48rpx; margin-top: 32rpx;">
<image src="../static/images/icon/tu3-5.png" style="width: 48rpx; height: 48rpx;" @click="handerShowHand"></image>
<view style="
margin: auto ;
margin-right: 308rpx;
@ -192,9 +89,9 @@
">
全部类目
</view>
</view>
<view class="">
<text style="
font-weight: Regular;
@ -207,8 +104,8 @@
margin-top: 42rpx;
">点击选择类目，仅可选择一个</text>
</view>
<view class="box-a">
<view class="box-b" v-for="(item, index) in searchPrerequisiteList" :key="index">
<ul
@ -222,207 +119,192 @@
</ul>
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
viewIndex: 0,
searchOpen: false,
lefther: 0,
searchPrerequisite: '热门',
postTypeOpen: false,
postTypeList: [{lable:'发布话题',id:1}, {lable:'发布活动',id:2}],
bgColor: 'rgba(170, 0, 0, 0)',
searchPrerequisiteList: [
'热门', '最新', '筛选3', '筛选4', '筛选5', '筛选6', '筛选7', '筛选8', '筛选9'
],
list1: [{
name: '关注',
}, {
name: '推荐',
}],
focusList: [{
avatar: 'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
uname: '爱吃饭的小张'
},{
avatar: 'https://oss.1381801.com/forum/202308/11/093616ccxkx99wchwrrw1a.jpg',
uname: '喜欢你没道理'
},{
avatar: 'https://picx.zhimg.com/v2-02f89d05a781ffed9fd2e32654d93135_720w.jpg?source=172ae18b',
uname: '恋爱60秒'
},{
avatar: 'https://www.tboxn.com/wp-content/uploads/2022/11/%E5%A4%B4%E5%83%8F.png',
uname: '爱吃饭的小张'
}],
postList: [{
avatar: 'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
uname: '爱吃饭的小张',
createTime: '11分钟前',
address: '南开大学',
isFocus: false,
isOfficial: true,
title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
content: '八年前，学弟在工地上杀了一个工友，杀人前，他给警察打了电话，预告杀人的时间和地点，并......',
type: '1',
media: [
'https://tu.sioe.cn/gj/qiege/image.jpg',
'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
'https://bpic.51yuansu.com/backgd/cover/00/63/09/64b52b1426fff_800.jpg?x-oss-process=image/resize,w_780/sharpen,100',
'https://tu.sioe.cn/gj/qiege/image.jpg',
],
tab: [
'学术讨论组',
'校园风景'
],
transmitCount: 136,
isLike: true,
likeCount: 999,
commentCount: 136,
ifFavorite: true,
favoriteCount: 136
},{
avatar: 'https://oss.1381801.com/forum/202308/11/093616ccxkx99wchwrrw1a.jpg',
uname: '喜欢你没道理',
createTime: '2024-5-5',
address: '南开大学',
isFocus: false,
isOfficial: false,
// title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
content: '是一个中文互联网高质量问答社区和创作者聚集的原创内容平台，于2011年1月正式上线',
type: '1',
media: [
'https://tu.sioe.cn/gj/qiege/image.jpg',
],
tab: [
'校园风景'
],
transmitCount: 13,
isLike: false,
likeCount: 99,
commentCount: 13,
ifFavorite: true,
favoriteCount: 13
},{
avatar: 'https://picx.zhimg.com/v2-02f89d05a781ffed9fd2e32654d93135_720w.jpg?source=172ae18b',
uname: '恋爱60秒',
createTime: '2024-5-4',
address: '理工大学',
isFocus: false,
isOfficial: false,
title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
content: '是一个中文互联网高质量问答社区和创作者聚集的原创内容平台，于2011年1月正式上线',
type: '1',
media: [
'https://tu.sioe.cn/gj/qiege/image.jpg',
'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b'
],
tab: [
'校园风景'
],
transmitCount: 13,
isLike: false,
likeCount: 99,
commentCount: 13,
ifFavorite: false,
favoriteCount: 13
}]
}
},
onLoad() {
console.log(this.$store.state.user.QNDomain);
},
methods: {
previewImage(url, urls) {
uni.previewImage({
current: url, // 当前显示图片的http链接
urls: urls // 需要预览的图片http链接列表
});
},
toScanCode() {
// 允许从相机和相册扫码
uni.scanCode({
success: function (res) {
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
}
});
},
togglePostType() {
this.postTypeOpen = !this.postTypeOpen;
},
toEarch() {
console.log()
this.$tab.navigateTo('/pages/search/index')
},
publishTalk(item){
console.log()
if(item.id === 2){
//todo 判断用户是否有增加活动的接口调用权限
this.$tab.navigateTo('/pages/activity/publish')
}
},
rightClick() {
console.log('rightClick');
},
leftClick() {
console.log('leftClick');
},
click(item) {
console.log('item', item);
this.viewIndex = item.index;
},
cancelCollection(index) {
console.log(111,index)
this.postList[index].likeCount -= 1;
this.postList[index].isLike = !this.postList[index].isLike;
},
addCollection(index) {
console.log(111,index)
this.postList[index].likeCount += 1;
this.postList[index].isLike = !this.postList[index].isLike;
},
cancelFavorite(index) {
console.log(111,index)
this.postList[index].favoriteCount -= 1;
this.postList[index].ifFavorite = !this.postList[index].ifFavorite;
},
addFavorite(index) {
console.log(111,index)
this.postList[index].favoriteCount += 1;
this.postList[index].ifFavorite = !this.postList[index].ifFavorite;
},
cancelFocus(index) {
console.log(111,index)
this.postList[index].isFocus = !this.postList[index].isFocus;
}
,
addFocus(index) {
console.log(111,index)
this.postList[index].isFocus = !this.postList[index].isFocus;
},
handerLi(res) {
this.lefther = res;
console.log(res)
this.searchPrerequisite = this.searchPrerequisiteList[res]
setTimeout(() => {
this.searchOpen = !this.searchOpen
}, 350);
<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import {onReachBottom,onLoad} from "@dcloudio/uni-app";
import PostView from "@/pages/common/postview/index.vue";
const { proxy } = getCurrentInstance();
onReachBottom(() => {
console.log('触底了')
})
const viewIndex = ref(0);
const searchOpen = ref(false);
const lefther = ref(0);
const searchPrerequisite = ref('热门');
const postTypeOpen = ref(false);
const bgColor = ref('rgba(170, 0, 0, 0)');
// const postTypeList = ['发布话题', '发布活动'];
const postTypeList = [{lable:'发布话题',id:1}, {lable:'发布活动',id:2}];
const searchPrerequisiteList = [
'热门', '最新', '筛选3', '筛选4', '筛选5', '筛选6', '筛选7', '筛选8', '筛选9'
];
const list1 = reactive([
{ name: '关注' },
{ name: '推荐' }
]);
const focusList = reactive([
{
avatar: 'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
uname: '爱吃饭的小张'
},
handerShowHand() {
this.searchOpen = !this.searchOpen
{
avatar: 'https://oss.1381801.com/forum/202308/11/093616ccxkx99wchwrrw1a.jpg',
uname: '喜欢你没道理'
},
{
avatar: 'https://picx.zhimg.com/v2-02f89d05a781ffed9fd2e32654d93135_720w.jpg?source=172ae18b',
uname: '恋爱60秒'
},
{
avatar: 'https://www.tboxn.com/wp-content/uploads/2022/11/%E5%A4%B4%E5%83%8F.png',
uname: '爱吃饭的小张'
}
]);
const postList = reactive([
{
avatar: 'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
uname: '爱吃饭的小张',
createTime: '11分钟前',
address: '南开大学',
isFocus: false,
isOfficial: true,
title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
content: '八年前，学弟在工地上杀了一个工友，杀人前，他给警察打了电话，预告杀人的时间和地点，并超出部分测试超出部分测试超出部分测试超出部分测试......超出部分测试超出部分测试超出部分测试超出部分测试',
type: '1',
media: [
'https://tu.sioe.cn/gj/qiege/image.jpg',
'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
'https://bpic.51yuansu.com/backgd/cover/00/63/09/64b52b1426fff_800.jpg?x-oss-process=image/resize,w_780/sharpen,100',
'https://tu.sioe.cn/gj/qiege/image.jpg',
],
tab: ['学术讨论组', '校园风景'],
transmitCount: 136,
isLike: true,
likeCount: 999,
commentCount: 136,
ifFavorite: true,
favoriteCount: 136
},
{
avatar: 'https://oss.1381801.com/forum/202308/11/093616ccxkx99wchwrrw1a.jpg',
uname: '喜欢你没道理',
createTime: '2024-5-5',
address: '南开大学',
isFocus: false,
isOfficial: false,
content: '是一个中文互联网高质量问答社区和创作者聚集的原创内容平台，于2011年1月正式上线',
type: '1',
media: [
'https://tu.sioe.cn/gj/qiege/image.jpg',
],
tab: ['校园风景'],
transmitCount: 13,
isLike: false,
likeCount: 99,
commentCount: 13,
ifFavorite: true,
favoriteCount: 13
},
{
avatar: 'https://picx.zhimg.com/v2-02f89d05a781ffed9fd2e32654d93135_720w.jpg?source=172ae18b',
uname: '恋爱60秒',
createTime: '2024-5-4',
address: '理工大学',
isFocus: false,
isOfficial: false,
title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
content: '是一个中文互联网高质量问答社区和创作者聚集的原创内容平台，于2011年1月正式上线',
type: '1',
media: [
'https://tu.sioe.cn/gj/qiege/image.jpg',
'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b'
],
tab: ['校园风景'],
transmitCount: 13,
isLike: false,
likeCount: 99,
commentCount: 13,
ifFavorite: false,
favoriteCount: 13
}
]);
const publishTalk = (item) => {
console.log()
if(item.id === 2){
//todo 判断用户是否有增加活动的接口调用权限
proxy.$tab.navigateTo('/pages/activity/publish')
}
}
}
const previewImage = (url, urls) => {
uni.previewImage({
current: url, // 当前显示图片的http链接
urls: urls // 需要预览的图片http链接列表
});
};
const toScanCode = () => {
// 允许从相机和相册扫码
uni.scanCode({
success: function (res) {
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
}
});
};
const togglePostType = () => {
postTypeOpen.value = !postTypeOpen.value;
};
const toEarch = () => {
proxy.$tab.navigateTo('/pages/search/index');
};
const rightClick = () => {
console.log('rightClick');
};
const leftClick = () => {
console.log('leftClick');
};
const click = (item) => {
viewIndex.value = item.index;
};
const handerLi = (res) => {
lefther.value = res;
searchPrerequisite.value = searchPrerequisiteList[res];
setTimeout(() => {
searchOpen.value = !searchOpen.value;
}, 350);
};
const handerShowHand = () => {
searchOpen.value = !searchOpen.value;
};
onMounted(() => {
console.log(proxy.$store.state.user.QNDomain);
});
</script>
<style lang="scss">
@ -463,7 +345,7 @@
}
}
.u-scroll-list.data-v-fea2b4f4 {
padding-bottom: 0px !important;
}
@ -515,7 +397,7 @@
margin-right: 16rpx;
}
.category-dropdown {
// margin-left: 42rpx;
// margin-left: 42rpx;
}
.text1{
font-weight: 400;
@ -597,164 +479,25 @@
height: 16rpx;
background: #e5e5e5;
}
.center-content-post {
}
.center-content-post-padding {
padding: 46rpx 32rpx;
}
.center-content-post-head {
display: flex;
justify-content: space-between;
}
.center-content-post-head-title {
display: flex;
flex-direction: column;
margin-left: 20rpx;
}
.center-content-post-head-title-uname {
font-weight: 400;
font-size: 30rpx;
text-align: left;
color: #000000;
align-self: flex-start; /* 垂直起始对齐 */
margin-bottom: 20rpx;
height: 32rpx;
line-height: 32rpx;
}
.center-content-post-head-title-timeAddress {
font-weight: 400;
font-size: 30rpx;
text-align: left;
color: #999999;
align-self: flex-end; /* 垂直结束对齐 */
height: 30rpx;
line-height: 30rpx;
}
.no-focus-text {
font-weight: 400;
width: 58rpx;
// height: 30rpx;
font-size: 28rpx;
text-align: left;
color: #3477FC;
}
.focus-text {
font-weight: 400;
/* width: 58rpx; */
// height: 30rpx;
font-size: 28rpx;
text-align: left;
color: #2553b4;
}
.center-content-post-title{
display: block;
font-weight: 600;
/* width: 670rpx; */
// height: 80rpx;
font-size: 32rpx;
text-align: left;
color: #000000;
margin-top: 30rpx;
display: -webkit-box; /* 将文本视为弹性盒子 */
-webkit-line-clamp: 2; /* 设置最大行数 */
-webkit-box-orient: vertical; /* 垂直方向排列文本 */
overflow: hidden; /* 隐藏超出部分 */
}
.center-content-post-content{
display: block;
font-weight: 400;
/* width: 670rpx; */
// height: 80rpx;
font-size: 32rpx;
text-align: left;
color: #333333;
margin-top: 30rpx;
margin-bottom: 34rpx;
display: -webkit-box; /* 将文本视为弹性盒子 */
-webkit-line-clamp: 2; /* 设置最大行数 */
-webkit-box-orient: vertical; /* 垂直方向排列文本 */
overflow: hidden; /* 隐藏超出部分 */
}
.u-album__row[data-v-723ad357] {
justify-content: center !important;
}
.u-album__row.data-v-723ad357 {
justify-content: center !important;
/* height: 200rpx !important; */
}
.u-album__row__wrapper {}
.data-v-6fcabaad {
border-radius: 20rpx 20rpx 20rpx 20rpx;
/* width: 200rpx !important;
height: 200rpx !important; */
}
.center-content-post-tab{
margin-top: 38rpx;
margin-bottom: 36rpx;
}
.post-list-bottom {
display: flex;
justify-content: center; /* 水平居中 */
}
.p-item {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.center-content-post-tab-text{
font-weight: 400;
/* width: 139rpx; */
// height: 26rpx;
font-size: 24rpx;
text-align: left;
color: #3477FC;
/* width: 130rpx; */
// height: 44rpx;
// line-height: 44rpx;
border-radius: 10rpx 10rpx 10rpx 10rpx;
background: #f7f8fa;
padding: 8rpx;
/* margin-left: 50rpx; */
}
.center-content-post-tab-text:nth-child(2) {
/* 您的样式 */
margin-left: 24rpx; /* 添加额外的左边距 */
}
.margin50 {
margin-left: 50rpx; /* 添加额外的左边距 */
}
.count{
font-weight: 400;
width: 48rpx;
/* height: 23rpx; */
font-size: 28rpx;
text-align: left;
color: #787878;
margin-left: 10rpx;
}
border-radius: 20rpx 20rpx 20rpx 20rpx !important;
/* width: 200rpx !important;
height: 200rpx !important; */
}
.box-a {
margin-top: 42rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box-b {
width: calc(33.33% - 16rpx); /* 每行三个元素，减去外边距的总宽度 */
margin-bottom: 24rpx;
}
.box-c {
// width: 100%;
// height: 82rpx;
@ -765,7 +508,7 @@
cursor: pointer;
overflow: hidden;
}
.offtext {
font-weight: 400;
font-size: 30rpx;
@ -777,24 +520,24 @@
transition: all 0.3s ease;
padding: 12rpx 0;
}
.boxtext {
font-weight: 600;
color: #91b4ff;
}
.box-d {
border-color: #91b4ff;
}
.avatar-container {
position: relative;
}
.avatar-1 {
position: relative;
}
.official-1 {
position: absolute;
width: 32rpx;
@ -802,39 +545,16 @@
bottom: 0;
right: 0;
}
.img-style-1 {
display: block;
width: 100%;
height: 600rpx;
border-radius: 6px;
overflow: hidden;
width: 686rpx;
height: 370rpx;
border-radius: 18rpx 18rpx 18rpx 18rpx;
background: #b3d7ff;
}
.img-style-2 {
display: flex;
image {
margin: 6rpx;
width: 100%;
height: 306rpx;
border-radius: 18rpx 18rpx 18rpx 18rpx;
}
}
.image-container {
display: inline-block;
position: relative; /* 设置父元素为相对定位 */
width: 46rpx;
height: 46rpx;
}
/* 其他样式... */
.postTypeContainer {
display: flex;
flex-direction: column;
@ -844,15 +564,15 @@
height: 122rpx;
border-radius: 16rpx;
background: #ffffff;
box-shadow: 0 0 0 2rpx #B4D6FF;
box-shadow: 0 0 0 2rpx #B4D6FF;
position: absolute; /* 设置子元素为绝对定位 */
top: 100%; /* 将子元素定位到父元素底部 */
left: 50%; /* 将子元素水平居中 */
transform: translateX(-50%); /* 通过平移来水平居中 */
top: calc(100% + 20rpx); /* 将子元素定位到父元素底部，并增加 20rpx 的距离 */
}
.postTypeWindow {
/* 这里不需要设置 display: flex; */
/* 这里也不需要设置 flex-direction: column; */