Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
M
mallapp
Project
Project
Details
Activity
Releases
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
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
viitto
mallapp
Commits
62fcebba
Commit
62fcebba
authored
Sep 03, 2020
by
zhengke
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
增加视频播放
parent
6ac4e5e7
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
402 additions
and
1 deletion
+402
-1
pages.json
pages.json
+11
-1
index.vue
pages/video/index.vue
+391
-0
No files found.
pages.json
View file @
62fcebba
...
@@ -308,7 +308,17 @@
...
@@ -308,7 +308,17 @@
"pages"
:
[{
"pages"
:
[{
"path"
:
"index"
"path"
:
"index"
}]
}]
}
},
//抖音商品短视频
{
"root"
:
"pages/video"
,
"pages"
:
[{
"path"
:
"index"
,
"style"
:
{
"navigationStyle"
:
"custom"
}
}]
}
],
],
"globalStyle"
:
{
"globalStyle"
:
{
"navigationBarTextStyle"
:
"black"
,
"navigationBarTextStyle"
:
"black"
,
...
...
pages/video/index.vue
0 → 100644
View file @
62fcebba
<
style
>
.video_Page
{
width
:
100%
;
height
:
100%
;
position
:
relative
;
}
.video_Page
.sharebox_top_nav
{
width
:
100%
;
display
:
flex
;
position
:
absolute
;
z-index
:
999
;
left
:
20px
;
}
.player-video
{
width
:
100%
;
/* height:100%; */
}
.video_Bottom
{
position
:
absolute
;
bottom
:
20px
;
right
:
15px
;
width
:
53%
;
height
:
42px
;
z-index
:
999
;
display
:
flex
;
justify-content
:
space-between
;
align-items
:
center
;
}
.good_Detail
{
width
:
50px
;
height
:
50px
;
}
.good_other
{
width
:
40px
;
height
:
40px
;
}
.video_detail
{
position
:
absolute
;
width
:
210px
;
height
:
65px
;
top
:
-80px
;
left
:
-230%
;
background-color
:
#fff
;
border-radius
:
5px
;
padding
:
5px
;
}
.video_Tra
{
width
:
0
;
height
:
0
;
border-left
:
7px
solid
transparent
;
border-right
:
7px
solid
transparent
;
border-top
:
10px
solid
#fff
;
position
:
absolute
;
top
:
-16px
;
left
:
18px
;
}
.video_cha
{
width
:
17px
;
height
:
17px
;
position
:
absolute
;
right
:
-5px
;
top
:
-5px
;
}
.video_Shop
{
display
:
flex
;
position
:
relative
;
}
.video_imgCt
{
width
:
55px
;
height
:
55px
;
margin-right
:
5px
;
}
.video_shopTitle
{
width
:
114px
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
display
:
-webkit-box
;
-webkit-line-clamp
:
2
;
-webkit-box-orient
:
vertical
;
font-size
:
11px
;
color
:
#111111
;
}
.video_price
{
color
:
#FF3F47
;
font-size
:
13px
;
margin-top
:
6px
;
}
.v_fx
{
width
:
40px
;
height
:
40px
;
border
:
none
;
outline
:
none
;
padding
:
0
;
margin
:
0
;
line-height
:
unset
;
background
:
none
;
}
.video_Page
button
:after
{
border
:
none
;
}
.vd-cover
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
}
video
::-webkit-media-controls
{
display
:
none
!important
;
}
</
style
>
<
template
>
<view
class=
"video_Page"
>
<view
class=
"sharebox_top_nav"
:style=
"
{top:nav+10+'px'}">
<view
class=
"arrow"
@
click=
"redirectPrev"
>
<u-icon
name=
"arrow-left"
size=
"48"
color=
"#fff"
></u-icon>
</view>
</view>
<swiper
:interval=
"3000"
:duration=
"100"
:vertical=
"true"
:current=
"videoIndex"
@
change=
"handleSlider"
:style=
"
{'height':swiperHeight}">
<block
v-for=
"(item,index) in vlist"
:key=
"index"
>
<swiper-item
style=
"width:100%;height:100%"
>
<view
class=
"uni_vdplayer"
>
<video
:id=
"'myVideo' + index"
:ref=
"'myVideo' + index"
v-if=
"index==hkindex||index==hkindex-1||index==hkindex+1"
class=
"player-video"
:loop=
"true"
:show-progress=
"true"
:controls=
"false"
:show-center-play-btn=
"false"
:style=
"
{'height':swiperHeight}" :src="item.video_url" autoplay="true" />
</view>
<!-- 中间播放按钮 -->
<view
class=
"vd-cover flexbox"
@
click=
"handleClicked(index)"
>
<image
v-if=
"!isPlay"
style=
"width:74px;height:74px;"
src=
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_pause.png"
></image>
</view>
</swiper-item>
</block>
</swiper>
<view
class=
"video_Bottom"
>
<view
style=
"position: relative;"
>
<template
v-if=
"isShowInfo"
>
<view
class=
"video_detail"
>
<view
class=
"video_Shop"
>
<view
class=
"video_imgCt"
>
<image
style=
"width:100%;height:100%;"
:src=
"comGoodImg"
/>
</view>
<view>
<view
class=
"video_shopTitle"
>
{{
comGoodTitle
}}
</view>
<view
class=
"video_price"
>
<text
style=
"font-size:10px;"
>
¥
</text>
{{
comGoodPrice
}}
</view>
</view>
<view
class=
"video_cha"
@
click=
"isShowInfo=false"
>
<image
style=
"width:100%;height:100%;"
src=
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_close.png"
></image>
</view>
</view>
</view>
<view
class=
"video_Tra"
></view>
</
template
>
<image
class=
"good_Detail"
@
click=
"getShowInfo()"
src=
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_goods.png"
></image>
</view>
<image
class=
"good_other"
@
click=
"goHome()"
src=
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_home.png"
></image>
<image
class=
"good_other"
@
click=
"getBuy()"
src=
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_buy.png"
></image>
<button
class=
"v_fx"
open-type=
"share"
>
<image
style=
"height:100%;width: 100%;"
src=
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_share.png"
></image>
</button>
</view>
<auth
v-if=
"showAuth"
@
changeuserinfo=
"reloadUserinfo"
@
gbAuth=
"gbAuth"
></auth>
<good-sku
v-if=
"showSku"
borderRadius=
"20"
v-model=
"showSku"
:good=
"sku"
:option-type=
"2"
></good-sku>
</view>
</template>
<
script
>
import
goodSku
from
"@/components/goods/goodsku"
;
import
auth
from
"@/components/auth/index"
;
export
default
{
data
()
{
return
{
vlist
:
[],
videoIndex
:
0
,
swiperHeight
:
0
,
GoodsId
:
0
,
//商品id
nav
:
0
,
changeIndex
:
0
,
goodObj
:{},
//商品对象
msg
:
{
pageIndex
:
1
,
pageSize
:
1
,
Name
:
''
,
GoodsType
:
0
,
CategoryIds
:
''
,
OrderBy
:
0
,
IsVideo
:
1
},
hkindex
:
0
,
isShowInfo
:
true
,
//显示商品弹窗
comGoodImg
:
''
,
//商品缩小图
comGoodTitle
:
''
,
//商品名称
comGoodPrice
:
''
,
//商品价格
showSku
:
false
,
sku
:
{},
showAuth
:
false
,
u
:
{},
isPlay
:
true
,
//当前视频是否播放中
}
},
components
:
{
goodSku
,
auth
},
onReady
(){
},
onLoad
(
option
){
console
.
log
(
option
,
'optionsss'
);
this
.
GoodsId
=
option
.
GoodsId
;
uni
.
getSystemInfo
({
//获取系统信息
success
:
(
res
)
=>
{
this
.
swiperHeight
=
res
.
windowHeight
+
'px'
},
fail
:
(
res
)
=>
{
console
.
log
(
'error'
)
}
})
this
.
vlist
=
[];
},
methods
:
{
//返回上一页
redirectPrev
()
{
uni
.
navigateBack
({
delta
:
1
,
});
},
// 滑动切换
handleSlider
(
e
)
{
console
.
log
(
e
);
this
.
hkindex
=
e
.
detail
.
current
;
let
videoContext
=
wx
.
createVideoContext
(
"myVideo"
+
e
.
detail
.
current
+
""
)
var
indx
=
e
.
detail
.
current
;
let
videoContexta
=
wx
.
createVideoContext
(
"myVideo"
+
indx
+
""
)
this
.
comGoodImg
=
this
.
vlist
[
this
.
hkindex
].
picUrl
;
this
.
comGoodTitle
=
this
.
vlist
[
this
.
hkindex
].
name
;
this
.
comGoodPrice
=
this
.
vlist
[
this
.
hkindex
].
price
;
this
.
GoodsId
=
this
.
vlist
[
this
.
hkindex
].
id
;
this
.
sku
=
this
.
vlist
[
this
.
hkindex
];
this
.
isPlay
=
true
;
videoContexta
.
pause
();
videoContexta
.
seek
(
0
);
videoContext
.
play
();
let
xz
=
this
.
vlist
.
length
-
e
.
detail
.
current
;
if
(
xz
==
1
)
{
this
.
msg
.
pageIndex
++
;
this
.
getList
();
//加载更多视频
}
},
//点击暂停
handleClicked
(
index
){
if
(
this
.
isPlay
){
this
.
pause
(
index
)
}
else
{
this
.
play
(
index
)
}
},
// 播放
play
(
index
)
{
let
videoContext
=
wx
.
createVideoContext
(
"myVideo"
+
index
,
this
)
videoContext
.
play
()
this
.
isPlay
=
true
},
// 暂停
pause
(
index
)
{
let
videoContext
=
wx
.
createVideoContext
(
"myVideo"
+
index
,
this
)
videoContext
.
pause
()
this
.
isPlay
=
false
},
//获取传递过来商品信息
getGoodInfo
(){
this
.
request2
(
{
url
:
"/api/AppletGoods/GetAppletGoodsInfo"
,
data
:
{
GoodsId
:
this
.
GoodsId
,
},
},
(
res
)
=>
{
if
(
res
.
resultCode
==
1
)
{
console
.
log
(
res
,
'商品'
);
this
.
goodObj
=
res
.
data
.
goods
;
let
obj
=
{
OriginalPrice
:
this
.
goodObj
.
original_price
,
id
:
this
.
goodObj
.
id
,
name
:
this
.
goodObj
.
name
,
picUrl
:
this
.
goodObj
.
cover_pic
,
price
:
this
.
goodObj
.
price
,
video_url
:
this
.
goodObj
.
video_url
}
this
.
vlist
.
push
(
obj
);
this
.
comGoodImg
=
this
.
goodObj
.
cover_pic
;
this
.
comGoodTitle
=
this
.
goodObj
.
name
;
this
.
comGoodPrice
=
this
.
goodObj
.
price
;
this
.
GoodsId
=
this
.
goodObj
.
id
;
this
.
sku
=
obj
;
}
else
{
}
}
);
},
//滚动加载的商品信息
getList
(){
this
.
request2
({
url
:
'/api/AppletGoods/GetAppletGoodsPageListForZY'
,
data
:
this
.
msg
},
res
=>
{
console
.
log
(
res
,
'resss'
);
if
(
res
.
resultCode
==
1
)
{
var
data
=
res
.
data
.
pageData
;
if
(
data
.
length
>
0
){
let
obj
=
{
OriginalPrice
:
data
[
0
].
original_price
,
id
:
data
[
0
].
id
,
name
:
data
[
0
].
name
,
picUrl
:
data
[
0
].
cover_pic
,
price
:
this
.
goodObj
.
price
,
video_url
:
data
[
0
].
video_url
}
this
.
vlist
.
push
(
obj
);
}
}
}
);
},
//回到首页
goHome
(){
uni
.
redirectTo
({
url
:
"/pages/index/index"
});
},
//加入购物车或购买
getBuy
(){
this
.
u
=
uni
.
getStorageSync
(
'mall_UserInfo'
);
console
.
log
(
this
.
u
,
'uuu'
);
if
(
!
this
.
u
)
{
this
.
u
=
{
nickName
:
'未登录'
,
avatarUrl
:
''
};
this
.
showAuth
=
true
;
}
else
{
this
.
showSku
=
true
;
}
},
reloadUserinfo
()
{
this
.
u
=
uni
.
getStorageSync
(
'mall_UserInfo'
);
},
//关闭登录窗口
gbAuth
()
{
this
.
showAuth
=
false
;
},
//分享
onShareAppMessage
(){
return
{
title
:
this
.
comGoodTitle
,
path
:
"/pages/video/index?GoodsId="
+
this
.
GoodsId
,
imageUrl
:
this
.
comGoodImg
};
},
//点击商品
getShowInfo
(){
this
.
isShowInfo
=!
this
.
isShowInfo
;
}
},
mounted
()
{
this
.
getGoodInfo
();
//获取传过来的数据
this
.
getList
();
},
created
(){
this
.
nav
=
uni
.
getMenuButtonBoundingClientRect
().
top
;
},
}
</
script
>
<
style
>
</
style
>
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