订单 组件化

ghsApp/src/admin/home/components/OrderItem.vue

@@ -0,0 +1,203 @@
+<template>
+    <view>
+        <view class="order-top_box">
+        
+        <image style="width: 38rpx;height:38rpx;border-radius:38rpx;" mode="aspectFit" :src="item.customAvatarUrl"></image>
+
+        <view class="tit"> {{ item.customName || "" }}</view>
+        <view class="other-refund" v-if="item.refund==2">有退款</view>
+        <view class="other-status" v-if="item.debt == 1">欠款</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.sendNum }}</view>
+        </view>
+        <view class="order-info_box">
+            <view>单号：</view>
+            <view>{{ item.orderSn }}</view>
+        </view>
+        <view class="order-info_box">
+            <view>日期：</view>
+            <view>{{ item.addTime }}</view>
+        </view>
+        <view class="order-info_box">
+            <view>开单：</view>
+            <view v-if="item.shopAdminId > 0">{{ item.shopAdminName}}</view>
+            <view v-else>{{item.customShopAdminName}}</view>
+        </view>
+        <view class="order-info_box">
+            <view>数量：</view>
+            <view v-if="item.smallNum > 0">{{ `${item.bigNum}/${item.smallNum}` }}</view>
+            <view v-else>{{ item.bigNum }}</view>
+            <view class="price">
+            <view>￥{{ parseFloat(item.actPrice) }}</view>
+            <i class="iconfont iconxiangyou"></i>
+            </view>
+        </view>
+        </view>
+        <div class="list-bottom">
+            <div class="list-button">
+                <view v-for="s in item.buttonList" :key="s.type">
+                <button @click.stop="clickBtn(s, item)" v-if="s.show == 1" :disabled="s.disable === 1" class="admin-button-com bule" :class="s.disable === 1 ? 'active' : ''">
+                                    {{ s.type === "print" ? s.name+`(${item.printNum})` : s.name}}
+                </button>
+                </view>
+            </div>
+        </div>
+    </view>
+</template>
+<script>
+export default {
+	name: "OrderItem",
+	components: {
+	},
+	props: {
+
+        item: {
+			required: true
+		}
+	},
+	data() {
+		return {
+
+		};
+	},
+	methods: {
+		clickBtn(s,item) {
+			this.$emit('clickBtn', s,item)
+		},
+        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 "";
+            }
+        }
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.admin-button-com {
+  width: 140px;
+  height: 60px;
+  padding: 0;
+  line-height: 60px;
+  text-align: center;
+  font-size: 26px;
+  &.active {
+    border: 1px solid #ccc;
+  }
+}
+.list-top,
+.list-bottom {
+    padding: 15px 30px;
+    border-bottom: 1px solid $borderColor;
+    color: $fontColor3;
+    .freight-text {
+        margin-right: 60px;
+    }
+}
+.list-bottom {
+    & > div {
+        @include disFlex(center, flex-end);
+    }
+    .list-button {
+        .admin-button-com {
+            margin-left: 20px;
+        }
+    }
+}
+.order-top_box {
+  display: flex;
+  align-items: center;
+  padding: 20px 30px 20px;
+  & > .tit {
+    flex: 8;
+    color: #333333;
+    font-size: 30rpx;
+    font-weight: 650;
+    margin-left: 15rpx;
+  }
+  & > .other-refund{
+    flex: 1.5;
+    text-align: center;
+    color: #ff2842;
+    border:1px solid red;
+    border-radius:30rpx;
+    padding:5rpx 12rpx;
+    font-size:20rpx;
+  }
+  & > .other-status{
+    flex: 1;
+    text-align: center;
+    color: #ff2842;
+    border:1px solid red;
+    border-radius:30rpx;
+    padding:5rpx 12rpx;
+    font-size:20rpx;
+    margin-left:20rpx;
+  }
+  & > .status {
+    flex: 2;
+    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>

ghsApp/src/admin/home/order.vue

@@ -37,50 +37,9 @@
     <div class="list-wrap">
       <block v-if="!$util.isEmpty(list.data)">
         <div class="list" v-for="(item, index) in list.data" :key="index" @click="pageTo({url: '/pagesOrder/detail',query: {id: item.id,},})">
-          <view class="order-top_box">
-            <app-avatar-module :src="item.customAvatarUrl" :width="38" />
-            <view class="tit"> {{ item.customName || "未命名" }}</view>
-            <view class="other-refund" v-if="item.refund==2">有退款</view>
-            <view class="other-status" v-if="item.debt == 1">欠款</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.sendNum }}</view>
-            </view>
-            <view class="order-info_box">
-              <view>单号：</view>
-              <view>{{ item.orderSn }}</view>
-            </view>
-            <view class="order-info_box">
-              <view>日期：</view>
-              <view>{{ item.addTime }}</view>
-            </view>
-            <view class="order-info_box">
-              <view>开单：</view>
-              <view v-if="item.shopAdminId > 0">{{ item.shopAdminName}}</view>
-              <view v-else>{{item.customShopAdminName}}</view>
-            </view>
-            <view class="order-info_box">
-              <view>数量：</view>
-              <view v-if="item.smallNum > 0">{{ `${item.bigNum}/${item.smallNum}` }}</view>
-              <view v-else>{{ item.bigNum }}</view>
-              <view class="price">
-                <view>￥{{ parseFloat(item.actPrice) }}</view>
-                <i class="iconfont iconxiangyou"></i>
-              </view>
-            </view>
-          </view>
-          <div class="list-bottom">
-            <div class="list-button">
-              <view v-for="s in item.buttonList" :key="s.type">
-                <button @click.stop="clickBtn(s, item)" v-if="s.show == 1" :disabled="s.disable === 1" class="admin-button-com bule" :class="s.disable === 1 ? 'active' : ''">
-									{{ s.type === "print" ? s.name+`(${item.printNum})` : s.name}}
-                </button>
-              </view>
-            </div>
-          </div>
+
+          <OrderItem :item="item" @clickBtn="clickBtn"></OrderItem>
+
         </div>
       </block>
       <block v-else>
