|
|
@@ -1,34 +1,378 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- 我是Hello World页
|
|
|
+ <div class="mainContent">
|
|
|
+ <el-row class="order_tab">
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="header_serch">
|
|
|
+ <div class="search_inp">
|
|
|
+ <el-input class="inp" v-model="input" placeholder="请输入手机号/姓名/地址/订单编号"></el-input>
|
|
|
+ <div class="btn"><i class="el-icon-search"></i></div>
|
|
|
+ </div>
|
|
|
+ <div class="Manual">手动发单</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row class="order_list">
|
|
|
+ <el-col :span="19">
|
|
|
+ <div class="order_list_sel">
|
|
|
+ <div class="sel_item">
|
|
|
+ 门店：
|
|
|
+ <el-select class="item1" v-model="form.store" placeholder="请选择活动区域">
|
|
|
+ <el-option label="全部" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="sel_item">
|
|
|
+ 订单来源：
|
|
|
+ <el-select class="item1" v-model="form.source" placeholder="请选择活动区域">
|
|
|
+ <el-option label="全部" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="sel_item">
|
|
|
+ 订单状态：
|
|
|
+ <el-select class="item2" v-model="form.status" placeholder="请选择活动区域">
|
|
|
+ <el-option label="全部" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="sel_item sel_item2">
|
|
|
+ 日期：
|
|
|
+ <el-date-picker
|
|
|
+ v-model="value1"
|
|
|
+ class="item3"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ <el-button size='medium' style="background: #0D1E40;color:#fff">查询</el-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <order-list></order-list>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <div class="order_detail">
|
|
|
+ <div class="detail_title">
|
|
|
+ <div class="detail_txt">订单详情</div>
|
|
|
+ </div>
|
|
|
+ <order-detail :tabNum='1'></order-detail>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <!-- <order-map></order-map> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-export default {
|
|
|
- name: 'HelloWorld',
|
|
|
- data () {
|
|
|
- return {
|
|
|
- msg: 'Welcome to Your Vue.js App'
|
|
|
+ import sendOrderPopup from './orderComponents/sendOrderPopup.vue';
|
|
|
+ import OrderDetail from './orderComponents/orderDetail.vue';
|
|
|
+ import orderMap from './orderComponents/orderAMap.vue';
|
|
|
+ import OrderList from './orderComponents/orderList.vue';
|
|
|
+ import orderTrack from './orderComponents/orderTrack.vue'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ input:'',
|
|
|
+ value1:'',
|
|
|
+ form:{
|
|
|
+ store:'',
|
|
|
+ source:'',
|
|
|
+ status:''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ sendOrderPopup,
|
|
|
+ OrderDetail,
|
|
|
+ OrderList,
|
|
|
+ orderMap,
|
|
|
+ orderTrack
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ sendOrder() {
|
|
|
+ this.$refs.sendOrderPopup.init();
|
|
|
+ },
|
|
|
+
|
|
|
+ saveRule(t, i) {
|
|
|
+ let obj = {
|
|
|
+ id: i + 2,
|
|
|
+ rule: t,
|
|
|
+ content: ''
|
|
|
+ }
|
|
|
+ this.ruleList.push( obj )
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
-<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
|
-<style scoped>
|
|
|
-h1, h2 {
|
|
|
- font-weight: normal;
|
|
|
-}
|
|
|
-ul {
|
|
|
- list-style-type: none;
|
|
|
- padding: 0;
|
|
|
-}
|
|
|
-li {
|
|
|
- display: inline-block;
|
|
|
- margin: 0 10px;
|
|
|
-}
|
|
|
-a {
|
|
|
- color: #42b983;
|
|
|
-}
|
|
|
+<style lang="scss" scoped="scoped">
|
|
|
+ /deep/ .el-input__inner{
|
|
|
+ padding-right: 50px;
|
|
|
+ height: 44px;
|
|
|
+ }
|
|
|
+ /deep/ .el-input{
|
|
|
+ input{
|
|
|
+ height: 36px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ /deep/ .el-date-editor .el-range-separator{
|
|
|
+ line-height: 28px;
|
|
|
+ width: 10%;
|
|
|
+ }
|
|
|
+ /deep/ .el-date-editor .el-range__icon{
|
|
|
+ line-height: 28px;
|
|
|
+ }
|
|
|
+ /deep/ .el-date-editor input{
|
|
|
+ width: 42%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mainContent{
|
|
|
+ width: 100%;
|
|
|
+ .order_tab{
|
|
|
+ width: 100%;
|
|
|
+ height: 74px;
|
|
|
+ background: #FFF;
|
|
|
+ .tab_list{
|
|
|
+ width: 100%;
|
|
|
+ height: 74px;
|
|
|
+ padding-top: 20px;
|
|
|
+ padding-left: 36px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ .tab_item{
|
|
|
+ width: 58px;
|
|
|
+ margin-right: 56px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #B1B1B1;
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ .tab_line{
|
|
|
+ width: 58px;
|
|
|
+ height: 6px;
|
|
|
+ background: #FFF;
|
|
|
+ border-radius: 3px;
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .point{
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #F74141;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ position: absolute;
|
|
|
+ top: -5px;
|
|
|
+ right: -10px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tab_item_ac{
|
|
|
+ color: #FC7200;
|
|
|
+ .tab_line{
|
|
|
+ background: #FC7200;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .header_serch{
|
|
|
+ width: 100%;
|
|
|
+ height: 74px;
|
|
|
+ padding-right: 25px;
|
|
|
+ padding-left: 19px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .Manual{
|
|
|
+ width: 118px;
|
|
|
+ height: 44px;
|
|
|
+ background: #FC7200;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 44px;
|
|
|
+ margin-left: 18px;
|
|
|
+ }
|
|
|
+ .search_inp{
|
|
|
+ width: 380px;
|
|
|
+ height: 44px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ .inp{
|
|
|
+ width: 380px;
|
|
|
+ height: 44px;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ margin-left: 15px;
|
|
|
+ font-size: 22px;
|
|
|
+ position: absolute;
|
|
|
+ right: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order_list{
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+ .order_list_sel{
|
|
|
+ width: 100%;
|
|
|
+ height: 74px;
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 10px 0 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .sel_item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .item1{
|
|
|
+ width: 200px;
|
|
|
+ height: 36px;
|
|
|
+ }
|
|
|
+ .item2{
|
|
|
+ width: 100px;
|
|
|
+ height: 36px;
|
|
|
+ }
|
|
|
+ .item3{
|
|
|
+ width: 250px;
|
|
|
+ height: 36px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sel_item2{
|
|
|
+ /deep/ .el-input__inner{
|
|
|
+ padding-right: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order_list_form{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .order_detail{
|
|
|
+ width: 100%;
|
|
|
+ border-left: 10px solid #F1F2F5;
|
|
|
+ background: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-left: 10px solid #F1F2F5;
|
|
|
+ .detail_title{
|
|
|
+ width: 100%;
|
|
|
+ height: 44px;
|
|
|
+ background: #FAFAFA;
|
|
|
+ padding-left: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ .detail_txt{
|
|
|
+ color: #B1B1B1;
|
|
|
+ padding-bottom: 13px;
|
|
|
+ border-bottom: 2px solid #FAFAFA;
|
|
|
+ margin-right: 28px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .detail_txt_ac{
|
|
|
+ color: #00152A;
|
|
|
+ border-color: #00152A;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .detail_cont{
|
|
|
+ width: 100%;
|
|
|
+ padding: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .detail_title2{
|
|
|
+ width: 100%;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #777777;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ .shop_detail{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ img{
|
|
|
+ width: 47px;
|
|
|
+ height: 47px;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+ .info{
|
|
|
+ flex-grow: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .shop_title{
|
|
|
+ width: 70%;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ .shop_num{
|
|
|
+ color: #B1B1B1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .detail_ine{
|
|
|
+ width: 100%;
|
|
|
+ height: 1px;
|
|
|
+ border-top: 2px dotted #F0F0F0;
|
|
|
+ margin: 16px 0;
|
|
|
+ }
|
|
|
+ .info2{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ .title{
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ width: 80px;
|
|
|
+ color: #B1B1B1;
|
|
|
+ }
|
|
|
+ .cont{
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ .cont2{
|
|
|
+ color: #FC7200;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info3{
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .info4{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .btns{
|
|
|
+ margin-top: 30px;
|
|
|
+ .btn{
|
|
|
+ background: #FC7200;
|
|
|
+ border-color: #FC7200;
|
|
|
+ color: #FFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
ZhouFeng