Skip to content

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

我的关注和我的浏览

parent ca90a0ab
Hide 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: {
},
sigurature:function(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 {
this.lvrId=res.data.data.lvrId//直播间id
this.lvrUbId=res.data.data.lvrUbId//主播id
// res.data.data.seeDuration
localStorage.setItem('lvrUbId',this.lvrUbId);
let timer=res.data.data.seeDuration
console.log(this.lvrUbId,'主播')
console.log("token",token)
console.log("头像",img)
......
src/views/mine/browse.vue
View file @ 6706a7b8
<template>
<div class="cont">
<img src="../../assets/left.png" alt="" class="Lent_p" @click="go">
<div class="biggestBox">
<img src="../../assets/left.png" alt="" class="Lent_p" @click="go">
<div class="brow">我的浏览</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">
<div><img src="../../assets/let.png" alt="" class="Pong"></div>
<div class="name">
<div>{{item.title}}</div>
<div class="Ti">{{item.name}}</div>
<div class="Ti">{{item.time}}</div>
</div>
<div class="removeBtn" @click="remove" :data-index="index">删除</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="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>
<ul>
<!-- data-type=0 隐藏删除按钮 data-type=1 显示删除按钮 -->
<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>
<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>
<div class="removeBtn" @click="remove" :data-index="index">删除</div>
</li>
</ul>
</div>
</template>
<script type="text/ecmascript-6">
export default {
data () {
return {
startX: 0, //滑动开始
endX: 0, //滑动结束
lists:[
{
title: "行业时间",
name: "副标题2",
time: "￥58.00",
}
]
}
},
data() {
return {
lists: [
],
startX: 0, //滑动开始
endX: 0, //滑动结束
updateTime:''
};
},
created () { },
mounted () {
this.beforeCreate()
this.getLiveHistory()
},
methods: {
// 向左滑动出现删除按钮时，点击商品信息区域取消删除
oneself() {
if (this.checkSlide()) {
this.restSlide();
} else {
// 点击商品信息弹出弹框
alert("hello Word!");
}
},
//滑动开始
touchStart(e) {
// 记录初始位置
this.startX = e.touches[0].clientX;
},
//滑动结束
touchEnd(e) {
// 当前滑动的父级元素
let parentElement = e.currentTarget.parentElement;
// 记录结束位置
this.endX = e.changedTouches[0].clientX;
// 左滑大于30距离删除出现
if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
this.restSlide();
parentElement.dataset.type = 1;
}
// 右滑
if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
this.restSlide();
parentElement.dataset.type = 0;
}
this.startX = 0;
this.endX = 0;
},
//判断当前是否有滑块处于滑动状态
checkSlide() {
let listItems = document.querySelectorAll(".li_vessel");
for (let i = 0; i < listItems.length; i++) {
if (listItems[i].dataset.type == 1) {
return true;
}
}
return false;
},
//复位滑动状态
restSlide() {
let listItems = document.querySelectorAll(".li_vessel");
// 复位
for (let i = 0; i < listItems.length; i++) {
listItems[i].dataset.type = 0;
}
},
//删除数据信息
remove(e) {
// 当前索引值
let index = e.currentTarget.dataset.index;
// 复位
this.restSlide();
// 删除数组lists中一个数据
this.lists.splice(index, 1);
},
methods: {
go:function(){
this.$router.push({name:'mine'})
},
beforeCreate () {
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() {
if (this.checkSlide()) {
this.restSlide();
} else {
// 点击商品信息弹出弹框
console.log("点击当前商品触发事件...");
}
},
//滑动开始
touchStart(e) {
// 记录初始位置
this.startX = e.touches[0].clientX;
},
//滑动结束
touchEnd(e) {
// 当前滑动的父级元素
let parentElement = e.currentTarget.parentElement;
// 记录结束位置
this.endX = e.changedTouches[0].clientX;
// 左滑大于30距离删除出现
if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
this.restSlide();
parentElement.dataset.type = 1;
}
// 右滑
if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
this.restSlide();
parentElement.dataset.type = 0;
}
this.startX = 0;
this.endX = 0;
},
//判断当前是否有滑块处于滑动状态
checkSlide() {
let listItems = document.querySelectorAll(".li_vessel");
for (let i = 0; i < listItems.length; i++) {
if (listItems[i].dataset.type == 1) {
return true;
}
}
return false;
},
//复位滑动状态
restSlide() {
let listItems = document.querySelectorAll(".li_vessel");
// 复位
for (let i = 0; i < listItems.length; i++) {
listItems[i].dataset.type = 0;
}
}
},
//删除数据信息
remove(e) {
// 当前索引值
let index = e.currentTarget.dataset.index;
// 复位
this.restSlide();
// 删除数组lists中一个数据
this.lists.splice(index, 1);
},
},
}
......@@ -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{
text-align:center;
margin-top: 10px;
......@@ -222,5 +297,117 @@ export default {
line-height: 27.46667vw;
text-align: center;
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>
src/views/mine/follow.vue
View file @ 6706a7b8
......@@ -3,18 +3,19 @@
<img src="../../assets/left.png" alt="" class="Lent_p" @click="go">
<div class="brow">我的关注</div>
<div class="Flor">
<div class="Flor" v-for="(item,index) in List_p" :key="index">
<div style="display:flex">
<img src="../../assets/toux.png" alt="" class="Pong">
<img :src="item.udPhotoFileidNew" alt="" class="Pong">
<div class="name">
<div>林秋平</div>
<div class="Ti">文字</div>
<div>{{item.udNickname}}</div>
<div class="Ti">{{item.udSxMemo}}</div>
</div>
</div>
<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">
<div class="J_go">
<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>
......@@ -29,28 +30,65 @@ export default {
data () {
return {
isactive:false,
isactiveTwo:true
isactiveTwo:true,
List_p:[],
lvrUbId :''
}
},
created () { },
mounted () {
this.beforeCreate()
this.getFollowAnchor()
},
methods: {
fotwo:function(){
fotwo:function(e){
this.List_p[e].ifFllow=false
this.isactiveTwo = false;
this.isactive = true;
this.followAnchor()
},
fo:function(){
this.isactiveTwo = true;
this.isactive = false;
fo:function(e){
this.List_p[e].ifFllow=true
this.isactiveTwo = true;
this.isactive = false;
this.followAnchor()
},
go:function(){
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 () {
document.querySelector('body').setAttribute('style', 'background-color:rgba(247, 247, 247, 1);')
},
......@@ -141,10 +179,21 @@ export default {
color: #2C2C2C;
}
.name .Ti{
font-size: 14px;
font-size: 3.73333vw;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
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>
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