@@ -90,7 +49,7 @@
         />
       </block>
     </div>
-    <!--		时间段选择-->
+
     <rangeDatePick
       :show="isShow"
       start="2000-01-01"
@@ -110,16 +69,15 @@ const time = `${new Date().getFullYear()}-${Month}-${new Date().getDate()}`;
 import AppTabs from "@/components/plugin/tabs";
 import AppWrapperEmpty from "@/components/app-wrapper-empty";
 import ModalModule from "@/components/plugin/modal";
-import { getCategory, getUsage } from "@/utils/config";
 import { list } from "@/mixins";
 import { mapGetters } from "vuex";
 import { cloudPrintOrder } from "@/api/order";
 import { getListB, freeShipping,confirmFinish,cancel } from "@/api/order";
 import AppSearchModule from "@/components/module/app-search";
 import DorpdownSelect from "@/components/module/dorpdownSelect";
-import AppAvatarModule from "@/components/module/app-avatar";
 import rangeDatePick from "@/components/pyh-rdtpicker/pyh-rdtpicker.vue";
 import BLE from "@/mixins/BLE";
+import OrderItem from "./components/OrderItem";
 export default {
   name: "order-list",
   components: {
@@ -129,13 +87,12 @@ export default {
     ModalModule,
     AppSearchModule,
     DorpdownSelect,
-    AppAvatarModule,
+    OrderItem,
   },
   mixins: [list,BLE],
   computed: { ...mapGetters(["getLoginInfo", "getDictionariesInfo"]) },
   data() {
     return {
-      hasCloudPrint:0,
     	orderId:'',
       seekVal: "",
       isShow: false, //是否显选择时间段
@@ -203,8 +160,10 @@ export default {
   onLoad(option) {
     let dateDefaultOption = [];
     let list = this.getDictionariesInfo.dateDefaultOption;
-    for (let i = 0; i < list.length; i++) {
-      dateDefaultOption.push({ name: list[i].name, id: list[i].value });
+    if (!this.$util.isEmpty(list)){
+      for (let i = 0; i < list.length; i++) {
+        dateDefaultOption.push({ name: list[i].name, id: list[i].value });
+      }
     }
     this.menuObj = {
       title: "时间",
@@ -252,31 +211,9 @@ export default {
     timeCancel(e) {
       this.isShow = false;
     },
-    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 "";
-      }
-    }, // 操作按钮
+   // 操作按钮
   clickBtn(s, item) {
+      let that = this
       this.orderId=item.id;
       if (s.type === "selfGet") {
         this.operateData = item;
@@ -300,27 +237,34 @@ export default {
           },
         });
       }else if (s.type === "print") {
-        if(this.hasCloudPrint == 1){
-            //云打印
-            console.log('走云打印方式')
-            uni.showLoading({title: '打印中...'});
-            cloudPrintOrder({id:item.id}).then((res) => {
-              item.printNum++
-              uni.hideLoading()
-            })
-        }else{
-          //普通打印
-          console.log('走蓝牙打印方式')
-          let BleVal = JSON.parse(item.printData);
-          switch(uni.getSystemInfoSync().platform){
-            case 'android':
-              this.destroyed(BleVal);
-              break;
-            case 'ios':
-              this.autoLinkBle(BleVal);
-              break;
+        uni.showLoading({title: '打印中...'});
+        cloudPrintOrder({id:item.id}).then((res) => {
+          uni.hideLoading()
+          if(res.code == 1){
+
+            if(res.data.hasNoPrint == 1){
+              uni.showModal({
+                title: "提示",
+                content: "您还没有设置打印机",
+                cancelText: "取消",
+                confirmText: "去设置",
+                success: function (res) {
+                  if (res.confirm) {
+                    that.$util.pageTo({url: "/admin/shop/print"})
+                  }
+                },
+              })
+              return false
+            }
+            
+            item.printNum++
+          }else if(res.code == 3){
+
+
+
           }
-        }
+
+        })
 			}else if(s.type == 'confirm'){
 				let self = this;
 				uni.showActionSheet({
@@ -361,7 +305,6 @@ export default {
 					content: '确认取消？',
 					success: function (res) {
 						if (res.confirm) {
-
 							cancel({id:item.id}).then((res) => {
 								uni.showToast({title:res.msg,icon:'none'})
 								this._list();
@@ -371,7 +314,6 @@ export default {
 					}
 				});
 			}
-
 		},
 		toConfrim(params,title){
       let that = this
@@ -388,7 +330,6 @@ export default {
 		toConfirmRequest(params){
       let that = this
 			confirmFinish(params).then((res) => {
-
         uni.showToast({title:res.msg,icon:'none'})
         if(res.code == 1){
           //订单变成完成
@@ -403,8 +344,6 @@ export default {
             }
           });
         }
-        
-
 			})
 		},
     selectSussess(val) {
@@ -440,20 +379,9 @@ export default {
         this.tabs[2].value = res.data.shop.unSendOrder || 0;
         this.tabs[3].value = res.data.shop.sendingOrder || 0;
         this.tabs[4].value = res.data.shop.finishOrder || 0;
-
-        //有没云打印
-        if(res.data.shopExt.printSn && res.data.shopExt.printKey){
-          if(!this.$util.isEmpty(res.data.shopExt.printSn) && !this.$util.isEmpty(res.data.shopExt.printKey)){
-            this.hasCloudPrint = 1
-          }else{
-            this.hasCloudPrint = 0
-          }
-        }
-
       });
     },
     change(e) {
-      console.log(e);
       if (this.tabIndex == e.index) {
         return false;
       } else {
@@ -537,30 +465,9 @@ page{
     .list {
       background-color: #fff;
       margin-bottom: 20px;
-      .list-top,
-      .list-bottom {
-        padding: 15px 30px;
-        border-bottom: 1px solid $borderColor;
-        color: $fontColor3;
-        .freight-text {
-          margin-right: 60px;
-        }
-      }
-      .list-bottom {
-        & > div {
-          @include disFlex(center, flex-end);
-        }
-        .list-button {
-          // margin-top: 26px;
-          .admin-button-com {
-            margin-left: 20px;
-          }
-        }
-      }
     }
   }
 }
-// 弹窗
 .upload-confirm-wrap {
   max-height: 600px;
   overflow-y: auto;
@@ -575,7 +482,6 @@ page{
       font-size: 50px;
     }
   }
-  //  分类
   .sel-wrap {
     color: $fontColor2;
     font-size: 32px;
@@ -587,88 +493,11 @@ page{
       flex-wrap: wrap;
       padding: 10px 0 40px;
       .admin-button-com {
-        // width: 170px;
         margin-right: 20px;
         margin-top: 20px;
         padding-top: 16px;
         padding-bottom: 16px;
         border-radius: 4px;
-        // &:nth-child(3n + 1) {
-        // 	margin-left: 0;
-        // }
-      }
-    }
-  }
-}
-.order-top_box {
-  display: flex;
-  align-items: center;
-  padding: 20px 30px 20px;
-  & > .tit {
-    flex: 8;
-    color: #333333;
-    font-size: 30rpx;
-    font-weight: 650;
-    margin-left: 15rpx;
-  }
-  & > .other-refund{
-    flex: 1.5;
-    text-align: center;
-    color: #ff2842;
-    border:1px solid red;
-    border-radius:30rpx;
-    padding:5rpx 12rpx;
-    font-size:20rpx;
-  }
-  & > .other-status{
-    flex: 1;
-    text-align: center;
-    color: #ff2842;
-    border:1px solid red;
-    border-radius:30rpx;
-    padding:5rpx 12rpx;
-    font-size:20rpx;
-    margin-left:20rpx;
-  }
-  & > .status {
-    flex: 2;
-    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;
       }
     }
   }