Skip to content

C
cust-app
Commit de56eca3 authored by liwei's avatar liwei
Browse files
Options

新增了动态里的评论页面

parent efb2fadc
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 390 additions and 603 deletions
pagesArticle/articleDetail.vue
View file @ de56eca3
<template>
<div>
<view>
<ArticleItem @delete="deleteFn" :info="item" @selectShare="selectShare(item)" @praise="praise"
@close="close" @open="open"/>
</view>
<view class="commentTitle">
<view>
<text>评论区</text>
......@@ -188,10 +192,28 @@
</template>
<script>
// 发送消息 第一个参数为消息名（事件名），第二个参数为通信的值（可以不穿）
import ArticleItem from './components/articleItem.vue'
export default{
components: {
ArticleItem,
},
data () {
return {
item:{
createTime:'2024-12-28 15:02:01',
headPortrait:'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg',//头像
nickName:'不爱吃辣的小王',//nickName
gender:'MALE',//性别
information:'02·重庆市·硕士·互联网',//个人信息
content:'昨天的快乐留在今天发，那就是100%',//动态内容
time:'2024-11-11 15:02:01',//发布动态的时间
commentCount:'10',//评论数
likeCount:'11',//点赞数
img:[
'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg',
'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg'
]
},
commentValue:'',
commentChildren:[
{
......
pagesArticle/components/articleItem.vue 0 → 100644
View file @ de56eca3
<template>
<view class="item">
<view class="left">
<image @click="gotoUserInfo(info)" :src="info.headPortrait" mode="aspectFill"></image>
</view>
<view class="center">
<template>
<view class="name">
<text @click="gotoUserInfo(info)">{{info.nickName}}</text>
<image v-if="info.gender!='MALE'" class="gender" src="../../static/images/like/famale.png" mode="">
</image>
<image v-else class="gender" src="../../static/images/like/male.png" mode=""></image>
</view>
<view class="info">
<text decode="true" style="color: #434343;">{{info.information}}</text>
</view>
</template>
<view class="content">
<template v-if="info.content">
<u-read-more ref="uReadMore" :shadowStyle="shadowStyle" :toggle="true" color="#415C9E" :textIndent="0" showHeight="126rpx">
<view @click="gotoDetail(info)" style="font-size: 28rpx;color: #333333;">
<view class="" style="line-height: 1.5;">
{{info.content}}
</view>
</view>
</u-read-more>
</template>
</view>
<view class="contentImg">
<imageAdaptation :imgList="imgs" :imgLayout1="imgLayout1" :imgLayout2="imgLayout2"
:imgLayout3="imgLayout3" @previewImg="preview"></imageAdaptation>
<q-previewImage ref="previewImage" :urls="imgs" @onLongpress="onLongpress" @open="open"
@close="close"></q-previewImage>
</view>
<view class="time">
{{info.time}}
</view>
</view>
</view>
</template>
<script>
import imageAdaptation from '@/components/images-adaptation/imageAdaptation.vue'
import xzjReadMore from "@/components/xzj-readMore/xzj-readMore.vue"
export default {
name:'ArticleItem',
options: {
styleIsolation: 'shared'
},
components: {
imageAdaptation,
xzjReadMore
},
props: {
info: {
type: Object,
default: () => {}
}
},
watch: {
info: {
handler(newValue) {
if (newValue?.img?.length) {
this.imgs = newValue.img
}
},
deep: true,
immediate: true
}
},
mounted() {
if (this.$refs.uReadMore) {
setTimeout(() => {
this.$nextTick(() => {
this.$refs.uReadMore.init();
})
}, 100)
}
},
data() {
return {
tagStyle: {
text: 'line-height:1em'
},
imgs: [],
imgLayout1: [450, 450],
imgLayout2: [220, 220],
imgLayout3: [160, 160],
show: false,
list: [{
name: '删除',
},
// {
// name: "举报"
// }
],
shadowStyle: {
'backgroundImage': 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 50%, #fff 100%)',
justifyContent: 'flex-end'
},
tipMsg: '',
isConfirm: false
}
},
methods: {
load() {
this.$refs.uReadMore.init();
},
select() {
this.$emit("selectShare", this.info)
},
//查看动态详情
gotoDetail(item) {
uni.navigateTo({
url: '/pagesArticle/articleDetail?userId=' + item.userId
})
},
//查看用户详情
gotoUserInfo(item) {
uni.navigateTo({
url: '/pageslike/like/userInfo?id=' + item.userId
})
},
// 点赞
praise(value) {
this.$emit("praise", value)
},
// 删除
selectClick(item) {
if (item.name == "删除") {
this.$emit("delete", this.info)
} else if (item.name == "举报") {
this.tipMsg = "尽情期待";
this.$refs.elm.showDialog();
}
},
preview({
url,
index
}) {
uni.previewImage({
current: index,
urls: this.imgs,
longPressActions: {
// itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(data) {
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
},
fail: function(err) {
console.log(err.errMsg);
}
}
});
// // #ifdef MP-WEIXIN
// this.$nextTick(() => {
// this.$refs.previewImage.open(url); // 传入当前选中的图片地址(小程序必须添加$nextTick，解决组件首次加载无图)
// })
// // #endif
// // #ifndef MP-WEIXIN
// this.$refs.previewImage.open(url); // 传入当前选中的图片地址
// // #endif
},
onLongpress(e) { //长按事件
console.log('当前长按的图片是' + e);
uni.showActionSheet({
itemList: ['转发给朋友', '保存到手机'],
success: function(res) {
console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
},
fail: function(res) {
console.log(res.errMsg);
}
});
},
/* open和close方法一般用不到，但是在一些特殊场景会用到，
* 比如预览图片时你需要覆盖 NavigationBar和 TabBar，
* 或者在app中需要预览图片时覆盖住原生组件，比如video或者map等，
* 你可以根据open和close去做一些操作，例如隐藏导航栏或者隐藏一些原生组件等
*/
open() { //监听组件显示 （隐藏TabBar和NavigationBar，隐藏video原生组件）
uni.hideTabBar()
uni.setNavigationBarColor({
frontColor: '#000000', // 设置前景色为黑色
backgroundColor: '#000000', // 设置背景色为黑色
})
// this.videoShow = false
this.$emit("open")
},
close() { //监听组件隐藏 （显示TabBar和NavigationBar，显示video原生组件）
uni.showTabBar()
uni.setNavigationBarColor({
frontColor: '#ffffff', // 设置前景色为白色
backgroundColor: '#000000', // 设置背景色为黑色
})
// this.videoShow = true
this.$emit("close")
},
showSelect(info) {
if (info.isDelete != true) {
const index = this.list.findIndex(i => i.name === '删除');
if (index !== -1) {
this.list.splice(index, 1);
}
}
this.show = true;
}
}
}
</script>
<style lang="scss" scoped>
.bor {
border-top: 2rpx solid #F5F5F5;
}
.item {
display: flex;
justify-content: space-between;
padding: 40rpx 0 0rpx 0;
margin-left: 32rpx;
margin-right: 32rpx;
.left {
image {
width: 68rpx;
height: 68rpx;
border-radius: 50%;
}
.l {
height: 100%;
margin-right: 10rpx;
.box {
font-weight: 600;
font-size: 24rpx;
color: #111827;
.str {
font-size: 30rpx;
}
.month {
font-size: 20rpx;
}
}
}
.line {
margin-left: 10rpx;
width: 0;
height: calc(100% - 80rpx);
border: 1rpx solid #E6E6E6;
margin-top: 20rpx;
}
}
.center {
margin: 0 20rpx;
flex: 1;
.name {
text {
font-weight: 600;
font-size: 32rpx;
color: #333333;
}
.gender {
width: 36rpx;
height: 36rpx;
margin-left: 16rpx;
vertical-align: middle;
}
}
.info {
font-weight: 400;
font-size: 24rpx;
color: #434343;
margin: 12rpx 0 24rpx 0;
}
.content {
font-weight: 400;
font-size: 28rpx;
color: #333333;
margin-bottom: 16rpx;
::v-deep .u-read-more__toggle {
justify-content: flex-end !important;
}
}
.contentImg {
// max-height: 450rpx;
}
.time {
font-weight: 400;
font-size: 24rpx;
color: #939393;
margin: 22rpx 0 34rpx 0;
}
.btns {
display: flex;
justify-content: space-between;
.btn {
image {
width: 28rpx;
height: 28rpx;
margin-right: 8rpx;
vertical-align: middle;
}
text {
font-weight: 400;
font-size: 24rpx;
color: #434343;
}
}
}
}
.right {
view {
display: flex;
height: 30rpx;
padding-top: 14rpx;
text {
width: 8rpx;
height: 8rpx;
background-color: #333;
border-radius: 50%;
margin-right: 6rpx;
}
}
}
}
</style>
pageslike/components/elm/index.vue deleted 100644 → 0
View file @ efb2fadc
<template>
<view class="dialog_box" v-if="show">
<view class="bg" ></view>
<view class="dialog_content">
<view class="bag">
<image class="pop-bgc" :src="img + '/img/home-pop-bg.png'"></image>
<view class="divss">
<image class="touxiang" :src="touxiang" mode="aspectFill"></image>
<image class="suo-img" src="../../../static/images/like/suo.png" mode="aspectFill"></image>
<view class="namne">解锁对方身份</view>
<view class="namnes">解锁后，对方喜欢你、访问 你的主页将不再隐藏身份</view>
<view class="button" @click="unlock(userInfo)">立即解锁（{{bitext}}币）</view>
<view class="buttons" @click="unlock(null)">解锁全部 ({{discountText}})</view>
</view>
</view>
<view class="dialog_foot" @click="hideDialog()"><image src="../../../static/images/closeing.png" mode="aspectFill" style="width: 64rpx;height: 64rpx;;"></image></view>
</view>
</view>
</template>
<script>
export default {
props: ['dataInfo'],
props: {
touxiang: {
type: String,
default: "",
},
bitext: {
type: String,
default: "",
},
show:{
type:Boolean,
default: false
},
discountText: {
type: String,
default: "五折 ",
},
userInfo: {
type: Number,
default:null,
}
},
data() {
return {
img: this.$BASE_URL,
info: this.dataInfo,
};
},
onLoad() {},
methods: {
showDialog() {
this.show = true;
},
hideDialog() {
this.$emit('closePopup',false);
},
unlock(user) {
this.$emit('unlock',user);
}
}
};
</script>
<style lang="scss" >
.dialog_box {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 999;
.bg {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
}
.dialog_content {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
text-align: center;
.title {
font-size: 50rpx;
color: #fff;
margin: 40rpx auto;
}
.bag {
position: relative;
width: 586rpx;
height: 774rpx;
background: #ffffff;
border-radius: 24rpx 24rpx 24rpx 24rpx;
opacity: 1;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
.divss {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 40rpx;
.touxiang{
width: 144rpx;
height: 144rpx;
border-radius: 16rpx;
filter: blur(8rpx);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=2, MakeShadow=false);
position: relative;
z-index: 88;
}
.suo-img{
width: 40rpx;
height: 40rpx;
border-radius: 8rpx;
margin-top: -20rpx;
margin-bottom: 16rpx;
position: relative;
z-index: 99;
}
.namne {
width: 100%;
height: 56rpx;
font-size: 38rpx;
font-family: 'PingFang SC-Heavy';
font-weight: 600;
color: #4a4a4a;
line-height: 56rpx;
// margin-top: 156rpx;
text-align: center;
}
.button {
width: 392rpx;
height: 84rpx;
background: linear-gradient(86deg, #c2d2f9 0%, #c5c2f3 100%);
border-radius: 42rpx;
font-size: 28rpx;
font-family: 'PingFang SC-Heavy';
font-weight: 400;
color: #415c9e;
line-height: 84rpx;
text-align: center;
margin: 0 auto;
margin-top: 44rpx;
}
.buttons{
width: 392rpx;
height: 84rpx;
border-radius: 42rpx;
border: 2rpx solid #9FB5EB;
background-color: #ffffff;
color: #9FB5EB ;
font-size: 28rpx;
font-family: 'PingFang SC-Heavy';
font-weight: 400;
line-height: 84rpx;
text-align: center;
margin: 0 auto;
margin-top: 28rpx;
}
.namnes {
width: 364rpx;
height: 96rpx;
font-size: 28rpx;
font-family: 'PingFang SC-Heavy';
font-weight: 400;
color: #4a4a4a;
line-height: 48rpx;
margin: 0 auto;
margin-top: 18rpx;
text-align: center;
}
}
.pop-bgc {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 78%;
// z-index: -1;
}
.bag_body {
width: 100%;
height: 500rpx;
margin: auto;
background-color: #ff2c21;
border-bottom-left-radius: 50rpx;
border-bottom-right-radius: 50rpx;
margin-top: -200rpx;
.ul {
margin: -100rpx 20rpx 20rpx;
border-radius: 32rpx;
background-color: #ffffff;
width: calc(100% - 40rpx);
height: calc(100% - 20rpx);
.li {
position: relative;
padding: 20rpx;
font-size: 0;
border-bottom: 1px solid #eee;
.lred,
.rred {
position: absolute;
bottom: -20rpx;
width: 40rpx;
height: 40rpx;
border-radius: 50%;
background-color: #ff2c21;
}
.lred {
left: -20rpx;
}
.rred {
right: -20rpx;
}
&:last-child {
.lred,
.rred {
display: none;
}
}
.img,
.txt,
.money {
vertical-align: middle;
display: inline-block;
}
.img {
width: 80rpx;
}
.txt {
text-align: left;
margin-left: 20rpx;
width: calc(80% - 100rpx);
.name {
font-size: 40rpx;
color: #000;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tip {
font-size: 20rpx;
color: #bbbbbb;
}
}
.money {
font-size: 40rpx;
color: #ca6143;
font-weight: 700;
width: 20%;
label {
font-size: 20rpx;
}
}
}
}
}
.bag_foot {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 100rpx;
&::before {
content: '';
position: absolute;
left: -10%;
top: -100rpx;
width: 120%;
height: 100rpx;
border-radius: 50%;
box-shadow: 0 50rpx 0 0 #f4c35d;
}
&::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(#f4c35d, #fb3e2a);
}
.txt {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100rpx;
line-height: 100rpx;
font-size: 30rpx;
color: #fff;
text-align: center;
}
}
}
}
.dialog_foot {
text-align: center;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%,0%);
}
}
.sasas {
width: 530rpx;
height: 260rpx;
background: #ffffff;
border-radius: 20rpx;
}
.sasasa {
width: 460rpx;
margin: 0 auto 0rpx;
padding-top: 100rpx;
height: 120rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #666666;
line-height: 40rpx;
}
</style>
pageslike/like/userInfo.vue
View file @ de56eca3
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment