update

mobile-code/src/components/plugin/tabs.vue

@@ -1,11 +1,21 @@
 <template>
 	<view class="tui-tabs-view" :class="[isFixed?'tui-tabs-fixed':'tui-tabs-relative',unlined?'tui-unlined':'']" :style="{height:height+'rpx',padding:`0 ${padding}rpx`,background:bgColor,top:isFixed?top+'px':'auto'}">
-		<view v-for="(item,index) in tabs" :key="index" class="tui-tabs-item" :class="{'border-left': borderLeft}" :style="{width:itemWidth}" @tap.stop="swichTabs(index)">
-			<view class="tui-tabs-title" :class="{'tui-tabs-active':currentTab==index,'tui-tabs-disabled':item.disabled}" :style="{color:currentTab==index?selectedColor:color,fontSize:size+'rpx',lineHeight:size+'rpx',fontWeight:bold && currentTab==index?'bold':'normal'}">{{item.name}}</view>
-			<div v-if="item.value">{{ item.value }}</div>
-		</view>
+		<div class="item-wrap" :style="{width: isAdd ? `calc(100% - ${addTabWidth + 30}rpx)` : '100%'}">
+			<view v-for="(item,index) in tabs" :key="index" class="tui-tabs-item" :class="{'border-left': borderLeft}" :style="{width:itemWidth}" @tap.stop="swichTabs(index)">
+				<view class="tui-tabs-title" :class="{'tui-tabs-active':currentTab==index,'tui-tabs-disabled':item.disabled}" :style="{fontSize:size+'rpx',lineHeight:size+'rpx',fontWeight:bold && currentTab==index?'bold':'normal'}">
+					<div class="tabs-title">{{item.name}}</div>
+					<!-- tab value -->
+					<div class="tabs-value" v-if="item.value">{{ item.value }}</div>
+				</view>
+			</view>
+		</div>
+		<!-- tab add -->
+		<div class="tabs-add" v-if="isAdd" :style="{width: `${addTabWidth}rpx`}">
+			<i class="iconfont iconxiaoxi"></i>
+			<span>添加</span>
+		</div>
 		<view class="tui-tabs-slider" :style="{transform:'translateX('+scrollLeft+'px)',width:sliderWidth+'rpx',height:
-	sliderHeight+'rpx',borderRadius:sliderRadius,bottom:bottom,background:sliderBgColor,marginBottom:bottom=='50%'?('-'+sliderHeight/2+'rpx'):0}"></view>
+	sliderHeight+'rpx',borderRadius:sliderRadius,bottom:bottom,marginBottom:bottom=='50%'?('-'+sliderHeight/2+'rpx'):0}"></view>
 	</view>
 </template>
 
@@ -70,11 +80,6 @@ export default {
 			type: Number,
 			default: 6
 		},
