update

mobile-code/src/pages.json

@@ -41,6 +41,12 @@
 					"style": {
 						"navigationBarTitleText": "详情"
 					}
+				},
+				{
+					"path": "admin/ship",
+					"style": {
+						"navigationBarTitleText": "发货"
+					}
 				}
 			]
 		},

mobile-code/src/pages/admin/components/plugin/timeaxis-item.vue

@@ -25,7 +25,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
 	.tui-timeaxis-item {
 		position: relative;
 		width: 100%;

mobile-code/src/pages/order/admin/components/card-name.vue

@@ -0,0 +1,38 @@
+<template>
+	<div class="card-name-module">
+        <div class="card-tag">
+            <img src="../../../../static/images/order/tag.png" alt="" mode="widthFix" >
+        </div>
+        <div class="app-size-30 app-color-0">赵志军</div>
+        <div>153928282777</div>
+        <div>福建省厦门市湖里区拉了军无呜呜号码129号之一3楼</div>
+    </div>
+</template>
+
+<script>
+export default {
+	name: 'card-name-module'
+}
+</script>
+
+<style lang="scss" scoped>
+.card-name-module {
+    position: relative;
+    color: $fontColor3;
+    box-shadow: 0 0 10px #ccc;
+    border-radius: 4px;
+    padding: 24px 0 24px 20px;
+    & > div {
+        margin-top: 14px;
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+    .card-tag {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 100px;
+    }
+}
+</style>

mobile-code/src/pages/order/admin/components/sel-mention.vue

@@ -0,0 +1,116 @@
+<template>
+	<div class="sel-mention-module">
+		<!-- 列表 -->
+		<time-axis>
+			<!-- 完成 -->
+			<timeaxis-item class="axis-list axis-first confirm-wrap" bgcolor="none">
+				<template v-slot:node>
+					<div class="tui-node node-big">
+						<div class="node-small"></div>
+					</div>
+				</template>
+				<template v-slot:content>
+					<div class="axis-slot-wrap">
+						<div class="axis-title">完成</div>
+						<div class="axis-det">
+							<div class="app-color-0">2019-10-10 18:00:00</div>
+                            <div>订单归类: 花束/花盒</div>
+                            <div>用途：送爱人/恋人</div>
+                            <div>消息推送：未推送</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">送达</div>
+						<div class="axis-det">
+							<div>2019-10-10 18:00:00</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">发货</div>
+						<div class="axis-det">
+							<div>2019-10-10 18:00:00</div>
+                            <div class="app-color-2">自己送</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">打单</div>
+						<div class="axis-det">
+							<div>2019-10-10 18:00:00</div>
+                            <div class="app-color-2">免打单</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">下单</div>
+						<div class="axis-det">
+							<div>2019-10-10 18:00:00</div>
+						</div>
+					</div>
+				</template>
+			</timeaxis-item>
+		</time-axis>
+	</div>
+</template>
+
+<script>
+import TimeAxis from '@/pages/admin/components/plugin/time-axis'
+import TimeaxisItem from '@/pages/admin/components/plugin/timeaxis-item'
+export default {
+	name: 'sel-mention-module',
+	components: {
+		TimeAxis,
+		TimeaxisItem
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+    // 发货
+    .confirm-wrap {
+		.axis-slot-wrap {
+			top: -4px !important;
+		}
+		.axis-det {
+			margin-top: 20px;
+            margin-bottom: 10px;
+            color: $fontColor2;
+            & > div {
+                margin-top: 10px;
+                &:first-child {
+                    margin-top: 0;
+                }
+            }
+		}
+    }
+	// 打单
+	.com-wrap {
+		.axis-det {
+			margin-top: 14px;
+            & > div {
+                margin-top: 10px;
+                &:first-child {
+                    margin-top: 0;
+                }
+            }
+		}
+	}
+</style>

mobile-code/src/pages/order/admin/components/sel-order.vue

@@ -0,0 +1,70 @@
+<template>
+	<div class="sel-order-module">
+		<!-- 列表 -->
+		<time-axis>
+			<!-- 打单 -->
+			<timeaxis-item class="axis-list axis-first print-order" bgcolor="none">
+				<template v-slot:node>
+					<div class="tui-node node-big">
+						<div class="node-small"></div>
+					</div>
+				</template>
+				<template v-slot:content>
+					<div class="axis-slot-wrap">
+						<div class="axis-title">打单</div>
+						<div class="axis-det">
+							<button class="admin-button-com big blue">免打单</button>
+							<button class="admin-button-com big blue">要打单</button>
+						</div>
+					</div>
+				</template>
+			</timeaxis-item>
+			<!-- 下单 -->
+			<timeaxis-item class="axis-list down-order" bgcolor="none">
+				<template v-slot:content>
+					<div class="axis-slot-wrap">
+						<div class="axis-title">下单</div>
+						<div class="axis-det">
+							<div>2019-10-10 18:00:00</div>
+						</div>
+					</div>
+				</template>
+			</timeaxis-item>
+		</time-axis>
+	</div>
+</template>
+
+<script>
+import TimeAxis from '@/pages/admin/components/plugin/time-axis'
+import TimeaxisItem from '@/pages/admin/components/plugin/timeaxis-item'
+export default {
+	name: 'sel-order-module',
+	components: {
+		TimeAxis,
+		TimeaxisItem
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	// 打单
+	.print-order {
+		.axis-slot-wrap {
+			top: -4px !important;
+		}
+		.axis-det {
+			@include disFlex(center, space-between);
+			margin-top: 50px;
+			margin-bottom: 10px;
+			.admin-button-com {
+				width: 48%;
+			}
+		}
+	}
+	// 下单
+	.down-order {
+		.axis-det {
+			margin-top: 14px;
+		}
+	}
+</style>

mobile-code/src/pages/order/admin/components/sel-pending-order.vue

@@ -0,0 +1,115 @@
+<template>
+	<div class="sel-pending-order-module">
+		<!-- 列表 -->
+		<time-axis>
+			<!-- 发货 -->
+			<timeaxis-item class="axis-list axis-first confirm-wrap" bgcolor="none">
+				<template v-slot:node>
+					<div class="tui-node node-big">
+						<div class="node-small"></div>
+					</div>
+				</template>
+				<template v-slot:content>
+					<div class="axis-slot-wrap">
+						<div class="axis-title">发货</div>
+						<div class="axis-det">
+							<div>配送方：达达</div>
+                            <div>距离：5.5km</div>
+                            <div>运费：¥28</div>
+                            <div>
+                                <span>小费：¥5</span>
+                                <i class="iconfont iconbianjijiage1 modify-btn"></i>
+                            </div>
+                            <div>状态：待接单</div>
+                            <div>期待送花时间：2019-10-10 20:00:00</div>
+                            <div class="admin-button-com default">取消</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">打单</div>
+						<div class="axis-det">
+							<div>2019-10-10 18:00:00</div>
+                            <card-name />
+                            <div class="btn-wrap-com">
+                                <button class="admin-button-com default">修改</button>
+                                <button class="admin-button-com default">明细</button>
+                                <button class="admin-button-com default">打印</button>
+                            </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">下单</div>
+						<div class="axis-det">
+							<div>2019-10-10 18:00:00</div>
+						</div>
+					</div>
+				</template>
+			</timeaxis-item>
+		</time-axis>
+	</div>
+</template>
+
+<script>
+import TimeAxis from '@/pages/admin/components/plugin/time-axis'
+import TimeaxisItem from '@/pages/admin/components/plugin/timeaxis-item'
+import CardName from './card-name'
+export default {
+	name: 'sel-pending-order-module',
+	components: {
+		TimeAxis,
+		TimeaxisItem,
+		CardName
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+    // 发货
+    .confirm-wrap {
+		.axis-slot-wrap {
+			top: -4px !important;
+		}
+		.axis-det {
+			margin-top: 20px;
+            margin-bottom: 10px;
+            color: $fontColor2;
+            & > div {
+                margin-top: 14px;
+                &:first-child {
+                    margin-top: 0;
+                }
+            }
+            .admin-button-com {
+                width: 120px;
+                margin-top: 20px;
+            }
+            .modify-btn {
+                color: $mainColor;
+                font-size: 24px;
+                margin-left: 30px;
+            }
+		}
+    }
+	// 打单
+	.com-wrap {
+		.axis-det {
+			margin-top: 14px;
+            & > div {
+                margin-top: 20px;
+                &:first-child {
+                    margin-top: 0;
+                }
+            }
+		}
+	}
+</style>

mobile-code/src/pages/order/admin/components/sel-ship-confirm.vue

@@ -0,0 +1,12 @@
+<template>
+	<div class="sel-ship-confirm-module"></div>
+</template>
+
+<script>
+export default {
+	name: 'sel-ship-confirm-module'
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

mobile-code/src/pages/order/admin/components/sel-ship.vue

@@ -0,0 +1,101 @@
+<template>
+	<div class="sel-ship-module">
+		<!-- 列表 -->
+		<time-axis>
+			<!-- 发货 -->
+			<timeaxis-item class="axis-list axis-first ship-goods" bgcolor="none">
+				<template v-slot:node>
+					<div class="tui-node node-big">
+						<div class="node-small"></div>
+					</div>
+				</template>
+				<template v-slot:content>
+					<div class="axis-slot-wrap">
+						<div class="axis-title">发货</div>
+						<div class="axis-det">
+							<button class="admin-button-com big blue">自己送</button>
+							<button class="admin-button-com big blue">快递送</button>
+						</div>
+					</div>
+				</template>
+			</timeaxis-item>
+			<!-- 打单 -->
+			<timeaxis-item class="axis-list print-order" bgcolor="none">
+				<template v-slot:content>
+					<div class="axis-slot-wrap">
+						<div class="axis-title">打单</div>
+						<div class="axis-det">
+							<div>2019-10-10 18:00:00</div>
+                            <card-name />
+                            <div class="btn-wrap-com">
+                                <button class="admin-button-com default">修改</button>
+                                <button class="admin-button-com default">明细</button>
+                                <button class="admin-button-com default">打印</button>
+                            </div>
+						</div>
+					</div>
+				</template>
+			</timeaxis-item>
+			<!-- 下单 -->
+			<timeaxis-item class="axis-list down-order" bgcolor="none">
+				<template v-slot:content>
+					<div class="axis-slot-wrap">
+						<div class="axis-title">下单</div>
+						<div class="axis-det">
+							<div>2019-10-10 18:00:00</div>
+						</div>
+					</div>
+				</template>
+			</timeaxis-item>
+		</time-axis>
+	</div>
+</template>
+
+<script>
+import TimeAxis from '@/pages/admin/components/plugin/time-axis'
+import TimeaxisItem from '@/pages/admin/components/plugin/timeaxis-item'
+import CardName from './card-name'
+export default {
+	name: 'sel-order-module',
+	components: {
+		TimeAxis,
+		TimeaxisItem,
+		CardName
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+    // 发货
+    .ship-goods {
+		.axis-slot-wrap {
+			top: -4px !important;
+		}
+		.axis-det {
+			@include disFlex(center, space-between);
+			margin-top: 50px;
+			margin-bottom: 10px;
+			.admin-button-com {
+				width: 48%;
+			}
+		}
+    }
+	// 打单
+	.print-order {
+		.axis-det {
+            margin-top: 14px;
+            & > div {
+                margin-top: 20px;
+                &:first-child {
+                    margin-top: 0;
+                }
+            }
+		}
+	}
+	// 下单
+	.down-order {
+		.axis-det {
+			margin-top: 14px;
+		}
+	}
+</style>

mobile-code/src/pages/order/admin/ship.vue

@@ -1,19 +1,153 @@
 <template>
-  <div class="app-content"></div>
+	<div class="app-content">
+		<!-- order-top -->
+		<div class="module-com order-wrap">
+			<div class="order-det">
+				<div>
+					<div class="label">订单号</div>
+					<div>201911232495</div>
+				</div>
+				<div>
+					<div class="label">下单时间</div>
+					<div>2019－10-10 20:00:00</div>
+				</div>
+				<div>
+					<div class="label">商品名称</div>
+					<div>--</div>
+				</div>
+				<div>
+					<div class="label">金额</div>
+					<div>¥390</div>
+				</div>
+			</div>
+			<div class="order-img">
+				<img src="../../../static/images/order/default.png" alt mode="widthFix" />
+			</div>
+		</div>
+		<!-- order-bottom -->
+		<div class="module-com order-axis">
+			<!-- 列表 -->
+			<!-- 选择订单 -->
+			<block v-if="showIndex == 0">
+				<sel-order />
+			</block>
+			<!-- 选择发货 -->
+			<block v-if="showIndex == 1">
+				<sel-ship />
+			</block>
+			<!-- 选择自提 -->
+			<block v-if="showIndex == 2">
+				<sel-mention />
+			</block>
+			<!-- 快递送待接单 -->
+			<block v-if="showIndex == 3">
+				<sel-pending-order />
+			</block>
+		</div>
+	</div>
 </template>
 
 <script>
-import TimeAxis from '@/pages/admin/components/plugin/time-axis'
-import TimeaxisItem from '@/pages/admin/components/plugin/timeaxis-item'
+// 选择订单
+import SelOrder from './components/sel-order'
+// 选择发货
+import SelShip from './components/sel-ship'
+// 选择自提
+import SelMention from './components/sel-mention'
+// 快递送待接单
+import SelPendingOrder from './components/sel-pending-order'
 export default {
 	name: 'admin-ship',
 	components: {
-		TimeAxis,
-		TimeaxisItem
+		SelOrder,
+		SelShip,
+		SelMention,
+		SelPendingOrder
+	},
+	data() {
+		return {
+			showIndex: 3
+		}
 	}
 }
 </script>
 
 <style lang="scss" scoped>
-
+	.app-content {
+		background-color: #fff;
+	}
+	// 公共
+	.module-com {
+		padding: 30px;
+		// margin-bottom: 20px;
+	}
+	// 订单信息
+	.order-wrap {
+		@include disFlex(center, space-between);
+		border-bottom: 20px solid $backColor;
+		.order-det {
+			font-size: 28px;
+			& > div {
+				@include disFlex(center, flex-start);
+				margin-top: 2px;
+				.label {
+					width: 140px;
+					color: $fontColor2;
+				}
+			}
+		}
+		.order-img {
+			width: 146px;
+		}
+	}
+	// 订单详情
+	.order-axis {
+		padding-top: 50px;
+		// 公共
+		/deep/.axis-list {
+			margin-bottom: 50px;
+			.axis-slot-wrap {
+				position: relative;
+				top: -14px;
+				.axis-title {
+					font-size: 30px;
+					font-weight: 600;
+				}
+			}
+			.btn-wrap-com {
+				.admin-button-com {
+					width: 120px;
+					margin-left: 20px;
+					&:first-child {
+						margin-left: 0;
+					}
+				}
+			}
+		}
+		// 首个圆点
+		/deep/.axis-first {
+			.node-big {
+				position: absolute;
+				top: 0;
+				left: -20px;
+				transform-origin: 0;
+				transform: translateX(-50%);
+				width: 32px !important;
+				height: 32px !important;
+				border-radius: 50%;
+				background: #FDC3B8;
+			}
+			.node-small {
+				position: absolute;
+				top: 8px;
+				left: 16px;
+				transform-origin: 0;
+				transform: translateX(-50%);
+				background: #f51608;
+				width: 16px !important;
+				height: 16px !important;
+				border-radius: 50%;
+			}
+		}
+	}
 </style>