141 lines
3.2 KiB
Vue
141 lines
3.2 KiB
Vue
<template>
|
|
<view style="padding: 20rpx 30rpx">
|
|
<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
|
|
<view style="display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%">
|
|
<view v-for="(item, index) in dataList" :key="index" style="width: 336rpx; background-color: #fff; border-radius: 8rpx 8rpx">
|
|
<image :src="item.coverImageUrl" style="width: 336rpx; height: 368rpx; border-radius: 8rpx 8rpx 0 0" mode="aspectFill"></image>
|
|
<view style="padding: 15rpx 15rpx 0; font-size: 24rpx">{{ item.title }}</view>
|
|
<view style="display: flex; align-items: center; padding: 15rpx; border-radius: 0 0 8rpx 8rpx; font-size: 24rpx">
|
|
<image :src="item.authorUrl" style="width: 48rpx; height: 48rpx; border-radius: 50%; margin-right: 20rpx"></image>
|
|
<view>{{ item.authorName }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <custom-waterfalls-flow
|
|
ref="waterfallsFlowRef"
|
|
:value="dataList"
|
|
:column="column"
|
|
:columnSpace="1.5"
|
|
:seat="2"
|
|
@wapperClick="wapperClick"
|
|
@imageClick="imageClick"
|
|
@loaded="loaded"
|
|
>
|
|
<view class="item" v-for="(item, index) in dataList" :key="index" :slot="`slot${index}`">
|
|
<view class="title">{{ item.title }}</view>
|
|
<view class="desc">{{ item.content }}</view>
|
|
</view>
|
|
</custom-waterfalls-flow> -->
|
|
</z-paging>
|
|
<cc-myTabbar :tabBarShow="3"></cc-myTabbar>
|
|
|
|
<view
|
|
style="
|
|
width: 108rpx;
|
|
height: 108rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: fixed;
|
|
bottom: 300rpx;
|
|
right: 30rpx;
|
|
background: #ffffff;
|
|
border-radius: 50%;
|
|
font-size: 24rpx;
|
|
"
|
|
@click="navTo('/pages/find/add')"
|
|
>
|
|
<image src="/static/image/fawen.png" style="width: 48rpx; height: 48rpx"></image>
|
|
<view>发文</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import { reactive, ref, onMounted } from 'vue';
|
|
import { getMerchantSelect } from '@/api/api.js';
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
|
|
import { useNav } from '@/hooks/useNav.js';
|
|
|
|
const { navTo } = useNav();
|
|
|
|
onLoad(() => {});
|
|
const paging = ref(null);
|
|
const dataList = ref([]);
|
|
|
|
const queryList = async (pageNo, pageSize) => {
|
|
getMerchantSelect({
|
|
current: pageNo,
|
|
pageSize: pageSize,
|
|
category: 'DISCOVERY'
|
|
})
|
|
.then((res) => {
|
|
paging.value.complete(res.records);
|
|
uni.hideLoading();
|
|
})
|
|
.catch((res) => {
|
|
paging.value.complete(false);
|
|
uni.hideLoading();
|
|
});
|
|
};
|
|
|
|
const column = ref(2);
|
|
|
|
function loaded() {
|
|
console.log('加载完成');
|
|
}
|
|
|
|
function wapperClick(item) {
|
|
console.log('单项点击事件', item);
|
|
}
|
|
|
|
function imageClick(item) {
|
|
console.log('图片点击事件', item);
|
|
}
|
|
const waterfallsFlowRef = ref(null);
|
|
</script>
|
|
<style>
|
|
page {
|
|
background-color: #f2f5f9;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.handle {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 20rpx;
|
|
padding: 10rpx;
|
|
|
|
.btn {
|
|
margin: 20rpx 10rpx;
|
|
padding: 0 20rpx;
|
|
background: #2878ff;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
|
|
&::after {
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item {
|
|
padding: 10rpx 10rpx 20rpx;
|
|
background: #fff;
|
|
|
|
.title {
|
|
line-height: 48rpx;
|
|
font-size: 28rpx;
|
|
color: #222;
|
|
}
|
|
|
|
.desc {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
</style>
|