-		// 滑块背景颜色
-		sliderBgColor: {
-			type: String,
-			default: '#FF2842'
-		},
 		sliderRadius: {
 			type: String,
 			default: '50rpx'
@@ -94,11 +99,6 @@ export default {
 			type: String,
 			default: '#999'
 		},
-		// 选中后字体颜色
-		selectedColor: {
-			type: String,
-			default: '#FF2842'
-		},
 		// 字体大小
 		size: {
 			type: Number,
@@ -113,6 +113,11 @@ export default {
 		borderLeft: {
 			type: Boolean,
 			default: false
+		},
+		// 是否有新增按钮
+		isAdd: {
+			type: Boolean,
+			default: false
 		}
 	},
 	watch: {
@@ -134,14 +139,21 @@ export default {
 	data() {
 		return {
 			winWidth: 0,
-			scrollLeft: 0
+			scrollLeft: 0,
+			addTabWidth: 130
 		}
 	},
+	computed: {
+		// addTabWidth() {
+		// 	return uni.upx2px(130)
+		// }
+	},
 	methods: {
 		checkCor: function() {
+			let addTabWidth = this.isAdd ? uni.upx2px(this.addTabWidth + 30) : 0
 			let tabsNum = this.tabs.length
 			let padding = (this.winWidth / 750) * this.padding
-			let width = this.winWidth - padding * 2
+			let width = this.winWidth - padding * 2 - addTabWidth
 			let left = (width / tabsNum - (this.winWidth / 750) * this.sliderWidth) / 2 + padding
 			let scrollLeft = left
 			if (this.currentTab > 0) {
@@ -166,6 +178,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+	.tabs-add {
+		@include disFlex(center, center);
+		height: 60px;
+		border-left: 1px solid $borderColor;
+		padding-left: 30px;
+		.iconfont {
+			margin-right: 10px;
+		}
+	}
 	.tui-tabs-view {
 		width: 100%;
 		box-sizing: border-box;
@@ -173,7 +194,7 @@ export default {
 		align-items: center;
 		justify-content: space-between;
 		z-index: 99;
-    	box-shadow: 4px 4px 10px #eee;
+		box-shadow: 4px 4px 10px #eee;
 		.tui-tabs-item {
 			&.border-left {
 				border-left: 2px solid #ddd;
@@ -211,6 +232,13 @@ export default {
 		border-bottom: 0 !important;
 	}
 
+	.item-wrap {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
 	.tui-tabs-item {
 		display: flex;
 		align-items: center;
@@ -222,15 +250,26 @@ export default {
 	}
 
 	.tui-tabs-title {
-		display: flex;
-		align-items: center;
-		justify-content: center;
+		// display: flex;
+		// align-items: center;
+		// justify-content: center;
 		position: relative;
 		z-index: 2;
+		width: 100%;
+	}
+	.tabs-title {
+		text-align: center;
+	}
+	.tabs-value {
+		// @include disFlex(center, center);
+		font-size: 24px;
+		text-align: center;
+		margin-top: 6px;
 	}
 
 	.tui-tabs-active {
 		transition: all 0.15s ease-in-out;
+		color: $mainColor;
 	}
 
 	.tui-tabs-slider {
@@ -239,5 +278,6 @@ export default {
 		transition: all 0.15s ease-in-out;
 		z-index: 0;
 		transform: translateZ(0);
+		background: $mainColor;
 	}
 </style>

mobile-code/src/pages.json

@@ -34,12 +34,12 @@
 	],
 	"subPackages": [
 		{
-			"root": "pages/user",
+			"root": "pages/order",
 			"pages": [
 				{
-					"path": "register",
+					"path": "manage/detail",
 					"style": {
-						"navigationBarTitleText": "注册"
+						"navigationBarTitleText": "详情"
 					}
 				}
 			]

mobile-code/src/pages/admin/components/plugin/time-axis.vue

@@ -0,0 +1,38 @@
+<template>
+	<view class="tui-timeaxis-class tui-time-axis">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"tuiTimeAxis",
+		data() {
+			return {
+
+			};
+		}
+	}
+</script>
+
+<style>
+	.tui-time-axis {
+		padding-left: 20px;
+		box-sizing: border-box;
+		position: relative;
+	}
+
+	.tui-time-axis::before {
+		content: " ";
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 1px;
+		bottom: 0;
+		border-left: 1px solid #ddd;
+		-webkit-transform-origin: 0 0;
+		transform-origin: 0 0;
+		-webkit-transform: scaleX(0.5);
+		transform: scaleX(0.5);
+	}
+</style>

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

@@ -0,0 +1,52 @@
+<template>
+	<view class="timeaxis-item-class tui-timeaxis-item">
+		<slot name="content"></slot>
+		<view class="tui-node" :style="{background:bgcolor}">
+			<slot name="node"></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tuiTimeaxisItem",
+		props: {
+			//节点背景色
+			bgcolor: {
+				type: String,
+				default: "#fafafa"
+			}
+		},
+		data() {
+			return {
+
+			};
+		}
+	}
+</script>
+
+<style>
+	.tui-timeaxis-item {
+		position: relative;
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		flex-direction: column;
+		margin-bottom: 25px;
+	}
+
+	.tui-node {
+		position: absolute;
+		top: 0;
+		left: -20px;
+		/* padding: 3px 0; */
+		transform-origin: 0;
+		transform: translateX(-50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 99;
+		background: #fafafa;
+		font-size: 24upx;
+	}
+</style>

mobile-code/src/pages/admin/member.vue

@@ -1,12 +1,54 @@
 <template>
-	<div class="app-main app-content"></div>
+	<div class="app-main app-content">
+		<app-tabs :tabs="tabs" :isFixed="true" :isAdd="true" :currentTab="tabIndex" :height="100" @change="change" itemWidth="33.33%" />
+
+    </div>
 </template>
 
 <script>
+import appTabs from '@/components/plugin/tabs'
 export default {
-	name: 'admin-memebr'
+	name: 'admin-memebr',
+	components: {
+		appTabs
+	},
+	data() {
+		return {
+			tabIndex: 0,
+			tabs: [
+				{
+					name: '全部',
+					value: 212
+				},
+				{
+					name: '粉丝',
+					value: 213
+				},
+				{
+					name: '会员',
+					value: 214
+				}
+			]
+		}
+	},
+	methods: {
+		change(e) {
+			this.tabIndex = e.index
+		}
+	}
 }
 </script>
 
 <style lang="scss" scoped>
+.tabs-wrap {
+    position: fixed;
+    .tabs-left {
+        width: 80%;
+    }
+    .tabs-right {
+        width: 19%;
+        border-left: $borderColor;
+        @include disFlex(center, center);
+    }
+}
 </style>

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

@@ -1,7 +1,7 @@
 <template>
 	<div class="app-main app-content">
-		<app-tabs :tabs="tabs" :isFixed="true" :currentTab="tabIndex" @change="change" itemWidth="20%" />
-		<!-- <div class="list-wrap" v-for="(item, index) in 4" :key="index" @click="$util.pageTo('/pages/order/detail')">
+		<app-tabs :tabs="tabs" :isFixed="true" :currentTab="tabIndex" :height="100" @change="change" itemWidth="20%" />
+		<div class="list-wrap" v-for="(item, index) in 4" :key="index" @click="$util.pageTo('/pages/order/manage/detail')">
 			<div class="list-top flex-center-between">
 				<div class="app-color-3">订单编号：3261515151</div>
 				<div class="app-price">等待支付</div>
@@ -9,14 +9,17 @@
 			<div class="list-blo">
 				<list-module v-for="(item, subIndex) in 2" :key="subIndex" />
 			</div>
-			<div class="list-bottom flex-center-between">
+			<div class="list-bottom">
 				<div>
+					<span class="freight-text">运费：￥50</span>
 					<span>应付金额：</span>
 					<span class="app-size-30 app-bold">¥580.00</span>
 				</div>
-				<button class="button-com red">立即付款</button>
+				<div class="list-button">
+					<div class="admin-button-com default">发货管理</div>
+				</div>
 			</div>
-		</div> -->
+		</div>
 	</div>
 </template>
 
@@ -76,7 +79,7 @@ export default {
 
 <style lang="scss" scoped>
 	.app-content {
-		padding-top: 20px;
+		padding-top: 120px;
 		padding-bottom: 1px;
 		.list-wrap {
 			padding: 0 30px;
@@ -84,11 +87,22 @@ export default {
 			margin-bottom: 20px;
 			.list-top,
 			.list-bottom {
-				padding: 20px 0;
+				padding: 26px 0;
 				border-bottom: 1px solid $borderColor;
-				.button-com {
-					padding-top: 15px;
-					padding-bottom: 15px;
+				color: $fontColor3;
+				.app-bold {
+					color: #333;
+				}
+				.freight-text {
+					margin-right: 60px;
+				}
+			}
+			.list-bottom {
+				& > div {
+					@include disFlex(center, flex-end);
+				}
+				.list-button {
+					margin-top: 26px;
 				}
 			}
 		}

mobile-code/src/pages/order/detail.vue

@@ -100,7 +100,7 @@
 				<button class="button-com red">立即支付</button>
 			</template>
 			<template v-else>
-				<button class="button-com default">填写收花地址</button>
+				<button class="button-com">填写收花地址</button>
 			</template>
 		</div>
 	</div>

mobile-code/src/pages/order/manage/detail.vue

@@ -0,0 +1,232 @@
+<template>
+	<div class="app-content">
+		<div class="page-top">
+			<div class="page-top-img">
+				<img src="../../../static/images/order/bg.png" alt />
+			</div>
+			<div class="page-top-det">
+				<div>
+					<div class="page-status">待配送</div>
+					<!-- <div class="page-prompt">请尽快支付哟~</div> -->
+				</div>
+				<div class="page-status-img">
+					<img src="../../../static/images/order/wait-delivery.png" alt />
+				</div>
+			</div>
+		</div>
+		<!-- 订单详情 -->
+		<div class="page-det">
+			<!-- 商品信息 -->
+			<div class="module-com">
+				<div class="module-tit">商品信息</div>
+				<div class="module-det">
+					<list-module v-for="(item, subIndex) in 2" :key="subIndex" />
+				</div>
+			</div>
+			<!-- 订单信息 -->
+			<div class="module-com order-msg">
+				<div class="module-tit">订单信息</div>
+				<div class="module-det">
+					<!--  -->
+					<div class="order-msg-blo">
+						<div class="msg-list">
+							<div class="label">收花人</div>
+							<div class="value">叶落西风</div>
+						</div>
+						<div class="msg-list">
+							<div class="label">电话</div>
+							<div class="value">叶落西风</div>
+						</div>
+						<div class="msg-list">
+							<div class="label">地址</div>
+							<div class="value">海路36号（福建省厦门市软件园二期 望海路36号403室）</div>
+						</div>
+					</div>
+					<!--  -->
+					<div class="order-msg-blo">
+						<div class="msg-list">
+							<div class="label">送达时间</div>
+							<div class="value">叶落西风</div>
+						</div>
+						<div class="msg-list">
+							<div class="label">贺卡</div>
+							<div class="value">叶落西风</div>
+						</div>
+						<div class="msg-list">
+							<div class="label">地址</div>
+							<div class="value">叶落西风</div>
+						</div>
+					</div>
+					<!--  -->
+					<div class="order-msg-blo">
+						<div class="msg-list">
+							<div class="label">订花人</div>
+							<div class="value">叶落西风</div>
+						</div>
+						<div class="msg-list">
+							<div class="label">微信</div>
+							<div class="value">叶落西风</div>
+						</div>
+						<div class="msg-list">
+							<div class="label">手机</div>
+							<div class="value">15606970212</div>
+						</div>
+					</div>
+					<!--  -->
+					<div class="order-msg-blo">
+						<div class="msg-list">
+							<div class="label">客户评分</div>
+							<div class="value">叶落西风</div>
+						</div>
+						<div class="msg-list">
+							<div class="label">客户留言</div>
+							<div class="value">爱豆很喜欢花很漂亮，如果下次可以送 的再快一点就完美了~</div>
+						</div>
+					</div>
+					<!--  -->
+					<div class="order-msg-blo">
+						<div class="msg-list">
+							<div class="label">订单号</div>
+							<div class="value">叶落西风</div>
+						</div>
+						<div class="msg-list">
+							<div class="label">时间</div>
+							<div class="value">叶落西风</div>
+						</div>
+						<div class="msg-list">
+							<div class="label">总价</div>
+							<div class="value">叶落西风</div>
+						</div>
+						<div class="msg-list">
+							<div class="label">运费</div>
+							<div class="value">￥10</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<!-- 优惠信息 -->
+			<div class="module-com coupon-wrap">
+				<div class="module-det flex-center-between">
+					<div class="app-color-3">使用优惠券</div>
+					<div class="app-price">-￥10</div>
+				</div>
+			</div>
+		</div>
+		<!-- 按钮 -->
+		<div class="page-btn app-footer">
+			<div class="flex-center">
+				<span>应付款</span>
+				<span class="app-price">
+					<span>￥</span>
+					<span class="app-size-40">580</span>
+					<span>.00</span>
+				</span>
+			</div>
+			<template v-if="false">
+				<button class="button-com red">立即支付</button>
+			</template>
+			<template v-else>
+				<button class="admin-button-com big">发货管理</button>
+			</template>
+		</div>
+	</div>
+</template>
+
+<script>
+import listModule from '@/components/module/app-order-list'
+import appCoupon from '@/components/app-coupon-sel'
+export default {
+	name: 'order-detail',
+	components: {
+		listModule,
+		appCoupon
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.app-content {
+		padding-bottom: 80px;
+	}
+	.page-top {
+		position: relative;
+		.page-top-det {
+			position: absolute;
+			top: 22px;
+			@include disFlex(center, space-between);
+			width: 84%;
+			padding: 0 48px;
+			color: #fff;
+			.page-status {
+				font-size: 36px;
+				font-weight: bold;
+				margin-bottom: 16px;
+			}
+			.page-prompt {
+				color: #ffdede;
+			}
+			.page-status-img {
+				width: 180px;
+			}
+		}
+	}
+	.page-det {
+		width: 94%;
+		margin: 0 auto;
+		position: relative;
+		top: -40px;
+		.order-msg {
+			.order-msg-blo {
+				font-size: 28px;
+				padding: 20px 0;
+				border-top: 1px solid $borderColor;
+				.msg-list {
+					@include disFlex(flex-start, space-between);
+					margin: 8px 0;
+					.label {
+						width: 40%;
+						color: $fontColor3;
+					}
+				}
+			}
+			& .order-msg-blo:first-child {
+				border-top: none;
+			}
+		}
+		.coupon-wrap {
+			.module-det {
+				padding: 20px 0;
+			}
+		}
+	}
+	// 底部按钮
+	.page-btn {
+		width: calc(100% - 60px);
+		@include disFlex(center, space-between);
+		padding: 0 30px;
+		.app-price {
+			margin-bottom: 8px;
+			margin-left: 4px;
+		}
+		.red {
+			width: 270px;
+		}
+		.default {
+			width: 260px;
+		}
+	}
+	// 公共模块
+	.module-com {
+		border-radius: 10px;
+		background-color: #fff;
+		padding: 0 20px;
+		box-shadow: 0px 6px 16px #ddd;
+		margin-bottom: 20px;
+		.module-tit {
+			padding: 20px 0;
+			font-size: 28px;
+			font-weight: 600;
+			border-bottom: 1px solid $borderColor;
+		}
+	}
+</style>

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

@@ -0,0 +1,19 @@
+<template>
+  <div class="app-content"></div>
+</template>
+
+<script>
+import TimeAxis from '@/pages/admin/components/plugin/time-axis'
+import TimeaxisItem from '@/pages/admin/components/plugin/timeaxis-item'
+export default {
+	name: 'admin-ship',
+	components: {
+		TimeAxis,
+		TimeaxisItem
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

mobile-code/src/static/css/base.scss

@@ -119,7 +119,7 @@
 
 // 金额
 .app-price {
-	color: $mainColor;
+	color: #FF2842;
 }
 
 .app-bold {

mobile-code/src/static/css/common.scss

@@ -55,6 +55,10 @@ body {
     text-align: center;
     line-height: 1;
     margin: 0;
+    &:active {
+        color: rgb(245, 63, 85);
+        border-color: rgb(245, 63, 85);
+    }
 }
 .button-com.big {
     padding-top: 30px;
@@ -82,6 +86,42 @@ body {
         background-color: #f5f5f5;
     }
 }
+// ============ 后台 =============
+.admin-button-com {
+    display: inline-block;
+    color: $mainColor;
+    font-size: 26px;
+    padding: 10px 20px;
+    background-color: #fff;
+    border-radius: 8px;
+    border: 1px solid $mainColor;
+    text-align: center;
+    line-height: 1;
+    margin: 0;
+    &:active {
+        color: #3876d4;
+        border-color: #3876d4;
+    }
+}
+.admin-button-com.big {
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+.admin-button-com.blue {
+    color: #fff;
+    background-color: $mainColor;
+    &:active {
+        background-color: #3876d4;
+    }
+}
+
+.admin-button-com.default {
+    color: $fontColor2;
+    border-color: #dddddd;
+    &:active {
+        background-color: #f5f5f5;
+    }
+}
 
 // 带统计字数文本域
 .textarea_wrap {