调整预览音频样式

components/videoPreview/index.js

@@ -1,228 +1,234 @@
 import {
-    storeBindingsBehavior
+  storeBindingsBehavior
 } from 'mobx-miniprogram-bindings'
 import {
-    store
+  store
 } from '~/store/index'
 import {
-    setVideoStatus,
-    likeVideo,
-    collectVideo,
+  setVideoStatus,
+  likeVideo,
+  collectVideo,
 } from '~/api/video'
 import {
-    setFans
+  setFans
 } from '~/api/user'
 
 Component({
-    behaviors: [storeBindingsBehavior],
-    storeBindings: {
-        store,
-        fields: {
-            pkData: 'pkData'
-        },
-        actions: {
-            setPkData: 'setPkData'
-        }
+  behaviors: [storeBindingsBehavior],
+  storeBindings: {
+    store,
+    fields: {
+      pkData: 'pkData'
     },
-    /**
-     * 组件的属性列表
-     */
-    properties: {
-        videoInfo: {
-            type: Object,
-            value: {},
-            observer(newVal) {
-                if (newVal.userReadExtend && newVal.userReadExtend.resourcesType == 1) {
-                    newVal.userRead.title = newVal.userRead.title.split('\n')
-                }
-                this.setData({
-                    videoInfoCopy: newVal
-                })
-            }
-        },
-        videoType: {
-            type: String,
-            // value 为public时是默认公共样式，为my时为“我的”样式，展示下载删除是否公开,pk为pk的样式文案,excellent是优秀作品展播
-            value: 'public'
-        },
-        currentId: {
-            type: Number,
+    actions: {
+      setPkData: 'setPkData'
+    }
+  },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    videoInfo: {
+      type: Object,
+      value: {},
+      observer(newVal) {
+        if (newVal.userReadExtend && newVal.userReadExtend.resourcesType == 1) {
+          newVal.userRead.title = newVal.userRead.title.split('\n')
         }
+        this.setData({
+          videoInfoCopy: newVal
+        })
+      }
     },
-    data: {
-        selfUid: wx.getStorageSync('uid'),
-        videoInfoCopy: {}
+    videoType: {
+      type: String,
+      // value 为public时是默认公共样式，为my时为“我的”样式，展示下载删除是否公开,pk为pk的样式文案,excellent是优秀作品展播
+      value: 'public'
     },
-    methods: {
-        // 播放视频
-        playVideo() {
-            this.triggerEvent('playVideo', this.properties.videoInfo.userRead.id)
-        },
-        // 设置视频公开还是隐私
-        async setVideoPublic() {
-            let info = this.properties.videoInfo.userRead
-            let data = {
-                id: info.id,
-                status: info.status === 'NORMAL' ? 'DISABLE' : 'NORMAL'
-            }
-            let res = await setVideoStatus(data)
-            if (res.status == 'DISABLE') {
+    currentId: {
+      type: Number,
+    }
+  },
+  data: {
+    selfUid: wx.getStorageSync('uid'),
+    videoInfoCopy: {}
+  },
+  methods: {
+    // 播放视频
+    playVideo() {
+      this.triggerEvent('playVideo', this.properties.videoInfo.userRead.id)
+    },
+    // 设置视频公开还是隐私
+    async setVideoPublic() {
+      let info = this.properties.videoInfo.userRead
+      let data = {
+        id: info.id,
+        status: info.status === 'NORMAL' ? 'DISABLE' : 'NORMAL'
+      }
+      let res = await setVideoStatus(data)
+      if (res.status == 'DISABLE') {
+        wx.showToast({
+          title: '该作品仅自己可见',
+          icon: 'none',
+          duration: 2000
+        })
+      }
+      this.setData({
+        ['videoInfoCopy.userRead.status']: info.status === 'NORMAL' ? 'DISABLE' : 'NORMAL'
+      })
+    },
+    // 点赞
+    async likeVideo() {
+      let {
+        id
+      } = this.properties.videoInfo.userRead
+      if (this.properties.videoInfo.isLike) {
+        return
+      }
+      await likeVideo(id)
+      this.setData({
+        ['videoInfoCopy.isLike']: true,
+        ['videoInfoCopy.userRead.likeAmount']: this.data.videoInfoCopy.userRead.likeAmount + 1
+      })
+    },
+    // 下载视频
+    download() {
+      wx.showLoading({
+        title: '保存到本地',
+        mask: true
+      })
+      const url = this.properties.videoInfo.userRead.markPath || ''
+      wx.downloadFile({
+        url,
+        success(res) {
+          if (res.statusCode === 200) {
+            wx.saveVideoToPhotosAlbum({
+              filePath: res.tempFilePath,
+              success(res) {
+                wx.hideLoading()
                 wx.showToast({
-                    title: '该作品仅自己可见',
-                    icon: 'none',
-                    duration: 2000
+                  title: '成功保存到相册!',
+                  duration: 3000,
+                  icon: 'success',
+                  mask: true
                 })
-            }
-            this.setData({
-                ['videoInfoCopy.userRead.status']: info.status === 'NORMAL' ? 'DISABLE' : 'NORMAL'
-            })
-        },
-        // 点赞
-        async likeVideo() {
-            let {
-                id
-            } = this.properties.videoInfo.userRead
-            if (this.properties.videoInfo.isLike) {
-                return
-            }
-            await likeVideo(id)
-            this.setData({
-                ['videoInfoCopy.isLike']: true,
-                ['videoInfoCopy.userRead.likeAmount']: this.data.videoInfoCopy.userRead.likeAmount + 1
-            })
-        },
-        // 下载视频
-        download() {
-            wx.showLoading({
-                title: '保存到本地',
-                mask: true
-            })
-            const url = this.properties.videoInfo.userRead.markPath || ''
-            wx.downloadFile({
-                url,
-                success(res) {
-                    if (res.statusCode === 200) {
-                        wx.saveVideoToPhotosAlbum({
-                            filePath: res.tempFilePath,
-                            success(res) {
-                                wx.hideLoading()
-                                wx.showToast({
-                                    title: '成功保存到相册!',
-                                    duration: 3000,
-                                    icon: 'success',
-                                    mask: true
-                                })
-                            },
-                            fail() {
-                                wx.hideLoading()
-                                wx.showToast({
-                                    title: '网络不给力',
-                                    icon: 'error',
-                                    duration: 3000,
-                                    mask: true
-                                })
-                            }
-                        })
-                    }
-                },
-                fail() {
-                    wx.hideLoading()
-                    wx.showToast({
-                        title: '网络不给力',
-                        icon: 'error',
-                        duration: 3000,
-                        mask: true
-                    })
-                }
-            })
-        },
-        //评论
-        openComment() {
-            this.triggerEvent('openComment')
-        },
-        // 删除
-        delete() {
-            let {
-                id
-            } = this.properties.videoInfo.userRead
-            wx.showModal({
-                title: '确认删除吗？',
-                content: '作品将被永久删除，无法找回。',
-                confirmText: '确认',
-                cancelText: '取消',
-                success: async (res) => {
-                    if (res.confirm) {
-                        let data = {
-                            id,
-                            status: 'DEL'
-                        }
-                        await setVideoStatus(data)
-                        wx.showToast({
-                            title: '删除成功！',
-                            icon: "none"
-                        })
-                        this.triggerEvent('getList')
-                    }
-                }
-            })
-        },
-        // 收藏课程
-        async collect() {
-            let {
-                id,
-                type,
-                uid
-            } = this.properties.videoInfo.userRead
-            if (wx.getStorageSync('uid') == uid) {
-                return wx.showToast({
-                    title: '不能收藏自己作品哦！',
-                    icon: "none"
+              },
+              fail() {
+                wx.hideLoading()
+                wx.showToast({
+                  title: '网络不给力',
+                  icon: 'error',
+                  duration: 3000,
+                  mask: true
                 })
-            }
-            await collectVideo({
-                targetCode: id,
-                favoritesType: type
-            })
-            this.setData({
-                ['videoInfoCopy.isFavorites']: !this.data.videoInfoCopy.isFavorites
+              }
             })
+          }
         },
-        // 关注
-        async setFans() {
-            if (this.properties.videoInfo.isFans) {
-                return
-            }
-            await setFans({
-                uid: this.properties.videoInfo.user.uid
-            })
-            this.triggerEvent('setListFans', this.properties.videoInfo.user.uid)
-        },
-        toPkPage() {
-            let videoInfo = this.data.videoInfoCopy
-            if (this.properties.videoType == 'pk') {
-                this.setPkData({
-                    nickName: videoInfo.user.nickName || videoInfo.user.eid,
-                    avatar: videoInfo.user.avatar,
-                    score: videoInfo.userRead.score,
-                    audioPath: videoInfo.userRead.audioPath,
-                    exampleId: videoInfo.userRead.exampleId,
-                    id: videoInfo.userRead.id
-                })
+        fail() {
+          wx.hideLoading()
+          wx.showToast({
+            title: '网络不给力',
+            icon: 'error',
+            duration: 3000,
+            mask: true
+          })
+        }
+      })
+    },
+    //评论
+    openComment() {
+      this.triggerEvent('openComment')
+    },
+    // 删除
+    delete() {
+      let {
+        id
+      } = this.properties.videoInfo.userRead
+      wx.showModal({
+        title: '确认删除吗？',
+        content: '作品将被永久删除，无法找回。',
+        confirmText: '确认',
+        cancelText: '取消',
+        success: async (res) => {
+          if (res.confirm) {
+            let data = {
+              id,
+              status: 'DEL'
             }
-            let readId = videoInfo.userRead.id
-            let url = this.properties.videoType == 'excellent' ? `/pages/pkPage/index?videoId=${readId}` : `/pages/reading/index?videoId=${videoInfo.userRead.exampleId}&readingType=${this.properties.videoType}`
-            wx.navigateTo({
-                url
-            })
-        },
-        jumpUserInfo() {
-            wx.navigateTo({
-                url: `/pages/personal/index?uid=${this.data.videoInfoCopy.user.uid}&type=user`,
+            await setVideoStatus(data)
+            wx.showToast({
+              title: '删除成功！',
+              icon: "none"
             })
-        },
-        // 控制音频播放
-        audioPlay() {
-            this.triggerEvent('playAudio')
+            this.triggerEvent('getList')
+          }
         }
+      })
+    },
+    // 收藏课程
+    async collect() {
+      let {
+        id,
+        type,
+        uid
+      } = this.properties.videoInfo.userRead
+      if (wx.getStorageSync('uid') == uid) {
+        return wx.showToast({
+          title: '不能收藏自己作品哦！',
+          icon: "none"
+        })
+      }
+      await collectVideo({
+        targetCode: id,
+        favoritesType: type
+      })
+      this.setData({
+        ['videoInfoCopy.isFavorites']: !this.data.videoInfoCopy.isFavorites
+      })
+    },
+    // 关注
+    async setFans() {
+      if (this.properties.videoInfo.isFans) {
+        return
+      }
+      await setFans({
+        uid: this.properties.videoInfo.user.uid
+      })
+      this.triggerEvent('setListFans', this.properties.videoInfo.user.uid)
+    },
+    toPkPage() {
+      let videoInfo = this.data.videoInfoCopy
+      if (this.properties.videoType == 'pk') {
+        if (videoInfo.user.uid == wx.getStorageSync('uid')) {
+          return wx.showToast({
+            title: '不能与自己PK哦~',
+            icon: 'none'
+          })
+        }
+        this.setPkData({
+          nickName: videoInfo.user.nickName || videoInfo.user.eid,
+          avatar: videoInfo.user.avatar,
+          score: videoInfo.userRead.score,
+          audioPath: videoInfo.userRead.audioPath,
+          exampleId: videoInfo.userRead.exampleId,
+          id: videoInfo.userRead.id
+        })
+      }
+      let readId = videoInfo.userRead.id
+      let url = this.properties.videoType == 'excellent' ? `/pages/pkPage/index?videoId=${readId}` : `/pages/reading/index?videoId=${videoInfo.userRead.exampleId}&readingType=${this.properties.videoType}`
+      wx.navigateTo({
+        url
+      })
+    },
+    jumpUserInfo() {
+      wx.navigateTo({
+        url: `/pages/personal/index?uid=${this.data.videoInfoCopy.user.uid}&type=user`,
+      })
+    },
+    // 控制音频播放
+    audioPlay() {
+      this.triggerEvent('playAudio')
     }
+  }
 })

pages/childClassify/index.less

@@ -88,6 +88,39 @@
           border-radius: 8rpx;
         }
 
+        .audioCover {
+          position: relative;
+          width: 144rpx;
+          height: 80rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 8rpx;
+          overflow: hidden;
+          background-size: cover;
+          background-position: center;
+
+          .audioPlayBg {
+            width: 70rpx;
+            height: 70rpx;
+          }
+
+          .audioPlayZhen {
+            position: absolute;
+            right: 32rpx;
+            top: 12rpx;
+            width: 16rpx;
+            height: 22rpx;
+          }
+
+          .cover {
+            position: absolute;
+            width: 60rpx;
+            height: 60rpx;
+            border-radius: 50%;
+          }
+        }
+
         .work {
           margin-left: 26rpx;
 

pages/childClassify/index.wxml

@@ -18,7 +18,12 @@
     show-scrollbar="{{false}}" scroll-top="{{scrollTop}}" bindscrolltolower='loadMore'>
     <view class="worksBox" wx:for="{{list}}" wx:key="id">
       <view class="left">
-        <image src="{{item.coverImg}}" class="cover" />
+        <image src="{{item.coverImg}}" class="cover" wx:if="{{item.resourcesType==0}}" />
+        <view class="audioCover" style="background-image: url({{item.backgroundVirtualImg}});" wx:else>
+          <image src="/static/audioBg.png" class="audioPlayBg" />
+          <image src="/static/zhen.png" class="audioPlayZhen" />
+          <image src="{{item.coverImg}}" class="cover" />
+        </view>
         <view class="work">
           <view class="title">{{item.title}}</view>
           <view class="statistics">

pages/childClassify/index.wxss

@@ -80,6 +80,35 @@
   height: 80rpx;
   border-radius: 8rpx;
 }
+.classBox .worksList .worksBox .left .audioCover {
+  position: relative;
+  width: 144rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8rpx;
+  overflow: hidden;
+  background-size: cover;
+  background-position: center;
+}
+.classBox .worksList .worksBox .left .audioCover .audioPlayBg {
+  width: 70rpx;
+  height: 70rpx;
+}
+.classBox .worksList .worksBox .left .audioCover .audioPlayZhen {
+  position: absolute;
+  right: 32rpx;
+  top: 12rpx;
+  width: 16rpx;
+  height: 22rpx;
+}
+.classBox .worksList .worksBox .left .audioCover .cover {
+  position: absolute;
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50%;
+}
 .classBox .worksList .worksBox .left .work {
   margin-left: 26rpx;
 }

pages/editUser/index.wxml

@@ -1,68 +1,68 @@
 <wxs src="../../utils/filter.wxs" module="filters" />
 <view class="editBox">
-    <button class="resetBtn editRow" open-type="chooseAvatar" bind:chooseavatar="changeAvatar">
-        <view class="name">头像</view>
-        <view class="right">
-            <image class='avatar' src='{{ userInfo.avatar}}'></image>
-            <image class='black' src='/static/black.png'></image>
-        </view>
-    </button>
-    <view class="editRow">
-        <view class="name">昵称</view>
-        <view class="right">
-            <input name='nickName' type="nickname" placeholder="请输入昵称" class='nickName' maxlength="9"
-                value='{{userInfo.nickName}}' bindblur='saveNickName'></input>
-            <image class='black' src='/static/black.png'></image>
-        </view>
+  <button class="resetBtn editRow" open-type="chooseAvatar" bind:chooseavatar="changeAvatar">
+    <view class="name">头像</view>
+    <view class="right">
+      <image class='avatar' src='{{ userInfo.avatar}}'></image>
+      <image class='black' src='/static/black.png'></image>
     </view>
-    <view class="editRow">
-        <view class="name">性别</view>
-        <view class="right" bindtap="selectGender">
-            <view class="name">
-                {{userInfo.gender===0?'女':'男'}}
-            </view>
-            <image class='black' src='/static/black.png'></image>
-        </view>
+  </button>
+  <view class="editRow">
+    <view class="name">昵称</view>
+    <view class="right">
+      <input name='nickName' type="nickname" placeholder="请输入昵称" class='nickName' maxlength="9"
+        value='{{userInfo.nickName}}' bindblur='saveNickName'></input>
+      <image class='black' src='/static/black.png'></image>
     </view>
-    <view class="editRow">
-        <view class="name">生日</view>
-        <view class="right">
-            <picker mode="date" value="{{filters.formatDate( userInfo.birthday, 2)  }}" bindchange="bindDateChange"
-                end="2022-01-01">
-                <view class="name">{{userInfo.birthday?filters.formatDate(userInfo.birthday,2):'请选择生日' }}</view>
-            </picker>
-            <image class='black' src='/static/black.png'></image>
-        </view>
+  </view>
+  <view class="editRow">
+    <view class="name">性别</view>
+    <view class="right" bindtap="selectGender">
+      <view class="name">
+        {{userInfo.gender===0?'女':'男'}}
+      </view>
+      <image class='black' src='/static/black.png'></image>
     </view>
-    <view class="editRow mt40">
-        <view class="name">身份</view>
-        <view class="right" bindtap="selectProfession">
-            <view class="name">
-                {{userInfo.profession}}
-            </view>
-            <image class='black' src='/static/black.png'></image>
-        </view>
+  </view>
+  <view class="editRow">
+    <view class="name">生日</view>
+    <view class="right">
+      <picker mode="date" value="{{filters.formatDate( userInfo.birthday, 2)  }}" bindchange="bindDateChange"
+        end="2022-01-01">
+        <view class="name">{{userInfo.birthday?filters.formatDate(userInfo.birthday,2):'请选择生日' }}</view>
+      </picker>
+      <image class='black' src='/static/black.png'></image>
     </view>
-    <view class="editRow">
-        <view class="name">年级</view>
-        <view class="right">
-            <picker value="{{gradeIndex}}" range="{{gradeArray}}" range-key="key" bindchange="bindGradeChange">
-                <view class="name">
-                    {{filters.gradeFilter(userInfo.grade)}}
-                </view>
-            </picker>
-            <image class='black' src='/static/black.png'></image>
-        </view>
+  </view>
+  <view class="editRow mt40">
+    <view class="name">身份</view>
+    <view class="right" bindtap="selectProfession">
+      <view class="name">
+        {{userInfo.profession}}
+      </view>
+      <image class='black' src='/static/black.png'></image>
     </view>
-    <view class="editRow">
-        <view class="name">学校</view>
-        <view class="right">
-            <input placeholder="请输入学校" class='nickName' maxlength="18" value='{{userInfo.schoolName}}'
-                bindblur='saveSchool'></input>
-            <image class='black' src='/static/black.png'></image>
+  </view>
+  <view class="editRow">
+    <view class="name">年级</view>
+    <view class="right">
+      <picker value="{{gradeIndex}}" range="{{gradeArray}}" range-key="key" bindchange="bindGradeChange">
+        <view class="name">
+          {{filters.gradeFilter(userInfo.grade)}}
         </view>
+      </picker>
+      <image class='black' src='/static/black.png'></image>
     </view>
-    <view class="editRow mt40">
+  </view>
+  <view class="editRow">
+    <view class="name">学校</view>
+    <view class="right">
+      <input placeholder="请输入学校" class='nickName' maxlength="18" value='{{userInfo.schoolName}}'
+        bindblur='saveSchool'></input>
+      <image class='black' src='/static/black.png'></image>
+    </view>
+  </view>
+  <!--   <view class="editRow mt40">
         <view class="name">绑定手机</view>
         <view class="right">
             <view class="name">
@@ -70,9 +70,8 @@
             </view>
             <image class='black' src='/static/black.png'></image>
         </view>
-    </view>
-    <view class="switchAccount mt40">
+    </view> -->
+  <!--    <view class="switchAccount mt40">
         切换账号
-    </view>
-
+    </view> -->
 </view>

pages/follow/index.js

@@ -46,7 +46,6 @@ Page({
   jumpUserInfo({
     currentTarget
   }) {
-    console.log(currentTarget.dataset);
     let uid = currentTarget.dataset.uid
     wx.navigateTo({
       url: `/pages/personal/index?uid=${uid}`,

pages/personal/index.less

@@ -153,6 +153,39 @@
           border-radius: 8rpx;
         }
 
+        .audioCover {
+          position: relative;
+          width: 144rpx;
+          height: 80rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 8rpx;
+          overflow: hidden;
+          background-size: cover;
+          background-position: center;
+
+          .audioPlayBg {
+            width: 70rpx;
+            height: 70rpx;
+          }
+
+          .audioPlayZhen {
+            position: absolute;
+            right: 32rpx;
+            top: 12rpx;
+            width: 16rpx;
+            height: 22rpx;
+          }
+
+          .cover {
+            position: absolute;
+            width: 60rpx;
+            height: 60rpx;
+            border-radius: 50%;
+          }
+        }
+
         .work {
           margin-left: 26rpx;
 

pages/personal/index.wxml

@@ -52,7 +52,13 @@
       bindscrolltolower='loadMore'>
       <view class="worksBox" wx:for="{{list}}" wx:key="index">
         <view class="left">
-          <image src="{{item.userRead.coverImg}}" class="cover" />
+          <image src="{{item.userRead.coverImg}}" class="cover" wx:if="{{item.userReadExtend.resourcesType==0}}" />
+          <view class="audioCover"
+            style="background-image: url({{item.userReadExtend.backgroundVirtualImg}});" wx:else>
+            <image src="/static/audioBg.png" class="audioPlayBg" />
+            <image src="/static/zhen.png" class="audioPlayZhen" />
+            <image src="{{item.userRead.coverImg}}" class="cover" />
+          </view>
           <view class="work">
             <view class="title textOver">{{item.userRead.title}}</view>
             <view class="statistics">

pages/personal/index.wxss

@@ -132,6 +132,35 @@
   height: 80rpx;
   border-radius: 8rpx;
 }
+.personalBox .worksList .worksBox .left .audioCover {
+  position: relative;
+  width: 144rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8rpx;
+  overflow: hidden;
+  background-size: cover;
+  background-position: center;
+}
+.personalBox .worksList .worksBox .left .audioCover .audioPlayBg {
+  width: 70rpx;
+  height: 70rpx;
+}
+.personalBox .worksList .worksBox .left .audioCover .audioPlayZhen {
+  position: absolute;
+  right: 32rpx;
+  top: 12rpx;
+  width: 16rpx;
+  height: 22rpx;
+}
+.personalBox .worksList .worksBox .left .audioCover .cover {
+  position: absolute;
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50%;
+}
 .personalBox .worksList .worksBox .left .work {
   margin-left: 26rpx;
 }

pages/works/index.js

@@ -63,7 +63,7 @@ Page({
       this.setData({
         isFixed: true
       })
-    } else if (e.scrollTop < 110 && this.data.isFixed) {
+    } else if (e.scrollTop < 20 && this.data.isFixed) {
       this.setData({
         isFixed: false
       })