uniapp-ZHSQ/packages/localLife/comment/index.vue

<template>
    <div class="container">
        <div class="Msg">
            <div class="Msg_Tit">
                <div class="Msg_Tit_left">
                    <image src="http://192.168.0.172:5500/test.png" mode="aspectFill"></image>
                </div>
                <div class="Msg_Tit_right">
                    七个2锁城
                </div>
            </div>

            <div class="Msg_ipt">
                <div class="row">满意度</div>
                <div class="startList">
                    <div class="start" v-for="(item, index) in 5" :key="index" @click="setRating(index + 1)">
                        <image :src="index < rating ? 'http://192.168.0.172:5500/local_start1.png' : 'http://192.168.0.172:5500/local_start2.png'" mode="aspectFill"></image>
                    </div>
                </div>
            </div>


            <div class="Msg_ipt noneBor">
                <div class="row">点评</div>
                <div class="startList">
                    <textarea name="" auto-height placeholder="您对服务满意吗" id="textareas"></textarea>
                </div>
            </div>
        </div>

        <div class="Msg2">
            <div class="Msg2_Tit">
                <div class="Msg2_Tit_left" :class="active == 0 ? 'active' : ''" @click="changeAct(0)">照片</div>
                <div class="Msg2_Tit_line"></div>
                <div class="Msg2_Tit_right" :class="active == 1 ? 'active' : ''" @click="changeAct(1)">视频</div>
            </div>

            <div class="Msg2_Con">


                <u-upload v-if="active === 0" :maxCount="8" :fileList="imgList" @afterRead="afterReadVideo"
                    @delete="deletePic" name="1" multiple
                    :custom-style="imgList.length > 0 ? uploadStyle.small : uploadStyle.full" :previewFullImage="true">
                    <div v-if="imgList.length === 0" class="upload-placeholder">
                        <u-icon name="camera" size="60" color="#999"></u-icon>
                        上传图片
                    </div>

                    <div v-if="imgList.length != 0" class="uploadIcon">
                        <u-icon name="plus" bold size="60" color="#999"></u-icon>
                    </div>
                </u-upload>


                <u-upload v-if="active === 1 && videoList.length === 0" :fileList="videoList"
                    @afterRead="afterReadVideo2" @delete="deletePic2" name="1" :maxCount="1" accept="video">
                    <div class="videoCon">
                        <image src="http://192.168.0.172:5500/com_videoImg.png" mode="widthFix"></image>
                        上传视频
                    </div>
                </u-upload>

                <div v-if="active === 1 && videoList.length != 0" class="videoBOX">
                    <video id="myVideo" :src="picUrl + videoList2[0].url" playsinline webkit-playsinline></video>
                    <div class="mask" @click="playFullScreenVideo">
                        <div class="mask_con">
                            <image src="http://192.168.0.172:5500/local_play.png" mode="widthFix"></image>
                        </div>
                        <div class="mask_cancel" @click="cancels">取消</div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import {
    request,
    picUrl,
    uniqueByField,
    menuButtonInfo,
    upload,
    uploadVideo,
    NavgateTo
} from '../../../utils';

import {
    apiArr
} from '../../../api/v2local';


export default {
    data() {
        return {
            picUrl,
            top: "",
            localHeight: "",
            active: 1,
            videoList: [],
            videoList2: [],
            imgList: [],
            imgList2: [],
            uploadStyle: {
                full: {
                    width: '100%',
                    height: '100%'
                },
                small: {
                    width: '120rpx',
                    height: '120rpx'
                }
            },
            rating: 0
        }
    },
    onLoad(options) {
        const meun = menuButtonInfo();
        this.top = meun.top;
        // this.top = meun.height + meun.top;
        this.localHeight = meun.height;
    },


    methods: {
        playFullScreenVideo() {
            this.videoContext = this.videoContext || wx.createVideoContext('myVideo')
            this.videoContext.requestFullScreen() // 请求全屏
        },
        changeAct(e) {
            this.active = e;
        },

        afterReadVideo(e) {
            console.log(e);
            // upload(e.file)
            e.file.forEach(item => {
                upload(item.url, res => {
                    console.log(res.data.path);
                    this.imgList.push({ url: this.picUrl + res.data.path })
                    this.imgList2.push({ url: res.data.path })
                })
            })
        },
        deletePic(e) {
            this.imgList.splice(e.index, 1);
            this.imgList2.splice(e.index, 1);
        },

        afterReadVideo2(e) {
            console.log(e);
            uploadVideo(e.file.url, res => {
                console.log(res.data.url);
                this.videoList.push({ url: this.picUrl + res.data.url })
                this.videoList2.push({ url: res.data.url })
            })
        },
        cancels(e) {
            this.videoList = [];
            this.videoList2 = [];
        },
        setRating(rating) {
            this.rating = rating;
        }
    },


}
</script>

<style>
@import url("./index.css");
</style>