开发作品组件

component/videoPreview/index.js

@@ -0,0 +1,149 @@
+import {
+    setVideoStatus,
+    likeVideo
+} from '~/api/video'
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        item: {
+            type: Object,
+            value: {}
+        },
+        index: {
+            type: Number,
+        },
+        currentId: {
+            type: Number,
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        // 设置视频公开还是隐私
+        async setVideoPublic() {
+            let info = this.properties.item.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
+                })
+            }
+            let index = this.properties.index
+            let status = `list[${index}].userRead.status`;
+            let val = info.status === 'NORMAL' ? 'DISABLE' : 'NORMAL'
+            let options = {
+                [status]: val
+            }
+            this.triggerEvent('changStatus', options)
+        },
+        // 点赞
+        async likeVideo() {
+            let {
+                id
+            } = this.properties.item.userRead
+            if (this.properties.item.isLike) {
+                return
+            }
+            await likeVideo(id)
+            let index = this.properties.index
+            let likeStr = `list[${index}].isLike`;
+            let likeNumStr = `list[${index}].userRead.likeAmount`;
+            let options = {
+                [likeStr]: true,
+                [likeNumStr]: this.properties.item.userRead.likeAmount + 1
+            }
+            this.triggerEvent('changStatus', options)
+        },
+        // 下载视频
+        download() {
+            wx.showLoading({
+                title: '保存到本地',
+                mask: true
+            })
+            const url = this.properties.item.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() {},
+        // 删除
+        delete() {
+            let {
+                id
+            } = this.properties.item.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')
+                    }
+                }
+            })
+        },
+
+    }
+})

component/videoPreview/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

component/videoPreview/index.less

