Commit 1c81e0e8 authored by wflmax's avatar wflmax

order

parent 9a4745de
This diff is collapsed.
var Detail={
template: `<el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='order-detail animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<el-tabs v-model="dialog.tab" type="card" @tab-click="handleClick">
<el-tab-pane label="详情" name="1" >
<h2>派单信息</h2>
<div class='order-detail-tab'>
<p>
用 户: <span>张女士 13711387865</span>
</p>
<p>地 址:<span>广东深圳福田深南大道招商银行大厦1101</span></p>
<p>产 品:<span>格力 空调 KFR-35GW/NhEaB1W (安装1台)</span></p>
<p>授权点:<span>唯修汇(张师傅 13644442222)</span></p>
<p>描述:<span>请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽</span></p>
</div>
<h2>工单履历</h2>
<div>
<div class="order-detail-steps" style="">
<el-steps direction="vertical" :active="1">
<el-step title="客服:结算确权 " description='03-13 18:30:02'></el-step>
<el-step title="张师傅:完工" description=' 03-13 18:30:02'></el-step>
<el-step title="张师傅:改预约时间(03-13 10:00),备注:用户明天回 " description='03-13 18:30:02'></el-step>
<el-step title="张师傅:改预约时间(03-12 11:00),备注:用户出差不在家,已经协调修改预约时间" description='03-13 18:30:02'></el-step>
<el-step title="客服:结算确权" description='03-13 18:30:02'></el-step>
<el-step title="系统:派单给唯修汇 " description='03-13 18:30:02'></el-step>
</el-steps>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="反馈" name="2">
<div class="order-request-box">
<div class="order-detail-response">
<div v-for='(item,index) in resdata.talks' :key='index'>
<el-row v-if='item.type==1' class="right-response">
<el-col :span="22">
<div class="right-response-text" >{{item.value}}</div>
</el-col>
<el-col :span="2">
<img src="../../../assets/images/man.jpg" alt="" width="42px" height="42px">
</el-col>
</el-row>
<el-row v-if='item.type==0' class="left-response">
<el-col :span="2">
<img src="../../../assets/images/women.jpg" alt="" width="42px" height="42px">
</el-col>
<el-col :span="22">
<div class="left-response-text" >{{item.value}}</div>
</el-col>
</el-row>
<div v-if='item.type==2' class="timestep">2019-5-16-09</div>
</div>
</div>
<div class="order-detail-request">
<div class="plus" style=''>
<el-upload title="点击选取或更换图片" :action="uploadApi" name="img" :show-file-list="false" :on-success="handleAvatarSuccess1" :before-upload="beforeAvatarUpload1" :on-error='uploaderror'>
<i class='el-icon-plus' ></i>
</el-upload>
</div>
<el-input class='order-input-area' v-model='resdata.inputValue'></el-input>
<el-button style="margin-left:10px">发送</el-button>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="确权" name="3">
<h2>结算信息</h2>
<div class='order-detail-tab' style="line-height:2.5">
<p>
基 本: <span>安装--新机安装*1¥200.00</span>
</p>
<p>
其 他:
<el-input class="seach-input" placeholder='其他项目'></el-input>
</p>
<p>
金 额:
<el-input class="seach-input" placeholder='其他项目'></el-input>
</p>
</div>
<div class='order-detail-tab' style="line-height:2.5">
<p>
备 注:
<el-input class="seach-area" placeholder='打回必填'></el-input>
<el-button size='mini'>确权</el-button>
<el-button size='mini'>返回</el-button>
</p>
</div>
<h2>完工信息</h2>
<div class='order-detail-tab' style="line-height:2.5;border:none">
<el-row>
<el-col :span="12">
<p>授 权 点: <span> 唯修汇 (张三 15599991111)</span></p>
</el-col>
<el-col :span="12">
<p>内 机 码: <span>421362871684921</span> </p>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<p>完 工: <span>03-28 10:09:12</span> </p>
</el-col>
<el-col :span="12">
<p>外 机 码: <span>421362871684921</span></p>
</el-col>
</el-row>
<p>
产品信息: <span>格力 空调 KFR-35GW/NhEaB1W</span>
</p>
<p>
完工图片: <span>(6张)</span>
</p>
<div class="order-carousel">
<el-carousel :interval="4000" type="card" height="100px" :autoplay='false' arrow="always">
<el-carousel-item v-for="item in 6" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
<p>
完工备注注:
<span>请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽快安装请尽</span>
</p>
</div>
</el-tab-pane>
<el-tab-pane label="范围" name="4">
<h2>服务区域</h2>
<div class='order-detail-tab' style="padding:20px;line-height:3">
<span class='tag' v-for='(item,index) in 9' :key='index'>
<i class='el-icon-location'></i>广东-深圳
</span>
</div>
<h2>服务品类</h2>
<div class='order-detail-tab' style="padding:20px;line-height:3;border:none">
<span class='tag' v-for='(item,index) in 2' :key='index'>
空调
</span>
</div>
</el-tab-pane>
<el-tab-pane label="授权码" name="5">
<h2>授权信息</h2>
<div class='order-detail-tab' style="border:none">
<p>授权ID:<span>31E8792IWE73</span></p>
<p>授权密钥:<span>31E8792IWE7331E8792IWE7331E8792IWE73</span></p>
<p>接单方式一:<span>API对接</span></p>
<p>接单方式二:<span>小程序</span></p>
</div>
<div class="wechat"></div>
<div class="wechatTip">扫一扫,登录小程序</div>
</el-tab-pane>
</el-tabs>
</el-dialog> `,
props: {
//父组件调用时传进来的参数
modalData: Object
},
data(){
return{
detail:{ },uploadApi:'',
resdata:{
inputValue:"",
talks:[
{
type:'1',value:'不制冷 用户报修麻烦处理',
},
{
type:'0',value:'用户不同意维修,想换机',
},
{
type:'2',value:'2019-5-16-09',
},
{
type:'1',value:'新机已发:申通快递,5313865831164,请把机器寄回总部请把机器寄回总部请把机器寄回总部请把机器寄回总部请把机器寄回总',
}
]
},
message:{ },
dialog:{
show:true,
title:'工单(GLDQ0019211237)--'+this.modalData.statusText,
tab:'1',
},
}
},
methods:{
handleClose() {
this.$emit('close')
},
handleClick(){
},
/*********上传图片 start************/
handleAvatarSuccess1(res, file) {
},
beforeAvatarUpload1(file) {
const isJPG = (file.type == 'image/jpeg' || file.type == 'image/png');
var limit = 200;
const isLimit = file.size / 1024 <= limit;
if (!isLimit) {
this.$message({ duration:3000,message:'上传图片大小不能超过'+limit+'k!', type: 'error' });
}
if (!isJPG) {
this.$message.error('支持jpg/png格式!');
}
return isLimit && isJPG;
},
uploaderror(err, file, fileList){
var res = JSON.parse(err.message)
this.$message({ duration:3000,message:res.message, type: 'error' });
},
/*********上传图片 end************/
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment