Home.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. <template>
  2. <div class="mainContent">
  3. <el-row class="order_tab">
  4. <el-col :span="15">
  5. <div class="tab_list">
  6. <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">
  7. <div class="point" v-show="item.num">{{item.num}}</div>
  8. <span>{{item.name}}</span>
  9. <div class="tab_line"></div>
  10. </div>
  11. </div>
  12. </el-col>
  13. <el-col :span="9">
  14. <div class="header_serch">
  15. <div class="search_inp">
  16. <el-input class="inp" v-model="input" placeholder="请输入手机号/姓名/地址/订单编号"></el-input>
  17. <div class="btn"><i class="el-icon-search"></i></div>
  18. </div>
  19. <div class="Manual">手动发单</div>
  20. </div>
  21. </el-col>
  22. </el-row>
  23. <!-- 发起配送 -->
  24. <send-order-popup ref="sendOrderPopup"></send-order-popup>
  25. </div>
  26. </template>
  27. <script>
  28. import sendOrderPopup from './orderComponents/sendOrderPopup.vue';
  29. export default {
  30. data() {
  31. return {
  32. tab_list:[
  33. {name:'新订单',num:6},
  34. {name:'预约单',num:0},
  35. {name:'待接单',num:0},
  36. {name:'取货中',num:0},
  37. {name:'配送中',num:0},
  38. {name:'异常单',num:0},
  39. {name:'已取消',num:0}
  40. ],
  41. tab_ac:0,
  42. input:''
  43. }
  44. },
  45. components: {
  46. sendOrderPopup
  47. },
  48. methods: {
  49. deleteItem(index) {
  50. this.$refs.sendOrderPopup.init();
  51. },
  52. saveRule(t, i) {
  53. let obj = {
  54. id: i + 2,
  55. rule: t,
  56. content: ''
  57. }
  58. this.ruleList.push( obj )
  59. }
  60. }
  61. }
  62. </script>
  63. <style lang="scss" scoped="scoped">
  64. /deep/ .el-input__inner{
  65. padding-right: 50px;
  66. height: 44px;
  67. }
  68. .mainContent{
  69. width: 100%;
  70. .order_tab{
  71. width: 100%;
  72. height: 74px;
  73. background: #FFF;
  74. .tab_list{
  75. width: 100%;
  76. height: 74px;
  77. padding-top: 20px;
  78. padding-left: 36px;
  79. box-sizing: border-box;
  80. display: flex;
  81. .tab_item{
  82. width: 58px;
  83. margin-right: 56px;
  84. font-size: 16px;
  85. font-weight: 500;
  86. color: #B1B1B1;
  87. position: relative;
  88. text-align: center;
  89. cursor: pointer;
  90. .tab_line{
  91. width: 58px;
  92. height: 6px;
  93. background: #FFF;
  94. border-radius: 3px;
  95. margin-top: 15px;
  96. }
  97. .point{
  98. width: 16px;
  99. height: 16px;
  100. border-radius: 50%;
  101. background: #F74141;
  102. font-size: 12px;
  103. font-weight: 400;
  104. color: #FFFFFF;
  105. position: absolute;
  106. top: -5px;
  107. right: -10px;
  108. text-align: center;
  109. line-height: 16px;
  110. }
  111. }
  112. .tab_item_ac{
  113. color: #FC7200;
  114. .tab_line{
  115. background: #FC7200;
  116. }
  117. }
  118. }
  119. .header_serch{
  120. width: 100%;
  121. height: 74px;
  122. padding-right: 25px;
  123. box-sizing: border-box;
  124. display: flex;
  125. align-items: center;
  126. justify-content: flex-end;
  127. .Manual{
  128. width: 118px;
  129. height: 44px;
  130. background: #FC7200;
  131. border-radius: 6px;
  132. font-size: 16px;
  133. font-weight: 500;
  134. color: #FFFFFF;
  135. text-align: center;
  136. line-height: 44px;
  137. margin-left: 18px;
  138. }
  139. .search_inp{
  140. width: 380px;
  141. height: 44px;
  142. display: flex;
  143. align-items: center;
  144. position: relative;
  145. .inp{
  146. width: 380px;
  147. height: 44px;
  148. border: none;
  149. }
  150. .btn{
  151. margin-left: 15px;
  152. font-size: 22px;
  153. position: absolute;
  154. right: 15px;
  155. }
  156. }
  157. }
  158. }
  159. }
  160. </style>