MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化me页面

Browse Source
This commit is contained in:
zyronon 2021-09-28 21:50:46 +08:00
parent 26dc60e7f0
commit 7b6d092a11
10 changed files with 232 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

188
src/assets/data/resource.js
View File

@ -287,7 +287,7 @@ export default {
"create_time": "1630423555",
"status": 1,
"desc": "108线网红，福州人在上海，没有更新就是在吃土",
"is_private":0
"is_private": 0
}
},
{
@ -377,7 +377,7 @@ export default {
"create_time": "1630423555",
"status": 1,
"desc": "谢谢关注\n浅谈&合作v：a1231231234\n旅行&报名v: 1231231891242\n新疆 西藏 四川摄影旅拍路线规划与设计",
"is_private":0
"is_private": 0
}
},
{
@ -14441,5 +14441,187 @@ export default {
"music": null
},
],
users: []
users: [],
music: [
{
name: '龙卷风',
"mp3": "http://im5.tongbu.com/rings/singerring/zt_uunGo_1/5605.mp3",
cover: require('../../assets/img/music-cover/1.png'),
author: '周杰伦',
duration: 99,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '爱在西元前',
mp3: 'https://m3.8js.net:99/1916/501204165042405.mp3',
cover: require('../../assets/img/music-cover/2.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '蜗牛',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/3684.mp3',
cover: require('../../assets/img/music-cover/3.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '半岛铁盒',
mp3: 'https://m3.8js.net:99/2016n/46/94745.mp3',
cover: require('../../assets/img/music-cover/4.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '轨迹',
mp3: 'https://m3.8js.net:99/1832/411204324135934.mp3',
cover: require('../../assets/img/music-cover/5.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '七里香',
mp3: 'https://m3.8js.net:99/2016n/14/53717.mp3',
cover: require('../../assets/img/music-cover/6.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '发如雪',
mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
cover: require('../../assets/img/music-cover/7.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '霍元甲',
mp3: 'https://m3.8js.net:99/1921/261204212643140.mp3',
cover: require('../../assets/img/music-cover/8.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '千里之外(周杰伦/费玉清)',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/121.mp3',
cover: require('../../assets/img/music-cover/9.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '菊花台',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/2022.mp3',
cover: require('../../assets/img/music-cover/10.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '不能说的秘密',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/165.mp3',
cover: require('../../assets/img/music-cover/11.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '牛仔很忙',
mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/219.mp3',
cover: require('../../assets/img/music-cover/12.png'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '给我一首歌的时间',
mp3: 'https://m3.8js.net:99/1938/041204380445445.mp3',
cover: require('../../assets/img/music-cover/13.jpg'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '烟花易冷',
mp3: 'https://m3.8js.net:99/1828/051204280535192.mp3',
cover: require('../../assets/img/music-cover/14.jpg'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '惊叹号',
mp3: 'https://m3.8js.net:99/20111103/150.mp3',
cover: require('../../assets/img/music-cover/15.jpg'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '明明就',
mp3: 'https://m3.8js.net:99/2016n/27/96537.mp3',
cover: require('../../assets/img/music-cover/16.jpg'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '算什么男人',
mp3: 'https://m3.8js.net:99/20150107/429.mp3',
cover: require('../../assets/img/music-cover/17.jpg'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
{
name: '告白气球',
mp3: 'https://m3.8js.net:99/20161016/481.mp3',
cover: require('../../assets/img/music-cover/18.jpg'),
author: '周杰伦',
duration: 60,
use_count: 37441000,
is_collect: false,
is_play: false,
},
],
}

BIN
src/assets/img/icon/location.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 633 B

BIN
src/assets/img/icon/me/camera-light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
src/assets/img/icon/me/certification.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 718 B

BIN
src/assets/img/icon/me/code-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 197 KiB

BIN
src/assets/img/icon/me/copy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

8
src/mock/index.js
View File

@ -111,17 +111,15 @@ Mock.mock(/private1/, options => {
})
Mock.mock(/collect/, options => {
let page = getPage(options)
return Mock.mock({
data: {
pageNo: page.pageNo,
video: {
total: 0,
list: [],
list: resource.videos,
},
audio: {
music: {
total: 0,
list: [],
list: resource.music,
}
}, code: 200, msg: '',
})

18
src/pages/me/Me.less
View File

@ -96,9 +96,15 @@
}
.right {
font-size: 1.4rem;
display: flex;
align-items: center;
color: @second-text-color;
img {
height: 1.5rem;
width: 1.5rem;
}
}
}
@ -113,6 +119,7 @@
position: relative;
.poster {
object-fit: cover;
border-radius: .4rem;
width: 100%;
height: 100%;
@ -138,7 +145,7 @@
}
}
.audio {
.music {
background: @active-main-bg;
border-radius: .5rem;
padding: 1rem;
@ -164,6 +171,11 @@
display: flex;
align-items: center;
color: @second-text-color;
img {
height: 1.5rem;
width: 1.5rem;
}
}
}
@ -263,7 +275,7 @@
transform: translateY(-1rem);
background: @main-bg;
padding: 0 2rem 0 2rem;
border-radius: 1rem 1rem 0 0 ;
border-radius: 1rem 1rem 0 0;
.head {
width: 100%;
@ -340,7 +352,7 @@
margin-left: .6rem;
}
.text{
.text {
white-space: pre-wrap;
}
}

53
src/pages/me/Me.vue
View File

@ -35,18 +35,17 @@
<div class="heat">
<div class="text">
<span>获赞</span>
<span class="num">18</span>
<span class="num">{{ $likeNum(localAuthor.aweme_count) }}</span>
</div>
<div class="text">
<span>关注</span>
<span class="num">8</span>
<span class="num">{{ $likeNum(localAuthor.following_count) }}</span>
</div>
<div class="text">
<span>粉丝</span>
<span class="num">62</span>
<span class="num">{{ $likeNum(localAuthor.follower_count) }}</span>
</div>
</div>
</div>
<div class="description">
<p class="name f22 mt1r mb1r">{{ userinfo.nickname }}</p>
@ -160,20 +159,20 @@
</div>
<div class="collect" ref="collect">
<div class="video" v-if=" videos.collect.video.list.length">
<div class="top">
<div class="top" >
<div class="left">
<img src="../../assets/img/icon/me/video-whitegray.png" alt="">
<span>视频</span>
</div>
<div class="right">
<span>全部</span>
<back direction="right"></back>
<back direction="right" ></back>
</div>
</div>
<div class="list">
<div class="item"
v-for="i in videos.collect.video.list.length>3?videos.collect.video.list.slice(0,3):videos.collect.video.list">
<img class="poster" :src="$imgPreview(i.poster)" alt="">
<img class="poster" :src="$imgPreview(i.video+videoPoster)" alt="">
<div class="num">
<img class="love" src="../../assets/img/icon/love.svg" alt="">
<span>{{ $likeNum(i.likeNum) }}</span>
@ -182,7 +181,7 @@
</div>
</div>
<div class="audio" v-if=" videos.collect.video.list.length">
<div class="music" v-if=" videos.collect.music.list.length">
<div class="top">
<div class="left">
<img src="../../assets/img/icon/me/music-whitegray.png" alt="">
@ -190,15 +189,14 @@
</div>
<div class="right">
<span>全部</span>
<back direction="right"></back>
<back direction="right" ></back>
</div>
</div>
<div class="list">
<div class="item"
v-for="i in videos.collect.video.list.length>3?videos.collect.video.list.slice(0,3):videos.collect.video.list">
<img class="poster" :src="$imgPreview(i.poster)" alt="">
<div class="title">用户创作的原声用户创作的原声用户创作的原声
</div>
v-for="i in videos.collect.music.list.length>3?videos.collect.music.list.slice(0,3):videos.collect.music.list">
<img class="poster" :src="$imgPreview(i.cover)" alt="">
<div class="title">{{ i.name }}</div>
</div>
</div>
</div>
@ -376,7 +374,7 @@ export default {
list: [],
total: -1,
},
audio: {
music: {
list: [],
total: -1,
}
@ -395,16 +393,21 @@ export default {
sprint: 15,
canScroll: true,
localAuthor: {
school: {
name: '中央戏剧学院',
department: null,
joinTime: null,
education: null,
displayType: 1,
},
"id": "93864497380",
"unique_id_modify_time": "1630393144",
"unique_id": "10040050",
"favoriting_count": 143,
"avatar": require('../../assets/img/icon/avatar/1.png'),
"city": "北京",
"school": "中央戏剧学院",
"province": null,
"country": "",
"location": "",
"city": "成都",
"province": '四川',
"country": "中国",
"birthday": "2002-01-01",
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
"following_count": 66,
@ -416,11 +419,10 @@ export default {
"last_login_time": "1630423555",
"create_time": "1630423555",
"status": 1,
"desc": `一个普普通通学表演的
看到的人都能开开心心
`,
"is_private": 0
}
"desc": `一个普普通通学表演的\n看到的人都能开开心心`,
"is_private": 1
},
videoPoster: `?vframe/jpg/offset/0/w/${document.body.clientWidth}`
}
},
computed: {
@ -554,7 +556,8 @@ export default {
if (this.loadings['loading' + this.contentIndex]) return
console.log('到底了')
let videoOb = this.videos[Object.keys(this.videos)[this.contentIndex]]
if (videoOb.total > videoOb.list.length) {
if (this.contentIndex !== 3 && videoOb.total > videoOb.list.length) {
videoOb.pageNo++
this.loadings['loading' + this.contentIndex] = true
let res

2
src/store/index.js
View File

@ -38,7 +38,7 @@ const store = Vuex.createStore({
"create_time": "1630423555",
"status": 1,
"desc": `一个普普通通学表演的\n看到的人都能开开心心`,
"is_private": 0
"is_private": 1
},
friends: {
"all": [