176 lines
3.1 KiB
Vue
176 lines
3.1 KiB
Vue
<!-- 商品卡片组 加载更多 -->
|
|
<template>
|
|
<view class="content">
|
|
<view class="block" v-if="listProperty.list">
|
|
<JyShopCard v-for="(item, index) in listProperty.list" :key="index" @click="skipCommodity(item)" :item="item" />
|
|
</view>
|
|
<uni-load-more :status="listProperty.status" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
// 商品卡片
|
|
import JyShopCard from '@/components/public/jy-shop-card'
|
|
import {
|
|
reactive,
|
|
defineExpose,
|
|
inject
|
|
} from 'vue'
|
|
import {
|
|
shop
|
|
} from '@/api/shop'
|
|
const {
|
|
routeWithParams,
|
|
checkLink
|
|
} = inject('util');
|
|
// 工具库
|
|
import util from '@/common/js/util.js'
|
|
const props = defineProps({
|
|
//请求条件
|
|
conditions: {
|
|
type: Object,
|
|
default: () => {
|
|
{}
|
|
}
|
|
},
|
|
// 是否需要上啦加载更多 默认需要
|
|
isLoadMore: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
})
|
|
// 滑动导航栏数据
|
|
const listProperty = reactive({
|
|
params: {
|
|
// 条数
|
|
pageSize: 10,
|
|
// 页码
|
|
pageNum: 1,
|
|
navigation: 1
|
|
},
|
|
list: [],
|
|
// 总数
|
|
total: undefined,
|
|
status: 'more'
|
|
});
|
|
//当前位置
|
|
const getData = async (is, type) => {
|
|
let newList = is ? true : false
|
|
//显示加载框
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
});
|
|
console.log(listProperty.total == listProperty.list.length);
|
|
if (!is && listProperty.total == listProperty.list.length) {
|
|
uni.hideLoading();
|
|
uni.stopPullDownRefresh()
|
|
return uni.showToast({
|
|
title: '没有更多数据',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
switch (type) {
|
|
case 'onPullDownRefresh':
|
|
listProperty.params.pageNum = 1;
|
|
newList = true
|
|
break;
|
|
|
|
case 'onReachBottom':
|
|
listProperty.params.pageNum += 1;
|
|
newList = false
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
try {
|
|
const {
|
|
rows,
|
|
total
|
|
} = await shop.list(listProperty.params)
|
|
console.log(rows);
|
|
|
|
listProperty.list = newList ? [].concat(rows) : listProperty.list.concat(rows);
|
|
listProperty.total = total;
|
|
listProperty.status = listProperty.total == listProperty.list.length ? 'noMore' : 'more'
|
|
} catch (error) {
|
|
console.log(error);
|
|
} finally {
|
|
uni.hideLoading()
|
|
uni.stopPullDownRefresh()
|
|
}
|
|
}
|
|
const init = () => {
|
|
getData()
|
|
}
|
|
init();
|
|
// 暴露方法
|
|
defineExpose({
|
|
getData
|
|
})
|
|
const skipCommodity = (item) => {
|
|
//
|
|
uni.navigateTo({
|
|
url: util.setUrl('/pages/shop/commodity/index', {
|
|
productId: item.id
|
|
})
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
page {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.item {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 10rpx 0;
|
|
}
|
|
|
|
.content {
|
|
text-align: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.content .block {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
/* 两列布局 */
|
|
justify-items: center;
|
|
// 上下间隙 20px 左右间隙10
|
|
gap: 30rpx 0;
|
|
}
|
|
|
|
.content .loadingText {
|
|
line-height: 30px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: $uni-text-color-grey;
|
|
}
|
|
|
|
@keyframes preloader_1 {
|
|
0% {
|
|
height: 5px;
|
|
background: #9b59b6;
|
|
}
|
|
|
|
25% {
|
|
height: 30px;
|
|
background: #3498db;
|
|
}
|
|
|
|
50% {
|
|
height: 5px;
|
|
background: #9b59b6;
|
|
}
|
|
|
|
100% {
|
|
height: 5px;
|
|
background: #9b59b6;
|
|
}
|
|
}
|
|
</style> |