155 lines
3.3 KiB
Vue
155 lines
3.3 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 头像 -->
|
||
<view class="header">
|
||
<uni-row class="avatar-box">
|
||
<uni-col :span="6">
|
||
<image class="avatar" :src="userInfo.avatar"></image>
|
||
</uni-col>
|
||
<uni-col :span="18">
|
||
<view class="user-info">
|
||
<uni-icons type="vip-filled" style="color:#eede6f"></uni-icons>
|
||
<text style="color:#eede6f"> 昵称 </text>
|
||
<uni-icons type="vip-filled" style="color:#eede6f"></uni-icons>
|
||
</view>
|
||
<view class="user-info">
|
||
<text>当前已下载：{{download}}</text>
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</view>
|
||
|
||
<uni-section class="title" title="已下载" type="line"></uni-section>
|
||
<!-- 已下载列表 -->
|
||
<view class="video-container">
|
||
<image-grid-simple
|
||
:imageList="list"
|
||
:columns="2"
|
||
:height="'80vh'"
|
||
@image-click="handlerClick"
|
||
>
|
||
|
||
<template #empty>
|
||
<view class="custom-empty">
|
||
<image src="/static/images/no-videos.png" />
|
||
<text>没有找到视频内容</text>
|
||
</view>
|
||
</template>
|
||
</image-grid-simple>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
userInfo:{
|
||
avatar:'https://ts4.tc.mm.bing.net/th/id/OIP-C.-RXVvrUScB5pzqIpuROWNgAAAA?rs=1&pid=ImgDetMain&o=7&rm=3'
|
||
},
|
||
download:0,
|
||
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() {
|
||
this.getUserInfo()
|
||
},
|
||
methods: {
|
||
getUserInfo() {
|
||
// 获取用户信息
|
||
},
|
||
getUserDownload(){
|
||
// 获取用户已下载数据
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
/* @font-face {
|
||
font-family: CustomFont;
|
||
src: url('@/static/iconfont/iconfont.ttf');
|
||
} */
|
||
|
||
.header {
|
||
margin: 10rpx;
|
||
}
|
||
|
||
.title {
|
||
margin-top: 10rpx;
|
||
margin-left: 20rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.avatar-box {
|
||
margin-top: 20rpx;
|
||
|
||
}
|
||
.avatar {
|
||
margin-left: 30rpx;
|
||
border-radius: 50%;
|
||
height: 150rpx;
|
||
width: 150rpx;
|
||
}
|
||
|
||
.user-info {
|
||
margin-left: 20rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.download-box {
|
||
margin-top: 10rpx;
|
||
margin-bottom: 10rpx;
|
||
margin-left: 20rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
</style>
|