qimall/backend/modules/mall/views/optimize/reply.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-rich-text');
?>

<div id="app" v-cloak>
    <el-card class="box-card" shadow="never" style="border:0;min-width: 1250px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <span style="color: #409EFF;cursor: pointer" @click="$navigate({r:'mall/optimize/list'})">优化建议</span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>优化建议回复</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>沟通记录</span>
                <span style="float: right;">当前状态：{{ examine_arr[optimize.examine_status] }}</span>
            </div>
            <div class="connect-box">
                <ul>
                    <li class="connect-li" v-for="(item, index) in list">
                        <div class="connect-user">
                            <el-image :src="item.member_id == 0 ? '/resources/img/mall/mall_logo_default.jpg' : config.logo"></el-image>
                        </div>
                        <div class="connect-question">
                            <div class="connect-desc">
                                <p>{{ item.member_id == 0 ? '七件事工程师' : item.member_name }}</p>
                                <p>{{ item.created_at | dateTimeFormat('Y-m-d H:i:s') }}</p>
                            </div>
                            <div class="connect-content" ref="connect_content" v-html="item.optimize" @click="handleClick($event)"></div>
                        </div>
                    </li>
                </ul>
            </div>
            <el-button v-if="optimize.examine_status == 2" type="primary" size="small" style="margin-top: 10px;" @click="dialogVisible=true">回复</el-button>
        </el-card>
    </el-card>

    <!-- 图片大图预览隐藏 -->
    <el-image style="display: none;" src="/resources/img/mall/mall_logo_default.jpg" ref="preview" :initial-index="preview_index" :preview-src-list="preview_imgs"></el-image>

    <!-- 沟通回复弹框 -->
    <el-dialog title="沟通回复" :visible.sync="dialogVisible" width="60%" :close-on-click-modal="false">
        <el-form :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="160px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="内容描述" prop="optimize">
                        <com-rich-text style="width: 90%;" v-model="ruleForm.optimize"></com-rich-text>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" :loading="submitLoading" @click="submitForm">确 定</el-button>
        </span>
    </el-dialog>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                submitLoading: false,
                ruleForm: {
                    optimize_id: 0,
                    optimize: '',
                },
                list:[],
                optimize: {},
                config: {},
                preview_imgs: [],
                preview_index: 0,
                examine_arr: {
                    1: '等待中台回复',
                    2: '等待客户回复',
                    3: '已结束',
                },
                dialogVisible: false,
                rules: {
                    optimize: [
                        {required: true, message: '请输入内容', trigger: 'change'},
                    ],
                },
            };
        },
        mounted() {
            this.getDetail();
        },
        methods: {
            getDetail() {
                request({
                    params: {
                        r: 'mall/optimize/reply',
                        id: getQuery('id')
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        this.list = e.data.data.list
                        this.optimize = e.data.data.optimize
                        this.config = e.data.data.config
                        this.preview_imgs = e.data.data.preview_imgs
                        this.ruleForm.optimize_id = this.optimize.id
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error(e.data.msg);
                });
            },
            handleClick(event){// 大图预览处理
                if (event.srcElement.attributes.length >= 1) {
                    // 获取被选中的图片url
                    let click_img = event.srcElement.attributes[0].value
                    // 根据被点击选中的url获取其在数组中对应的下标
                    this.preview_index = this.preview_imgs.indexOf(click_img)
                    this.$refs.preview.clickHandler();
                }
            },
            //提交表单
            submitForm() {
                let self = this;
                if (isEmpty(self.ruleForm.optimize)) {
                    self.$message.error('回复内容不能为空！');
                    return;
                }
                self.submitLoading = true;
                request({
                    params: {
                        r: 'mall/optimize/resubmit'
                    },
                    method: 'post',
                    data: {
                        form: self.ruleForm,
                    }
                }).then(e => {
                    self.submitLoading = false;
                    if (e.data.code == 0) {
                        this.dialogVisible = false
                        navigateTo({
                            r: 'mall/optimize/reply',
                            id: self.ruleForm.optimize_id
                        })
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    self.$message.error(e.data.msg);
                    self.submitLoading = false;
                });
            },
        }
    });
</script>
<style>
    .connect-box {
        height: 500px;
        overflow-y: auto;
    }
    .connect-li:first-child {
        padding-top: 0px;
    }
    .connect-li {
        display: flex;
        padding: 25px 0;
        border-bottom: 1px dashed #d3d3d3;
    }
    .connect-user {
        padding: 0 10px;
        min-width: 100px;
        text-align: center;
    }
    .connect-user img {
        width: 50px;
        height: 50px;
    }
    .connect-desc {
        color: #a2a2a2;
        display: flex;
        justify-content: space-between;
    }
    .connect-content {
        padding: 10px 0;
    }
    .connect-content p {
        padding: 5px 0;
    }
    .connect-content img {
        max-width: 10%;
        cursor: pointer;
    }
    .connect-annex .el-image {
        height: 70px;
        margin-right: 10px;
    }
    .connect-question {
        width: 100%;
    }
    ::-webkit-scrollbar {
        width: 5px;
    }
</style>