2024/04/28（团队开发）

今天是团队开发的第九天，今天的例会上我向我的团队成员们说明了我的上传视频的整个业务的流程已经能基本完成了，商量明天可以将我们的代码组合起来，最后再来一遍总体的测试。所以今天我的任务就是完成昨天没有昨晚的部分——美化界面。

我预计要设计的页面的总体的臆想结果是这样的：

视频信息

封面 +（点击加号可以打开摄像头或者本地选择，选择完成后图片上有个叉号，点击可以删掉这个选好的图片）

视频 + 

上传

然后我设计的完全的整个代码：

<template>
    <view style="height: 730px;" >
        <view>
            <textarea placeholder="添加作品描述" v-model="information.description">
                
            </textarea>
        </view>


        
        
        <view class="flex-wrap">
            <view class="ver-mid">
                <text>
                    请选择视频的封面
                </text>
            </view>
            <view class="selected_img" v-if="imagesrc">
                <view class="uploader_img">
                    <image class="vid" :src="imagesrc" controls="false"></image>
                    <view class="icon_delete_img" @tap="delectImage">×</view>
                </view>    
            </view>
            <view class="select_viedo_border">
                    <image class="select_pic"  @tap="selectCover"  src="../../static/image/sel.png"></image>
            </view>
        </view>
        
        <view class="flex-wrap">
            <view class="ver-mid">
                <text >
                    请选择要上传的视频
                </text>
            </view>
            <view class="selected_viedo" v-if="videosrc">
                <view class="uploader_video">
                    <video class="vid" :src="videosrc" controls="false"></video>
                    <view class="icon_delete_video" @tap="delectVideo">×</view>
                </view>    
            </view>
            <view class="select_viedo_border">
                    <image class="select_pic"  @tap="selectVideo"  src="../../static/image/sel.png"></image>
            </view>
        </view>
        
        
        
        
        <button @click="uploadmes" size="default">上传</button> 
    </view>
</template>
<script>
    export default {
        data() {
            return {
                imagesrc: '',//本地图片的地址
                videosrc:'',//本地视频的地址
                information:{
                    userid:'1',//用户的id
                    description:'',//视频的描述信息
                    cover_url:'',//视频封面url
                    video_url: '',//视频的url
                }
            }
        },
        methods: {
            selectCover:function(){
                var self=this;
                uni.chooseImage({
                    count:1,
                    sizeType: ['original', 'compressed'],
                    success:function(res){
                        self.imagesrc=res.tempFilePaths[0];
                        uni.uploadFile({
                            url: 'http://192.168.179.138:8080/upload', //上传地址
                            name: 'file',
                            filePath:self.imagesrc,
                            success:function(uploadRes){
                                console.log(uploadRes);
                                self.information.cover_url=uploadRes.data;
                                uni.showToast({
                                    title: '上传成功'
                                });
                            },
                            fail:function(error){
                                console.log(error);
                                uni.showToast({
                                    title: '上传失败'
                                });
                            },
                        });
                    }
                });
            },
            selectVideo: function() {
                var self = this;
                uni.chooseVideo({
                    sourceType: ['album'],
                    success: function(res) {
                    self.videosrc = res.tempFilePath;
                    uni.uploadFile({
                            url: 'http://192.168.179.138:8080/upload', //上传地址
                            name: 'file',
                            filePath: self.videosrc,
                            success: function(uploadRes) {
                                console.log(uploadRes);
                                self.information.video_url=uploadRes.data;
                                uni.showToast({
                                    title: '上传成功'
                                });
                            },
                            fail: function(error) {
                                // 上传失败处理逻辑
                                console.log(error);
                                uni.showToast({
                                    title: '上传失败'
                                });
                            },
                    });    
                    },
                });
            },
            delectVideo: function() {
                uni.showModal({
                    title:"提示",
                    content:"是否要删除此视频",
                    success:(res) =>{
                        if(res.confirm){
                            this.videosrc = '';
                            this.information.video_url=''
                        }
                    }
                })
            },
            delectImage: function() {
                uni.showModal({
                    title:"提示",
                    content:"是否要删除此封面图片",
                    success:(res) =>{
                        if(res.confirm){
                            this.imagesrc = '';
                            this.information.cover_url=''
                        }
                    }
                })
            },
            uploadmes:function()
            {
                console.log(this.information);
                if(this.information.video_url==='')
                {
                    uni.showToast({
                        title:"视频不能为空",
                        icon:'error',
                    });
                    return;
                }
                if(this.information.cover_url==='')
                {
                    uni.showToast({
                        title:"封面不能为空",
                        icon:'error',
                    });
                    return;
                }
                if(this.information.description==='')
                {
                    uni.showToast({
                        title:"视频描述不能为空",
                        icon:'error',
                    });
                    return;
                }
                uni.request({
                    method:"POST",
                    url:'http://192.168.179.138:8080/mesupload',
                    data:this.information,
                    success: (res) => {
                        console.log(res.data);
                        uni.showToast({
                            title:"视频上传成功",
                        });
                        uni.switchTab({
                            url:"/pages/index/index"
                        })
                    },
                    fail() {
                        uni.showToast({
                            title:"视频上传失败",
                            icon:'error',
                        });
                    }
                })
            }
        },
    }
</script>

<style lang="scss">
    .flex-wrap{
        margin: 5px;
          display: flex;
          flex-wrap: wrap;
    }
    .selected_viedo 
    {
        width: 100px;
        height: 100px;
        position: relative;
    }
    .uploader_video{
        margin-left: 5px;
        width: 100px;
        height: 100px;
    }
    .icon_delete_video{
        position:absolute;
        top: 1px;
        right: 1px;
        background-color: #999;
        color: #fff;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        font-size: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .selected_img 
    {
        width: 100px;
        height: 100px;
        position: relative;
    }
    .uploader_img{
        margin-left: 5px;
        width: 100px;
        height: 100px;
    }
    .icon_delete_img{
        position:absolute;
        top: 5px;
        right: 5px;
        background-color: #999;
        color: #fff;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        font-size: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .vid {
        margin-left: 6px;
        margin-top: 6px;
        width: 88px;
        height: 88px;
        border-radius: 10%;
    }
    .select_viedo_border{
        margin-left: 5px;
        height: 100px;
        width: 100px;
        border:2px solid #888888;
        border-radius: 10px;
    }
        
    .select_pic{
        height: 80px;
        width: 80px;
        opacity: 0.6;
        display: block;
        margin: 0 auto;
        margin-top: 10px;
    }
    .ver-mid{
        height: 100px;
        width: 100px;
        font-size: 20px;
        text-align: center;
        line-height: 30px;
        margin-top: 20px;
    }
    textarea{
        width: 360px;
        height: 170px;
        border-radius: 10px;
        border: 1px solid #888888;
    }
    textarea:-ms-input-placeholder{
        color: #aaaaaa;
    }
    button{
        height: 50px;
        width: 180px;
        border-radius: 10px;
        text-align:center;
        border: 1px solid #777;
    }
</style>

整体效果：

点击右上角可以进行删除