归类问题优化

store/src/admin/order/components/sel-confirm.vue

@@ -22,7 +22,7 @@
 			<timeaxis-item class="axis-list com-wrap" bgcolor="none">
 				<template v-slot:content>
 					<div class="axis-slot-wrap">
-						<div class="axis-title">{{ orderComData[1].actionName }}</div>
+						<div class="axis-title">{{ orderComData[1].actionName }}1111</div>
 						<div class="axis-det">
 							<div class="app-color-0 app-bold">{{ orderComData[1].addTime | formatTime }}</div>
 						</div>

store/src/admin/order/components/sel-ship-confirm.vue

@@ -14,24 +14,13 @@
             <div class="axis-title">{{ orderComData[0].actionName }}</div>
             <div class="axis-det">
               <div class="app-color-0 app-bold">{{ orderComData[0].finishTime | formatTime }}</div>
-              <!-- <div>订单归类: {{ orderComData[0].classify.category }}</div> -->
-              <!-- <div>用途：{{ orderComData[0].classify.usage }}</div> -->
-              <!-- <div>消息推送：已推送</div> -->
+              <button class="admin-button-com big blue confirm-btn" @click="confirmFn">归类</button>
+              <div>分类: {{ orderComData[0].classify.category }}</div>
+              <div>用途：{{ orderComData[0].classify.usage }}</div>
             </div>
           </div>
         </template>
       </timeaxis-item>
-      <!-- 送达 -->
-      <!-- <timeaxis-item class="axis-list com-wrap" bgcolor="none">
-				<template v-slot:content>
-					<div class="axis-slot-wrap">
-						<div class="axis-title">{{ orderComData[1].actionName }}</div>
-						<div class="axis-det">
-							<div class="app-bold">{{ orderComData[1].addTime | formatTime }}</div>
-						</div>
-					</div>
-				</template>
-      </timeaxis-item>-->
       <!-- 发货 -->
       <timeaxis-item class="axis-list confirm-wrap" bgcolor="none">
         <template v-slot:content>
@@ -87,19 +76,51 @@
         </template>
       </timeaxis-item>
     </time-axis>
+
+		<!-- 选取分类 -->
+		<modal-module :show="selModal" :maskClosable="false" @cancel="modalCancel" @click="selModalClick" title="订单归类" padding="30rpx 30rpx">
+			<template v-slot:content>
+				<div class="upload-confirm-wrap">
+					<!-- 选择分类 -->
+					<div class="sel-wrap">
+						<div class="sel-tit">选择分类1</div>
+						<div class="sel-btn">
+							<block v-for="(item, index) in categoryData" :key="index">
+								<button class="admin-button-com" :class="[form.categoryId == item.id ? '' : 'default']" @click="selCategoryFn(item)">{{ item.categoryName || '暂无' }}</button>
+							</block>
+						</div>
+					</div>
+					<!-- 选择用途 -->
+					<div class="sel-wrap">
+						<div class="sel-tit">选择用途2</div>
+						<div class="sel-btn">
+							<block v-for="(item, index) in usageData" :key="index">
+								<button class="admin-button-com" :class="[form.usageId == item.id ? '' : 'default']" @click="selUsageFn(item)">{{ item.usageName || '暂无' }}</button>
+							</block>
+						</div>
+					</div>
+				</div>
+			</template>
+		</modal-module>
+
   </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import TimeAxis from "@/admin/home/components/plugin/time-axis";
 import TimeaxisItem from "@/admin/home/components/plugin/timeaxis-item";
+import { getCategory, getUsage } from '@/utils/config'
+import { orderClass } from '@/api/order'
+import ModalModule from '@/components/plugin/modal'
 import CardName from "./card-name";
 export default {
   name: "sel-ship-confirm-module",
   components: {
     TimeAxis,
     TimeaxisItem,
-    CardName
+    CardName,
+    ModalModule
   },
   props: {
     query: {
@@ -115,12 +136,68 @@ export default {
       default: () => []
     }
   },
+	data() {
+		return {
+			selModal: false,
+			form: {
+				categoryId: '',
+				usageId: ''
+			}
+		}
+	},
+	computed: {
+		...mapGetters({ categoryData: 'getCategory' }),
+		...mapGetters({ usageData: 'getUsage' })
+  },
+	mounted() {
+		getCategory()
+		getUsage()
+	},
   methods: {
     printerSetFn() {
       this.$util.pageTo({
         url: "/admin/order/print"
       });
-    }
+    },
+		confirmFn() {
+			this.selModal = true
+		},
+		// modal
+		// 操作
+		selCategoryFn(item) {
+			this.form.categoryId = item.id
+		},
+		selUsageFn(item) {
+			this.form.usageId = item.id
+		},
+		selModalClick(e) {
+			if (e.index === 0) {
+				this.modalCancel()
+			} else {
+				orderClass({
+					id: this.orderData.id,
+					...this.form
+				}).then(res => {
+					this.$msg('订单归类成功！')
+					setTimeout(() => {
+						this.$emit('nextPageSuccess', {
+						id: this.query.id,
+						pageStatus: 6
+					})
+						// this.$util.pageTo({
+						// 	url: '/admin/order/ship',
+						// 	query: {
+						// 		id: this.query.id,
+						// 		pageStatus: 6
+						// 	}
+						// })
+					}, 1000)
+				})
+			}
+    },
+    modalCancel() {
+			this.selModal = false
+		},
   }
 };
 </script>
@@ -161,5 +238,45 @@ export default {
     }
   }
 }
+	// 弹窗
+	.upload-confirm-wrap {
+		max-height: 600px;
+		overflow-y: auto;
+		.modal-tit {
+			@include disFlex(center, center);
+			font-size: 40px;
+			margin-top: 30px;
+			margin-bottom: 50px;
+			.iconfont {
+				color: #09bb07;
+				margin-right: 20px;
+				font-size: 50px;
+			}
+		}
+		//  分类
+		.sel-wrap {
+			color: $fontColor2;
+			font-size: 32px;
+			.sel-tit {
+				text-align: left;
+			}
+			.sel-btn {
+				@include disFlex(center, flex-start);
+				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;
+					// }
+				}
+			}
+		}
+	}
 </style>
 

store/src/admin/order/ship.vue

@@ -68,7 +68,7 @@
 			</block>
 			<!-- 发货管理完成 -->
 			<block v-if="showIndex == 6">
-				<sel-ship-confirm :orderData="data" :query="option" :orderComData="orderComData" />
+				<sel-ship-confirm @nextPageSuccess="nextPageSuccess" :orderData="data" :query="option" :orderComData="orderComData" />
 			</block>
 			<!-- 有配送单-发货管理 -->
 			<block v-if="showIndex == 7">
@@ -142,6 +142,7 @@ export default {
 			this._getDet()
 
 			this._orderComDet()
+
 		},
 		_getDet() {
 			return getDetB({ id: this.option.id }).then(res => {