vue实现订单多商品评价

vue实现订单多商品评价

最近在开发简易版商城，其中有发表评价功能，涉及到一个订单多商品评价。项目使用vue结合vant组件开发。

效果图

思考: vue中v-model是双向数据绑定原理，如何动态绑定v-model值？

• 这里采用了比较笨方式，在获取订单详情接口中添加需要使用字段来操作。欢迎各位留言指教更好的方法~

前提

• 安装及引入需要的vant组件

说明：

• 默认好评
• 默认匿名
• 评价内容、上传图片为选填

template

<template>
    <div class='evaluateWrap page'>
        <div class="eva-container">
            <div class="eva-item" v-for="(item, index) in details.orderItemList" :key="item.id">
                <!-- 省略商品信息 -->

                <div class="isSatisfy bd">
                    <div class="txt1">您对本次购买满意吗？</div>
                    <div class="isPraise">
                        <van-checkbox v-model="item.e_favorable" @change="isPraiseTap(index)">
                            <div :class="item.e_favorable ? 'checkColor' : ''">好评</div>
                            <template #icon="props">
                                <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                            </template>
                        </van-checkbox>
                    </div>
                </div>

                <div class="eva-content">
                    <div class="editIcon">
                        <img src="../../assets/images/icon/input.png" alt="">
                    </div>
                    <div class="message">
                        <van-field
                            v-model.trim="item.e_content"
                            rows="4"
                            autosize
                            type="textarea"
                            placeholder="点击写出您的真实感受，帮助更多人了解～"
                            maxlength="200"
                            show-word-limit
                            @input="changeContentTap(index)"
                        />
                    </div>
                </div>
                
                 <div class="uploadImgBox">
                    <van-uploader 
                        v-model="item.e_fileList"
                        :max-count="3"
                        :after-read="afterRead"
                        accept="image/*"
                        @delete="deletePicTap"
                        :name="index"
                    >
                        <div class="uploadImgBtn">
                            <img src="../../assets/images/icon/camera.png" alt="">
                            <p>上传图片</p>
                        </div>

                    </van-uploader>
                </div>

                <div class="isAnonymity">
                    <van-checkbox v-model="item.e_anonymity" icon-size="18px" checked-color="#4ad943" @change="isAnonymityTap(index)">
                        匿名评价
                    </van-checkbox>
                </div>
            </div>
        </div>

        <div class="commButton btnFixed" @click="commitEvaluateTap">发布</div>
    </div>
</template>

初始化

<script>
    import { Uploader } from 'vant'

    export default {
        name: "evaluate",
        data() {
            return {
                isFavorable: 1, //是否好评
                isAnonymity: 1, //是否匿名
                uploadPicFile: '', //上传图片file
                file: {}, //文件读取完成后的回调函数
                checkedAnonymity: true, //是否选中匿名
                checkedPraise: true, //是否选中好评
                activeIcon: require('../../assets/images/icon/praise_check.png'),
                inactiveIcon: require('../../assets/images/icon/praise_normal.png'),
                orderSn: '',
                details: {}, //详情数据
                products: [], //提交接口数据
                currentIndex: '', //当前index
            };
        },
        components: {
            [Uploader.name]: Uploader
        },
        created() {
            this.orderSn = this.$route.query.sn;
            // 获取订单详情
            this.getOrderDetail();
        },
    };
</script>

获取订单详情

