394 lines
9.2 KiB
Vue
394 lines
9.2 KiB
Vue
<template>
|
||
<view class="publishre">
|
||
<view class="publishreItem">
|
||
<view style="color: #333333;">{{optionItems.title}}</view>
|
||
<view class="publishreindex">发布时间：{{optionItems.timestamp}}</view>
|
||
<view class="publishreindex">作者：{{optionItems.creator}}</view>
|
||
<view class="publishreindex">单位：{{optionItems.borough}}{{ '--'+optionItems.station}}</view>
|
||
</view>
|
||
<view class="imagetext">
|
||
<view>
|
||
<view v-for="(item,index) in optionItems.imageUrls" :key="index" style="text-align: center;">
|
||
<image :lazy-load="true" show-menu-by-longpress='1' style="height: 460rpx;width: 95%;"
|
||
:src="'https://www.lonsungsh.com:8083' + item" @click="srcIndex(item,index)"></image>
|
||
</view>
|
||
<view class="Text" style="padding: 0 0 40rpx 30rpx">
|
||
<p class="TextITem">
|
||
{{optionItems.comment?optionItems.comment:'无'}}
|
||
</p>
|
||
</br>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-overlay :show="showUrl" @click="showUrl = false">
|
||
<view class="warp">
|
||
<movable-area :scale-area="true" style="width: 100vh;">
|
||
<movable-view direction="all" style="width: 348px; height: 300px;" @scale="onScale" scale="true"
|
||
scale-min="1" scale-max="4" :scale-value="scale" :x="1" :y="10">
|
||
<image class="rect" :src="showUrlList" mode="widthFix"></image>
|
||
</movable-view>
|
||
</movable-area>
|
||
</view>
|
||
</u-overlay>
|
||
|
||
|
||
<view>
|
||
<u-popup :show="popupshow" mode="bottom" @close="popupshow = false" @open="open" v-if="popupshow">
|
||
<view class="flex justify-between ai-end padding-sm mb-1 mt-1">
|
||
<view class="com-textarea-box">
|
||
<u--textarea :height="190" :cursorSpacing="100" class="com-textarea" :focus="focus"
|
||
:showConfirmBar="false" placeholder="请留下您的感想" maxlength="300"></u--textarea>
|
||
<span>回复</span>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
|
||
<!-- 评论点赞 -->
|
||
<view class="review">
|
||
<view style="display: flex;">
|
||
<!-- @tap.stop="showComments()" -->
|
||
<view class="reviewItem">
|
||
<image style="width: 100%;height: 100%;" src="../../static/campus/评论.png"></image>
|
||
</view>
|
||
<span style="color: #818181;font-size: 12px;margin-right: 10rpx;">{{this.reviewdataList.length}}</span>
|
||
<!-- <view style="width: 30rpx;height: 30rpx;">
|
||
<u-icon name="heart" color="#818181" size="32"></u-icon>
|
||
</view>
|
||
<span style="color: #818181;font-size: 12px;">1134</span> -->
|
||
</view>
|
||
<view style="display: flex;">
|
||
<!-- <view style="width: 30rpx;height: 30rpx;">
|
||
<u-icon name="heart" color="#818181" size="32"></u-icon>
|
||
</view>
|
||
<span style="color: #489dea;font-size: 12px;">赞一个</span> -->
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 评论 -->
|
||
<view style="padding: 20rpx 0 0 30rpx;display: flex;width: 93%;">
|
||
<view style="width: 50rpx; height: 47rpx;">
|
||
<image style="width: 100%;height: 100%;" src="../../static/campus/评论区头像.png"></image>
|
||
</view>
|
||
<view :class="[!titleFocus?'reviewnumber':'reviewn']">
|
||
<view :class="[!titleFocus?'textareaItem':'textareaIndex']">
|
||
<textarea @focus="onfocus" class="textarea" auto-height v-model="titleFocus"
|
||
:placeholder="titleFocus || '请留下您的感想' " />
|
||
</view>
|
||
</view>
|
||
<view v-if="titleFocus">
|
||
<view style="color: ivory">1</view>
|
||
<view class="publish" @click="onSend">发送</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 评论数据展示 1-->
|
||
<view v-if="reviewdataList.length" style="padding-bottom: 50px">
|
||
<view v-for="(item,index) in reviewdataList" :key="item.id">
|
||
<view style="padding: 20rpx 0 0 30rpx;display: flex;width: 93%;">
|
||
<view style="width: 50rpx; height: 47rpx;">
|
||
<image style="width: 100%;height: 100%;" :src="item.url"></image>
|
||
</view>
|
||
<view class="reviewList">
|
||
<view>
|
||
<span
|
||
style="color: #333333;font-size: 13px;display: inline-block;width: 160rpx;">{{item.personName}}</span>
|
||
<span style="color: #818282; font-size: 12px;">{{item.timestamp}}</span>
|
||
</view>
|
||
<view style="color: #818282; font-size: 12px;margin: 10rpx 0 30rpx 0;">{{item.data}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else style="padding: 0 22px">
|
||
<u-divider text="暂无评论" textSize="24"></u-divider>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import urlTile from '../../static/campus/评论区头像.png'
|
||
import {
|
||
watch
|
||
} from 'vue'
|
||
import {
|
||
getremarkAdd,
|
||
getremarkgetlist
|
||
} from '@/api/login.js'
|
||
import {
|
||
mapGetters,
|
||
mapMutations
|
||
} from 'vuex';
|
||
import {
|
||
getTime
|
||
} from '@/utils/index.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
scale: 1,
|
||
showUrl: false,
|
||
showUrlList: '',
|
||
show: false,
|
||
title: '发布评论',
|
||
titleFocus: '',
|
||
reviewdataList: [],
|
||
optionItems: undefined,
|
||
popupshow: false
|
||
}
|
||
},
|
||
created() {},
|
||
onLoad: function(options) {
|
||
const that = this
|
||
// uni.$on('value', (data) => {
|
||
// data.imageUrls = JSON.parse(data.imageUrls)
|
||
// that.optionItems = data
|
||
// this.getremarkget()
|
||
// console.log(data);
|
||
// })
|
||
},
|
||
onShow() {
|
||
const that = this
|
||
const dataList = uni.getStorageSync('valueList')
|
||
const data = JSON.parse(dataList)
|
||
data.imageUrls = JSON.parse(data.imageUrls)
|
||
that.optionItems = data
|
||
this.getremarkget()
|
||
},
|
||
onUnload() {
|
||
// 移除监听事件
|
||
uni.$off('value');
|
||
},
|
||
beforeDestroy() {
|
||
uni.removeStorage({key:'valueList'})
|
||
},
|
||
computed: {
|
||
// 拿取vuex数据
|
||
...mapGetters({
|
||
userInfo: 'users/getLoginInfo',
|
||
})
|
||
},
|
||
methods: {
|
||
showComments() {
|
||
this.popupshow = true;
|
||
},
|
||
open() {
|
||
this.popupshow = true;
|
||
console.log('open');
|
||
},
|
||
onfocus(e) {},
|
||
cancel() {
|
||
this.titleFocus = ''
|
||
this.show = false
|
||
},
|
||
async getremarkget() {
|
||
const that = this
|
||
const resp = await getremarkgetlist({
|
||
newsId: that.optionItems.newsId,
|
||
personId: that.userInfo.id,
|
||
})
|
||
resp.data.map((item) => {
|
||
return item['url'] = require('../../static/campus/评论区头像.png')
|
||
})
|
||
// resp.data.map((item) => {
|
||
// return item['time'] = getTime(item.timestamp)
|
||
// })
|
||
that.reviewdataList = resp.data
|
||
},
|
||
// 发送评论
|
||
async onSend() {
|
||
const that = this
|
||
const listremark = {
|
||
newsId: that.optionItems.newsId,
|
||
personId: that.userInfo.id,
|
||
personName: that.userInfo.name,
|
||
data: that.titleFocus
|
||
}
|
||
const resp = await getremarkAdd(listremark)
|
||
uni.showLoading({
|
||
title: '正在评论中...'
|
||
});
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '评论成功',
|
||
icon: 'success',
|
||
mask: true,
|
||
success() {
|
||
that.titleFocus = ''
|
||
that.getremarkget()
|
||
}
|
||
});
|
||
}, 800);
|
||
},
|
||
srcIndex(item, index) {
|
||
console.log(item, index);
|
||
this.showUrl = true
|
||
this.showUrlList = 'https://www.lonsungsh.com:8083' + item
|
||
},
|
||
// 缩放
|
||
onScale(e) {
|
||
console.log(e, '22');
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.publishre {
|
||
.publishreItem {
|
||
padding: 30rpx;
|
||
|
||
.publishreindex {
|
||
font-size: 12px;
|
||
margin-top: 18rpx;
|
||
color: #989898;
|
||
}
|
||
|
||
}
|
||
|
||
.imagetext {
|
||
.Text {
|
||
// height: 200rpx;
|
||
width: 97%;
|
||
font-size: 12px;
|
||
// border: 1px solid #989898;
|
||
|
||
.TextITem {
|
||
text-indent: 24px;
|
||
letter-spacing: 6rpx
|
||
}
|
||
}
|
||
}
|
||
|
||
.review {
|
||
padding: 30rpx 0 15rpx 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: solid 1px #d6d6d6;
|
||
margin: 0 28rpx;
|
||
overflow: hidden;
|
||
|
||
.reviewItem {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
}
|
||
|
||
.reviewnumber {
|
||
background-color: #f0f0f0;
|
||
// height: 60rpx;
|
||
margin-left: 15rpx;
|
||
width: 100%;
|
||
// width: 310px;
|
||
line-height: 50rpx;
|
||
border-radius: 18rpx;
|
||
transition: all 0.5s ease-out;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.reviewn {
|
||
background-color: #f0f0f0;
|
||
// height: 60rpx;
|
||
margin-left: 15rpx;
|
||
width: 70%;
|
||
line-height: 50rpx;
|
||
border-radius: 18rpx;
|
||
transition: all 0.3s ease-out;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.textareaItem {
|
||
margin-left: 20rpx;
|
||
font-size: 11px;
|
||
margin-top: 4rpx;
|
||
height: 38rpx
|
||
}
|
||
|
||
.textareaIndex {
|
||
margin-left: 20rpx;
|
||
font-size: 11px;
|
||
margin-top: 4rpx;
|
||
height: 38rpx
|
||
}
|
||
|
||
.publish {
|
||
width: 72rpx;
|
||
height: 35rpx;
|
||
border-radius: 23rpx;
|
||
background-color: #fc2b55;
|
||
color: #fff;
|
||
line-height: 35rpx;
|
||
font-size: 12px;
|
||
margin-top: 8rpx;
|
||
text-align: center;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.reviewList {
|
||
width: 100%;
|
||
margin-left: 15rpx;
|
||
border-bottom: solid 1px #d6d6d6;
|
||
}
|
||
|
||
.textarea {
|
||
width: 97%;
|
||
line-height: normal;
|
||
margin-top: 13rpx;
|
||
}
|
||
|
||
.warp {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
// width: 93%;
|
||
height: 258rpx;
|
||
transform: translate(15px, 86%); // height: 100%;
|
||
|
||
.rect {
|
||
width: 100%;
|
||
height: 100%;
|
||
// background-color: #fff;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.swiper {
|
||
height: 500rpx;
|
||
}
|
||
|
||
.swiper-item {
|
||
display: block;
|
||
height: 300rpx;
|
||
line-height: 300rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.swiper-list {
|
||
margin-top: 40rpx;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
|
||
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss">
|
||
.justify-between {
|
||
height: 128px;
|
||
.com-textarea-box {
|
||
width: 85%;
|
||
display: flex;
|
||
align-items: baseline;
|
||
.com-textarea {
|
||
textarea {
|
||
min-height: 200rpx;
|
||
padding: 20rpx;
|
||
background: rgba(51, 51, 51, 0.02);
|
||
color: #000 !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |