shish 4 лет назад
Родитель
Сommit
36e9994e20

+ 1 - 0
hdPad/src/admin/home/components/middleButton.vue

@@ -159,6 +159,7 @@ export default {
     height: 100vh;
     display: flex;
     flex-direction: column;
+	justify-content: space-around;
     padding: 5upx;
     padding-top: 12upx;
     & > view {

+ 132 - 49
hdPad/src/admin/work/components/order-info.vue

@@ -17,67 +17,68 @@
             <view><text class="left">备注</text><text class="right">花束</text></view>
           </view>
         </view>
-        <view class="operate-area">
-          <view>花材</view>
-          <view>成品</view>
-        </view>
         <view class="work-item-detail">
 
           <view class="flex-space right-detail-title"> 单位用材 </view>
-          <view class="module-com content-box">
-            <view class="commodity-view">
-              <view class="commodity-list">
-                <view v-for="(s, idx) in detailInfo.product" :key="idx" class="commodity-item" >
-                  <image class="item-icon" :src="s.cover" @click="pageTo({url:'/admin/item/detail',query:{id: s.id}})"></image>
-                  <view class="item-info">
-                    <view class="info-line">
-                      <text class="item-name">{{ s.name }}</text>
-                      <text class="item-price">
-                        <text class="unit">5扎</text>
-                      </text>
-                    </view>
-                    <view class="info-line">
-                      <text class="item-type">20支/扎</text>
-                    </view>
+          
+          <view class="unit-use-item">
+            <view class="commodity-list">
+              <view v-for="(s, idx) in detailInfo.product" :key="idx" class="commodity-item" >
+                <image class="item-icon" :src="s.cover" @click="pageTo({url:'/admin/item/detail',query:{id: s.id}})"></image>
+                <view class="item-info">
+                  <view class="info-line">
+                    <text class="item-name">{{ s.name }}</text>
+                    <text class="item-price">
+                      <text class="unit">5扎</text>
+                    </text>
+                  </view>
+                  <view class="info-line">
+                    <text class="item-type">20支/扎</text>
                   </view>
                 </view>
               </view>
-              <view class="summary-bar">
-                <view class="operate-view" ></view>
-                <view class="describe-view"><text>2扎</text> <text>3支</text></view>
-              </view>
+            </view>
+            <view class="summary-bar">
+              <view class="operate-view" ></view>
+              <view class="describe-view"><text>2扎</text> <text>3支</text></view>
             </view>
           </view>
 
           <view style="height:2vh;background-color:#EEEEEE;"></view>
 
-          <view class="flex-space right-detail-title"> 总共用材 </view>
-          <view class="module-com content-box">
-            <view class="commodity-view">
-              <view class="commodity-list">
-                <view v-for="(s, idx) in detailInfo.product" :key="idx" class="commodity-item" >
-                  <image class="item-icon" :src="s.cover" @click="pageTo({url:'/admin/item/detail',query:{id: s.id}})" />
-                  <view class="item-info">
-                    <view class="info-line">
-                      <text class="item-name">{{ s.name }}</text>
-                      <text class="item-price">
-                        <text class="unit">5扎</text>
-                      </text>
-                    </view>
-                    <view class="info-line">
-                      <text class="item-type">20支/扎</text>
-                    </view>
+          <view class="flex-space right-detail-title"> 累计用材 </view>
+          
+          <view class="total-use-item">
+            <view class="commodity-list">
+              <view v-for="(s, idx) in detailInfo.product" :key="idx" class="commodity-item" >
+                <image class="item-icon" :src="s.cover" @click="pageTo({url:'/admin/item/detail',query:{id: s.id}})" />
+                <view class="item-info">
+                  <view class="info-line">
+                    <text class="item-name">{{ s.name }}</text>
+                    <text class="item-price">
+                      <text class="unit">5扎</text>
+                    </text>
+                  </view>
+                  <view class="info-line">
+                    <text class="item-type">20支/扎</text>
+                    <button class="wastage">报损</button>
                   </view>
                 </view>
               </view>
-              <view class="summary-bar">
-                <view class="operate-view" ></view>
-                <view class="describe-view"><text>2扎</text> <text>3支</text></view>
-              </view>
+            </view>
+            <view class="summary-bar">
+              <view class="operate-view" ></view>
+              <view class="describe-view"><text>2扎</text> <text>3支</text></view>
             </view>
           </view>
+        </view>
 
+        <view class="operate-area">
+          <view>修改</view>
+          <view>提交</view>
+          <view>打印</view>
         </view>
+
     </view>
 </template>
 <script>
@@ -96,7 +97,6 @@ export default {
   height: 100%;
   & .work-detail{
         flex: 40;
-        border-right:1upx solid #EEEEEE;
         .order-title{
           font-size:11upx;
           font-weight:bold;
@@ -109,6 +109,7 @@ export default {
           image{
             width:180upx;
             height:180upx;
+            border-radius:3upx;
           }
         }
         .order-item{
@@ -139,7 +140,9 @@ export default {
 		height: 100vh;
     display: flex;
     flex-direction: column;
+    justify-content: space-around;
     padding: 5upx;
+    border-left:1upx solid #EEEEEE;
     & > view {
         border: 1upx solid #EEEEEE;
         border-radius: 5upx;
@@ -166,7 +169,7 @@ export default {
       margin-left:5upx;
       margin-top:5upx;
     }
-    & .commodity-view {
+    & .unit-use-item {
       flex: 40;
       display: flex;
       flex-direction: column;
@@ -177,19 +180,20 @@ export default {
           margin-top:5upx;
           .item-icon {
             flex-shrink: 0;
-            width: 35upx;
-            height: 35upx;
+            width: 38upx;
+            height: 38upx;
+            border-radius:2upx;
           }
           .item-info {
             display: flex;
             flex-direction: column;
-            justify-content: center;
             flex: 1;
             margin-left:6upx;
             .info-line {
               display: flex;
               justify-content: space-between;
               align-items: flex-start;
+              position: relative;
               .item-name {
                 font-size:11upx;
                 color: black;
@@ -238,7 +242,86 @@ export default {
         }
       }
     }
-
+    & .total-use-item {
+      flex: 40;
+      display: flex;
+      flex-direction: column;
+      .commodity-list {
+        padding: 5upx;
+        .commodity-item {
+          display: flex;
+          margin-top:5upx;
+          .item-icon {
+            flex-shrink: 0;
+            width: 38upx;
+            height: 38upx;
+            border-radius:2upx;
+          }
+          .item-info {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            margin-left:6upx;
+            .info-line {
+              display: flex;
+              justify-content: space-between;
+              align-items: flex-start;
+              position: relative;
+              .item-name {
+                font-size:11upx;
+                color: black;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+              }
+              .item-price {
+                color: #333;
+                font-size: 10upx;
+              }
+              .item-type {
+                color: #999;
+                font-size: 8upx;
+              }
+              .item-count {
+                color: #666;
+                font-size: 11upx;
+              }
+              .wastage{
+                position: absolute;
+                right:0upx;
+                font-size:9upx;
+                top:4upx;
+                color:#666666;
+              }
+            }
+          }
+        }
+      }
+      .summary-bar {
+        padding: 0 10upx;
+        height: 30upx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-top: 1upx solid #eeeeee;
+        .operate-view {
+          display: flex;
+          align-items: center;
+          color: #3385ff;
+          font-size: 12upx;
+          .iconfont {
+            margin-right: 20upx;
+            font-size: 10upx;
+          }
+        }
+        .describe-view {
+          display: flex;
+          align-items: center;
+          color: #333;
+          font-size: 9upx;
+        }
+      }
+    }
 	}
 }
 </style>