@@ -0,0 +1,149 @@
+.work {
+    margin-bottom: 12rpx;
+    background-color: white;
+
+    .workHead {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20rpx;
+
+        .wH-left {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .avatar {
+                width: 80rpx;
+                height: 80rpx;
+                border-radius: 50%;
+                overflow: hidden;
+            }
+
+            .wH-left-user {
+                margin-left: 18rpx;
+
+                .nickname {
+                    max-width: 320rpx;
+                    font-size: 30rpx;
+                    font-weight: bold;
+                    color: #000;
+                }
+
+                .time {
+                    margin-top: 4rpx;
+                    font-size: 26rpx;
+                    color: rgba(0, 0, 0, 0.6);
+                }
+            }
+        }
+
+        .wH-right {
+            display: flex;
+            align-items: center;
+
+            .wH-right-btn {
+                text-align: center;
+                margin-right: 30rpx;
+
+                .img {
+                    width: 27rpx;
+                    height: 32rpx;
+                }
+
+                .text {
+                    font-size: 26rpx;
+                    color: rgba(0, 0, 0, 0.74);
+                }
+            }
+        }
+    }
+
+    .workContent {
+        font-size: 0px;
+
+        .videoBox {
+            position: relative;
+            width: 100%;
+            height: 422rpx;
+
+            .maskBg {
+                position: absolute;
+                top: 0px;
+                left: 0px;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(0, 0, 0, 0.5);
+            }
+
+            .maskImg {
+                z-index: 10;
+                width: 215rpx;
+                height: 215rpx;
+                position: absolute;
+                top: 0px;
+                right: 0px;
+                left: 0px;
+                bottom: 0px;
+                margin: auto;
+            }
+
+            .play {
+                position: absolute;
+                left: 50%;
+                top: 40%;
+                width: 90rpx;
+                height: 90rpx;
+                transform: translate(-50%);
+            }
+
+            .cover {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .video {
+            width: 100%;
+            height: 422rpx;
+        }
+
+    }
+
+    .workFooter {
+        .title {
+            padding: 14rpx 20rpx;
+            font-size: 32rpx;
+            font-weight: bold;
+        }
+
+        .mange {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 14rpx 20rpx 30rpx;
+
+            .mangeL {
+                display: flex;
+                align-items: center;
+
+                .mangeL-box {
+                    display: flex;
+                    align-items: center;
+                    margin-right: 30rpx;
+
+                    .icon {
+                        width: 44rpx;
+                        height: 44rpx;
+                    }
+
+                    .icon-name {
+                        font-weight: bold;
+                        margin-left: 10rpx;
+                        font-size: 28rpx;
+                    }
+                }
+            }
+        }
+    }
+}

component/videoPreview/index.wxml

@@ -0,0 +1,72 @@
+<wxs src="../../utils/filter.wxs" module="filters" />
+<view class="work">
+    <view class="workHead">
+        <view class="wH-left">
+            <image src="{{item.user.avatar}}" class="avatar" mode="" />
+            <view class="wH-left-user">
+                <view class="nickname textOver">{{item.user.wechatName}}</view>
+                <view class="time">发布时间：{{item.userRead.day}}</view>
+            </view>
+        </view>
+        <view class="wH-right" wx:if="{{item.userRead.status!='CHECK'}}">
+            <view class="wH-right-btn" bindtap="download">
+                <image class="img" src="/static/index/down.png" mode="" />
+                <view class="text">下载</view>
+            </view>
+            <view class="wH-right-btn" bindtap="delete">
+                <image class=" img" style="width:24rpx" src="/static/index/delete.png" mode="" />
+                <view class="text">删除</view>
+            </view>
+            <view class="wH-right-btn" bindtap="setVideoPublic">
+                <image class="img" style="width:30rpx"
+                    src="{{item.userRead.status==='NORMAL'? '/static/index/unlock.png': '/static/index/lock.png'}}" />
+                <view class="text">
+                    {{item.userRead.status==='NORMAL'? '公开': '私密'}}
+                </view>
+            </view>
+        </view>
+    </view>
+    <view class="workContent">
+        <!-- 审核中遮罩 -->
+        <view class="videoBox" wx:if="{{item.userRead.status=='CHECK'&&item.userRead.id!=currentId}}">
+            <view class="maskBg"></view>
+            <image class="maskImg" src="/static/index/checking.png" />
+            <image class="cover" src="{{item.userRead.coverImg}}" />
+        </view>
+        <!--未播放-->
+        <view class="videoBox" wx:if="{{item.userRead.status!='CHECK'&&item.userRead.id!=currentId}}">
+            <image class="play" src="/static/image/play-btn.png" />
+            <image class="cover" src="{{item.userRead.coverImg}}" />
+        </view>
+        <!-- 播放时渲染的video -->
+        <video class="video" id="myVideo" wx:if="{{item.userRead.id==currentId}}" src="{{item.userRead.videoPath}}"
+            autoplay="true" object-fit="contain">
+        </video>
+    </view>
+    <view class="workFooter">
+        <view class="title">{{item.userRead.title}}</view>
+        <view class="mange" wx:if="{{item.userRead.status!='CHECK'}}">
+            <view class="mangeL">
+                <view class="mangeL-box">
+                    <image src="/static/image/no_collect.png" mode="" class="icon" />
+                    <view class="icon-name">收藏</view>
+                </view>
+                <view class="mangeL-box">
+                    <image src="/static/index/share.png" mode="" class="icon" />
+                    <view class="icon-name">分享</view>
+                </view>
+            </view>
+            <view class="mangeL">
+                <view class="mangeL-box" bindtap="likeVideo">
+                    <image src="{{item.isLike ? '/static/index/heart_colored.png' : '/static/index/heart.png'}}" mode=""
+                        class="icon" />
+                    <view class="icon-name">{{filters.numFilter(item.userRead.likeAmount)}}</view>
+                </view>
+                <view class="mangeL-box" bindtap="openComment">
+                    <image src="/static/index/comment.png" mode="" class="icon" />
+                    <view class="icon-name">{{filters.numFilter(item.userRead.commentAmount)}}</view>
+                </view>
+            </view>
+        </view>
+    </view>
+</view>

component/videoPreview/index.wxss

@@ -0,0 +1,123 @@
+.work {
+  margin-bottom: 12rpx;
+  background-color: white;
+}
+.work .workHead {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20rpx;
+}
+.work .workHead .wH-left {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.work .workHead .wH-left .avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  overflow: hidden;
+}
+.work .workHead .wH-left .wH-left-user {
+  margin-left: 18rpx;
+}
+.work .workHead .wH-left .wH-left-user .nickname {
+  max-width: 320rpx;
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #000;
+}
+.work .workHead .wH-left .wH-left-user .time {
+  margin-top: 4rpx;
+  font-size: 26rpx;
+  color: rgba(0, 0, 0, 0.6);
+}
+.work .workHead .wH-right {
+  display: flex;
+  align-items: center;
+}
+.work .workHead .wH-right .wH-right-btn {
+  text-align: center;
+  margin-right: 30rpx;
+}
+.work .workHead .wH-right .wH-right-btn .img {
+  width: 27rpx;
+  height: 32rpx;
+}
+.work .workHead .wH-right .wH-right-btn .text {
+  font-size: 26rpx;
+  color: rgba(0, 0, 0, 0.74);
+}
+.work .workContent {
+  font-size: 0px;
+}
+.work .workContent .videoBox {
+  position: relative;
+  width: 100%;
+  height: 422rpx;
+}
+.work .workContent .videoBox .maskBg {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.work .workContent .videoBox .maskImg {
+  z-index: 10;
+  width: 215rpx;
+  height: 215rpx;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  left: 0px;
+  bottom: 0px;
+  margin: auto;
+}
+.work .workContent .videoBox .play {
+  position: absolute;
+  left: 50%;
+  top: 40%;
+  width: 90rpx;
+  height: 90rpx;
+  transform: translate(-50%);
+}
+.work .workContent .videoBox .cover {
+  width: 100%;
+  height: 100%;
+}
+.work .workContent .video {
+  width: 100%;
+  height: 422rpx;
+}
+.work .workFooter .title {
+  padding: 14rpx 20rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+.work .workFooter .mange {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14rpx 20rpx 30rpx;
+}
+.work .workFooter .mange .mangeL {
+  display: flex;
+  align-items: center;
+}
+.work .workFooter .mange .mangeL .mangeL-box {
+  display: flex;
+  align-items: center;
+  margin-right: 30rpx;
+}
+.work .workFooter .mange .mangeL .mangeL-box .icon {
+  width: 44rpx;
+  height: 44rpx;
+}
+.work .workFooter .mange .mangeL .mangeL-box .icon-name {
+  font-weight: bold;
+  margin-left: 10rpx;
+  font-size: 28rpx;
+}

pages/userWorks/index.js

@@ -1,10 +1,6 @@
 import {
     getSelfRead
 } from '~/api/user'
-import {
-    setVideoStatus,
-    likeVideo
-} from '~/api/video'
 let videoContext = null
 Page({
 
@@ -13,30 +9,12 @@ Page({
      */
     data: {
         list: [],
-        currentVideo: '',
+        currentId: '',
         videoState: true
     },
-
-    /**
-     * 生命周期函数--监听页面加载
-     */
     onLoad(options) {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面初次渲染完成
-     */
-    onReady() {
         this.getSelfRead()
     },
-
-    /**
-     * 生命周期函数--监听页面显示
-     */
-    onShow() {
-
-    },
     //获取自己作品列表
     async getSelfRead() {
         let list = await getSelfRead()
@@ -45,6 +23,13 @@ Page({
         })
         console.log(list[0]);
     },
+    // 改变视频状态
+    changStatus({
+        detail
+    }) {
+        console.log(detail);
+        this.setData(detail)
+    },
     // 开始播放
     playVideo({
         currentTarget
@@ -68,128 +53,7 @@ Page({
             videoState: !videoState
         })
     },
-    delete({
-        currentTarget
-    }) {
-        wx.showModal({
-            title: '确认删除吗？',
-            content: '作品将被永久删除，无法找回。',
-            confirmText: '确认',
-            cancelText: '取消',
-            success: async (res) => {
-                if (res.confirm) {
-                    let data = {
-                        id: currentTarget.dataset.id,
-                        status: 'DEL'
-                    }
-                    await setVideoStatus(data)
-                    wx.showToast({
-                        title: '删除成功！',
-                        icon: "none"
-                    })
-                    this.getSelfRead()
-                }
-            }
-        })
-    },
-    // 设置视频公开还是隐私
-    async setVideoPublic({
-        currentTarget
-    }) {
-        let info = currentTarget.dataset.info
-        let data = {
-            id: info.id,
-            status: info.status === 'NORMAL' ? 'DISABLE' : 'NORMAL'
-        }
-        let res = await setVideoStatus(data)
-        let index = this.data.list.findIndex(item => {
-            return item.userRead.id == info.id
-        })
-        let status = `list[${index}].userRead.status`;
-        this.setData({
-            [status]: info.status === 'NORMAL' ? 'DISABLE' : 'NORMAL'
-        })
-        if (res.status == 'DISABLE') {
-            wx.showToast({
-                title: '该作品仅自己可见',
-                icon: 'none',
-                duration: 2000
-            })
-        }
-    },
-    // 下载视频
-    download: function ({
-        currentTarget
-    }) {
-        wx.showLoading({
-            title: '保存到本地',
-            mask: true
-        })
-        const {
-            url
-        } = currentTarget.dataset;
-        wx.downloadFile({
-            url,
-            success(res) {
-                // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
-                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
-                })
-            }
-        })
-    },
-    // 点赞
-    async likeVideo({
-        currentTarget
-    }) {
-        let {
-            id,
-            like
-        } = currentTarget.dataset;
-        if (like) {
-            return
-        }
-        await likeVideo(id)
-        let index = this.data.list.findIndex(item => {
-            return item.userRead.id == id
-        })
-        let likeStr = `list[${index}].isLike`;
-        let likeNumStr = `list[${index}].userRead.likeAmount`;
-        this.setData({
-            [likeStr]: true,
-            [likeNumStr]: this.data.list[index].userRead.likeAmount + 1
-        })
-    },
-    /**
-     * 页面上拉触底事件的处理函数
-     */
-    onReachBottom() {
-
-    },
 
-    /**
-     * 用户点击右上角分享
-     */
     onShareAppMessage() {
 
     }

pages/userWorks/index.json

@@ -1,3 +1,5 @@
 {
-    "usingComponents": {}
+    "usingComponents": {
+        "videoPreview": "/component/videoPreview/index"
+    }
 }

pages/userWorks/index.less

@@ -1,151 +1,3 @@
 .worksBox {
-    .work {
-        margin-bottom: 12rpx;
-        background-color: white;
-
-        .workHead {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 20rpx;
-
-            .wH-left {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-
-                .avatar {
-                    width: 80rpx;
-                    height: 80rpx;
-                    border-radius: 50%;
-                    overflow: hidden;
-                }
-
-                .wH-left-user {
-                    margin-left: 18rpx;
-
-                    .nickname {
-                        max-width: 320rpx;
-                        font-size: 30rpx;
-                        font-weight: bold;
-                        color: #000;
-                    }
-
-                    .time {
-                        margin-top: 4rpx;
-                        font-size: 26rpx;
-                        color: rgba(0, 0, 0, 0.6);
-                    }
-                }
-            }
-
-            .wH-right {
-                display: flex;
-                align-items: center;
-
-                .wH-right-btn {
-                    text-align: center;
-                    margin-right: 30rpx;
-
-                    .img {
-                        width: 27rpx;
-                        height: 32rpx;
-                    }
-
-                    .text {
-                        font-size: 26rpx;
-                        color: rgba(0, 0, 0, 0.74);
-                    }
-                }
-            }
-        }
-
-        .workContent {
-            font-size: 0px;
-
-            .videoBox {
-                position: relative;
-                width: 100%;
-                height: 422rpx;
-
-                .maskBg {
-                    position: absolute;
-                    top: 0px;
-                    left: 0px;
-                    width: 100%;
-                    height: 100%;
-                    background-color: rgba(0, 0, 0, 0.5);
-                }
-
-                .maskImg {
-                    z-index: 10;
-                    width: 215rpx;
-                    height: 215rpx;
-                    position: absolute;
-                    top: 0px;
-                    right: 0px;
-                    left: 0px;
-                    bottom: 0px;
-                    margin: auto;
-                }
-
-                .play {
-                    position: absolute;
-                    left: 50%;
-                    top: 40%;
-                    width: 90rpx;
-                    height: 90rpx;
-                    transform: translate(-50%);
-                }
-
-                .cover {
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-
-            .video {
-                width: 100%;
-                height: 422rpx;
-            }
-
-        }
-
-        .workFooter {
-            .title {
-                padding: 14rpx 20rpx;
-                font-size: 32rpx;
-                font-weight: bold;
-            }
-
-            .mange {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding: 14rpx 20rpx 30rpx;
-
-                .mangeL {
-                    display: flex;
-                    align-items: center;
-
-                    .mangeL-box {
-                        display: flex;
-                        align-items: center;
-                        margin-right: 30rpx;
-
-                        .icon {
-                            width: 44rpx;
-                            height: 44rpx;
-                        }
-
-                        .icon-name {
-                            font-weight: bold;
-                            margin-left: 10rpx;
-                            font-size: 28rpx;
-                        }
-                    }
-                }
-            }
-        }
-    }
+    // padding-bottom: env(safe-area-inset-bottom);
 }

pages/userWorks/index.wxml

@@ -1,80 +1,8 @@
-<wxs src="../../utils/filter.wxs" module="filters" />
 <view class="worksBox">
     <!-- 作品列表 -->
-    <view class="works">
-        <view class="work" wx:for="{{list}}" wx:key="index">
-            <view class="workHead">
-                <view class="wH-left">
-                    <image src="{{item.user.avatar}}" class="avatar" mode="" />
-                    <view class="wH-left-user">
-                        <view class="nickname textOver">{{item.user.wechatName}}</view>
-                        <view class="time">发布时间：{{item.userRead.day}}</view>
-                    </view>
-                </view>
-                <view class="wH-right" wx:if="{{item.userRead.status!='CHECK'}}">
-                    <view class="wH-right-btn" bindtap="download"
-                        data-url="{{item.userRead.markPath ? item.userRead.markPath : '' }}">
-                        <image class="img" src="/static/index/down.png" mode="" />
-                        <view class="text">下载</view>
-                    </view>
-                    <view class="wH-right-btn" bindtap="delete" data-id="{{item.userRead.id}}">
-                        <image class=" img" style="width:24rpx" src="/static/index/delete.png" mode="" />
-                        <view class="text">删除</view>
-                    </view>
-                    <view class="wH-right-btn" bindtap="setVideoPublic" data-info="{{item.userRead}}">
-                        <image class="img" style="width:30rpx"
-                            src="{{item.userRead.status==='NORMAL'? '/static/index/unlock.png': '/static/index/lock.png'}}" />
-                        <view class="text">
-                            {{item.userRead.status==='NORMAL'? '公开': '私密'}}
-                        </view>
-                    </view>
-                </view>
-            </view>
-            <view class="workContent">
-                <!-- 审核中遮罩 -->
-                <view class="videoBox" wx:if="{{item.userRead.status=='CHECK'&&item.userRead.id!=currentId}}">
-                    <view class="maskBg"></view>
-                    <image class="maskImg" src="/static/index/checking.png" />
-                    <image class="cover" src="{{item.userRead.coverImg}}" />
-                </view>
-                <!--未播放-->
-                <view class="videoBox" wx:if="{{item.userRead.status!='CHECK'&&item.userRead.id!=currentId}}"
-                    catchtap="playVideo" data-id="{{item.userRead.id}}">
-                    <image class="play" src="/static/image/play-btn.png" />
-                    <image class="cover" src="{{item.userRead.coverImg}}" />
-                </view>
-                <!-- 播放时渲染的video -->
-                <video class="video" id="myVideo" wx:if="{{item.userRead.id==currentId}}"
-                    src="{{item.userRead.videoPath}}" autoplay="true" object-fit="contain">
-                </video>
-            </view>
-            <view class="workFooter">
-                <view class="title">{{item.userRead.title}}</view>
-                <view class="mange" wx:if="{{item.userRead.status!='CHECK'}}">
-                    <view class="mangeL">
-                        <view class="mangeL-box">
-                            <image src="/static/image/no_collect.png" mode="" class="icon" />
-                            <view class="icon-name">收藏</view>
-                        </view>
-                        <view class="mangeL-box">
-                            <image src="/static/index/share.png" mode="" class="icon" />
-                            <view class="icon-name">分享</view>
-                        </view>
-                    </view>
-                    <view class="mangeL">
-                        <view class="mangeL-box" bindtap="likeVideo" data-like="{{item.isLike}}"
-                            data-id="{{item.userRead.id}}">
-                            <image src="{{item.isLike ? '/static/index/heart_colored.png' : '/static/index/heart.png'}}"
-                                mode="" class="icon" />
-                            <view class="icon-name">{{filters.numFilter(item.userRead.likeAmount)}}</view>
-                        </view>
-                        <view class="mangeL-box">
-                            <image src="/static/index/comment.png" mode="" class="icon" />
-                            <view class="icon-name">{{filters.numFilter(item.userRead.commentAmount)}}</view>
-                        </view>
-                    </view>
-                </view>
-            </view>
-        </view>
-    </view>
+    <block wx:for="{{list}}" wx:key="index">
+        <videoPreview item="{{item}}" index='{{index}}' currentId="{{currentId}}" data-id="{{item.userRead.id}}"
+            catchtap="playVideo" bind:changStatus="changStatus" bind:getList="getSelfRead">
+        </videoPreview>
+    </block>
 </view>

pages/userWorks/index.wxss

@@ -1,123 +0,0 @@
-.worksBox .work {
-  margin-bottom: 12rpx;
-  background-color: white;
-}
-.worksBox .work .workHead {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20rpx;
-}
-.worksBox .work .workHead .wH-left {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.worksBox .work .workHead .wH-left .avatar {
-  width: 80rpx;
-  height: 80rpx;
-  border-radius: 50%;
-  overflow: hidden;
-}
-.worksBox .work .workHead .wH-left .wH-left-user {
-  margin-left: 18rpx;
-}
-.worksBox .work .workHead .wH-left .wH-left-user .nickname {
-  max-width: 320rpx;
-  font-size: 30rpx;
-  font-weight: bold;
-  color: #000;
-}
-.worksBox .work .workHead .wH-left .wH-left-user .time {
-  margin-top: 4rpx;
-  font-size: 26rpx;
-  color: rgba(0, 0, 0, 0.6);
-}
-.worksBox .work .workHead .wH-right {
-  display: flex;
-  align-items: center;
-}
-.worksBox .work .workHead .wH-right .wH-right-btn {
-  text-align: center;
-  margin-right: 30rpx;
-}
-.worksBox .work .workHead .wH-right .wH-right-btn .img {
-  width: 27rpx;
-  height: 32rpx;
-}
-.worksBox .work .workHead .wH-right .wH-right-btn .text {
-  font-size: 26rpx;
-  color: rgba(0, 0, 0, 0.74);
-}
-.worksBox .work .workContent {
-  font-size: 0px;
-}
-.worksBox .work .workContent .videoBox {
-  position: relative;
-  width: 100%;
-  height: 422rpx;
-}
-.worksBox .work .workContent .videoBox .maskBg {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-}
-.worksBox .work .workContent .videoBox .maskImg {
-  z-index: 10;
-  width: 215rpx;
-  height: 215rpx;
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  left: 0px;
-  bottom: 0px;
-  margin: auto;
-}
-.worksBox .work .workContent .videoBox .play {
-  position: absolute;
-  left: 50%;
-  top: 40%;
-  width: 90rpx;
-  height: 90rpx;
-  transform: translate(-50%);
-}
-.worksBox .work .workContent .videoBox .cover {
-  width: 100%;
-  height: 100%;
-}
-.worksBox .work .workContent .video {
-  width: 100%;
-  height: 422rpx;
-}
-.worksBox .work .workFooter .title {
-  padding: 14rpx 20rpx;
-  font-size: 32rpx;
-  font-weight: bold;
-}
-.worksBox .work .workFooter .mange {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 14rpx 20rpx 30rpx;
-}
-.worksBox .work .workFooter .mange .mangeL {
-  display: flex;
-  align-items: center;
-}
-.worksBox .work .workFooter .mange .mangeL .mangeL-box {
-  display: flex;
-  align-items: center;
-  margin-right: 30rpx;
-}
-.worksBox .work .workFooter .mange .mangeL .mangeL-box .icon {
-  width: 44rpx;
-  height: 44rpx;
-}
-.worksBox .work .workFooter .mange .mangeL .mangeL-box .icon-name {
-  font-weight: bold;
-  margin-left: 10rpx;
-  font-size: 28rpx;
-}