123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317 |
- <template>
- <div class="mainContent">
- <el-row class="order_tab">
- <el-col :span="15">
- <div class="tab_list">
- <div class="tab_item" @click="tab_ac=i" :class="{'tab_item_ac':tab_ac==i?true:false}" v-for="(item,i) in tab_list" :key="i">
- <div class="point" v-show="item.num">{{item.num}}</div>
- <span>{{item.name}}</span>
- <div class="tab_line"></div>
- </div>
- </div>
- </el-col>
- <el-col :span="9">
- <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>
- <!-- 发起配送 -->
- <send-order-popup ref="sendOrderPopup"></send-order-popup>
- <el-row class="order_list">
- <el-col :span="18">
- <div class="order_item" v-for="(item,i) in 5" :key="i">
- <div class="order_item_header">
- <div class="Serial_number">#005</div>
- <img src="" class="logo">
- <span class="name">礼颂至品(娄葑店)</span>
- <div class="sign_time">17:30前送达</div>
- <div class="sign_txt">立即送达</div>
- <el-button size='small' class="btn" @click.stop="deleteItem">发起配送</el-button>
- </div>
- <div class="order_item_cont">
- <div class="itme_l">
- <div class="content">王女士<span>18015468888-1157</span></div>
- <div class="address">苏州市工业园区娄葑街道通园路80号(56文创园)C栋1楼 <span><i class="el-icon-location"></i>1.3km</span></div>
- </div>
- <div class="itme_r">备注:蜡烛需要20岁,要个王冠的帽子</div>
- </div>
- </div>
- </el-col>
- <el-col :span="6">
- <div class="order_detail">
- <div class="detail_title">订单详情</div>
- <order-detail></order-detail>
-
- </div>
- </el-col>
- </el-row>
- </div>
- </template>
- <script>
- import sendOrderPopup from './orderComponents/sendOrderPopup.vue';
- import orderDetail from './orderComponents/orderDetail'
- import OrderDetail from './orderComponents/orderDetail.vue';
- export default {
- data() {
- return {
- tab_list:[
- {name:'新订单',num:6},
- {name:'预约单',num:0},
- {name:'待接单',num:0},
- {name:'取货中',num:0},
- {name:'配送中',num:0},
- {name:'异常单',num:0},
- {name:'已取消',num:0}
- ],
- tab_ac:0,
- input:''
- }
- },
- components: {
- sendOrderPopup,
- OrderDetail
- },
- methods: {
- deleteItem(index) {
- this.$refs.sendOrderPopup.init();
- },
- saveRule(t, i) {
- let obj = {
- id: i + 2,
- rule: t,
- content: ''
- }
- this.ruleList.push( obj )
- }
- }
- }
- </script>
- <style lang="scss" scoped="scoped">
- /deep/ .el-input__inner{
- padding-right: 50px;
- height: 44px;
- }
- .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;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- justify-content: flex-end;
- .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_item{
- width: 100%;
- height: 140px;
- background: #fff;
- margin-bottom: 10px;
- .order_item_header{
- width: 100%;
- height: 49px;
- display: flex;
- align-items: center;
- border-bottom: 1px solid #F0F0F0;
- position: relative;
- .Serial_number{
- width: 60px;
- height: 26px;
- background: #FC7200;
- border-radius: 0 30px 30px 0;
- font-size: 10px;
- font-weight: 500;
- color: #FFFFFF;
- text-align: center;
- line-height: 26px;
- }
- .logo{
- width: 21px;
- height: 21px;
- border-radius: 50%;
- background: crimson;
- margin-left: 23px;
- }
- .name{
- font-size: 14px;
- font-weight: 500;
- color: #333333;
- margin-left: 5px;
- }
- .sign_time{
- width: 84px;
- height: 20px;
- border: 1px solid #009CFF;
- background: #F2FAFF;
- border-radius: 2px;
- text-align: center;
- line-height: 20px;
- font-size: 12px;
- font-weight: 600;
- color: #009CFF;
- margin-left: 15px;
- }
- .sign_txt{
- width: 64px;
- height: 20px;
- border: 1px solid #009CFF;
- background: #F2FAFF;
- border-radius: 2px;
- text-align: center;
- line-height: 20px;
- font-size: 12px;
- font-weight: 600;
- color: #009CFF;
- margin-left: 10px;
- }
- .btn{
- background: #FC7200;
- border-color: #FC7200;
- color: #FFF;
- position: absolute;
- right: 10px;
- }
- }
- .order_item_cont{
- width: 100%;
- height: 90px;
- padding: 0 11px 0 19px;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- justify-content: space-between;
- .itme_l{
- font-size: 14px;
- font-weight: 600;
- color: #333333;
- line-height: 26px;
- .content span{
- margin-left: 15px;
- }
- .address span{
- font-size: 12px;
- color: #B1B1B1;
- margin-left: 15px;
- }
- }
- .itme_r{
- font-size: 14px;
- font-weight: 400;
- color: #B1B1B1;
- }
- }
- }
- .order_detail{
- width: 100%;
- border-left: 10px solid #F1F2F5;
- background: #fff;
- box-sizing: border-box;
- .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;
- color: #B1B1B1;
- }
-
-
- }
- }
- }
- </style>
|