Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
M
mayi-mp-shop
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
程默
mayi-mp-shop
Commits
36fbe921
Commit
36fbe921
authored
Apr 07, 2020
by
程智春
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
直播
parent
1f5770ae
Hide whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
270 additions
and
133 deletions
+270
-133
src/api/live.js
+6
-1
src/components/livedModel/livedExplainingCommodities.vue
+20
-11
src/components/livedModel/livedGoodsDia.vue
+41
-24
src/components/livedModel/livedIsEnded.vue
+3
-2
src/components/livedModel/livedShareDia.vue
+15
-2
src/components/livedModel/livedposterDia.vue
+47
-12
src/components/livedModel/notStarted.vue
+14
-1
src/pages/index/index.vue
+2
-0
src/pages/live/index.vue
+11
-5
src/pages/liveOver/index.vue
+50
-29
src/pages/lived/index.vue
+61
-46
No files found.
src/api/live.js
View file @
36fbe921
...
...
@@ -72,5 +72,9 @@ export default {
//获取服务器时间戳
queryServerTimeNow
(){
return
requestGET
(
`
${
process
.
env
.
OLSHOP_URL
}
/liveBroadcastInfo/getServerTimeNow`
)
}
},
// 获取个人资料
getUserInfo
()
{
return
requestPOST
(
`
${
process
.
env
.
OLSHOP_URL
}
/user/get_user_info`
)
},
};
\ No newline at end of file
src/components/livedModel/livedExplainingCommodities.vue
View file @
36fbe921
...
...
@@ -9,7 +9,8 @@
:key="index"
@click="toGoodsInfo(item)"
>
<img
:src=
"item.productImgUrl"
alt
/>
<!--
<img
:src=
"item.productImgUrl"
alt
/>
-->
<image
:src=
"item.productImgUrl"
mode=
"aspectFill"
alt=
""
></image>
<p
class=
"num"
>
{{
item
.
number
}}
</p>
<div
class=
"explain"
v-if=
"item.upperScreenState==1"
>
讲解中
</div>
</div>
...
...
@@ -17,7 +18,8 @@
<!-- 左上角展示讲解中商品 -->
<div
class=
"fixedGoods"
v-else-if=
"showFixedGoods&&fixedGoodsList&&fixedGoodsList.length>0"
>
<div
class=
"goodsList"
v-for=
"(item,index) in fixedGoodsList"
:key=
"index"
@
click=
"toGoodsInfo(item)"
>
<img
:src=
"item.productImgUrl"
alt
/>
<!--
<img
:src=
"item.productImgUrl"
alt
/>
-->
<image
:src=
"item.productImgUrl"
mode=
"aspectFill"
alt=
""
></image>
<!--
<p
class=
"num"
>
{{
item
.
number
}}
</p>
-->
<div
class=
"explain"
v-if=
"item.upperScreenState==1"
>
讲解中
</div>
<p
class=
"price"
v-if=
"item.minPrice"
>
...
...
@@ -40,12 +42,14 @@ export default {
list
:
[],
// 讲解中浮动商品
fixedGoodsList
:
[],
firstCom
:
true
//首次进入
firstCom
:
true
,
//首次进入
liveId
:
0
,
};
},
watch
:
{
updateGoods
()
{
console
.
log
(
this
.
goodsList
,
'---------------------------------46goodsList'
)
console
.
log
(
this
.
firstCom
,
'this.firstCom----------'
)
if
(
this
.
firstCom
==
true
)
{
this
.
list
=
[];
this
.
firstCom
=
false
;
...
...
@@ -54,11 +58,12 @@ export default {
this
.
goodsList
.
forEach
((
item
,
index
)
=>
{
if
(
item
.
upperScreenState
==
1
)
{
arr1
.
push
(
item
);
}
else
if
(
item
.
upperScreenState
==
0
)
{
}
else
if
(
item
.
upperScreenState
==
0
||
item
.
upperScreenState
==
2
)
{
arr2
.
push
(
item
);
}
});
this
.
list
=
[...
arr1
,
...
arr2
];
console
.
log
(
this
.
list
,
'--------------------------------this.list1212'
)
setTimeout
(()
=>
{
this
.
fixedGoodsList
=
arr1
?
arr1
:
[];
this
.
showFixedGoods
=
true
;
...
...
@@ -81,7 +86,10 @@ export default {
components
:
{},
computed
:
{},
created
()
{},
onLoad
()
{},
onLoad
(
options
)
{
let
params
=
JSON
.
parse
(
options
.
params
);
this
.
liveId
=
params
.
liveId
;
},
onUnload
()
{
this
.
fixedGoodsList
=
[];
this
.
showFixedGoods
=
false
;
...
...
@@ -206,9 +214,9 @@ img {
border
:
1px
solid
#949494
;
margin-right
:
10px
;
overflow
:
hidden
;
im
g
{
width
:
100%
;
height
:
100%
;
im
age
{
width
:
30vw
;
height
:
30vw
;
object-fit
:
cover
;
}
.num
{
...
...
@@ -242,14 +250,15 @@ img {
left
:
12px
;
.goodsList
{
width
:
22vw
;
border
:
1px
solid
#ff3334
;
//
border
:
1px
solid
#ff3334
;
margin-right
:
10px
;
overflow
:
hidden
;
margin-bottom
:
10px
;
position
:
relative
;
img
{
border-radius
:
2px
;
image
{
width
:
22vw
;
height
:
2
2
vw
;
height
:
2
8
vw
;
object-fit
:
cover
;
}
.num
{
...
...
src/components/livedModel/livedGoodsDia.vue
View file @
36fbe921
...
...
@@ -3,36 +3,46 @@
<van-popup
:show=
"showDia"
position=
"bottom"
custom-style=
"height: 50vh;
padding:14px;
border-top-left-radius:10px;border-top-right-radius:10px;"
custom-style=
"height: 50vh;border-top-left-radius:10px;border-top-right-radius:10px;"
:close-on-click-overlay=
"true"
@
close=
"closeDia"
>
<div
class=
"list"
v-if=
"list.length>0"
>
<div
class=
"item"
v-for=
"(item,index) in list"
:key=
"index"
>
<div
class=
"img"
@
click=
"toGoodsInfo(item)"
>
<div
class=
"num"
>
{{
item
.
number
}}
</div>
<img
v-if=
"item.productImgUrl"
:src=
"item.productImgUrl"
alt
/>
</div>
<div
class=
"info"
>
<p
class=
"name line-clamp2"
>
{{
item
.
productName
}}
</p>
<div
class=
"bottom"
>
<div
class=
"price"
>
<p>
<span>
¥
</span>
<span>
{{
item
.
minPrice
}}
</span>
</p>
<!--
<p
class=
"del"
>
<span>
¥
</span>
<span>
{{
999
}}
</span>
</p>
-->
</div>
<div
class=
"icon"
@
click=
"isLogin(item)"
>
<img
src=
"../../../static/images/lived/shopCart.png"
alt=
""
>
<div
class=
"tit"
v-if=
"list.length>0"
>
<span>
商品列表
</span>
<span>
(
{{
list
.
length
}}
)
</span>
</div>
<div
class=
"list"
v-if=
"list.length>0"
>
<div
class=
"item"
v-for=
"(item,index) in list"
:key=
"index"
>
<div
class=
"img"
@
click=
"toGoodsInfo(item)"
>
<div
class=
"num"
>
{{
item
.
number
}}
</div>
<!--
<img
v-if=
"item.productImgUrl"
:src=
"item.productImgUrl"
alt
/>
-->
<image
v-if=
"item.productImgUrl"
:src=
"item.productImgUrl"
mode=
"aspectFill"
alt=
""
></image>
</div>
<div
class=
"info"
>
<p
class=
"name line-clamp2"
>
{{
item
.
productName
}}
</p>
<div
class=
"bottom"
>
<div
class=
"price"
>
<p>
<span>
¥
</span>
<span>
{{
item
.
minPrice
}}
</span>
</p>
<!--
<p
class=
"del"
>
<span>
¥
</span>
<span>
{{
999
}}
</span>
</p>
-->
</div>
<div
class=
"icon"
@
click=
"isLogin(item)"
>
<img
src=
"../../../static/images/lived/shopCart.png"
alt=
""
>
</div>
</div>
</div>
</div>
</div>
</div>
<div
style=
"text-align:center;font-size:16px;padding-top:10px;"
v-else
>
暂无商品
</div>
</van-popup>
<!-- 选择规格弹层 -->
...
...
@@ -206,7 +216,14 @@ img{
display
:
block
;
}
.livedGoodsList
{
.tit
{
font-size
:
16px
;
padding
:
14px
14px
6px
14px
;
}
.list
{
overflow-y
:
auto
;
max-height
:
44vh
;
padding
:
0
14px
;
.item
{
padding
:
10px
4px
;
display
:
flex
;
...
...
@@ -218,7 +235,7 @@ img{
overflow
:
hidden
;
background
:
#999
;
position
:
relative
;
im
g
{
im
age
{
width
:
100%
;
height
:
100%
;
object-fit
:
cover
;
...
...
src/components/livedModel/livedIsEnded.vue
View file @
36fbe921
...
...
@@ -31,7 +31,8 @@
<div
class=
"item"
v-for=
"(item,index) in list"
:key=
"index"
:class=
"
{'itemBorder':index!=list.length-1}">
<div
class=
"img"
@
click=
"toGoodsInfo(item)"
>
<div
class=
"num"
>
{{
item
.
number
}}
</div>
<img
:src=
"item.productImgUrl"
alt
/>
<!--
<img
:src=
"item.productImgUrl"
alt
/>
-->
<image
:src=
"item.productImgUrl"
mode=
"aspectFill"
alt=
""
></image>
</div>
<div
class=
"info"
>
<p
class=
"name line-clamp2"
>
{{
item
.
productName
}}
</p>
...
...
@@ -283,7 +284,7 @@ export default {
border-radius
:
6px
;
overflow
:
hidden
;
position
:
relative
;
im
g
{
im
age
{
width
:
100%
;
height
:
100%
;
object-fit
:
cover
;
...
...
src/components/livedModel/livedShareDia.vue
View file @
36fbe921
...
...
@@ -30,6 +30,7 @@
v-if=
"againLoadingPoster"
:showPosterDia=
"showPosterDia"
:posterInfo=
"posterInfo"
:userInfo=
"userInfo"
@
closePosterDia=
"closePosterDia"
></livedposterDia>
</div>
...
...
@@ -50,7 +51,8 @@ export default {
backPath
:
""
,
showPosterDia
:
false
,
posterInfo
:
{},
againLoadingPoster
:
false
// 是否开始加载海报
againLoadingPoster
:
false
,
// 是否开始加载海报
userInfo
:
{},
};
},
components
:
{
...
...
@@ -96,9 +98,20 @@ export default {
query
.
qrCode
=
qrCode
.
replace
(
"http"
,
"https"
);
}
this
.
posterInfo
=
query
;
this
.
againLoadingPoster
=
true
;
live
.
getUserInfo
().
then
(
res1
=>
{
if
(
res1
.
data
.
code
==
'200'
){
res1
.
data
.
data
.
headPortraitUrl
=
DFSImg
(
res1
.
data
.
data
.
headPortraitUrl
)
this
.
userInfo
=
res1
.
data
.
data
;
this
.
againLoadingPoster
=
true
;
console
.
log
(
this
.
userInfo
)
console
.
log
(
'111111111111111111111111111'
)
}
})
}
});
},
initShare
()
{},
// 关闭
...
...
src/components/livedModel/livedposterDia.vue
View file @
36fbe921
...
...
@@ -7,7 +7,11 @@
@
close=
"closeDia"
>
<div
class=
"posterWrap"
@
click=
"closeDia"
>
<canvas
canvas-id=
"posterCanvas"
class=
"myCanvas"
></canvas>
<div
class=
"canvas-wrap"
>
<canvas
canvas-id=
"posterCanvas"
class=
"myCanvas"
></canvas>
<div
v-if=
"!posterStatus"
class=
"masker"
>
加载中...
</div>
</div>
<div
class=
"saveBtn"
@
click=
"getImg"
>
点击保存海报
</div>
</div>
</van-popup>
...
...
@@ -17,7 +21,7 @@
<
script
type=
"text/ecmascript-6"
>
import
live
from
"@/api/live"
;
export
default
{
props
:
[
"showPosterDia"
,
"posterInfo"
],
props
:
[
"showPosterDia"
,
"posterInfo"
,
"userInfo"
],
name
:
""
,
data
()
{
return
{
...
...
@@ -33,16 +37,20 @@ export default {
nickName
:
""
,
avatarUrl
:
""
,
miniCode
:
""
}
},
posterStatus
:
false
,
};
},
components
:
{},
computed
:
{},
onLoad
(
options
)
{
this
.
posterStatus
=
false
;
this
.
params
=
JSON
.
parse
(
options
.
params
);
this
.
liveId
=
this
.
params
.
liveId
;
console
.
log
(
this
.
userInfo
)
Object
.
assign
(
this
.
info
,
this
.
info
,
this
.
posterInfo
);
console
.
log
(
this
.
info
,
"--------------------35"
);
console
.
log
(
this
.
$store
.
state
)
this
.
init
();
},
created
()
{},
...
...
@@ -55,12 +63,13 @@ export default {
// wx.showLoading({
// title: "生成中..."
// });
this
.
$set
(
this
.
info
,
'avatarUrl'
,
this
.
userInfo
.
headPortraitUrl
)
// this.info.avatarUrl = this.userInfo.headPortraitUrl
let
_this
=
this
;
wx
.
getUserInfo
({
//获取微信用户信息
success
:
function
(
res
)
{
(
_this
.
info
.
nickName
=
res
.
userInfo
.
nickName
),
(
_this
.
info
.
avatarUrl
=
res
.
userInfo
.
avatarUrl
),
_this
.
initPoster
(
_this
.
info
);
},
fail
:
function
(
res
)
{
...
...
@@ -80,6 +89,8 @@ export default {
//封面
this
.
saveThe
(
info
.
posterCoverUrl
,
path
=>
{
console
.
log
(
this
.
info
)
console
.
log
(
'0000000000000000000000封面'
)
ctx
.
drawImage
(
path
,
0
,
0
,
310
*
bili
,
370
*
bili
);
ctx
.
save
();
// 微信昵称
...
...
@@ -111,6 +122,7 @@ export default {
ctx
.
save
();
ctx
.
stroke
();
ctx
.
draw
();
this
.
posterStatus
=
true
;
console
.
log
(
"--------海报生成成功"
);
});
});
...
...
@@ -124,16 +136,20 @@ export default {
console
.
log
(
res
.
path
,
"--------------------131"
);
callback
(
res
.
path
);
},
fail
:
function
(
res
)
{}
fail
:
function
(
res
)
{
console
.
log
(
'saveTheFail ___________________________'
,
res
)
}
});
},
getImg
()
{
let
query
=
{
liveBroadcastId
:
this
.
liveId
,
shareType
:
"HB"
};
live
.
addShareRecord
(
query
).
then
();
this
.
handleSave
();
if
(
this
.
posterStatus
){
let
query
=
{
liveBroadcastId
:
this
.
liveId
,
shareType
:
"HB"
};
live
.
addShareRecord
(
query
).
then
();
this
.
handleSave
();
}
},
// 点击保存时,将画布生成海报
handleSave
()
{
...
...
@@ -269,12 +285,31 @@ export default {
min-height
:
calc
(
100vh
-
80px
);
padding-top
:
80px
;
//
background-color
:
#f1f1f1
;
.
myCanvas
{
.
canvas-wrap
{
width
:
310px
;
height
:
520px
;
margin
:
0
auto
;
background
:
#fff
;
position
:
relative
;
.myCanvas
{
width
:
100%
;
height
:
100%
;
background
:
#fff
;
}
.masker
{
width
:
100%
;
height
:
100%
;
position
:
absolute
;
top
:
0
;
left
:
0
;
background-color
:
white
;
text-align
:
center
;
line-height
:
520px
;
font-size
:
16px
;
color
:
#666
;
}
}
.saveBtn
{
margin
:
0
auto
;
margin-top
:
20px
;
...
...
src/components/livedModel/notStarted.vue
View file @
36fbe921
<
template
>
<div
class=
"notStarted"
>
<div
class=
"title"
>
{{
info
.
title
}}
</div>
<p
class=
"tit"
>
直播倒计时
</p>
<div
class=
"time"
>
<timeDown
v-if=
"startTime"
:startTime=
"startTime"
></timeDown>
...
...
@@ -30,6 +31,7 @@ export default {
this
.
liveId
=
params
.
liveId
;
console
.
log
(
params
,
"--------------------126"
);
this
.
startTime
=
this
.
info
.
startTime
;
console
.
log
(
this
.
info
)
},
mounted
()
{},
methods
:
{
...
...
@@ -72,6 +74,11 @@ export default {
},
fail
(
res
)
{
console
.
log
(
"message fail response: "
,
res
);
wx
.
showToast
({
title
:
res
,
icon
:
"none"
});
}
});
}
...
...
@@ -115,12 +122,18 @@ export default {
.notStarted
{
position
:
absolute
;
width
:
70vw
;
top
:
40
%
;
top
:
35
%
;
left
:
15vw
;
display
:
flex
;
flex-direction
:
column
;
justify-content
:
center
;
align-items
:
center
;
.title{
font-size
:
18px
;
font-weight
:
bold
;
color
:
#fff
;
margin-bottom
:
20px
;
}
.tit
{
font-size
:
16px
;
color
:
#fff
;
...
...
src/pages/index/index.vue
View file @
36fbe921
...
...
@@ -91,9 +91,11 @@ export default {
}
else
if
(
options
.
from
&&
options
.
from
==
"livedToIndex"
)
{
//来自直播详情
this
.
page
=
decodeURIComponent
(
options
.
backpath
);
this
.
params
+=
"&"
+
serialize
(
options
.
params
);
}
else
if
(
options
.
from
&&
options
.
from
==
"livedBackShop"
)
{
//直播页back到商城
this
.
page
=
decodeURIComponent
(
options
.
backpath
);
this
.
params
+=
"&"
+
serialize
(
options
.
params
);
}
else
if
(
options
.
from
&&
options
.
from
==
"liveList"
){
//从主播端跳到商品
this
.
page
=
decodeURIComponent
(
options
.
backpath
);
...
...
src/pages/live/index.vue
View file @
36fbe921
...
...
@@ -13,6 +13,7 @@
:enable-mic=
"enableMic"
:remote-mirror=
"remoteMirror"
:local-mirror=
"remoteMirror"
:mirror=
"mirror"
style=
"width: 100%; height: 100vh;position:fixed;top:0;left:0;z-index:-1"
@
statechange=
"statechange"
@
error=
"binderror"
...
...
@@ -216,6 +217,8 @@ export default {
overOrStop
:
1
,
//是暂停还是结束
isDetailControlLock
:
true
,
mirror
:
false
,
}
},
watch
:{
...
...
@@ -424,6 +427,7 @@ export default {
//镜像
updateRemoteMirror
(
val
){
this
.
remoteMirror
=
val
;
this
.
mirror
=
val
==
'enable'
?
true
:
false
},
//麦克风
updateEnableMic
(
val
){
...
...
@@ -548,6 +552,7 @@ export default {
this
.
noStartLive
=
false
;
this
.
isSetBeauty
=
true
;
this
.
enableCamera
=
true
;
this
.
isDetailControlLock
=
false
;
this
.
isBgImg
=
false
;
this
.
pusher
.
startPreview
()
},
...
...
@@ -616,7 +621,7 @@ export default {
console
.
log
(
'开始直播'
)
this
.
pusher
.
start
();
//开始推流
this
.
isCountDown
=
false
;
this
.
isDetailControlLock
=
true
;
this
.
isSetBeauty
=
false
;
clearInterval
(
timer
)
this
.
changeLiveStatus
(
1
);
...
...
@@ -643,6 +648,7 @@ export default {
this
.
enableCamera
=
false
;
this
.
pusher
.
pause
();
}
this
.
isDetailControlLock
=
true
;
this
.
$set
(
this
.
liveInfo
,
'liveBroadcastState'
,
val
)
// this.pusher.resume();
...
...
@@ -684,11 +690,11 @@ export default {
beginTime
:
dataTime
,
//评论时间
userActivebeginTime
:
userTime
,
//用户进入时间
}).
then
(
res
=>
{
this
.
isTimeLock
=
true
;
if
(
res
.
data
.
code
==
'200'
){
this
.
isTimeFirstReq
=
false
;
this
.
isTimeLock
=
true
;
let
result
=
res
.
data
.
data
;
if
(
result
.
liveState
==
'IN_LIVE'
||
result
.
liveState
==
'SUSPEND_LIVE'
||
result
.
liveState
==
'NO
_LIVE'
){
// if(result.liveState == 'IN_LIVE' || result.liveState == 'SUSPEND_LIVE' || result.liveState == 'NO_LIVE' || result.liveState == 'PAUSE
_LIVE'){
//用户通知
this
.
entryNoticeText
=
""
;
if
(
result
.
entryNoticeList
.
length
>
0
)
{
...
...
@@ -719,7 +725,7 @@ export default {
}
this
.
updateVal
=
new
Date
().
getTime
();
//监听使用数据
}
//
}
}
})
}
else
{
...
...
@@ -763,7 +769,7 @@ export default {
},
//获取商品列表
getProductList
(){
liveApi
.
queryProductList
({
id
:
this
.
liveId
}).
then
(
res
=>
{
liveApi
.
queryProductList
({
id
:
this
.
liveId
,
pageNum
:
0
,
pageSize
:
0
}).
then
(
res
=>
{
if
(
res
.
data
.
code
==
'200'
){
let
productIdArr
=
[]
...
...
src/pages/liveOver/index.vue
View file @
36fbe921
<
template
>
<div
class=
"container"
:style=
"
{'padding-top':navHeight +'px'}">
<div
class=
"masker"
></div>
<image
class=
"bg-img"
:src=
"overInfo.coverUrl"
mode=
"aspectFill"
alt=
""
></image>
<navBar
:navTop=
"navTop"
:liveInfo=
"liveInfo"
:navHeight=
"navHeight"
:type=
"type"
></navBar>
<div
class=
"live-over"
>
<div
class=
"over-text"
>
直播已结束
</div>
<div
class=
"live-time"
>
直播时长:
{{
overInfo
.
liveTime
}}
</div>
</div>
<div
class=
"live-info"
>
<div
class=
"info-row item-row-one"
>
<div
class=
"info-item"
>
<div
class=
"item-num"
>
{{
overInfo
.
watchNum
}}
</div>
<div
class=
"item-text"
>
观看
</div>
</div>
<div
class=
"info-item"
>
<div
class=
"item-num"
>
{{
overInfo
.
goodsClickNum
}}
</div>
<div
class=
"item-text"
>
商品点击
</div>
</div>
<div
class=
"conbox"
>
<div
class=
"live-over"
>
<div
class=
"over-text"
>
直播已结束
</div>
<div
class=
"live-time"
>
直播时长:
{{
overInfo
.
liveTime
}}
</div>
</div>
<div
class=
"info-row"
>
<div
class=
"info-item"
>
<div
class=
"item-num"
>
{{
overInfo
.
shareNum
}}
</div>
<div
class=
"item-text"
>
分享
</div>
</div>
<div
class=
"info-item"
>
<div
class=
"item-num"
>
{{
overInfo
.
guestBookNum
}}
</div>
<div
class=
"item-text"
>
评论
</div>
<div
class=
"live-info"
>
<div
class=
"info-row item-row-one"
>
<div
class=
"info-item"
>
<div
class=
"item-num"
>
{{
overInfo
.
watchNum
}}
</div>
<div
class=
"item-text"
>
观看
</div>
</div>
<div
class=
"info-item"
>
<div
class=
"item-num"
>
{{
overInfo
.
goodsClickNum
}}
</div>
<div
class=
"item-text"
>
商品点击
</div>
</div>
</div>
<div
class=
"info-item"
>
<div
class=
"item-num"
>
{{
overInfo
.
likeNum
}}
</div>
<div
class=
"item-text"
>
赞
</div>
<div
class=
"info-row"
>
<div
class=
"info-item"
>
<div
class=
"item-num"
>
{{
overInfo
.
shareNum
}}
</div>
<div
class=
"item-text"
>
分享
</div>
</div>
<div
class=
"info-item"
>
<div
class=
"item-num"
>
{{
overInfo
.
guestBookNum
}}
</div>
<div
class=
"item-text"
>
评论
</div>
</div>
<div
class=
"info-item"
>
<div
class=
"item-num"
>
{{
overInfo
.
likeNum
}}
</div>
<div
class=
"item-text"
>
赞
</div>
</div>
</div>
</div>
</div>
<navBar
:navTop=
"navTop"
:liveInfo=
"liveInfo"
:navHeight=
"navHeight"
:type=
"type"
></navBar>
</div>
</
template
>
...
...
@@ -116,13 +120,30 @@ export default {
position
:
fixed
;
top
:
0
;
left
:
0
;
.conbox{
width
:
100%
;
height
:
100vh
;
position
:
fixed
;
top
:
0
;
left
:
0
;
z-index
:
10
;
}
.masker
{
width
:
100%
;
height
:
100vh
;
position
:
fixed
;
top
:
0
;
left
:
0
;
z-index
:
1
;
background-color
:
rgba
(
102
,
102
,
102
,
.38
);
}
.bg-img
{
width
:
100%
;
height
:
100vh
;
position
:
fixed
;
top
:
0
;
left
:
0
;
z-index
:
-1
;
background-color
:
rgba
(
102
,
102
,
102
,
.38
)
;
}
.live-over
{
color
:
white
;
...
...
src/pages/lived/index.vue
View file @
36fbe921
...
...
@@ -2,7 +2,8 @@
<div
class=
"lived"
>
<!-- 背景(未开始&&已结束) -->
<div
class=
"bgImg"
v-if=
"liveNoticeInfo.coverUrl&&liveNoticeInfo.liveBroadcastState!=1"
>
<img
:src=
"liveNoticeInfo.coverUrl"
alt
/>
<!--
<img
:src=
"liveNoticeInfo.coverUrl"
alt
/>
-->
<image
:src=
"liveNoticeInfo.coverUrl"
mode=
"aspectFill"
alt=
""
></image>
</div>
<!-- 直播展示层 -->
<div
class=
"liveModel"
v-if=
"liveNoticeInfo.liveBroadcastState>-1"
>
...
...
@@ -121,12 +122,12 @@ export default {
spokesmanObj
:
{},
//分销员信息
navTop
:
0
,
navHeight
:
0
,
isTimeLock
:
true
,
//时间锁
isTimeLock
:
true
,
//时间锁
isTimeFirstReq
:
true
,
//第一次数据请求
isTimeFirstReq
:
true
,
//第一次数据请求
newCommentsTime
:
0
,
userActivebeginTime
:
0
,
newCommentsTime
:
0
,
userActivebeginTime
:
0
};
},
components
:
{
...
...
@@ -137,10 +138,10 @@ export default {
},
computed
:
{},
onLoad
(
options
)
{
console
.
log
(
'onLoad'
)
console
.
log
(
"onLoad"
);
this
.
isTimeLock
=
true
;
this
.
isTimeFirstReq
=
true
;
this
.
newCommentsTime
=
0
;
this
.
newCommentsTime
=
0
;
wx
.
setKeepScreenOn
({
keepScreenOn
:
true
});
...
...
@@ -180,7 +181,7 @@ export default {
});
}
this
.
init
();
// this.userEntry("IN");
// 通过分享进入直播间重新查询订阅消息配置
...
...
@@ -225,11 +226,11 @@ export default {
console
.
log
(
shareObj
,
"----------------168"
);
return
shareObj
;
},
onHide
(){
onHide
()
{
this
.
userEntry
(
"OUT"
);
},
onShow
(){
console
.
log
(
'onShow'
)
onShow
()
{
console
.
log
(
"onShow"
);
this
.
userEntry
(
"IN"
);
},
onUnload
()
{
...
...
@@ -262,14 +263,14 @@ export default {
?
DFSImg
(
this
.
liveNoticeInfo
.
coverUrl
)
:
""
;
this
.
liveNoticeInfo
.
shareUrl
=
this
.
liveNoticeInfo
.
coverUrl
?
DFSImg
(
this
.
liveNoticeInfo
.
coverUrl
,
500
,
400
)
?
DFSImg
(
this
.
liveNoticeInfo
.
coverUrl
,
500
,
400
)
:
""
;
this
.
getGoodsList
();
if
(
this
.
liveNoticeInfo
.
liveBroadcastState
==
2
)
{
// 调直播结束
this
.
endLived
();
}
else
{
console
.
log
(
'这里'
)
console
.
log
(
"这里"
);
this
.
timingGetInfo
();
}
if
(
this
.
liveNoticeInfo
.
liveBroadcastState
!=
2
&&
!
this
.
goodTiming
)
{
...
...
@@ -287,9 +288,14 @@ export default {
});
},
back
()
{
let
query
=
{
sessionid
:
wx
.
getStorageSync
(
"sessionid"
)
||
""
};
// 返回商城
wx
.
reLaunch
({
url
:
`../index/main?from=livedBackShop&backpath=
${
this
.
backPath
}
`
url
:
`../index/main?from=livedBackShop&backpath=
${
this
.
backPath
}
¶ms=
${
JSON
.
stringify
(
query
)}
`
});
},
// 是否登录
...
...
@@ -347,21 +353,24 @@ export default {
},
// 定时查询直播数据
timingGetInfo
(
serverTime
)
{
if
(
this
.
isTimeLock
)
{
if
(
this
.
isTimeLock
)
{
this
.
isTimeLock
=
false
;
let
dataTime
=
this
.
isTimeFirstReq
?
serverTime
-
2000
:
this
.
newCommentsTime
let
userTime
=
this
.
isTimeFirstReq
?
serverTime
-
2000
:
this
.
userActivebeginTime
let
dataTime
=
this
.
isTimeFirstReq
?
serverTime
-
2000
:
this
.
newCommentsTime
;
let
userTime
=
this
.
isTimeFirstReq
?
serverTime
-
2000
:
this
.
userActivebeginTime
;
// 前五秒
let
query
=
{
id
:
Number
(
this
.
liveId
),
beginTime
:
dataTime
,
userActivebeginTime
:
userTime
,
//用户进入时间
userActivebeginTime
:
userTime
//用户进入时间
};
live
.
getLiveStateById
(
query
).
then
(
res
=>
{
this
.
isTimeFirstReq
=
false
;
this
.
isTimeLock
=
true
;
if
(
res
.
data
.
code
==
200
)
{
let
resData
=
res
.
data
.
data
;
// 1、判断状态如果发生改变才init();
// 2、直播中给用户进入通知、评论、点赞数赋值
...
...
@@ -412,11 +421,17 @@ export default {
}
// console.log("resData.guestBookList---》", resData.guestBookList)
this
.
guestBookList
=
resData
.
guestBookList
;
//评论列表
if
(
resData
.
guestBookList
&&
resData
.
guestBookList
.
length
){
this
.
newCommentsTime
=
resData
.
guestBookList
[
resData
.
guestBookList
.
length
-
1
].
createTimeStamp
if
(
resData
.
guestBookList
&&
resData
.
guestBookList
.
length
)
{
this
.
newCommentsTime
=
resData
.
guestBookList
[
resData
.
guestBookList
.
length
-
1
].
createTimeStamp
;
}
if
(
resData
.
entryNoticeList
&&
resData
.
entryNoticeList
.
length
){
this
.
userActivebeginTime
=
resData
.
entryNoticeList
[
resData
.
entryNoticeList
.
length
-
1
].
createTimeStamp
if
(
resData
.
entryNoticeList
&&
resData
.
entryNoticeList
.
length
)
{
this
.
userActivebeginTime
=
resData
.
entryNoticeList
[
resData
.
entryNoticeList
.
length
-
1
].
createTimeStamp
;
}
this
.
likeInfo
=
resData
.
likeInfo
;
//点赞信息
// 直播中且接口直播中---主要操作
...
...
@@ -427,12 +442,12 @@ export default {
if
(
resData
.
entryNoticeList
.
length
==
1
)
{
this
.
entryNoticeText
=
`
${
resData
.
entryNoticeList
[
0
].
userName
}
`
;
//用户进入
}
else
{
this
.
entryNoticeText
=
`
${
resData
.
entryNoticeList
[
0
].
userName
}
等
${
resData
.
entryNoticeList
.
length
}
人`
;
//用户进入
this
.
entryNoticeText
=
`
${
resData
.
entryNoticeList
[
0
].
userName
}
等
${
resData
.
entryNoticeList
.
length
}
人`
;
//用户进入
}
}
this
.
updateVal
=
new
Date
().
getTime
();
//监听使用数据
}
else
{
// if (this.infoTiming) {
...
...
@@ -440,8 +455,8 @@ export default {
// }
}
});
}
else
{
console
.
log
(
'上次请求未结束,进行了下一次请求'
)
}
else
{
console
.
log
(
"上次请求未结束,进行了下一次请求"
);
}
},
// 获取商品列表
...
...
@@ -495,22 +510,22 @@ export default {
});
},
//服务器时间戳
getServerTimeNow
(){
live
.
queryServerTimeNow
().
then
(
res
=>
{
if
(
res
.
data
.
code
==
200
)
{
//定时查询数据
// this.timingGetInfo(res.data.data);
this
.
newCommentsTime
=
res
.
data
.
data
this
.
userActivebeginTime
=
res
.
data
.
data
console
.
log
(
'newCommentsTime'
,
this
.
newCommentsTime
)
// setTimeout(() => {
this
.
infoTiming
=
setInterval
(()
=>
{
this
.
timingGetInfo
(
res
.
data
.
data
);
},
2000
);
// }, 2000);
}
})
getServerTimeNow
()
{
live
.
queryServerTimeNow
().
then
(
res
=>
{
if
(
res
.
data
.
code
==
200
)
{
//定时查询数据
// this.timingGetInfo(res.data.data);
this
.
newCommentsTime
=
res
.
data
.
data
;
this
.
userActivebeginTime
=
res
.
data
.
data
;
console
.
log
(
"newCommentsTime"
,
this
.
newCommentsTime
);
// setTimeout(() => {
this
.
infoTiming
=
setInterval
(()
=>
{
this
.
timingGetInfo
(
res
.
data
.
data
);
},
2000
);
// }, 2000);
}
});
},
error
(
res
)
{
console
.
log
(
res
,
"------------------237"
);
...
...
@@ -572,7 +587,7 @@ img {
bottom
:
0
;
right
:
0
;
z-index
:
-1
;
im
g
{
im
age
{
width
:
100%
;
height
:
100%
;
object-fit
:
cover
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment