MeiMeiZhuan/pages/hotsale/hotsale.vue

<template>
	<view class="container">
		<view class="hotsale-box" v-for="(hotitem,hotindex) in hotlist" :key="hotindex" @click="navToDetailPage(hotitem)">
			<view class="img">
				<image :src="hotitem.image"></image>
			</view>
			<view class="hostsale-info">
				<view class="name">{{hotitem.store_name}}</view>
				<view class="price-box ">
					<text class="price">￥{{hotitem.price}}</text>
					<!-- <text class="ot_price">￥{{hotitem.ot_price}}</text> -->
					<!-- <text class="seckill">秒杀</text> -->
				</view>
				<text class="number">库存：{{hotitem.stock}}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { groomList,productDetail } from '@/api/product.js'
export default {
	onShow: function() {
		this.loadData();
	},
	data() {
		return{
			//热销产品
			hotlist:[],
			goodstype:1,
		}
	},
	methods: {
		// 获取首页数据
		async loadData() {
			let obj = this;
			//获取精品推荐放在热销商品
			groomList({},obj.goodstype)
				.then(({data}) => {
					console.log(data,999);
					//this.hotlist = data.list;
					let hotlists = data.list;
					for(let i = 0 ;i<10;i++){
						let goodsid = data.list[i].id;
						//console.log(goodsid,'goodsid')
						productDetail({}, goodsid)
							.then(({data}) => {
								//console.log(data,goodsid)
								obj.specList = data.productAttr;//保存产品属性
								obj.specSelected = []; //初始化默认选择对象
								obj.productValue = data.productValue;
								for (let i = 0; i < obj.specList.length; i++) {
									// 设置默认数据
									let attrValue = obj.specList[i].attr_value[0];
									attrValue.check = true;
									obj.specSelected.push(attrValue.attr);
									//console.log(obj.specSelected,'obj.specSelected')
								}
								let str = obj.specSelected.join(',');
								//console.log(str,'str')
								let actionPrice = obj.productValue[str].price;
								//console.log(actionPrice,'actionPrice')
								hotlists[i].origin_price = hotlists[i].price;
								hotlists[i].price = actionPrice;
							});
					}
					setTimeout(function(){ obj.hotlist = hotlists; obj.showCard = true; }, 1000);
				})
				.catch(e => {
					console.log(e)
				});
		},
		//商品推荐详情页
		navToDetailPage(item) {
			let id = item.id;
			//let type = 2;
		
			uni.navigateTo({
				url: '/pages/product/product?id=' + id
			});
		},
	}
}
</script>

<style lang="scss">
	.container{
		line-height: 1;
		padding: 10rpx 25rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.hotsale-box{
			width: 48.5%;
			background-color: #fff;
			border-radius: 10rpx;
			margin-top: 20rpx;
			.img{
				height: 340rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 270rpx;
					height: 270rpx;
				}
			}
			.hostsale-info{
				padding:20rpx 20rpx 30rpx 20rpx;
				.name{
					font-size: 26rpx;
					font-weight: bold;
				}
				.price-box{
					line-height: 1;
					.price{
						color: #FC4141;
						font-size: 24rpx;
						font-weight: bold;
						margin-right: 15rpx;
					}
					.ot_price{
						font-size:22rpx;
						font-weight:500;
						text-decoration:line-through;
						color:#aaaaaa;
					}
					.seckill{
						border: 2rpx solid #FC5B62;
						color: #FC5B62;
						text-align: center;
						font-size: 20rpx;
						margin-left: 6rpx;
					}
				}
				.number{
					font-size:26rpx;
					font-weight:500;
					color:#333333;
				}
			}
		}
	}
</style>