d

ghs/src/admin/home/order.vue

@@ -28,42 +28,59 @@
           v-for="(item, index) in list.data"
           :key="index"
           @click="pageTo({
-					url: '/admin/order/detail',
+					url: '/pagesOrder/detail',
 					query: {
 						id: item.id
 					}
 				})"
         >
-            <div class="order-list_box">
-              <div>
-                1212
-              </div>
-            </div>
-          <!-- <div class="list-top flex-center-between">
-            <div class="app-color-3">编号：{{ item.sendNum }}</div>
-            <div
-              :class="['app-price',{'app-green':item.status==5}]"
-            >{{ item.status | constantfilter('ORDER_STATUS') }}</div>
-          </div>
-          <div class="list-blo">
-            <block v-if="!$util.isEmpty(item.goodsInfoList)">
-              <list-module
-                v-for="(items, subIndex) in item.goodsInfoList"
-                :key="subIndex"
-                :info="items"
-              />
-            </block>
-          </div> -->
-          <div class="list-bottom">
-            <div>
-              <span class="freight-text">运费：￥{{ item.sendCost }}</span>
-              <span>金额：</span>
-              <span class="app-size-30 app-bold">¥{{ item.actPrice }}</span>
-            </div>
+            <view class="order-top_box">
+                <app-avatar-module :src="item.customAvatar" :width="50" />
+                <view class="tit">
+                  {{item.customName || '未命名'}}
+                </view>
+                <view 
+                  :class="['status',item.status =='3'?'buleColor':(item.status =='6'?'defColor':'')]"> 
+                    {{statusFormat(item.status)}}
+                </view>
+            </view>
+            <view class="order-list_info">
+              <view class="order-info_box">
+                  <view>日期：</view>
+                  <view>{{item.addTime}}</view>
+              </view>
+              <view class="order-info_box">
+                  <view>单号：</view>
+                  <view>{{item.orderSn}}</view>
+              </view>
+              <view class="order-info_box">
+                  <view>人员：</view>
+                  <view>{{item.adminName}}</view>
+              </view>
+              <view class="order-info_box">
+                  <view>数量：</view>
+                  <view>{{`${item.num}/${item.smallNum}`}}</view>
+                  <view class="price">
+                    <view>￥{{item.actPrice}}</view>
+                    <i class="iconfont iconxiangyou"></i>
+                  </view>
+              </view>
+            </view>
+          <div 
+            v-if="!$util.isEmpty(item.buttonList.filter(r=>r.disable == 1))"
+            class="list-bottom">
             <div class="list-button">
-               <div class="admin-button-com default" >花材</div>
-               <div class="admin-button-com default" >自取</div>
-               <div class="admin-button-com default" >发货</div>
+              <view
+                v-for="s in item.buttonList"
+                :key="s.type"
+              >
+                <button
+                  @click="openBt(s)"
+                  v-if="s.disable == 1"
+                  class="admin-button-com bule" >
+                  {{s.type==='item'?'花材':s.type==='selfGet'?'自取':'发货'}}
+                </button>
+              </view>
             </div>
           </div>
         </div>
@@ -122,6 +139,7 @@ import { orderClass } from '@/api/order'
 import { getListB, freeShipping } from "@/api/order";
 import AppSearchModule from '@/components/module/app-search'
 import DorpdownSelect from '@/components/module/dorpdownSelect'
