You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
546 lines
16 KiB
546 lines
16 KiB
<template>
|
|
<view style="display: flex;">
|
|
<view class="left_area">
|
|
<image :src="itemInfos.avatar" mode="" class="avatar" @click.stop="goHome"></image>
|
|
</view>
|
|
<view class="right_area">
|
|
<view class="text-wrapper">
|
|
<view class="dis-flex" style="justify-content: space-between;">
|
|
<!-- <image :src="itemInfos.avatar" mode="" class="avatar" @click.stop="goHome"></image> -->
|
|
<view style="flex: 1;line-height: 18px;">
|
|
<view class="name"><text>{{itemInfos.nickname}}</text><text class="label" v-if="itemInfos.idType">{{itemInfos.idType}}</text></view>
|
|
<view style="color: #999999;font-size: 12px;">{{itemInfos.createtime+' '}}<text v-if="itemInfos.addr">{{itemInfos.addr}}</text></view>
|
|
</view>
|
|
<view class="btn" v-if="itemInfos.mid!=='0' && !itemInfos.is_interest && !itemInfos.is_it_mine" @click.stop="interest">+关注</view>
|
|
<view class="btn2" v-if="itemInfos.is_interest && !itemInfos.is_it_mine" @click.stop="interestCancel">取消关注</view>
|
|
</view>
|
|
<view style="margin: 5px 0;font-size: 14px;color: #333;">
|
|
<view style="color: #ffd900;line-height: 20px;">
|
|
<text v-if="itemInfos.onetype">#{{itemInfos.onetype}}#</text>
|
|
<text v-if="itemInfos.one_name">{{' '+'#'+itemInfos.one_name}}#</text>
|
|
<text v-if="itemInfos.share_title">{{' '+'#'+itemInfos.share_title}}#</text>
|
|
</view>
|
|
<view class="text-main" :class="showAllText===2?'show_all':''">
|
|
<text class="main">{{ itemInfos.content }}</text>
|
|
<text class="all" v-if="showAllText===1" @click.stop="changeShowAll(2)">全文</text>
|
|
<text class="all" v-if="showAllText===2" @click.stop="changeShowAll(1)">收起</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="dis-flex img-wrapper" v-if="!itemInfos.video_link">
|
|
<block v-if="itemInfos.img.length!==1">
|
|
<view v-for="(item,index) in itemInfos.img" :key="index" class="img-item">
|
|
<image :src="item" mode="aspectFill" @click.stop="imgPre(index,itemInfos.img)"></image>
|
|
</view>
|
|
<view style="width: 25vw;"></view>
|
|
<view style="width: 25vw;"></view>
|
|
</block>
|
|
<block v-else>
|
|
<view v-if="singleImgW>singleImgH" class="img-item-single-w" :style="{ height: `calc(${singleImgH} / ${singleImgW} * 50vw)` }">
|
|
<image :src="itemInfos.img[0]" mode="aspectFit" @click.stop="imgPre(0,itemInfos.img)" @load="changeImgSize"></image>
|
|
</view>
|
|
<view v-if="singleImgW<singleImgH" class="img-item-single-h" :style="{ width: `calc(${singleImgW} / ${singleImgH} * 50vw)` }">
|
|
<image :src="itemInfos.img[0]" mode="aspectFit" @click.stop="imgPre(0,itemInfos.img)"></image>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<view class="dis-flex video-wrapper" v-if="!!itemInfos.video_link&&itemInfos.img.length==0"
|
|
style="position: relative;">
|
|
<!-- <image v-if="showPoster" class="videoPlay" :src="itemInfos.video_img_link" mode="aspectFill" @click.stop="changeShowPoster"></image> -->
|
|
<!-- 借video播放按钮,替换人工封面 -->
|
|
<!-- <video v-if="showPoster" object-fit="cover" :src="itemInfos.video_link" @click.stop="changeShowPoster"
|
|
class="videoPlay" :poster='itemInfos.video_img_link'></video>
|
|
<video v-else object-fit="contain" id="myvideo" autoplay :src="itemInfos.video_link" @click.stop=""
|
|
class="videoPlay"></video> -->
|
|
|
|
<video object-fit="contain" :id="'myvideo'+index" :src="itemInfos.video_link" @click.stop=""
|
|
class="videoPlay" :poster='itemInfos.video_img_link' @loadedmetadata="changeSize"
|
|
:style="{width:videoWidth, height: videoHeight}" @play="stopOther()"></video>
|
|
<!-- 一版视频和封面一致的 -->
|
|
|
|
<!-- <view class="videoPlay" style="position: absolute;left: calc(46vw - 315rpx);top: 0;"
|
|
@click.stop="playing(itemInfos.video_link)">
|
|
</view> 旧版的点击立即全屏播放 -->
|
|
</view>
|
|
<view class="dis-flex comment-wrapper" style="font-size: 12px;height: auto;color: #999;" v-if="itemInfos.address_info">
|
|
<text class="iconfont icon-daohang1"></text>
|
|
<text style="flex:1;">{{itemInfos.address_info}}</text>
|
|
</view>
|
|
<view class="dis-flex comment-wrapper">
|
|
<button open-type="share" :id="itemInfos.id"
|
|
style="margin: 0;background: transparent;padding: 0;line-height: normal;font-size: 13px;" @click.stop="share">
|
|
<image style="width: 36rpx;height: 36rpx;vertical-align: middle;margin-right: 10rpx;" :src="imageRootNew+'share-two.png'" mode=""></image>
|
|
{{itemInfos.share}}
|
|
</button>
|
|
<view class="" @click.stop="editCom">
|
|
<image style="width: 36rpx;height: 36rpx;vertical-align: middle;margin-right: 10rpx;" :src="imageRootNew+'fa-comment.png'" mode=""></image>
|
|
<text v-if="itemInfos.comment_list.total">{{itemInfos.comment_list.total}}</text>
|
|
<text v-else>0</text>
|
|
</view>
|
|
<view class="" @click.stop="fabulous">
|
|
<image v-if="!itemInfos.is_fabulous" style="width: 36rpx;height: 36rpx;vertical-align: middle;margin-right: 10rpx;" :src="imageRootNew+'appreciate-grey.png'" mode=""></image>
|
|
<image v-else style="width: 36rpx;height: 36rpx;vertical-align: middle;margin-right: 10rpx;" :src="imageRootNew+'appreciate-red.png'" mode=""></image>
|
|
{{itemInfos.fabulous_num}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 评论弹窗 -->
|
|
<view style="width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 9;
|
|
background-color: rgba(0,0,0,.3);" v-if="commentShow" @click.stop="commentShow=false"></view>
|
|
<view class="reply-wrapper" v-if="commentShow">
|
|
<textarea @click.stop class="my-text" v-model="text" name="" id="" cols="30" rows="10" placeholder="评论"></textarea>
|
|
<button type="primary" style="margin: 20rpx 80rpx;border-radius: 50px;" @click.stop="submit">发送</button>
|
|
</view>
|
|
<!-- 全屏视频 -->
|
|
<!-- <PopManager :show="videoshow" @clickmask="videoshow = false" type="center">
|
|
<view v-if="videoshow" class="videoshow">
|
|
<video id="myvideo" :src="videolint" @fullscreenchange="videoControl" style="width: 100%;height: 100%;"
|
|
:poster='itemInfos.video_img_link' @click.stop="" :show-fullscreen-btn="false" autoplay ></video>
|
|
<view style="position: absolute;left: 30upx;top: 80upx;color: #ffffff;padding: 10upx 20upx;border-radius: 60upx;background-color: rgba(255,255,255,0.3);" @click.stop="videoshow = false">
|
|
<text class="iconfont icon-roundleftfill" style="font-size: 36upx;"></text>
|
|
<text class="f-36">返回</text>
|
|
</view>
|
|
</view>
|
|
</PopManager> 旧版的点击立即全屏播放-->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import PopManager from '@/components/template/PopManager';
|
|
import App from '@/common/js/app.js';
|
|
export default {
|
|
name: 'picText',
|
|
data() {
|
|
return {
|
|
itemInfos: {},
|
|
commentShow: false,
|
|
text: '',
|
|
videoshow: false,
|
|
videolint: '',
|
|
showAllText: 0,
|
|
showPoster: true,
|
|
videoWidth: '0px',
|
|
videoHeight: '0px',
|
|
listVideoHeight: '40vw',
|
|
detailVideoHeight: '60vw',
|
|
videoContext: '',
|
|
query: '',
|
|
singleImgW: '2',
|
|
singleImgH: '1',
|
|
}
|
|
},
|
|
components:{
|
|
PopManager
|
|
},
|
|
props:{
|
|
info:{
|
|
type: Object,
|
|
require: true
|
|
},
|
|
isDetail: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
index: {// 当前帖子在列表中的索引
|
|
type: Number | String
|
|
},
|
|
currentPlay: {// 当前播放的视频在列表中的索引
|
|
type: Number | String
|
|
},
|
|
stopVideo: {
|
|
type: Number
|
|
},
|
|
},
|
|
watch: {
|
|
info: {
|
|
handler(newVal, oldVal){
|
|
this.itemInfos = newVal;
|
|
if(this.itemInfos.content.length > 44){
|
|
this.showAllText = 1;
|
|
}
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
},
|
|
stopVideo: {
|
|
handler(newVal, oldVal){
|
|
if(!!this.itemInfos.video_link){
|
|
// this.videoContext.stop();
|
|
|
|
if(this.index!==this.currentPlay){
|
|
// 正在播放其他视频
|
|
this.videoContext.stop();
|
|
}else{
|
|
// 滚动页面
|
|
this.query.select('.video-wrapper').boundingClientRect(data=>{
|
|
if(data){
|
|
console.log(data.top,'视频在屏幕的高度');
|
|
if(this.isDetail && (data.top==0 || data.top<0) && this.index==this.currentPlay){// 详情页
|
|
console.log('视频暂停');
|
|
this.videoContext.stop();
|
|
}else if(!this.isDetail && (data.top==90 || data.top<90) && this.index==this.currentPlay){// 首页
|
|
console.log('视频暂停');
|
|
this.videoContext.stop();
|
|
}
|
|
}
|
|
}).exec();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
imgPre(index, imgs){
|
|
uni.previewImage({
|
|
current: imgs[index],
|
|
urls: imgs,
|
|
fail(err) {
|
|
console.log(111, err)
|
|
}
|
|
});
|
|
},
|
|
share(){
|
|
|
|
},
|
|
editCom(){
|
|
this.commentShow=true;
|
|
},
|
|
// 提交评论
|
|
submit(){
|
|
let _this = this,
|
|
data = {
|
|
text: _this.text,
|
|
id: _this.itemInfos.id
|
|
};
|
|
App._post_form('&p=pocket&do=comment', data, res => {
|
|
_this.commentShow = false;
|
|
|
|
App.showSuccess('评论成功', () => {
|
|
// _this.isComment = false;
|
|
})
|
|
if(_this.itemInfos.comment_total){// 图文详情页需要展示评论
|
|
let plPush = {
|
|
nickname: uni.getStorageSync('userinfo').nickname,
|
|
mid:res.data.amid,
|
|
id:res.data.cid,
|
|
content: _this.text,
|
|
list:[],
|
|
avatar: uni.getStorageSync('userinfo').avatar,
|
|
createtime: _this.getTimeData(new Date().getTime())
|
|
};
|
|
_this.$emit('addComment', plPush)
|
|
}
|
|
|
|
_this.text = '';
|
|
},fail=>{
|
|
// _this.isComment = false;
|
|
// if (fail.data.message == '未绑定手机号') {
|
|
// //#ifdef H5
|
|
// _this.popShow = true;
|
|
// //#endif
|
|
// //#ifndef H5
|
|
// _this.vxshow = true;
|
|
// //#endif
|
|
|
|
// }
|
|
});
|
|
},
|
|
// 点赞
|
|
fabulous() {
|
|
let _this = this;
|
|
let data = {
|
|
id: _this.itemInfos.id
|
|
};
|
|
App._post_form('&p=pocket&do=fabulous', data, res => {
|
|
if (_this.itemInfos.is_fabulous == 1) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '取消点赞',
|
|
duration: 2000
|
|
});
|
|
_this.itemInfos.is_fabulous = 0;
|
|
_this.itemInfos.fabulous_num--;
|
|
} else {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '点赞成功',
|
|
duration: 2000
|
|
});
|
|
_this.itemInfos.is_fabulous = 1;
|
|
_this.itemInfos.fabulous_num++;
|
|
}
|
|
});
|
|
},
|
|
goHome(){
|
|
if (this.itemInfos.mid > 0) {
|
|
App.navigationTo({
|
|
url: 'pages/subPages/homepage/homepage/homepage?mid=' + this.itemInfos.mid + '&checkType=' + 1
|
|
});
|
|
}
|
|
},
|
|
videoControl(e){
|
|
console.log(e)
|
|
if(e.detail.fullScreen){ //e.detail.fullScreen是否为全屏
|
|
this.videoContext.play();
|
|
}else{
|
|
//停止播放
|
|
// this.videoContext.stop(); 各位老板不要选择stop 选择了stop 缩小视频还会自动播放
|
|
this.videoContext.pause();
|
|
}
|
|
},
|
|
playing(lint) {
|
|
this.videoshow = true;
|
|
this.videolint = lint;
|
|
// 获取当前视频id
|
|
// let currentId = e.currentTarget.dataset.id
|
|
// uni.createVideoContext获取视频上下文对象
|
|
this.videoContext.requestFullScreen({
|
|
direction:0
|
|
})
|
|
},
|
|
interest(){
|
|
let data = {
|
|
interest_mid: this.itemInfos.mid
|
|
};
|
|
App._post_form('&p=member&do=addInterestMember', data, res => {
|
|
uni.showToast({
|
|
title: res.message
|
|
})
|
|
this.itemInfos.is_interest = true;
|
|
})
|
|
},
|
|
interestCancel(){
|
|
let data = {
|
|
interest_mid: this.itemInfos.mid
|
|
};
|
|
App._post_form('&p=member&do=cancelInterestMember', data, res => {
|
|
uni.showToast({
|
|
title: res.message
|
|
})
|
|
this.itemInfos.is_interest = false;
|
|
})
|
|
},
|
|
// 时间戳转年月日时分
|
|
getTimeData(dataValue) {
|
|
let date = new Date(dataValue) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
|
|
let Y = date.getFullYear() + '-'
|
|
let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
|
|
let D = date.getDate() + ' '
|
|
let h = date.getHours() + ':'
|
|
let m = date.getMinutes()
|
|
let s = date.getSeconds()
|
|
return Y + M + D + h + m;
|
|
},
|
|
changeShowAll(type){
|
|
if(this.showAllText == type) return;
|
|
this.showAllText = type;
|
|
},
|
|
changeShowPoster(){
|
|
this.showPoster = false;
|
|
// this.playing(this.itemInfos.video_link);
|
|
// this.videoContext.play();
|
|
},
|
|
changeSize(e){
|
|
console.log(e.detail.width, e.detail.height, e.detail.duration);
|
|
if(e.detail.width > e.detail.height){
|
|
this.videoWidth = '77vw';
|
|
this.videoHeight = e.detail.height/e.detail.width*77+'vw';
|
|
// console.log(this.videoWidth, this.videoHeight)
|
|
}else if(e.detail.width < e.detail.height){
|
|
if(this.isDetail){
|
|
this.videoHeight = this.detailVideoHeight;
|
|
this.videoWidth = e.detail.width/e.detail.height*60+'vw';
|
|
}else{
|
|
this.videoHeight = this.listVideoHeight;
|
|
this.videoWidth = e.detail.width/e.detail.height*40+'vw';
|
|
}
|
|
// console.log(this.videoWidth, this.videoHeight)
|
|
}
|
|
},
|
|
changeImgSize(e){
|
|
console.log(e.detail.width, e.detail.height, '单张图片尺寸');
|
|
this.singleImgW = e.detail.width;
|
|
this.singleImgH = e.detail.height;
|
|
},
|
|
stopOther(){
|
|
this.$emit('changePlay', this.index);
|
|
},
|
|
updateImgW(){
|
|
return { width: `calc(${this.singleImgW} / ${this.singleImgH} * 50vw)` };
|
|
},
|
|
updateImgH(){
|
|
return { height: `calc(${this.singleImgH} / ${this.singleImgW} * 50vw)` };
|
|
},
|
|
},
|
|
onReady(){
|
|
// 页面初次渲染！ createVideoContext uni video自带 上下文 如果不懂可以去百度
|
|
this.videoContext = wx.createVideoContext('myvideo'+this.index, this);
|
|
// console.log(this.videoContext)
|
|
// this.videoContext.requestFullScreen();
|
|
this.query = uni.createSelectorQuery().in(this);
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.dis-flex{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.left_area{
|
|
width: 15vw;
|
|
.avatar{
|
|
width: 40px;
|
|
height: 40px;
|
|
background: #d1d1d1;
|
|
border-radius: 50%;
|
|
margin: 8px calc(7.5vw - 20px);
|
|
}
|
|
}
|
|
.right_area{
|
|
|
|
}
|
|
.text-wrapper{
|
|
width: 77vw;
|
|
padding-top: 5px;
|
|
margin: 5px auto;
|
|
.avatar{
|
|
width: 40px;
|
|
height: 40px;
|
|
background: #d1d1d1;
|
|
border-radius: 50%;
|
|
margin-right: 8px;
|
|
}
|
|
.name{
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
.label{
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
background-color: #ffeaf1;
|
|
border-radius: 5px;
|
|
font-size: 13px;
|
|
color: #ff0f43;
|
|
font-weight: normal;
|
|
line-height: 16px;
|
|
margin-left: 7px;
|
|
}
|
|
.btn{
|
|
width: 56px;
|
|
line-height: 26px;
|
|
border-radius: 18px;
|
|
color: #ff0f43;
|
|
background-color: #ffeaf1;
|
|
border: 1px solid #ff0f43;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
}
|
|
.btn2{
|
|
width: 72px;
|
|
line-height: 26px;
|
|
border-radius: 18px;
|
|
color: #ff0f43;
|
|
background-color: #ffffff;
|
|
border: 1px solid #ff0f43;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
}
|
|
.text-main{
|
|
max-height: 72px;
|
|
line-height: 22px;
|
|
overflow: hidden;
|
|
|
|
.main{
|
|
width: 100%;
|
|
display: -webkit-box;//将盒子转换为弹性盒子
|
|
-webkit-box-orient: vertical;//文本显示方式，默认水平
|
|
-webkit-line-clamp: 2;//设置显示多少行
|
|
overflow: hidden;
|
|
}
|
|
.all{
|
|
color: #69aee2;
|
|
margin-left: 5rpx;
|
|
}
|
|
}
|
|
.text-main.show_all{
|
|
max-height: none;
|
|
|
|
.main{
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.img-wrapper{
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
width: 77vw;
|
|
margin: 6px auto 5px;
|
|
.img-item{
|
|
width: 25vw;
|
|
height: 25vw;
|
|
margin-bottom: 1vw;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
.img-item-single-w{
|
|
width: 50vw;
|
|
margin-bottom: 1vw;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
.img-item-single-h{
|
|
height: 50vw;
|
|
margin-bottom: 1vw;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #d1d1d1;
|
|
}
|
|
.videoPlay {
|
|
// width: 630upx;
|
|
// height: 450upx;
|
|
}
|
|
}
|
|
.video-wrapper{
|
|
justify-content: flex-start;
|
|
width: 77vw;
|
|
margin: 6px auto 5px;
|
|
}
|
|
.comment-wrapper{
|
|
width: 77vw;
|
|
height: 25px;
|
|
margin: 0 auto 6px;
|
|
justify-content: space-between;
|
|
font-size: 13px;
|
|
color: #333;
|
|
}
|
|
.reply-wrapper{
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
z-index: 9;
|
|
width: 560rpx;
|
|
height: 430rpx;
|
|
background-color: #fff;
|
|
border-radius: 20px;
|
|
transform: translate(-50%, -50%);
|
|
box-shadow: 0px 0px 3px 0px rgba(0,0,0,.05);
|
|
|
|
.my-text{
|
|
padding: 50rpx 30rpx;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.videoshow{
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: relative;
|
|
}
</style>
|
|
|