cxc/yshop-pro-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

Browse Source
This commit is contained in:
黄少君
2023-11-14 17:21:03 +08:00
parent d0b337c596
commit dcab74274f
567 changed files with 22414 additions and 7375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
pages/newGoods/newGoods.vue
View File

@ -1,115 +1,187 @@
<template>
<layout>
<uv-sticky customNavHeight="0">
<uv-navbar
:fixed="false"
:safeAreaInsetTop="true"
autoBack
title="新品首发"
/>
</uv-sticky>
<view class="swiper">
<swiper
class="swiper"
circular
indicator-dots
autoplay
>
<swiper-item>
<view class="swiper-item">
<image
class="image"
src="@/static/images/banner.png"
mode="widthFix"
/>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<image
class="image"
src="@/static/images/banner.png"
mode="widthFix"
/>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<image
class="image"
src="@/static/images/banner.png"
mode="widthFix"
/>
</view>
</swiper-item>
</swiper>
</view>
<blank size="15"></blank>
<container min>
<uv-grid
:border="false"
:column-num="2"
:gutter="10"
>
<uv-grid-item v-for="(item, index) in dataList">
<card>
<goods
link
list
:data="item"
:storeName="item.storeName"
:price="item.price"
:stock="item.stock"
>
</goods>
</card>
</uv-grid-item>
</uv-grid>
</container>
<blank size="15"></blank>
</layout>
</template>
<script setup>
import { ref } from 'vue'
import { getProductList } from '@/api/product'
import { onLoad } from '@dcloudio/uni-app'
import { usePage } from '@/hooks'
const { news, refresh, dataList } = usePage(getProductList)
onLoad((option) => {
news.value = '1'
console.log("--> % onLoad % option:\n", option)
refresh()
})
const onClickLeft = () => {
}
const onCancel = () => {
}
</script>
<style lang="less">
.swiper {
width: 100%;
.image {
width: 100%;
display: block;
}
}
</style>
<template>
<layout>
<uv-sticky customNavHeight="0">
<uv-navbar
:fixed="false"
:safeAreaInsetTop="true"
autoBack
title="新品首发"
/>
</uv-sticky>
<view class="swiper">
<swiper
class="swiper"
circular
indicator-dots
autoplay
>
<swiper-item>
<view class="swiper-item">
<image
class="image"
src="@/static/images/banner.png"
mode="widthFix"
/>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<image
class="image"
src="@/static/images/banner.png"
mode="widthFix"
/>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<image
class="image"
src="@/static/images/banner.png"
mode="widthFix"
/>
</view>
</swiper-item>
</swiper>
</view>
<view
class="product-box"
v-if="!listEmpty"
>
<!-- 分两列 后期瀑布流 -->
<template
v-for="col in colList"
:key="col.name"
>
<view class="col left-col">
<template
v-for="item in col.data"
:key="item.id"
>
<view class="product-item">
<Goods
:goods="item"
infoPadding="10rpx 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" />
</layout>
</template>
<script setup>
import { computed, ref, unref } from 'vue'
import { getProductList } from '@/api/product'
import { onLoad } from '@dcloudio/uni-app'
import { usePage } from '@/hooks'
import Goods from "@/components/goodsComponents/Goods.vue"
import ListLoadOver from "@/components/ListLoadOver/index.vue";
import ListLoadLoading from "@/components/ListLoadLoading/index.vue";
import emptyIcon from "@/static/icon/empty/收藏.png";
import Empty from "@/components/Empty/index.vue";
const {news, refresh, dataList, loading, loadend, listEmpty} = usePage(getProductList)
onLoad(async (option) => {
news.value = 1
await refresh()
})
// const leftProductData = computed(() => (unref(dataList).filter((item, index) => index % 2 === 0)))
//
// const rightProductData = computed(() => (unref(dataList).filter((item, index) => index % 2 !== 0)))
const colList = computed(() => [
{
name: 'all',
data: dataList.value
}
])
const onClickLeft = () => {
}
const onCancel = () => {
}
</script>
<style lang="scss">
.swiper {
width: 100%;
.image {
width: 100%;
display: block;
}
}
.product-box {
width: 100%;
padding: 30rpx;
box-sizing: border-box;
.col {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.product-item {
margin-bottom: 20rpx;
background: $white-color;
border-radius: 20rpx;
overflow: hidden;
margin-right: 20rpx;
width: calc((100% - 20rpx) / 2);
.good-bottom {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 20rpx;
.price {
font-size: 28rpx;
}
.sale {
color: #999999;
}
}
}
.product-item:nth-of-type(2n + 0) {
margin-right: 0;
}
}
}
</style>