This commit is contained in:
DL
2024-04-17 19:17:34 +08:00
parent 770c5dc5ab
commit 11d3360b1b
6 changed files with 289 additions and 108 deletions

View File

@@ -78,7 +78,7 @@
borderRadius: 50, //评论框圆角大小
emojiShow: false, //表情显示
autoFocus: false, //自动焦点
focus: false,
focus: true,
disabled: false,
open: true,
more: false,

View File

@@ -113,11 +113,11 @@
<view class="tit_name"> {{ item.nickname }} </view>
</view>
<!-- #ifdef MP-WEIXIN -->
<image @click="moreBtn(item)" :src="`${config.aliyunOssUrl}/static/images/app/icon/more.png`"
<image @click="moreBtn(item,2)" :src="`${config.aliyunOssUrl}/static/images/app/icon/more.png`"
style="width: 32rpx;height: 32rpx;"></image>
<!-- #endif -->
<!-- #ifdef APP -->
<image @click="moreBtn(item)" src="@/static/images/app/icon/more.png"
<image @click="moreBtn(item,2)" src="@/static/images/app/icon/more.png"
style="width: 32rpx;height: 32rpx;"></image>
<!-- #endif -->
</view>
@@ -180,56 +180,78 @@
</z-paging>
<!-- 底部输入框 -->
<view class="bottom_up">
<view class="bottom_l">
<view @click.stop="replyToComments(detailObj,1)">
<u-textarea autoHeight fixed border="none" :placeholder="placeholder" maxlength="100" :cursor-spacing="20"
:customStyle="'background-color: #f2f0f4;'" :disabled='true'/>
<view style="display: flex;align-items: center;justify-content: space-between;">
<view class="bottom_l" :style="{width:replyAddData.content?'540rpx':'326rpx'}">
<!-- <view @click.stop="replyToComments(detailObj,1)">
<u-textarea autoHeight fixed :showConfirmBar="false" border="none" :placeholder="placeholder" maxlength="300"
:cursor-spacing="20" :disabled="true"
:customStyle="{'background-color': '#f2f0f4','border-radius':'50rpx'}"/>
</view> -->
<textarea autoHeight fixed :showConfirmBar="false" border="none" :placeholder="placeholder" maxlength="300"
:cursor-spacing="20" v-model="replyAddData.content" @blur="textareaFlag = false" @focus="textareaFocusFn"
:style="'background-color:#f2f0f4;border-radius: '+ 40 +'rpx;padding: 0 24rpx;hidth:72rpx'"
ref="textarea" :autoFocus="true"
@keyboardheightchange="keyboardheightchangeFn" :focus="focus" auto-blur/>
</view>
<!-- <u-input placeholder="请输入内容" border="surround" v-model="replyAddData.content" @change="change"
shape='circle' :customStyle="'background-color: pink;'" @focus='focus'
></u-input> -->
<view class="bottom_r" v-if="!replyAddData.content">
<view class="r_img_txt">
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/information1.png`" class="imgSize4"></image>
<view class="txt"> {{detailObj.replyNum||0}} </view>
</view>
<view class="r_img_txt" @click="collectBtn">
<image v-if="!detailObj.userIsCollect" :src="`${config.aliyunOssUrl}/static/images/app/icon/xingxing1.png`" class="imgSize4" />
<image v-if="detailObj.userIsCollect" :src="`${config.aliyunOssUrl}/static/images/app/icon/xingxing_end1.png`" class="imgSize4"></image>
<view class="txt"> {{detailObj.collectNum||0}} </view>
</view>
<view class="r_img_txt" @click="likeDetailBtn">
<image v-if="!detailObj.userIsLike" :src="`${config.aliyunOssUrl}/static/images/app/icon/like_no1.png`" class="imgSize4"/>
<image v-if="detailObj.userIsLike" :src="`${config.aliyunOssUrl}/static/images/app/icon/like1.png`" class="imgSize4"></image>
<view class="txt"> {{detailObj.likeNum||0}} </view>
</view>
<!-- <view class="r_img_txt" style="position:relative;" >
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/share.png`" class="imgSize4"></image>
<view class="txt"> {{detailObj.shareNum}} </view>
<button id="shareBtn" open-type="share" @click="shareBtnInfo(detailObj)"></button>
</view> -->
</view>
<view v-else class="bottom_send">
<view @click.stop="emojiShow = !emojiShow,openExpression()">
<image src="https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/expression.png"
style="width: 52rpx;height: 52rpx;" />
</view>
<view @click.stop="sendSMS">
<image
src="https://smfwq2.oss-cn-shanghai.aliyuncs.com/2023/12/25/63571017a4a042b682e1c6be08a3cdda.png"
style="width: 52rpx;height: 52rpx;" />
</view>
</view>
</view>
<view class="bottom_r">
<view class="r_img_txt">
<!-- #ifdef MP-WEIXIN -->
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/information1.png`" class="imgSize4"></image>
<template v-if="emojiShow">
<view style="width: 690rpx;">
<!-- #ifdef APP-PLUS -->
<waterfall column-count="8" column-width="auto" column-gap="0" left-gap="10"
style="height: 400rpx;background-color: #fff;">
<cell v-for="(item,index) in emoicon" :key="index" style="padding: 10rpx;"
@click="replyAddData.content += item">
<text style="font-size: 54rpx;">{{item}}</text>
</cell>
</waterfall>
<!-- #endif -->
<!-- #ifdef APP -->
<image src="@/static/images/app/icon/information.png" class="imgSize4" />
<!-- #ifndef APP-PLUS -->
<u-list height="400rpx" customStyle="background-color:#fff;padding:10rpx 0;">
<u-grid col="10">
<u-grid-item v-for="(item,index) in emoicon" :key="index" @click="replyAddData.content += item"
customStyle="margin-bottom:20rpx;">
<u-list-item>
<text style="font-size: 54rpx;text-align: left;">{{item}}</text>
</u-list-item>
</u-grid-item>
</u-grid>
</u-list>
<!-- #endif -->
<view class="txt"> {{detailObj.replyNum||0}} </view>
</view>
<view class="r_img_txt" @click="collectBtn">
<!-- #ifdef APP -->
<!-- transform: scale(1.5) -->
<image v-if="!detailObj.userIsCollect" src="@/static/images/app/icon/xingxing.png" class="imgSize4"></image>
<image v-if="detailObj.userIsCollect" src="@/static/images/app/icon/xingxing_end.png" class="imgSize4"></image>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<image v-if="!detailObj.userIsCollect" :src="`${config.aliyunOssUrl}/static/images/app/icon/xingxing1.png`" class="imgSize4" />
<image v-if="detailObj.userIsCollect" :src="`${config.aliyunOssUrl}/static/images/app/icon/xingxing_end1.png`" class="imgSize4"></image>
<!-- #endif -->
<view class="txt"> {{detailObj.collectNum||0}} </view>
</view>
<view class="r_img_txt" @click="likeDetailBtn">
<!-- #ifdef APP -->
<image v-if="!detailObj.userIsLike" src="@/static/images/app/icon/like_no.png" class="imgSize4"></image>
<image v-if="detailObj.userIsLike" src="@/static/images/app/icon/like.png" class="imgSize4">
</image>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<image v-if="!detailObj.userIsLike" :src="`${config.aliyunOssUrl}/static/images/app/icon/like_no1.png`" class="imgSize4"/>
<image v-if="detailObj.userIsLike" :src="`${config.aliyunOssUrl}/static/images/app/icon/like1.png`" class="imgSize4"></image>
<!-- #endif -->
<view class="txt"> {{detailObj.likeNum||0}} </view>
</view>
<!-- <view class="r_img_txt" style="position:relative;" >
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/share.png`" class="imgSize4"></image>
<view class="txt"> {{detailObj.shareNum}} </view>
<button id="shareBtn" open-type="share" @click="shareBtnInfo(detailObj)"></button>
</view> -->
</view>
</template>
</view>
<!-- drop的弹层 -->
@@ -321,25 +343,17 @@
</u-popup>
<!-- 显示复制链接已设置不喜欢 -->
<!-- #ifdef MP-WEIXIN -->
<view class="img_view_weixin">
<!-- <view class="img_view_weixin">
<image v-if="imgShow1" :src="`${config.aliyunOssUrl}/static/images/app/config/link.png`" style="width: 260rpx;height: 76rpx; border-radius: 16rpx"></image>
<image v-if="imgShow2" :src="`${config.aliyunOssUrl}/static/images/app/config/unlike.png`" style="width: 326rpx;height: 76rpx; border-radius: 16rpx"></image>
</view>
<!-- #endif -->
<!-- #ifdef APP -->
<view class="img_view">
<image v-if="imgShow1" src="@/static/images/app/config/link.png" style="width: 260rpx;height: 76rpx; border-radius: 16rpx"></image>
<image v-if="imgShow2" src="@/static/images/app/config/unlike.png" style="width: 326rpx;height: 76rpx; border-radius: 16rpx"></image>
</view>
<!-- #endif -->
</view> -->
<!-- more 的弹层 -->
<u-popup :show="showMore" :round="10" mode="bottom" @close="showMore=false" zIndex='11000'>
<view class="more_view">
<view class="txt" @click="toReportPages"> 举报 </view>
<view class="txt" @click="replyToComments(moreItem,2)"> 回复 </view>
<view class="txt" @click="replyToCommentsCopy"> 回复 </view>
<view class="txt" @click="cloneFn(moreItem)"> 复制 </view>
<view class="foot" @click="showMore=false"> 取消 </view>
</view>
@@ -368,13 +382,13 @@
<view class="con_title">
<view class="tit_name"> {{ itemObj.nickname }} </view>
<!-- #ifdef MP-WEIXIN -->
<image @click="moreBtn(itemObj)" :src="`${config.aliyunOssUrl}/static/images/app/icon/more.png`" style="width: 32rpx;height: 32rpx;"></image>
<image @click="moreBtn(itemObj,3)" :src="`${config.aliyunOssUrl}/static/images/app/icon/more.png`" style="width: 32rpx;height: 32rpx;"></image>
<!-- #endif -->
<!-- #ifdef APP -->
<image @click="moreBtn(itemObj)" src="@/static/images/app/icon/more.png" style="width: 32rpx;height: 32rpx;"></image>
<image @click="moreBtn(itemObj,3)" src="@/static/images/app/icon/more.png" style="width: 32rpx;height: 32rpx;"></image>
<!-- #endif -->
</view>
<view class="con_txt" @click="replyToComments(itemObj,2)">
<view class="con_txt" @click="replyToComments(itemObj,3)">
<view style="margin-bottom: 8rpx;">
{{ itemObj.content }}
</view>
@@ -413,7 +427,7 @@
<!-- #endif -->
</view>
<!-- 点击回复 -->
<view class="con_txt1" @click="replyToComments(ele,2)">
<view class="con_txt1" @click="replyToComments(ele,3)">
<text class="txt_a">回复</text>
<text class="txt_b"> {{ele.reviewUid !==0 ? ele.reviewUserNickname : itemObj.nickname}} </text> :
<!-- <text class="txt_b"> {{itemObj.nickname}} </text> : -->
@@ -448,7 +462,52 @@
</view>
<view class="pop_bottom">
<view class="pop_bot_txt" @click="replyToComments(itemObj,2)"> 发表评论 </view>
<!-- <view class="pop_bot_txt" @click="replyToComments(itemObj,2)"> 发表评论 </view> -->
<view style="display: flex;align-items: center;justify-content: space-between;">
<view class="bottom_l" style="width:540rpx">
<textarea autoHeight fixed :showConfirmBar="false" border="none" :placeholder="placeholder" maxlength="300"
:cursor-spacing="20" v-model="replyAddData.content" @blur="textareaFlag = false" @focus="textareaFocusFnPop"
:style="'background-color:#f2f0f4;border-radius: '+ 40 +'rpx;padding: 0 24rpx;hidth:72rpx'"
ref="textareaPop" :autoFocus="true"
@keyboardheightchange="keyboardheightchangeFn" :focus="focusPop" auto-blur/>
</view>
<view class="bottom_send">
<view @click.stop="emojiShow = !emojiShow,openExpression()">
<image src="https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/expression.png"
style="width: 52rpx;height: 52rpx;" />
</view>
<view @click.stop="sendSMS">
<image
src="https://smfwq2.oss-cn-shanghai.aliyuncs.com/2023/12/25/63571017a4a042b682e1c6be08a3cdda.png"
style="width: 52rpx;height: 52rpx;" />
</view>
</view>
</view>
<template v-if="emojiShow">
<view style="width: 690rpx;">
<!-- #ifdef APP-PLUS -->
<waterfall column-count="8" column-width="auto" column-gap="0" left-gap="10"
style="height: 400rpx;background-color: #fff;">
<cell v-for="(item,index) in emoicon" :key="index" style="padding: 10rpx;"
@click="replyAddData.content += item">
<text style="font-size: 54rpx;">{{item}}</text>
</cell>
</waterfall>
<!-- #endif -->
<!-- #ifndef APP-PLUS -->
<u-list height="400rpx" customStyle="background-color:#fff;padding:10rpx 0;">
<u-grid col="10">
<u-grid-item v-for="(item,index) in emoicon" :key="index" @click="replyAddData.content += item"
customStyle="margin-bottom:20rpx;">
<u-list-item>
<text style="font-size: 54rpx;text-align: left;">{{item}}</text>
</u-list-item>
</u-grid-item>
</u-grid>
</u-list>
<!-- #endif -->
</view>
</template>
</view>
</view>
<!-- <view style="height: 200rpx;"></view> -->
@@ -541,6 +600,7 @@
borderRadius: 50,//评论框圆角大小
autoFocus:false,//自动焦点
focus:false,
focusPop:false,
emoicon: [
"😁", "😋", "😜", "😉", "😌", "😅", "😳", "😊", "😝", "😰", "😠", "😩", "😲", "😞", "😭", "😍",
"😖", "😱", "😡", "😚", "😤", "🐼", "🐲", "😺", "😸", "😹", "😽", "🙀", "🐴", "🐮", "🍺", "🔥",
@@ -570,6 +630,7 @@
// more
showMore: false,
moreItem:{},
moreNum:2,
// 判断小手
IsLike: false,
// 评论弹层
@@ -596,17 +657,28 @@
myInfo:{},
// 添加评论
replyAddData:{
authorUserId: null,
content: '',
noteId: null,
replyId: 0,
userId: null,
image:''
authorUserId: null, // 帖子的作者的用户ID移动端不传值
content: '', // 评论/回复内容
noteId: null, // 笔记ID
replyId: 0, // 评论ID一级评论传0
userId: null, // 用户ID移动端不传值
image:'' // 评论图片
},
//type==2 问答,话题
type: 1,
shareItem:{},
showNavImg:false
showNavImg:false,
//选择当前的聊天
actPData: {},
//回复类型
replyType: 2,
//监听滚动条滑动
headerFFlag: true,
//评论框长度
textareaFlag: false,
contentValue: '',
//输入框高度
inputHeight:0
}
},
@@ -660,6 +732,49 @@
}
},
methods: {
//表情按钮
openExpression(){
uni.hideKeyboard();
},
//键盘高度
keyboardheightchangeFn(e) {
console.log('键盘收起打开',e.detail.height);
this.inputHeight=e.detail.height
if (e.detail.height == 0) {
this.$refs.textarea.blur();
this.replyType = 2
}else{
this.emojiShow=false
}
},
//评论框聚焦
textareaFocusFn(e) {
console.log(e,'评论框聚焦')
this.textareaFlag = true
if(this.emojiShow){
uni.hideKeyboard();
this.emojiShow=false;
this.$nextTick(()=>{
// uni.openm
this.$refs.textarea.focus();
})
}
// console.log('焦点', this.replyType, e);
// if(this.replyType==2){
// this.replyAddData.noteId = this.noteId
// }
},
textareaFocusFnPop(e){
if(this.emojiShow){
uni.hideKeyboard();
this.emojiShow=false;
this.$nextTick(()=>{
// uni.openm
this.$refs.textarea.focus();
})
}
},
//监听
scrollFn(e) {
// console.log(e,'1111');
@@ -869,6 +984,10 @@
this.itemObj=item
this.itemObj.countStart=formatNumber(item.countStart)
this.replyListLength=item.replyList.length
this.replyAddData.replyId=item.id
this.replyAddData.userId=this.myInfo.id
this.replyAddData.noteId=this.detailObj.id
this.replyAddData.authorUserId=this.detailObj.authorId
},
// 去举报页
toReportPages() {
@@ -877,9 +996,10 @@
})
},
// 更多
moreBtn(item) {
moreBtn(item,num) {
this.showMore = true
this.moreItem=item
this.moreNum=num
},
// nav上的三个点按钮
dropBtn() {
@@ -971,36 +1091,77 @@
}
});
},
// 回复评论
replyToComments(ele,num){
// console.log(ele,'数据数据',num,'数字1或2');
if(num==2){
this.placeholderReply='回复'+' '+ ele.nickname +' ' + ':'
replyToCommentsCopy(){
if(this.moreNum==2){
this.showMore = false
this.showReply=true
this.replyAddData.replyId=ele.id
this.focus=true
this.replyAddData.replyId=this.moreItem.id
this.replyAddData.userId=this.myInfo.id
this.getDetail(this.noteId)
}else{
this.showMore = false
this.showReply=true
this.replyAddData.replyId=0
this.focusPop=true
this.replyAddData.replyId=this.moreItem.id
this.replyAddData.userId=this.myInfo.id
this.getDetail(this.noteId)
}
},
// 回复评论
replyToComments(ele,num){
// this.focus=false
// this.focusPop=false
console.log(ele,'数据数据',num,'数字1或2')
// this.$refs.textarea.focus()
if(num==3){
console.log('pop里面的');
this.focusPop=true
this.focus=false
this.showMore = false
this.placeholderReply='回复'+' '+ ele.nickname +' ' + ':'
// this.showReply=true
this.replyAddData.replyId=ele.id
this.replyAddData.userId=this.myInfo.id
this.getDetail(this.noteId)
}else if(num==2){
console.log('外面的的');
if (this.focus==true) this.focus=false
this.focus=true
this.focusPop=false
this.showMore = false
// this.showReply=true
this.replyAddData.replyId=ele.id
this.replyAddData.userId=this.myInfo.id
this.getDetail(this.noteId)
}else{
console.log('哪都不是');
this.focus=false
this.focusPop=false
// this.focus=true
// this.showMore = false
// // this.showReply=true
// this.replyAddData.replyId=0
// this.replyAddData.userId=this.myInfo.id
// this.getDetail(this.noteId)
}
},
// 发送
sendSMS(e){
// console.log(e,'评论1111212213');
this.replyAddData.content=e.msg
// this.replyAddData.content=e.msg
replyAddAPI(this.replyAddData).then(res=>{
console.log(res.data.replyId,'res.replyId');
this.replyListAll.forEach(item => {
if (this.replyAddData.replyId == item.id) {
item.replyList.push(res.data)
console.log(item,'item.id');
if (res.data.replyId == item.id) {
item.replyList.unshift(res.data)
}
})
this.$refs.paging.reload()
this.resetData()
})
this.resetData()
this.focus=false
this.focusPop=false
this.showReply=false
// this.placeholder='友善评论、文明发言'
// this.placeholderReply='友善评论、文明发言'
@@ -1665,36 +1826,29 @@
}
}
.bottom_up {
border: 1px solid red;
// border: 1px solid red;
border-top: 1rpx solid #EDEDED;
width: 100%;
position: fixed;
bottom: 0;
padding: 30rpx 32rpx 58rpx;
display: flex;
justify-content: space-between;
align-items: center;
// display: flex;
// justify-content: space-between;
// align-items: center;
background-color: #fff;
z-index: 999;
.bottom_l {
width: 100%;
}
.bottom_r {
// border: 1px solid red;
width: 350rpx;
display: flex;
// align-items: center;
justify-content: space-around;
.r_img_txt {
// border: 1px solid red;
margin-left: 40rpx;
display: flex;
// flex-direction: column;
align-items: center;
.txt {
// width: 64rpx;
font-size: 28rpx;
font-weight: 400;
color: #666666;
@@ -1709,6 +1863,29 @@
}
}
}
}
.bottom_l {
// border: 1px solid red;
height: 72rpx;
background: #f2f0f4;
border-radius: 50rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
// width: 100%;
// height: 90rpx;
}
.bottom_send {
// border: 1px solid red;
display: flex;
// flex-direction: row;
align-items: center;
justify-content: space-around;
flex: 1;
}
.bottom {

View File

@@ -660,7 +660,7 @@
item.high = uni.$u.getPx(`${item.high}rpx`) * num + 'rpx'
} else {
// if (item.wide > 686) {
let num = 454 / uni.$u.getPx(`${item.wide}rpx`)
let num = 300 / uni.$u.getPx(`${item.wide}rpx`)
item.wide = uni.$u.getPx(`${item.wide}rpx`) * num + 'rpx'
item.high = uni.$u.getPx(`${item.high}rpx`) * num + 'rpx'
// } else {
@@ -705,7 +705,7 @@
item.high = uni.$u.getPx(`${item.high}rpx`) * num + 'rpx'
} else {
// if (item.wide > 686) {
let num = 454 / uni.$u.getPx(`${item.wide}rpx`)
let num = 300 / uni.$u.getPx(`${item.wide}rpx`)
item.wide = uni.$u.getPx(`${item.wide}rpx`) * num + 'rpx'
item.high = uni.$u.getPx(`${item.high}rpx`) * num + 'rpx'
// } else {
@@ -755,7 +755,7 @@
item.high = uni.$u.getPx(`${item.high}rpx`) * num + 'rpx'
} else {
// if (item.wide > 686) {
let num = 454 / uni.$u.getPx(`${item.wide}rpx`)
let num = 300 / uni.$u.getPx(`${item.wide}rpx`)
item.wide = uni.$u.getPx(`${item.wide}rpx`) * num + 'rpx'
item.high = uni.$u.getPx(`${item.high}rpx`) * num + 'rpx'
// } else {

View File

@@ -11,7 +11,7 @@
</u-navbar> -->
<!-- 背景 height: 428rpx; -->
<view style="position: relative;z-index: 99;">
<view style="position: relative;z-index: 99;height:700rpx;">
<image v-if="userDetail" class="img-bgc" :src="userDetail.backGround"></image>
<view :style="{height: `${$u.sys().statusBarHeight+10}px`}" />
<!-- :style="{position:'fixed',left:0, top: `${$u.sys().statusBarHeight+10}px`,display:flex,}" -->
@@ -597,7 +597,7 @@
.img-bgc {
// border: 1px solid blue;
height: 524rpx;
height: 700rpx;
position: absolute;
top: 0;
left: 0;
@@ -605,7 +605,6 @@
}
.nav-btn {
// border: 1px solid red;
width: 100%;
}
@@ -716,6 +715,7 @@
}
.data-list-tab {
// border: 1px solid blue;
background: #fff;
padding: 32rpx 0 14rpx 0;
@@ -739,16 +739,16 @@
}
.personal-number {
// border: 1px solid red;
z-index: 99;
width: calc(100%);
margin-top: 56rpx;
margin-top: 46rpx;
padding: 32rpx 24rpx;
background: #fff;
border-radius: 32rpx 24rpx 0 0;
.personal-number-attention {
margin-top: 32rpx;
view {
width: 327rpx;
height: 76rpx;
@@ -796,7 +796,8 @@
}
.personal-header {
margin: 56rpx 0 0 24rpx;
// border: 1px solid red;
margin: 100rpx 0 0 24rpx;
.personal-header-name {
font-size: 32rpx;

View File

@@ -77,7 +77,7 @@
<!-- <text v-for="(item, index) in 3">2年车龄</text> -->
</view>
<view class="store-info">
优惠政策/优惠活动/纯文字展示
{{item.event}}
</view>
<view class="store-btns flex align-center justify-between">
<view class="store-btns-left">

View File

@@ -2,6 +2,9 @@
<u-popup
:show="show"
@close="closeHandler"
:round="round"
round="16"
>
<view class="u-picker">
<u-toolbar