yanzong_qianduan/pages/activity/newGoods.vue

<template>
	<view class="newGoods">
		<!-- <image src="/static/newGoods/newBack.png" mode="" class="bgImg"></image> -->
		<view>
			<u-navbar title="新品首发" :border-bottom="false" title-color="#333" :background="background"></u-navbar>
		</view>
		<view class="firGoods" :style="{backgroundImage:'url('+backgroundImg+')'}">
		</view>
		<view class="goodsList">
			<view class="goodsItem" v-for="(item,index) in list" :key="index" @click="goDetails(item.goods_id)">
				<view class="hotSell">
					抢先体验
				</view>
				<view class="item">
					<view class="goodsInfo">
						<view class="goodsDetail">
							<view class="infoRight">
								<image :src="item.goods_image" mode="widthFix" class="infoImg"></image>
							</view>
							<view class="infoLeft">
								<view class="gName">
									{{item.goods_name}}
								</view>
								<!-- <view class="gd">
									{{item.selling_point}}
								</view> -->
								<view class="price">
									<view class="lowPrice">
										￥{{item.goods_price_min?Number(item.goods_price_min):''}}起
									</view>
									<view class="buyNow">
										立即购买
									</view>
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
			<view class="lookBtn" @click="backtop" v-if="scrollTop>200">
				再挑挑看<u-icon name="arrow-upward" color="#242424" size="30"></u-icon>
			</view>
			<view class="lookJie" v-html="content">
			</view>
		</view>

	</view>
</template>

