Skip to content

N
newLive
Commit 6706a7b8 authored by jiaoyahui's avatar jiaoyahui
Browse files
Options

我的关注和我的浏览

parent ca90a0ab
Show whitespace changes
Inline Side-by-side
Showing with 370 additions and 121 deletions
src/axios/api.js
View file @ 6706a7b8
...@@ -86,7 +86,19 @@ live: { ...@@ -86,7 +86,19 @@ live: {
}, },
sigurature:function(data){ sigurature:function(data){
return service.post('/upload/sigurature/'+11, data) return service.post('/upload/sigurature/'+11, data)
} },
followAnchor:function(data){
return service.post('/app/live/followAnchor', data)
},
getLiveHistory:function(data){
return service.post('/app/live/getLiveHistory', data)
},
getFollowAnchor:function(data){
return service.post('/app/live/getFollowAnchor', data)
},
......
src/views/fullScreen.vue
View file @ 6706a7b8
...@@ -511,8 +511,9 @@ export default { ...@@ -511,8 +511,9 @@ export default {
this.lvrId=res.data.data.lvrId//直播间id this.lvrId=res.data.data.lvrId//直播间id
this.lvrUbId=res.data.data.lvrUbId//主播id this.lvrUbId=res.data.data.lvrUbId//主播id
// res.data.data.seeDuration // res.data.data.seeDuration
localStorage.setItem('lvrUbId',this.lvrUbId);
let timer=res.data.data.seeDuration let timer=res.data.data.seeDuration
console.log(this.lvrUbId,'主播')
console.log("token",token) console.log("token",token)
console.log("头像",img) console.log("头像",img)
......
src/views/mine/browse.vue
View file @ 6706a7b8
<template> <template>
<div class="cont"> <div class="biggestBox">
<img src="../../assets/left.png" alt="" class="Lent_p" @click="go"> <img src="../../assets/left.png" alt="" class="Lent_p" @click="go">
<div class="brow">我的浏览</div> <div class="brow">我的浏览</div>
<div class="time">一天之内</div> <div class="time">一天之内</div>
<div class="Flor" v-for="(item,index) in lists " data-type="0" :key="index" @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="oneself"> <ul>
<div><img src="../../assets/let.png" alt="" class="Pong"></div> <!-- data-type=0 隐藏删除按钮 data-type=1 显示删除按钮 -->
<div class="name"> <li class="li_vessel" v-for="(item,index) in lists " data-type="0" :key="index">
<div>{{item.title}}</div> <!-- "touchstart" 当手指触摸屏幕时候触发 "touchend" 当手指从屏幕上离开的时候触发 "capture" 用于事件捕获-->
<div class="Ti">{{item.name}}</div> <div @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="oneself">
<div class="Ti">{{item.time}}</div> <div class="contant">
<img class="image" :src="item.lvrImgSmallUrl" alt />
<div class="rightBox">
<div class="titl">{{item.lvrUbName}}</div>
<div class="name">{{item.lvrName}}</div>
<div> </div>
<div class="Time">{{item.updateTime}}</div>
</div> </div>
<div class="removeBtn" @click="remove" :data-index="index">删除</div>
</div> </div>
<div class="timetwo">更早</div>
<div class="Flor">
<div><img src="../../assets/let.png" alt="" class="Pong"></div>
<div class="name">
<div>行业时间</div>
<div class="Ti">林秋平</div>
<div class="Ti">今天:9:30</div>
</div> </div>
<div class="removeBtn" @click="remove" :data-index="index">删除</div>
</li>
</ul>
<!-- 更早 -->
<ul v-if="updateTime">
<div class="timetwo">更早</div>
<li class="li_vessel" v-for="(item,index) in lists " data-type="0" :key="index">
<!-- "touchstart" 当手指触摸屏幕时候触发 "touchend" 当手指从屏幕上离开的时候触发 "capture" 用于事件捕获-->
<div @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="oneself">
<div class="contant">
<img class="image" :src="item.lvrImgSmallUrl" alt />
<div class="rightBox">
<div class="titl">{{item.lvrUbName}}</div>
<div class="name">{{item.lvrName}}</div>
<div> </div>
<div class="Time">{{item.updateTime}}</div>
</div> </div>
<div class="Flor">
<div><img src="../../assets/let.png" alt="" class="Pong"></div>
<div class="name">
<div>行业时间</div>
<div class="Ti">林秋平</div>
<div class="Ti">今天:9:30</div>
</div> </div>
</div> </div>
<div class="removeBtn" @click="remove" :data-index="index">删除</div>
</li>
</ul>
</div> </div>
</template> </template>
<script type="text/ecmascript-6"> <script type="text/ecmascript-6">
export default { export default {
data () { data() {
return { return {
lists: [
],
startX: 0, //滑动开始 startX: 0, //滑动开始
endX: 0, //滑动结束 endX: 0, //滑动结束
lists:[ updateTime:''
{ };
title: "行业时间",
name: "副标题2",
time: "￥58.00",
}
]
}
}, },
created () { }, created () { },
mounted () { mounted () {
this.beforeCreate() this.beforeCreate()
this.getLiveHistory()
}, },
methods: { methods: {
go:function(){
this.$router.push({name:'mine'})
},
beforeCreate () {
document.querySelector('body').setAttribute('style', 'background-color:rgba(247, 247, 247, 1);')
},
beforeDestroy () {
document.querySelector('body').removeAttribute('style')
},
getLiveHistory(){
let token=sessionStorage.getItem("token")
let temp=this.qs.stringify({
token:token,
applicationType:4
})
this.server.live.getLiveHistory(temp).then(res=>{
this.lists =res.data.data.list
this.listtwo=res.data.data.list
this.updateTime=res.data.data.list.updateTime
console.log(this.lvrUbId,'-=----------------')
})
},
// 向左滑动出现删除按钮时，点击商品信息区域取消删除 // 向左滑动出现删除按钮时，点击商品信息区域取消删除
oneself() { oneself() {
if (this.checkSlide()) { if (this.checkSlide()) {
this.restSlide(); this.restSlide();
} else { } else {
// 点击商品信息弹出弹框 // 点击商品信息弹出弹框
alert("hello Word!"); console.log("点击当前商品触发事件...");
} }
}, },
//滑动开始 //滑动开始
...@@ -114,18 +150,8 @@ export default { ...@@ -114,18 +150,8 @@ export default {
// 删除数组lists中一个数据 // 删除数组lists中一个数据
this.lists.splice(index, 1); this.lists.splice(index, 1);
}, },
go:function(){
this.$router.push({name:'mine'})
},
beforeCreate () {
document.querySelector('body').setAttribute('style', 'background-color:rgba(247, 247, 247, 1);')
}, },
beforeDestroy () {
document.querySelector('body').removeAttribute('style')
}
}
} }
...@@ -149,7 +175,56 @@ export default { ...@@ -149,7 +175,56 @@ export default {
} }
.time{
font-size: 4.26667vw;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #2C2C2C;
line-height: 5.86667vw;
margin-left: 20px;
}
.sent{
display: flex;
}
.Lent_p{
width: 5.93333vw;
height: 5.33333vw;
position: absolute;
top: 3.06667vw;
left: 7px;
}
.titl{
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #2C2C2C;
margin-bottom: 7px;
}
.name{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
margin-bottom: 6px;
}
.Time{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
}
.brow{
text-align:center;
margin-top: 10px;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #222222;
line-height: 22px;
margin-bottom: 20px;
}
.brow{ .brow{
text-align:center; text-align:center;
margin-top: 10px; margin-top: 10px;
...@@ -222,5 +297,117 @@ export default { ...@@ -222,5 +297,117 @@ export default {
line-height: 27.46667vw; line-height: 27.46667vw;
text-align: center; text-align: center;
border-radius: 0.53333vw; border-radius: 0.53333vw;
}
* {
/* 消除默认内外边距 */
margin: 0;
padding: 0;
}
body {
background: rgb(246, 245, 250);
}
.biggestBox {
overflow: hidden;
/*超出部分隐藏*/
}
ul {
/* 消除 ul 默认样式 */
list-style: none;
padding: 0;
margin: 0;
}
.li_vessel {
/* 全部样式 0.2秒 缓动*/
transition: all 0.2s;
}
/* =0隐藏 */
.li_vessel[data-type="0"] {
transform: translate3d(0, 0, 0);
}
/* =1显示 */
.li_vessel[data-type="1"] {
/* -64px 设置的越大可以左滑的距离越远，最好与下面删除按钮的宽度以及定位的距离设置一样的值*/
transform: translate3d(-64px, 0, 0);
}
/* 删除按钮 */
.li_vessel .removeBtn {
width: 64px;
height: 103px;
background: #ff4949;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 22px;
position: absolute;
top: 0px;
right: -64px;
line-height: 103px;
text-align: center;
border-radius: 2px;
}
/* 左边的图片样式 */
.contant {
overflow: hidden;
margin-left: 10px;
margin-right: 10px;
/*消除图片带来的浮动*/
padding: 10px;
background: #ffffff;
margin-bottom: 20px;
}
.contant .image {
width: 149px;
height: 74px;
border-radius: 4px;
float: left;
}
/* 右边的文字信息样式 */
.rightBox {
overflow: hidden;
padding-left: 8px;
}
.rightBox div:first-child {
font-weight: bold;
}
.rightBox div:nth-child(2) {
margin-top: 4px;
font-size: 14px;
}
/* .rightBox div:nth-child(3) {
width: 36px;
background: rgb(219, 91, 113);
color: white;
font-size: 12px;
text-align: center;
padding: 2px 4px 2px 4px;
margin-left: auto;
} */
.rightBox div:last-child {
/* color: red;
font-size: 14px;
font-weight: bold; */
}
.timetwo{
font-size: 4.26667vw;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #2C2C2C;
line-height: 5.86667vw;
margin-left: 5.33333vw;
margin-top: 20px;
} }
</style> </style>
src/views/mine/follow.vue
View file @ 6706a7b8
...@@ -3,18 +3,19 @@ ...@@ -3,18 +3,19 @@
<img src="../../assets/left.png" alt="" class="Lent_p" @click="go"> <img src="../../assets/left.png" alt="" class="Lent_p" @click="go">
<div class="brow">我的关注</div> <div class="brow">我的关注</div>
<div class="Flor"> <div class="Flor" v-for="(item,index) in List_p" :key="index">
<div style="display:flex"> <div style="display:flex">
<img src="../../assets/toux.png" alt="" class="Pong"> <img :src="item.udPhotoFileidNew" alt="" class="Pong">
<div class="name"> <div class="name">
<div>林秋平</div> <div>{{item.udNickname}}</div>
<div class="Ti">文字</div> <div class="Ti">{{item.udSxMemo}}</div>
</div> </div>
</div> </div>
<div class="J_go"> <div class="J_go">
<img src="../../assets/follow.png" alt="" class="Img_s" @click="fotwo" v-if="isactiveTwo">
<img src="../../assets/vit.png" alt="" class="Img_s" @click="fo" v-if="isactive"> <img v-if='item.ifFllow==true' src="../../assets/vit.png" alt="" class="Img_s" @click="fotwo(index)" >
<img v-if='item.ifFllow==false' src="../../assets/follow.png" alt="" class="Img_s" @click="fo(index)" >
</div> </div>
</div> </div>
...@@ -29,27 +30,64 @@ export default { ...@@ -29,27 +30,64 @@ export default {
data () { data () {
return { return {
isactive:false, isactive:false,
isactiveTwo:true isactiveTwo:true,
List_p:[],
lvrUbId :''
} }
}, },
created () { }, created () { },
mounted () { mounted () {
this.beforeCreate() this.beforeCreate()
this.getFollowAnchor()
}, },
methods: { methods: {
fotwo:function(){ fotwo:function(e){
this.List_p[e].ifFllow=false
this.isactiveTwo = false; this.isactiveTwo = false;
this.isactive = true; this.isactive = true;
this.followAnchor()
}, },
fo:function(){ fo:function(e){
this.List_p[e].ifFllow=true
this.isactiveTwo = true; this.isactiveTwo = true;
this.isactive = false; this.isactive = false;
this.followAnchor()
}, },
go:function(){ go:function(){
this.$router.push({name:'mine'}) this.$router.push({name:'mine'})
},
followAnchor(){
this.lvrUbId=localStorage.getItem('lvrUbId');//直播id
console.log(this.lvrUbId,'-=----------------')
let temp=this.qs.stringify({
lvrUbId:this.lvrUbId,
type:1,
applicationType:4
})
this.server.live.followAnchor(temp).then(res=>{
})
},
getFollowAnchor(){
let temp=this.qs.stringify({
// lvrUbId:26,
// type:1,
// applicationType:4
})
this.server.live.getFollowAnchor(temp).then(res=>{
let list=res.data.data.list
list.forEach(i => {
i.ifFllow=true
});
this.List_p= list
console.log(this.lvrUbId,'-=----------------')
})
}, },
beforeCreate () { beforeCreate () {
document.querySelector('body').setAttribute('style', 'background-color:rgba(247, 247, 247, 1);') document.querySelector('body').setAttribute('style', 'background-color:rgba(247, 247, 247, 1);')
...@@ -141,10 +179,21 @@ export default { ...@@ -141,10 +179,21 @@ export default {
color: #2C2C2C; color: #2C2C2C;
} }
.name .Ti{ .name .Ti{
font-size: 14px; font-size: 3.73333vw;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
line-height: 20px; line-height: 5.33333vw;
overflow: hidden;
height: 61px;
/* color: #999999; */
font-size: 24rpx;
text-overflow: ellipsis;
z-index: -1;
display: -webkit-box;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
} }
</style> </style>
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