feat: 优化UI

pages/player/index.js

@@ -13,6 +13,7 @@ Page({
         activeContent: null,
         isPlaying: false,
         isVip: false,
+        isLiked: false,
         currentTime: 0,
         duration: 0,
         currentTimeText: '00:00',
@@ -20,16 +21,13 @@ Page({
         displayDate: '',
         playbackRate: 1.0,
         statusBarHeight: 0,
-        showTranscript: false,       // 封面 ⇔ 文案切换
-        showSpeedSheet: false,
-        speedItems: [
-            { label: '0.5x' },
-            { label: '0.75x' },
-            { label: '1.0x' },
-            { label: '1.25x' },
-            { label: '1.5x' },
-            { label: '2.0x' }
-        ]
+        showTranscript: false,
+        // 评论弹层
+        showComments: false,
+        commentList: [],
+        commentText: '',
+        commentLoading: false,
+        submitting: false
     },
 
     _isSeeking: false,
@@ -65,6 +63,9 @@ Page({
 
         app.on('playerStateChange', this._onPlayerChange)
         app.on('timeUpdate', this._onTimeUpdate)
+
+        // 查询当前节目点赞状态
+        this._loadLikeStatus()
     },
 
     onHide() {
@@ -108,7 +109,7 @@ Page({
     },
 
     /**
-     * 获取频道信息 — 从后端 API 获取
+     * 获取频道信息
      */
     _updateDomain() {
         const content = this.data.activeContent
@@ -116,14 +117,12 @@ Page({
 
         var channelId = content.channelId || (content.channel && content.channel.id)
         if (!channelId) {
-            // 如果节目数据中直接包含 channel 信息
             if (content.channel) {
                 this.setData({ domain: content.channel })
             }
             return
         }
 
-        // 如果已经加载过且 channelId 没变，跳过
         if (this.data.domain && this.data.domain.id === channelId) return
 
         var self = this
@@ -136,6 +135,20 @@ Page({
         })
     },
 
+    /**
+     * 查询当前节目点赞状态
+     */
+    _loadLikeStatus() {
+        const content = this.data.activeContent
+        if (!content) return
+        var self = this
+        api.getProgramDetail(content.id).then(function (res) {
+            if (res.code === 200 && res.data) {
+                self.setData({ isLiked: !!res.data.isLiked })
+            }
+        }).catch(function () { })
+    },
+
     /**
      * 播放/暂停
      */
@@ -251,13 +264,100 @@ Page({
     onLike() {
         const content = this.data.activeContent
         if (!content) return
-        api.toggleLike({ contentId: content.id }).then(function (res) {
-            wx.showToast({ title: res.code === 200 ? '已收藏 ♥' : '操作失败', icon: 'none' })
+        const self = this
+        const wasLiked = this.data.isLiked
+        // 乐观更新
+        this.setData({ isLiked: !wasLiked })
+        api.toggleLike(content.id).then(function (res) {
+            if (res.code !== 200) {
+                // 回滚
+                self.setData({ isLiked: wasLiked })
+                wx.showToast({ title: res.msg || '操作失败', icon: 'none' })
+            } else {
+                wx.showToast({ title: wasLiked ? '已取消喜欢' : '已喜欢 ♥', icon: 'none' })
+            }
         }).catch(function () {
+            self.setData({ isLiked: wasLiked })
             wx.showToast({ title: '网络异常', icon: 'none' })
         })
     },
 
+    // ===== 评论弹层 =====
+
+    onOpenComments() {
+        this.setData({ showComments: true })
+        this._loadComments()
+    },
+
+    onCloseComments() {
+        this.setData({ showComments: false, commentText: '' })
+    },
+
+    _loadComments() {
+        const content = this.data.activeContent
+        if (!content) return
+        const self = this
+        this.setData({ commentLoading: true })
+        api.getCommentList(content.id, { current: 1, pageSize: 30 }).then(function (res) {
+            if (res.code === 200 && res.data) {
+                var list = (res.data.list || res.data || []).map(function (c) {
+                    return Object.assign({}, c, {
+                        _isOwn: c.userId === (getApp().globalData.userInfo && getApp().globalData.userInfo.id)
+                    })
+                })
+                self.setData({ commentList: list, commentLoading: false })
+            } else {
+                self.setData({ commentLoading: false })
+            }
+        }).catch(function () {
+            self.setData({ commentLoading: false })
+        })
+    },
+
+    onCommentInput(e) {
+        this.setData({ commentText: e.detail.value })
+    },
+
+    onSubmitComment() {
+        const text = (this.data.commentText || '').trim()
+        if (!text) return
+        const content = this.data.activeContent
+        if (!content) return
+        const self = this
+        this.setData({ submitting: true })
+        api.addComment(content.id, text).then(function (res) {
+            self.setData({ submitting: false, commentText: '' })
+            if (res.code === 200) {
+                wx.showToast({ title: '发布成功', icon: 'none' })
+                self._loadComments()
+            } else {
+                wx.showToast({ title: res.msg || '发布失败', icon: 'none' })
+            }
+        }).catch(function () {
+            self.setData({ submitting: false })
+            wx.showToast({ title: '网络异常', icon: 'none' })
+        })
+    },
+
+    onDeleteComment(e) {
+        const id = e.currentTarget.dataset.id
+        const self = this
+        wx.showModal({
+            title: '提示',
+            content: '确认删除该评论吗？',
+            success(res) {
+                if (!res.confirm) return
+                api.deleteComment(id).then(function (r) {
+                    if (r.code === 200) {
+                        self._loadComments()
+                    } else {
+                        wx.showToast({ title: '删除失败', icon: 'none' })
+                    }
+                })
+            }
+        })
+    },
+
     onShare() {
         wx.showToast({ title: '分享功能开发中', icon: 'none' })
     },