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>
|