<script>
	import * as Api from '@/api/activity'
	import * as help from '@/api/help'
	import {
		getEmptyPaginateObj,
		getMoreListData
	} from '@/core/app'
	export default {
		data() {
			let img = 'https://www.royaum.com.cn/static/member/head.png'
			return {
				background: {
					background: 'url(' + img + ') center top no-repeat',
					backgroundSize: '100% auto',

				},
				backgroundImg: '',
				list: [],
				content: '',
				 scrollTop: 0
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.getCarouselList()
			this.getBrandList()
			this.getCarousel()
		},

		methods: {
			getCarousel(type) {
				const app = this;
				help.getAgreement({
						type: 'copyright'
					})
					.then(result => {
						let content = result.data.detail?result.data.detail.content:'';
						this.content = content
					})
					.finally(() => app.isLoading = false)
			},
			// 获取新牌商品
			getBrandList() {
				const app = this;
				let pamars = {
					page: 1,
					is_brand: '',
					is_new: 1,
					categoryId: '',
					order: '',
					is_in_store: 0
				}
				Api.brandList(pamars)
					.then(result => {
						app.list = result.data.data
					})
					.finally(() => app.isLoading = false)
			},
			goDetails(goodsId) {
				uni.navigateTo({
					url: '/pages/goods/detail?goodsId=' + goodsId
				})
			},
			// 获取背景图
			getCarouselList() {
				const app = this;
				Api.getImage({
						type: 1
					})
					.then(result => {
						app.backgroundImg = result.data.imgurl
					})
					.finally(() => app.isLoading = false)
			},
			backtop() {
				uni.pageScrollTo({
					scrollTop: 0
				});
			}
		},
		onPageScroll(e) {
		    this.scrollTop = e.scrollTop;
		  }
	}
</script>

<style lang="scss" scoped>
	.lookBtn {
		width: 190rpx;
		line-height: 75rpx;
		height: 75rpx;
		background-color: #FFDCC3;
		text-align: center;
		font-size: 30rpx;
		border-radius: 40rpx;
		margin: 30rpx auto;
		color: #242424;
	}

	.lookJie {
		text-align: center;
		color: #fff;
		font-size: 28rpx;
		margin: 20rpx 0 50rpx 0;
	}

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

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

	.firGoods {
		width: 100%;
		height: 510rpx;
		background-image: url('https://www.royaum.com.cn/static/newGoods/top.png');
		background-repeat: no-repeat; /* 不重复平铺背景图片 */
		background-position: center top; /* 居中显示背景图片 */
		background-size: 100% auto; /* 拉伸并填充至元素内部 */

		.topLine {
			display: flex;
			justify-content: center;

			.left {
				margin-top: 132rpx;

				.goodsName {
					height: 58rpx;
					font-size: 40rpx;
					font-weight: 600;
					color: #242424;
					line-height: 58rpx;
				}

				.goodsDesc {
					width: 280rpx;
					height: 78rpx;
					font-size: 56rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					color: #242424;
					line-height: 78rpx;
				}

				.newTip {
					width: 156rpx;
					height: 56rpx;
					background: #DA1646;
					opacity: 1;
					border-radius: 25rpx 0 25rpx 25rpx;
					text-align: center;
					font-size: 36rpx;
					font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 56rpx;
				}
			}

			.right {
				background-image: url('https://www.royaum.com.cn/static/newGoods/bg.png');
				background-repeat: no-repeat;
				background-size: 422rpx 102rpx;
				position: relative;
				background-position: left bottom;
				height: 500rpx;

				.goodsImg {
					width: 414rpx;
					height: 414rpx;
					box-shadow: 0rpx 12rpx 29rpx 0rpx rgba(0, 0, 0, 0.25);
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					opacity: 1;
					z-index: 99;
				}

				.bg {
					width: 422rpx;
					height: 102rpx;
					position: absolute;
					top: 374rpx;
					z-index: 0;
				}
			}
		}
	}

	.goodsList {
		width: 100%;
		padding: 26rpx 0 30rpx 26rpx;
		background-image: url('https://www.royaum.com.cn/static/newGoods/bot.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.goodsItem {
			margin-bottom: 32rpx;
		}


		.item {
			width: 700rpx;
			height: 334rpx;
			background: #FDE7D5;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			opacity: 1;
			padding: 8rpx 10rpx 10rpx;
		}

		.hotSell {
			width: 226rpx;
			height: 82rpx;
			background: linear-gradient(180deg, #FDE7D5 0%, #FFDCC3 100%);
			opacity: 1;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			color: #C82821;
			line-height: 82rpx;
			position: relative;
			top: 8rpx;
			border-radius: 20rpx 20rpx 0 0;
		}

		.goodsInfo {
			width: 680rpx;
			height: 316rpx;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			padding-left: 28rpx;

			.goodsDetail {
				display: flex;
				justify-content: space-between;
				width: 100%;
				position: relative;
				align-items: flex-start;
				.infoLeft {
					flex: 1;
					margin-top: 20rpx;
					.gName {
						margin-bottom: 15rpx;
						overflow: hidden;
						-webkit-line-clamp: 2;
						max-width: 300rpx;
						height: 112rpx;
						font-size: 40rpx;
						font-weight: 600;
						color: #3F3F3F;
						line-height: 56rpx;
						margin-top: 32rpx;
					}

					// .gd {
					// 	overflow: hidden;
					// 	-webkit-line-clamp: 2;
					// 	height: 88rpx;
					// 	font-size: 32rpx;
					// 	font-weight: 400;
					// 	color: #9F9F9F;
					// 	line-height: 44rpx;
					// }

					// .gp {
					// 	height: 44rpx;
					// 	font-size: 32rpx;
					// 	font-family: PingFang SC, PingFang SC;
					// 	font-weight: 400;
					// 	color: #DE041C;
					// 	line-height: 38rpx;
					// }
				}

				.infoRight {
					width: 220rpx;
					height: 220rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					margin-right: 14rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-top: 40rpx;
					.infoImg {
						width: 200rpx;
						height: 200rpx;
					}
				}
			}

			.price {
				display: flex;
				justify-content: space-between;
				margin-top: 50rpx;
				margin-right: 30rpx;

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

				.buyNow {
					width: 174rpx;
					height: 58rpx;
					background: linear-gradient(180deg, #FC522C 0%, #FA2929 100%);
					border-radius: 58rpx 58rpx 58rpx 58rpx;
					opacity: 1;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 58rpx;

				}
			}
		}
	}
</style>