feat 开屏广告

develop
GJW200011 4 years ago
parent dfec1f270e
commit ebdcca9420

@ -1,6 +1,7 @@
// pages/index/index.js
import {
httpUtil,location_city
httpUtil,
location_city
} from '../../../utils/util'
Page({
@ -19,6 +20,10 @@ Page({
{ sort_type: '2', list: 'newMake', page: '1', has_more: 'false' },
{ sort_type: '3', list: 'newMake', page: '1', has_more: 'false' },
],
screen_list: [], //开屏广告信息
// screen_imgUrl: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61382ab58bf84d41d8cd98f00b204e9800998ecf8427e.jpg',
isActionMarkShow: false, //开屏广告
isGiftMarkShow: false //首页弹窗
},
// 轮播图
bindchange(e) {
@ -76,7 +81,9 @@ search1(){
city_id
}).then(res2 => {
that.setData({
city_list: res2,city_id:res2.current.city_id,city:res2.current.city_name
city_list: res2,
city_id: res2.current.city_id,
city: res2.current.city_name
})
})
@ -84,20 +91,42 @@ search1(){
let sort_type = 1
let page = 1
this.get_show_list(city_id, sort_type, page)
// 获取开屏广告
httpUtil("/api/v1/home-promotion", "get", {
city_id
}).then(res => {
if (res.length == 0) {
return
}
let key = wx.getStorageSync('key')
if (key.id == res.id) {
return
}
this.setData({
screen_list: res,
isActionMarkShow: true
})
})
wx.stopPullDownRefresh()
},
// 获取演出列表方法封装
get_show_list(city_id, sort_type, page) {
httpUtil("/api/v1/show-list", "get", {
city_id,sort_type,page
city_id,
sort_type,
page
}).then(res => {
let show_list = this.data.show_list
show_list[sort_type - 1].list = res.show_list
show_list[sort_type - 1].has_more = res.has_more
this.setData({
show_list,current_list:res.show_list,no_more:!res.has_more
show_list,
current_list: res.show_list,
no_more: !res.has_more
})
})
},
banner_nav: function (e) {
let url = e.currentTarget.dataset.key
console.log("前往地址:", url)
@ -123,6 +152,26 @@ banner_nav:function(e){
url: '/pages/opera/show/show_detail?cycle_id=' + e.currentTarget.dataset.cycle_id,
})
},
cancle_mark(e) {
let id=e.currentTarget.dataset.id
wx.setStorageSync('key', {id:id})
this.setData({
isActionMarkShow: false,
isGiftMarkShow: true
})
},
advertisementMark_show() {
this.setData({
isActionMarkShow: true,
isGiftMarkShow: false
})
},
onlinkurl(e) {
let link_url = e.currentTarget.dataset.link_url
wx.navigateTo({
url: link_url
})
},
/**
* 生命周期函数--监听页面加载
*/
@ -140,12 +189,11 @@ banner_nav:function(e){
this.refresh_info(getApp().globalData.city_id)
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
wx.setStorageSync('key', { id: '' })
},
/**
@ -171,9 +219,11 @@ banner_nav:function(e){
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
wx.reLaunch({
url: '/pages/index/index/index'
})
// wx.reLaunch({
// url: '/pages/index/index/index'
// })
this.refresh_info(getApp().globalData.city_id)
},
/**
@ -193,7 +243,9 @@ banner_nav:function(e){
show_list[this.data.swith_area].page = page
show_list[this.data.swith_area].has_more = res.has_more
this.setData({
show_list,current_list: show_list[this.data.swith_area].list,no_more:!res.has_more
show_list,
current_list: show_list[this.data.swith_area].list,
no_more: !res.has_more
})
})

@ -20,6 +20,21 @@
</block>
</swiper>
</view> -->
<!-- 开屏广告 -->
<view class="markinfo" wx:if="{{isActionMarkShow}}" bindtouchstart='buttonStart' catchtouchmove='buttonMove'>
<view class="fiexbox">
<view class="box" bind:tap="onlinkurl" data-link_url="{{screen_list.link_url}}">
<image
src="{{screen_list.img_url}}"
></image>
</view>
<view class="btn" catchtap="cancle_mark" data-id="{{screen_list.id}}">×</view>
</view>
</view>
<!-- 礼物弹窗 -->
<view class="surprise" bindtap="advertisementMark_show" wx:if="{{isGiftMarkShow}}">
<view class="img"></view>
</view>
<!-- 搜索栏 -->
<view class="search_area">

@ -4,9 +4,7 @@
.pageBox image.active {transform: none;transition: all 0.2s ease-in 0s;}
.pageBox image.quiet {transform: scale(0.8333333);transition: all 0.2s ease-in 0s;} */
.bannner{
}
.bannner {}
.banner .swiper {
text-align: center;
@ -19,6 +17,7 @@
.banner .swiper .swiper_item {
width: 640rpx;
}
.banner .shadow {
width: 550rpx;
height: 212rpx;
@ -31,9 +30,9 @@
top: 310rpx;
z-index: -1;
}
.banner .swiper .active{
}
.banner .swiper .active {}
.banner .swiper .quiet {
/* transform: scale(0.8333333); */
}
@ -44,6 +43,7 @@
border-radius: 16rpx;
box-shadow: 0 4rpx 20rpx 0 #F3F3F3;
}
.banner .indicator_dsn {
display: flex;
justify-content: center;
@ -53,6 +53,7 @@ top: 560rpx;
left: 50%;
transform: translate( -50%);
}
.banner .indicator_dsn .dot {
width: 8rpx;
height: 8rpx;
@ -60,13 +61,18 @@ transform: translate( -50%);
border-radius: 8rpx;
background-color: #FFFFFF;
}
.banner .indicator_dsn .dot.active {
width: 32rpx;
background-color: #FF446B;
}
.search_area {
display:flex; padding: 0 20rpx 20rpx 20rpx;align-items:center;
display: flex;
padding: 0 20rpx 20rpx 20rpx;
align-items: center;
}
.search_area .cal {
width: 60rpx;
height: 60rpx;
@ -81,25 +87,46 @@ transform: translate( -50%);
}
.search_area ._search {
display:flex;flex:1;background-color:#ffffff;border-radius:60rpx;justify-content:space-between;align-items: center;
box-shadow: 0 4rpx 20rpx 0 #F3F3F3;font-size:24rpx;height: 64rpx;
padding: 0 20rpx; margin-right: 10rpx; border: 2rpx solid #EBEBEB;
display: flex;
flex: 1;
background-color: #ffffff;
border-radius: 60rpx;
justify-content: space-between;
align-items: center;
box-shadow: 0 4rpx 20rpx 0 #F3F3F3;
font-size: 24rpx;
height: 64rpx;
padding: 0 20rpx;
margin-right: 10rpx;
border: 2rpx solid #EBEBEB;
}
.search_area ._search ._search1 {
display: flex;
align-items: center;
width: 100%;
}
.search_area ._search ._search1 .input {
flex: 1;
}
.line {
display: flex; margin-bottom: 20rpx;
display: flex;
margin-bottom: 20rpx;
}
.line .topLine {
width: 33%;
text-align: center;
margin: 20rpx;
color: #7B7B7B;
}
.line .topLine{width: 33%;text-align: center;margin: 20rpx;color: #7B7B7B;}
.line .topLine.active {
position: relative;color: #181818;font-weight: bold;
position: relative;
color: #181818;
font-weight: bold;
}
.line .topLine.active:after {
@ -115,9 +142,13 @@ transform: translate( -50%);
background-color: #FF446B;
border-radius: 0.12rem;
}
._list {
display:flex;flex-wrap:wrap; justify-content: flex-start;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
._list ._demo {
margin: 0 0 40rpx 26rpx;
width: 336rpx;
@ -128,13 +159,16 @@ display: flex;
flex-direction: column;
justify-content: space-between;
}
._list ._demo .list_img {
width: 336rpx;
height: 504rpx;
}
._list ._demo ._ln {
margin: 4rpx 10rpx 12rpx 12rpx;
}
._list ._demo ._ln1 {
display: flex;
justify-content: space-between;
@ -142,22 +176,26 @@ height: 504rpx;
font-size: 20rpx;
color: #7B7B7B;
}
._list ._demo ._ln2 {
margin: 5rpx 0;
font-size: 28rpx;
font-weight: bold;
color: #181818;
}
._list ._demo ._ln3 {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16rpx;
}
._list ._demo ._ln3 ._ln4 {
display: flex;
align-items: center;
}
._list ._demo ._ln3 ._detail {
font-size: 24rpx;
white-space: nowrap;
@ -175,5 +213,84 @@ align-items: center;
margin: 70rpx 0 40rpx 0;
}
.fiexbox {
width: 400rpx;
border-radius: 4rpx;
position: absolute;
left: 0;
right: 0;
top: 0px;
bottom: 0;
margin: auto;
z-index: 100;
height: 700rpx;
}
.fiexbox .box image {
width: 100%;
height: 100%;
border-radius: 4px;
}
.fiexbox .box {
width: 400rpx;
height: 600rpx;
margin-bottom: 10px;
border-radius: 4rpx;
}
.fiexbox .btn {
margin-top: 10px;
border-radius: 50%;
border: 1px solid #FFFAF0;
color: #FFFAF0;
width: 50rpx;
height: 50rpx;
text-align: center;
line-height: 50rpx;
margin: 0 auto;
background: rgba(228, 220, 220, 0.3) !important;
}
.markinfo {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
background: rgba(0, 0, 0, 0.64) !important;
z-index: 100;
}
.surprise {
position: fixed;
right: 10rpx;
bottom: 0rpx;
z-index: 100;
}
.surprise .img {
width: 150rpx;
height: 150rpx;
text-align: center;
line-height: 150rpx;
background: url(https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61415f6cf0837b03af37cc5d456f21c901e1413071d7f.png);
background-size: 150rpx 150rpx;
}
.surprise .img image {
width: 100%;
height: 100%;
}
.cton {
background: yellow;
color: #CCC;
border-radius: 8rpx;
width: 50rpx;
/* margin: 0 auto; */
text-align: center;
}
Loading…
Cancel
Save