glhcp/pc/pages/user/evaluation/evaluate.vue

<template>
    <div class="evaluate">
        <div class="goods">
            <div class="goods-hd lighter flex">
                <div class="info flex flex-1">商品信息</div>
                <div class="price flex row-center">单价</div>
                <div class="num flex row-center">数量</div>
                <div class="total flex row-center">合计</div>
            </div>
            <div class="goods-con">
                <div class="goods-item flex ">
                    <div class="info flex  flex-1">
                        <img class="goods-img" :src="goodsInfo.goods_item.image" alt="" />
                        <div class="goods-info flex flex-1">
                            <div class="goods-name line-2">
                                {{ goodsInfo.name }}
                            </div>
                            <div class="sm lighter m-t-8">{{goodsInfo.spec_value_str}}</div>
                        </div>
                    </div>
                    <div class="price flex row-center">
                        <price-formate :price="goodsInfo.goods_price" weight="400" />
                    </div>
                    <div class="num flex row-center">{{ goodsInfo.goods_num }}</div>
                    <div class="total flex row-center">
                        <price-formate :price="goodsInfo.total_price" weight="400" />
                    </div>
                </div>
            </div>
        </div>
        <div class="evaluate-con">
            <div class="goods-rate">
                <div class="flex item">
                    <div class="name">商品评价</div>
                    <el-rate v-model="goodsRate" show-text text-color="#FF9E2C" :texts="goodsTexts"></el-rate>
                </div>
                <div class="flex item">
                    <div class="name">描述相符</div>
                    <el-rate v-model="descRate"></el-rate>
                </div>
                <div class="flex item">
                    <div class="name">服务态度</div>
                    <el-rate v-model="serverRate"></el-rate>
                </div>
                <div class="flex item">
                    <div class="name">配送服务</div>
                    <el-rate v-model="deliveryRate"></el-rate>
                </div>
            </div>
            <div class="evaluate-input flex">
                <div class="name">商品评价</div>
                <div>
                    <el-input type="textarea" placeholder="收到商品您有什么想法或者反馈，用几个字来评价下商品吧～" v-model="comment"
                        maxlength="150" :rows="6" show-word-limit resize="none">
                    </el-input>
                    <div class="upload m-t-16">
                        <upload :limit="9" @success="onSuccess" />
                        <div class="muted m-t-8">
                            最多可上传9张图片，支持jpg、png格式，图片大小1M以内
                        </div>
                    </div>
                    <div class="submit-btn white bg-primary m-t-16 flex row-center" @click="onSubmit">
                        提交评价
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        head() {
            return {
                title: this.$store.getters.headTitle,
                link: [{
                    rel: "icon",
                    type: "image/x-icon",
                    href: this.$store.getters.favicon,
                }, ],
            };
        },
        async asyncData({
            $get,
            query
        }) {
            const id = query.id;
            let {
                data
            } = await $get("goods_comment/getCommentPage", {
                params: {
                    order_goods_id: id,
                },
            });
            return {
                goodsInfo: data,
                id,
            };
        },
        layout: "user",
        data() {
            return {
                goodsInfo: {},
                goodsRate: 0,
                descRate: 0,
                serverRate: 0,
                deliveryRate: 0,
                comment: "",
                fileList: [],
                goodsTexts: ["差评", "差评", "中评", "好评", "好评"],
            };
        },
        methods: {
            onSuccess(res) {
				console.log('res', res)
                this.fileList = res.map((item) => item.response.data);
				console.log('fileList', this.fileList)
            },
            onSubmit() {
                let {
                    goodsRate,
                    fileList,
                    comment,
                    deliveryRate,
                    descRate,
                    serverRate,
                } = this;
                let image = fileList.map((item) => item.uri);
                if (!goodsRate)
                    return this.$message({
                        message: "请对商品进行评分",
                        type: "error",
                    });
                if (!descRate)
                    return this.$message({
                        message: "请对描述相符进行评分",
                        type: "error",
                    });
                if (!serverRate)
                    return this.$message({
                        message: "请对服务态度进行评分",
                        type: "error",
                    });
                if (!deliveryRate)
                    return this.$message({
                        message: "请对配送服务进行评分",
                        type: "error",
                    });
                this.$post("goods_comment/addGoodsComment", {
                    id: parseInt(this.id),
                    goods_comment: goodsRate,
                    service_comment: serverRate,
                    express_comment: deliveryRate,
                    description_comment: descRate,
                    comment,
                    image,
                    order_goods_id: this.$route.query.id
                }).then((res) => {
                    if (res.code == 1) {
                        this.$message({
                            message: "评价成功",
                            type: "success",
                        });
                        setTimeout(() => {
                            this.$router.replace({
                                path: "/user/evaluation",
                                // query: {
                                //     type: 2,
                                // },
                            });
                        }, 1500);
                    }
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .evaluate {
        width: 1010px;
        padding: 0 10px;

        .goods {

            .goods-hd,
            .goods-con {
                padding: 10px 20px;
                border-bottom: 1px solid #e5e5e5;

                .goods-item {
                    padding: 10px 0;
                }
            }

            .info {
                .goods-img {
                    width: 72px;
                    height: 72px;
                    margin-right: 10px;
                }
            }

            .price,
            .num,
            .total {
                width: 150px;
            }
        }

        .evaluate-con {
            padding: 20px;

            .goods-rate {
                .item {
                    margin-bottom: 18px;
                }
            }

            .name {
                margin-right: 24px;
                flex: none;
            }

            .evaluate-input {
                align-items: flex-start;

                .el-textarea {
                    width: 630px;
                }

                .submit-btn {
                    width: 100px;
                    height: 32px;
                    cursor: pointer;
                }
            }
        }
    }
</style>