Commit 66cd3207 authored by 余苗苗's avatar 余苗苗

重构

parent 1c81e0e8
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="./static/css/main.css">
<link rel="stylesheet" href="./static/css/order.css">
<link rel="stylesheet" href="./static/css/animate.css">
</head>
<body>
<div id="app">
<common-header :modal-data="active_header"></common-header>
<div class="content">
<div class="order">
<div class='add-order-left'>
<div class="add-order-title">工单中心</div>
<el-menu :default-active="activeIndex" :unique-opened="false" @select="handleSelect" background-color="#ffffff" text-color="#666" class='add-order-menu'>
<el-menu-item :index="item.value" :key='index' v-for='(item,index) in menus' >
<i :class="item.icon"></i>
{{item.name}}
</el-menu-item>
</el-menu>
</div>
<div class="add-order-right">
<component :modal-Data="modalData" :is="modal" ></component>
</div>
</div>
</div>
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./static/js/common.js"></script>
<script src="./static/js/order.js"></script>
<script src="./static/js/order/addOne.js"></script>
<script src="./static/js/order/addAll.js"></script>
<script>
new Vue({
el: '#app',
components: {commonHeader,addOne,addAll},
data: function() {
return {
activeIndex:'1',tabindex:'1',active_header:'./order.html',
menus:[
{name:'逐条新建',value:'1',icon:'el-icon-upload2'},
{name:'智能新建',value:'2',icon:'el-icon-sort'},
{name:'批量导出',value:'3',icon:'el-icon-date'},
{name:'天猫导出',value:'4',icon:'el-icon-warning'},
{name:'京东导出',value:'5',icon:'el-icon-upload'},
],
modal:addOne,modalData:{},
}
},
methods:{
handleSelect:function(){
},
handleCurrentChange:function(){
},
checkDetail(item){
this.modalData = item;
this.modal = Detail;
},
closeChild(){
this.modal = null
},
handleSelect(key, keyPath) {
this.tabindex = key;
switch(Number(key)){
case 1:
this.modal = addOne
break;
case 2:
this.modal = addAll
break;
case 3:
this.modal = null
break;
case 4:
this.modal = null
break;
case 5:
this.modal = null
break;
default:
break;
}
},
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="./static/css/main.css">
<link rel="stylesheet" href="./static/css/cooperate.css">
</head>
<body>
<div id="app" v-loading='loading' >
<common-header :modal-data="active_header" ></common-header>
<div class="content" >
<div class="cooperate">
<div class='cooperate-left'>
<div class="cooperate-title">合作资源</div>
<el-menu :default-active="activeIndex" :unique-opened="false" @select="handleSelect" background-color="#ffffff" text-color="#666" class='cooperate-menu'>
<el-menu-item :index="item.value" :key='index' v-for='(item,index) in menus' >
<i :class="item.icon"></i>
{{item.name}}
</el-menu-item>
</el-menu>
</div>
<div class="cooperate-right">
<div class="all-cooperate-serch">
<el-select class="seach-select" v-model="search.type" @change='' placeholder="选择品类">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options2'></el-option>
</el-select>
<el-select class="seach-select" v-model="search.area" @change='' placeholder="选择区域">
<el-option :label="item.label" :value="item.value" :key='item.label' v-for='(item,index) in search.options1'></el-option>
</el-select>
<el-input class="seach-input" v-model='search.name' prefix-icon="el-icon-search" placeholder='输入名称、联系人或区域'></el-input>
<el-button type='primary' class='button-color'>搜索</el-button>
<el-button type='primary' class='button-color addbutton' @click=''>新增授权点</el-button>
</div>
<div class="cooperate-content">
<el-table :data="tableData" style="width: 100%" @row-click='checkData'>
<el-table-column prop="date" label="授权点" ></el-table-column>
<el-table-column label="负责人" >
<template slot-scope="scope" >
<span class='cursor' style=' color: #5B76D1; '>
{{scope.row.name }}
</span>
<span style=' color: #999;'>{{scope.row.phone}}</span>
</template>
</el-table-column>
<el-table-column prop="address" label="合作区域"> </el-table-column>
<el-table-column prop="type" label="合作品类"> </el-table-column>
<el-table-column label="合作状态" width='80px'>
<template slot-scope="scope" >
<div class='text_center'>
<i class='el-icon-success' v-if='scope.row.status==1' style='color:#6FC152;font-size:16px;'></i>
<i class='el-icon-success' v-else style='color:#F05050;font-size:16px'></i>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="cooperate-bottom">
<el-pagination @current-change="handleCurrentChange" background :current-page="table.current_page" layout="total, prev, pager, next" :page-size="15" :pager-count="table.page_count" :total="table.total">
</el-pagination>
</div>
</div>
</div>
<component :modal-Data="modalData" :is="modal" @close="closeChild"></component>
</div>
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./static/js/common.js"></script>
<script src="./static/js/cooperate/detail.js"></script>
<script>
new Vue({
el: '#app',
components: {commonHeader,vDetail},
data: function() {
return {
activeIndex:'3',tabindex:'3',modal:null,loading:true,
active_header:'./cooperate.html',modalData:[],
menus:[
{name:'正常',value:'1',icon:'el-icon-upload2'},
{name:'停用',value:'2',icon:'el-icon-sort'},
{name:'全部',value:'3',icon:'el-icon-date'},
],
search:{
type:'',area:'',options1:[],options2:[],name:''
},
table:{
current_page:1,page_count:7,total:50,
},
tableData:[
{
date: '精诚维修',
name: '张无极',
phone:'13800009999',
address: '上海市',
type:'空调 冰洗',
status:1
},
{
date: '精诚维修',
name: '张无极',
phone:'13800009999',
address: '上海市',
type:'空调 冰洗',
status:0
},
{
date: '精诚维修',
name: '张无极',
phone:'13800009999',
address: '上海市',
type:'空调 冰洗',
status:1
},
{
date: '精诚维修',
name: '张无极',
phone:'13800009999',
address: '上海市',
type:'空调 冰洗',
status:0
},
]
}
},
created(){
setTimeout(()=>{
this.loading = false;
},1000)
},
methods:{
handleSelect(key, keyPath) {
this.tabindex = key;
switch(Number(key)){
case 1:
// this.modal = VAll
break;
default:
this.modal = null
break;
}
},
handleCurrentChange(page) {
},
checkData(row,event, column){
// debugger
this.modalData = row;
this.modal = vDetail;
console.log(this.modal)
},
closeChild(){
this.modal = null
},
}
})
</script>
</html>
main.html <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="./static/css/main.css">
<link rel="stylesheet" href="./static/css/animate.css">
</head>
<body>
<div id="app">
<common-header :modal-data="active_header"></common-header>
<div class="content">
</div>
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./static/js/common.js"></script>
<script>
new Vue({
el: '#app',
components: {commonHeader},
data: function() {
return {
activeIndex:'1',tabindex:'1',active_header:'./main.html',
}
},
methods:{
}
})
</script>
</html>
message.html <!DOCTYPE html>
\ No newline at end of file <html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="./static/css/main.css">
<link rel="stylesheet" href="./static/css/animate.css">
</head>
<body>
<div id="app">
<common-header :modal-data="active_header"></common-header>
<div class="content">
</div>
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./static/js/common.js"></script>
<script>
new Vue({
el: '#app',
components: {commonHeader},
data: function() {
return {
activeIndex:'1',tabindex:'1',active_header:'./message.html',
}
},
methods:{
}
})
</script>
</html>
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="./static/css/main.css"> <link rel="stylesheet" href="./static/css/main.css">
<link rel="stylesheet" href="./static/css/order.css"> <link rel="stylesheet" href="./static/css/order.css">
<link rel="stylesheet" href="./static/css/animate.css">
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<common-header></common-header> <common-header :modal-data="active_header"></common-header>
<div class="content"> <div class="content">
<div class="order"> <div class="order">
<div class='order-left'> <div class='order-left'>
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<el-button type='primary' class='button-color'>搜索</el-button> <el-button type='primary' class='button-color'>搜索</el-button>
<span class='button-icon'><i class='el-icon-d-caret'></i></span> <span class='button-icon'><i class='el-icon-d-caret'></i></span>
<span class='button-icon'><i class='el-icon-d-caret'></i></span> <span class='button-icon'><i class='el-icon-d-caret'></i></span>
<el-button type='primary' class='button-color addbutton' @click='$router.push({name:"addOrder"})'>新建工单</el-button> <el-button type='primary' class='button-color addbutton' @click='creatOrder()'>新建工单</el-button>
</div> </div>
<div class="all-orders-box"> <div class="all-orders-box">
<div class="all-order-content"> <div class="all-order-content">
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
<el-pagination @current-change="handleCurrentChange" background :current-page="table.current_page" layout="total, prev, pager, next" :page-size="15" :pager-count="table.page_count" :total="table.total"> <el-pagination @current-change="handleCurrentChange" background :current-page="table.current_page" layout="total, prev, pager, next" :page-size="15" :pager-count="table.page_count" :total="table.total">
</el-pagination> </el-pagination>
</div> </div>
<!-- <component :is="modal" @close="closeChild" :modalData="modalData"></component> --> <component :modal-Data="modalData" :is="modal" @close="closeChild"></component>
</div> </div>
</div> </div>
</div> </div>
...@@ -100,13 +100,14 @@ ...@@ -100,13 +100,14 @@
<!-- 引入组件库 --> <!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./static/js/common.js"></script> <script src="./static/js/common.js"></script>
<script src="./static/js/order.js"></script>
<script> <script>
new Vue({ new Vue({
el: '#app', el: '#app',
components: {commonHeader}, components: {commonHeader,Detail},
data: function() { data: function() {
return { return {
activeIndex:'9',tabindex:'9',modal:null, activeIndex:'9',tabindex:'9',modal:null,active_header:'./order.html',
menus:[ menus:[
{name:'待派单',value:'1',icon:'el-icon-upload2'}, {name:'待派单',value:'1',icon:'el-icon-upload2'},
{name:'未分配',value:'2',icon:'el-icon-sort'}, {name:'未分配',value:'2',icon:'el-icon-sort'},
...@@ -135,13 +136,25 @@ ...@@ -135,13 +136,25 @@
modal:null,modalData:{}, modal:null,modalData:{},
} }
}, },
mounted(){
},
methods:{ methods:{
handleSelect:function(){ handleSelect:function(){
},
handleCurrentChange:function(){
}, },
handleCurrentChange:function(){ checkDetail(item){
this.modalData = item;
} this.modal = Detail;
},
closeChild(){
this.modal = null
},
creatOrder(){
window.location.href = './addOrder.html'
}
} }
}) })
......
This diff is collapsed.
This diff is collapsed.
.cooperate{
width: 1400px;
height: 100%;
margin: auto;
}
.cooperate-left{
width: 198px;
height: 100%;
background: #ffffff;
float: left;
}
.cooperate-left .cooperate-title{
color: #5874D8;
text-align: center;
font-size: 18px;
height: 64px;
line-height: 64px;
border-bottom: 1px solid #ececec;
}
.cooperate-menu .el-menu-item.is-active{
background-color: rgba(88,116,216,0.1) !important;
position: relative;
}
.cooperate-menu .el-menu-item.is-active:before{
content: '';
position: absolute;
width: 3px;
height: 20px;
left: 0;
top: 20px;
background: #50B5FC
}
.cooperate-right{
float: right;
width: 1180px;
height: 100%;
position: relative;
background: #ffffff;
}
.cooperate-right .all-cooperate-serch{
background: #ffffff;
padding: 10px;
position: relative;
}
.all-cooperate-serch:after{
position: absolute;
content: '';
left: 20px;
right: 20px;
bottom: 0;
height:1px;
background: #ececec;
}
.cooperate-right .all-cooperate-serch .seach-select .el-input__inner,.cooperate-right .all-cooperate-serch .seach-select .el-input{
width: 120px !important;
background: #F1F3F9;
border: none;
}
.cooperate-right .all-cooperate-serch .seach-input .el-input__inner,.cooperate-right .all-cooperate-serch .seach-input {
width: 298px;
}
.button-color{
background: #5874D8;
}
.button-icon{
background: rgba(88,116,216,0.1) ; padding: 10px 8px;
border-radius: 4px;
}
.addbutton{float: right;}
.cooperate-right .cooperate-bottom{
position: absolute;
left: 0;
right: 0;
text-align: center;
bottom: 15px;
}
.cooperate-right .cooperate-content{
position: absolute;
left: 0;
right:0;
top: 60px;
bottom: 50px;
overflow: auto;
padding: 15px;
}
.cooperate-right .cooperate-content table th{
background: #EEF1FC;
color: #666;
}
.cooperate-right .cooperate-content table td{
font-size: 12px;
}
/********************详情start*******************/
.cooperate-detail{
width: 720px;
height: 630px;
}
.dialog-content{
position: relative;
}
.dialog-content .edict-icon{
position: absolute;right: 20px;
top:0;
}
.dialog-content .edict-icon i{
font-size: 24px;
color: #5874D8;
cursor: pointer;
}
.dialog-content .edict-icon i:nth-child(1){
margin-right: 15px;
}
.el-dialog__wrapper{
overflow: hidden !important;
}
.cooperate-detail h2{
padding-left: 15px;
position: relative;
margin-left: 20px;
}
.cooperate-detail h2:before{
position: absolute;
content: '';
left: 0;
top: 0;
width: 5px;
height: 20px;
background: #50B5FC;
}
.cooperate-detail .el-tabs--card>.el-tabs__header{
padding: 0 20px;
}
.cooperate-detail .el-dialog__body{
padding:30px 0;
}
.cooperate-detail .el-dialog__header{
background: #6C8BF8;
}
.cooperate-detail .el-dialog__header .el-dialog__title,.cooperate-detail .el-dialog__header .el-dialog__headerbtn i{
color: #ffffff;
font-size: 16px;
}
.cooperate-detail .cooperate-detail-tab{
margin-top: 5px;
line-height: 2.5;
border-bottom: 1px solid #ececec;
padding-bottom: 10px;
margin-bottom: 10px;
padding-left: 20px;
}
.cooperate-detail .cooperate-detail-tab p{
color: #999;
font-size: 12px;
}
.cooperate-detail .cooperate-detail-tab span{
color: #333;
font-size: 12px;
}
.cooperate-detail-steps {
height: 300px;
margin-top: 10px;
padding-left: 20px;
}
.cooperate-detail-steps .el-step.is-vertical .el-step__title{
font-size: 14px;
}
.cooperate-detail .cooperate-request-box{
position: relative;
height: 530px;
}
.cooperate-detail .cooperate-detail-request{
background: #ececec;
position: absolute;bottom: 0;
left:0;
right: 0;
height: 54px;
}
.cooperate-detail .cooperate-detail-request .plus{
border: 1px solid #333;
width: 30px;
height: 30px;
margin-top: 10px;
margin-left: 20px;
float: left;
border-radius: 5px;
}
.cooperate-detail .cooperate-detail-request .plus i{
font-size: 29px;
}
.cooperate-detail .cooperate-detail-request .cooperate-input-area .seach-input .el-input__inner,.cooperate-detail .cooperate-detail-request .cooperate-input-area {
width: 540px;
margin-top: 6px;
margin-left: 20px;
}
.cooperate-detail .seach-input .el-input__inner,.cooperate-detail .seach-input {
width: 200px;
height: 25px;
}
.cooperate-detail .seach-area .el-input__inner,.cooperate-detail .seach-area {
width: 430px;
width: 490px;
height: 28px;
margin-right: 20px;
}
/*******************************范围start******************************/
.cooperate-detail-tab .tag{
background: #F1F3F8;
padding: 5px 14px;
border-radius: 3px;
margin-right: 20px;
color:#999999 !important;
}
.cooperate-detail-tab .tag i{
color: #3B4B84;
font-size: 14px;
}
/*******************************授权start******************************/
.el-tabs .wechat{
width: 180px;
height: 180px;
background: #ececec;
margin: auto;
margin-top: 50px;
}
.el-tabs .wechatTip{
text-align: center;
margin-top: 10px;
font-size: 12px;
color: #999;
}
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -6,10 +6,14 @@ ...@@ -6,10 +6,14 @@
html,body,#app,.wrapper{ html,body,#app,.wrapper{
width:100%; width:100%;
height:100%; height:100%;
overflow: hidden; overflow: auto;
background: #F5F5F5; background: #F5F5F5;
position: relative; position: relative;
} }
#app{
opacity:0
}
body{ body{
font-family: "microsoft yahei" !important; font-family: "microsoft yahei" !important;
} }
...@@ -81,6 +85,7 @@ button,.el-button{ ...@@ -81,6 +85,7 @@ button,.el-button{
float: right; float: right;
height: 100%; height: 100%;
line-height: 60px; line-height: 60px;
background: rgba(112,141,241,1);
} }
.header .header-side .mian_side{ .header .header-side .mian_side{
height: 40px; height: 40px;
......
...@@ -154,3 +154,294 @@ ...@@ -154,3 +154,294 @@
left: 0; left: 0;
right: 0; right: 0;
} }
/*弹窗*/
.order-detail{
width: 720px;
height: 670px;
}
.el-dialog__wrapper{
overflow: hidden !important;
}
.order-detail h2{
padding-left: 20px;
}
.order-detail .el-tabs--card>.el-tabs__header{
padding: 0 20px;
}
.order-detail .el-dialog__body{
padding:30px 0;
}
.order-detail .el-dialog__header{
background: #6C8BF8;
}
.order-detail .el-dialog__header .el-dialog__title,.order-detail .el-dialog__header .el-dialog__headerbtn i{
color: #ffffff;
}
.order-detail .order-detail-tab{
margin-top: 5px;
line-height: 2;
border-bottom: 1px solid #ececec;
padding-bottom: 10px;
margin-bottom: 10px;
padding-left: 20px;
}
.order-detail .order-detail-tab p{
color: #999;
font-size: 12px;
}
.order-detail .order-detail-tab span{
color: #333;
font-size: 12px;
}
.order-detail-steps {
height: 300px;
margin-top: 10px;
padding-left: 20px;
}
.order-detail-steps .el-step.is-vertical .el-step__title{
font-size: 14px;
}
.order-detail .order-request-box{
position: relative;
height: 530px;
}
.order-detail .order-detail-request{
background: #ececec;
position: absolute;bottom: 0;
left:0;
right: 0;
height: 54px;
}
.order-detail .order-detail-request .plus{
border: 1px solid #333;
width: 30px;
height: 30px;
margin-top: 10px;
margin-left: 20px;
float: left;
border-radius: 5px;
}
.order-detail .order-detail-request .plus i{
font-size: 29px;
}
.order-detail .order-detail-request .order-input-area .seach-input .el-input__inner,.order-detail .order-detail-request .order-input-area {
width: 540px;
margin-top: 6px;
margin-left: 20px;
}
.order-detail .seach-input .el-input__inner,.order-detail .seach-input {
width: 200px;
height: 25px;
}
.order-detail .seach-area .el-input__inner,.order-detail .seach-area {
width: 430px;
width: 490px;
height: 28px;
margin-right: 20px;
}
/**********************反馈start*************************/
.order-detail .order-detail-response{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 54px;
overflow: auto;
}
.order-detail .order-detail-response .right-response,.order-detail .order-detail-response .left-response{
width: 95%;
margin: auto;
margin-bottom: 15px;
}
.order-detail .order-detail-response .right-response img {
float: right;
border-radius: 50%;
}
.order-detail .order-detail-response .left-response img{
float: left;
border-radius: 50%;
}
.order-detail .order-detail-response .right-response-text{
background: #ececed;
margin-top: 4px;
padding: 8px 10px;
max-width: 380px;
float: right;
border-radius: 5px;
}
.order-detail .order-detail-response .left-response-text{
background: #ececed;
margin-top: 4px;
padding: 8px 10px;
max-width: 380px;
float: left;
border-radius: 5px;
}
.order-detail .order-detail-response .timestep{
font-size: 12px;
color: #999;
margin: auto;
text-align: center;
position: relative;
margin-bottom:15px;
}
.order-detail .order-detail-response .timestep::before{
content: '';
position: absolute;
width: 200px;
height: 1px;
left: 87px;
top: 8px;
background: #ececec;
}
.order-detail .order-detail-response .timestep::after{
content: '';
position: absolute;
width: 200px;
height: 1px;
right: 87px;
top: 8px;
background: #ececec;
}
/************************确权start******************************/
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 100px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
.order-carousel{
width: 600px;
margin: auto;
}
/*******************************范围start******************************/
.order-detail-tab .tag{
background: #F1F3F8;
padding: 5px 14px;
border-radius: 3px;
margin-right: 20px;
color:#999999 !important;
}
.order-detail-tab .tag i{
color: #3B4B84;
font-size: 14px;
}
/*******************************授权start******************************/
.el-tabs .wechat{
width: 180px;
height: 180px;
background: #ececec;
margin: auto;
margin-top: 50px;
}
.el-tabs .wechatTip{
text-align: center;
margin-top: 10px;
font-size: 12px;
color: #999;
}
.add-order{
width: 1400px;
height: 100%;
margin: auto;
}
.add-order-left{
width: 198px;
height: 100%;
background: #ffffff;
float: left;
}
.add-order-left .add-order-title{
color: #5874D8;
text-align: center;
font-size: 18px;
height: 64px;
line-height: 64px;
border-bottom: 1px solid #ececec;
}
.add-order-menu .el-menu-item.is-active{
background-color: rgba(88,116,216,0.1) !important;
position: relative;
}
.add-order-menu .el-menu-item.is-active:before{
content: '';
position: absolute;
width: 3px;
height: 20px;
left: 0;
top: 20px;
background: #50B5FC
}
.add-order-right{
float: right;
width: 1180px;
height: 100%;
position: relative;
}
.add-order-right .add-order-rightTitle{
height: 64px;
line-height: 64px;
position: relative;
padding-left: 20px;
color: #5B76D1;
font-weight:500;
font-size: 20px;
}
.add-order-right .add-order-rightTitle:before{
position: absolute;
content: '';
left: 0;
top: 20px;
width: 6px;
height: 24px;
background: #50B4FC;
}
.add-order-right .add-order-content{
background: #ffffff;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 64px;
padding: 20px;
overflow: auto;
}
.add-order-right .add-order-content form{
width: 800px;
}
.add-order-right .add-order-content form .el-radio__input{
display: none;
}
.add-order-right .add-order-content form .el-radio{
margin-right: 0;
}
.add-order-right .add-order-content form .save{
background: #5774D8;
color: #ffffff;
width: 115px;
margin-left: 100px;
margin-top: 20px;
}
.add-order-right .add-order-content .title{
font-size: 12px;
font-family: PingFangSC-Medium;
font-weight: 500;
color: #8F97A4;
}
.add-order-right .add-order-content .title span{
color: #5B76D1;
}
.add-order-right .add-order-content .textarea{
margin-top: 20px;
}
.add-order-right .add-order-content button{
margin-top: 20px;background: rgb(87, 116, 216);width: 90px;
}
\ No newline at end of file
This diff is collapsed.
var commonHeader={ var commonHeader={
template: '<div class="header"><div class="header-content"><div class="header-logo"><img src="./static/images/dog.jpeg" alt="" width="42px" height="42px"><p class="header-title">Hi!隔壁老王</p></div><div class="header-side"><el-menu mode="horizontal" :router="false" :unique-opened="true" @select="selectRoute" :default-active="onRoutes" background-color="#708DF1" text-color="#ffffff" active-text-color="#708DF1" class="mian_side"> <el-menu-item :index="item.value" :key="index" v-for="(item,index) in headmenus"><i :class="item.icon"></i>{{item.name}}</el-menu-item> </el-menu></div></div></div>', template: `<div class="header">
<div class="header-content">
<div class="header-logo">
<img src="./static/images/dog.jpeg" alt="" width="42px" height="42px">
<p class="header-title">Hi!隔壁老王</p>
</div>
<div class="header-side">
<el-menu mode="horizontal" :router="false" :unique-opened="true" @select="selectRoute" :default-active="onRoutes" background-color="#708DF1" text-color="#ffffff" active-text-color="#708DF1" class="mian_side">
<el-menu-item :index="item.value" :key="index" v-for="(item,index) in headmenus"><i :class="item.icon"></i>{{item.name}}</el-menu-item>
</el-menu>
</div>
</div>
</div>`,
props: {
modalData: String
},
data(){ data(){
return{ return{
onRoutes:'./order.html' , onRoutes:'' ,
headmenus:[ headmenus:[
{name:'首页',value:'./main.html',icon:'el-icon-menu'}, {name:'首页',value:'./main.html',icon:'el-icon-menu'},
{name:'工单',value:'./order.html',icon:'el-icon-tickets'}, {name:'工单',value:'./order.html',icon:'el-icon-tickets'},
...@@ -13,9 +28,17 @@ var commonHeader={ ...@@ -13,9 +28,17 @@ var commonHeader={
], ],
} }
}, },
created(){
console.log(this.modalData)
this.onRoutes = this.modalData;
},
methods:{ methods:{
selectRoute:function(val){ selectRoute:function(val){
window.location.href = val; window.location.href = val;
} }
}, },
} }
setTimeout(function(){
document.getElementById('app').style.opacity = '1'
},100);
var vDetail={
template: `
<el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='cooperate-detail animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<div class="dialog-content">
<div class="edict-icon">
<i class="el-icon-edit-outline"></i>
<i class="el-icon-delete"></i>
</div>
<el-tabs v-model="dialog.tab" type="card" @tab-click="handleClick">
<el-tab-pane label="详情" name="1" >
<h2>基本信息</h2>
<div class='cooperate-detail-tab'>
<p>名 称: <span> 精诚维修</span></p>
<p>负 责 人:<span>张三(13800001111)</span></p>
<p>状 态:<span>正常(已开通接口 )</span></p>
<p>地 址:<span>深圳市精诚家电维修有限公司</span> </p>
</div>
<h2>结算信息</h2>
<div class='cooperate-detail-tab'>
<p>周期: <span> 日结</span></p>
<p>结算方式:<span>银行卡(13800001111)</span></p>
<p>收款信息:<span>张三 中国建设银行宝安支行 6222212132881212</span></p>
</div>
<h2>认证信息</h2>
<div class='cooperate-detail-tab' style="border:none">
<p>认证方式: <span>企业认证</span></p>
<p>认证信息:<span>深圳市精诚家电维修有限公司 0102198902010215</span></p>
<p>认证图片:
<img src="./static/images/dog.jpeg" alt="" width="60px" height="60px" style="vertical-align: text-top;">
</p>
</div>
</el-tab-pane>
<el-tab-pane label="范围" name="2">
<h2>服务区域</h2>
<div class='cooperate-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='cooperate-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="3">
<h2>授权信息</h2>
<div class='cooperate-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>
</div>
</el-dialog> `,
props: {
modalData: Object
},
data(){
return{
detail:{ },
dialog:{
show:true,title:'授权点--精诚维修',tab:'1',
},
}
},
methods:{
handleClose() {
this.$emit('close')
},
handleClick(){
},
}
}
This diff is collapsed.
var addAll={
template: `
<div>
<div class="add-order-rightTitle">
新建工单
<el-button type="primary" plain size='mini' style='float:right;margin-top:20px' @click='reback()'>返回</el-button>
</div>
<div class="add-order-content">
<div class="title">
文本框内可输入<span>用户信息</span>、<span>产品信息</span>等;<br>
(信息之间用空格或换行,系统会自动匹配并完成工单创建.)
</div>
<el-input class='textarea' type="textarea" :autosize="{ minRows: 10, maxRows: 26}" placeholder="" v-model="inputValue"></el-input>
<el-button type="primary" size='mini' style=' '>确定</el-button>
</div>
</div>`,
props: {
modalData: Object
},
data(){
return{
inputValue:''
}
},
methods:{
reback(){
this.$router.back(-1)
}
}
}
This diff is collapsed.
var vPay={
template: `
<el-dialog :title="dialog.title" :visible.sync="dialog.show" custom-class='settle-dialog animated slideInRight' @close="handleClose" :append-to-body="true" :show-close='true'>
<div class="dialog-content">
<p>
<span>授权点数:</span>
<span>唯修汇(张三 15599991111)</span>
</p>
<p>
<span>收款方式:</span>
<span>银行卡(中国银行高新支行)</span>
</p>
<p>收款人:<span>张三(62220998678123)</span></p>
<p>
<span>金额:</span>
<span>¥120000</span>
</p>
<div class="bt-center">
<el-button class='background-blue text-white' >确定付款</el-button>
</div>
</div>
</el-dialog>`,
props: {
modalData: Array
},
data(){
return{
detail:{ },uploadApi:'',
dialog:{
show:true,title:'结算付款',tab:'1',
},
}
},
created(){
console.log(this.modalData)
},
methods:{
handleClose() {
this.$emit('close')
},
},
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
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