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" :style="{backgroundImage:'url('+backgroundImg+')'}"
			style="background-size: 100% 100%;padding-bottom: 20rpx;">
			<view class="head">
				<view class="ranking">
					-好物排行榜-
				</view>
				<view class="headTitle">
					{{name}}热销榜
				</view>
				<view class="ques">
					根据商品销量等级排序|每日更新
				</view>
			</view>
			<view class="hb">
				<view class="goodsList" v-for="(item,index) in jingList" :key="index">
					<view class="goodsDetail">
						<image src="../../static/rank/topOne.png" mode="" v-if="index==0" 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" @click="goDetail(item.goods_id)">
							去看看
							<image src="/static/rank/right.png" mode="" class="right"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import img from "@/static/rank/top.png"
	import * as Api from '@/api/activity'
	export default {
		data() {
			return {
				background: {
					background: 'url(' + img + ') center top no-repeat',
					backgroundSize: '100% auto',
				},
				chosed: 0,
				backgroundImg: '',
				jingList: [],
				categoryId: '',
				name:''
			}
		},
		onLoad(op) {
			console.log(op)
			this.categoryId = op.categoryId;
			this.name=op.name
		},
		onShow() {
			this.getCarouselList()
		},
		methods: {
			// 获取背景图
			getCarouselList(category_id) {
				const app = this;
				Api.getImage({
						type: 3
					})
					.then(result => {
						app.backgroundImg = result.data.imgurl;
						app.getListJingData(this.categoryId)
					})
					.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?orderId=' + orderId
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.newGoods {
		width: 100%;
		position: relative;
		min-height: 100vh;
	}

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

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

		.head {
			width: 100%;
			height: 360rpx;
			background-size: 100% 100%;
		}
	}

	.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;
		font-family: YouSheBiaoTiYuan, YouSheBiaoTiYuan;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 98rpx;
		text-shadow: 8px 2px 15px #FF5F4C;
	}

	.ranking {
		margin-top: 22rpx;
		width: 430rpx;
		height: 112rpx;
		padding-top: 18rpx;
		background-size: 100% 100%;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		left: 0;
		right: 0;
		margin: auto;
	}

	.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('../../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-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #0E0E0E;
							line-height: 38rpx;
						}

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

							.hotTitle {
								margin-right: 8rpx;
								width: 68rpx;
								height: 42rpx;
								font-size: 32rpx;
								font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
								font-weight: 600;
								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-family: PingFang SC, PingFang SC;
								font-weight: 400;
								color: #9F6516;
								line-height: 60rpx;
							}
						}
					}
				}
			}

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

				.price {
					margin-left: 20rpx;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #301F14;
					line-height: 44rpx;

					text {
						font-size: 48rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						color: #301F14;
						line-height: 68rpx;
					}
				}

				.look {
					width: 202rpx;
					height: 60rpx;
					background: linear-gradient(180deg, #FF7E6A 0%, #FB322A 100%);
					border-radius: 70rpx 70rpx 70rpx 70rpx;
					opacity: 1;
					margin-right: 22rpx;
					text-align: center;
					line-height: 60rpx;

					.right {
						width: 20rpx;
						height: 18rpx;
						margin-left: 26rpx;
					}
				}
			}

		}
	}
</style>