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" :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="" 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}}</text>
						</view>
						<view class="look">
							去看看
							<image :src="$picUrl+'/static/rank/right.png'"  mode="" class="right"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as Api from '@/api/activity'
	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:''
			}
		},
		onLoad(op) {
			this.categoryId = op.categoryId;
			this.name= decodeURIComponent(op.name)
		},
		onShow() {
			// this.getCarouselList()
			this.getListJingData(this.categoryId)
		},
		methods: {
			// // 获取背景图
			// getCarouselList(category_id) {
			// 	const app = this;
			// 	Api.getImage({
			// 			type: 3
			// 		})
			// 		.then(result => {
			// 			app.backgroundImg = result.data.imgurl;
			// 			
			// 		})
			// 		.finally(() => app.isLoading = false)
			// },
			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;
	}

	.main {
		width: 100%;
		position: relative;
		.rule{
			width: 130rpx;
			height: 50rpx;
			background-color: rgba(0, 0, 0, 0.3);
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 50rpx;
			text-align: center;
			position: absolute;
			right: 0;
			top: 60rpx;
			z-index: 22;
			border-radius: 50rpx 0 0 50rpx;
		}
		.all{
			width: 130rpx;
			height: 50rpx;
			background-color: rgba(0, 0, 0, 0.3);
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 50rpx;
			text-align: center;
			position: absolute;
			right: 0;
			top: 120rpx;
			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 {
		background-image: url('https://www.royaum.com.cn/static/rank/mainbg.png');
		width: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		padding-top: 30rpx;

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

				.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;
							

							.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: 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;
					.right {
						width: 18rpx;
						height: 27rpx;
						margin-left: 12rpx;
					}
				}
			}

		}
	}
</style>