Home.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  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. <el-row class="order_list">
  26. <el-col :span="18">
  27. <div class="order_item" v-for="(item,i) in 5" :key="i">
  28. <div class="order_item_header">
  29. <div class="Serial_number">#005</div>
  30. <img src="" class="logo">
  31. <span class="name">礼颂至品(娄葑店)</span>
  32. <div class="sign_time">17:30前送达</div>
  33. <div class="sign_txt">立即送达</div>
  34. <el-button size='small' class="btn" @click.stop="deleteItem">发起配送</el-button>
  35. </div>
  36. <div class="order_item_cont">
  37. <div class="itme_l">
  38. <div class="content">王女士<span>18015468888-1157</span></div>
  39. <div class="address">苏州市工业园区娄葑街道通园路80号(56文创园)C栋1楼 <span><i class="el-icon-location"></i>1.3km</span></div>
  40. </div>
  41. <div class="itme_r">备注:蜡烛需要20岁,要个王冠的帽子</div>
  42. </div>
  43. </div>
  44. </el-col>
  45. <el-col :span="6">
  46. <div class="order_detail">
  47. <div class="detail_title">订单详情</div>
  48. <order-detail></order-detail>
  49. </div>
  50. </el-col>
  51. </el-row>
  52. </div>
  53. </template>
  54. <script>
  55. import sendOrderPopup from './orderComponents/sendOrderPopup.vue';
  56. import orderDetail from './orderComponents/orderDetail'
  57. import OrderDetail from './orderComponents/orderDetail.vue';
  58. export default {
  59. data() {
  60. return {
  61. tab_list:[
  62. {name:'新订单',num:6},
  63. {name:'预约单',num:0},
  64. {name:'待接单',num:0},
  65. {name:'取货中',num:0},
  66. {name:'配送中',num:0},
  67. {name:'异常单',num:0},
  68. {name:'已取消',num:0}
  69. ],
  70. tab_ac:0,
  71. input:''
  72. }
  73. },
  74. components: {
  75. sendOrderPopup,
  76. OrderDetail
  77. },
  78. methods: {
  79. deleteItem(index) {
  80. this.$refs.sendOrderPopup.init();
  81. },
  82. saveRule(t, i) {
  83. let obj = {
  84. id: i + 2,
  85. rule: t,
  86. content: ''
  87. }
  88. this.ruleList.push( obj )
  89. }
  90. }
  91. }
  92. </script>
  93. <style lang="scss" scoped="scoped">
  94. /deep/ .el-input__inner{
  95. padding-right: 50px;
  96. height: 44px;
  97. }
  98. .mainContent{
  99. width: 100%;
  100. .order_tab{
  101. width: 100%;
  102. height: 74px;
  103. background: #FFF;
  104. .tab_list{
  105. width: 100%;
  106. height: 74px;
  107. padding-top: 20px;
  108. padding-left: 36px;
  109. box-sizing: border-box;
  110. display: flex;
  111. .tab_item{
  112. width: 58px;
  113. margin-right: 56px;
  114. font-size: 16px;
  115. font-weight: 500;
  116. color: #B1B1B1;
  117. position: relative;
  118. text-align: center;
  119. cursor: pointer;
  120. .tab_line{
  121. width: 58px;
  122. height: 6px;
  123. background: #FFF;
  124. border-radius: 3px;
  125. margin-top: 15px;
  126. }
  127. .point{
  128. width: 16px;
  129. height: 16px;
  130. border-radius: 50%;
  131. background: #F74141;
  132. font-size: 12px;
  133. font-weight: 400;
  134. color: #FFFFFF;
  135. position: absolute;
  136. top: -5px;
  137. right: -10px;
  138. text-align: center;
  139. line-height: 16px;
  140. }
  141. }
  142. .tab_item_ac{
  143. color: #FC7200;
  144. .tab_line{
  145. background: #FC7200;
  146. }
  147. }
  148. }
  149. .header_serch{
  150. width: 100%;
  151. height: 74px;
  152. padding-right: 25px;
  153. box-sizing: border-box;
  154. display: flex;
  155. align-items: center;
  156. justify-content: flex-end;
  157. .Manual{
  158. width: 118px;
  159. height: 44px;
  160. background: #FC7200;
  161. border-radius: 6px;
  162. font-size: 16px;
  163. font-weight: 500;
  164. color: #FFFFFF;
  165. text-align: center;
  166. line-height: 44px;
  167. margin-left: 18px;
  168. }
  169. .search_inp{
  170. width: 380px;
  171. height: 44px;
  172. display: flex;
  173. align-items: center;
  174. position: relative;
  175. .inp{
  176. width: 380px;
  177. height: 44px;
  178. border: none;
  179. }
  180. .btn{
  181. margin-left: 15px;
  182. font-size: 22px;
  183. position: absolute;
  184. right: 15px;
  185. }
  186. }
  187. }
  188. }
  189. .order_list{
  190. width: 100%;
  191. margin-top: 10px;
  192. .order_item{
  193. width: 100%;
  194. height: 140px;
  195. background: #fff;
  196. margin-bottom: 10px;
  197. .order_item_header{
  198. width: 100%;
  199. height: 49px;
  200. display: flex;
  201. align-items: center;
  202. border-bottom: 1px solid #F0F0F0;
  203. position: relative;
  204. .Serial_number{
  205. width: 60px;
  206. height: 26px;
  207. background: #FC7200;
  208. border-radius: 0 30px 30px 0;
  209. font-size: 10px;
  210. font-weight: 500;
  211. color: #FFFFFF;
  212. text-align: center;
  213. line-height: 26px;
  214. }
  215. .logo{
  216. width: 21px;
  217. height: 21px;
  218. border-radius: 50%;
  219. background: crimson;
  220. margin-left: 23px;
  221. }
  222. .name{
  223. font-size: 14px;
  224. font-weight: 500;
  225. color: #333333;
  226. margin-left: 5px;
  227. }
  228. .sign_time{
  229. width: 84px;
  230. height: 20px;
  231. border: 1px solid #009CFF;
  232. background: #F2FAFF;
  233. border-radius: 2px;
  234. text-align: center;
  235. line-height: 20px;
  236. font-size: 12px;
  237. font-weight: 600;
  238. color: #009CFF;
  239. margin-left: 15px;
  240. }
  241. .sign_txt{
  242. width: 64px;
  243. height: 20px;
  244. border: 1px solid #009CFF;
  245. background: #F2FAFF;
  246. border-radius: 2px;
  247. text-align: center;
  248. line-height: 20px;
  249. font-size: 12px;
  250. font-weight: 600;
  251. color: #009CFF;
  252. margin-left: 10px;
  253. }
  254. .btn{
  255. background: #FC7200;
  256. border-color: #FC7200;
  257. color: #FFF;
  258. position: absolute;
  259. right: 10px;
  260. }
  261. }
  262. .order_item_cont{
  263. width: 100%;
  264. height: 90px;
  265. padding: 0 11px 0 19px;
  266. box-sizing: border-box;
  267. display: flex;
  268. align-items: center;
  269. justify-content: space-between;
  270. .itme_l{
  271. font-size: 14px;
  272. font-weight: 600;
  273. color: #333333;
  274. line-height: 26px;
  275. .content span{
  276. margin-left: 15px;
  277. }
  278. .address span{
  279. font-size: 12px;
  280. color: #B1B1B1;
  281. margin-left: 15px;
  282. }
  283. }
  284. .itme_r{
  285. font-size: 14px;
  286. font-weight: 400;
  287. color: #B1B1B1;
  288. }
  289. }
  290. }
  291. .order_detail{
  292. width: 100%;
  293. border-left: 10px solid #F1F2F5;
  294. background: #fff;
  295. box-sizing: border-box;
  296. .detail_title{
  297. width: 100%;
  298. height: 44px;
  299. background: #FAFAFA;
  300. padding-left: 16px;
  301. box-sizing: border-box;
  302. display: flex;
  303. align-items: center;
  304. font-size: 12px;
  305. font-weight: 600;
  306. color: #B1B1B1;
  307. }
  308. }
  309. }
  310. }
  311. </style>