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="picUrl + info.bigImg[0]" mode="aspectFill"></image>
                </div>
                <div class="Msg_Tit_right">
                    {{info.merchant_name}}
                </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 ? 'https://static.hshuishang.com/property-img-file/local_start1.png' : 'https://static.hshuishang.com/property-img-file/local_start2.png'"
                            mode="aspectFill"></image>
                    </div>
                </div>
            </div>


            <div class="Msg_ipt noneBor">
                <div class="row">点评</div>
                <div class="startList">
                    <textarea name="" v-model="comment" 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="https://static.hshuishang.com/property-img-file/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="https://static.hshuishang.com/property-img-file/local_play.png" mode="widthFix"></image>
                        </div>
                        <div class="mask_cancel" @click="cancels">取消</div>
                    </div>
                </div>

            </div>
        </div>

        <div class="btn1" @click="handleSubmit">确认评价</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: 0,
            videoList: [],
            videoList2: [],
            imgList: [],
            imgList2: [],
            uploadStyle: {
                full: {
                    width: '100%',
                    height: '100%'
                },
                small: {
                    width: '120rpx',
                    height: '120rpx'
                }
            },
            rating: 0,
            info:'',
            comment:""
        }
    },
    onLoad(options) {
        const meun = menuButtonInfo();
        this.top = meun.top;
        // this.top = meun.height + meun.top;
        this.localHeight = meun.height;
        this.info = uni.getStorageSync("merchantInfo");
        if (!this.info.bigImg) {
            this.info.bigImg = this.info.album_images ? this.info.album_images.split(',') : [];
        }
    },


    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(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;
        },

        handleSubmit(){
            let that= this
            // 提取videoList2数组中每个对象的url属性
            const videoUrls = that.videoList2.map(item => item.url).join(",");
            request(apiArr.createComment,"POST",{
                merchant_id:that.info.id,
                satisfaction:that.rating,
                comment:that.comment,
                image_url:that.imgList2.join(","),
                video_url:videoUrls,
            }).then(res=>{
                that.comment=""
                that.rating = 0
                that.imgList=[]
                that.imgList2=[]
                that.videoList=[]
                that.videoList2=[]
                NavgateTo("1")
            })
        },
    },


}
</script>

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