Skip to content

Z
zhqg-mini
Commit 4af630f6 by wangyalan-git
Options

首页轮播图添加视频

parent f15b3804
Showing with 105 additions and 8 deletions
pages/index/index.js
......@@ -12,6 +12,7 @@ Page({
autoplay: true,
interval: 2000,
duration: 1000,
controls: false,
indexImgs: [],
seq: 0,
news: [],
......@@ -42,6 +43,28 @@ Page({
}
},
getVideoShow() {
var params = {
url: "/apiCommon/getBaseParamByCode",
method: "GET",
data: {
paramCode: 'is_show_home_video'
},
callBack: (res) => {
console.log('视频是否展示',res)
let isShow = JSON.parse(res.result.paramValue).isShow
console.log('rate', JSON.parse(res.result.paramValue))
this.setData({
isVideoShow: isShow? false: true
});
this.getIndexImgs()
},
errCallBack: (res)=>{
this.getIndexImgs()
}
};
http.request(params);
},
bound() {
var token = wx.getStorageSync('token');
if (token) {
......@@ -125,9 +148,11 @@ Page({
if (user && user.id) {
http.getCartCount(); //重新计算购物车总数量
}
this.getIndexImgs();
this.getVideoShow()
// this.getIndexImgs()
this.getNoticeList();
this.getTag();
},
//加载轮播图
getIndexImgs() {
......@@ -137,6 +162,17 @@ Page({
method: "GET",
data: {},
callBack: (res) => {
res.forEach((item, index) => {
if (index == 0 && this.data.isVideoShow) {
item.type = 1
item.video = 'https://zhqg.jsonpro.cn/images/video/c0d13902c3455b58d950a901d82dae86.mp4'
} else if (index == 1 && this.data.isVideoShow) {
item.type = 1
item.video = 'https://zhqg.jsonpro.cn/images/video/f1883d3f0aaa25907829b3033cfc5d11.mp4'
} else {
item.type = 0
}
})
this.setData({
indexImgs: res,
seq: res
......@@ -160,7 +196,22 @@ Page({
http.request(params);
},
// 播放
videoPlay: function (e) {
let video = e.currentTarget.dataset.video
console.log("开始播放")
var videoplay = wx.createVideoContext("video");
videoplay.play()
this.setData({
controls: true,
video: video
})
},
quiteVideo: function(res){
this.setData({
controls: false
})
},
// 加载商品标题分组列表
getTag() {
var params = {
......
pages/index/index.wxml
......@@ -11,15 +11,26 @@
<view class='content'>
<!-- swiper -->
<swiper autoplay="{{autoplay}}" indicator-color="{{indicatorColor}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{indicatorActiveColor}} " circular='true' class='pic-swiper' indicator-dots previous-margin='20rpx' next-margin='20rpx'>
<swiper wx:if="{{!controls}}" autoplay="{{autoplay}}" indicator-color="{{indicatorColor}}" interval="{{interval}}"
duration="{{duration}}" indicator-active-color="{{indicatorActiveColor}} " circular='true' class='pic-swiper'
indicator-dots previous-margin='20rpx' next-margin='20rpx'>
<block wx:for='{{indexImgs}}' wx:key='index'>
<swiper-item class="banner-item">
<view class='img-box'>
<image src='{{item.imgUrl}}' data-prodid='{{item.relation}}' bindtap='toProdPage' class='banner'></image>
<view class='videocover' data-id="{{index}}" bindtap='playbtn' wx:if="{{item.type==1}}">
<image src='/images/icon/playBtn.png' class='playbtn' bindtap="videoPlay" data-video="{{item.video}}">
</image>
</view>
<image src='{{item.imgUrl}}' data-prodid='{{item.relation}}' bindtap='toProdPage' class='banner' mode="aspectFill"></image>
</view>
</swiper-item>
</block>
</swiper>
<view wx:else class="my-video">
<video class='box-w block' id="video" src="{{video}}" show-center-play-btn="{{false}}"
autoplay='false' object-fit="fill" bindpause="quiteVideo" bindended="quiteVideo"
controls="true"></video>
</view>
<!-- end swiper -->
<view class='cat-item'>
......@@ -59,7 +70,8 @@
<view class='up-to-date' wx:if="{{item.style==2}}">
<view class='title'>
<text>{{item.title}}</text>
<view class='more-prod-cont' bindtap='toClassifyPage' data-sts="0" data-id="{{item.id}}" data-title="{{item.title}}">
<view class='more-prod-cont' bindtap='toClassifyPage' data-sts="0" data-id="{{item.id}}"
data-title="{{item.title}}">
<text class='more'>查看更多</text>
<!-- <text class='arrow'></text> -->
</view>
......@@ -88,7 +100,8 @@
<view class='hot-sale' wx:if="{{item.style==1}}">
<view class='title'>
<text>{{item.title}}</text>
<view class='more-prod-cont' bindtap='toClassifyPage' data-sts="0" data-id="{{item.id}}" data-title="{{item.title}}">
<view class='more-prod-cont' bindtap='toClassifyPage' data-sts="0" data-id="{{item.id}}"
data-title="{{item.title}}">
<text class='more'>更多</text>
<text class='arrow'></text>
</view>
......
pages/index/index.wxss
......@@ -19,7 +19,16 @@ swiper.pic-swiper {
background: #fff;
height: 422rpx;
}
.my-video{
padding: 10rpx 0;
margin-top: 75rpx;
width: 100%;
height: 422rpx;
}
.my-video .block{
width: 100%;
height: 422rpx;
}
swiper-item {
font-size: 26rpx;
font-weight: bold;
......@@ -28,6 +37,30 @@ swiper-item {
swiper.pic-swiper .img-box {
font-size: 0;
}
.videocover {
width: 100%;
overflow: hidden;
}
.videocoverbg {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
}
.playbtn {
position: absolute;
top: 50%;
z-index: 2;
left: 50%;
width: 50px;
height: 50px;
transform: translate(-50%, -50%);
}
.wx-swiper-dots {
margin-bottom: 15rpx;
......
pages/invite/invite.js
......@@ -244,7 +244,7 @@ Page({
//初始化画布
var context = wx.createCanvasContext('firstCanvas')
context.fillRect(0, 0, myCanvasWidth, myCanvasHeight)
context.drawImage("../../images/icon/poster@2x.png", myCanvasWidth / 2 - (myCanvasWidth / 2), myCanvasHeight / 2 - (myCanvasHeight / 2), myCanvasWidth, myCanvasHeight)
context.drawImage("../../images/icon/poster1@2x.png", myCanvasWidth / 2 - (myCanvasWidth / 2), myCanvasHeight / 2 - (myCanvasHeight / 2), myCanvasWidth, myCanvasHeight)
//下载头像变为本地地址
wx.getImageInfo({
src: that.data.userInfo.pic,
......
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