YangWork
213
pages/tabbar/messages/messages.vue
Normal file
213
pages/tabbar/messages/messages.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-nav-bar fixed="true">
|
||||
<block slot="left">
|
||||
<view class="city">
|
||||
<view>
|
||||
<text class="uni-nav-bar-text">{{ city }}</text>
|
||||
</view>
|
||||
<uni-icons type="arrowdown" color="#666" size="18" />
|
||||
</view>
|
||||
</block>
|
||||
<view class="input-view">
|
||||
<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
|
||||
<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
|
||||
@confirm="confirm" />
|
||||
</view>
|
||||
<block slot="right">
|
||||
<view class="city">
|
||||
搜索
|
||||
</view>
|
||||
</block>
|
||||
</uni-nav-bar>
|
||||
<uni-list>
|
||||
<uni-list-chat clickable @click="onClick(item)" v-for="item in listData" :key="item.id"
|
||||
:title="item.author_name" :avatar="item.cover" :note="item.title" badge-positon="left"
|
||||
:badge-text="item.text">
|
||||
<view class="chat-custom-right">
|
||||
<text class="chat-custom-text">刚刚</text>
|
||||
<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
|
||||
</view>
|
||||
</uni-list-chat>
|
||||
</uni-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
UNITS: {
|
||||
'年': 31557600000,
|
||||
'月': 2629800000,
|
||||
'天': 86400000,
|
||||
'小时': 3600000,
|
||||
'分钟': 60000,
|
||||
'秒': 1000
|
||||
},
|
||||
listData: [],
|
||||
city: '北京'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
confirm() {
|
||||
uni.showToast({
|
||||
title: '搜索'
|
||||
})
|
||||
},
|
||||
onClick(e) {
|
||||
console.log(e)
|
||||
uni.showToast({
|
||||
title: '列表被点击'
|
||||
})
|
||||
},
|
||||
avatar(count) {
|
||||
let arr = []
|
||||
this.avatarList.forEach((item, index) => {
|
||||
if (index < count) {
|
||||
arr.push(item)
|
||||
}
|
||||
})
|
||||
return arr
|
||||
},
|
||||
getList() {
|
||||
var data = {
|
||||
column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
|
||||
};
|
||||
|
||||
uni.request({
|
||||
url: 'https://unidemo.dcloud.net.cn/api/news',
|
||||
data: data,
|
||||
success: data => {
|
||||
if (data.statusCode == 200) {
|
||||
let list = this.setTime(data.data);
|
||||
list = this.reload ? list : this.listData.concat(list);
|
||||
list.map(item => {
|
||||
item.text = Math.floor(Math.random() * (1 - 20) + 20)
|
||||
return item
|
||||
})
|
||||
this.listData = this.getRandomArrayElements(list, 20)
|
||||
}
|
||||
},
|
||||
fail: (data, code) => {
|
||||
console.log('fail' + JSON.stringify(data));
|
||||
}
|
||||
});
|
||||
},
|
||||
getRandomArrayElements(arr, count) {
|
||||
var shuffled = arr.slice(0),
|
||||
i = arr.length,
|
||||
min = i - count,
|
||||
temp, index;
|
||||
while (i-- > min) {
|
||||
index = Math.floor((i + 1) * Math.random());
|
||||
temp = shuffled[index];
|
||||
shuffled[index] = shuffled[i];
|
||||
shuffled[i] = temp;
|
||||
}
|
||||
return shuffled.slice(min);
|
||||
},
|
||||
setTime(items) {
|
||||
var newItems = [];
|
||||
items.forEach(e => {
|
||||
newItems.push({
|
||||
author_name: e.author_name,
|
||||
cover: e.cover,
|
||||
id: e.id,
|
||||
post_id: e.post_id,
|
||||
published_at: this.format(e.published_at),
|
||||
title: e.title
|
||||
});
|
||||
});
|
||||
return newItems;
|
||||
},
|
||||
format(dateStr) {
|
||||
var date = this.parse(dateStr)
|
||||
var diff = Date.now() - date.getTime();
|
||||
if (diff < this.UNITS['天']) {
|
||||
return this.humanize(diff);
|
||||
}
|
||||
var _format = function(number) {
|
||||
return (number < 10 ? ('0' + number) : number);
|
||||
};
|
||||
return date.getFullYear() + '-' + _format(date.getMonth() + 1) + '-' + _format(date.getDate()) + ' ' +
|
||||
_format(date.getHours()) + ':' + _format(date.getMinutes());
|
||||
},
|
||||
parse(str) { //将"yyyy-mm-dd HH:MM:ss"格式的字符串，转化为一个Date对象
|
||||
var a = str.split(/[^0-9]/);
|
||||
return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.chat-custom-right {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.chat-custom-text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
$nav-height: 30px;
|
||||
|
||||
.box-bg {
|
||||
background-color: #F5F5F5;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.city {
|
||||
/* #ifndef APP-PLUS-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
// width: 160rpx;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.input-view {
|
||||
/* #ifndef APP-PLUS-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
// width: 500rpx;
|
||||
flex: 1;
|
||||
background-color: #f8f8f8;
|
||||
height: $nav-height;
|
||||
border-radius: 15px;
|
||||
padding: 0 15px;
|
||||
flex-wrap: nowrap;
|
||||
margin: 7px 0;
|
||||
line-height: $nav-height;
|
||||
}
|
||||
|
||||
.input-uni-icon {
|
||||
line-height: $nav-height;
|
||||
}
|
||||
|
||||
.nav-bar-input {
|
||||
height: $nav-height;
|
||||
line-height: $nav-height;
|
||||
/* #ifdef APP-PLUS-NVUE */
|
||||
width: 370rpx;
|
||||
/* #endif */
|
||||
padding: 0 5px;
|
||||
font-size: 12px;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user