+import AppAvatarModule from "@/components/module/app-avatar";
 export default {
   name: "order-list",
   components: {
@@ -130,7 +148,8 @@ export default {
     AppWrapperEmpty,
     ModalModule,
     AppSearchModule,
-    DorpdownSelect
+    DorpdownSelect,
+    AppAvatarModule
   },
   mixins: [list],
   data() {
@@ -190,12 +209,12 @@ export default {
     }
   },
 	computed: {
-		...mapGetters({ categoryData: 'getCategory' }),
-		...mapGetters({ usageData: 'getUsage' })
+		// ...mapGetters({ categoryData: 'getCategory' }),
+		// ...mapGetters({ usageData: 'getUsage' })
   },
 	mounted() {
-		getCategory()
-		getUsage()
+		// getCategory()
+		// getUsage()
 	},
   onLoad: function() {},
   onShow() {
@@ -206,6 +225,33 @@ export default {
     }
   },
   methods: {
+    statusFormat(status){
+      switch(status) {
+          case "1":
+              return "待付款"
+              break;
+          case "2":
+              return "待配送"
+              break;
+          case "3":
+              return "配送中"
+              break;
+          case "4":
+              return "待通知"
+              break;
+          case "5":
+              return "已取消"
+              break;
+          case "6":
+              return "已完成"
+              break;
+          default:
+              return ''
+      } 
+    },
+    openBt(val){
+
+    },
     selectSussess(val){
       console.log(val)
     },
@@ -300,11 +346,15 @@ export default {
   }
 };
 </script>
-
-<style lang="scss" scoped>
-</style>
-
 <style lang="scss" scoped>
+.admin-button-com {
+  width: 140px;
+  height: 60px;
+  padding:0;
+  line-height: 60px;
+  text-align: center;
+  font-size: 26px;
+}
 .app-content {
   padding-top: 220px;
   padding-bottom: 1px;
@@ -327,30 +377,24 @@ export default {
   }
   .list-wrap {
     .list {
-      padding: 0 30px;
+      
       background-color: #fff;
       margin-bottom: 20px;
       .list-top,
       .list-bottom {
-        padding: 26px 0;
+        padding: 15px 30px;
         border-bottom: 1px solid $borderColor;
         color: $fontColor3;
-        .app-bold {
-          color: #333;
-        }
         .freight-text {
           margin-right: 60px;
         }
-        .app-green {
-          color: green;
-        }
       }
       .list-bottom {
         & > div {
           @include disFlex(center, flex-end);
         }
         .list-button {
-          margin-top: 26px;
+          // margin-top: 26px;
           .admin-button-com {
             margin-left: 20px;
           }
@@ -398,5 +442,59 @@ export default {
 				}
 			}
 		}
-	}
+  }
+  .order-top_box {
+     display: flex;
+     align-items: center;
+     padding: 20px 30px 20px;
+    & > .tit {
+      color: #333333;
+      font-size: 32px;
+      font-weight: 600;
+      margin-left: 20px;
+    }
+    & > .status {
+      flex: 1;
+      text-align: right;
+      color: #FF2842;
+      &.buleColor {
+        color: #3385FF;
+      }
+      &.defColor {
+        color: #333333;
+      }
+    }
+  }
+
+  .order-list_info {
+    padding:10px 30px 30px;
+    border-bottom: 1px solid #EEEEEE;
+    & > .order-info_box {
+      display: flex;
+      align-items: center;
+      font-size: 26px;
+      font-weight: 400;
+      margin-bottom: 5px;
+      & > view:nth-child(1) {
+        color: #999999;
+        
+      }
+      & > view:nth-child(2) {
+          color: #333333;
+      }
+      & > .price {
+        flex: 1;
+        font-size: 30px;
+        color: #333333;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        & .iconxiangyou {
+          color: #999999;
+          font-size: 25px;
+          margin-left: 12px;
+        }
+      }
+    }
+  }
 </style>

ghs/src/pages.json

@@ -127,6 +127,17 @@
 				}
 			]
 		},
+		{
+			"root": "pagesOrder",
+			"pages": [
+				{
+					"path": "detail",
+					"style": {
+						"navigationBarTitleText": "订单详情"
+					}	
+				}
+			]
+		},
 		{
 			"root": "admin/order",
 			"pages": [

ghs/src/pagesOrder/components/stepStatus.vue

@@ -0,0 +1,59 @@
+<template>
+    <view class="step-status_bx">
+        <view>
+            <i class="iconfont iconjihuo clorBule"></i>
+            创建
+        </view>
+        <view class="dot-box">
+            <view v-for="i in 5" class="dot"></view>
+        </view>
+        <view>
+            <i class="iconfont iconjihuo"></i>
+            创建
+        </view>
+        <view class="dot-box">
+            <view v-for="i in 5" class="dot"></view>
+        </view>
+        <view>
+            <i class="iconfont iconjihuo"></i>
+            创建
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+        name:'StepStatus'
+    }
+</script>
+
+<style lang="scss" scoped>
+    .step-status_bx {
+        padding:30px 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background-color: #FFFFFF;
+         & .iconfont {
+            color: #CCCCCC;
+            font-size: 44px;
+            margin-right: 10px;
+            &.clorBule {
+                color: #3385FF;
+            }
+        }
+        .dot-box {
+            width: 88px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            & .dot {
+                width: 8px;
+                height: 8px;
+                background-color: #3385FF;
+                border-radius: 50%;
+            }
+        }
+       
+    }
+</style>

ghs/src/pagesOrder/detail.vue

@@ -0,0 +1,19 @@
+<template>
+    <view class="app-content">   
+       <stepStatus></stepStatus> 
+    </view>
+</template>
+
+<script>
+    import stepStatus from './components/stepStatus'
+    export default {
+        name:'orderDetail',
+        components:{
+            stepStatus
+        }
+    }
+</script>
+
+<style lang="sass" scoped>
+
+</style>

ghs/src/static/iconfont/iconfont.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'iconfont';  /* project id 1525256 */
-  src: url('//at.alicdn.com/t/font_1525256_cnc52nrefdt.eot');
-  src: url('//at.alicdn.com/t/font_1525256_cnc52nrefdt.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_1525256_cnc52nrefdt.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_1525256_cnc52nrefdt.woff') format('woff'),
-  url('//at.alicdn.com/t/font_1525256_cnc52nrefdt.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_1525256_cnc52nrefdt.svg#iconfont') format('svg');
+  src: url('//at.alicdn.com/t/font_1525256_g9h34pw8xqu.eot');
+  src: url('//at.alicdn.com/t/font_1525256_g9h34pw8xqu.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_1525256_g9h34pw8xqu.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_1525256_g9h34pw8xqu.woff') format('woff'),
+  url('//at.alicdn.com/t/font_1525256_g9h34pw8xqu.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_1525256_g9h34pw8xqu.svg#iconfont') format('svg');
 }
 .iconfont {
   font-family: "iconfont" !important;
@@ -14,7 +14,13 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+.iconjihuo:before {
+  content: "\e601";
+}
 
+.iconmingxi1:before {
+  content: "\e7e5";
+}
 .iconjian:before {
   content: "\e7e3";
 }