<import src="/wxSearch/wxSearch.wxml" />
<import src="../template/activity/common-list.wxml" />
<view class="wxSearch-section">
<view class="search-pancel">
<input bindinput="wxSearchInput" bindfocus="wxSerchFocus" value="{{wxSearchData.value}}" bindblur="wxSearchBlur" name="input" confirm-type="搜索" class="search-input" placeholder="请输入关键字..."></input>
<button bindtap="findEach" class="search-button" form-type="submit" size="mini" plain="true">
<icon type="search" color="#959595" size="12" />
</button>
</view>
</view>
<template is="wxSearch" data="{{wxSearchData}}" />
<view class="scontainer">
<view class="bg">
<view class="choose_user" style="border-bottom:1rpx solid #e6e6e6;">
<view class="choose_user_item" style="color:#{{tradeType==0?'fff':'118fff'}};background:#{{tradeType==0?'118fff':'fff'}};" bindtap="choseTradeType" id="0">全部</view>
<view class="choose_user_item" style="color:#{{tradeType==1?'fff':'118fff'}};background:#{{tradeType==1?'118fff':'fff'}};" bindtap="choseTradeType" id="1">运动</view>
<view class="choose_user_item" style="color:#{{tradeType==2?'fff':'118fff'}};background:#{{tradeType==2?'118fff':'fff'}};" bindtap="choseTradeType" id="2">游戏</view>
<view class="choose_user_item" style="color:#{{tradeType==3?'fff':'118fff'}};background:#{{tradeType==3?'118fff':'fff'}};" bindtap="choseTradeType" id="3">交友</view>
<view class="choose_user_item" style="color:#{{tradeType==4?'fff':'118fff'}};background:#{{tradeType==4?'118fff':'fff'}};" bindtap="choseTradeType" id="4">旅行</view>
<view class="choose_user_item" style="color:#{{tradeType==5?'fff':'118fff'}};background:#{{tradeType==5?'118fff':'fff'}};" bindtap="choseTradeType" id="5">读书</view>
<view class="choose_user_item" style="color:#{{tradeType==6?'fff':'118fff'}};background:#{{tradeType==6?'118fff':'fff'}};" bindtap="choseTradeType" id="6">竞赛</view>
<view class="choose_user_item" style="color:#{{tradeType==7?'fff':'118fff'}};background:#{{tradeType==7?'118fff':'fff'}};" bindtap="choseTradeType" id="7">电影</view>
<view class="choose_user_item" style="color:#{{tradeType==8?'fff':'118fff'}};background:#{{tradeType==8?'118fff':'fff'}};" bindtap="choseTradeType" id="8">音乐</view>
<view class="choose_user_item" style="color:#{{tradeType==9?'fff':'118fff'}};background:#{{tradeType==9?'118fff':'fff'}};" bindtap="choseTradeType" id="9">其他</view>
</view>
</view>
<view class="index-container">
<!--无通知记录-->
<view wx:if="{{moodList.length == 0}}">
<view class="imgitem">
<image src="/static/images/norecord1.png" class="empty_img"></image>
</view>
<view class="txtitem">
<text class="t28rpx">检索不到活动</text>
</view>
</view>
<view wx:if="{{moodList.length > 0}}">
<view class="activities" wx:for="{{moodList}}" wx:key="id">
<view class="activity" wx:if="{{item.acttype == tradeType || tradeType == 0}}" index="{{index}}">
<view class="list_header">
<view class="list_header_left">
<image mode="aspectFill" src="{{item.publisherPic}}" wx:if="publisherPic"></image>
<view>{{item.publisherName}}</view>
</view>
</view>
<view class="horizontal">
<view class="tag tag_{{item.acttype}}">{{item.acttypename}}</view>
<text class="title">{{ item.title }}</text>
</view>
<image mode="aspectFill" class="photo" src="{{item.actPic}}" wx:if="{{item.actPic}}" data-actid="{{item.id}}" data-pubid='{{item.publisherId}}' bindtap="click_activity"></image>
<text class="intro">{{item.content}}</text>
<view>
<text class="time">有效时间：{{ item.endtime }}</text>
</view>
<view>
<text class="location">活动地点：{{ item.address }}</text>
</view>
<view class="content-date list_header_right">
<image src="/static/images/calendar.png"></image>
<text>{{item.pubtime}}</text>
<image src="/static/images/comments.png"></image>
<text class="">{{item.commentnum}}</text>
<image src="/static/images/home-like.png"></image>
<text class="">{{item.likenum}}</text>
</view>
</view>
</view>
<view class="loadingmore">
<view class="no-more">---无更多活动---</view>
</view>
</view>
</view>
</view>
|
@import "/wxSearch/wxSearch.wxss";
.scontainer {
display: flex;
flex-direction: column;
align-items: center;
}
.bg {
background: #fff;
margin-bottom: 12rpx;
}
.choose_user {
padding: 11rpx 31rpx 35rpx 31rpx;
display: flex;
justify-content: space-between;
flex-flow: wrap;
}
.choose_user_item {
width: 120rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
margin-top: 20rpx;
border-radius: 6rpx;
border: 1rpx solid #118fff;
font-size: 28rpx;
letter-spacing: -0.6rpx;
}
.search-button {
border-left: 0 !important;
border-top: 1px solid #fff !important;
border-right: 1px solid #fff !important;
border-bottom: 1px solid #fff !important;
background-color: #fff !important;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: #296fd0 !important;
width: 20%;
margin: 0 !important;
box-shadow: 1px 1px 6px #ecf0f0;
}
.search-button icon {
position: absolute;
margin: 28rpx 16rpx;
}
.search-input {
background-color: #fff;
padding: 16rpx 0 16rpx 32rpx;
min-height: 1rem;
font-size: 30rpx;
/* position: absolute;*/
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
/* border: 1px solid #ededed; */
border-right: 0 !important;
height: 48rpx;
width: 80%;
text-align: left;
box-shadow: 1px 1px 6px #ecf0f0;
}
.share-button {
border: 1px solid #eee !important;
color: #296fd0 !important;
left: 10rpx;
height: 100rpx;
width: 200rpx;
}
.search-pancel {
display: flex;
flex-direction: row;
background-color: #f5f7f7;
}
.search-pancel image {
width: 50rpx;
height: 50rpx;
margin-left: 20rpx;
vertical-align: middle;
}
/*------------------------------*/
.container {
padding: 0 24rpx;
background-color: #fff;
font-family: Microsoft YaHei, Helvetica, Arial, sans-serif;
}
.header {
padding: 50rpx 0;
text-align: center;
font-weight: normal;
font-size: 30rpx;
line-height: 40rpx;
color: #757575;
border-bottom: 2rpx solid #ededed;
margin-bottom: 48rpx;
}
.index-container {
/* padding: 0 24rpx; */
background-color: #fff;
}
.index-header {
text-align: center;
font-weight: normal;
font-size: 30rpx;
line-height: 40rpx;
color: #757575;
/* margin-top: 5rpx; */
}
/*common list for index list page */
.common-list {
margin-bottom: 24rpx;
}
.common-list .list-item {
border-bottom: 1px solid #eee;
padding: 24rpx;
min-height: 150rpx;
overflow: hidden;
}
.common-list .list-item.has-img image.cover {
width: 100%;
height: 300rpx;
border-radius: 15rpx;
overflow: hidden;
}
.common-list .list-item.has-img .content-title1 {
overflow: hidden;
margin-bottom: 10px;
}
.common-list .list-item.has-img .content-title1 text {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 30rpx;
line-height: 1.4;
font-weight: 400;
color: #3a4040;
text-align: center;
}
.common-list .list-item.has-img .content-date {
margin-left: 100rpx;
margin-right: 100rpx;
}
.common-list .list-item.has-img .content-date image {
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
vertical-align: middle;
}
.common-list .list-item .content-date text {
color: #959595;
margin-right: 32rpx;
font-size: 20rpx;
line-height: 1.2;
font-weight: normal;
}
/*common list end */
/*topic list*/
.topic-common-list {
/* padding:30rpx 30rpx; */
}
.topic-list-item {
position: relative;
/* border-bottom: 1px solid #eee; */
overflow: hidden;
clear: both;
/* border: 1px solid #ccc; *//* border-radius: 6px; */
margin-bottom: 30rpx;
background: #fff;
}
.topic-list-item image.cover {
width: 100%;
height: 250rpx;
filter: blur(4px);
border-radius: 10px;
}
.topic-content-title {
padding: 16rpx 0rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
/* border-bottom: 1px solid #fff; */
z-index: 2;
left: 60rpx;
top: 120rpx;
}
.topic-content-title text {
font-size: 48rpx;
line-height: 48rpx;
color: #fff;
}
.topic-content-title-line{
width: 48px;
padding: 16rpx 0rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
border-bottom: 1px solid #fff;
z-index: 2;
left: 64rpx;
top: 180rpx;
}
.topic-content-brief {
/* padding: 0rpx 30rpx 30rpx; */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
z-index: 2;
left: 60rpx;
top: 240rpx;
}
.topic-content-brief text {
font-size: 32rpx;
line-height: 32rpx;
color: #fff;
}
.searchKey {
color: #121b23;
}
/***************************************************/
/*活动详情界面CSS*/
.list_header_left image {
width: 60rpx;
height: 60rpx;
margin-right: 10rpx;
float: left;
border-radius: 40rpx;
overflow: hidden;
}
.list_header view {
float: left;
line-height: 80rpx;
color: #1e1e1e;
font-size: 15px;
}
.list_header .list_header_right {
float: right;
}
.list_header {
overflow: hidden;
border-bottom: 1rpx solid #f4f4f4;
}
/**/
swiper {
height: 380rpx;
margin-bottom: 20rpx;
}
swiper-item, swiper-item image {
width: 100%;
height: 300rpx;
border-radius: 15rpx;
overflow: hidden;
}
.activities .subtitle {
padding: 20rpx 35rpx;
border-top: 20rpx solid #f4f4f4;
background: #fff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
top: 0;
z-index: 999;
}
.activities .subtitle image {
width: 42rpx;
height: 42rpx;
margin-right: 30rpx;
flex-shrink: 0;
}
.activities .subtitle text {
font-size: 28rpx;
color: #666;
}
.activities .subtitle button {
border-radius: 50rpx;
border: 3rpx solid #3688ff;
background: transparent;
color: #3688ff;
font-size: 26rpx;
margin-left: 20rpx;
margin-right: 0;
padding: 6rpx 20rpx;
line-height: 1rem;
}
.activity {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0 0 35rpx;
margin: 0 40rpx;
border-bottom: 10rpx solid #f4f4f4;
}
.horizontal {
display: inline;
padding-top: 18rpx;
padding-bottom: 10rpx;
text-align: left;
}
.horizontal .tag {
display: inline-block;
background: #eee;
color: #666;
font-size: 28rpx;
padding: 2rpx 10rpx;
border-radius: 6rpx;
margin-right: 10rpx;
}
.horizontal .recommend {
background: #118fff;
color: #fff;
}
.horizontal .tag_1 {
background: #ffac00;
color: #fff;
}
.horizontal .tag_2 {
background: #00cdab;
color: #fff;
}
.horizontal .tag_3 {
background: #3688ff;
color: #fff;
}
.horizontal .title {
font-size: 30rpx;
color: #333;
text-align: left;
}
.activity .photo {
width: 670rpx; /* 670rpx */
height: 320rpx;
box-shadow: 0 10rpx 15rpx rgba(0, 0, 0, .1);
border-radius: 12rpx;
overflow: hidden;
margin: 10rpx 0;
}
.activity .intro {
font-size: 28rpx;
color: #666;
padding: 10rpx 0;
text-align: justify;
}
.activity .time {
font-size: 28rpx;
color: #999;
text-align: justify;
padding-top: 10rpx;
}
.activity .location {
font-size: 28rpx;
color: #999;
text-align: justify;
}
.bottom-tip {
display: block;
padding: 40rpx 0;
font-size: 28rpx;
color: #999;
text-align: center;
}
/*页面为空的样式*/
.empty_img {
height: 115rpx;
width: 141rpx;
}
.t28rpx {
font-size: 28rpx;
line-height: 42rpx;
color: rgb(142, 142, 142);
}
.imgitem {
display: flex;
justify-content: center;
margin-top: 73rpx;
}
.txtitem {
display: flex;
justify-content: center;
margin-top: 29rpx;
margin-bottom: 29rpx;
}
|
//index.js
//获取应用实例
var WxSearch = require('../../wxSearch/wxSearch.js')
var common = require('../../utils/common.js')
var Bmob = require("../../utils/bmob.js");
var util = require('../../utils/util.js');
var app = getApp()
var that;
var smoodList;
Page({
data: {
buttonClicked: false, //是否点击跳转
tradeType: 0,
moodList: [],
isEmpty: true,
loading: false,
},
//选择要查询的活动类型
choseTradeType: function (e) {
var tradeType = e.currentTarget.id;
if (tradeType == 0) this.onShow();
else if (tradeType == 1) this.setData({moodList: this.data.sportList});
else if (tradeType == 2) this.setData({ moodList: this.data.gameList });
else if (tradeType == 3) this.setData({ moodList: this.data.friendList });
else if (tradeType == 4) this.setData({ moodList: this.data.travelList });
else if (tradeType == 5) this.setData({ moodList: this.data.readList });
else if (tradeType == 6) this.setData({ moodList: this.data.contestlist });
else if (tradeType == 7) this.setData({ moodList: this.data.movieList });
else if (tradeType == 8) this.setData({ moodList: this.data.musicList });
else if (tradeType == 9) this.setData({ moodList: this.data.otherList });
this.setData({
tradeType: tradeType
})
},
onLoad: function () {
that = this;
//初始化的时候渲染wxSearchdata
WxSearch.init(that, 43, ['一起', '上自习', '开黑组队', '找驴友', '晚上去嗨', '约步走起']);
WxSearch.initMindKeys(['一起', '上自习', '开黑组队', '找驴友', '晚上去嗨','约步走起']);
},
onShow: function () {
that.setData({
loading: false
});
var molist = new Array();
var Diary = Bmob.Object.extend("Events");
var query = new Bmob.Query(Diary);
query.equalTo("isShow", 1); //只统计公开显示的活动
query.descending("createdAt");
query.include("publisher");
// 查询所有数据
query.find({
success: function (results) {
for (var i = 0; i < results.length; i++) {
var publisherId = results[i].get("publisher").objectId;
var title = results[i].get("title");
var content = results[i].get("content");
var acttype = results[i].get("acttype");
var isShow = results[i].get("isShow");
var endtime = results[i].get("endtime");
var address = results[i].get("address");
var acttypename = getTypeName(acttype);
var peoplenum = results[i].get("peoplenum");
var likenum = results[i].get("likenum");
var liker = results[i].get("liker");
var isLike = 0;
var commentnum = results[i].get("commentnum");
var id = results[i].id;
var createdAt = results[i].createdAt;
var pubtime = util.getDateDiff(createdAt);
var _url
var actpic = results[i].get("actpic");
if (actpic) {
_url = results[i].get("actpic")._url;
} else {
_url = "http://bmob-cdn-14867.b0.upaiyun.com/2017/12/01/89a6eba340008dce801381c4550787e4.png";
}
var publisherName = results[i].get("publisher").nickname;
var publisherPic = results[i].get("publisher").userPic;
var jsonA;
jsonA = {
"title": title || '',
"content": content || '',
"acttype": acttype || '',
"isShow": isShow,
"acttypename": acttypename || '',
"endtime": endtime || '',
"address": address || '',
"peoplenum": peoplenum || '',
"id": id || '',
"publisherPic": publisherPic || '',
"publisherName": publisherName || '',
"publisherId": publisherId || '',
"pubtime": pubtime || '',
"actPic": _url || '',
"likenum": likenum,
"commentnum": commentnum,
"is_liked": isLike || ''
}
molist.push(jsonA);
smoodList = molist;
var sportlist = new Array(); //运动
var gamelist = new Array(); //游戏
var friendlist = new Array();//交友
var travellist = new Array();//旅行
var readlist = new Array();//读书
var contestlist = new Array();//竞赛
var movielist = new Array();//电影
var musiclist = new Array();//音乐
var otherlist = new Array();//其他
for (var i in molist){
if (molist[i].acttype == 1) sportlist.push(molist[i]);
else if (molist[i].acttype == 2) gamelist.push(molist[i]);
else if (molist[i].acttype == 3) friendlist.push(molist[i]);
else if (molist[i].acttype == 4) travellist.push(molist[i]);
else if (molist[i].acttype == 5) readlist.push(molist[i]);
else if (molist[i].acttype == 6) contestlist.push(molist[i]);
else if (molist[i].acttype == 7) movielist.push(molist[i]);
else if (molist[i].acttype == 8) musiclist.push(molist[i]);
else if (molist[i].acttype == 9) otherlist.push(molist[i]);
}
that.setData({
moodList: molist,
sportList:sportlist,
gameList:gamelist,
friendList:friendlist,
travelList:travellist,
readList:readlist,
contestlist:contestlist,
movieList:movielist,
musicList:musiclist,
otherList:otherlist,
})
}
},
error: function (error) {
common.dataLoading(error, "loading");
console.log(error)
}
});
},
//js 实现模糊匹配查询
findEach: function (e) {
var that = this
WxSearch.wxSearchAddHisKey(that);
var strFind = that.data.wxSearchData.value;
console.log("strFind=" + strFind);
if (strFind == null || strFind == "") {
wx.showToast({
title: '输入为空',
icon: 'loading',
})
}
if (strFind != "") {
WxSearch.updateHotMindKeys(that, strFind); //更新热门搜索和搜索记忆提示
var nPos;
var resultPost = [];
for (var i in smoodList) {
var sTxt = smoodList[i].title || ''; //活动的标题
nPos = sTxt.indexOf(strFind);
if (nPos >= 0) {//如果输入的关键字在该活动标题中出现过,则匹配该活动
resultPost.push(smoodList[i]); //将该活动加入到搜索到的活动列表中
}
}
that.setData({
moodList: resultPost
})
}
},
// 点击活动进入活动详情页面
click_activity: function (e) {
console.log(getCurrentPages())
if (!this.buttonClicked) {
util.buttonClicked(this);
let actid = e.currentTarget.dataset.actid;
let pubid = e.currentTarget.dataset.pubid;
let user_key = wx.getStorageSync('user_key');
wx.navigateTo ({
url: '/pages/detail/detail?actid=' + actid + "&pubid=" + pubid
});
}
},
//--------------------------------------------------------
wxSearchInput: function (e) {
var that = this
WxSearch.wxSearchInput(e, that);
},
wxSerchFocus: function (e) {
var that = this
WxSearch.wxSearchFocus(e, that);
},
wxSearchBlur: function (e) {
var that = this
WxSearch.wxSearchBlur(e, that);
},
wxSearchKeyTap: function (e) {
var that = this
WxSearch.wxSearchKeyTap(e, that);
},
wxSearchDeleteKey: function (e) {
var that = this
WxSearch.wxSearchDeleteKey(e, that);
},
wxSearchDeleteAll: function (e) {
var that = this;
WxSearch.wxSearchDeleteAll(that);
},
wxSearchTap: function (e) {
var that = this
WxSearch.wxSearchHiddenPancel(that);
}
})
//根据活动类型获取活动类型名称
function getTypeName(acttype) {
var acttypeName = "";
if (acttype == 1) acttypeName = "运动";
else if (acttype == 2) acttypeName = "游戏";
else if (acttype == 3) acttypeName = "交友";
else if (acttype == 4) acttypeName = "旅行";
else if (acttype == 5) acttypeName = "读书";
else if (acttype == 6) acttypeName = "竞赛";
else if (acttype == 7) acttypeName = "电影";
else if (acttype == 8) acttypeName = "音乐";
else if (acttype == 9) acttypeName = "其他";
return acttypeName;
}
|
模板简介：该模板名称为【微信小程序实现搜索栏功能搜索历史搜索结果页面模板制作设计】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
