debug
This commit is contained in:
zyronon
parent
abc5b15ff5
commit
0e74f37569
26
README.md
26
README.md
@ -13,30 +13,24 @@
|
||||
首页|50%
|
||||
-- 音乐|☑
|
||||
-- 抖音音乐榜|☑
|
||||
-- 搜索|50%;
|
||||
-- 直播|50%;
|
||||
-- 搜索|50%
|
||||
-- 直播|50%
|
||||
朋友|0%
|
||||
消息|80%
|
||||
-- 私聊|☑
|
||||
我|90%
|
||||
-- 求更新|☑
|
||||
-- 关注|0
|
||||
-- 粉丝|0
|
||||
-- 编辑资料|☑
|
||||
-- 添加朋友|☑
|
||||
-- 我的音乐|30%
|
||||
-- 我的音乐|50%
|
||||
-- 收藏视频\音乐|50%
|
||||
-- 抖音商城|0
|
||||
-- 我的订单|0
|
||||
-- 钱包|0
|
||||
-- 我的二维码|☑
|
||||
-- 我的二维码|☑
|
||||
-- 设置|30%
|
||||
首页|
|
||||
首页|
|
||||
首页|
|
||||
首页|
|
||||
首页|
|
||||
首页|
|
||||
首页|
|
||||
首页|
|
||||
-- 右侧菜单子页面|10%
|
||||
-- 设置|☑
|
||||
-- -- 子页面|☑
|
||||
登录\注册|☑
|
||||
首页|
|
||||
|
||||
## 目标功能
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 759 B After Width: | Height: | Size: 7.1 KiB |
@ -60,6 +60,7 @@
|
||||
}
|
||||
|
||||
.right {
|
||||
max-width: 80%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
@ -225,26 +225,30 @@
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
|
||||
<div class="li" @click="$nav('/me/right-menu/look-history')">
|
||||
<img src="../../assets/img/icon/newicon/left_menu/clock.png" alt="">
|
||||
<span>观看历史</span>
|
||||
</div>
|
||||
<div class="li" @click="$nav('/my-card')">
|
||||
<img src="../../assets/img/icon/newicon/left_menu/qrcode.png" alt="">
|
||||
<span>我的二维码</span>
|
||||
</div>
|
||||
<div class="li" @click="$nav('')">
|
||||
<div class="li" @click="$nav('/me/right-menu/look-history')">
|
||||
<img src="../../assets/img/icon/newicon/left_menu/time.png" alt="">
|
||||
<span>观看历史</span>
|
||||
</div>
|
||||
<div class="li" @click="$no">
|
||||
<img src="../../assets/img/icon/newicon/left_menu/clock.png" alt="">
|
||||
<span>时间管理</span>
|
||||
</div>
|
||||
<div class="li" @click="$no">
|
||||
<img src="../../assets/img/icon/newicon/left_menu/workbench.png" alt="">
|
||||
<span>创作者服务中心</span>
|
||||
</div>
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
<div class="li" @click="$nav('MyCard')">
|
||||
<div class="li" @click="$no">
|
||||
<img src="../../assets/img/icon/newicon/left_menu/bytedance-mini-app.png" alt="">
|
||||
<span>小程序</span>
|
||||
</div>
|
||||
<div class="li" @click="$nav('MyCard')">
|
||||
<div class="li" @click="$no">
|
||||
<img src="../../assets/img/icon/newicon/left_menu/gongyi.png" alt="">
|
||||
<span>抖音公益</span>
|
||||
</div>
|
||||
@ -252,7 +256,7 @@
|
||||
<img src="../../assets/img/icon/newicon/left_menu/umbrella.png" alt="">
|
||||
<span>未成年保护工具</span>
|
||||
</div>
|
||||
<div class="li" @click="$nav('MyCard')">
|
||||
<div class="li" @click="$no">
|
||||
<img src="../../assets/img/icon/newicon/left_menu/headset.png" alt="">
|
||||
<span>我的客服</span>
|
||||
</div>
|
||||
@ -264,38 +268,38 @@
|
||||
<div v-else class="more-function">
|
||||
<div class="title">生活服务</div>
|
||||
<div class="functions">
|
||||
<div class="function">
|
||||
<div class="function" @click="$no">
|
||||
<img src="../../assets/img/icon/newicon/left_menu/quan.png" alt="">
|
||||
<span>卡券</span>
|
||||
</div>
|
||||
<div class="function">
|
||||
<div class="function" @click="$no">
|
||||
<img src="../../assets/img/icon/newicon/left_menu/sd-card.png" alt="">
|
||||
<span>免流量</span>
|
||||
</div>
|
||||
<div class="function" @click="$nav('MyCollect')">
|
||||
<div class="function" @click="$no">
|
||||
<img src="../../assets/img/icon/newicon/left_menu/alarmmmmmmmmmmmm.png" alt="">
|
||||
<span>视频彩铃</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">拓展功能</div>
|
||||
<div class="functions">
|
||||
<div class="function" @click="$nav('MyCard')">
|
||||
<div class="function" @click="$no">
|
||||
<img src="../../assets/img/icon/newicon/left_menu/sun-one.png" alt="">
|
||||
<span>我的动态</span>
|
||||
</div>
|
||||
<div class="function">
|
||||
<div class="function" @click="$no">
|
||||
<img src="../../assets/img/icon/newicon/left_menu/download.png" alt="">
|
||||
<span>我的缓存</span>
|
||||
</div>
|
||||
<div class="function" @click="$nav('MyCard')">
|
||||
<div class="function" @click="$no">
|
||||
<img src="../../assets/img/icon/newicon/left_menu/hot.png" alt="">
|
||||
<span>上热门</span>
|
||||
</div>
|
||||
<div class="function" @click="$nav('MyCollect')">
|
||||
<div class="function" @click="$no">
|
||||
<img src="../../assets/img/icon/newicon/left_menu/shop.png" alt="">
|
||||
<span>小店随心推</span>
|
||||
</div>
|
||||
<div class="function" @click="$nav('MyCollect')">
|
||||
<div class="function" @click="$no">
|
||||
<img src="../../assets/img/icon/newicon/left_menu/yuandi.png" alt="">
|
||||
<span>投教园地</span>
|
||||
</div>
|
||||
|
||||
@ -16,15 +16,15 @@
|
||||
<div class="cover">
|
||||
<img v-lazy="$imgPreview(music.cover)" alt="">
|
||||
</div>
|
||||
<div class="lyrics-wrapper" ref="lyrics-wrapper">
|
||||
<div class="lyrics-wrapper" ref="lyrics-wrapper" @click="isFullLyrics = true">
|
||||
<div class="container">
|
||||
<div class="lyrics" v-for="item in lyricsTexts">{{ item.c }}</div>
|
||||
<div class="lyrics" v-for="item in lyricsFullTexts">{{ item.c }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lyrics-mask" @click="isFullLyrics = true"></div>
|
||||
<!-- <div class="lyrics-mask" @click="isFullLyrics = true"></div>-->
|
||||
</div>
|
||||
<div class="lyrics-full" v-show="isFullLyrics" @click="isFullLyrics = false">
|
||||
<div class="list">
|
||||
<div class="list" style="overflow:auto;">
|
||||
<div class="item" v-for="item in lyricsFullTexts">{{ item.c }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -36,7 +36,8 @@
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="btn">
|
||||
<img src="../../assets/img/icon/star-white.png" alt="">
|
||||
<img src="../../assets/img/icon/star-white.png" v-show="!isCollect" @click="isCollect = !isCollect">
|
||||
<img src="../../assets/img/icon/star-yellow.png" v-show="isCollect" @click="isCollect = !isCollect">
|
||||
<span>收藏</span>
|
||||
</div>
|
||||
<div class="btn">
|
||||
@ -72,7 +73,46 @@
|
||||
</div>
|
||||
</div>
|
||||
</SlideItem>
|
||||
<SlideItem>
|
||||
<SlideItem style="overflow: auto;">
|
||||
<div class="my-collect">
|
||||
<div class="play-all">
|
||||
<div class="left">
|
||||
<img src="../../assets/img/icon/me/play-all.webp" alt="">
|
||||
<span>播放全部</span>
|
||||
<span class="num">(2)</span>
|
||||
</div>
|
||||
<img class="menu" src="../../assets/img/icon/menu-white.png" alt="">
|
||||
</div>
|
||||
<div class="collect-list">
|
||||
<div class="item" v-for="item in collectMusic">
|
||||
<div class="left">
|
||||
<div class="cover-wrapper">
|
||||
<img v-lazy="$imgPreview(item.cover)" alt="" class="cover">
|
||||
</div>
|
||||
<div class="desc">
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<div class="author">{{ item.author }}</div>
|
||||
<div class="desc-bottom">
|
||||
<div class="tag">完整版</div>
|
||||
<div class="duration">{{ $duration(item.duration) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="collect-icon">
|
||||
<img src="../../assets/img/icon/star-white.png" v-show="!isCollect" @click="isCollect = !isCollect">
|
||||
<img src="../../assets/img/icon/star-yellow.png" v-show="isCollect" @click="isCollect = !isCollect">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recommend">
|
||||
<span>推荐收藏</span>
|
||||
<div class="right">
|
||||
<span>自动播放</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SlideItem>
|
||||
</SlideRowList>
|
||||
</div>
|
||||
@ -81,19 +121,14 @@
|
||||
import {mapState} from "vuex";
|
||||
import globalMethods from "../../utils/global-methods";
|
||||
import {nextTick} from "vue";
|
||||
// import lyricsFaruxue from '../../assets/data/lyrics/faruxue.txt'
|
||||
import gaobaiqiqiu from '../../assets/data/lyrics/gaobaiqiqiu.lrc'
|
||||
|
||||
|
||||
export default {
|
||||
name: "MyMusic",
|
||||
components: {},
|
||||
props: {
|
||||
modelValue: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
slideIndex: 0,
|
||||
slideIndex: 1,
|
||||
music: {
|
||||
name: '告白气球',
|
||||
mp3: 'https://mp32.9ku.com/upload/128/2017/02/05/858423.mp3',
|
||||
@ -104,11 +139,14 @@ export default {
|
||||
is_collect: false,
|
||||
is_play: false,
|
||||
},
|
||||
collectMusic: [],
|
||||
recommendMusic: [],
|
||||
lyricsTexts: [],
|
||||
lyricsFullTexts: [],
|
||||
isPlay: false,
|
||||
isLoop: false,
|
||||
isMove: false,
|
||||
isCollect: false,
|
||||
isFullLyrics: false,
|
||||
lastPageX: 0,
|
||||
pageX: 0,
|
||||
@ -124,6 +162,7 @@ export default {
|
||||
...mapState(['bodyWidth'])
|
||||
},
|
||||
created() {
|
||||
this.getCollectMusic()
|
||||
},
|
||||
mounted() {
|
||||
this.audio.src = this.music.mp3
|
||||
@ -178,6 +217,15 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
async getCollectMusic() {
|
||||
this.loading = true
|
||||
let res = await this.$api.videos.collect()
|
||||
this.loading = false
|
||||
if (res.code === this.SUCCESS) {
|
||||
this.collectMusic = res.data.music.list.slice(0, 2)
|
||||
this.recommendMusic = res.data.music.list.slice(2, -1)
|
||||
}
|
||||
},
|
||||
createLrcObj(lrc) {
|
||||
let oLRC = {
|
||||
ti: "", //歌曲名
|
||||
@ -290,6 +338,12 @@ export default {
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
|
||||
.base-slide-item {
|
||||
&:nth-child(1) {
|
||||
background: rgb(136, 132, 133);
|
||||
}
|
||||
}
|
||||
|
||||
.music-play {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -480,6 +534,110 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.my-collect {
|
||||
padding: @padding-page;
|
||||
|
||||
.play-all {
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 3rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.num {
|
||||
color: gray;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.collect-list {
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
|
||||
.cover-wrapper {
|
||||
margin-right: 1rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.cover {
|
||||
border-radius: .2rem;
|
||||
@width: 6rem;
|
||||
width: @width;
|
||||
object-fit: cover;
|
||||
height: @width;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 40vw;
|
||||
}
|
||||
|
||||
.author, .desc-bottom {
|
||||
font-size: 1.2rem;
|
||||
color: @second-text-color;
|
||||
}
|
||||
|
||||
.desc-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
font-size: 1rem;
|
||||
background: @second-btn-color-tran;
|
||||
padding: .2rem .5rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.duration {
|
||||
margin-right: 1.4rem;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.collect-icon {
|
||||
img {
|
||||
width: 2.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,33 +6,57 @@
|
||||
</template>
|
||||
</BaseHeader>
|
||||
<div class="content">
|
||||
<Posters mode="normal" :list="videos"/>
|
||||
<NoMore/>
|
||||
<Scroll class="Scroll"
|
||||
@pulldown="loadData">
|
||||
<Posters mode="music" :list="videos"/>
|
||||
<Loading :is-full-screen="false" v-if="loading"/>
|
||||
<NoMore v-else/>
|
||||
</Scroll>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import resource from "../../../assets/data/resource";
|
||||
import Posters from "../../../components/Posters";
|
||||
import Scroll from "../../../components/Scroll";
|
||||
|
||||
export default {
|
||||
name: "VideoCollect",
|
||||
components: {
|
||||
Posters
|
||||
},
|
||||
props: {
|
||||
modelValue: false
|
||||
Posters,
|
||||
Scroll
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
videos: resource.my,
|
||||
total: 0,
|
||||
pageNo: 0,
|
||||
pageSize: 15,
|
||||
videos: [],
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
this.loadData(true)
|
||||
},
|
||||
methods: {}
|
||||
methods: {
|
||||
async loadData(init = false) {
|
||||
if (this.loading) return
|
||||
if (!init) {
|
||||
if (this.total <= this.videos.length) {
|
||||
return
|
||||
}
|
||||
this.pageNo++
|
||||
}
|
||||
this.loading = true
|
||||
let res = await this.$api.videos.my({pageNo: this.pageNo, pageSize: this.pageSize,})
|
||||
this.loading = false
|
||||
if (res.code === this.SUCCESS) {
|
||||
this.videos = this.videos.concat(res.data.list)
|
||||
this.total = res.data.total
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -50,7 +74,11 @@ export default {
|
||||
font-size: 1.4rem;
|
||||
|
||||
.content {
|
||||
padding-top: 6rem;
|
||||
padding-top: @header-height;
|
||||
|
||||
.Scroll {
|
||||
height: calc(100vh - @header-height)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -75,10 +75,10 @@ export default {
|
||||
computed: {
|
||||
isClear() {
|
||||
if (this.currentSlideItemIndex === 0) {
|
||||
return this.historyVideo.list = []
|
||||
return this.historyVideo.list.length
|
||||
}
|
||||
return this.historyOther.list = []
|
||||
}
|
||||
return this.historyOther.list.length
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getHistoryVideo(true)
|
||||
|
||||
@ -19,14 +19,14 @@
|
||||
<div class="row" @click="$nav('/edit-userinfo-item',{type:1})">
|
||||
<div class="left">名字</div>
|
||||
<div class="right">
|
||||
<span>{{ isEmpty(userinfo.name) }}</span>
|
||||
<span>{{ isEmpty(userinfo.nickname) }}</span>
|
||||
<back scale=".8" direction="right"></back>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" @click="$nav('/edit-userinfo-item',{type:2})">
|
||||
<div class="left">抖音号</div>
|
||||
<div class="right">
|
||||
<span>{{ isEmpty(userinfo.account) }}</span>
|
||||
<span>{{ isEmpty(userinfo.unique_id) }}</span>
|
||||
<back scale=".8" direction="right"></back>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,22 +17,22 @@
|
||||
<div v-if="type === 1">
|
||||
<div class="notice">我的名字</div>
|
||||
<div class="input-ctn" style="margin-bottom: 1rem;">
|
||||
<input type="text" v-model="localUserinfo.name" placeholder="记得填写名字哦">
|
||||
<img v-if="localUserinfo.name"
|
||||
<input type="text" v-model="localUserinfo.nickname" placeholder="记得填写名字哦">
|
||||
<img v-if="localUserinfo.nickname"
|
||||
style="transform: scale(2)"
|
||||
class="close" src="../../../assets/img/icon/newicon/close-and-bg.png" alt=""
|
||||
@click="localUserinfo.name = ''">
|
||||
@click="localUserinfo.nickname = ''">
|
||||
</div>
|
||||
<div class="num">{{ localUserinfo.name.length }}/20</div>
|
||||
<div class="num">{{ localUserinfo.nickname.length }}/20</div>
|
||||
</div>
|
||||
<div class="l-row" v-if="type === 2">
|
||||
<div class="notice">我的抖音号</div>
|
||||
<div class="input-ctn" style="margin-bottom: 1rem;">
|
||||
<input type="text" v-model="localUserinfo.account">
|
||||
<input type="text" v-model="localUserinfo.unique_id">
|
||||
<img
|
||||
v-if="localUserinfo.account" style="transform: scale(2)"
|
||||
v-if="localUserinfo.unique_id" style="transform: scale(2)"
|
||||
class="close" src="../../../assets/img/icon/newicon/close-and-bg.png" alt=""
|
||||
@click="localUserinfo.account = ''">
|
||||
@click="localUserinfo.unique_id = ''">
|
||||
</div>
|
||||
<div class="num">最多16个字，只允许包含字母、数字、下划线和点，30天内仅能修改一次</div>
|
||||
</div>
|
||||
@ -65,11 +65,11 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
isChanged() {
|
||||
if (this.type === 1) if (!this.localUserinfo.name) return false
|
||||
if (this.type === 1) if (!this.localUserinfo.nickname) return false
|
||||
if (this.type === 2) if (!this.localUserinfo.desc) return false
|
||||
if (this.userinfo.name !== this.localUserinfo.name) return true
|
||||
if (this.userinfo.nickname !== this.localUserinfo.nickname) return true
|
||||
if (this.userinfo.desc !== this.localUserinfo.desc) return true
|
||||
return this.userinfo.account !== this.localUserinfo.account;
|
||||
return this.userinfo.unique_id !== this.localUserinfo.unique_id;
|
||||
},
|
||||
...mapState({
|
||||
userinfo: 'userinfo',
|
||||
@ -89,7 +89,7 @@ export default {
|
||||
async save() {
|
||||
if (!this.isChanged) return
|
||||
if (this.type === 1) {
|
||||
if (!this.localUserinfo.name) return this.$notice('名字不能为空')
|
||||
if (!this.localUserinfo.nickname) return this.$notice('名字不能为空')
|
||||
}
|
||||
this.$showLoading()
|
||||
this.$store.commit('setUserinfo', this.localUserinfo)
|
||||
|
||||
@ -37,7 +37,7 @@ const store = Vuex.createStore({
|
||||
"last_login_time": "1630423555",
|
||||
"create_time": "1630423555",
|
||||
"status": 1,
|
||||
"desc": `一个普普通通学表演的\n看到的人都能开开心心`,
|
||||
"desc": `一个普普通通学表演的\n看到的人都能开开心心~~~~~~~~~~~~~`,
|
||||
"is_private": 1
|
||||
},
|
||||
friends: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user