Browse Source

老兵在线增加视频banner;所有视频banner增加标题;

feature/optimise
ZhaoTongYao 5 years ago
parent
commit
a3a559f06b
  1. 99
      subpages/oneKeyService/pages/laobingzaixian/laobingzaixian.js
  2. 34
      subpages/oneKeyService/pages/laobingzaixian/laobingzaixian.wxml
  3. 145
      subpages/oneKeyService/pages/laobingzaixian/laobingzaixian.wxss
  4. 6
      subpages/oneKeyService/pages/warning/warning.js
  5. 11
      subpages/oneKeyService/pages/warning/warning.wxml
  6. 12
      subpages/oneKeyService/pages/warning/warning.wxss
  7. 8
      subpages/understandJs/pages/noticeDetail/noticeDetail.js
  8. 7
      subpages/understandJs/pages/noticeDetail/noticeDetail.wxml
  9. 11
      subpages/understandJs/pages/noticeDetail/noticeDetail.wxss

99
subpages/oneKeyService/pages/laobingzaixian/laobingzaixian.js

@ -11,13 +11,22 @@ Page({
deptList: [],
nodata: false,
loadMoreType: 'none',
loadMoreVisible: false
loadMoreVisible: false,
swiperBannerList: [],
indicatorDots: false, //指示点
autoplay: true, //true,//自动播放
circular: true, //衔接滑动
interval: 5000, //自动播放间隔时长(ms)
duration: 500, //幻灯片切换时长(ms)
currentSwiper: 0,
showTitle: true, //视频标题
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getBannerList('7')
this.getFullDictInfo()
},
@ -48,28 +57,76 @@ Page({
getFullDictInfo () {
const dictType = 'notice_yjfu_lbzx'
api.getFullDictInfo(dictType).then(res => {
console.log(res)
api.modulelist(dictType).then(res => {
this.setData({
deptList: [...this.data.deptList,...res.data],
loadMoreType: res.data.length === this.data.pageSize ? 'loading' : 'none',
loadMoreVisible: res.data.length === this.data.pageSize ? false : true
deptList: res.data,
})
if (this.data.deptList.length == 0) {
this.setData({
nodata: true,
loadMoreType: 'none',
loadMoreVisible: false,
})
}
}).catch(err => {
this.setData({
deptList: [],
nodata: true,
loadMoreType: 'none',
loadMoreVisible: false,
})
// api.getFullDictInfo(dictType).then(res => {
// console.log(res)
// this.setData({
// deptList: [...this.data.deptList,...res.data],
// loadMoreType: res.data.length === this.data.pageSize ? 'loading' : 'none',
// loadMoreVisible: res.data.length === this.data.pageSize ? false : true
// })
// if (this.data.deptList.length == 0) {
// this.setData({
// nodata: true,
// loadMoreType: 'none',
// loadMoreVisible: false,
// })
// }
// }).catch(err => {
// this.setData({
// deptList: [],
// nodata: true,
// loadMoreType: 'none',
// loadMoreVisible: false,
// })
// console.log(err)
// })
},
getBannerList: function(bannerNum) {
let that = this
api.bannerList(bannerNum).then(function(res) {
// console.log('res==', res.data)
that.setData({
swiperBannerList: res.data
})
console.log(err)
})
},
swiperChange: function(e) {
wx.createVideoContext('video'+this.data.currentSwiper).pause()
this.setData({
currentSwiper: e.detail.current,
autoplay: true
})
},
bindplay() {
this.setData({
autoplay: false
})
wx.getNetworkType({
success (res) {
const networkType = res.networkType
if (res.networkType != 'wifi') {
wx.showToast({
title: '当前为非WI-FI环境,请注意流量消耗',
icon: 'none',
duration: 3000
})
}
}
})
},
bindended() {
this.setData({
autoplay: true
})
},
bindcontrolstoggle(e) {
this.setData({
showTitle: e.detail.show
})
},
/**
@ -78,7 +135,7 @@ Page({
navigateToDict (e) {
console.log(e.currentTarget.dataset.dict)
wx.navigateTo({
url: `../laobingzaixianDict/laobingzaixianDict?dictName=${e.currentTarget.dataset.dict.dictName}&dictType=${e.currentTarget.dataset.dict.dictType}&dictValue=${e.currentTarget.dataset.dict.dictValue}`
url: `../laobingzaixianDict/laobingzaixianDict?dictName=${e.currentTarget.dataset.dict.name}&dictType=notice_yjfu_lbzx&dictValue=${e.currentTarget.dataset.dict.moduleCode}`
})
}
})

34
subpages/oneKeyService/pages/laobingzaixian/laobingzaixian.wxml

@ -1,11 +1,43 @@
<view class="dept-list">
<!-- banner swiperBannerList -->
<view class="banner" wx:if="{{swiperBannerList.length>0}}">
<view class="page-section page-section-spacing swiper">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange">
<block wx:for="{{swiperBannerList}}" wx:for-item="item" wx:for-index="index" wx:key="index">
<swiper-item>
<view data-banner="{{item}}">
<view class="swiper-item" data-id="{{item.id}}">
<!-- <view class="altitle">
<view class="altitle-name">{{item.title}}</view>
</view> -->
<image wx:if="{{item.imgUrl}}" class="banner" src='{{item.imgUrl}}' mode="aspectFill" />
<block wx:elif="{{item.videoUrl}}">
<video id="video{{index}}" class="banner" src="{{item.videoUrl}}" title="{{item.title}}" bindcontrolstoggle="bindcontrolstoggle" bindpause="bindended" bindplay='bindplay' bindended='bindended'/>
<view class="video-title" hidden="{{!showTitle}}">{{item.title}}</view>
</block>
</view>
</view>
</swiper-item>
</block>
</swiper>
<!-- 重置小圆点的样式 -->
<view class="dots">
<block wx:for="{{ swiperBannerList }}" wx:key="index">
<view class="dot {{index == currentSwiper ? ' active' : '' }}"></view>
</block>
</view>
</view>
</view>
<view
wx:for="{{deptList}}"
wx:for-index="index"
wx:for-item="item"
wx:key="index"
class="list-item" bindtap="navigateToDict" data-dict="{{item}}">
<view class="list-name">{{item.dictName}}</view>
<view class="list-name">
<image src="{{item.imgUrl}}" class="list-icon"/>{{item.name}}
</view>
<image src="../../images/right.png" class="list-arrow"></image>
</view>
</view>

145
subpages/oneKeyService/pages/laobingzaixian/laobingzaixian.wxss

@ -92,10 +92,13 @@ button::after {
gap: 20rpx 0;
width: 690rpx;
padding: 20rpx 0;
margin: 50rpx auto 0rpx;
margin: 0rpx auto;
position: relative;
z-index: 999;
}
.dept-list .list-item:nth-of-type(1) {
margin-top: 12rpx;
}
.list-item {
width: 100%;
height: 130rpx;
@ -112,10 +115,150 @@ button::after {
font-weight:bold;
color:rgba(51,51,51,1);
margin-left: 40rpx;
display: flex;
align-items: center;
}
.list-item .list-arrow {
width: 16rpx;
height: 26rpx;
margin-right: 42rpx;
}
.list-item .list-name .list-icon {
width: 106rpx;
height: 106rpx;
margin-right: 10rpx;
}
/* 轮播图start */
.altitle {
position: absolute;
width: 100%;
height: 66rpx;
background-color: black;
margin-top: 237rpx;
border-bottom-right-radius: 16rpx;
border-bottom-left-radius: 16rpx;
opacity: 0.5;
font-size: 22rpx;
font-weight: 500;
color: rgba(255, 255, 255, 1);
}
.altitle-name {
margin: 10rpx 20rpx;
}
.container {
width: 100vw;
}
.page-body {
padding-top: 30rpx;
background: #fff;
height: 300rpx;
}
.page-section {
width: 100%;
margin-bottom: 60rpx;
}
.page-section_center {
display: flex;
flex-direction: column;
align-items: center;
}
.page-section:last-child {
margin-bottom: 0;
}
.page-section-gap {
box-sizing: border-box;
padding: 0 30rpx;
}
.page-section-spacing {
box-sizing: border-box;
/* padding: 0 20rpx; */
height: 300rpx;
background-color: #fff;
}
.page-section-title {
font-size: 28rpx;
color: #999;
margin-bottom: 10rpx;
padding-left: 30rpx;
padding-right: 30rpx;
}
.page-section-gap .page-section-title {
padding-left: 0;
padding-right: 0;
}
.swiper-item {
display: block;
height: 300rpx;
}
.banner {
overflow: hidden;
height: 300rpx;
display: flex;
width: 100%;
border-radius: 16rpx;
}
.dots {
display: flex;
justify-content: center;
margin-top: -16rpx;
z-index: 999;
position: relative;
}
.dots .dot {
width: 8rpx;
height: 8rpx;
border-radius: 8rpx;
margin-left: 10rpx;
background: #d2d5da;
transition: all 0.3s;
}
.dots .dot.active {
width: 24rpx;
background: #fff;
}
.page-section-title {
margin-top: 60rpx;
position: relative;
}
swiper {
width: 710rpx;
height: 300rpx;
box-shadow: 0px 4px 29px 0px rgba(63, 63, 63, 0.1);
border-radius: 16rpx;
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
}
.video-title {
width: 100%;
height: 50rpx;
line-height: 50rpx;
padding-left: 40rpx;
color: white;
background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0));
background: -webkit-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0));
position: absolute;
top: 0;
}
/* 轮播图end */

6
subpages/oneKeyService/pages/warning/warning.js

@ -21,6 +21,7 @@ Page({
interval: 5000, //自动播放间隔时长(ms)
duration: 500, //幻灯片切换时长(ms)
currentSwiper: 0,
showTitle: true, //视频标题
},
/**
@ -163,6 +164,11 @@ Page({
autoplay: true
})
},
bindcontrolstoggle(e) {
this.setData({
showTitle: e.detail.show
})
},
// swiperChange2: function(e) {
// this.setData({
// 'options2.currentSwiper': e.detail.current,

11
subpages/oneKeyService/pages/warning/warning.wxml

@ -7,10 +7,13 @@
<view data-banner="{{item}}">
<view class="swiper-item" data-id="{{item.id}}">
<!-- <view class="altitle">
<view class="altitle-name">{{item.title}}</view>
</view> -->
<image wx:if="{{item.imgUrl!=''}}" class="banner" src='{{item.imgUrl}}' mode="aspectFill" />
<video wx:elif="{{item.videoUrl!=''}}" id="video{{index}}" class="banner" src="{{item.videoUrl}}" bindplay='bindplay' bindended='bindended'/>
<view class="altitle-name">{{item.title}}</view>
</view> -->
<image wx:if="{{item.imgUrl}}" class="banner" src='{{item.imgUrl}}' mode="aspectFill" />
<block wx:elif="{{item.videoUrl}}">
<video id="video{{index}}" class="banner" src="{{item.videoUrl}}" title="{{item.title}}" bindcontrolstoggle="bindcontrolstoggle" bindpause="bindended" bindplay='bindplay' bindended='bindended'/>
<view class="video-title" hidden="{{!showTitle}}">{{item.title}}</view>
</block>
</view>
</view>
</swiper-item>

12
subpages/oneKeyService/pages/warning/warning.wxss

@ -172,6 +172,7 @@ page {
}
swiper {
width: 710rpx;
height: 300rpx;
box-shadow: 0px 4px 29px 0px rgba(63, 63, 63, 0.1);
border-radius: 16rpx;
@ -180,4 +181,15 @@ swiper {
-webkit-transform: translate3d(0, 0, 0);
}
.video-title {
width: 100%;
height: 50rpx;
line-height: 50rpx;
padding-left: 40rpx;
color: white;
background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0));
background: -webkit-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0));
position: absolute;
top: 0;
}
/* 轮播图end */

8
subpages/understandJs/pages/noticeDetail/noticeDetail.js

@ -20,7 +20,8 @@ Page({
interval: 5000, //自动播放间隔时长(ms)
duration: 500, //幻灯片切换时长(ms)
currentSwiper: 0,
nodata: false
nodata: false,
showTitle: true
},
/**
@ -106,6 +107,11 @@ Page({
autoplay: true
})
},
bindcontrolstoggle(e) {
this.setData({
showTitle: e.detail.show
})
},
videoBannerList () {
api.videoBannerList('3').then( res => {
this.setData({

7
subpages/understandJs/pages/noticeDetail/noticeDetail.wxml

@ -10,8 +10,11 @@
<!-- <view class="altitle">
<view class="altitle-name">{{item.title}}</view>
</view> -->
<image wx:if="{{item.imgUrl!=''}}" class="banner" src='{{item.imgUrl}}' mode="aspectFill" />
<video wx:elif="{{item.videoUrl!=''}}" id="video{{index}}" src="{{item.videoUrl}}" show-center-play-btn='{{true}}' bindplay='bindplay' bindended='bindended'></video>
<image wx:if="{{item.imgUrl}}" class="banner" src='{{item.imgUrl}}' mode="aspectFill" />
<block wx:elif="{{item.videoUrl}}">
<video id="video{{index}}" src="{{item.videoUrl}}" show-center-play-btn='{{true}}' title="{{item.title}}" bindcontrolstoggle="bindcontrolstoggle" bindpause="bindended" bindplay='bindplay' bindended='bindended'></video>
<view class="video-title" hidden="{{!showTitle}}">{{item.title}}</view>
</block>
</view>
</view>
</swiper-item>

11
subpages/understandJs/pages/noticeDetail/noticeDetail.wxss

@ -253,4 +253,15 @@ swiper {
-webkit-transform: translate3d(0, 0, 0);
}
.video-title {
width: 100%;
height: 50rpx;
line-height: 50rpx;
padding-left: 40rpx;
color: white;
background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0));
background: -webkit-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0));
position: absolute;
top: 0;
}
/* 轮播图end */
Loading…
Cancel
Save