book-shop/pages/mall/components/goodsModel.vue

<template>
	<view class="slot">
		<view class="integral">
			<view class="inte_img">
				<!-- <image src="../../../static/goods/points-header.png" mode=""></image> -->
				<p class="title">{{type=='hot'?'热门好物':type=='recommend'?'精品推荐':''}}</p>
				<view class="inte_right" @click="goZonePage('hot')">
					<span>更多>></span>
				</view>
			</view>
			<view class="goodsThree">
				<!-- <Goods v-for="(item, index) in list" :key="index" :data="item"></Goods> -->
				<view class="item" v-for="(data, index) in list" :key="index" @click="goGoodsDetail(data)">
					<image class="goodsImg" :src="data.cover" mode="aspectFit"></image>
					<view class="goods_title shu-elip-1">{{ data.title }}</view>
					<view class="money">
						<view class="now">
							<text>￥</text>
							<text>{{data.price_selling}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Goods from '@/pages/mall/components/goods.vue';
export default {
	name: 'goods-model',
	components: {
		Goods
	},
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},
		type:{
			type: String,
			default: ()=>{
				return "";
			},
		},
	},
	methods: {
		goGoodsDetail(item) {
			uni.navigateTo({
				url: '/pages-mall/pages/goods/detail?goodsId='+item.id
			});
		},
		goZonePage(){
			console.log(this.type);
			uni.navigateTo({
				url:'/pages-mall/pages/zone/zone?type='+this.type
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.slot {
	position: relative;
}
.integral {
	margin: 28rpx 30rpx 0 30rpx;
	position: relative;

	.inte_img {
		position: relative;
		width: 100%;
		// height: 170rpx;
		// height: 80rpx;
		background-color: $app-theme-color;
		border-radius: 10rpx 10rpx 0 0;
		.title{
			color: #ffffff;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
		}
		image {
			width: 100%;
			height: 174rpx;
		}

		.inte_right {
			display: flex;
			align-items: center;
			position: absolute;
			top: 35rpx;
			right: 20rpx;

			span {
				font-size: 28rpx;
				font-weight: 400;
				color: #fff;
				line-height: 40rpx;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.commodity {
		background-color: #ffffff;
		position: relative;
		min-height: 100rpx;
		margin-top: -60rpx;
		border-radius: 8rpx;
		z-index: $app-zIndex-absolute;
		// .list_item{
		// 	padding: 0 25rpx;
		// }
		.borders {
			width: 100%;
			height: 2rpx;
			background: #efefef;
		}
	}
}
.goodsThree{
	display: flex;
	flex-wrap: wrap;
	background-color: #fff;
	border-radius: 0 0 15rpx 15rpx;
	padding-bottom: 15rpx;
	.item{
		width: 200rpx;
		margin: 30rpx 15rpx 15rpx;
	}
}
.goodsImg{
	width: 200rpx;
	height: 200rpx;
}
.money {
	display: flex;
	align-items: flex-end;
	.now {
		font-weight: bold;
		text:nth-child(1) {
			font-size: 20rpx;
			color: $app-theme-text-money-color;
		}
		text:nth-child(2) {
			font-size: 30rpx;
			color: $app-theme-text-money-color;
		}
	}
	.old {
		text {
			font-size: 20rpx;
			color: $app-theme-card-gray-color;
			text-decoration-line: line-through;
		}
	}
}
.goods_title{
	font-size: 28rpx;
	font-weight: 400;
	color: #171717;
	// height: 3em;
	margin-top: 6rpx;
	line-height: 1.5;
}
</style>