Skip to content

C
crisis-event-miniprogram
Commit 7de24d9b by liangyuhang
Options

添加搜索页和搜索结果页，将事件列表抽出为组件

parent db5935e1
Showing with 763 additions and 47 deletions
app.json
......@@ -3,7 +3,10 @@
"pages/index/index",
"pages/report/report",
"pages/library/library",
"pages/usercenter/usercenter"
"pages/usercenter/usercenter",
"pages/search-page/search-page",
"pages/search-result/search-result"
],
"window": {
"backgroundTextStyle": "light",
......@@ -12,28 +15,33 @@
"navigationBarTextStyle": "white"
},
"tabBar": {
"selectedColor":"#4551c2",
"list": [{
"selectedColor": "#4551c2",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "image/icon_cloud.png",
"selectedIconPath": "image/icon_cloud_HL.png",
"iconPath": "image/tabbar/homepage.png",
"selectedIconPath": "image/tabbar/homepage_active.png",
"text": "首页"
},{
},
{
"pagePath": "pages/report/report",
"iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_API_HL.png",
"text": "危机报告"
}, {
},
{
"pagePath": "pages/library/library",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"text": "危机库"
}, {
},
{
"pagePath": "pages/usercenter/usercenter",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"iconPath": "image/tabbar/user.png",
"selectedIconPath": "image/tabbar/user_active.png",
"text": "用户中心"
}]
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json",
......
components/eventList/eventList.js 0 → 100644
// components/eventList/eventList.js
Component({
/**
* 组件的属性列表
*/
properties: {
eventList:Object
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
components/eventList/eventList.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
components/eventList/eventList.wxml 0 → 100644
<!--components/eventList/eventList.wxml-->
<block wx:for="{{eventList}}" wx:key="index">
<view class="list">
<view class="image-box">
<image src="https://crisis.zhiweidata.com/app/{{item.imgUrl}}" mode="aspectFill" lazy-load="true" />
</view>
<view class="r">
<rich-text nodes="{{item.eventName}}" class="title"></rich-text>
<view class="score">公关指数：<text style="color:#F7815A">{{item.interveneScore}}</text></view>
<text class="brand">{{item.priBrand}}</text>
<text class="time">{{dateUtil.dateFormat(item.startTime,'yyyy.MM.dd')}}</text>
</view>
</view>
</block>
components/eventList/eventList.wxss 0 → 100644
/* components/eventList/eventList.wxss */
/* 列表 */
.list{
display: flex;
height: 150rpx;
margin: 20rpx;
border-bottom: 1px solid #e3e4e4;
}
.list .image-box{
width: 150rpx;
text-align:center;
}
.list .image-box image{
width: 120rpx;
height: 120rpx;
border-radius: 50%;
}
.r{
margin-left: 20rpx;
width: 100%;
position: relative;
}
.r .title{
font-weight: bold;
font-size: 30rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.r .score{
position: absolute;
font-size: 28rpx;
color: #A0A0A0;
top: 50rpx;
left: 0;
}
.r .brand{
position: absolute;
background-color: #E5EDFA;
font-size: 28rpx;
color: #0A63EA;
bottom: 15rpx;
left: 0;
}
.r .time{
position: absolute;
font-size: 28rpx;
color: #A0A0A0;
bottom: 15rpx;
right: 0;
}
\ No newline at end of file
components/reportList/reportList.js
......@@ -4,7 +4,7 @@ Component({
* 组件的属性列表
*/
properties: {
reportList:Object
},
/**
......
components/reportList/reportList.wxml
<!--components/reportList.wxml-->
<view id="report" class="con">
<block wx:for="{{crisisReport}}" wx:key="index">
<!-- 首个新闻 -->
<view class="report-first" wx:if="{{index==0}}" data-item="{{crisisReport[0]}}">
<image src="https://crisis.zhiweidata.com/app/{{crisisReport[0].imgUrl}}" />
<view class="info">{{crisisReport[0].reportName}}</view>
</view>
<!-- 列表 -->
<view class="report-list" wx:if="{{index>0}}">
<view class="imgBox">
<image mode="heightFix" src="https://crisis.zhiweidata.com/app/{{item.imgUrl}}"/>
</view>
<view class="content">
<text class="report-name">{{item.reportName}}</text>
<text class="report-introduction">{{item.introduction}}</text>
<text class="report-time">{{dateUtil.dateFormat(item.publishTime,'yyyy/MM/dd')}}</text>
</view>
</view>
</block>
</view>
<text>等危机报告一起</text>
pages/index/index.js
......@@ -103,5 +103,12 @@ Page({
})
}
})
}
},
// 跳转搜索页
toSearchPage: function () {
wx.navigateTo({
url: '/pages/search-page/search-page',
})
},
})
pages/index/index.wxml
......@@ -17,9 +17,9 @@
<view id="top" class="con">
<!-- 搜索 -->
<view class="search">
<view class="search_in">
<view class="search_in" bindtap='toSearchPage'>
<input type="text"/>
<button class="search_btn" bindtap="search">搜索</button>
<button class="search_btn">搜索</button>
</view>
</view>
<!-- 锚点 -->
......
pages/library/library.js
......@@ -43,7 +43,7 @@ Page({
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.getEevntList();
this.getEeventList();
},
switchTap(e){
var _index = e.currentTarget.dataset.index;
......@@ -55,14 +55,14 @@ Page({
industry:_name,
eventList:[]
})
this.getEevntList();
this.getEeventList();
},
getEevntList(){
getEeventList(){
this.setData({
isloading:true
})
wx.showLoading({
title: '加载中...',
title: '加载中...'
})
http.getRequest('/events?page='+this.data.page+'&size='+this.data.size+'&industry='+this.data.industry).then(res=>{
if(res.data.code==200){
......@@ -111,6 +111,7 @@ Page({
//下一页无数据
return wx.showToast({
title: '没有下一页了!',
icon: 'none'
})
}
// 防止加载时刷新
......@@ -118,7 +119,7 @@ Page({
this.setData({
page:this.data.page+1
})
this.getEevntList()
this.getEeventList()
},
/**
......
pages/library/library.json
{
"usingComponents": {}
"usingComponents": {
"eventList": "/components/eventList/eventList"
}
}
\ No newline at end of file
pages/library/library.wxml
......@@ -9,7 +9,7 @@
</view>
</view>
<view>
<!-- <view>
<block wx:for="{{eventList}}" wx:key="index">
<view class="list">
<view class="image-box">
......@@ -23,6 +23,8 @@
</view>
</view>
</block>
</view>
</view> -->
<!-- 列表 -->
<eventList eventList="{{eventList}}"></eventList>
<wxs module="dateUtil" src="../../wxs/timeUtil.wxs"></wxs>
\ No newline at end of file
pages/library/library.wxss
......@@ -49,7 +49,6 @@
height: 120rpx;
border-radius: 50%;
}
.r{
margin-left: 20rpx;
width: 100%;
......
pages/search-page.js 0 → 100644
// pages/search-page.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
pages/search-page.json 0 → 100644
{
"usingComponents": {}
}
\ No newline at end of file
pages/search-page.wxml 0 → 100644
<!--pages/search-page.wxml-->
<text>pages/search-page.wxml</text>
pages/search-page.wxss 0 → 100644
/* pages/search-page.wxss */
\ No newline at end of file
pages/search-page/search-page.js 0 → 100644
// pages/search-page/search-page.js
Page({
/**
* 页面的初始数据
*/
data: {
keyword:'',
hotSearchList: [],
historySearch: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
// 获取搜索历史
this.getHistorySearch();
},
//返回首页
cancel(){
wx.navigateBack({})
},
//绑定输出内容
getSearchInput(e){
// console.log(e)
this.setData({
keyword: e.detail.value
})
},
//跳转搜索结果页
toSearchResult(){
if (this.data.keyword.trim()) {
// 记录搜索
let historySearch = wx.getStorageSync('historySearch') || [];
historySearch = historySearch.filter(item => item !== this.data.keyword)
historySearch.unshift(this.data.keyword);
console.log(this.data.keyword)
if (historySearch.length>10){
historySearch.pop();
}
wx.setStorageSync('historySearch', historySearch);
// 跳转到搜索结果页
wx.navigateTo({
url: '/pages/search-result/search-result?keyword=' + this.data.keyword,
})
}
},
// 获取搜索历史
getHistorySearch(){
this.setData({
historySearch:wx.getStorageSync('historySearch')
});
},
// 清除搜索历史
clearHistory(){
wx.removeStorageSync('historySearch');
this.getHistorySearch();
},
//点击历史搜索
onHistorySearch(e){
this.setData({
keyword: e.currentTarget.dataset.keyword
});
this.toSearchResult()
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
pages/search-page/search-page.json 0 → 100644
{
"usingComponents": {}
}
\ No newline at end of file
pages/search-page/search-page.wxml 0 → 100644
<!--pages/search-page/search-page.wxml-->
<!-- 搜索栏 -->
<view class='search-bar'>
<view class='search-box'>
<input placeholder="请输入关键词搜索" class='sear-input' bindconfirm='toSearchResult' bindinput='getSearchInput' value='{{keyword}}'></input>
<image src='../../image/search.png' class='search-img'></image>
</view>
<text class='cancel' bindtap='cancel'>取消</text>
</view>
<!-- 热点危机 -->
<!-- <view class='hot-search'>
<view class='title'>
<text>热点危机</text>
<image src="../../image/riseSpeed.png"></image>
</view>
<view class='list'>
</view>
</view> -->
<!-- 历史搜索 -->
<view class='history-search'>
<view class='title'>
<text>历史搜索</text>
<view class='clear-history'>
<image src='../../image/clear.png' bindtap='clearHistory'></image>
</view>
</view>
<block wx:for="{{historySearch}}" wx:key='{{item}}'>
<view class='list'>
<text class='tags' bindtap='onHistorySearch' data-keyword="{{item}}">{{item}}</text>
</view>
</block>
</view>
pages/search-page/search-page.wxss 0 → 100644
/* pages/search-page/search-page.wxss */
/* 搜索栏 */
.search-bar {
width: 100%;
position: fixed;
top: 0;
left: 0;
color: #777;
background: #fff;
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.07);
z-index: 3;
}
.search-bar .search-box {
position: relative;
height: 60rpx;
background: #f7f7f7;
z-index: 999;
width: 80%;
margin-left: 70rpx;
border-radius: 50rpx;
margin: 20rpx 0 20rpx 20rpx;
}
.sear-input {
height: 60rpx;
border-radius: 50rpx;
border: 0;
margin: 0 30rpx 0 64rpx;
line-height: 48rpx;
vertical-align: top;
background: #f7f7f7;
font-size: 28rpx;
}
.search-bar .cancel {
font-size: 28rpx;
position: absolute;
right: 30rpx;
top: 31rpx;
color: #eb2444;
}
.search-bar .search-box .search-img {
width: 32rpx;
height: 32rpx;
position: absolute;
left: 20rpx;
top: 14rpx;
display: block;
}
/* 热门搜索 */
.hot-search{
padding: 20rpx;
margin-top: 100rpx;
height: 100rpx;
}
.hot-search .title text{
font-size: 32rpx;
color: #333333;
font-weight: 600;
padding-right: 14rpx;
}
.hot-search .title image{
width: 32rpx;
height: 32rpx;
}
.hot-search .list{
height: 20rpx;
}
/* 历史搜索 */
.history-search{
padding: 20rpx;
margin-top: 100rpx;
}
.history-search .title{
margin-bottom: 20rpx;
}
.history-search .title text{
font-size: 32rpx;
color: #333333;
font-weight: 600;
padding-right: 14rpx;
}
.history-search .title .clear-history{
float: right;
}
.history-search .title .clear-history image{
width: 32rpx;
height: 32rpx;
}
.history-search .list {
overflow: hidden;
font-size: 26rpx;
text-align: center;
display: inline-block;
}
.history-search .list .tags {
max-width: 300rpx;
overflow: hidden;
float: left;
border-radius: 50rpx;
white-space: nowrap;
text-overflow: ellipsis;
background-color: #f2f2f2;
box-sizing: border-box;
margin-right: 20rpx;
margin-bottom: 20rpx;
padding: 10rpx 30rpx;
}
\ No newline at end of file
pages/search-result/search-result.js 0 → 100644
// pages/search-result/search-result.js
var http = require('../../utils/http')
Page({
/**
* 页面的初始数据
*/
data: {
page:1,
size:10,
keyword:'',
type:1,
list:[],
total:-1
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// console.log(options.keyword)
this.setData({
keyword: options.keyword
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.getListByKeyword();
},
getListByKeyword(){
var params = {
page: this.data.page,
size: this.data.size,
keyword: this.data.keyword
}
var _type=this.data.type;
if (_type==1){
this.getEventListByKeyword(params);
}else{
this.getReportListByKeyword(params);
}
},
//根据关键词查询事件列表
getEventListByKeyword(params){
http.getRequest('/search/events',params).then(res=>{
// console.log(res)
if(res.data.success){
this.setData({
list:res.data.data.list,
total:res.data.data.total
})
}
}).catch(() => {
wx.showToast({
title: '请求失败!',
icon: 'none'
})
});
},
//根据关键词查询报告列表
getReportListByKeyword(params){
http.getRequest('/search/reports',params).then(res=>{
// console.log(res)
if(res.data.success){
this.setData({
list:res.data.data.list,
total:res.data.data.total
})
}
}).catch(() => {
wx.showToast({
title: '请求失败!',
icon: 'none'
})
});
},
switchTap(e) {
var _type = e.currentTarget.dataset.type;
this.setData({
type: _type
});
this.getListByKeyword();
},
getSearchInput(e){
this.setData({
keyword: e.detail.value
})
},
//返回上一页
cancel(){
wx.navigateBack({})
},
//搜索
search(){
this.getListByKeyword(e);
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
pages/search-result/search-result.json 0 → 100644
{
"usingComponents": {
"eventList": "/components/eventList/eventList",
"reportList": "/components/reportList/reportList"
}
}
\ No newline at end of file
pages/search-result/search-result.wxml 0 → 100644
<!--pages/search-result/search-result.wxml-->
<view>
<!-- 顶部 -->
<view class='fixed-box'>
<view class='search-bar'>
<view class='search-box'>
<input class='sear-input' value="{{keyword}}" bindinput='getSearchInput' confirm-type='search' bindconfirm='search'></input>
<image src='../../image/search.png' class='search-img'></image>
</view>
<text class='cancel' bindtap='cancel'>取消</text>
</view>
<view class='tabs'>
<text class="tab-item {{type==1?'active':''}}" bindtap='switchTap' data-type="1">危机</text>
<text class="tab-item {{type==2?'active':''}}" bindtap='switchTap' data-type="2">报告</text>
</view>
</view>
<!-- 列表 -->
<view style="margin-top: 180rpx;">
<view wx:if="{{type==1}}">
<eventList eventList="{{list}}"></eventList>
</view>
<view wx:else>
<reportList reportList="{{list}}"></reportList>
</view>
</view>
</view>
pages/search-result/search-result.wxss 0 → 100644
/* pages/search-result/search-result.wxss */
.fixed-box {
position: fixed;
width: 100%;
top: 0;
z-index: 999;
height: 120rpx;
background: #fff;
}
.search-bar {
width: 100%;
top: 0;
left: 0;
color: #777;
background: #fff;
z-index: 3;
}
.search-bar .search-box {
position: relative;
height: 60rpx;
background: #f7f7f7;
z-index: 999;
width: 80%;
margin-left: 70rpx;
border-radius: 50rpx;
margin: 20rpx 0 20rpx 20rpx;
}
.sear-input {
height: 60rpx;
border-radius: 50rpx;
border: 0;
margin: 0 30rpx 0 64rpx;
line-height: 48rpx;
vertical-align: top;
background: #f7f7f7;
font-size: 28rpx;
}
.search-bar .cancel {
font-size: 28rpx;
position: absolute;
right: 30rpx;
top: 31rpx;
color: #eb2444;
}
.search-bar .search-box .search-img {
width: 32rpx;
height: 32rpx;
position: absolute;
left: 20rpx;
top: 14rpx;
display: block;
}
.fixed-box .tabs {
width: 100%;
height: 60rpx;
line-height: 60rpx;
z-index: 999;
background: #fff;
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.07);
}
.fixed-box .tabs .tab-item {
display: inline-block;
width: 50%;
text-align: center;
font-size: 28rpx;
}
.fixed-box .tabs .tab-item.active {
color: #025FEA;
border-bottom: 1px solid #025FEA;
}
\ No newline at end of file
project.private.config.json
......@@ -25,8 +25,26 @@
"scene": null
},
{
"name": "危机库",
"pathName": "pages/library/library",
"name": "首页",
"pathName": "pages/index/index",
"query": "",
"scene": null
},
{
"name": "搜索页",
"pathName": "pages/search-page/search-page",
"query": "",
"scene": null
},
{
"name": "pages/search-page/search-page",
"pathName": "pages/search-page/search-page",
"query": "",
"scene": null
},
{
"name": "pages/search-result/search-result",
"pathName": "pages/search-result/search-result",
"query": "",
"scene": null
}
......
utils/http.js
// const baseURL = 'https://crisis.zhiweidata.com'
const baseURL = 'http://192.168.0.194:8088'
const imgURL = baseURL+'/app/'
function wxPromisify(fn) {
return function (obj = {}) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment