demon.chen
/
pan-mini
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modify

This commit is contained in:
dean 2025-08-26 16:11:16 +08:00
parent a2fbf90a55
commit 16a184cabe
13 changed files with 422 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

214
components/image-grid-simple/image-grid-simple.vue Normal file
View File

@ -0,0 +1,214 @@
<template>
<!-- 使用原生 scroll-view 实现滚动 -->
<scroll-view
class="scroll-container"
:scroll-y="true"
:style="{ height: height, backgroundColor: backgroundColor }"
@scroll="onScroll"
>
<!-- 顶部自定义区域 -->
<slot name="top"></slot>
<!-- 图片网格列表 -->
<view class="video-grid" :style="gridStyle">
<view
class="video-item"
mode="aspectFit"
v-for="(item, index) in imageList"
:key="index"
:style="itemStyle"
>
<!-- 视频播放器 -->
<image
:src="item.src"
class="video-player"
@click="onImageClick(item)"
/>
</view>
</view>
<!-- 空数据提示 -->
<view class="empty-container" v-if="imageList.length === 0">
<slot name="empty" v-if="$slots.empty"></slot>
<view v-else class="empty-content">
<image
src="/static/images/empty-image.png"
mode="aspectFit"
class="empty-img"
/>
<text class="empty-text">暂无数据</text>
</view>
</view>
</scroll-view>
</template>
<script>
export default {
name: 'image-grid-enhanced',
props: {
// 视频数据列表
imageList: {
type: Array,
required: true,
default: () => []
},
// 每行列数
columns: {
type: Number,
default: 2
},
// 间距
gap: {
type: String,
default: '10px'
},
// 容器高度
height: {
type: String,
default: '100vh'
},
// 背景颜色
backgroundColor: {
type: String,
default: '#FFFFFF'
}
},
data() {
return {
scrollTop: 0, // 当前滚动位置
};
},
computed: {
gridStyle() {
return {
display: 'grid',
gridTemplateColumns: `repeat(${this.columns}, 1fr)`,
gap: this.gap,
padding: '10px',
backgroundColor: this.backgroundColor
};
},
itemStyle() {
const aspectRatio = 0.75; // 4:3比例
return {
position: 'relative',
overflow: 'hidden',
borderRadius: '8px',
backgroundColor: this.backgroundColor,
aspectRatio: aspectRatio
};
}
},
mounted() {
},
methods: {
// 视频点击事件 - 通过蒙版层触发
onImageClick(item) {
console.log("拦截事件",item)
this.$emit('image-click', item);
},
// 滚动事件处理
onScroll(e) {
this.scrollTop = e.detail.scrollTop;
this.$emit('scroll', e);
}
}
};
</script>
<style scoped lang="scss">
.scroll-container {
width: 100%;
overflow: hidden;
}
.video-grid {
padding: 8px;
}
.video-item {
position: relative;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.video-player {
width: 100%;
height: 100%;
display: block;
background: #f7f7f7;
}
/* 蒙版层样式 - 覆盖整个视频项 */
.video-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.video-meta {
padding: 12px;
}
.video-title {
font-size: 14px;
line-height: 1.5;
color: white;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
.video-actions {
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
.action-btn {
display: flex;
align-items: center;
margin-left: 15px;
text {
font-size: 12px;
margin-left: 4px;
color: white;
}
}
.empty-container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.empty-content {
display: flex;
flex-direction: column;
align-items: center;
}
.empty-img {
width: 150px;
height: 150px;
opacity: 0.5;
}
.empty-text {
font-size: 16px;
color: #999;
margin-top: 20px;
}
</style>

2
pages.json
View File

@ -59,8 +59,8 @@
"autoscan": true, "autoscan": true,
"custom": { "custom": {
// 使用正确的路径格式 // 使用正确的路径格式
"^smart-tabs": "@/components/smart-tabs/smart-tabs.vue", "^smart-tabs": "@/components/smart-tabs/smart-tabs.vue",
"^image-grid-simple": "@/components/image-grid-simple/image-grid-simple.vue",
"^video-grid-simple": "@/components/video-grid-simple/video-grid-simple.vue", "^video-grid-simple": "@/components/video-grid-simple/video-grid-simple.vue",
"^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)": "z-paging/components/z-paging$1/z-paging$1.vue", "^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)": "z-paging/components/z-paging$1/z-paging$1.vue",
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"

79
pages/category/category.vue
View File

@ -9,27 +9,20 @@
</smart-tabs> </smart-tabs>
<!-- 视频列表 --> <!-- 视频列表 -->
<view class="video-container"> <view class="video-container">
<view class="video-grid"> <image-grid-simple
<view :imageList="list"
v-for="(video, index) in list" :columns="2"
:key="index" :height="'80vh'"
class="video-item" @image-click="handlerClick"
> >
<view class="video-card">
<video
:src="video.url"
:poster="video.poster"
class="video-player"
:controls="false"
:show-center-play-btn="true"
:autoplay="true"
:loop="true"
@play="handlePlay(index)"
></video>
<template #empty>
<view class="custom-empty">
<image src="/static/images/no-videos.png" />
<text>没有找到视频内容</text>
</view> </view>
</view> </template>
</view> </image-grid-simple>
</view> </view>
</template> </template>
@ -38,7 +31,55 @@
data() { data() {
return { return {
current:0, current:0,
tabs:[] tabs:[],
list:[
{
"id":1,
"title":"1",
"src":"../../static/images/default.png"
},
{
"id":2,
"title":2,
"src":"../../static/images/default.png"
},
{
"id":3,
"title":3,
"src":"../../static/images/default.png"
},
{
"id":9,
"title":9,
"src":"../../static/images/default.png"
},
{
"id":4,
"title":4,
"src":"../../static/images/default.png"
},
{
"id":5,
"title":5,
"src":"../../static/images/default.png"
},
{
"id":6,
"title":6,
"src":"../../static/images/default.png"
},
{
"id":7,
"title":7,
"src":"../../static/images/default.png"
},
{
"id":8,
"title":8,
"src":"../../static/images/default.png"
}
]
} }
}, },
onLoad() { onLoad() {

79
pages/detail/detail.vue
View File

@ -12,7 +12,17 @@
<!-- <ad-rewarded-video ref="adRewardedVideo" adpid="1507000689" :loadnext="true" v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror"> <!-- <ad-rewarded-video ref="adRewardedVideo" adpid="1507000689" :loadnext="true" v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror">
<button :disabled="loading" :loading="loading">显示广告</button> <button :disabled="loading" :loading="loading">显示广告</button>
</ad-rewarded-video> --> </ad-rewarded-video> -->
<uni-fab ref="fab" :pattern="pattern" :horizontal="'right'" :vertical="'bottom'" :popMenu="false" @fabClick="downloadAction" /> <!-- <uni-fab ref="fab" :pattern="pattern" :horizontal="'right'" :vertical="'bottom'" :popMenu="false" @fabClick="downloadAction" /> -->
<uni-fab
ref="fab"
:pattern="pattern"
:content="content"
:horizontal="'right'"
:vertical="'bottom'"
:popMenu="true"
@trigger="trigger"
@fabClick="fabClick" />
</view> </view>
</template> </template>
@ -24,13 +34,27 @@
url:"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4", url:"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4",
id:0, id:0,
pattern:{ pattern:{
color:'#19c324', color: '#19c324',
selectedColor:'#19c324', backgroundColor: '#fff',
buttonColor:"rgba(0, 0, 0, 0)", selectedColor: '#19c324',
icon:'cloud-download-filled', buttonColor: '#19c324',
iconColor:'#fff' iconColor: '#fff'
}, },
isDownload:false isDownload:false,
content: [
{
iconPath: '/static/vip_download.png',
selectedIconPath: '/static/vip_download_active.png',
text: '会员下载',
active: false
},
{
iconPath: '/static/download.png',
selectedIconPath: '/static/download_ok.png',
text: '看视频免费下载',
active: false
}
]
} }
}, },
onLoad(options) { onLoad(options) {
@ -50,6 +74,47 @@
// this.$refs.adRewardedVideo.load(); // this.$refs.adRewardedVideo.load();
}, },
methods: { methods: {
trigger(e) {
console.log(e)
this.content[e.index].active = !e.item.active
uni.showModal({
title: '提示',
content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
success: function(res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
fabClick() {
uni.showToast({
title: '点击了悬浮按钮',
icon: 'none'
})
},
switchBtn(hor, ver) {
if (hor === 0) {
this.direction = this.direction === 'horizontal' ? 'vertical' : 'horizontal'
this.directionStr = this.direction === 'horizontal' ? '垂直' : '水平'
} else {
this.horizontal = hor
this.vertical = ver
}
this.$forceUpdate()
},
switchColor() {
this.is_color_type = !this.is_color_type
if (this.is_color_type) {
this.pattern.iconColor = '#aaa'
this.pattern.buttonColor = '#fff'
} else {
this.pattern.iconColor = '#fff'
this.pattern.buttonColor = '#007AFF'
}
},
async downloadAction() { async downloadAction() {
// 判断用户是否为会员 // 判断用户是否为会员
let userInfo = null let userInfo = null

29
pages/home/home.nvue
View File

@ -5,12 +5,11 @@
:activeColor="'#19c324'" :activeColor="'#19c324'"
@change="handleTabChange" @change="handleTabChange"
/> />
<video-grid-simple <image-grid-simple
:videoList="list" :imageList="list"
:columns="2" :columns="2"
:autoPlayCenter="false"
:height="'80vh'" :height="'80vh'"
@video-click="handleVideoClick" @image-click="handlerClick"
> >
<template #empty> <template #empty>
@ -19,7 +18,7 @@
<text>没有找到视频内容</text> <text>没有找到视频内容</text>
</view> </view>
</template> </template>
</video-grid-simple> </image-grid-simple>
</template> </template>
<script> <script>
@ -40,47 +39,47 @@
"id":1, "id":1,
"title":"1", "title":"1",
"src":"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" "src":"../../static/images/default.png"
}, },
{ {
"id":2, "id":2,
"title":2, "title":2,
"src":"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" "src":"../../static/images/default.png"
}, },
{ {
"id":3, "id":3,
"title":3, "title":3,
"src":"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" "src":"../../static/images/default.png"
}, },
{ {
"id":9, "id":9,
"title":9, "title":9,
"src":"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" "src":"../../static/images/default.png"
}, },
{ {
"id":4, "id":4,
"title":4, "title":4,
"src":"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" "src":"../../static/images/default.png"
}, },
{ {
"id":5, "id":5,
"title":5, "title":5,
"src":"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" "src":"../../static/images/default.png"
}, },
{ {
"id":6, "id":6,
"title":6, "title":6,
"src":"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" "src":"../../static/images/default.png"
}, },
{ {
"id":7, "id":7,
"title":7, "title":7,
"src":"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" "src":"../../static/images/default.png"
}, },
{ {
"id":8, "id":8,
"title":8, "title":8,
"src":"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" "src":"../../static/images/default.png"
} }
], ],
} }
@ -91,7 +90,7 @@
handleTabChange(idx) { handleTabChange(idx) {
this.current = idx; this.current = idx;
}, },
handleVideoClick(item) { handlerClick(item) {
console.log("video click",item) console.log("video click",item)
// 请求详情 // 请求详情
uni.navigateTo({ uni.navigateTo({

78
pages/personal/personal.vue
View File

@ -22,27 +22,20 @@
<uni-section class="title" title="已下载" type="line"></uni-section> <uni-section class="title" title="已下载" type="line"></uni-section>
<!-- 已下载列表 --> <!-- 已下载列表 -->
<view class="video-container"> <view class="video-container">
<view class="video-grid"> <image-grid-simple
<view :imageList="list"
v-for="(video, index) in list" :columns="2"
:key="index" :height="'80vh'"
class="video-item" @image-click="handlerClick"
> >
<view class="video-card">
<video
:src="video.url"
:poster="video.poster"
class="video-player"
:controls="false"
:show-center-play-btn="true"
:autoplay="true"
:loop="true"
@play="handlePlay(index)"
></video>
<template #empty>
<view class="custom-empty">
<image src="/static/images/no-videos.png" />
<text>没有找到视频内容</text>
</view> </view>
</view> </template>
</view> </image-grid-simple>
</view> </view>
</view> </view>
</template> </template>
@ -55,7 +48,54 @@
avatar:'https://ts4.tc.mm.bing.net/th/id/OIP-C.-RXVvrUScB5pzqIpuROWNgAAAA?rs=1&pid=ImgDetMain&o=7&rm=3' avatar:'https://ts4.tc.mm.bing.net/th/id/OIP-C.-RXVvrUScB5pzqIpuROWNgAAAA?rs=1&pid=ImgDetMain&o=7&rm=3'
}, },
download:0, download:0,
list:[] list:[
{
"id":1,
"title":"1",
"src":"../../static/images/default.png"
},
{
"id":2,
"title":2,
"src":"../../static/images/default.png"
},
{
"id":3,
"title":3,
"src":"../../static/images/default.png"
},
{
"id":9,
"title":9,
"src":"../../static/images/default.png"
},
{
"id":4,
"title":4,
"src":"../../static/images/default.png"
},
{
"id":5,
"title":5,
"src":"../../static/images/default.png"
},
{
"id":6,
"title":6,
"src":"../../static/images/default.png"
},
{
"id":7,
"title":7,
"src":"../../static/images/default.png"
},
{
"id":8,
"title":8,
"src":"../../static/images/default.png"
}
]
} }
}, },
onLoad() { onLoad() {

BIN
static/.DS_Store vendored
View File

Binary file not shown.

BIN
static/download.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
static/download_ok.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
static/images/default.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 MiB

BIN
static/vip_download.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
static/vip_download_active.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB