<template>
<view class="content">
<view class="content_top">
<u-navbar leftText="" height="44px" :bgColor="bgColor" :placeholder="true">
<view class="navbar_left hflex acenter" slot="left">
<image src="../../../static/images/index/logo.png" style="width: 160rpx;height: 60rpx;"></image>
<view class="dian"></view>
<view class="hflex acenter" @click="toWeather">
<image :src="weather.icon" style="width: 32rpx;height: 32rpx;margin-right: 8rpx;"></image>
<view class="text_style1">{{weather.min}}°~{{weather.max}}°</view>
</view>
</view>
</u-navbar>
<view class="search hflex acenter">
<view class="hflex acenter" @click="changeCity">
<view class="city">{{city}}</view>
<u-icon name="arrow-down-fill" color="#000" size="10"></u-icon>
</view>
<u-input v-model="serach_value" type="text" :border="true" placeholder="搜索关键词" shape="circle"
prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" @focus="focus">
</u-input>
</view>
</view>
<view class="swiper">
<u-swiper :list="bannerList" radius="20rpx" @click="toBanner"></u-swiper>
</view>
<view class="notice hflex acenter jbetween">
<!-- <view class="notice_left">公告</view> -->
<u-notice-bar :text="notice_text" direction="column" icon="公告" color="#7a7b7c" bgColor="#f3f7ff"></u-notice-bar>
<view class="hflex acenter" @click="toNotice">
<view class="text1">更多</view>
<u-icon name="arrow-right" color="#bebebf" size="14"></u-icon>
</view>
</view>
<view class="boxs hflex acenter jbetween">
<image :src="class_img1" mode="widthFix" style="width: 336rpx;" @click="toDetail(1)"></image>
<image :src="class_img2" mode="widthFix" style="width: 336rpx;" @click="toDetail(2)"></image>
</view>
<view class="boxs hflex acenter jbetween">
<image :src="class_img3" mode="widthFix" style="width: 220rpx;" @click="toDetail(3)"></image>
<image :src="class_img4" mode="widthFix" style="width: 220rpx;" @click="toDetail(4)"></image>
<image :src="class_img5" mode="widthFix" style="width: 220rpx;" @click="toDetail(5)"></image>
</view>
<view class="boxs">
<u-tabs :list="tabs" @click="changeTaaba"
:scrollable = "false"
:activeStyle="{
color: '#000',
}" :inactiveStyle="{
color: '#888888'
}"></u-tabs>
</view>
<view class="boxs">
<news-module :pageList="pageList"></news-module>
</view>
</view>
</template>
<script>
import $api, { closeLoading } from '@/static/js/api.js'
var that = ''
const app = getApp().globalData
export default {
data() {
return {
title: 'Hello',
weather: {
icon: '/static/icons/100.svg',
min: 0,
max: 10
},
city: '',
location: '',
serach_value: '',
bannerList: [
"/static/images/index/class_img1.png",
"/static/images/index/class_img1.png"
],
notice_text: [
'找工作有妙招，这里看过来~',
'浔阳江头夜送客'
],
class_img1: '/static/images/index/class_img1.png',
class_img2: '/static/images/index/class_img2.png',
class_img3: '/static/images/index/class_img3.png',
class_img4: '/static/images/index/class_img4.png',
class_img5: '/static/images/index/class_img5.png',
tabs: [
{
name: '推荐',
},
{
name: '发现',
},
{
name: '资讯',
},
{
name: '实时',
},
{
name: '娱乐',
},
{
name: '美食',
}
],
pageList: [
{
title: '2022年上半年十部好剧，《开端》第7名，《人世间》第4名，值得观看',
imgs: [
"/static/images/index/class_img1.png",
"/static/images/index/class_img1.png",
"/static/images/index/class_img1.png"
],
type: '资讯',
client: '澎湃新闻客户端',
comment: 77
}
],
bgColor: 'rgb(255,255,255,0)',
}
},
async onLoad() {
that = this
await this.getCity()
// that.HXlogin()
},
onShow() {
},
watch: {
city(newVal) {
console.log('城市数据发生改变');
that.getCity()
}
},
onPageScroll(e) {
if(e.scrollTop != 0) {
that.bgColor = "#fff"
} else {
that.bgColor = 'rgba(255,255,255,0)'
}
},
methods: {
// 获取当前位置
getCity() {
that.city = uni.getStorageSync('city')
if(!that.city) {
return new Promise((resolve, reject) => {
app.getLoca().then(res=> {
console.log('getLoaction',res);
that.city = res[0].regeocodeData.addressComponent.city
uni.setStorageSync('city',that.city)
uni.setStorageSync('locationCity',that.city)
})
})
}
that.getWeather()
},
changeCity() {
$api.jump('/page_index/pages/index/changeCity')
},
// 获取当前城市天气
getWeather() {
uni.request({
url: 'https://geoapi.qweather.com/v2/city/lookup',
data: {
key: '682de67f4b8d4a5e97bc63ed722ae3cf',
location:that.city
},
header:{
'content-type': 'application/x-www-form-urlencoded',
},
success(res) {
uni.request({
url: "https://devapi.qweather.com/v7/weather/7d",
data: {
location: res.data.location[0].id,
key: '682de67f4b8d4a5e97bc63ed722ae3cf'
},
header:{
'content-type': 'application/x-www-form-urlencoded',
},
success(res2) {
that.weather = {
icon: '/static/icons/' + res2.data.daily[0].iconDay + '.svg',
min: res2.data.daily[0].tempMin,
max: res2.data.daily[0].tempMax
}
}
})
}
})
},
// 点击天气
toWeather() {
// $api.jump('/page_index/pages/index/weather')
},
// 轮播图跳转
toBanner(e) {
console.log("点击轮播",e);
},
// 点击输入框
focus() {
$api.jump('/page_index/pages/index/search')
},
// 公告列表
toNotice() {
$api.jump('/page_index/pages/index/noticeList')
},
toDetail(index) {
var url = ''
switch(index) {
case 1:
url = '/page_index/pages/demand/demand';
break;
case 2:
url = '/page_index/pages/purchase/purchase';
break;
case 3:
url = '/page_index/pages/repair/repair';
break;
case 4:
url = '/page_index/pages/bidding/bidding';
break;
case 5:
url = '/page_index/pages/resources/resources';
break;
}
console.log(url);
$api.jump(url)
},
// 切换tabs
changeTaaba(e) {
console.log(e);
},
HXlogin() {
var HXtoken = uni.getStorageSync('HXtoken')
if(HXtoken) {
var userId = uni.getStorageSync('id')
var options = {
user: userId,
accessToken: HXtoken,
appKey: uni.WebIM.config.appKey,
}
uni.WebIM.conn.open(options);
}
}
}
}
</script>
<style lang="scss" scoped>
.content::v-deep {
// padding: 0 30rpx;
background: #fff;
.content_top {
background: url('../../../static/images/index/bg.png') no-repeat;
background-size: 100%;
box-sizing: border-box;
padding: 0 30rpx;
.navbar_left {
.dian {
width: 8rpx;
height: 8rpx;
background: #232323;
border-radius: 50%;
margin: 0 6rpx 0 12rpx;
}
}
.search {
width: 100%;
box-sizing: border-box;
padding: 20rpx;
margin-top: 36rpx;
.city {
color: #222222;
font-size: 32rpx;
margin-right: 16rpx;
}
.u-input {
border: solid 1rpx #526eff;
background: #fff;
height: 76rpx;
margin-left: 16rpx;
padding: 0 24rpx !important;
}
}
}
.swiper {
width: 690rpx;
// box-sizing: border-box;
// padding: 0 30rpx;
// height: 340rpx;
margin: 24rpx 30rpx 20rpx;
border-radius: 20rpx;
}
.notice {
width: 690rpx;
box-sizing: border-box;
padding: 15rpx 30rpx 15rpx 0;
background-color: #f3f7ff;
margin: 0 20rpx 0;
border-radius: 20rpx;
.u-notice-bar {
// background-color: #f3f7ff !important;
//
.u-icon__icon {
font-size: 32rpx;
// padding-left: 24rpx;
color: #506dff !important;
padding-right: 20rpx;
border-right: 3rpx solid #f1f1f1;
}
}
.notice_left {
}
}
// .class_img {
// width: 100%;
// box-sizing: border-box;
// padding: 0 30rpx;
// }
.boxs {
width: 100%;
box-sizing: border-box;
padding: 0 30rpx;
margin: 24rpx 0 0;
}
.text1 {
font-size: 25rpx;
color: #8f8f90;
}
}
</style>