156 lines
3.4 KiB
Plaintext
156 lines
3.4 KiB
Plaintext
<style lang="less" scoped>
|
|
@import url(../../styles/theme.less);
|
|
page {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.ui-search{
|
|
width: 100vw;
|
|
background: #ffffff;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 22;
|
|
}
|
|
|
|
.searchIcon{
|
|
width: 27rpx;
|
|
height: 27rpx;
|
|
margin: 0 20rpx;
|
|
}
|
|
|
|
.main {
|
|
padding: 130rpx 30rpx 60rpx 30rpx;
|
|
background: #ffffff;
|
|
.hot {
|
|
.topic {
|
|
height: 22px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
line-height: 22px;
|
|
}
|
|
.mains {
|
|
height: auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.zanwu {
|
|
height: 240rpx;
|
|
width: 250rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
}
|
|
.list {
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
background: #F5F5F5;
|
|
border-radius: 8rpx;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
margin-right: 24rpx;
|
|
margin-top: 24rpx;
|
|
padding: 0 20rpx;
|
|
.img {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
margin-left: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<template>
|
|
<view class="ui-searchTopic">
|
|
<view class="cu-bar ui-search bg-white">
|
|
<view class="search-form round">
|
|
<image class="searchIcon" src="https://images.ufutx.com/202102/26/4081d59162d4a38736c323ed7fffd3db.png" alt=""></image>
|
|
<input type="text" placeholder="搜索话题" confirm-type="search" bindinput="inputTyping" />
|
|
</view>
|
|
</view>
|
|
<view class="main" v-if="loading">
|
|
<view class="hot">
|
|
<view class="topic" v-if="!show">热门话题</view>
|
|
<view class="mains">
|
|
<view class="list f-fcc" v-for="(item,index) in list" :key="index">
|
|
# {{item.name}}
|
|
<image v-if="item.is_hot == 1" class="img" src="https://images.ufutx.com/202103/02/0dffc4de154e82b1a75ae4c0a2a62ecf.png" />
|
|
</view>
|
|
<image class="zanwu" v-if="list && list.length == 0" src="https://images.ufutx.com/202101/28/91c53fec5c317fc68138cb4dd42e9d8f.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import wepy from '@wepy/core'
|
|
import https from '../../mixins/https'
|
|
import base from '../../mixins/base'
|
|
import {service} from '../../config'
|
|
|
|
wepy.page({
|
|
config: {},
|
|
mixins: [https, base],
|
|
|
|
data: {
|
|
list: [], // 列表数据
|
|
arr: [],
|
|
loading: false,
|
|
show: false
|
|
},
|
|
methods: {
|
|
getList() {
|
|
let vm = this
|
|
vm.$showLoading('加载中...')
|
|
vm.$get({url: `${service.host}/moment/topics`}).then(({code, data}) => {
|
|
if (code === 0) {
|
|
vm.list = data.data
|
|
vm.arr = data.data
|
|
vm.loading = true
|
|
}
|
|
wx.hideLoading()
|
|
}).catch(err => {
|
|
wx.hideLoading()
|
|
console.log(err)
|
|
})
|
|
},
|
|
inputTyping(e) {
|
|
let vm = this
|
|
let key = e.$wx.detail.value
|
|
if (key == '') {
|
|
vm.list = vm.arr
|
|
vm.show = false
|
|
} else {
|
|
vm.list = []
|
|
vm.arr.forEach(ele => {
|
|
if (ele.name.indexOf(key) >= 0) {
|
|
vm.list = vm.list.concat([ele])
|
|
}
|
|
})
|
|
if (vm.list && vm.list.length == 0) {
|
|
vm.show = true
|
|
}
|
|
}
|
|
}
|
|
},
|
|
onShow() {
|
|
},
|
|
onLoad() {
|
|
let vm = this
|
|
vm.getList()
|
|
}
|
|
})
|
|
</script>
|
|
<config>
|
|
{
|
|
navigationBarTitleText: '更多话题',
|
|
backgroundColorTop: '#ffffff',
|
|
backgroundColorBottom: '#ffffff',
|
|
}
|
|
</config>
|