cbz/pages/tabbar/index/index.vue

<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}}&deg;~{{weather.max}}&deg;</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>