vue实现订单多商品评价

vue 专栏收录该内容
33 篇文章 0 订阅

vue实现订单多商品评价

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

效果图

在这里插入图片描述

思考: vuev-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 = '上传完成';
    })
},

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

把返回commentFileUrlpush当前下标数组中。

在这里插入图片描述

删除图片

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

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)
    })
}
  • 1
    点赞
  • 2
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值