话题详情/发布话题

main
Connor 2024-06-05 19:48:15 +08:00
parent a2f702cace
commit 1e2aa1cae3
8 changed files with 462 additions and 28 deletions

View File

@ -8,6 +8,13 @@
}
},
"pages": [
// {
// "path" : "pages/common/commentArea/commentArea",
// "style" :
// {
// "navigationBarTitleText" : "评论区"
// }
// },
{
"path": "pages/index",
"style": {
@ -187,7 +194,22 @@
"style": {
"navigationBarTitleText": "添加好友"
}
},
{
"path" : "pages/post/postInfo/postInfo",
"style" :
{
"navigationBarTitleText" : "话题详情"
}
},
{
"path" : "pages/post/postPublish/postPublish",
"style" :
{
"navigationBarTitleText" : "发布话题"
}
}
// {
// "path": "pages/signln/signiddetails",
// "style": {

View File

View File

@ -1,6 +1,6 @@
<template>
<!-- 话题 -->
<view class="center-content-post">
<view class="center-content-post" @click="toPostInfoView()">
<view class="center-content-post-padding">
<view class="center-content-post-head">
<!-- 左对齐 -->
@ -18,8 +18,8 @@
</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>
<text class="no-focus-text" v-if="postValue.isFocus" @click.stop="addFocus(index)"></text>
<text class="focus-text" v-else @click.stop="cancelFocus()">已关</text>
</view>
</view>
<text class="center-content-post-title" v-if="postValue.title">{{postValue.title}}</text>
@ -29,7 +29,7 @@
<!--一张图片-->
<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>
@tap.stop="previewImage(postValue.media[0], postValue.media)"></image>
</block>
<!--二张图片-->
<block v-if="postValue.media.length == 2">
@ -62,7 +62,7 @@
<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>
<text class="count-like">{{ postValue.likeCount }}</text>
</view>
<!-- 靠右对齐 -->
@ -80,7 +80,7 @@
<!-- 靠右对齐 -->
<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>
<text class="count-favorite">{{ postValue.favoriteCount }}</text>
</view>
<!-- 靠右对齐 -->
@ -91,7 +91,6 @@
</view>
</view>
</view>
<u-line></u-line>
</view>
</template>
@ -128,6 +127,13 @@
// favoriteCount: 136
// }
// );
const { proxy } = getCurrentInstance();
const toPostInfoView = () => {
if(props.postViewType == 1) {
return;
}
proxy.$tab.navigateTo('/pages/post/postInfo/postInfo')
}
const previewImage = (url, urls) => {
uni.previewImage({
@ -170,7 +176,7 @@
.center-content-post {
}
.center-content-post-padding {
padding: 46rpx 32rpx;
padding: 46rpx 32rpx 28rpx 32rpx;
}
.center-content-post-head {
display: flex;
@ -238,7 +244,7 @@
font-weight: 400;
/* width: 670rpx; */
// height: 80rpx;
font-size: 32rpx;
font-size: 30rpx;
text-align: left;
color: #333333;
margin-top: 18rpx;
@ -253,7 +259,7 @@
font-weight: 400;
/* width: 670rpx; */
// height: 80rpx;
font-size: 32rpx;
font-size: 30rpx;
text-align: left;
color: #333333;
margin-top: 18rpx;
@ -278,11 +284,12 @@
.center-content-post-tab{
margin-top: 20rpx;
margin-bottom: 20rpx;
// margin-bottom: 20rpx;
}
.post-list-bottom {
margin-top: 20rpx;
display: flex;
justify-content: center; /* 水平居中 */
}
@ -326,6 +333,30 @@
margin-left: 10rpx;
}
.count-like{
font-weight: 400;
width: 48rpx;
/* height: 23rpx; */
font-size: 28rpx;
text-align: left;
color: #FA3939;
margin-left: 10rpx;
}
.count-favorite{
font-weight: 400;
width: 48rpx;
/* height: 23rpx; */
font-size: 28rpx;
text-align: left;
color: #FFC729;
margin-left: 10rpx;
}
.avatar-container {
position: relative;
}
.avatar-1 {
position: relative;
}

View File

@ -65,6 +65,7 @@
<view class="" v-for="(postItem, postIndex) in postList" :key="postIndex">
<PostView :postValue="postItem" :postViewIndex="viewIndex" :postViewType="0"></PostView>
<u-line></u-line>
</view>
</view>
@ -245,7 +246,10 @@ import PostView from "@/pages/common/postview/index.vue";
]);
const publishTalk = (item) => {
console.log()
if(item.id === 1){
//todo
proxy.$tab.navigateTo('/pages/post/postPublish/postPublish')
}
if(item.id === 2){
//todo
proxy.$tab.navigateTo('/pages/activity/publish')
@ -530,22 +534,6 @@ import PostView from "@/pages/common/postview/index.vue";
border-color: #91b4ff;
}
.avatar-container {
position: relative;
}
.avatar-1 {
position: relative;
}
.official-1 {
position: absolute;
width: 32rpx;
height: 32rpx;
bottom: 0;
right: 0;
}
.image-container {
display: inline-block;
position: relative; /* 设置父元素为相对定位 */

View File

@ -0,0 +1,221 @@
<template>
<view>
<PostView :postValue="postValue" :postViewIndex="1" :postViewType="1"></PostView>
<view class="center-content-focus-line"></view>
<view class="comment">
<view class="flex justifyBetween alignCenter commentTop">
<text class="commentLabel">全部评论</text>
<text class="report">举报</text>
</view>
<view class="no-comment">
<image class="no-comment-img" src="../../../static/images/icon/no_comment.png" mode=""></image>
<text class="no-comment-text">暂无评论快去做评论第一人吧</text>
<view class="no-comment-bt">
<text class="no-comment-bt-text">快去抢沙发</text>
</view>
</view>
</view>
<up-tabbar
class="up-tabbar-container"
:fixed="true"
:placeholder="true"
:safeAreaInsetBottom="true"
>
<!-- <view class="flex justifyCenter"> -->
<view class="flex alignCenter justifyCenter">
<view class="flex justifyCenter alignCenter commentInput">
<image class="commentInput-img" src="../../../static/logo.png" mode=""></image>
<text class="commentInput-text">友好评论~</text>
</view>
</view>
<view v-if="postValue.isLike" @click.stop="cancelCollection()" class="flex alignCenter justifyCenter flexColumn">
<image class="commentInput-img" src="../../../static/images/icon/tu3-8.png" mode=""></image>
<text class="commentInput-txt-like">{{postValue.likeCount}}</text>
</view>
<view v-if="!postValue.isLike" @click.stop="addCollection()" class="flex alignCenter justifyCenter flexColumn">
<image class="commentInput-img" src="../../../static/images/icon/tu3-7.png" mode=""></image>
<text class="commentInput-txt">{{postValue.likeCount}}</text>
</view>
<view v-if="postValue.ifFavorite" @click.stop="cancelFavorite()" class="flex alignCenter justifyCenter flexColumn">
<image class="commentInput-img" src="../../../static/images/icon/tu3-2.png" mode=""></image>
<text class="commentInput-txt-favorite">{{postValue.favoriteCount}}</text>
</view>
<view v-if="!postValue.ifFavorite" @click.stop="addFavorite()" class="flex alignCenter justifyCenter flexColumn">
<image class="commentInput-img" src="../../../static/images/icon/tu3-1.png" mode=""></image>
<text class="commentInput-txt">{{postValue.favoriteCount}}</text>
</view>
<view class="flex alignCenter justifyCenter flexColumn">
<image class="commentInput-img" src="../../../static/images/icon/tu2-9.png" mode=""></image>
<text class="commentInput-txt">转发</text>
</view>
<!-- </view> -->
</up-tabbar>
</view>
</template>
<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import PostView from "@/pages/common/postview/index.vue";
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 cancelCollection = () => {
postValue.likeCount -= 1;
postValue.isLike = !postValue.isLike;
};
const addCollection = () => {
postValue.likeCount += 1;
postValue.isLike = !postValue.isLike;
};
const cancelFavorite = () => {
postValue.favoriteCount -= 1;
postValue.ifFavorite = !postValue.ifFavorite;
};
const addFavorite = () => {
postValue.favoriteCount += 1;
postValue.ifFavorite = !postValue.ifFavorite;
};
</script>
<style>
.data-v-6fcabaad {
border-radius: 20rpx 20rpx 20rpx 20rpx !important;
/* width: 200rpx !important;
height: 200rpx !important; */
}
.center-content-focus-line{
height: 8rpx;
background: #f4f5f6;
}
.comment{
padding: 32rpx;
}
.commentLabel{
font-weight: 400;
/* width: 265rpx; */
/* height: 38rpx; */
font-size: 36rpx;
/* text-align: left; */
color: #000000;
}
.report{
font-weight: 400;
/* width: 52rpx; */
/* height: 26rpx; */
font-size: 26rpx;
/* text-align: left; */
color: #999999;
}
.no-comment {
display: flex;
flex-direction: column;
align-items: center; /* 水平居中 */
justify-content: center; /* 垂直居中 */
}
.no-comment-img{
margin-top: 44rpx;
width: 200rpx;
height: 145rpx;
}
.no-comment-text{
margin-top: 8rpx;
font-weight: 400;
font-size: 26rpx;
color: #999999;
}
.no-comment-bt{
margin-top: 36rpx;
width: 308rpx;
height: 82rpx;
border-radius: 40rpx 40rpx 40rpx 40rpx;
border-width: 2rpx;
border-color: #C9F6F5;
background: #ffffff;
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.no-comment-bt-text{
font-weight: 400;
font-size: 32rpx;
color: #CBF6F5;
}
.commentInput{
width: 364rpx;
height: 80rpx;
border-radius: 40rpx 40rpx 40rpx 40rpx;
background: #f7f8fa;
}
.commentInput-img{
width: 40rpx;
height: 40rpx;
}
.commentInput-text{
font-weight: 400;
font-size: 30rpx;
color: #999999;
}
.commentInput-txt{
font-weight: 400;
font-size: 28rpx;
color: #787878;
}
.commentInput-txt-like{
font-weight: 400;
font-size: 28rpx;
color: #FA3939;
}
.commentInput-txt-favorite{
font-weight: 400;
font-size: 28rpx;
color: #FFC729;
}
</style>

View File

@ -0,0 +1,172 @@
<template>
<view>
<!-- 顶部导航栏 -->
<!-- <up-navbar leftText="" title="" :placeholder="true" :safeAreaInsetTop="true" @leftClick="leftClick"
:bgColor="bgColor">
<template #center>
<div class="navbarcenter"><span>发布活动</span></div>
</template>
</up-navbar> -->
</view>
<view class="bgc"></view>
<view class="cardz">
<view class="titleInfo">
<up-input placeholder="输入标题会更受欢迎奥~5~20个字" v-model="title" border="none" maxlength="20" fontSize="34rpx"
color="#C0C0C0" clearable></up-input>
<view class="xian"></view>
</view>
<view class="contentInfo">
<up-textarea v-model="content" placeholder="输入你想发布的内容吧 图片精美、有看点的内容更容易获得推荐最多发布8张照片 安全指南:请勿发布带有个人信息(如:住址)" count border="none" height="270" maxlength="200"
placeholderStyle="color: #c0c0c0;font-size: 30rpx; background:none;"></up-textarea>
</view>
<view class="cardzfile">
<fileUpload v-model="fileList1" :fileTypeInfo="fileTypeInfo1"></fileUpload>
</view>
</view>
<view class="cardx">
<up-cell-group :border="false">
<up-cell :isLink="true" :center="true">
<template #title style="margin-top: 2rpx;width: 100%;height: 30rpx;display: flex;align-items: center;">
<image :src="tu52" style="width: 30rpx; height: 32rpx;"></image>
<span>添加话题(最多可添加2条)</span>
</template>
</up-cell>
<!-- <up-cell :isLink="true" :center="true">
<template #title style="margin-top: 2rpx;width: 100%;height: 30rpx;display: flex;align-items: center;">
<image :src="tu53" style="width: 30rpx; height: 32rpx;"></image>
<span>请选择活动结束时间</span>
</template>
</up-cell> -->
<up-cell :border="false" :isLink="true" :center="true">
<template #title style="margin-top: 2rpx;width: 100%;height: 30rpx;display: flex;align-items: center;">
<image :src="tu51" style="width: 30rpx; height: 32rpx;"></image>
<span>添加定位</span>
</template>
</up-cell>
</up-cell-group>
</view>
<view class="cardxx">
<up-button color="#C9F6F5" size="large" shape="circle" @click="publish"><span
class="fbText">发布</span></up-button>
<view style="width: 26rpx;height: 80rpx;"></view>
<up-button color="#F8F8E3" size="large" shape="circle" @click="draft" style="margin-left: 26rpx;"><span
class="cgText">存草稿</span></up-button>
</view>
</template>
<script setup>
import fileUpload from '@/pages/common/file/fileUpload'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { ref, reactive, getCurrentInstance } from 'vue'
import { useStore } from 'vuex';
const { proxy } = getCurrentInstance();
const iconConfig = proxy.iconConfig;
const tu51 = iconConfig.tu51;
const tu52 = iconConfig.tu52;
const tu53 = iconConfig.tu53;
const title = ref('')
const content = ref('');
const fileList1 = ref([])
const fileTypeInfo1 = ref('image')
const bgColor = ref('');
bgColor.value = 'rgba(170, 0, 0, 0)'
onLoad((options) => {
console.log("页面参数:", options.id);
})
const leftClick = () => {
proxy.$tab.navigateBack(1)
}
const draft = () => {
console.log("存草稿");
}
const publish = () => {
console.log("发布");
}
</script>
<style lang="scss" >
.navbarcenter {
font-weight: 400;
font-size: 36rpx;
text-align: left;
color: #000000;
}
.bgc {
width: 100%;
height: 500rpx;
background: linear-gradient(-180deg, #c9f6f5, #ffffff);
position: fixed;
top: 0rpx;
left: 0rpx;
z-index: -1;
}
.cardz {
margin-left: 32rpx;
margin-right: 32rpx;
.titleInfo {
margin-top: 40rpx;
.xian {
margin-top: 32rpx;
height: 2rpx;
border-radius: 1rpx 1rpx 1rpx 1rpx;
background: #ffffff;
}
}
.contentInfo {
margin-top: 46rpx;
}
.cardzfile {
background-color: #FFFFFF;
}
}
.cardx {
background-color: #FFFFFF;
padding-top: 72rpx;
margin-left: 32rpx;
margin-right: 32rpx;
.c1 {
margin-top: 2rpx;
width: 100%;
height: 102rpx;
display: flex;
align-items: center;
}
}
.cardxx {
display: flex;
margin-left: 32rpx;
margin-right: 32rpx;
margin-top: 80rpx;
.fbText {
font-weight: 400;
font-size: 30rpx;
color: #FBFBFB !important;
}
.cgText {
font-weight: 400;
font-size: 30rpx;
color: #999999 !important;
}
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB