193 lines
4.0 KiB
Vue
193 lines
4.0 KiB
Vue
<!--
|
||
@name: 新品首发
|
||
@author: kahu4
|
||
@date: 2023-10-27 14:42
|
||
@description：index
|
||
@update: 2023-10-27 14:42
|
||
-->
|
||
<script setup>
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { usePage } from "@/hooks";
|
||
import { getProductList } from "@/api/product";
|
||
import Empty from "@/components/Empty/index.vue"
|
||
import ListLoadOver from "@/components/ListLoadOver/index.vue"
|
||
import ListLoadLoading from "@/components/ListLoadLoading/index.vue"
|
||
import { useRouter } from "@/hooks/useRouter";
|
||
import emptyIcon from "@/static/icon/empty/收藏.png";
|
||
import Goods from "@/components/goodsComponents/Goods.vue";
|
||
import { computed, toRefs } from "vue";
|
||
|
||
const {refresh, dataList, loadend, loading, listEmpty} = usePage(getProductList)
|
||
const {push} = useRouter()
|
||
onLoad(() => {
|
||
refresh()
|
||
})
|
||
const props = defineProps({
|
||
more:{
|
||
type:Boolean,
|
||
default:()=>true
|
||
}
|
||
})
|
||
const { more } = toRefs(props)
|
||
|
||
|
||
const colList = computed(() => [
|
||
{
|
||
name: 'all',
|
||
data: dataList.value.filter((item,index)=>index%2===0)
|
||
},
|
||
{
|
||
name:'right',
|
||
data: dataList.value.filter((item,index)=>index%2!==0)
|
||
}
|
||
])
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<!--push({ url: '/pages/goodsList/goodsList' }-->
|
||
<view class="recommend-container">
|
||
<slot name="head">
|
||
<view class="title-row">
|
||
商品推荐
|
||
</view>
|
||
</slot>
|
||
<view
|
||
class="product-box"
|
||
v-if="!listEmpty"
|
||
>
|
||
<!-- 分两列 后期瀑布流 -->
|
||
<template
|
||
v-for="col in colList"
|
||
:key="col.name"
|
||
>
|
||
<view class="goods-col">
|
||
<template
|
||
v-for="item in col.data"
|
||
:key="item.id"
|
||
>
|
||
<view class="product">
|
||
<Goods
|
||
:ratio="true"
|
||
:goods="item"
|
||
infoPadding="30rpx 10rpx"
|
||
>
|
||
<template #options>
|
||
<view class="good-bottom">
|
||
<view class="price">
|
||
￥{{ item.price }}
|
||
</view>
|
||
<view class="sale">
|
||
仅剩{{ item.stock }}件
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</Goods>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<Empty
|
||
v-else
|
||
:iconSrc="emptyIcon"
|
||
>
|
||
暂时没有商品推荐哦~
|
||
</Empty>
|
||
<!-- 加载中 -->
|
||
<ListLoadLoading v-if="loading" />
|
||
<!-- 加载完毕-->
|
||
<ListLoadOver v-if="loadend" >
|
||
<template v-if="more">
|
||
<span @click="push({ url: '/pages/goodsList/goodsList' })">
|
||
浏览更多商品
|
||
</span>
|
||
</template>
|
||
<template v-else>
|
||
到底了~
|
||
</template>
|
||
</ListLoadOver>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<style
|
||
scoped
|
||
lang="scss"
|
||
>
|
||
.recommend-container{
|
||
@include usePadding(30, 20);
|
||
width: 100%;
|
||
.title-row{
|
||
width: 100%;
|
||
font-size:32rpx;
|
||
text-align: center;
|
||
position: relative;
|
||
color: #333;
|
||
font-weight: bold;
|
||
&::before,&::after{
|
||
content: '';
|
||
position: absolute;
|
||
width: 10%;
|
||
height: 3rpx;
|
||
border-radius: 5rpx;
|
||
background: #333;
|
||
top: 50%;
|
||
transform: translate(0,50%);
|
||
}
|
||
&::before{
|
||
left: 25%;
|
||
}
|
||
&::after{
|
||
right: 25%;
|
||
}
|
||
}
|
||
}
|
||
.product-box {
|
||
margin-top: 30rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
//display: flex;
|
||
//gap: 20rpx;
|
||
|
||
.goods-col {
|
||
width: 49%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
flex-grow: 0;
|
||
float: left;
|
||
&:nth-child(2){
|
||
float: right;
|
||
}
|
||
|
||
|
||
.product {
|
||
flex-grow: 0;
|
||
width: 100%;
|
||
background: $white-color;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
margin-bottom: 20rpx;
|
||
|
||
.good-bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 20rpx;
|
||
|
||
.price {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.sale {
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|