yanzong_qianduan/pages/activity/ranking.vue

<template>
	<view class="newGoods">
		<!-- :style="{backgroundImage:'url('+backgroundImg+')'}" -->
		<!-- <view class="rule" @click="openPage()">规则</view> -->
		<view>
			<u-navbar title="排行榜" back-icon-color="#fff" :border-bottom="false" title-color="#fff" :background="background"></u-navbar>
		</view>
		<!-- <image :src="$picUrl+'/static/rank/rangkImg.png'"  mode="" class="bgImg"></image> -->
		<view class="headTitle">
			全站热销好物
		</view>
		<view class="ranking">
			- 实时排名 -
		</view>
		<view class="menuList">
			<scroll-view scroll-x="true" class="list">
				<view class="menuItem" v-for="(item,index) in menuList" :key="index" @click="onChosed(item,index)">
					<view class="menuName">
						{{item.name}}
					</view>
					<view class="line" v-if="chosed==index"></view>
				</view>
			</scroll-view>
		</view>
		<view class="rankList" v-for="(item,index) in jingList" :key="index" style="background-color: #fff;padding: 32rpx;">
			<view class="firLine" @click="goDetailMore(item.category_id,item.name)">
				<view class="hotTitle">{{item.name}}热销榜</view>
				<view class="opera">
					<text>更多上榜好物</text>
					<image :src="$picUrl+'/static/order/left.png'" mode="" class="more"></image>
				</view>
			</view>
			<view class="goodsList">
				<view class="goodsItem" v-for="(item_1,index) in item.goods_list" :key="index" v-if="index < 3"  @click="goDetail(item_1.goods_id)">
					<image :src="$picUrl+'/static/rank/topOne.png'" class="topOne" v-if="index==0"></image>
					<image :src="$picUrl+'/static/rank/topTwo.png'"  class="topOne" v-if="index==1"></image>
					<image :src="$picUrl+'/static/rank/topThree.png'" class="topOne" v-if="index==2"></image>
					<image :src="item_1.goods_image" mode="" class="goodsImg"></image>
					<view class="goodsName">
						{{item_1.goods_name}}
					</view>
					<view class="goodsPrice">
						￥<text>{{item_1.goods_price_min}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品 -->
		<view class="rankList" v-if="chosed>0">
			<view class="goodsList1" v-for="(item,index) in goodList" :key="index">
				<view class="goodsDetail1">
					<image :src="$picUrl+'/static/rank/topOne.png'" class="topOne1" v-if="index==0"></image>
					<image :src="$picUrl+'/static/rank/topTwo.png'"  class="topOne1" v-if="index==1"></image>
					<image :src="$picUrl+'/static/rank/topThree.png'"  class="topOne1" v-if="index==2"></image>
					<view class="goodsInfo1">
						<image :src="item.goods_image" class="goodsImg1"></image>
						<view class="goodsName1">
							<view class="name1">
								{{item.goods_name}}
							</view>
							<view class="hot1">
								<text class="hotTitle1">HOT</text>
								<text class="zs1">综合热卖指数{{item.remaizhishu}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="opera1">
					<view class="price1">
						￥<text>{{item.goods_price_min}}</text>
					</view>
					<view class="look1" @click="goDetail(item.goods_id)">
						去看看
						<image :src="$picUrl+'/static/rank/right.png'" mode="" class="right1"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as Api from '@/api/activity'
	export default {
		data() {
			return {
				background: {
					background: 'url(https://www.royaum.com.cn/static/rank/rank1.png) center top no-repeat',
					backgroundSize: '100% auto',
				},
				category_id: "",
				chosed: 0,
				jingListAll: [],
				menuList: [],
				backgroundImg: '',
				jingList: [],
				goodList: [],
			}
		},
		onShow() {
			this.getListCharts()
		},
		methods: {
			openPage() {
				uni.navigateTo({
					url: '/pages/activity/presaleRule?type=6'
				})
			},
			// 获取背景图
			getCarouselList(category_id) {
				const app = this;
				Api.getImage({
						type: 3
					})
					.then(result => {
						app.backgroundImg = result.data.imgurl;
						if (app.chosed == 0) {
							app.getListJingData()
						} else {
							app.getListgoodData(category_id)
						}
					})
					.finally(() => app.isLoading = false)
			},
			getListJingData() {
				let app = this;
				let pamars = {
					store_id: 10001,
				}
				Api.chartsGoodsJing(pamars)
					.then(result => {
						app.jingList = result.data;
						app.jingListAll = result.data;
					})
					.finally(() => app.isLoading = false)
			},
			getListgoodData(categoryId) {
				let app = this;
				let pamars = {
					store_id: 10001,
					categoryId: categoryId,
				}
				Api.chartsGoodsList(pamars)
					.then(result => {
						app.goodList = result.data.data;
					})
					.finally(() => app.isLoading = false)
			},
			onChosed(item, index) {
				let app = this;
				app.chosed = index;
				if(index == 0){
					app.jingList = app.jingListAll;
				}else{
					app.jingList = app.jingListAll.filter(a=>a.category_id == item.category_id);
				}
				
			},
			// 分类
			getListCharts() {
				let app = this
				app.menuList = []
				let pamars = {
					store_id: 10001
				}
				Api.charts(pamars)
					.then(result => {
						let obj = {
							name: '精品'
						}
						result.data.unshift(obj)
						app.menuList = result.data;
						app.getListJingData()
					})
					.finally(() => app.isLoading = false)
			},
			goDetail(orderId) {
				uni.navigateTo({
					url: '/pages/goods/detail?goodsId=' + orderId
				})
			},
			goDetailMore(categoryId, name) {
				uni.navigateTo({
					url: '/pages/activity/charts?categoryId=' + categoryId + '&name=' + name
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.newGoods {
		width: 100%;
		position: relative;
		min-height: 100vh;
		padding-bottom: 30rpx;
		background: #F34A40 url(https://www.royaum.com.cn/static/rank/rank1.png) center top no-repeat;
		background-size: 100% auto;
		.bgImg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -10;
		}
	}

	.headTitle {
		width: 100%;
		text-align: center;
		height: 98rpx;
		font-size: 76rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 98rpx;
		text-shadow: 8px 2px 15px #FF5F4C;
		margin-top: 60rpx;
	}

	.ranking {
		width: 430rpx;
		height: 150rpx;
		background: url('https://www.royaum.com.cn/static/rank/timeRank.png') center top no-repeat;
		background-size: contain;
		text-align: center;
		line-height: 100rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.menuList {
		margin-top: 34rpx;
		width: 100%;
		padding-left: 50rpx;

		.list {
			white-space: nowrap;
		}

		.menuItem {
			display: inline-block;
			margin-right: 62rpx;

			.menuName {

				height: 50rpx;
				font-size: 36rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 50rpx;
			}

			.line {
				width: 70rpx;
				height: 10rpx;
				background: #FFE4C3;
				border-radius: 72rpx 72rpx 72rpx 72rpx;
				opacity: 1;
				margin-top: 8rpx;
			}
		}
	}

	.rankList {
		width: 702rpx;
		border-radius: 18rpx;
		margin: 28rpx auto;
		.firLine {
			display: flex;
			justify-content: space-between;
			.hotTitle {
				height: 50rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #0E0E0E;
				line-height: 50rpx;
			}

			.opera {
				display: flex;
				align-items: center;
				text {
					height: 44rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #9F9F9F;
					line-height: 44rpx;
					margin-right: 18rpx;
				}

				.more {
					width: 12rpx;
					height: 18rpx;
				}
			}
		}

		.goodsList {
			display: flex;
			margin-top: 86rpx;
			margin-left: 18rpx;
			.goodsItem {
				position: relative;
				width: 33.3%;
				.topOne {
					width: 48rpx;
					height: 66rpx;
					position: absolute;
					top: -38rpx;
					left: -28rpx;
				}

				.goodsImg {
					width: 160rpx;
					height: 160rpx;
				}

				.goodsName {
					width: 150rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #3F3F3F;
					line-height: 40rpx;
					margin: 8rpx 0 4rpx 0;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.goodsPrice {
					height: 50rpx;
					font-size: 24rpx;
					color: #DE041C;
					line-height: 50rpx;
					text{
						font-size: 36rpx;
						font-weight: 600;
					}
				}
			}
		}

		.goodsList1 {
			width: 700rpx;
			height: 440rpx;
			background: #FCE5C6;
			border-radius: 18rpx;
			margin-bottom: 42rpx;
			.goodsDetail1 {
				width: 700rpx;
				height: 336rpx;
				padding: 54rpx 0 0 52rpx;
				background: #FFFFFF;
				border-radius: 18rpx;
				position: relative;
				.topOne1 {
					width: 73rpx;
					height: 100rpx;
					position: absolute;
					left: 36rpx;
					top: -8rpx;
				}

				.goodsInfo1 {
					display: flex;
					.goodsImg1 {
						width: 224rpx;
						height: 224rpx;
						margin-right: 20rpx;
					}
					.goodsName1 {
						.name1 {
							width: 396rpx;
							height: 132rpx;
							font-size: 32rpx;
							font-weight: 400;
							color: #0E0E0E;
							line-height: 44rpx;
							word-break: break-all;
							display: -webkit-box;
							-webkit-line-clamp: 3;
							-webkit-box-orient: vertical;
							overflow: hidden;
						}

						.hot1 {
							width: 336rpx;
							height: 60rpx;
							background: linear-gradient(90deg, #FCE5C6 0%, #FFFFFF 100%);
							border-radius: 70rpx;
							opacity: 1;
							margin-top: 26rpx;

							.hotTitle1 {
								margin-right: 8rpx;
								width: 68rpx;
								height: 42rpx;
								font-size: 32rpx;
								line-height: 60rpx;
								margin-left: 8rpx;
								background: -webkit-linear-gradient(180deg, #FFA621 0%, #F34A40 100%);
								-webkit-text-fill-color: transparent;
								-webkit-background-clip: text;
							}

							.zs1 {
								height: 44rpx;
								font-size: 32rpx;
								font-weight: 400;
								color: #9F6516;
								line-height: 60rpx;
							}
						}
					}
				}
			}

			.opera1 {
				display: flex;
				justify-content: space-between;
				width: 100%;
				align-items: center;
				height: 104rpx;

				.price1 {
					font-size: 32rpx;
					font-weight: 400;
					color: #301F14;
					line-height: 44rpx;
					margin-left: 30rpx;
					text {
						font-size: 48rpx;
						font-weight: 600;
						color: #301F14;
						line-height: 68rpx;
					}
				}

				.look1 {
					width: 202rpx;
					height: 60rpx;
					background: linear-gradient(180deg, #FF7E6A 0%, #FB322A 100%);
					border-radius: 70rpx;
					margin-right: 22rpx;
					text-align: center;
					line-height: 60rpx;
					color: #FFFFFF;
					font-size: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.right1 {
						width: 18rpx;
						height: 27rpx;
						margin-left: 12rpx;
					}
				}
			}

		}
	}

	.rule {
		width: 100rpx;
		height: 60rpx;
		position: absolute;
		right: 0;
		top: 150rpx;
		z-index: 19;
		background-color: #FFFFFF;
		color: #0E0E0E;
		text-align: center;
		line-height: 60rpx;
		border-radius: 50rpx 0 0 50rpx;
		font-size: 30rpx;
	}
</style>