kxmh
/
kxmh_wx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge refs/remotes/KXMH/develop into refs/heads/develop

Browse Source
develop
mice2333 4 years ago
parent 5afc83274a 9dcc834380
commit 929594b5b6
3 changed files with 524 additions and 334 deletions
Show Stats Download Patch File Download Diff File

448
pages/index/index/index.js
Unescape View File

@ -1,214 +1,272 @@
// pages/index/index.js // pages/index/index.js
import { import {
httpUtil,location_city httpUtil,
location_city
} from '../../../utils/util' } from '../../../utils/util'
Page({ Page({
/** /**
* 页面的初始数据 * 页面的初始数据
*/ */
data: { data: {
latitude: '', latitude: '',
longitude: '', longitude: '',
city: '', city: '',
swiperIdx: 0, swiperIdx: 0,
swith_area: 0, swith_area: 0,
swich_space:['综合排序','近期上演','限时钜惠'], swich_space: ['综合排序', '近期上演', '限时钜惠'],
show_list: [ show_list: [
{sort_type:'1',list:'newMake',page:'1',has_more:'false'}, { sort_type: '1', list: 'newMake', page: '1', has_more: 'false' },
{sort_type:'2',list:'newMake',page:'1',has_more:'false'}, { sort_type: '2', list: 'newMake', page: '1', has_more: 'false' },
{sort_type:'3',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',
bindchange(e) { isActionMarkShow: false, //开屏广告
this.setData({ isGiftMarkShow: false //首页弹窗
swiperIdx: e.detail.current },
}) // 轮播图
}, bindchange(e) {
swith_tab: function (e) { this.setData({
let swith_area=e.currentTarget.dataset.index swiperIdx: e.detail.current
this.setData({ })
swith_area },
}) swith_tab: function (e) {
if( 'newMake' == this.data.show_list[swith_area].list){ let swith_area = e.currentTarget.dataset.index
this.get_show_list(this.data.city_id,swith_area+1,1) this.setData({
}else{ swith_area
this.setData({current_list:this.data.show_list[swith_area].list,no_more:!this.data.show_list[swith_area].has_more}) })
} if ('newMake' == this.data.show_list[swith_area].list) {
}, this.get_show_list(this.data.city_id, swith_area + 1, 1)
} else {
write_in(e){ this.setData({ current_list: this.data.show_list[swith_area].list, no_more: !this.data.show_list[swith_area].has_more })
this.setData({keyword:e.detail.value}) }
}, },
search(e){
this.setData({keyword:e.detail.value})
wx.navigateTo({
url: '/pages/index/search/search?city_id='+this.data.city_id+"&keyword="+e.detail.value,
})
},
search1(){
wx.navigateTo({
url: '/pages/index/search/search?city_id='+this.data.city_id+"&keyword="+this.data.keyword,
})
},
// 封装 获取banner｜获取城市列表｜获取演出列表 write_in(e) {
// 方便刷新全局数据 this.setData({ keyword: e.detail.value })
refresh_info: function (city_id) { },
var that = this search(e) {
// 获取banner列表 this.setData({ keyword: e.detail.value })
httpUtil("/api/v1/banner-list", "get", { wx.navigateTo({
city_id url: '/pages/index/search/search?city_id=' + this.data.city_id + "&keyword=" + e.detail.value,
}).then(res => { })
if (0 != res.banner_list.length) { },
that.setData({ search1() {
banner_list:res.banner_list wx.navigateTo({
}) url: '/pages/index/search/search?city_id=' + this.data.city_id + "&keyword=" + this.data.keyword,
} })
}) },
// 获取search关键词
httpUtil("/api/v1/hot-search","get").then(res=>{
that.setData({placeholder:res.keyword})
})
// 获取演出城市列表
httpUtil("/api/v1/city-list", "get", {
city_id
}).then(res2 => {
that.setData({
city_list: res2,city_id:res2.current.city_id,city:res2.current.city_name
})
})
// 获取演出列表 // 封装 获取banner｜获取城市列表｜获取演出列表
let sort_type =1 // 方便刷新全局数据
let page = 1 refresh_info: function (city_id) {
this.get_show_list( city_id,sort_type,page) var that = this
}, // 获取banner列表
// 获取演出列表方法封装 httpUtil("/api/v1/banner-list", "get", {
get_show_list( city_id,sort_type,page){ city_id
httpUtil("/api/v1/show-list", "get", { }).then(res => {
city_id,sort_type,page if (0 != res.banner_list.length) {
}).then(res => { that.setData({
let show_list=this.data.show_list banner_list: res.banner_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 // 获取search关键词
}) httpUtil("/api/v1/hot-search", "get").then(res => {
}) that.setData({ placeholder: res.keyword })
}, })
banner_nav:function(e){ // 获取演出城市列表
let url = e.currentTarget.dataset.key httpUtil("/api/v1/city-list", "get", {
console.log("前往地址：",url) city_id
wx.navigateTo({ }).then(res2 => {
// url: '/pages/opera/show/show_detail'+e.currentTarget.dataset.key, that.setData({
url city_list: res2,
}) city_id: res2.current.city_id,
}, city: res2.current.city_name
calendar_nav: function () { })
wx.navigateTo({ })
url: '/pages/index/calendar/calendar?city_id=' + this.data.city_id,
})
},
area_nav: function () {
wx.navigateTo({
url: '/pages/index/city/selectcity?city_list=' + JSON.stringify(this.data.city_list),
// url: '/pages/index/city/selectcity'
})
},
show_detail:function(e){ // 获取演出列表
wx.navigateTo({ let sort_type = 1
url: '/pages/opera/show/show_detail?cycle_id='+e.currentTarget.dataset.cycle_id, let page = 1
}) this.get_show_list(city_id, sort_type, page)
}, // 获取开屏广告
/** httpUtil("/api/v1/home-promotion", "get", {
* 生命周期函数--监听页面加载 city_id
*/ }).then(res => {
onLoad: function (options) { if (res.length == 0) {
if( !getApp().globalData.city_id){ return
// 默认北京写法 }
//location_city("beijing").then(res=>{ let key = wx.getStorageSync('key')
location_city().then(res=>{ // console.log(key);
var city = res.city_info.city_name // console.log(key.indexOf(res.id));
var city_id = res.city_info.city_id if(key.indexOf(res.id)!=-1){
getApp().globalData.city_id = city_id // console.log('我尊在');
this.refresh_info(city_id) return
}) }
}else{ this.setData({
this.refresh_info( getApp().globalData.city_id ) 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
}).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
})
})
},
/** banner_nav: function (e) {
* 生命周期函数--监听页面初次渲染完成 let url = e.currentTarget.dataset.key
*/ console.log("前往地址：", url)
onReady: function () { wx.navigateTo({
// url: '/pages/opera/show/show_detail'+e.currentTarget.dataset.key,
url
})
},
calendar_nav: function () {
wx.navigateTo({
url: '/pages/index/calendar/calendar?city_id=' + this.data.city_id,
})
},
area_nav: function () {
wx.navigateTo({
url: '/pages/index/city/selectcity?city_list=' + JSON.stringify(this.data.city_list),
// url: '/pages/index/city/selectcity'
})
},
}, show_detail: function (e) {
wx.navigateTo({
url: '/pages/opera/show/show_detail?cycle_id=' + e.currentTarget.dataset.cycle_id,
})
},
cancle_mark(e) {
let id=e.currentTarget.dataset.id
let key=wx.getStorageSync('key')
if(key.indexOf(id)==-1){
wx.setStorageSync('key',[...key,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
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
if (!getApp().globalData.city_id) {
// 默认北京写法
//location_city("beijing").then(res=>{
location_city().then(res => {
var city = res.city_info.city_name
var city_id = res.city_info.city_id
getApp().globalData.city_id = city_id
this.refresh_info(city_id)
})
} else {
this.refresh_info(getApp().globalData.city_id)
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
wx.setStorageSync('key',[])
},
/** /**
* 生命周期函数--监听页面显示 * 生命周期函数--监听页面显示
*/ */
onShow: function () {}, onShow: function () { },
/** /**
* 生命周期函数--监听页面隐藏 * 生命周期函数--监听页面隐藏
*/ */
onHide: function () { onHide: function () {
}, },
/** /**
* 生命周期函数--监听页面卸载 * 生命周期函数--监听页面卸载
*/ */
onUnload: function () { onUnload: function () {
}, },
/** /**
* 页面相关事件处理函数--监听用户下拉动作 * 页面相关事件处理函数--监听用户下拉动作
*/ */
onPullDownRefresh: function () { onPullDownRefresh: function () {
wx.reLaunch({ // wx.reLaunch({
url: '/pages/index/index/index' // url: '/pages/index/index/index'
}) // })
}, this.refresh_info(getApp().globalData.city_id)
},
/** /**
* 页面上拉触底事件的处理函数 * 页面上拉触底事件的处理函数
*/ */
onReachBottom: function () { onReachBottom: function () {
let show_list = this.data.show_list let show_list = this.data.show_list
let current=show_list[this.data.swith_area] let current = show_list[this.data.swith_area]
if(current.has_more){ if (current.has_more) {
wx.showNavigationBarLoading(); //在标题栏中显示加载图标 wx.showNavigationBarLoading(); //在标题栏中显示加载图标
let page = parseInt(current.page)+1 let page = parseInt(current.page) + 1
let city_id = this.data.city_id let city_id = this.data.city_id
let sort_type =current.sort_type let sort_type = current.sort_type
httpUtil("/api/v1/show-list", "get", {city_id,page,sort_type}).then(res => { httpUtil("/api/v1/show-list", "get", { city_id, page, sort_type }).then(res => {
wx.hideNavigationBarLoading(); //完成停止加载图标 wx.hideNavigationBarLoading(); //完成停止加载图标
show_list[this.data.swith_area].list=current.list.concat(res.show_list) show_list[this.data.swith_area].list = current.list.concat(res.show_list)
show_list[this.data.swith_area].page=page show_list[this.data.swith_area].page = page
show_list[this.data.swith_area].has_more=res.has_more show_list[this.data.swith_area].has_more = res.has_more
this.setData({ 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
})
})
}else{ } else {
this.setData({no_more:true}) this.setData({ no_more: true })
} }
}, },
/** /**
* 用户点击右上角分享 * 用户点击右上角分享
*/ */
onShareAppMessage: function () { onShareAppMessage: function () {
return { return {
title: '开心麻花小程序 - 优惠购票', title: '开心麻花小程序 - 优惠购票',
path: '/pages/index/index/index', path: '/pages/index/index/index',
imageUrl:'https://mahuaimage.oss-cn-qingdao.aliyuncs.com/mini_app/share/home-share.png' imageUrl: 'https://mahuaimage.oss-cn-qingdao.aliyuncs.com/mini_app/share/home-share.png'
}
} }
}
}) })

15
pages/index/index/index.wxml
Unescape View File

@ -20,6 +20,21 @@
</block> </block>
</swiper> </swiper>
</view> --> </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"> <view class="search_area">

395
pages/index/index/index.wxss
Unescape View File

@ -4,176 +4,293 @@
.pageBox image.active {transform: none;transition: all 0.2s ease-in 0s;} .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;} */ .pageBox image.quiet {transform: scale(0.8333333);transition: all 0.2s ease-in 0s;} */
.bannner{ .bannner {}
.banner .swiper {
text-align: center;
margin-top: 40rpx;
height: 560rpx;
display: flex;
align-items: center;
} }
.banner .swiper{ .banner .swiper .swiper_item {
text-align: center; width: 640rpx;
margin-top: 40rpx;
height: 560rpx;
display: flex;
align-items: center;
} }
.banner .swiper .swiper_item{ .banner .shadow {
width: 640rpx; width: 550rpx;
} height: 212rpx;
.banner .shadow{ background: #7b7b7b;
width: 550rpx; border-radius: 8rpx;
height: 212rpx; opacity: 0.3;
background: #7b7b7b; filter: blur(12px);
border-radius: 8rpx; position: absolute;
opacity: 0.3; left: 60rpx;
filter: blur(12px); top: 310rpx;
position: absolute; z-index: -1;
left: 60rpx;
top: 310rpx;
z-index: -1;
} }
.banner .swiper .active{
} .banner .swiper .active {}
.banner .swiper .quiet{
/* transform: scale(0.8333333); */ .banner .swiper .quiet {
/* transform: scale(0.8333333); */
} }
.banner .swiper .swiper_item .img{ .banner .swiper .swiper_item .img {
width: 640rpx; width: 640rpx;
height: 500rpx; height: 500rpx;
border-radius: 16rpx; border-radius: 16rpx;
box-shadow: 0 4rpx 20rpx 0 #F3F3F3; box-shadow: 0 4rpx 20rpx 0 #F3F3F3;
} }
.banner .indicator_dsn { .banner .indicator_dsn {
display: flex; display: flex;
justify-content: center; justify-content: center;
/* margin: 20rpx 0 40rpx 0; */ /* margin: 20rpx 0 40rpx 0; */
position: absolute; position: absolute;
top: 560rpx; top: 560rpx;
left: 50%; left: 50%;
transform: translate( -50%); transform: translate( -50%);
} }
.banner .indicator_dsn .dot{
width: 8rpx; .banner .indicator_dsn .dot {
width: 8rpx;
height: 8rpx; height: 8rpx;
margin: 0 10rpx; margin: 0 10rpx;
border-radius: 8rpx; border-radius: 8rpx;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.banner .indicator_dsn .dot.active{
width: 32rpx; .banner .indicator_dsn .dot.active {
background-color:#FF446B; width: 32rpx;
background-color: #FF446B;
} }
.search_area{
display:flex; padding: 0 20rpx 20rpx 20rpx;align-items:center; .search_area {
display: flex;
padding: 0 20rpx 20rpx 20rpx;
align-items: center;
} }
.search_area .cal{
width: 60rpx; .search_area .cal {
height: 60rpx; width: 60rpx;
margin: 0 26rpx 0 6rpx; height: 60rpx;
background: #FFFFFF; margin: 0 26rpx 0 6rpx;
box-shadow: 0 4rpx 20rpx 0 #F3F3F3; background: #FFFFFF;
border: 2rpx solid #E9E9E9; box-shadow: 0 4rpx 20rpx 0 #F3F3F3;
border-radius: 50%; border: 2rpx solid #E9E9E9;
display: flex; border-radius: 50%;
justify-content: center; display: flex;
align-items: center; justify-content: center;
align-items: center;
} }
.search_area ._search{ .search_area ._search {
display:flex;flex:1;background-color:#ffffff;border-radius:60rpx;justify-content:space-between;align-items: center; display: flex;
box-shadow: 0 4rpx 20rpx 0 #F3F3F3;font-size:24rpx;height: 64rpx; flex: 1;
padding: 0 20rpx; margin-right: 10rpx; border: 2rpx solid #EBEBEB; 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; .search_area ._search ._search1 {
align-items: center; display: flex;
width: 100%; align-items: center;
width: 100%;
} }
.search_area ._search ._search1 .input{
flex: 1; .search_area ._search ._search1 .input {
flex: 1;
} }
.line{
display: flex; margin-bottom: 20rpx; .line {
display: flex;
margin-bottom: 20rpx;
} }
.line .topLine{width: 33%;text-align: center;margin: 20rpx;color: #7B7B7B;}
.line .topLine.active{ .line .topLine {
position: relative;color: #181818;font-weight: bold; width: 33%;
text-align: center;
margin: 20rpx;
color: #7B7B7B;
}
.line .topLine.active {
position: relative;
color: #181818;
font-weight: bold;
} }
.line .topLine.active:after { .line .topLine.active:after {
content: " "; content: " ";
width:1rem; width: 1rem;
height: 0.12rem; height: 0.12rem;
background: #fff; background: #fff;
position: absolute; position: absolute;
/* bottom: -0.1rem; */ /* bottom: -0.1rem; */
bottom: -0.2rem; bottom: -0.2rem;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
background-color: #FF446B; background-color: #FF446B;
border-radius:0.12rem; border-radius: 0.12rem;
} }
._list{
display:flex;flex-wrap:wrap; justify-content: flex-start; ._list {
} display: flex;
._list ._demo{ flex-wrap: wrap;
margin: 0 0 40rpx 26rpx; justify-content: flex-start;
width: 336rpx; }
background: #fff;
border-radius: 16rpx; ._list ._demo {
overflow:auto; margin: 0 0 40rpx 26rpx;
display: flex; width: 336rpx;
flex-direction: column; background: #fff;
justify-content: space-between; border-radius: 16rpx;
} overflow: auto;
._list ._demo .list_img{ display: flex;
width: 336rpx; flex-direction: column;
height: 504rpx; justify-content: space-between;
} }
._list ._demo ._ln{
margin: 4rpx 10rpx 12rpx 12rpx; ._list ._demo .list_img {
} width: 336rpx;
._list ._demo ._ln1{ height: 504rpx;
display: flex; }
justify-content: space-between;
align-items: center; ._list ._demo ._ln {
font-size: 20rpx; margin: 4rpx 10rpx 12rpx 12rpx;
color: #7B7B7B; }
}
._list ._demo ._ln2{ ._list ._demo ._ln1 {
margin: 5rpx 0; display: flex;
font-size: 28rpx; justify-content: space-between;
font-weight: bold; align-items: center;
color: #181818; font-size: 20rpx;
} color: #7B7B7B;
._list ._demo ._ln3{ }
display: flex;
align-items: center; ._list ._demo ._ln2 {
justify-content: space-between; margin: 5rpx 0;
margin-top: 16rpx; font-size: 28rpx;
} font-weight: bold;
._list ._demo ._ln3 ._ln4{ color: #181818;
display: flex; }
align-items: center;
} ._list ._demo ._ln3 {
._list ._demo ._ln3 ._detail{ display: flex;
font-size: 24rpx; align-items: center;
white-space: nowrap; justify-content: space-between;
border-radius: 22rpx; margin-top: 16rpx;
text-align: center; }
margin: 0;
background: linear-gradient(90deg, #FF4284 0%, #FF1D42 100%); ._list ._demo ._ln3 ._ln4 {
color: #fff; display: flex;
line-height: 42rpx; align-items: center;
} }
.more{ ._list ._demo ._ln3 ._detail {
font-size: 24rpx;
white-space: nowrap;
border-radius: 22rpx;
text-align: center;
margin: 0;
background: linear-gradient(90deg, #FF4284 0%, #FF1D42 100%);
color: #fff;
line-height: 42rpx;
}
.more {
color: #7B7B7B; color: #7B7B7B;
text-align: center; text-align: center;
margin:70rpx 0 40rpx 0; 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;
}
Write Preview
Loading…
Cancel
Save