LJH_Shop/web/app/pages/index.vue

<template>
    <div class="w-full bg-[#f6f6f6]">
		<div class="main-container home-carousel">
			<el-carousel :interval="3000" height="520px" arrow="never">
				<el-carousel-item v-for="(item,index) in advInfo.adv_list">
					<NuxtLink :to="item.adv_url && item.adv_url.url ? item.adv_url.url : '' ">
						<div class="h-full index-carousel">
							<img :src="img(item.adv_image)" alt="" class="w-full h-full">
						</div>
					</NuxtLink>
				</el-carousel-item>
			</el-carousel>
			<div class="mt-[40px]">
				<template v-for="(item,index) in floorList" :key="index">
					<div class="mt-[30px] mb-[10px]">
						<div class="flex justify-between items-center mb-[20px]" v-if="item.config.title || item.config.sub_title || item.config.url">
							<div class="flex items-center">
								<div class="leading-[40px] h-[40px]">
									<span class="text-[24px]  text-[#333]">{{item.config.title}}</span>
									<span class="text-[#999] text-[12px] ml-[10px]">{{item.config.sub_title}}</span>
								</div>
							</div>
							<div class="text-[14px] text-[#999] cursor-pointer oppoSans-R" v-if="item.config && item.config.url && item.config.url.url" @click="toLink(item.config.url.url)">
								<span>更多</span>
								<span class="iconfont icon-youV6xx ml-[4px]"></span>
							</div>
						</div>
						<div class="flex box-border">
							<div class="w-[224px] h-[628px] mr-[20px]" v-if="item.config.adv_img1">
								<el-image :src="img(item.config.adv_img1)" :fit="cover" class="w-full max-w-[628px] rounded-tl-[16px] rounded-br-[16px]"/>
							</div>
							<div class="flex  flex-wrap flex-1">
								<template v-for="(subItem,subIndex) in item.goods_list" :key="subIndex">
									<div class="w-[224px] h-[304px] mb-[20px] bg-[#fff] py-[11px] cursor-pointer" :class="{'mr-[20px]': (item.config.adv_img1 ? (subIndex + 1) % 4 :   (subIndex + 1) % 5 ) }" @click="toDetail(subItem.goods_id)" v-if="item.config.adv_img1 ? (subIndex < 8) : (subIndex < 10)">
										<div class="w-full h-[200px] mb-[10px] flex items-center justify-center" >
											<el-image style="width: 200px; height: 200px" :src="img(subItem.goods_cover)" :fit="cover">
												<template #error>
                                                    <img src="@/assets/images/goods_default.png" class="w-[200px] h-[200px]">
                                                </template>
											</el-image>
										</div>
										<div class="mx-[10px]">
											<div class="mb-[10px] h-[42px] text-[14px] multi-hidden text-[#333] leading-[21px]">{{ subItem.goods_name }}</div>
											<div class="flex items-center justify-between flex-wrap">
												<div class="text-[var(--el-price)] flex items-baseline">
													<span class="text-[12px] price-font">￥</span>
													<span class="text-[20px] price-font">{{parseFloat(goodsPrice(subItem)).toFixed(2)}}</span>
													<img  v-if="priceType(subItem) == 'member_price'" class="h-[16px] ml-[3px] w-[54px]" src="@/assets/images/addon/VIP.png" />
													<img   v-if="priceType(subItem) == 'discount_price'" class="h-[12px] ml-[3px] w-[36px]" src="@/assets/images/addon/discount.png" />
												</div>
												<div class="text-[12px] leading-[16px] text-[#999]">已售{{subItem.sale_num}}{{ subItem.unit || '件' }}</div>
											</div>
										</div>
									</div>
								</template>
							</div>
						</div>
						<div class="w-[1200px] h-[120px] mt-[10px]" v-if="item.config.adv_img2">
							<el-image  :src="img(item.config.adv_img2)" :fit="cover" class="w-full max-h-[120px]"/>
						</div>
					</div>
				</template>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getToken} from '@/utils/common'
import { useRouter, useRoute } from 'vue-router'
import { getAdvInfo, getFloor } from '@/app/api/index'

const router = useRouter()
// 广告位
const advInfo = ref({})
const getAdvInfoFn = () =>{
	getAdvInfo({ap_key:'ADV_INDEX'}).then(res =>{
		advInfo.value = res.data
	})
}
getAdvInfoFn()
// 首页楼层
const floorList = ref([])
const getFloorFn = () =>{
	getFloor().then(res =>{
		floorList.value = res.data
	})
}
getFloorFn()
// 查看更多
const toLink = (url:string) =>{
    // 外部链接
    if (url.indexOf('https') != -1 || url.indexOf('http') != -1) {
        window.open(url)
    }else {
        router.push(url)
    }
}
// 商品详情
const toDetail = (goods_id:number) =>{
	router.push(`/goods/detail?id=${goods_id}`)
}
	// 价格类型 
	let priceType = (data:any) =>{
		let type = "";
		if(data.is_discount){
			type = 'discount_price'// 折扣
		}else if(data.member_discount && getToken()){
			type = 'member_price' // 会员价
		}else{ 
			type = ""
		}
		return type;
	}
	// 商品价格
	let goodsPrice = (data:any) =>{
		let price = "0.00";
		if(data.is_discount){
			price = data.goodsSku.sale_price?data.goodsSku.sale_price:data.goodsSku.price // 折扣价
		}else if(data.member_discount && getToken()){
			price = data.goodsSku.member_price?data.goodsSku.member_price:data.goodsSku.price // 会员价
		}else{
			price = data.goodsSku.price
		}
		return price;
	}
</script>

<style lang="scss" scoped>
.home-carousel :deep(.el-carousel__indicators--horizontal){
	bottom: 30px;
}
.brick-item{
	transition: all .2s linear;
	&:hover{
		box-shadow: 0 15px 30px rgba(0,0,0,.1);
		transform: translate3d(0,-2px,0)
	}
}
/* 多行超出隐藏 */
.multi-hidden {
	word-break: break-all;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.floor-bg{
	/*background-image: url(@/assets/images/index/floor-bg.png);*/
	/*background-position: center center;*/
	/*background-size: 100% 100%;*/
	/*background-repeat: no-repeat;*/
}
</style>