You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
160 lines
4.5 KiB
160 lines
4.5 KiB
<script setup>
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
import { ref } from "vue";
|
|
import navv from "@/components/nav/nav.vue";
|
|
import topTitle from "@/components/topTitle/topTitle.vue";
|
|
import { getNewsListApi } from "@/libs/api";
|
|
|
|
const lists = ref([]);
|
|
const currentPage = ref(1);
|
|
const finished = ref(false);
|
|
const images = ref([]);// 图片
|
|
const videos = ref([]);// 视频
|
|
|
|
async function loadList() {
|
|
if (finished.value) {
|
|
return;
|
|
}
|
|
const res = await getNewsListApi({
|
|
current: currentPage.value,
|
|
size: 21,
|
|
title: "",
|
|
});
|
|
if (res.code !== "0") {
|
|
return;
|
|
}
|
|
|
|
res.data.forEach((each) => {
|
|
if (each.fileType == 2 && each.content.includes(",")) {
|
|
each.content = each.content.split(",");
|
|
}
|
|
if (each.fileType == 1) {
|
|
videos.value.push(each);
|
|
}
|
|
else {
|
|
images.value.push(each);
|
|
}
|
|
});
|
|
|
|
lists.value = [...lists.value, ...res.data];
|
|
|
|
if (lists.value.length === res.total) {
|
|
finished.value = true;
|
|
}
|
|
else {
|
|
currentPage.value++;
|
|
}
|
|
}
|
|
|
|
function gotoInfoPage(item) {
|
|
if (item.fileType == 1) {
|
|
// 收集所有视频内容，当前项排第一，其余按遍历顺序追加
|
|
item.content = [
|
|
item.content,
|
|
...lists.value
|
|
.filter(data => data.fileType == 1 && data.content !== item.content)
|
|
.map(data => data.content),
|
|
];
|
|
}
|
|
uni.navigateTo({
|
|
url: `./enterKingInfo?data=${JSON.stringify(item)}`,
|
|
});
|
|
}
|
|
|
|
onLoad(() => {
|
|
loadList();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<navv>
|
|
<template #default="{ content, screen, status, menu }">
|
|
<topTitle title="走进菜大王" />
|
|
|
|
<scroll-view
|
|
:scroll-y="true"
|
|
:style="{
|
|
width: '100%',
|
|
height: `${screen - status - (menu || 0)}px`,
|
|
overflowY: 'auto',
|
|
}"
|
|
@scrolltolower="loadList"
|
|
>
|
|
<view class="title">
|
|
<text>厂家合作</text>
|
|
</view>
|
|
|
|
<view style="overflow: hidden;padding: 0 20rpx;">
|
|
<view
|
|
v-for="(item, index) in images"
|
|
:key="index"
|
|
class="grid-item"
|
|
:style="{ height: `calc(${content / 3.1}px - 10rpx)` }"
|
|
@tap="() => gotoInfoPage(item)"
|
|
>
|
|
<view style="margin-right: 10rpx;height: 100%;" class="box">
|
|
<view v-if="item.fileType == 2" style="background: #333333;height: 100%;">
|
|
<image style="width: 100%; height:100%" mode="aspectFill" :src="item.content[0]" />
|
|
</view>
|
|
|
|
<view
|
|
v-if="item.fileType == 1"
|
|
style="position:relative;width:100%;height: 100%;background: #333333;"
|
|
>
|
|
<image style="width: 100%; height:100%" mode="aspectFit" :src="item.imageUrl" />
|
|
<view class="play_btn">
|
|
<image src="/static/enterVegetableKingInfo/video.png" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="text-box">
|
|
<view class="text">
|
|
{{ item.title }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="title" style="margin-top: 30rpx;">
|
|
<text>菜大王视频</text>
|
|
</view>
|
|
|
|
<view style="overflow: hidden;padding: 0 20rpx;">
|
|
<view
|
|
v-for="(item, index) in videos"
|
|
:key="index"
|
|
class="grid-item"
|
|
:data-item="item"
|
|
:style="{ height: `${content / 3.1}px` }"
|
|
@tap="() => gotoInfoPage(item)"
|
|
>
|
|
<view style="margin-right: 10rpx;height: 100%;" class="box">
|
|
<view v-if="item.fileType == 2" style="background: #333333;height: 100%;">
|
|
<image style="width: 100%; height:100%" mode="aspectFit" :src="item.content[0]" />
|
|
</view>
|
|
<view
|
|
v-if="item.fileType == 1"
|
|
style="position:relative;width:100%;height: 100%;background: #333333;"
|
|
>
|
|
<image style="width: 100%; height:100%" mode="aspectFill" :src="item.imageUrl" />
|
|
<view class="play_btn">
|
|
<image src="/static/enterVegetableKingInfo/video.png" />
|
|
</view>
|
|
</view>
|
|
<view class="text-box">
|
|
<view class="text">
|
|
{{ item.title }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</template>
|
|
</navv>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./enterKing.scss";
|
|
</style>
|