|
|
@@ -0,0 +1,169 @@
|
|
|
+<n-spin :show="spinShow" class="order-service-spin">
|
|
|
+<div class="hc-order-service h-full flex">
|
|
|
+ <div class="flex-auto h-full order-service-content" id="order-service-content">
|
|
|
+ <div class="content-box">
|
|
|
+ <div class="comment-card-box" v-for="(item,index) in orderDataList" :key="item.id">
|
|
|
+ <div class="card-content-box">
|
|
|
+ <div class="user-info-box">
|
|
|
+ <n-avatar round :size="50" :src="item.avatar || avatarPng"/>
|
|
|
+ <div class="name-box">
|
|
|
+ <div class="text-lg">{{item['createUserName']||'用户名异常'}}</div>
|
|
|
+ <div class="text-gray">{{item['createTime']}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="code-status-box" v-if="parseInt(item['isSolve']) === 1">
|
|
|
+ <div class="widget bg-green-thin">已解决</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="desc_para" v-html="item['opinionContent']"></div>
|
|
|
+ <div class="image_desc" v-if="item['returnFiles']?.length > 0">
|
|
|
+ <n-grid x-gap="12" :cols="3">
|
|
|
+ <n-gi v-for="(items,indexs) in item['returnFiles']">
|
|
|
+ <HcImage class="el-image-box" ui="el-image-box a" :src="items" :srcs="item['returnFiles']" :index="indexs"/>
|
|
|
+ </n-gi>
|
|
|
+ </n-grid>
|
|
|
+ </div>
|
|
|
+ <div class="foot-tools-box">
|
|
|
+ <div class="left-box">
|
|
|
+ <div class="input-box" :class="item['expandedName']?'hidden':''">
|
|
|
+ <div class="input-icon-box">
|
|
|
+ <i class="hcicon-bianjimian"/>
|
|
|
+ </div>
|
|
|
+ <div class="text-input-box">
|
|
|
+ <n-input type="text" v-model:value="item['replyContent']" size="small" placeholder="我也说一句" @keyup="commentKeyUp($event,item)"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-box">
|
|
|
+ <div class="icon-box" @click="commentExpanded(item)">
|
|
|
+ <i class="HIcon-pinglunliebiao"/>
|
|
|
+ <div class="badge" v-if="item['commentsNumber'] >= 1">{{item['commentsNumber']}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="icon-box" :data-index="item['expandedName']" @click="likeClick(item)">
|
|
|
+ <i class="HIcon-dianji-dianzan" v-if="item['currentUserGood']"/>
|
|
|
+ <i class="HIcon-weidianji-dianzan" v-else/>
|
|
|
+ <div class="badge" v-if="item['goodNumber'] >= 1">{{item['goodNumber']}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <n-collapse :expanded-names="item['expandedName']" accordion>
|
|
|
+ <n-collapse-item title="评论列表" :name="'commentList-'+item['id']">
|
|
|
+ <div class="collapse-comment-box">
|
|
|
+ <n-input type="textarea" v-model:value="item['replyContent']" placeholder="我也说一句"/>
|
|
|
+ <div class="comment-btn-box">
|
|
|
+ <div class="flex-auto"></div>
|
|
|
+ <n-button type="primary" class="w-20" @click="saveCommentClick(item)">评论</n-button>
|
|
|
+ </div>
|
|
|
+ <div class="user-comment-info-box" v-for="items in item['expandedCommentList']" :key="items.id">
|
|
|
+ <n-avatar size="large" :src="items.avatar || avatarPng" color="white"/>
|
|
|
+ <div class="user-comment-box">
|
|
|
+ <div class="user-info-box">
|
|
|
+ <span class="text-base mr-3">{{items['userName']||'用户名异常'}}</span>
|
|
|
+ <span class="text-gray text-sm">{{items['createTime']}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="user-comment-content-box" v-html="items['replyContent']"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </n-collapse-item>
|
|
|
+ </n-collapse>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page-top-btn" @click="scrollToTop">
|
|
|
+ <i class="hcicon-fanhuidingbu"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--我的工单服务-->
|
|
|
+ <div class="h-full order-service-data" :style="'width:' + leftWidth + 'px;'">
|
|
|
+ <div class="flex items-center mb-5">
|
|
|
+ <span class="text-lg font-bold mr-4">我的工单服务进度</span>
|
|
|
+ <n-button type="primary" size="small" @click="showModal = true">发起新工单服务</n-button>
|
|
|
+ </div>
|
|
|
+ <div class="mb-5">
|
|
|
+ <n-select v-model:value="nameSelectKey" :options="nameSelectData" placeholder="工单名称" @update:value="nameSelectUpdate"/>
|
|
|
+ </div>
|
|
|
+ <div class="time-line-box" :class="isCurrentBol?'time-height':''">
|
|
|
+ <n-timeline :icon-size="20">
|
|
|
+ <template v-for="(item,index) in orderFlowList">
|
|
|
+ <n-timeline-item :type="item['currentBol']?'success':item['current']?'info':''" :title="item['replyName']">
|
|
|
+ <template #icon>
|
|
|
+ <i class="_icon-check" v-if="index === 0 || index === 3"/>
|
|
|
+ <span v-else>{{index}}</span>
|
|
|
+ </template>
|
|
|
+ <div class="text-xs" v-html="item['replyContent']"></div>
|
|
|
+ </n-timeline-item>
|
|
|
+ </template>
|
|
|
+ </n-timeline>
|
|
|
+ </div>
|
|
|
+ <div class="evaluation-box" :class="isCurrentBol?'show':''">
|
|
|
+ <div class="text-lg font-bold">评价</div>
|
|
|
+ <div class="tip-box">请对工单处理评价，若是未解决问题，可进行投诉，平台核实情况，将对相关客服人员绩效考核，并且从新为您自动发起工单解决问题</div>
|
|
|
+ <div class="radio-group-box">
|
|
|
+ <n-radio-group v-model:value="evaluationKey" name="radiogroup">
|
|
|
+ <div class="radio-item" v-for="item in evaluationData" :key="item.value">
|
|
|
+ <n-radio :value="item.value">{{ item.label }}</n-radio>
|
|
|
+ </div>
|
|
|
+ </n-radio-group>
|
|
|
+ </div>
|
|
|
+ <div class="btn-box">
|
|
|
+ <n-button type="success" class="w-20" @click="disposeUserFeedback">提交</n-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--左右拖动-->
|
|
|
+ <div class="horizontal-drag-line" @mousedown="onmousedown"/>
|
|
|
+ </div>
|
|
|
+ <!--提交工单-->
|
|
|
+ <n-modal v-model:show="showModal">
|
|
|
+ <n-card class="w-606">
|
|
|
+ <div class="title">请选择您需要反馈的问题类型</div>
|
|
|
+ <div class="hc-type-tabs my-5">
|
|
|
+ <n-tabs type="segment" :default-value="typeTabKey" @update:value="typeTabChange">
|
|
|
+ <n-tab v-for="item in typeTab" :name="item.key" :key="item.id">{{item.name}}</n-tab>
|
|
|
+ </n-tabs>
|
|
|
+ </div>
|
|
|
+ <div class="modal-checkbox-box">
|
|
|
+ <n-checkbox-group v-model:value="typeCheckBox[typeTabIndex]">
|
|
|
+ <div class="checkbox-item" v-for="item in typeTab[typeTabIndex]?.children" :key="item.id">
|
|
|
+ <n-checkbox :value="item['dictValue']" :label="item['dictValue']" />
|
|
|
+ </div>
|
|
|
+ </n-checkbox-group>
|
|
|
+ </div>
|
|
|
+ <div class="mt-5">
|
|
|
+ <n-input type="textarea" v-model:value="opinionContent" placeholder="请输入你宝贵的建议，我们将会跟踪解决"/>
|
|
|
+ </div>
|
|
|
+ <div class="mt-3 upload-img">
|
|
|
+ <n-upload :action="uploadAction" :headers="getTokenHeader()" list-type="image-card" :file-list="uploadFileList" :with-credentials="true" :max="3" :accept="uploadAccept"
|
|
|
+ multiple @before-upload="beforeUpload" @finish="uploadFinish" @remove="removeUpload" @update:file-list="fileListUpdate" @preview="handlePreview"/>
|
|
|
+ <div class="text-red mt-3">请上传JPG、PNG格式的图片文件，文件大小不超过30M</div>
|
|
|
+ <n-modal v-model:show="previewImageModal" preset="card" class="w-606">
|
|
|
+ <img :src="previewImageUrl" style="width: 100%" alt="">
|
|
|
+ </n-modal>
|
|
|
+ </div>
|
|
|
+ <div class="foot-btn-box">
|
|
|
+ <n-button type="primary" strong secondary class="w-20 mr-4" @click="showModal = false">取消</n-button>
|
|
|
+ <n-button type="primary" class="w-20" @click="saveClick">提交</n-button>
|
|
|
+ </div>
|
|
|
+ </n-card>
|
|
|
+ </n-modal>
|
|
|
+ <!--提示框-->
|
|
|
+ <n-modal v-model:show="showTipModal" :mask-closable="false">
|
|
|
+ <n-card class="w-606">
|
|
|
+ <div class="tip-modal-icon-box">
|
|
|
+ <i class="HIcon-xiaolian"/>
|
|
|
+ </div>
|
|
|
+ <div class="tip-modal-text-box">感谢您的仗义直言，大恩不言谢，有事联系我们，我们随时都在</div>
|
|
|
+ <div class="tip-modal-btn-box">
|
|
|
+ <div class="btn-box">
|
|
|
+ <n-button strong secondary type="primary" @click="tipModalClick">下次不用感谢了</n-button>
|
|
|
+ </div>
|
|
|
+ <div class="btn-box">
|
|
|
+ <n-button type="primary" @click="showTipModal = false">不客气</n-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </n-card>
|
|
|
+ </n-modal>
|
|
|
+</div>
|
|
|
+<template #description>
|
|
|
+ 正在请求中...
|
|
|
+</template>
|
|
|
+</n-spin>
|
