Skip to content

M
mallapp
Commit 6b4c4ac8 authored by Mac's avatar Mac
Browse files
Options

1

parent 5dd19d1f
Hide whitespace changes
Inline Side-by-side
Showing with 451 additions and 176 deletions
pages.json
View file @ 6b4c4ac8
......@@ -474,6 +474,10 @@
"path":"my-news"//我的动态
},{
"path":"enlargevideo"//视频放大
},{
"path":"mydetails"//动态详情
},{
"path":"friendcircle"//朋友圈
}]
},
//抖音商品短视频
......
pages/friendcircle/friendcircle.vue
View file @ 6b4c4ac8
......@@ -8,170 +8,303 @@
.friendcircle .ftBox {
width: 100%;
padding: 0 15px;
margin-top: 20px;
display: flex;
flex-direction: row;
align-items: flex-start;
margin-top: 20px;
display: flex;
flex-direction: row;
align-items: flex-start;
}
.friendcircle .ftBox-left{
margin-right: 15px;
}
.friendcircle .ftBox-right{
width: 1;
flex: 1;
flex-direction: column;
.friendcircle .ftBox-left{
margin-right: 15px;
}
.friendcircle .text{
color: #A68237;
font-size: 12px;
}
.friendcircle .text2{
font-size: 12px;
color: #333333;
}
.friendcircle .r-sj{
font-size: 11px;
color: #B0B0B0;
display: flex;flex-direction: row;
align-items: center;
justify-content: space-between;
position: relative;
}
.friendcircle .r-sj-d{
width: 24px;
height: 17px;
background: #F5F5F5;
border-radius: 3px;
display: flex;flex-direction: row;
align-items: center;justify-content: space-around;padding:0 3px;
}
.friendcircle .dian{
width: 4px;height: 4px;border-radius: 2px;background: #737373;
}
.diancaoz{
width: 110px;
height: 30px;
background: #000000;
border-radius: 4px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
position: absolute;
right: 26px;
bottom: -5px;
font-size: 11px;
color: #FFFFFF;
}
.dianrow{
display: flex;flex-direction: row;
align-items: center;
}
.dianrow text{margin-left: 3px;}
.friendcircle .imgmode{
display: flex;
flex-direction: row;
flex-wrap: wrap;
.friendcircle .ftBox-right{
width: 1;
flex: 1;
flex-direction: column;
}
.friendcircle .text{
color: #A68237;
font-size: 12px;
}
.friendcircle .text2{
font-size: 12px;
color: #333333;
}
.friendcircle .r-sj{
font-size: 11px;
color: #B0B0B0;
display: flex;flex-direction: row;
align-items: center;
justify-content: space-between;
position: relative;
}
.friendcircle .r-sj-d{
width: 24px;
height: 17px;
background: #F5F5F5;
border-radius: 3px;
display: flex;flex-direction: row;
align-items: center;justify-content: space-around;padding:0 3px;
}
.friendcircle .dian{
width: 4px;height: 4px;border-radius: 2px;background: #737373;
}
.diancaoz{
width: 110px;
height: 30px;
background: #000000;
border-radius: 4px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
position: absolute;
right: 26px;
bottom: -5px;
font-size: 11px;
color: #FFFFFF;
}
.dianrow{
display: flex;flex-direction: row;
align-items: center;
}
.dianrow text{margin-left: 3px;}
.friendcircle .imgmode{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.friendcircle .fileimg{
width: 100%;height: 100%;
}
.friendcircle .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;
}
.friendcircle .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;
}
.friendcircle .friendarea{
position: relative;
width: 100%;
background: #F5F5F5;
border-radius: 5px;
margin-top: 10px;
}
.friendcircle .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;
}
.friendcircle .areagood{
width: 100%;
padding: 10px;
display: flex;flex-direction: row;
align-items: flex-start;
}
.areagood-r{
width: 1;
flex:1;
margin-left: 10px;
}
.friendcircle .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;
}
.friendcircle .comment-pl{
width: 56px;
height: 26px;
font-size: 13px;
color: #FFF;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
}
.friendcircle .commentinput{
width: calc(100vw - 120px);
height: 30px;
background: #F3FAF8;
border-radius: 15px;
font-size: 13px;
padding: 0 10px;
}
.friendcircle .comment-list{
width: 100%;
}
.friendcircle .fileimg{
width: 100%;height: 100%;
.popup-box{
width: 100%;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
background: #FFF;
}
.friendcircle .imgc{
width: 100%;height: 100%;
background: rgba(0, 0, 0, 0.2);
.popup-box-item{
width: 100%;
height: 40px;
border-bottom: 1px solid #E7E7E7;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top:0;
font-size: 30px;
color: #FFFFFF;
}
</style>
<template>
<div class='friendcircle'>
<u-empty v-if="g.length == 0" text="暂无动态" mode="list"></u-empty>
<view v-if="g.length > 0" style="
<view v-if="g.length > 0" style="
height: calc(100vh);width: calc(100vw)
overflow: hidden;
">
<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" :style="{ height: '100%' }">
<view class="ftBox" v-for="(x, i) in g" :key="i" >
<view class="ftBox-left">
<u-avatar :src="x.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;">{{x.createEmName}}</view>
<view class="text2" style="font-size: 14px;margin-bottom: 5px;">{{x.content}}</view>
<!-- 图片模式 -->
<view class="imgmode" v-if="x.fileType==1" >
<view v-if="x.files.length==1" style="width: 150px;height:200px;margin-bottom: 6px;" @click="previewImage(0,x.files)">
<image :src="x.files[0]" mode="aspectFill" class="fileimg"></image>
</view>
<view v-if="x.files.length==2 || x.files.length==4" v-for="(item, iq) in x.files" :key="iq"
@click="previewImage(iq,x.files)"
style="width: 240rpx;height:240rpx;margin-bottom: 6px;margin-right: 6px;">
<image :src="item" mode="aspectFill" class="fileimg"></image>
</view>
<view v-if="(x.files.length==3 || x.files.length>4) && iq<9" v-for="(item, iq) in x.files" :key="iq"
@click="previewImage(iq,x.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 && x.files.length>9">
9+
</view>
</view>
</view>
<view class="imgmode" v-if="x.fileType==2">
<view style="width: 100px;height:120px;margin-bottom: 6px;position: relative;" >
<video id="myVideo" :src="x.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(x.files[0])">
<u-icon name="play-circle-o" :size="50" color="#FFF"></u-icon>
</view>
</view>
</view>
<view>
</view>
<view class="r-sj">
<text>{{x.createTime}}</text>
<view class="r-sj-d" @click="getdian(x,i)">
<view class="dian"></view>
<view class="dian"></view>
</view>
<view class="diancaoz" v-if="x.dianshow==true">
<view class="dianrow" @click="dianzan(x,i)">
<u-icon name="like-o" :size="30" color="#FFF"></u-icon>
<text>
{{x.hasLike==false ?'赞':'取消'}}
</text>
</view>
<view class="dianrow" @click="pinglun(x,i)">
<u-icon name="comment-circle-o" :size="30" color="#FFF"></u-icon>
<text>
评论
</text>
</view>
</view>
</view>
<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scroll='inputscroll' @scrolltolower="lower"
:style="{ height: '100%' }">
<view class="ftBox" v-for="(x, i) in g" :key="i">
<view class="ftBox-left">
<u-avatar :src="x.crearteEmPhoto" size='80' mode="square"></u-avatar>
</view>
</view>
<view class="ftBox-right">
<view class="text" style="font-size: 14px;font-weight: bold;margin-bottom: 5px;">{{x.createEmName}}</view>
<view class="text2" style="font-size: 14px;margin-bottom: 5px;">{{x.content}}</view>
<!-- 图片模式 -->
<view class="imgmode" v-if="x.fileType==1">
<view v-if="x.files.length==1" style="width: 150px;height:200px;margin-bottom: 6px;" @click="previewImage(0,x.files)">
<image :src="x.files[0]" mode="aspectFill" class="fileimg"></image>
</view>
<view v-if="x.files.length==2 || x.files.length==4" v-for="(item, iq) in x.files" :key="iq" @click="previewImage(iq,x.files)"
style="width: 240rpx;height:240rpx;margin-bottom: 6px;margin-right: 6px;">
<image :src="item" mode="aspectFill" class="fileimg"></image>
</view>
<view v-if="(x.files.length==3 || x.files.length>4) && iq<9" v-for="(item, iq) in x.files" :key="iq" @click="previewImage(iq,x.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 && x.files.length>9">
9+
</view>
</view>
</view>
<view class="imgmode" v-if="x.fileType==2">
<view style="width: 100px;height:120px;margin-bottom: 6px;position: relative;">
<video id="myVideo" :src="x.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(x.files[0])">
<u-icon name="play-circle-o" :size="50" color="#FFF"></u-icon>
</view>
</view>
</view>
<view v-if="x.fileType==3" class="audios">
<view class="andiostyle" @click.stop="playVoice(x)">
<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>{{x.createTime}}</text>
<view class="r-sj-d" @click="getdian(x,i)">
<view class="dian"></view>
<view class="dian"></view>
</view>
<view class="diancaoz" v-if="x.dianshow==true">
<view class="dianrow" @click="dianzan(x,i)">
<u-icon name="like-o" :size="30" color="#FFF"></u-icon>
<text>
{{x.hasLike==false ?'赞':'取消'}}
</text>
</view>
<view class="dianrow" @click="pinglun(x,i)">
<u-icon name="comment-circle-o" :size="30" color="#FFF"></u-icon>
<text>
评论
</text>
</view>
</view>
</view>
<view class="friendarea" v-if="(x.likeList && x.likeList.length>0) || x.commentList && x.commentList.length>0">
<!-- //三角形 -->
<view class="sjx"></view>
<view class="areagood" v-if=" x.likeList.length>0" :style="{'border-bottom':x.commentList.length>0?'1px solid rgb(226, 226, 226)':0}">
<u-icon name="like-o" :size="30" color="#737373"></u-icon>
<view class="areagood-r text">
<text v-for="(item, iq) in x.likeList" :key="iq">{{item.empName}}{{x.likeList.length!=iq+1?'、':''}}</text>
</view>
</view>
<view class="areagood" v-if=" x.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 x.commentList" :key="iq" style="width: 100%;margin-bottom: 10px;" @click="huifu(x,i,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" v-if="focu==true">
<input type="text" v-model="commentMsg.Content" :placeholder='placeholder' class="commentinput" :focus='focu'>
<view class="comment-pl" :style="{background:mainColor}" @click="addComment">评论</view>
</view>
<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20" bg-color="#FFF" />
</scroll-view>
</view>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth='gbAuth'></auth>
<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>
</div>
</template>
......@@ -189,10 +322,10 @@
showAuth: false,
msg: {
pageIndex: 1,
pageSize: 15,
UserTeacher:0,
CreateBy:'',
UserId:0,
pageSize: 15,
UserTeacher: 0,
CreateBy: '',
UserId: 0,
},
mainColor: "",
secondary: '',
......@@ -208,8 +341,19 @@
nomore: "没有更多了",
},
windowWidth: 0,
nowbofo: false,
placeholder: '评论',
focu: false, //是否获取焦点
commentMsg: {
ArticleId: 0,
CommentId: 0,
Content: '',
},
choiceId: 0,//保存评论和点赞时候的id
show:false,
user:'',//点击用户保存的数据
}
},
created() {
......@@ -217,8 +361,8 @@
this.mainColor = this.$uiConfig.mainColor;
this.secondary = this.$uiConfig.secondary;
this.pricecolor = this.$uiConfig.pricecolor;
this.windowWidth = this.$utils.SystemInfo().windowWidth;
this.msg.UserId=uni.getStorageSync("mall_UserInfo").UserId ? uni.getStorageSync("mall_UserInfo").UserId :0;
this.windowWidth = this.$utils.SystemInfo().windowWidth;
this.msg.UserId = uni.getStorageSync("mall_UserInfo").UserId ? uni.getStorageSync("mall_UserInfo").UserId : 0;
},
mounted() {
let currentPages = getCurrentPages();
......@@ -259,7 +403,7 @@
this.loading = false;
this.count = res.data.count;
res.data.pageData.forEach(x => {
x.nowbofo = false;
x.nowbofo = false;
x.dianshow = false;
})
this.g = this.g.concat(res.data.pageData);
......@@ -295,10 +439,10 @@
},
getList() {
this.msg.pageIndex = 1;
this.g = [];
this.g = [];
this.init();
},
lower(e) {
lower(e) {
console.log(2)
if (this.msg.pageIndex < this.page_count) {
this.msg.pageIndex++;
......@@ -316,30 +460,155 @@
//关闭登录窗口
gbAuth() {
uni.navigateBack()
},
getdian(x, i) { //点击点点
this.g[i].dianshow = !this.g[i].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.g[i].hasLike = !this.g[i].hasLike;
this.g[i].dianshow = false; //隐藏按钮
this.init2(1)
}
}
);
},
pinglun(x, i) { //评论
this.focu = true;
this.choiceId = x.id;
this.$forceUpdate()
this.g[i].dianshow = false; //隐藏按钮
this.commentMsg = {
ArticleId: x.id,
CommentId: 0,
Content: '',
}
},
inputscroll() { //滚动时触发
//初始化内容
this.focu = false;
this.commentMsg.Content = '';
this.placeholder = '评论';
},
getdian(x,i){//点击点点
this.g[i].dianshow = !this.g[i].dianshow;
this.$forceUpdate()
},
dianzan(x,i){//点赞
huifu(x,i,item,iq){
this.user={
x:x,
i:i,
item:item,
iq:iq,
}
if(this.msg.UserId == this.user.item.empId){//自己点自己的时候处理
this.show=true
}
},
pinglun(x,i){//评论
},
//图片预览
previewImage(index, images) {
uni.previewImage({
urls: images,
current: index,
});
mydelete(){//删除自己的回复
this.request2({
url: '/api/AppletEducation/DynamicDeleteComment',
data: {commentId:this.user.item.commentId}
},
res => {
if (res.resultCode == 1) {
this.g[this.user.i].commentList.splice(this.user.iq,1)
uni.showToast({
title: res.message,
icon: 'none',
duration: 2000
});
this.show = false;
}
}
);
},
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.init2(2)
}
}
);
},
init2(type) { //根据id去查询当前的数据 只更新当前数据
this.request2({
url: '/api/AppletSchool/DynamicList',
data: {
pageIndex: 1,
pageSize: 1,
UserTeacher: 0,
CreateBy: '',
UserId: 0,
Id: this.choiceId
}
},
res => {
if (res.resultCode == 1) {
this.g.forEach((x, j) => {
if (res.data.pageData[0].id == x.id) {
if (type == 2) { //评论
this.g[j].commentList = res.data.pageData[0].commentList
} else if (type == 1) { //点赞
this.g[j].likeList = res.data.pageData[0].likeList;
}
}
})
}
}
);
},
//图片预览
previewImage(index, images) {
uni.previewImage({
urls: images,
current: index,
});
},
enlarge(file) {
uni.navigateTo({
url: '/pages/friendcircle/enlargevideo?file=' + file
})
},
enlarge(file){
uni.navigateTo({
url: '/pages/friendcircle/enlargevideo?file=' + file
})
}
paste(){//复制
uni.setClipboardData({
data: this.user.item.content,
});
},
}
}
</script>
pages/friendcircle/my-news.vue
View file @ 6b4c4ac8
......@@ -442,7 +442,7 @@
url: '/pages/friendcircle/mydetails?ID=' + x.id
})
innerAudioContext.stop();
}
},
}
}
</script>
pages/goods/list.vue
View file @ 6b4c4ac8
......@@ -44,14 +44,14 @@
<u-empty text="没有找到商品信息" font-size="36" mode="list" ></u-empty>
</view>
<!-- <view class="quick" v-if="!loading">
<view class="item">
<view class="quick" v-if="!loading">
<!-- <view class="item">
<u-icon name="cart-o" size="48" color="#333" />
</view>
</view> -->
<view class="item" @click="goTop">
<u-icon name="arrow-up" size="48" color="#333" />
</view>
</view> -->
</view>
</view>
</template>
......
pages/index/index.vue
View file @ 6b4c4ac8
......@@ -185,7 +185,9 @@
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