feat: 优化UI
This commit is contained in:
Blizzard
+163
-47
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* 收听历史 — 从后端获取历史列表
|
||||
* 收听历史 — 历史 / 收藏 两 Tab
|
||||
*/
|
||||
const app = getApp()
|
||||
const api = require('../../utils/api')
|
||||
@@ -7,15 +7,28 @@ const util = require('../../utils/util')
|
||||
|
||||
Page({
|
||||
data: {
|
||||
filter: 'all',
|
||||
cleared: false,
|
||||
tab: 'history', // 'history' | 'favorite'
|
||||
historyList: [],
|
||||
isPlaying: false,
|
||||
loading: true
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this._refresh()
|
||||
const self = this
|
||||
const gd = app.globalData
|
||||
|
||||
// 未登录则先登录
|
||||
if (!gd.isLoggedIn || !gd.token) {
|
||||
app.login().then(function () {
|
||||
self._refresh()
|
||||
}).catch(function () {
|
||||
self.setData({ loading: false })
|
||||
wx.showToast({ title: '请先登录', icon: 'none' })
|
||||
})
|
||||
} else {
|
||||
this._refresh()
|
||||
}
|
||||
|
||||
this._onPlayerChange = () => this._updatePlayState()
|
||||
app.on('playerStateChange', this._onPlayerChange)
|
||||
},
|
||||
@@ -24,35 +37,52 @@ Page({
|
||||
if (this._onPlayerChange) app.off('playerStateChange', this._onPlayerChange)
|
||||
},
|
||||
|
||||
_refresh() {
|
||||
if (this.data.cleared) return
|
||||
setTab(e) {
|
||||
const tab = e.currentTarget.dataset.val
|
||||
if (tab === this.data.tab) return
|
||||
this.setData({ tab, historyList: [], loading: true })
|
||||
this._refresh()
|
||||
},
|
||||
|
||||
_refresh() {
|
||||
if (this.data.tab === 'history') {
|
||||
this._loadHistory()
|
||||
} else {
|
||||
this._loadFavorites()
|
||||
}
|
||||
},
|
||||
|
||||
_loadHistory() {
|
||||
const self = this
|
||||
const gd = app.globalData
|
||||
|
||||
api.getHistoryList({ current: 1, pageSize: 30 }).then(function (res) {
|
||||
if (res.code === 200 && res.data) {
|
||||
var list = res.data.list || res.data || []
|
||||
|
||||
// 附带格式化信息
|
||||
list = list.map(function (item) {
|
||||
// 节目可能包含频道信息，根据后端返回结构适配
|
||||
var channel = item.channel || item.program && item.program.channel || {}
|
||||
var program = item.program || item
|
||||
|
||||
return Object.assign({}, program, {
|
||||
_domainName: channel.name || program.channelName || '',
|
||||
_icon: channel.icon || '🎵',
|
||||
_bgColor: channel.bgColor || '#F0F0F0',
|
||||
_coverUrl: (channel.cover && channel.cover.url) || channel.coverUrl || '',
|
||||
_friendlyDate: util.getFriendlyDate(
|
||||
program.createdAt ? program.createdAt.substring(0, 10) : ''
|
||||
),
|
||||
durationText: util.formatTime(program.duration || 0),
|
||||
var list = (res.data.list || []).map(function (item) {
|
||||
// program 嵌套在 item.program 下
|
||||
var program = item.program || {}
|
||||
// channel 可能为 null，channel cover 在 program.cover
|
||||
var channel = program.channel || {}
|
||||
return {
|
||||
// 播放所需字段
|
||||
id: program.id,
|
||||
title: program.title || '未知节目',
|
||||
channelId: program.channelId || '',
|
||||
content: program.content || '',
|
||||
audioId: program.audioId || '',
|
||||
// 用历史记录的 duration（program.duration 可能是 0）
|
||||
duration: item.duration || program.duration || 0,
|
||||
// 显示字段
|
||||
_domainName: channel.name || '',
|
||||
_icon: program.cover || channel.cover || '📻',
|
||||
_bgColor: '#FFE8CC',
|
||||
_friendlyDate: util.getFriendlyDate(item.createdAtStr ? item.createdAtStr.substring(0, 10) : ''),
|
||||
durationText: util.formatTime(item.duration || 0),
|
||||
// 播放进度
|
||||
_progress: item.progress || 0,
|
||||
_isThisPlaying: gd.activeContent && gd.activeContent.id === program.id
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
self.setData({ historyList: list, isPlaying: gd.isPlaying, loading: false })
|
||||
} else {
|
||||
self.setData({ historyList: [], loading: false })
|
||||
@@ -63,9 +93,40 @@ Page({
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 仅更新播放状态
|
||||
*/
|
||||
_loadFavorites() {
|
||||
const self = this
|
||||
const gd = app.globalData
|
||||
|
||||
api.getFavoriteList({ current: 1, pageSize: 30 }).then(function (res) {
|
||||
if (res.code === 200 && res.data) {
|
||||
var list = (res.data.list || []).map(function (item) {
|
||||
var program = item.program || item
|
||||
var channel = program.channel || {}
|
||||
return {
|
||||
id: program.id,
|
||||
title: program.title || '未知节目',
|
||||
channelId: program.channelId || '',
|
||||
content: program.content || '',
|
||||
audioId: program.audioId || '',
|
||||
duration: program.duration || 0,
|
||||
_domainName: channel.name || '',
|
||||
_icon: program.cover || channel.cover || '📻',
|
||||
_bgColor: '#FFE8CC',
|
||||
_friendlyDate: util.getFriendlyDate(item.createdAtStr ? item.createdAtStr.substring(0, 10) : ''),
|
||||
durationText: util.formatTime(program.duration || 0),
|
||||
_isThisPlaying: gd.activeContent && gd.activeContent.id === program.id
|
||||
}
|
||||
})
|
||||
self.setData({ historyList: list, isPlaying: gd.isPlaying, loading: false })
|
||||
} else {
|
||||
self.setData({ historyList: [], loading: false })
|
||||
}
|
||||
}).catch(function (err) {
|
||||
console.error('[History] 加载收藏失败:', err)
|
||||
self.setData({ loading: false })
|
||||
})
|
||||
},
|
||||
|
||||
_updatePlayState() {
|
||||
var gd = app.globalData
|
||||
var list = this.data.historyList.map(function (item) {
|
||||
@@ -76,41 +137,96 @@ Page({
|
||||
this.setData({ historyList: list, isPlaying: gd.isPlaying })
|
||||
},
|
||||
|
||||
setFilter(e) {
|
||||
this.setData({ filter: e.currentTarget.dataset.val })
|
||||
},
|
||||
|
||||
onPlay(e) {
|
||||
const id = e.currentTarget.dataset.id
|
||||
const gd = app.globalData
|
||||
|
||||
// 从已加载数据中查找
|
||||
var content = null
|
||||
if (gd.activeContent && gd.activeContent.id === id) {
|
||||
app.togglePlay()
|
||||
return
|
||||
}
|
||||
|
||||
// 从列表中找到基础信息
|
||||
var base = null
|
||||
for (var i = 0; i < this.data.historyList.length; i++) {
|
||||
if (this.data.historyList[i].id === id) {
|
||||
content = this.data.historyList[i]
|
||||
base = this.data.historyList[i]
|
||||
break
|
||||
}
|
||||
}
|
||||
if (!content) return
|
||||
if (!base) return
|
||||
|
||||
if (gd.activeContent && gd.activeContent.id === id) {
|
||||
app.togglePlay()
|
||||
} else {
|
||||
app.playContent(content)
|
||||
}
|
||||
// 拉取完整节目详情（含 audio.url）再播放
|
||||
wx.showLoading({ title: '加载中' })
|
||||
api.getProgramDetail(id).then(function (res) {
|
||||
wx.hideLoading()
|
||||
if (res.code === 200 && res.data) {
|
||||
app.playContent(Object.assign({}, base, res.data))
|
||||
} else {
|
||||
wx.showToast({ title: '加载失败', icon: 'none' })
|
||||
}
|
||||
}).catch(function () {
|
||||
wx.hideLoading()
|
||||
wx.showToast({ title: '网络异常', icon: 'none' })
|
||||
})
|
||||
},
|
||||
|
||||
onDeleteItem(e) {
|
||||
const id = e.currentTarget.dataset.id
|
||||
const tab = this.data.tab
|
||||
const self = this
|
||||
const label = tab === 'history' ? '历史' : '收藏'
|
||||
|
||||
wx.showModal({
|
||||
title: '删除' + label,
|
||||
content: '确定删除这条' + label + '吗？',
|
||||
success(res) {
|
||||
if (!res.confirm) return
|
||||
const fn = tab === 'history'
|
||||
? api.deleteHistory(id)
|
||||
: api.removeFavorite(id)
|
||||
|
||||
fn.then(function (r) {
|
||||
if (r.code === 200) {
|
||||
// 本地即时移除
|
||||
var list = self.data.historyList.filter(function (item) { return item.id !== id })
|
||||
self.setData({ historyList: list })
|
||||
} else {
|
||||
wx.showToast({ title: r.msg || '删除失败', icon: 'none' })
|
||||
}
|
||||
}).catch(function () {
|
||||
wx.showToast({ title: '网络异常', icon: 'none' })
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onClear() {
|
||||
const self = this
|
||||
const tab = this.data.tab
|
||||
const label = tab === 'history' ? '收听历史' : '全部收藏'
|
||||
wx.showModal({
|
||||
title: '提示',
|
||||
content: '确定要清空所有收听历史吗？',
|
||||
title: '清空' + label,
|
||||
content: '确定要清空所有' + label + '吗？',
|
||||
success(res) {
|
||||
if (res.confirm) {
|
||||
self.setData({ cleared: true, historyList: [] })
|
||||
}
|
||||
if (!res.confirm) return
|
||||
const fn = tab === 'history'
|
||||
? api.deleteAllHistory()
|
||||
: api.removeAllFavorites()
|
||||
fn.then(function (r) {
|
||||
if (r.code === 200) {
|
||||
self.setData({ historyList: [] })
|
||||
} else {
|
||||
wx.showToast({ title: r.msg || '操作失败', icon: 'none' })
|
||||
}
|
||||
}).catch(function () {
|
||||
wx.showToast({ title: '网络异常', icon: 'none' })
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
goDiscover() { wx.switchTab({ url: '/pages/discover/index' }) },
|
||||
goHome() { wx.switchTab({ url: '/pages/index/index' }) },
|
||||
goVip() { wx.navigateTo({ url: '/pages/vip/index' }) }
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user