getOrderDetail() {
    let that = this;
    let params = {
        orderSn: that.orderSn
    }
    this.axios.orderDetails(params).then((res) => {
        this.$toast.clear();
        if(res.code != 200) {
            this.$toast(res.msg);
            return;
        }
        let datas = res.data;
		
        //遍历添加需要属性
        for(var i = 0; i < datas.orderItemList.length; i++) {
            datas.orderItemList[i]["e_content"] = ''; //评价内容
            datas.orderItemList[i]["e_anonymity"] = true; //是否匿名【默认匿名】
            datas.orderItemList[i]["e_favorable"] = true; //是否好评【默认好评】
            datas.orderItemList[i]["e_fileList"] = []; //上传图片
            datas.orderItemList[i]["e_imgList"] = []; //存放已上传图片
			
            // 发布评价【提交接口数据格式 及 初始值】
            let obj = {
                goodsId: datas.orderItemList[i].goodsId,
                goodsSkuId: datas.orderItemList[i].goodsSkuId,
                commentsHide: that.isAnonymity,
                isFavorable: that.isFavorable,
                commentsContent: datas.orderItemList[i].e_content,
                commentsFile: ''
            }
            this.products.push(obj);
        }

        this.details = datas;
    })
},

上传图片

after-read

文件读取完成后的回调函数，最多只能上传三张

afterRead(file, detail) {
    this.currentIndex = detail.name;

    // 此时可以自行将文件上传至服务器
    file.status = 'uploading';
    file.message = '上传中...';
    this.file = file;
    this.uploadPicFile = file.file;
    
	// 上传
    this.uploadImg();
},

上传图片到服务器

上传成功后，返回图片路径，发布评价时把保存路径进行提交

uploadImg() {
    let that = this;
    let params = new FormData(); // 创建form对象
    params.append("commentFile", this.uploadPicFile);
    this.axios.uploadCommentFile(params).then((res) => {
        if(res.code != 200) {
            this.file.status = 'failed';
            this.file.message = '上传失败';
            that.$toast(res.msg);
            return;
        }
        let datas = res.data.commentFileUrl;

        // 保存上传图片
        this.details.orderItemList[that.currentIndex].e_imgList.push(datas);

        // 遍历上传图片用逗号分隔
        let tmpList = this.details.orderItemList;
        for(var i = 0; i < tmpList.length; i++) {
            for(var j = 0; j < tmpList[i].e_imgList.length; j++) {
                this.products[that.currentIndex]['commentsFile'] = tmpList[i].e_imgList.join(',');
            }
        }

        this.file.status = 'done';
        this.file.message = '上传完成';
    })
},

上传图片成功，返回数据效果图

把返回commentFileUrl值push到当前下标数组中。

删除图片

获取当前下标，根据下标删除图片

deletePicTap(e, detail) { //删除图片
    let index = detail.index;
    this.currentIndex = detail.name;

    this.details.orderItemList[detail.name].e_imgList.splice(index, 1);
},

是否好评

1: 好评，0: 差评

isPraiseTap(index) {
    let val = this.details.orderItemList[index].e_favorable;
    this.isFavorable = val ? 1 : 0;
	
    // 赋值
    this.products[index]['isFavorable'] = this.isFavorable;
},

是否匿名

1: 匿名，0: 当前用户名

isAnonymityTap(index) {
    let val = this.details.orderItemList[index].e_anonymity;
    this.isAnonymity = val ? 1 : 0;

    this.products[index]['commentsHide'] = this.isAnonymity;
},

评价内容

changeContentTap(index) {
    this.products[index]['commentsContent'] = this.details.orderItemList[index].e_content;
},

发布评价

commitEvaluateTap() {
    let that = this;
    this.loadings();

    // 处理图片格式
    let tmpList = this.details.orderItemList;
    for(var i = 0; i < tmpList.length; i++) {
        if (tmpList[i].goodsId == this.products[i].goodsId) {
            this.products[i]['commentsFile'] = tmpList[i].e_imgList.join(',');
        }
    }

    let params = {
        orderSn: that.orderSn,
        item: that.products
    }

    this.axios.postComments(params).then((res) => {
        this.$toast.clear();
        if(res.code != 200) {
            this.$toast(res.msg);
            return;
        }
        this.$toast.success({
            message: '评价成功',
            duration: 2000,
            forbidClick: true,
        });

        setTimeout(() => {
            this.$router.go(-1);
        }, 2000)
    })
}