yanzong_qianduan/pages/activity/charts.vue

<template>
	<view class="newGoods">
		<view>
			<u-navbar title="" back-icon-color="#fff" :border-bottom="false" title-color="#fff"
				:background="background"></u-navbar>
		</view>
		<view class="main">
			<view class="head">
				<view class="ranking">
					-好物排行榜-
				</view>
				<view class="headTitle">
					{{name}}热销榜
				</view>
				<view class="ques">
					根据商品销量等级排序|每日更新
				</view>
			</view>
			<view class="rule" @click="openPage(1)">入选规则</view>
			<view class="all" @click="openPage(2)">全部榜单</view>
			<view class="hb">
				<view class="goodsList" v-for="(item,index) in jingList.slice(0,sliceIndex)" :key="index"
					@click="goDetail(item.goods_id)">
					<view class="goodsDetail">
						<image :src="$picUrl+'/static/rank/topOne.png'" mode="" v-if="index==0" class="topOne"></image>
						<image :src="$picUrl+'/static/rank/topTwo.png'" mode="" v-if="index==1" class="topOne"></image>
						<image :src="$picUrl+'/static/rank/topThree.png'" mode="" v-if="index==2" class="topOne">
						</image>
						<view class="goodsInfo">
							<image :src="item.goods_image" mode="widthFix" class="goodsImg"></image>
							<view class="goodsName">
								<view class="name">
									{{item.goods_name}}
								</view>
								<view class="hot">
									<text class="hotTitle">HOT</text>
									<text class="zs">综合热卖指数{{item.remaizhishu}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="opera">
						<view class="price">
							￥<text>{{item.goods_price_min?Number(item.goods_price_min):''}}</text>
						</view>
						<view class="look">
							去看看
							<u-icon name="arrow-right" color="#fff" size="32"></u-icon>
						</view>
					</view>
				</view>
				<view class="goods_more" @click="toggleList" v-if="jingList.length>0">
					<text>查看更多商品</text>
					<u-icon name="arrow-down" color="#fff" size="26"></u-icon>
				</view>
			</view>
			<view class="paihang">
				<view class="goodsRecommend-title">
					<image src="/static/ranking/rank_left.png"></image>更多榜单<image src="/static/ranking/rank_right.png">
					</image>
				</view>
				<view class="rank_content" v-if="rankList.length>0">
					<view class="rank_box" @click="toBack(item)" v-for="(item,index) in rankList"
						:style="{ backgroundImage: 'url(' + (item.rankimage!=null?item.rankimage.external_url:'') + ')', }">
						<view class="rank_name">
							{{item.name}}榜
						</view>
						<view class="rank_go">
							<text>GO</text>
							<u-icon name="arrow-right" color="#fff" size="23"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="toTop" v-if="isTop" @click="openScrollTo()">
			<image :src="$picUrl+'/static/toTop.png?=1'"></image>
		</view>
	</view>
</template>

<script>
	import * as Api from '@/api/activity'
	import * as GoodsApi from '@/api/home/index.js';
	export default {
		data() {
			let img = 'https://www.royaum.com.cn/static/rank/top.png'
			return {
				background: {
					background: 'url(' + img + ') center top no-repeat',
					backgroundSize: '100% auto',
				},
				chosed: 0,
				backgroundImg: '',
				jingList: [],
				categoryId: '',
				name: '',
				rankList: [],
				sliceIndex: 4,
				isTop: false,
			}
		},
		onLoad(op) {
			this.categoryId = op.categoryId;
			this.name = decodeURIComponent(op.name)
		},
		onShow() {
			this.getListJingData(this.categoryId)
			this.getServeList()
		},
		onPageScroll(e) {
			if (e.scrollTop <= 200) { // 当滚动到顶部且向下滑动时为true
				this.isTop = false
			} else {
				this.isTop = true
			}
		},
		methods: {
			/**
			 * 获取服务列表
			 */
			async getServeList() {
				const {
					status,
					message,
					data
				} = await GoodsApi.typeList({
					is_in_store: ''
				});
				if (status == 200) {
					this.rankList = data.list
				}
			},
			toBack(item) {
				// let pages = getCurrentPages();
				// let beforePage = pages[pages.length - 2]
				// console.log(this.removeAfter(pages, 'pages/activity/ranking'))
				// uni.redirectTo({
				// 	url: '/pages/activity/ranking'
				// })
				uni.navigateTo({
					url: '/pages/activity/charts?categoryId=' + item.category_id + '&name=' + item.name
				})
			},
			removeAfter(arr, value) {
				arr.forEach(function(item, index) {
					if (item.route == value) {
						arr.splice(index + 1); // 移除指定元素之后的所有元素
					}
				});
				return arr
			},
			toggleList(index) {
				let len = this.jingList.length
				if (this.sliceIndex >= len) {
					this.$toast('已展示全部数据')
				} else {
					this.sliceIndex += 3;
				}
			},
			getListJingData(categoryId) {
				let app = this;
				let pamars = {
					// store_id: 10001,
					categoryId: categoryId,
				}
				Api.chartsGoodsList(pamars)
					.then(result => {
						app.jingList = result.data.data || [];
					})
					.finally(() => app.isLoading = false)
			},
			goDetail(orderId) {
				uni.navigateTo({
					url: '/pages/goods/detail?goodsId=' + orderId
				})
			},
			openPage(index) {
				if (index == 1) {
					uni.navigateTo({
						url: '/pages/activity/presaleRule?type=6'
					})
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.newGoods {
		width: 100%;
		position: relative;
		min-height: 100vh;
		background: #251a16 url(https://www.royaum.com.cn/static/rank/top.png) center top no-repeat;
		background-size: 100% auto;
	}

	.toTop {
		position: fixed;
		bottom: 80rpx;
		right: 16rpx;
		width: 99rpx;
		height: 99rpx;
		border-radius: 50%;
		opacity: 1;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 100%;
			height: 100%;
		}

	}

	.paihang {
		.rank_content {
			overflow: hidden;
			padding: 18rpx 30rpx 50rpx 30rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		.rank_box {
			width: 336rpx;
			height: 200rpx;
			background-repeat: no-repeat;
			background-repeat: no-repeat;
			/* 不重复平铺背景图片 */
			background-position: center;
			/* 居中显示背景图片 */
			background-size: cover;
			/* 拉伸并填充至元素内部 */
			margin-bottom: 16rpx;

			.rank_name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 700;
				font-size: 32rpx;
				color: #FFF;
				text-align: left;
				font-style: normal;
				text-transform: none;
				padding: 50rpx 0 12rpx 18rpx;
			}

			.rank_go {
				width: 90rpx;
				height: 42rpx;
				padding: 0 6rpx;
				background: rgba(255, 255, 255, 0.22);
				border-radius: 130rpx;
				border: 1rpx solid #FFF;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-left: 18rpx;

				text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 42rpx;
				}
			}
		}

		.goodsRecommend-title {
			padding: 20rpx 25rpx;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-weight: 600;
			color: #fff;
			justify-content: center;

			image {
				width: 39rpx;
				height: 41rpx;
				margin: 0 40rpx;
			}
		}
	}

	.main {
		width: 100%;
		position: relative;

		.rule {
			width: 130rpx;
			height: 60rpx;
			background-color: rgba(0, 0, 0, 0.3);
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 60rpx;
			text-align: center;
			position: absolute;
			right: 0;
			top: 60rpx;
			z-index: 22;
			border-radius: 50rpx 0 0 50rpx;
		}

		.all {
			width: 130rpx;
			height: 60rpx;
			background-color: rgba(0, 0, 0, 0.3);
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 60rpx;
			text-align: center;
			position: absolute;
			right: 0;
			top: 140rpx;
			border-radius: 50rpx 0 0 50rpx;
			z-index: 22;
		}

		.bgImg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -10;
		}

		.head {
			width: 100%;
			height: 320rpx;
			overflow: hidden;
		}
	}

	.title {
		margin-top: 58rpx;
		width: 128rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #fff;
		line-height: 44rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.headTitle {
		width: 100%;
		text-align: center;
		height: 98rpx;
		font-size: 60rpx;
		color: #FFFFFF;
		line-height: 98rpx;
		margin-top: -20rpx;
	}

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

	.ques {
		width: 100%;
		text-align: center;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 40rpx;
		margin-top: 6rpx;
	}

	.hb {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		padding-top: 70rpx;

		.goods_more {
			margin-bottom: 40rpx;
			width: 276rpx;
			height: 78rpx;
			background: rgba(255, 255, 255, 0.22);
			border-radius: 130rpx;
			border: 1rpx solid #FFF;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFF;
			font-style: normal;
			text-transform: none;

			text {
				margin-right: 10rpx;
			}

		}

		.goodsList {
			width: 700rpx;
			height: 440rpx;
			background: #FCE5C6;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			margin-bottom: 42rpx;

			.goodsDetail {
				width: 700rpx;
				height: 336rpx;
				padding: 54rpx 0 0 52rpx;
				background: #FFFFFF;
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				opacity: 1;
				position: relative;

				.topOne {
					width: 73rpx;
					height: 100rpx;
					position: absolute;
					left: 36rpx;
					top: -8rpx;
					z-index: 2;
				}

				.goodsInfo {
					display: flex;

					.goodsImg {
						width: 224rpx;
						height: 224rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						opacity: 1;
						margin-right: 16rpx;
					}

					.goodsName {
						.name {
							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;
						}

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

							.hotTitle {
								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;
							}

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

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

				.price {
					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;
					}
				}

				.look {
					width: 160rpx;
					height: 60rpx;
					background: #F9BD6C;
					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;

					.right {
						width: 18rpx;
						height: 27rpx;
						margin-left: 12rpx;
					}
				}
			}

		}
	}
</style>