dou_applet/pages/index/index.vue

<template>
	<view>
		<page-head title="home"></page-head>
		<view class="tabbar-container" :style="'padding-top:'+ safeAreaTop+'px'">
			<view class="searchView">
				<i class="iconfont icon-search_icon"></i>
				<input type="text" value="" placeholder="搜直播、品牌、商品、小店、达人" />
				<button>搜索</button>
			</view>
			<!-- 昨日数据 -->
			<view class="yesterdayData">
				<image src="../../static/img/pingtai_icon@2x.png" class="bg_img" mode="widthFix"></image>
				<view class="yesterday_title">
					<text class="text">昨日平台数据</text>
					<image class="image" src="../../static/img/zuori_icon@2x.png" mode="widthFix"></image>
				</view>
				<view class="yesterdayInfo">
					<view class="info">
						<text class="text">123.4w</text>
						<view class="view">平台销售额</view>
					</view>
					<view class="info">
						<text class="text">123.4w</text>
						<view class="view">平台销量</view>
					</view>
					<view class="info">
						<text class="text">123.4w</text>
						<view class="view">UV价值</view>
					</view>
				</view>
			</view>
			<!-- 入口板块 -->
			<view class="entrance">
				<view class="entranceInfo" v-for="(item,index) in entranceList" :key="index">
					<image :src="item.img" mode="widthFix" class="image"></image>
					<text class="text">{{item.name}}</text>
				</view>
			</view>
			<!-- 正在直播 -->
			<view class="plate">
				<view class="titleView">
					<view class="title">
						<text class="text">正在直播</text>
						<image src="https://kx-bigdata.oss-cn-beijing.aliyuncs.com/shop_live/live.gif" mode="widthFix" class="image"></image>
					</view>
					<view class="more">更多</view>
				</view>
				<scroll-view class="liveView" scroll-x="true">
					<view class="liveInfo" v-for="(item,index) in liveUserList" :key="item.live_id">
						<view class="info">
							<image :src="item.live_cover_url" class="cover" mode="aspectFill"></image>
							<view class="infoMask">
								<view class="liveing">直<br/>播<br/>中</view>
								<view class="shopView" v-if="item.user_info">
									<image :src="item.user_info.headurl" mode="widthFix" class="shopImage"></image>
									<view class="shopName">{{item.user_info.user_name}}</view>
								</view>
							</view>
						</view>
						<view class="liveData">
							<text class="text1">销售额</text>
							<text class="text2">{{item.sell_money_sum?$NumberHandle(item.sell_money_sum):'-'}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 账号销售榜 -->
			<view class="plate plateRank">
				<view class="titleView">
					<view class="title title2">
						<image src="https://kx-bigdata.oss-cn-beijing.aliyuncs.com/shop_live/icon1.png?v=1" mode="widthFix" class="title_bg"></image>
						<text class="text">账号销售榜</text>
						<text class="time">{{rankTime}}</text>
					</view>
					<view class="more">更多</view>
				</view>
				<view class="rankBox">
					<view class="rankItem" v-for="(item,index) in sellTopUserList" :key="index">
						<view class="rankInfo">
							<view class="imageBox">
								<image :src="item.headurl" mode="widthFix" class="userImg"></image>
								<image v-if="index<3" :src="'https://kx-bigdata.oss-cn-beijing.aliyuncs.com/shop_live/top'+ (index+1) + '.png'" mode="widthFix" class="topImg"></image>
							</view>
							<view class="info">
								<view class="name">{{item.user_name?item.user_name:'-'}}</view>
								 <view class="price">
								 	粉丝数 <text>{{item.follower_count?$NumberHandle(item.follower_count):'-'}}</text>
								 </view>
							</view>
						</view>
						<view class="rankData">
							<text>{{item.sales_money?$NumberHandle(item.sales_money):'-'}}</text>
							<view>销售额</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 品牌销售榜 -->
			<view class="plate plateRank">
				<view class="titleView">
					<view class="title title2">
						<image src="https://kx-bigdata.oss-cn-beijing.aliyuncs.com/shop_live/icon1.png?v=1" mode="widthFix" class="title_bg"></image>
						<text class="text">品牌销售榜</text>
						<text class="time">{{rankTime}}</text>
					</view>
					<view class="more">更多</view>
				</view>
				<view class="rankBox">
					<view class="rankItem" v-for="(item,index) in sellTopBrandList" :key="index">
						<view class="rankInfo">
							<view class="imageBox">
								<image :src="item.icon" mode="widthFix" class="userImg"></image>
								<image v-if="index<3" :src="'https://kx-bigdata.oss-cn-beijing.aliyuncs.com/shop_live/top'+ (index+1) + '.png'" mode="widthFix" class="topImg"></image>
							</view>
							<view class="info">
								<view class="name">{{item.brand_name?item.brand_name:'-'}}</view>
								 <view class="price">
									销量 <text>{{item.sales_number?$NumberHandle(item.sales_number):'-'}}</text>
								 </view>
							</view>
						</view>
						<view class="rankData">
							<text>{{item.sales_money?$NumberHandle(item.sales_money):'-'}}</text>
							<view>销售额</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 商品销售榜 -->
			<view class="plate plateRank">
				<view class="titleView">
					<view class="title title2">
						<image src="https://kx-bigdata.oss-cn-beijing.aliyuncs.com/shop_live/icon1.png?v=1" mode="widthFix" class="title_bg"></image>
						<text class="text">商品销售榜</text>
						<text class="time">{{rankTime}}</text>
					</view>
					<view class="more">更多</view>
				</view>
				<view class="rankBox">
					<view class="rankItem" v-for="(item,index) in goodsSalesList" :key="index">
						<view class="rankInfo">
							<view class="imageBox" style="border-radius: 4rpx;">
								<image :src="item.cover" mode="widthFix" class="userImg" style="border-radius: 4rpx;"></image>
								<image v-if="index<3" :src="'https://kx-bigdata.oss-cn-beijing.aliyuncs.com/shop_live/top'+ (index+1) + '.png'" mode="widthFix" class="topImg"></image>
							</view>
							<view class="info">
								<view class="name">{{item.title?item.title:'-'}}</view>
								 <view class="price">
									价格 <text>{{(item.price_min||item.price_max) ? (item.price_max==item.price_max?'¥'+item.price_max:('¥'+item.price_min + '-' + '¥'+item.price_max)):'-'}}</text>
								 </view>
							</view>
						</view>
						<view class="rankData">
							<text>{{item.sell_money?$NumberHandle(item.sell_money):'-'}}</text>
							<view>销售额</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 商品热推榜 -->
			<view class="plate plateRank">
				<view class="titleView">
					<view class="title title2">
						<image src="https://kx-bigdata.oss-cn-beijing.aliyuncs.com/shop_live/icon1.png?v=1" mode="widthFix" class="title_bg"></image>
						<text class="text">商品热推榜</text>
						<text class="time">{{rankTime}}</text>
					</view>
					<view class="more">更多</view>
				</view>
				<view class="rankBox">
					<view class="rankItem" v-for="(item,index) in goodsHotList" :key="index">
						<view class="rankInfo">
							<view class="imageBox" style="border-radius: 4rpx;">
								<image :src="item.cover" mode="widthFix" class="userImg" style="border-radius: 4rpx;"></image>
								<image v-if="index<3" :src="'https://kx-bigdata.oss-cn-beijing.aliyuncs.com/shop_live/top'+ (index+1) + '.png'" mode="widthFix" class="topImg"></image>
							</view>
							<view class="info">
								<view class="name">{{item.title?item.title:'-'}}</view>
								 <view class="price">
									价格 <text>{{(item.price_min||item.price_max) ? (item.price_max==item.price_max?'¥'+item.price_max:('¥'+item.price_min + '-' + '¥'+item.price_max)):'-'}}</text>
								 </view>
							</view>
						</view>
						<view class="rankData">
							<text>{{item.sell_money?$NumberHandle(item.sell_money):'-'}}</text>
							<view>销售额</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<tabbar selected='homePage'></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar.vue'
	export default {
		components:{
			tabbar,
		},
		data() {
			return {
				safeAreaTop:this.$store.state.systemInfo.safeAreaTop,
				entranceList:[
					{img:'../../static/img/daihuo_icon@2x.png',name:'直播带货榜'},
					{img:'../../static/img/zhangfen_icon@2x.png',name:'直播涨粉榜'},
					{img:'../../static/img/zhagnhaoxiaoshou_icon@2x.png',name:'账号销售榜'},
					{img:'../../static/img/zhanghaozhangfen_icon@2x.png',name:'账号涨粉榜'},
					{img:'../../static/img/pinpai_icon@2x.png',name:'品牌销售榜'},
					{img:'../../static/img/douyinxiaoliang_icon@2x.png',name:'商品销售榜'},
					{img:'../../static/img/retui_icon@2x.png',name:'商品热推榜'},
					{img:'../../static/img/shishi_icon@2x.png',name:'实时销量榜'},
				],
				liveUserList:[],
				sellTopUserList:[],
				rankTime:'',
				sellTopBrandList:[],
				goodsSalesList:[],
				goodsHotList:[]
			}
		},
		async onLoad() {
			await this.$onLaunched;
			if(new Date().getHours()<6){//6点以前是前天，6点以后是昨天
			  this.rankTime = this.$getDay(-2, false)
			}else{
			  this.rankTime = this.$getDay(-1, false)
			}
			var time_arr = this.rankTime.split('-')
			this.rankTime = time_arr[1]+'/'+time_arr[2]
			
			this.getLiveList()
			this.getSellTopUserList()
			this.getSellTopBrandList()
			this.getGoodsSalesList()
			this.getGoodsHotList()
		},
		methods:{
			getLiveList(){//正在直播
				this.$req(this.$api.home_onLiveUserList,'get',{page_size:5},(res)=>{
					if(res && res.errno == 0){
						this.liveUserList = res.rst;
					}else{
					}
				})
			},
			getSellTopUserList(){//账号销售榜
				this.$req(this.$api.home_sellTopUserList,'get',{page_size:3},(res)=>{
					if(res && res.errno == 0){
						this.sellTopUserList = res.rst;
					}else{
					}
				})
			},
			getSellTopBrandList(){//品牌销售榜
				this.$req(this.$api.home_sellTopBrandList,'get',{page_size:3},(res)=>{
					if(res && res.errno == 0){
						this.sellTopBrandList = res.rst;
					}else{
					}
				})
			},
			getGoodsSalesList(){//商品销售榜
				this.$req(this.$api.home_goodsSalesList,'get',{page_size:3},(res)=>{
					if(res && res.errno == 0){
						this.goodsSalesList = res.rst;
					}else{
					}
				})
			},
			getGoodsHotList(){//商品热推榜
				this.$req(this.$api.home_goodsHotList,'get',{page_size:3},(res)=>{
					if(res && res.errno == 0){
						this.goodsHotList = res.rst;
					}else{
					}
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.searchView,.yesterdayData,.plate{
		width: 710rpx;
		margin: auto;
	}
	.searchView{
		margin: 20rpx auto;
		height: 70rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 12rpx;
		border-radius: 70rpx;
		.iconfont{
			color: #444444;
			font-size: 30rpx;
			margin: 0 14rpx;
		}
		input{
			font-size: 26rpx;
			flex: 1;
		}
		button{
			width: 104rpx;
			height: 52rpx;
			line-height: 52rpx;
			background: #FE9400;
			border-radius: 35rpx;
			color: #FFFFFF;
			padding: 0;
			font-size: 26rpx;
		}
	}
	.yesterdayData{
		height: 214rpx;
		background: linear-gradient(160deg, rgba(46, 44, 43, 0.92) 0%, #000000 100%);
		border-radius: 16rpx;
		position: relative;
		overflow: hidden;
		padding: 22rpx 24rpx;
		.bg_img{
			width: 110rpx;
			height: 108rpx;
			position: absolute;
			top: -1px;
			right: 0;
		}
		.yesterday_title{
			display: flex;
			align-items: center;
			.text{
				color: #FFFFFF;
				font-size: 30rpx;
				line-height: 42rpx;
			}
			.image{
				width: 30rpx;
				height: 30rpx;
				margin-left: 20rpx;
			}
		}
		.yesterdayInfo{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			padding: 0 20rpx;
			.info{
				text-align: center;
				.text{
					color: #FFFFFF;
					font-size: 40rpx;
					line-height: 56rpx;
					font-weight: bold;
				}
				.view{
					color: #F1CBB4;
					font-size: 26rpx;
					line-height: 36rpx;
					margin-top: 8rpx;
				}
			}
		}
	}
	.entrance{
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 36rpx;
		.entranceInfo{
			width: 25%;
			text-align: center;
			margin-top: 36rpx;
			.image{
				width: 72rpx;
				height: 72rpx;
				display: block;
				margin: auto;
			}
			.text{
				color: #000000;
				font-size: 24rpx;
				line-height: 34rpx;
			}
		}
	}
	.plate{
		background: #FFFFFF;
		border-radius: 16rpx;
		height: 492rpx;
		margin-bottom: 22rpx;
		.titleView{
			padding: 30rpx 26rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title{
				display: flex;
				align-items: center;
				.text{
					color: #353C46;
					font-size: 38rpx;
					line-height: 52rpx;
					font-weight: bold;
					position: relative;
				}
				.image{
					width: 50rpx;
					height: 50rpx;
					margin-left: 10rpx;
				}
				.time{
					color: #A3A3A3;
					font-size: 26rpx;
					line-height: 36rpx;
					margin-left: 16rpx;
				}
			}
			.title2{
				position: relative;
				.title_bg{
					width: 70rpx;
					position: absolute;
					left: -10rpx;
					top: -20rpx;
				}
			}
			.more{
				width: 119rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				background: #F6F6F6;
				border-radius: 30rpx;
				color: #FF6D28;
				font-size: 26rpx;
			}
		}
	}
	.liveView{
		width: calc(100% - 28rpx);
		white-space: nowrap;
		margin-left: 28rpx;
		.liveInfo{
			width: 236rpx;
			height: 344rpx;
			background: #F1F1F1;
			border-radius: 16rpx;
			overflow: hidden;
			display: inline-block;
			margin-right: 20rpx;
			.info{
				width: 100%;
				height: 298rpx;
				background: url(https://kx-bigdata.oss-cn-beijing.aliyuncs.com/blur_bg.png) no-repeat;
				background-size: 100% 100%;
				position: relative;
				.cover{
					width: 100%;
					height: 100%;
				}
				.infoMask{
					position: absolute;
					top: 0;
					left: 0;
					background: rgba(0,0,0,0.2);
					width: 100%;
					height: 100%;
					.liveing{
						width: 56rpx;
						height: 97rpx;
						background: #FF7217;
						border-radius: 0px 0px 200rpx 200rpx;
						color: #FFFFFF;
						font-size: 24rpx;
						font-weight: bold;
						text-align: center;
						line-height: 30rpx;
						position: absolute;
						top: 0;
						right: 20rpx;  
						text-align: center;
					}
					.shopView{
						width: 100%;
						display: flex;
						align-items: center;
						position: absolute;
						bottom: 12rpx;
						left: 8rpx;
						.shopImage{
							width: 48rpx;
							height: 48rpx;
							border-radius: 50%;
							border: 2rpx solid #FFFFFF;
							margin-right: 16rpx;
						}
						.shopName{
							width: 144rpx;
							height: 34rpx;
							font-size: 24rpx;
							color: #FFFFFF;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							word-break: break-all;
						}
					}
				}
			}
			.liveData{
				display: flex;
				line-height: 46rpx;
				justify-content: space-between;
				padding: 0 12rpx;
				.text1{
					color: #989898;
					font-size: 18rpx;
				}
				.text2{
					color: #000000;
					font-size: 24rpx;
					font-weight: blue($color: #000000);
				}
			}
		}
	}
	.rankBox{
		.rankItem{
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #ECECEC;
			&:last-of-type{
				border-bottom: none;
			}
			.rankInfo{
				flex: 1;
				display: flex;
				align-items: center;
				margin-left: 30rpx;
				.imageBox{
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					position: relative;
					background: #f2f2f2;
					.userImg{
						width: 100%;
						height: 100%;
						border-radius: 50%;
						position: absolute;
						top: 0;
						bottom: 0;
						left: 0;
						margin: auto;
					}
					.topImg{
						width: 36rpx;
						height: 30rpx;
						position: absolute;
						top: -16rpx;
						right: 2rpx;
					}
				}
				.info{
					flex: 1;
					margin-left: 16rpx;
					.name{
						color: #353C46;
						font-size: 28rpx;
						line-height: 40rpx;
						width: 338rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						word-break: break-all;
					}
					.price{
						color: #A3A3A3;
						font-size: 24rpx;
						line-height: 34rpx;
						margin-top: 6rpx;
						text{
							color: #000000;
							margin-left: 10rpx;
						}
					}
				}
			}
			.rankData{
				margin-right: 30rpx;
				text-align: right;
				text{
					color: #353C46;
					font-size: 38rpx;
					line-height: 52rpx;
					font-weight: bold;
				}
				view{
					color: #A3A3A3;
					font-size: 24rpx;
					line-height: 34rpx;
				}
			}
		}
	}
	.plateRank{
		height: 602rpx;
	}
</style>