Skip to content

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

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

parent db5935e1
Showing with 793 additions and 76 deletions
app.json
{ {
"pages": [ "pages": [
"pages/index/index", "pages/index/index",
"pages/report/report", "pages/report/report",
"pages/library/library", "pages/library/library",
"pages/usercenter/usercenter" "pages/usercenter/usercenter",
], "pages/search-page/search-page",
"window": { "pages/search-result/search-result"
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#025FEA", ],
"navigationBarTitleText": "危机汇", "window": {
"navigationBarTextStyle": "white" "backgroundTextStyle": "light",
}, "navigationBarBackgroundColor": "#025FEA",
"tabBar": { "navigationBarTitleText": "危机汇",
"selectedColor":"#4551c2", "navigationBarTextStyle": "white"
"list": [{ },
"pagePath": "pages/index/index", "tabBar": {
"iconPath": "image/icon_cloud.png", "selectedColor": "#4551c2",
"selectedIconPath": "image/icon_cloud_HL.png", "list": [
"text": "首页" {
},{ "pagePath": "pages/index/index",
"pagePath": "pages/report/report", "iconPath": "image/tabbar/homepage.png",
"iconPath": "image/icon_API.png", "selectedIconPath": "image/tabbar/homepage_active.png",
"selectedIconPath": "image/icon_API_HL.png", "text": "首页"
"text": "危机报告" },
}, { {
"pagePath": "pages/library/library", "pagePath": "pages/report/report",
"iconPath": "image/icon_component.png", "iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_component_HL.png", "selectedIconPath": "image/icon_API_HL.png",
"text": "危机库" "text": "危机报告"
}, { },
"pagePath": "pages/usercenter/usercenter", {
"iconPath": "image/icon_component.png", "pagePath": "pages/library/library",
"selectedIconPath": "image/icon_component_HL.png", "iconPath": "image/icon_component.png",
"text": "用户中心" "selectedIconPath": "image/icon_component_HL.png",
}] "text": "危机库"
}, },
"style": "v2", {
"sitemapLocation": "sitemap.json", "pagePath": "pages/usercenter/usercenter",
"lazyCodeLoading": "requiredComponents" "iconPath": "image/tabbar/user.png",
} "selectedIconPath": "image/tabbar/user_active.png",
"text": "用户中心"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}
\ No newline at end of file
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({ ...@@ -4,7 +4,7 @@ Component({
* 组件的属性列表 * 组件的属性列表
*/ */
properties: { properties: {
reportList:Object
}, },
/** /**
......
components/reportList/reportList.wxml
<!--components/reportList.wxml--> <!--components/reportList.wxml-->
<view id="report" class="con"> <text>等危机报告一起</text>
<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>
pages/index/index.js
...@@ -103,5 +103,12 @@ Page({ ...@@ -103,5 +103,12 @@ Page({
}) })
} }
}) })
} },
// 跳转搜索页
toSearchPage: function () {
wx.navigateTo({
url: '/pages/search-page/search-page',
})
},
}) })
pages/index/index.wxml
...@@ -17,9 +17,9 @@ ...@@ -17,9 +17,9 @@
<view id="top" class="con"> <view id="top" class="con">
<!-- 搜索 --> <!-- 搜索 -->
<view class="search"> <view class="search">
<view class="search_in"> <view class="search_in" bindtap='toSearchPage'>
<input type="text"/> <input type="text"/>
<button class="search_btn" bindtap="search">搜索</button> <button class="search_btn">搜索</button>
</view> </view>
</view> </view>
<!-- 锚点 --> <!-- 锚点 -->
......
pages/library/library.js
...@@ -43,7 +43,7 @@ Page({ ...@@ -43,7 +43,7 @@ Page({
* 生命周期函数--监听页面显示 * 生命周期函数--监听页面显示
*/ */
onShow: function () { onShow: function () {
this.getEevntList(); this.getEeventList();
}, },
switchTap(e){ switchTap(e){
var _index = e.currentTarget.dataset.index; var _index = e.currentTarget.dataset.index;
...@@ -55,14 +55,14 @@ Page({ ...@@ -55,14 +55,14 @@ Page({
industry:_name, industry:_name,
eventList:[] eventList:[]
}) })
this.getEevntList(); this.getEeventList();
}, },
getEevntList(){ getEeventList(){
this.setData({ this.setData({
isloading:true isloading:true
}) })
wx.showLoading({ wx.showLoading({
title: '加载中...', title: '加载中...'
}) })
http.getRequest('/events?page='+this.data.page+'&size='+this.data.size+'&industry='+this.data.industry).then(res=>{ http.getRequest('/events?page='+this.data.page+'&size='+this.data.size+'&industry='+this.data.industry).then(res=>{
if(res.data.code==200){ if(res.data.code==200){
...@@ -111,6 +111,7 @@ Page({ ...@@ -111,6 +111,7 @@ Page({
//下一页无数据 //下一页无数据
return wx.showToast({ return wx.showToast({
title: '没有下一页了!', title: '没有下一页了!',
icon: 'none'
}) })
} }
// 防止加载时刷新 // 防止加载时刷新
...@@ -118,7 +119,7 @@ Page({ ...@@ -118,7 +119,7 @@ Page({
this.setData({ this.setData({
page:this.data.page+1 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 @@ ...@@ -9,7 +9,7 @@
</view> </view>
</view> </view>
<view> <!-- <view>
<block wx:for="{{eventList}}" wx:key="index"> <block wx:for="{{eventList}}" wx:key="index">
<view class="list"> <view class="list">
<view class="image-box"> <view class="image-box">
...@@ -23,6 +23,8 @@ ...@@ -23,6 +23,8 @@
</view> </view>
</view> </view>
</block> </block>
</view> </view> -->
<!-- 列表 -->
<eventList eventList="{{eventList}}"></eventList>
<wxs module="dateUtil" src="../../wxs/timeUtil.wxs"></wxs> <wxs module="dateUtil" src="../../wxs/timeUtil.wxs"></wxs>
\ No newline at end of file
pages/library/library.wxss
...@@ -49,7 +49,6 @@ ...@@ -49,7 +49,6 @@
height: 120rpx; height: 120rpx;
border-radius: 50%; border-radius: 50%;
} }
.r{ .r{
margin-left: 20rpx; margin-left: 20rpx;
width: 100%; 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 @@ ...@@ -25,8 +25,26 @@
"scene": null "scene": null
}, },
{ {
"name": "危机库", "name": "首页",
"pathName": "pages/library/library", "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": "", "query": "",
"scene": null "scene": null
} }
......
utils/http.js
// const baseURL = 'https://crisis.zhiweidata.com' // const baseURL = 'https://crisis.zhiweidata.com'
const baseURL = 'http://192.168.0.194:8088' const baseURL = 'http://192.168.0.194:8088'
const imgURL = baseURL+'/app/'
function wxPromisify(fn) { function wxPromisify(fn) {
return function (obj = {}) { 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