You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
400 lines
12 KiB
400 lines
12 KiB
<template>
|
|
<view class="body">
|
|
<mescroll-uni ref="mescrollRef" @down="downCallback" @up="getData" @init="mescrollInit" :up="upOption" :down="downOption">
|
|
<view class="search_con d_flex a_center">
|
|
<view class="search_box d_flex">
|
|
<picker @change="bindPickerChange" :value="genderIndex" :range="arrays" range-key="title" class="filter_con">
|
|
<view class="filter_box d_flex j_center a_center">
|
|
<view class="filter_txt">{{ arrays[genderIndex].title }}</view>
|
|
<view class="triangle_bottom"></view>
|
|
</view>
|
|
</picker>
|
|
<view class="search_icon_box"><image class="search_icon" src="/static/search_icon2.png" mode="widthFix"></image></view>
|
|
<input placeholder-style="color:#d5cdcd" type="search" class="search_input" v-model="keys" placeholder="请输入名称" />
|
|
</view>
|
|
<view class="search_right d_flex j_end a_center" @click="searchClick">搜索</view>
|
|
</view>
|
|
<view class="history_list">
|
|
<view class="history_list_title d_flex j_between a_center" v-if="keysVal">
|
|
<view class="left">搜索 “<text v-text="keysVal"></text>”</view>
|
|
</view>
|
|
<view class="activity_list" v-if="genderIndex==0">
|
|
<navigator hover-class="none" :url="'/pages/activity/detail/index?id=' + item.id" class="activity_nav" v-for="(item, index) in items" :key="index">
|
|
<view class="activity_nav_img">
|
|
<image class="img" :src="item.imgurl"></image>
|
|
<image v-if="item.isActivity == 1" class="activity_icon" src="/static/activity_icon1.png"></image>
|
|
<image v-else class="activity_icon" src="/static/activity_icon2.png"></image>
|
|
</view>
|
|
<view class="activity_nav_content">
|
|
<view class="activity_nav_title two_hidden" v-html="item.Title"></view>
|
|
<view class="activity_nav_subtitle text_hidden" v-text="item.content2"></view>
|
|
<view class="activity_nav_time" v-text="item.stime + ' - ' + item.etime"></view>
|
|
<view class="activity_nav_label d_flex" v-if="item.dyw.length>0">
|
|
<view class="activity_nav_label_txt label2" v-for="(item2,index2) in item.dyw" :key="index2" v-text="item2" v-if="index2<3"></view>
|
|
</view>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
<view class="changguan_list" v-else>
|
|
<navigator hover-class="none" :url="'/pages/changguan/detail/index?id=' + item.BsId" class="changguan_nav" v-for="(item, index) in items" :key="index">
|
|
<view class="changguan_nav_img"><image class="img" :src="item.ImgUrl"></image></view>
|
|
<view class="changguan_nav_content">
|
|
<view class="changguan_nav_title font_bold text_hidden" v-html="item.Title"></view>
|
|
<view class="changguan_nav_subtitle text_hidden" v-text="item.Author"></view>
|
|
<view class="changguan_nav_label d_flex">
|
|
<view v-for="(item2,index2) in item.Source" :key="index2" class="changguan_nav_label_txt" :class="[index2==0?'label1':'',index2==1?'label2':'',index2==2?'label3':'']" v-text="item2"></view>
|
|
</view>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
</view>
|
|
</mescroll-uni>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
|
|
export default {
|
|
mixins: [MescrollMixin],
|
|
components: {},
|
|
data() {
|
|
return {
|
|
mescroll: null,
|
|
downOption: {
|
|
use: false, //是否启用下拉刷新
|
|
auto: false //是否自动加载
|
|
},
|
|
upOption: {
|
|
use: true, //是否启用上拉加载更多
|
|
auto: false //是否自动加载
|
|
},
|
|
keys: '',
|
|
keysVal:"",
|
|
arrays: [
|
|
{
|
|
title: '活动',
|
|
value: 0
|
|
},
|
|
{
|
|
title: '场馆',
|
|
value: 1
|
|
}
|
|
],
|
|
genderIndex: 0,
|
|
items: []
|
|
};
|
|
},
|
|
onLoad(options) {},
|
|
onReady() {},
|
|
onShow() {},
|
|
methods: {
|
|
bindPickerChange(e) {
|
|
if(this.genderIndex==e.detail.value){
|
|
return;
|
|
}
|
|
this.genderIndex = e.detail.value;
|
|
this.items = [];
|
|
this.keysVal = "";
|
|
this.keys = "";
|
|
},
|
|
searchClick(){
|
|
if(!this.keys){
|
|
this.$util.showToast('请输入搜索名称');
|
|
return;
|
|
}
|
|
this.keysVal = this.keys;
|
|
this.mescroll.resetUpScroll();
|
|
},
|
|
getData(mescroll) {
|
|
let that = this;
|
|
let keys = that.keys;
|
|
let data = {
|
|
page:that.mescroll.num,
|
|
pagesize:that.mescroll.size,
|
|
key:keys
|
|
};
|
|
if(that.genderIndex==0){
|
|
data.mod = 'getHDlist';
|
|
data.dbtype = 0;
|
|
}else{
|
|
data.mod = 'getCSlist';
|
|
}
|
|
that.$doPost('Server.aspx', data)
|
|
.then(res => {
|
|
if (res.data.resultcode!=0) {
|
|
that.$util.showToast(res.data.msg);
|
|
return;
|
|
}
|
|
let body = res.data.data;
|
|
body.filter(function(item, index) {
|
|
if(that.genderIndex==0){
|
|
item.imgurl = that.baseImgUrl + item.imgurl;
|
|
if(!item.dyw){
|
|
item.dyw = [];
|
|
}else{
|
|
item.dyw = item.dyw.split("|");
|
|
}
|
|
if(new Date() > that.$util.strDateFormat(item.etime)){
|
|
item.isActivity = 0;
|
|
}else{
|
|
item.isActivity = 1;
|
|
}
|
|
item.stime = that.$util.strDateFormat(item.stime,"yyyy.MM.dd");
|
|
item.etime = that.$util.strDateFormat(item.etime,"yyyy.MM.dd");
|
|
item.Title = item.Title.replace(new RegExp(keys, 'gm'), '<span class="color_blue">' + keys + '</span>');
|
|
}else{
|
|
item.ImgUrl = that.baseImgUrl + item.ImgUrl;
|
|
if(item.Source){
|
|
item.Source = item.Source.split("|");
|
|
}
|
|
item.Title = item.Title.replace(new RegExp(keys, 'gm'), '<span class="color_blue">' + keys + '</span>');
|
|
}
|
|
});
|
|
if (that.mescroll.num == 1) {
|
|
that.items = body;
|
|
} else {
|
|
that.items = that.items.concat(body);
|
|
}
|
|
that.mescroll.endSuccess(body.length);
|
|
})
|
|
.catch(err => {
|
|
that.$util.showToast('网络错误，稍后重试');
|
|
that.mescroll.endErr();
|
|
console.log('request fail', err);
|
|
});
|
|
},
|
|
mescrollInit(mescroll) {
|
|
this.mescroll = mescroll;
|
|
},
|
|
downCallback(mescroll) {
|
|
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page,
|
|
.body {
|
|
background: #fff;
|
|
}
|
|
.search_con {
|
|
overflow: hidden;
|
|
margin: 20upx 30upx 30upx 30upx;
|
|
}
|
|
.search_con .search_box {
|
|
height: 60upx;
|
|
background: #f7f5f5;
|
|
border-radius: 60upx;
|
|
width: 90%;
|
|
}
|
|
.filter_con {
|
|
width: 140upx;
|
|
height: 60upx;
|
|
}
|
|
.filter_box {
|
|
width: 100%;
|
|
height: 60upx;
|
|
font-size: 28upx;
|
|
}
|
|
.filter_box .filter_txt {
|
|
margin-right: 10upx;
|
|
}
|
|
.triangle_bottom {
|
|
border-top: 8upx solid #000;
|
|
border-left: 6upx solid transparent;
|
|
border-right: 6upx solid transparent;
|
|
}
|
|
.search_con .search_icon_box {
|
|
width: 30upx;
|
|
}
|
|
.search_con .search_icon {
|
|
width: 28upx;
|
|
height: 28upx;
|
|
float: right;
|
|
margin-top: 18upx;
|
|
}
|
|
.search_con .share_icon {
|
|
width: 28upx;
|
|
height: 28upx;
|
|
margin: auto;
|
|
}
|
|
.search_con .search_input {
|
|
color: #001419;
|
|
width: calc(100% - 180px);
|
|
height: 60upx;
|
|
line-height: 60upx;
|
|
font-size: 28upx;
|
|
padding-left: 20upx;
|
|
padding-right: 20upx;
|
|
}
|
|
.search_con .search_right {
|
|
font-size: 24upx;
|
|
text-align: center;
|
|
color: #121111;
|
|
width: 10%;
|
|
font-size: 30upx;
|
|
}
|
|
.history_list .history_list_title {
|
|
color: #001419;
|
|
font-size: 30upx;
|
|
line-height: 30upx;
|
|
margin: 0 30upx;
|
|
}
|
|
|
|
/*场馆列表*/
|
|
.changguan_list {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.changguan_nav {
|
|
border-radius: 20upx;
|
|
box-shadow: 0px 5upx 15upx 0px rgba(0, 0, 0, 0.15);
|
|
height: 183upx;
|
|
margin: 0 30upx 50upx 30upx;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
.changguan_nav:first-child {
|
|
margin-top: 30upx;
|
|
}
|
|
.changguan_nav .changguan_nav_img {
|
|
width: 302upx;
|
|
height: 100%;
|
|
border-top-left-radius: 20upx;
|
|
border-bottom-left-radius: 20upx;
|
|
float: left;
|
|
position: relative;
|
|
}
|
|
.changguan_nav .changguan_nav_img .img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-top-left-radius: 20upx;
|
|
border-bottom-left-radius: 20upx;
|
|
}
|
|
.changguan_nav .changguan_nav_content {
|
|
width: calc(100% - 338upx);
|
|
margin-left: 20upx;
|
|
float: left;
|
|
padding-right: 16upx;
|
|
}
|
|
.changguan_nav .changguan_nav_title {
|
|
font-size: 30upx;
|
|
color: #3c3d3b;
|
|
margin-top: 18upx;
|
|
line-height: 40upx;
|
|
}
|
|
.changguan_nav .changguan_nav_subtitle {
|
|
color: #767676;
|
|
font-size: 24upx;
|
|
margin-top: 18upx;
|
|
margin-bottom: 18upx;
|
|
}
|
|
.changguan_nav .changguan_nav_label {
|
|
}
|
|
.changguan_nav .changguan_nav_label_txt {
|
|
width: calc((100% - 40upx) / 3);
|
|
height: 34upx;
|
|
line-height: 34upx;
|
|
text-align: center;
|
|
font-size: 24upx;
|
|
color: #fff;
|
|
}
|
|
.changguan_nav .changguan_nav_label_txt.label1 {
|
|
background: #fdf6e5;
|
|
color: #f4bd67;
|
|
margin-right: 20upx;
|
|
}
|
|
.changguan_nav .changguan_nav_label_txt.label2 {
|
|
background: #f2fcfe;
|
|
color: #80a9f4;
|
|
margin-right: 20upx;
|
|
}
|
|
.changguan_nav .changguan_nav_label_txt.label3 {
|
|
background: #f3f5f8;
|
|
color: #9f9d9d;
|
|
}
|
|
|
|
/*活动列表*/
|
|
.activity_list {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.activity_nav {
|
|
border-radius: 20upx;
|
|
box-shadow: 0px 5upx 15upx 0px rgba(0, 0, 0, 0.15);
|
|
height: 224upx;
|
|
margin: 0 30upx 50upx 30upx;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
.activity_nav:first-child {
|
|
margin-top: 50upx;
|
|
}
|
|
.activity_nav .activity_nav_img {
|
|
width: 302upx;
|
|
height: 100%;
|
|
border-top-left-radius: 20upx;
|
|
border-bottom-left-radius: 20upx;
|
|
float: left;
|
|
position: relative;
|
|
}
|
|
.activity_nav .activity_nav_img .img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-top-left-radius: 20upx;
|
|
border-bottom-left-radius: 20upx;
|
|
}
|
|
.activity_nav .activity_nav_img .activity_icon {
|
|
position: absolute;
|
|
width: 94upx;
|
|
height: 42upx;
|
|
left: 20upx;
|
|
top: -20upx;
|
|
z-index: 10;
|
|
}
|
|
.activity_nav .activity_nav_content {
|
|
width: calc(100% - 338upx);
|
|
margin-left: 20upx;
|
|
float: left;
|
|
padding-right: 16upx;
|
|
}
|
|
.activity_nav .activity_nav_title {
|
|
font-size: 30upx;
|
|
color: #3c3d3b;
|
|
margin-top: 10upx;
|
|
line-height: 40upx;
|
|
}
|
|
.activity_nav .activity_nav_subtitle {
|
|
color: #767676;
|
|
font-size: 24upx;
|
|
margin-top: 8upx;
|
|
margin-bottom: 8upx;
|
|
}
|
|
.activity_nav .activity_nav_time {
|
|
color: #767676;
|
|
font-size: 24upx;
|
|
}
|
|
.activity_nav .activity_nav_label {
|
|
margin-top: 8upx;
|
|
}
|
|
.activity_nav .activity_nav_label_txt {
|
|
padding: 0 10upx;
|
|
height: 34upx;
|
|
line-height: 34upx;
|
|
text-align: center;
|
|
font-size: 24upx;
|
|
color: #fff;
|
|
margin-right: 20upx;
|
|
}
|
|
.activity_nav .activity_nav_label_txt.label1 {
|
|
background: #f27491;
|
|
margin-right: 20upx;
|
|
}
|
|
.activity_nav .activity_nav_label_txt.label2 {
|
|
background: #eaa24e;
|
|
}
|
|
.activity_nav .activity_nav_label_txt:last-child{
|
|
margin-right: 0;
|
|
}
|
|
</style>
|
|
|