Skip to content

M
mallapp
Commit 546e6ff9 authored by Mac's avatar Mac
Browse files
Options

1

parent a83a1a6d
Show whitespace changes
Inline Side-by-side
Showing with 436 additions and 23 deletions
pages/friendcircle/my-news.vue
View file @ 546e6ff9
......@@ -126,7 +126,7 @@
<div class='mynews'>
<view class="mynews-top">
<view class="top-box">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/wodehufong.png" mode="widthFix" style="width: 16px;"></image>
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/wodehufong.png" mode="widthFix" style="width: 16px;height: auto;"></image>
<text style="margin-left: 6px;">我的互动消息</text>
</view>
</view>
......
pages/friendcircle/mydetails.vue
View file @ 546e6ff9
......@@ -6,43 +6,330 @@
}
.mydetails .box{
width: 100%;
padding: 15px;
}
.mydetails .personal{
.mydetails .ftBox {
width: 100%;
padding: 0 15px;
margin-top: 20px;
display: flex;
flex-direction: row;
align-items: flex-start;
margin-bottom: 55px;
}
.mydetails .ftBox-left{
margin-right: 15px;
}
.mydetails .ftBox-right{
width: 1;
flex: 1;
flex-direction: column;
}
.mydetails .text{
color: #A68237;
font-size: 12px;
}
.mydetails .text2{
font-size: 12px;
color: #333333;
}
.mydetails .r-sj{
font-size: 11px;
color: #B0B0B0;
display: flex;flex-direction: row;
align-items: center;
justify-content: space-between;
position: relative;
margin-top: 3px;
}
.mydetails .r-sj-d{
width: 26px;
height: 19px;
background: #F5F5F5;
border-radius: 3px;
display: flex;flex-direction: row;
align-items: center;justify-content: space-around;padding:0 3px;
}
.tximg{
width: 45px;
height: 45px;
.mydetails .dian{
width: 4px;height: 4px;border-radius: 2px;background: #737373;
}
.diancaoz{
width: 110px;
height: 30px;
background: #000000;
border-radius: 4px;
overflow: hidden;margin-right: 8px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
position: absolute;
right: 29px;
bottom: -5px;
font-size: 11px;
color: #FFFFFF;
}
.dianrow{
display: flex;flex-direction: row;
align-items: center;
}
.dianrow text{margin-left: 3px;}
.mydetails .imgmode{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.mydetails .fileimg{
width: 100%;height: 100%;
}
.mydetails .imgc{
width: 100%;height: 100%;
background: rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top:0;
font-size: 30px;
color: #FFFFFF;
}
.mydetails .audios{
width: 500rpx;
height: 27px;
border-radius: 5px;
padding: 0 15px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background: #EBEBEB;
}
.mydetails .friendarea{
position: relative;
width: 100%;
background: #F5F5F5;
border-radius: 5px;
margin-top: 10px;
}
.mydetails .sjx{
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 8px solid #F5F5F5;
position: absolute;
left: 10px;
top:-6px;
}
.mydetails .areagood{
width: 100%;
padding: 10px;
display: flex;flex-direction: row;
align-items: flex-start;
}
.areagood-r{
width: 1;
flex:1;
margin-left: 10px;
}
.mydetails .comment{
width: 100%;
height: 55px;
padding: 0 15px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: fixed;
left: 0;
bottom: 0;
background: #FFF;
z-index: 9;
}
.mydetails .comment-pl{
width: 56px;
height: 26px;
font-size: 13px;
color: #FFF;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
}
.mydetails .commentinput{
width: calc(100vw - 120px);
height: 30px;
background: #F3FAF8;
border-radius: 15px;
font-size: 13px;
padding: 0 10px;
}
.mydetails .comment-list{
width: 100%;
}
.popup-box{
width: 100%;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
background: #FFF;
}
.popup-box-item{
width: 100%;
height: 40px;
border-bottom: 1px solid #E7E7E7;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<template>
<view class="mydetails">
<u-empty v-if="loading==true" text="网络出现故障" mode="wifi"></u-empty>
<view class="box">
<view class="personal">
<view class="tximg">
<image :src="detial.crearteEmPhoto" mode="aspectFill" style="width: 100%;height: 100%;border-radius: 4px;"></image>
<view class="box" v-if="loading==false">
<view class="ftBox" >
<view class="ftBox-left">
<u-avatar :src="detial.crearteEmPhoto" size='80' mode="square"></u-avatar>
</view>
<view class="ftBox-right">
<view class="text" style="font-size: 14px;font-weight: bold;margin-bottom: 5px;">{{detial.createEmName}}</view>
<view class="text2" style="font-size: 14px;margin-bottom: 5px;">{{detial.content}}</view>
<!-- 图片模式 -->
<view class="imgmode" v-if="detial.fileType==1">
<view v-if="detial.files.length==1" style="width: 150px;height:200px;margin-bottom: 6px;" @click="previewImage(0,detial.files)">
<image :src="detial.files[0]" mode="aspectFill" class="fileimg"></image>
</view>
<view v-if="detial.files.length==2 || detial.files.length==4" v-for="(item, iq) in detial.files" :key="iq" @click="previewImage(iq,detial.files)"
style="width: 240rpx;height:240rpx;margin-bottom: 6px;margin-right: 6px;">
<image :src="item" mode="aspectFill" class="fileimg"></image>
</view>
<view v-if="(detial.files.length==3 || detial.files.length>4) && iq<9" v-for="(item, iq) in detial.files" :key="iq" @click="previewImage(iq,detial.files)"
style="width: 160rpx;height:160rpx;margin-bottom: 6px;margin-right: 6px;position: relative;">
<image :src="item" mode="aspectFill" class="fileimg"></image>
<view class="imgc" v-if="iq==8 && detial.files.length>9">
9+
</view>
</view>
</view>
<view class="imgmode" v-if="detial.fileType==2">
<view style="width: 100px;height:120px;margin-bottom: 6px;position: relative;">
<video id="myVideo" :src="detial.files[0]" style="width: 100%;height: 100%;" :controls='false' :show-center-play-btn='false'></video>
<view style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;display: flex;align-items: center;justify-content: center;"
@click="enlarge(detial.files[0])">
<u-icon name="play-circle-o" :size="50" color="#FFF"></u-icon>
</view>
</view>
</view>
<view v-if="detial.fileType==3" class="audios">
<view class="andiostyle" @click.stop="playVoice(detial)">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/Sound.png" mode="widthFix" style="width: 19px;height: auto;"></image>
</view>
</view>
<view class="r-sj">
<text>{{detial.createTime}}</text>
<view class="r-sj-d" @click="getdian(detial)">
<view class="dian"></view>
<view class="dian"></view>
</view>
<view class="diancaoz" v-if="detial.dianshow==true">
<view class="dianrow" @click="dianzan(detial)">
<u-icon name="like-o" :size="30" color="#FFF"></u-icon>
<text>
{{detial.hasLike==false ?'赞':'取消'}}
</text>
</view>
<view class="dianrow" @click="pinglun(detial)">
<u-icon name="comment-o" :size="30" color="#FFF"></u-icon>
<text>
评论
</text>
</view>
</view>
</view>
<view class="friendarea" v-if="(detial.likeList && detial.likeList.length>0) || detial.commentList && detial.commentList.length>0">
<!-- //三角形 -->
<view class="sjx"></view>
<view class="areagood" v-if=" detial.likeList.length>0" >
<u-icon name="like-o" :size="30" color="#737373"></u-icon>
<view class="areagood-r text">
<text v-for="(item, iq) in detial.likeList" :key="iq">{{item.empName}}{{detial.likeList.length!=iq+1?'、':''}}</text>
</view>
</view>
<view v-if="detial.likeList.length>0 && detial.commentList.length>0" style="width: 100%;height: 1px;background: rgb(226, 226, 226);"></view>
<view class="areagood" v-if=" detial.commentList.length>0">
<u-icon name="comment-o" :size="30" color="#737373" style='margin-top: 2px;'></u-icon>
<view class="areagood-r">
<view v-for="(item, iq) in detial.commentList" :key="iq" style="width: 100%;margin-bottom: 7px;" @click="huifu(detial,item,iq)">
<view class="text comment-list">
{{item.empName}}
<text style="color: #333333;margin: 0 3px;" v-if="item.byReplayEmpId>0">回复</text>
{{item.byReplayEmpId>0?item.byReplayEmpName:''}}
</view>
<view class="text2">{{item.content}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 输入框 -->
<view class="comment" >
<input type="text" v-model="commentMsg.Content" :placeholder='placeholder' class="commentinput" :focus='focu'>
<view class="comment-pl" :style="{background:mainColor}" @click="addComment">评论</view>
</view>
</view>
<u-popup v-model="show" mode="bottom" border-radius='14'>
<view class="popup-box">
<view class="popup-box-item" @click="paste()">
复制
</view>
<view class="popup-box-item" @click="mydelete()">
删除
</view>
<view style="width: 100%;height: 10px;background: #E7E7E7;"></view>
<view class="popup-box-item" @click="show=false" style="height: 45px;">
取消
</view>
</view>
</u-popup>
</view>
</template>
<script>
const innerAudioContext = uni.createInnerAudioContext();
export default{
data(){
return{
articleId:0,
loading:false,
detial:{}
detial:{},
mainColor: "",
secondary: '',
pricecolor: '',
nowbofo: false,
placeholder: '评论',
focu: false, //是否获取焦点
commentMsg: {
ArticleId: 0,
CommentId: 0,
Content: '',
},
choiceId: 0,//保存评论和点赞时候的id
show:false,
user:'',//点击用户保存的数据
}
},
onLoad(options) {
......@@ -51,8 +338,11 @@
this.init()
}
uni.setNavigationBarTitle({
title: 详情,
title: '详情',
});
this.mainColor = this.$uiConfig.mainColor;
this.secondary = this.$uiConfig.secondary;
this.pricecolor = this.$uiConfig.pricecolor;
},
methods:{
init(){
......@@ -64,11 +354,137 @@
res => {
this.loading = false;
if (res.resultCode == 1) {
this.detial = res.data.data
this.detial = res.data;
this.detial.nowbofo = false;
this.detial.dianshow = false;
}
}
);
},
//图片预览
previewImage(index, images) {
uni.previewImage({
urls: images,
current: index,
});
},
enlarge(file) {
// 全屏
innerAudioContext.stop();
uni.navigateTo({
url: '/pages/friendcircle/enlargevideo?file=' + file
})
},
//语音播放
playVoice(x) {
let that = this
innerAudioContext.src = x.files[0];
if (this.nowbofo == false) {
innerAudioContext.play()
this.nowbofo = true
} else {
innerAudioContext.pause();
this.nowbofo = false
}
},
getdian(x, i) { //点击点点
this.detial.dianshow = !this.detial.dianshow;
this.$forceUpdate()
},
dianzan(x, i) { //点赞
this.choiceId = x.id;
let url = '';
if (x.hasLike == false) {
url = '/api/AppletEducation/DynamicLike'
} else {
url = '/api/AppletEducation/DynamicCancelLike'
}
this.request2({
url: url,
data: {
articleId: x.id
}
},
res => {
if (res.resultCode == 1) {
this.detial.hasLike = !this.detial.hasLike;
this.detial.dianshow = false; //隐藏按钮
this.init()
}
}
);
},
huifu(x,item,iq){
this.user={
x:x,
item:item,
iq:iq,
}
if(this.msg.UserId == this.user.item.empId){//自己点自己的时候处理
this.show=true
}else{
this.focu = true;
this.choiceId = x.id;
this.$forceUpdate()
this.commentMsg = {
ArticleId: x.id,
CommentId: item.commentId,
Content: '',
}
this.placeholder = '回复'+item.empName
}
},
addComment() {
if (this.commentMsg.Content == '') {
uni.showToast({
title: '请输入评论',
icon: 'none',
duration: 2000
});
return
}
this.request2({
url: '/api/AppletEducation/DynamicComment',
data: this.commentMsg
},
res => {
if (res.resultCode == 1) {
this.focu = false;
this.commentMsg.Content = '';
this.placeholder = '评论';
this.init()
}
}
);
},
mydelete(){//删除自己的回复
this.request2({
url: '/api/AppletEducation/DynamicDeleteComment',
data: {commentId:this.user.item.commentId}
},
res => {
if (res.resultCode == 1) {
this.detial.commentList.splice(this.user.iq,1)
uni.showToast({
title: res.message,
icon: 'none',
duration: 2000
});
this.show = false;
}
}
);
},
paste(){//复制
uni.setClipboardData({
data: this.user.item.content,
});
},
}
}
</script>
......
pages/index/index.vue
View file @ 546e6ff9
......@@ -185,9 +185,6 @@
educationteacher
},
onLoad(options) {
uni.navigateTo({
url: '/pages/friendcircle/friendcircle'
})
let that = this;
uni.getSystemInfo({
success(res) {
......
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