diff --git a/.env b/.env
index e974190..490e653 100644
--- a/.env
+++ b/.env
@@ -1,7 +1,7 @@
 # ******************** start 开发环境 start ********************
 
-# VITE_APP_DEV_SERVICE =http://localhost:48080/app-api
-VITE_APP_DEV_SERVICE =http://123.156.228.134:48080/app-api
+VITE_APP_DEV_SERVICE =http://localhost:48080/app-api
+# VITE_APP_DEV_SERVICE =http://123.156.228.134:48080/app-api
 
 # ******************** end 开发环境 end ********************
  
diff --git a/src/pages.json b/src/pages.json
index a350897..75b5cfc 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -87,6 +87,32 @@
 				}
 			]
 		},
+		{
+			"root": "pages/boxes",
+			"pages": [
+				{
+					"path": "apply",
+					"style": {
+						"navigationBarTitleText": "",
+						"disableScroll": true
+					}
+				},
+				{
+					"path": "detail",
+					"style": {
+						"navigationBarTitleText": "",
+						"disableScroll": true
+					}
+				},
+				{
+					"path": "list",
+					"style": {
+						"navigationBarTitleText": "",
+						"disableScroll": true
+					}
+				}
+			]
+		},
 		{
 			"root": "pages/merchant",
 			"pages": [
diff --git a/src/pages/apply/foreign-items.vue b/src/pages/apply/foreign-items.vue
index e35d08a..17c6731 100644
--- a/src/pages/apply/foreign-items.vue
+++ b/src/pages/apply/foreign-items.vue
@@ -26,7 +26,9 @@ onLoad((options: any) => {
     }
 });
 onShow(() => {
-
+    if (pageRef.value) {
+        pageRef.value.reload(false)
+    }
 })
 
 </script>
diff --git a/src/pages/boxes/apply.vue b/src/pages/boxes/apply.vue
new file mode 100644
index 0000000..f80ddd7
--- /dev/null
+++ b/src/pages/boxes/apply.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { onLoad, onShow } from "@dcloudio/uni-app";
+
+import { hooks } from "@@/index"
+import { foodApi } from "@@/api"
+
+const data = {
+
+}
+const state = reactive<any>({
+    pa: {
+        status: 1,
+    },
+})
+
+onLoad(() => {
+
+});
+onShow(() => {
+
+})
+
+</script>
+
+
+<template>
+    <crud-layout title="预定" bg="/static/page/blue-bg.png">
+
+    </crud-layout>
+</template>
+
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/pages/boxes/detail.vue b/src/pages/boxes/detail.vue
new file mode 100644
index 0000000..7d335a5
--- /dev/null
+++ b/src/pages/boxes/detail.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { onLoad, onShow } from "@dcloudio/uni-app";
+import { isEmpty } from "radash"
+
+import { hooks, router } from "@@/index"
+import { boxesApi } from "@@/api"
+
+import zSwiper from "@zebra-ui/swiper/components/z-swiper/z-swiper.vue"
+import zSwiperItem from "@zebra-ui/swiper/components/z-swiper-item/z-swiper-item.vue"
+
+const data = {
+
+}
+const state = reactive<any>({
+    detailId: null,
+    detail: {},
+})
+
+onLoad((options: any) => {
+    if (!isEmpty(options.id)) {
+        state.detailId = options.id
+    }
+});
+onShow(() => {
+    getDetail()
+})
+
+const getDetail = async () => {
+    const _pa = { id: state.detailId }
+    const { data } = await boxesApi.detail(_pa)
+    state.detail = data
+    state.detail.imagesArray = data.images?.split(",")
+}
+
+const doSubmit = () => {
+    router.jump('/pages/boxes/apply', { id: state.detail.id })
+}
+
+</script>
+
+
+<template>
+    <crud-layout title="" tabBarType="just-flot-back" bg="/static/page/blue-bg.png">
+        <z-swiper>
+            <z-swiper-item v-for="(v, i) in state.detail.imagesArray" :key="i">
+                <image class="w-100vw" :src="v" mode="widthFix" />
+            </z-swiper-item>
+        </z-swiper>
+        <view class="p-x-15rpx">
+            <view class="flex-col justify-between card p-y-20rpx p-x-30rpx">
+                <view class="flex-row items-center justify-between">
+                    <view class="flex-row items-center">
+                        <view class="second-text-46 color-#f63a36!">¥{{ state.detail.price }}</view>
+                    </view>
+                    <view class="second-text-26">可容纳{{ state.detail.capacity }}</view>
+                </view>
+                <view class="flex-col m-t-15rpx">
+                    <view class="sub-text-32">{{ state.detail.name }}</view>
+                </view>
+            </view>
+            <view class="h-15rpx" />
+            <view class="flex-col justify-between card p-y-20rpx p-x-30rpx">
+                <view class="prefix_title">详情</view>
+                <view class="m-t-15rpx" v-html="state.detail.description"></view>
+            </view>
+        </view>
+        <template #main-bottom>
+            <view class="bg-#0094ff p-y-20rpx text-center rounded-40rpx m-x-60rpx m-t-60rpx sub-text-30 color-white!"
+                @tap="doSubmit">
+                预定
+            </view>
+            <view class="h-30rpx" />
+        </template>
+    </crud-layout>
+</template>
+
+<style lang="scss" scoped>
+:deep() {
+    .layout_main>scroll-view {
+        padding: 0 !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/boxes/list.vue b/src/pages/boxes/list.vue
new file mode 100644
index 0000000..bb94ddd
--- /dev/null
+++ b/src/pages/boxes/list.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { onLoad, onShow } from "@dcloudio/uni-app";
+import { isEmpty } from "radash"
+
+import { hooks, router } from "@@/index"
+import { boxesApi } from "@@/api"
+
+import zTabs from "@@/components/other/z-tabs/z-tabs.vue"
+import CustomWaterfallsFlow from "@@/components/other/custom-waterfalls-flow/custom-waterfalls-flow.vue"
+
+const data = {
+    tabs: [
+        { id: null, name: '全部', disabled: false },
+        { id: 0, name: '空闲', disabled: false },
+        { id: 1, name: '部分空闲', disabled: false },
+        { id: 2, name: '已满', disabled: false },
+    ],
+}
+
+const state = reactive<any>({
+    detailId: null,
+    pa: {
+        status: data.tabs[0].id,
+    },
+})
+
+const pageRef = ref<any>(null)
+const pageHook = hooks.usePage(pageRef, boxesApi.page, null, 'data.list')
+const query = (page: number, pagesize: number) => {
+    pageHook.startPage(page, pagesize, false, state.pa);
+}
+
+onLoad((options: any) => {
+    if (!isEmpty(options.id)) {
+        state.detailId = options.id
+        state.pa.merchantId = options.id
+    }
+});
+onShow(() => {
+    if (pageRef.value) {
+        pageRef.value.reload(false)
+    }
+})
+
+const doTab = (e: any) => {
+    const target = data.tabs[e];
+    state.pa.status = target.id
+    pageRef.value.reload(true)
+}
+
+const doCard = (v: any) => {
+    router.jump('/pages/boxes/detail', { id: v.id })
+}
+
+</script>
+
+
+<template>
+    <crud-layout title="包厢预定" bg="/static/page/blue-bg.png">
+        <z-paging ref="pageRef" height="100%" :fixed="false" v-model="pageHook.list" :default-page-size="5"
+            safe-area-inset-bottom :loading-more-enabled="true" :show-scrollbar="false" @query="query"
+            :auto-clean-list-when-reload="false" :auto-scroll-to-top-when-reload="false" @scroll="pageHook.scroll">
+            <template #top>
+                <view class="bg-white rounded-16rpx px-20rpx m-x-10rpx m-t-15rpx">
+                    <z-tabs :list="data.tabs" @change="doTab" />
+                </view>
+            </template>
+            <view class="h-20rpx" />
+            <custom-waterfalls-flow v-model="pageHook.list" imageKey="images" :columnSpace="1" @wapperClick="doCard"
+                @imageClick="doCard">
+                <template v-slot:default="v">
+                    <view class="p-x-15rpx p-t-10rpx p-b-20rpx">
+                        <view class="sub-text-28 show-line">{{ v.name }}</view>
+                        <view class="m-t-10rpx flex-row items-center">
+                            <view class="second-text-32 color-#f63a36!">
+                                ¥{{ v.price }}
+                            </view>
+                        </view>
+                        <view class="flex-row items-center m-t-10rpx">
+                            <view class="second-text-26">可容纳{{ v.capacity }}人</view>
+                            <view class="w-1px h-20rpx m-x-5rpx bg-#999" />
+                            <view class="flex-row-center">
+                                <tm-tag v-if="v.status == 0" size="xs" color="success">
+                                    {{ hooks.useEnum("boxesBxStatusEnum", v.status.toString()) }}
+                                </tm-tag>
+                                <tm-tag v-if="v.status == 1" size="xs">
+                                    {{ hooks.useEnum("boxesBxStatusEnum", v.status) }}
+                                </tm-tag>
+                                <tm-tag v-if="v.status == 2" size="xs" color="error">
+                                    {{ hooks.useEnum("boxesBxStatusEnum", v.status) }}
+                                </tm-tag>
+                            </view>
+                        </view>
+                        <view class="flex-row items-center m-t-10rpx">
+                            <view class="second-text-26">{{ v.address }}</view>
+                        </view>
+                    </view>
+                </template>
+            </custom-waterfalls-flow>
+        </z-paging>
+    </crud-layout>
+</template>
+
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/pages/merchant/detail.vue b/src/pages/merchant/detail.vue
index 7a0bac0..d5bbf3d 100644
--- a/src/pages/merchant/detail.vue
+++ b/src/pages/merchant/detail.vue
@@ -50,7 +50,6 @@ const getDetail = async () => {
 const getShopCar = async () => {
     const _pa = { merchantId: state.detailId }
     const { data } = await foodApi.getShopCar(_pa)
-    console.log(data, "data");
 
     state.carList = data ?? []
     state.totPrice = state.carList
@@ -239,7 +238,8 @@ const doFood = () => {
                             <text class="m-l-20rpx sub-text-30">联系食堂</text>
                         </view>
                         <view class="w-1px h-30rpx bg-#c4c4c4" />
-                        <view class="flex-row-center">
+                        <view class="flex-row-center"
+                            @tap.stop="router.jump('/pages/boxes/list', { id: state.detailId })">
                             <view class="flex-row-center w-50rpx h-50rpx bg-#167aff rounded-full">
                                 <text class="font-size-28rpx! color-white iconfont icon-yuding" />
                             </view>
diff --git a/src/pages/merchant/food.vue b/src/pages/merchant/food.vue
index 1508353..611f7a1 100644
--- a/src/pages/merchant/food.vue
+++ b/src/pages/merchant/food.vue
@@ -107,7 +107,7 @@ const doProduct = (v: any) => {
             </template>
             <view class="h-20rpx" />
             <view class="m-x-10rpx">
-                <custom-waterfalls-flow :value="pageHook.list" imageKey="picUrl" :columnSpace="1"
+                <custom-waterfalls-flow v-model="pageHook.list" imageKey="picUrl" :columnSpace="1"
                     @wapperClick="doProduct" @imageClick="doProduct">
                     <template v-slot:default="v">
                         <view class="p-x-15rpx p-y-25rpx">
diff --git a/src/sheep/api/boxes.ts b/src/sheep/api/boxes.ts
new file mode 100644
index 0000000..c221676
--- /dev/null
+++ b/src/sheep/api/boxes.ts
@@ -0,0 +1,49 @@
+import request from "@/sheep/utils/request";
+
+export default {
+  page: (params: any) =>
+    request({
+      url: "boxes/info/api/page",
+      method: "GET",
+      params,
+      custom: {
+        showLoading: false,
+      },
+    }),
+  detail: (params: any) =>
+    request({
+      url: "boxes/info/api/getInfo",
+      method: "GET",
+      params,
+      custom: {
+        showLoading: false,
+      },
+    }),
+  apply: (data: any) =>
+    request({
+      url: "boxes/info/api/create",
+      method: "POST",
+      data,
+      custom: {
+        showLoading: false,
+      },
+    }),
+  cancel: (data: any) =>
+    request({
+      url: "boxes/info/api/cancel",
+      method: "GET",
+      data,
+      custom: {
+        showLoading: false,
+      },
+    }),
+  MyBookingPage: (data: any) =>
+    request({
+      url: "boxes/info/api/getMyBookingPage",
+      method: "GET",
+      data,
+      custom: {
+        showLoading: false,
+      },
+    }),
+};
diff --git a/src/sheep/api/index.ts b/src/sheep/api/index.ts
index a36c3e0..8101071 100644
--- a/src/sheep/api/index.ts
+++ b/src/sheep/api/index.ts
@@ -1,5 +1,7 @@
 export { default as applyApi } from "./apply";
 
+export { default as boxesApi } from "./boxes";
+
 export { default as commonApi } from "./common";
 
 export { default as foodApi } from "./food";
diff --git a/src/sheep/components/other/custom-waterfalls-flow/custom-waterfalls-flow.vue b/src/sheep/components/other/custom-waterfalls-flow/custom-waterfalls-flow.vue
index a22e2a6..27b8eec 100644
--- a/src/sheep/components/other/custom-waterfalls-flow/custom-waterfalls-flow.vue
+++ b/src/sheep/components/other/custom-waterfalls-flow/custom-waterfalls-flow.vue
@@ -43,7 +43,7 @@
 <script>
 export default {
 	props: {
-		value: Array,
+		modelValue: Array,
 		column: { // 列的数量 
 			type: [String, Number],
 			default: 2
@@ -75,7 +75,7 @@ export default {
 	data() {
 		return {
 			data: {
-				list: this.value ? this.value : [],
+				list: this.modelValue ? this.modelValue : [],
 				column: this.column < 2 ? 2 : this.column,
 				columnSpace: this.columnSpace <= 5 ? this.columnSpace : 5,
 				imageKey: this.imageKey,
@@ -144,14 +144,14 @@ export default {
 		// 刷新
 		refresh() {
 			if (!this.isLoaded) {
-				this.refreshDatas = this.value;
+				this.refreshDatas = this.modelValue;
 				return false;
 			};
 			setTimeout(() => {
 				this.refreshDatas = [];
 				this.isRefresh = true;
 				this.adds = [];
-				this.data.list = this.value ? this.value : [];
+				this.data.list = this.modelValue ? this.modelValue : [];
 				this.data.column = this.column < 2 ? 2 : this.column >= this.maxColumn ? this.maxColumn : this.column;
 				this.data.columnSpace = this.columnSpace <= 5 ? this.columnSpace : 5;
 				this.data.imageKey = this.imageKey;
@@ -265,7 +265,7 @@ export default {
 		}
 	},
 	watch: {
-		value: {
+		modelValue: {
 			deep: true,
 			handler(newValue, oldValue) {
 				setTimeout(() => {
diff --git a/src/sheep/components/other/z-tabs/z-tabs.vue b/src/sheep/components/other/z-tabs/z-tabs.vue
index a18a479..a324a35 100644
--- a/src/sheep/components/other/z-tabs/z-tabs.vue
+++ b/src/sheep/components/other/z-tabs/z-tabs.vue
@@ -4,733 +4,743 @@
 <!-- 反馈QQ群：790460711 -->
 
 <template name="z-tabs">
-	<view class="z-tabs-conatiner" :style="[{background:bgColor}, tabsStyle]">
+	<view class="z-tabs-conatiner" :style="[{ background: bgColor }, tabsStyle]">
 		<view class="z-tabs-left">
 			<slot name="left" />
 		</view>
 		<view ref="z-tabs-scroll-view-conatiner" class="z-tabs-scroll-view-conatiner">
-			<scroll-view ref="z-tabs-scroll-view" class="z-tabs-scroll-view" :scroll-x="true" :scroll-left="scrollLeft" :show-scrollbar="false" :scroll-with-animation="isFirstLoaded" @scroll="scroll">
+			<scroll-view ref="z-tabs-scroll-view" class="z-tabs-scroll-view" :scroll-x="true" :scroll-left="scrollLeft"
+				:show-scrollbar="false" :scroll-with-animation="isFirstLoaded" @scroll="scroll">
 				<view class="z-tabs-list-container" :style="[tabsListStyle]">
-					<view class="z-tabs-list" :style="[tabsListStyle, {marginTop: -finalBottomSpace+'px'}]">
-						<view :ref="`z-tabs-item-${index}`" :id="`z-tabs-item-${index}`" class="z-tabs-item" :style="[tabStyle]" v-for="(item,index) in list" :key="index" @click="tabsClick(index,item)">
+					<view class="z-tabs-list" :style="[tabsListStyle, { marginTop: -finalBottomSpace + 'px' }]">
+						<view :ref="`z-tabs-item-${index}`" :id="`z-tabs-item-${index}`" class="z-tabs-item"
+							:style="[tabStyle]" v-for="(item, index) in list" :key="index"
+							@click="tabsClick(index, item)">
 							<view class="z-tabs-item-title-container">
-								<text :class="{'z-tabs-item-title':true,'z-tabs-item-title-disabled':item.disabled}" 
-									:style="[{color:item.disabled?disabledColor:(currentIndex===index?activeColor:inactiveColor)},item.disabled?disabledStyle:(currentIndex===index?activeStyle:inactiveStyle)]">
-									{{item[nameKey]||item}}
+								<text
+									:class="{ 'z-tabs-item-title': true, 'z-tabs-item-title-disabled': item.disabled }"
+									:style="[{ color: item.disabled ? disabledColor : (currentIndex === index ? activeColor : inactiveColor) }, item.disabled ? disabledStyle : (currentIndex === index ? activeStyle : inactiveStyle)]">
+									{{ item[nameKey] || item }}
 								</text>
-								<text v-if="item.badge&&_formatCount(item.badge.count).length" class="z-tabs-item-badge" :style="[badgeStyle]">{{_formatCount(item.badge.count)}}</text>
+								<text v-if="item.badge && _formatCount(item.badge.count).length"
+									class="z-tabs-item-badge" :style="[badgeStyle]">{{ _formatCount(item.badge.count)
+									}}</text>
 							</view>
 						</view>
 					</view>
-					<view class="z-tabs-bottom" :style="[{width: tabsContainerWidth+'px', bottom: finalBottomSpace+'px'}]">
-						<view ref="z-tabs-bottom-dot" class="z-tabs-bottom-dot"
-						<!-- #ifndef APP-NVUE -->
-						:style="[{transform:`translateX(${bottomDotX}px)`,transition:dotTransition,background:activeColor},finalDotStyle]"
-						<!-- #endif -->
-						<!-- #ifdef APP-NVUE -->
-						:style="[{background:activeColor},finalDotStyle]"
-						<!-- #endif -->
-						/>
-					</view>	
-				</view>
+					<view class="z-tabs-bottom"
+						:style="[{ width: tabsContainerWidth + 'px', bottom: finalBottomSpace + 'px' }]">
+						<view ref="z-tabs-bottom-dot" class="z-tabs-bottom-dot" <!-- #ifndef APP-NVUE -->
+							:style="[{transform:`translateX(${bottomDotX}px)`,transition:dotTransition,background:activeColor},finalDotStyle]"
+							<!-- #endif -->
+							<!-- #ifdef APP-NVUE -->
+							:style="[{background:activeColor},finalDotStyle]"
+							<!-- #endif -->
+							/>
+						</view>
+					</view>
 			</scroll-view>
 		</view>
 		<view class="z-tabs-right">
 			<slot name="right" />
 		</view>
-		
+
 	</view>
 </template>
 
 <script>
-	// #ifdef APP-NVUE
-	const weexDom = weex.requireModule('dom');
-	const weexAnimation = weex.requireModule('animation');
-	// #endif
-	import zTabsConfig from './config/index'
-	
-	//获取默认配置信息
-	function _gc(key, defaultValue) {
-		let config = null;
-		if (zTabsConfig && Object.keys(zTabsConfig).length) {
-			config = zTabsConfig;
-		} else {
-			return defaultValue;
+// #ifdef APP-NVUE
+const weexDom = weex.requireModule('dom');
+const weexAnimation = weex.requireModule('animation');
+// #endif
+import zTabsConfig from './config/index'
+
+//获取默认配置信息
+function _gc(key, defaultValue) {
+	let config = null;
+	if (zTabsConfig && Object.keys(zTabsConfig).length) {
+		config = zTabsConfig;
+	} else {
+		return defaultValue;
+	}
+	const value = config[_toKebab(key)];
+	return value === undefined ? defaultValue : value;
+}
+//驼峰转短横线
+function _toKebab(value) {
+	return value.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+
+/**
+ * z-tabs 标签
+ * @description 一个简单轻量的tabs标签，全平台兼容，支持nvue、vue3
+ * @tutorial https://ext.dcloud.net.cn/plugin?name=z-tabs
+ * @property {Array} list 数据源数组，支持形如['tab1','tab2']的格式或[{name:'tab1',value:1}]的格式
+ * @property {Number|String} current 当前选中的index，默认为0
+ * @property {Number|String} scroll-count list数组长度超过scrollCount时滚动显示(不自动铺满全屏)，默认为5
+ * @property {Number|String} tab-width 自定义每个tab的宽度，默认为0，即代表根据内容自动撑开，单位rpx，支持传100、"100px"或"100rpx"
+ * @property {Number|String} bar-width 滑块宽度，单位rpx，支持传100、"100px"或"100rpx"
+ * @property {Number|String} bar-height 滑块高度，单位rpx，支持传100、"100px"或"100rpx"
+ * @property {Object} bar-style 滑块样式，其中的width和height将被bar-width和bar-height覆盖
+ * @property {Number|String} bottom-space tabs与底部的间距，单位rpx，支持传100、"100px"或"100rpx"
+ * @property {String} bar-animate-mode 切换tab时滑块动画模式，与swiper联动时有效，点击切换tab时无效，必须调用setDx。默认为line，即切换tab时滑块宽度保持不变，线性运动。可选值为worm，即为类似毛毛虫蠕动效果
+ * @property {String} name-key list中item的name(标题)的key，默认为name
+ * @property {String} value-key list中item的value的key，默认为value
+ * @property {String} active-color 激活状态tab的颜色
+ * @property {String} inactive-color 未激活状态tab的颜色
+ * @property {String} disabled-color 禁用状态tab的颜色
+ * @property {Object} active-style 激活状态tab的样式
+ * @property {Object} inactive-style 未激活状态tab的样式
+ * @property {Object} disabled-style 禁用状态tab的样式
+ * @property {Number|String} badge-max-count 徽标数最大数字限制，超过这个数字将变成badge-max-count+，默认为99
+ * @property {Object} badge-style 徽标样式，例如可自定义背景色，字体等等
+ * @property {String} bg-color z-tabs背景色
+ * @property {Object} tabs-style z-tabs样式
+ * @property {Boolean} init-trigger-change 初始化时是否自动触发change事件
+ * @event {Function(index,value)} change tabs改变时触发，index:当前切换到的index；value:当前切换到的value
+ * @example <z-tabs :list="list"></z-tabs>
+ */
+export default {
+	name: 'z-tabs',
+	data() {
+		return {
+			currentIndex: 0,
+			currentSwiperIndex: 0,
+			bottomDotX: -1,
+			bottomDotXForIndex: 0,
+			showBottomDot: false,
+			shouldSetDx: true,
+
+			barCalcedWidth: 0,
+			pxBarWidth: 0,
+			scrollLeft: 0,
+			tabsSuperWidth: uni.upx2px(750),
+			tabsWidth: uni.upx2px(750),
+			tabsHeight: uni.upx2px(80),
+			tabsLeft: 0,
+			tabsContainerWidth: 0,
+			itemNodeInfos: [],
+			isFirstLoaded: false,
+			currentScrollLeft: 0,
+			changeTriggerFailed: false,
+			currentChanged: false
+		};
+	},
+	props: {
+		//数据源数组，支持形如['tab1','tab2']的格式或[{name:'tab1',value:1}]的格式
+		list: {
+			type: Array,
+			default: function () {
+				return [];
+			}
+		},
+		//当前选中的index
+		current: {
+			type: [Number, String],
+			default: _gc('current', 0)
+		},
+		//list数组长度超过scrollCount时滚动显示(不自动铺满全屏)
+		scrollCount: {
+			type: [Number, String],
+			default: _gc('scrollCount', 5)
+		},
+		//z-tabs样式
+		tabsStyle: {
+			type: Object,
+			default: function () {
+				return _gc('tabsStyle', {})
+			}
+		},
+		//自定义每个tab的宽度，默认为0，即代表根据内容自动撑开，单位rpx，支持传100、"100px"或"100rpx"
+		tabWidth: {
+			type: [Number, String],
+			default: _gc('tabWidth', 0)
+		},
+		//滑块宽度，单位rpx，支持传100、"100px"或"100rpx"
+		barWidth: {
+			type: [Number, String],
+			default: _gc('barWidth', 45)
+		},
+		//滑块高度，单位rpx，支持传100、"100px"或"100rpx"
+		barHeight: {
+			type: [Number, String],
+			default: _gc('barHeight', 8)
+		},
+		//滑块样式，其中的width和height将被barWidth和barHeight覆盖
+		barStyle: {
+			type: Object,
+			default: function () {
+				return _gc('barStyle', {});
+			}
+		},
+		//tabs与底部的间距，单位rpx，支持传100、"100px"或"100rpx"
+		bottomSpace: {
+			type: [Number, String],
+			default: _gc('bottomSpace', 8)
+		},
+		//切换tab时滑块动画模式，与swiper联动时有效，点击切换tab时无效，必须调用setDx。默认为line，即切换tab时滑块宽度保持不变，线性运动。可选值为worm，即为类似毛毛虫蠕动效果
+		barAnimateMode: {
+			type: String,
+			default: _gc('barAnimateMode', 'line')
+		},
+		//list中item的name(标题)的key
+		nameKey: {
+			type: String,
+			default: _gc('nameKey', 'name')
+		},
+		//list中item的value的key
+		valueKey: {
+			type: String,
+			default: _gc('valueKey', 'value')
+		},
+		//激活状态tab的颜色
+		activeColor: {
+			type: String,
+			default: _gc('activeColor', '#007AFF')
+		},
+		//未激活状态tab的颜色
+		inactiveColor: {
+			type: String,
+			default: _gc('inactiveColor', '#666666')
+		},
+		//禁用状态tab的颜色
+		disabledColor: {
+			type: String,
+			default: _gc('disabledColor', '#bbbbbb')
+		},
+		//激活状态tab的样式
+		activeStyle: {
+			type: Object,
+			default: function () {
+				return _gc('activeStyle', {});
+			}
+		},
+		//未激活状态tab的样式
+		inactiveStyle: {
+			type: Object,
+			default: function () {
+				return _gc('inactiveStyle', {});
+			}
+		},
+		//禁用状态tab的样式
+		disabledStyle: {
+			type: Object,
+			default: function () {
+				return _gc('disabledStyle', {});
+			}
+		},
+		//z-tabs背景色
+		bgColor: {
+			type: String,
+			default: _gc('bgColor', 'white')
+		},
+		//徽标数最大数字限制，超过这个数字将变成badgeMaxCount+
+		badgeMaxCount: {
+			type: [Number, String],
+			default: _gc('badgeMaxCount', 99)
+		},
+		//徽标样式，例如可自定义背景色，字体等等
+		badgeStyle: {
+			type: Object,
+			default: function () {
+				return _gc('badgeStyle', {})
+			}
+		},
+		//初始化时是否自动触发change事件
+		initTriggerChange: {
+			type: Boolean,
+			default: _gc('initTriggerChange', false)
 		}
-		const value = config[_toKebab(key)];
-		return value === undefined ? defaultValue : value;
-	}
-	//驼峰转短横线
-	function _toKebab(value) {
-		return value.replace(/([A-Z])/g, "-$1").toLowerCase();
-	}
-	
-	/**
-	 * z-tabs 标签
-	 * @description 一个简单轻量的tabs标签，全平台兼容，支持nvue、vue3
-	 * @tutorial https://ext.dcloud.net.cn/plugin?name=z-tabs
-	 * @property {Array} list 数据源数组，支持形如['tab1','tab2']的格式或[{name:'tab1',value:1}]的格式
-	 * @property {Number|String} current 当前选中的index，默认为0
-	 * @property {Number|String} scroll-count list数组长度超过scrollCount时滚动显示(不自动铺满全屏)，默认为5
-	 * @property {Number|String} tab-width 自定义每个tab的宽度，默认为0，即代表根据内容自动撑开，单位rpx，支持传100、"100px"或"100rpx"
-	 * @property {Number|String} bar-width 滑块宽度，单位rpx，支持传100、"100px"或"100rpx"
-	 * @property {Number|String} bar-height 滑块高度，单位rpx，支持传100、"100px"或"100rpx"
-	 * @property {Object} bar-style 滑块样式，其中的width和height将被bar-width和bar-height覆盖
-	 * @property {Number|String} bottom-space tabs与底部的间距，单位rpx，支持传100、"100px"或"100rpx"
-	 * @property {String} bar-animate-mode 切换tab时滑块动画模式，与swiper联动时有效，点击切换tab时无效，必须调用setDx。默认为line，即切换tab时滑块宽度保持不变，线性运动。可选值为worm，即为类似毛毛虫蠕动效果
-	 * @property {String} name-key list中item的name(标题)的key，默认为name
-	 * @property {String} value-key list中item的value的key，默认为value
-	 * @property {String} active-color 激活状态tab的颜色
-	 * @property {String} inactive-color 未激活状态tab的颜色
-	 * @property {String} disabled-color 禁用状态tab的颜色
-	 * @property {Object} active-style 激活状态tab的样式
-	 * @property {Object} inactive-style 未激活状态tab的样式
-	 * @property {Object} disabled-style 禁用状态tab的样式
-	 * @property {Number|String} badge-max-count 徽标数最大数字限制，超过这个数字将变成badge-max-count+，默认为99
-	 * @property {Object} badge-style 徽标样式，例如可自定义背景色，字体等等
-	 * @property {String} bg-color z-tabs背景色
-	 * @property {Object} tabs-style z-tabs样式
-	 * @property {Boolean} init-trigger-change 初始化时是否自动触发change事件
-	 * @event {Function(index,value)} change tabs改变时触发，index:当前切换到的index；value:当前切换到的value
-	 * @example <z-tabs :list="list"></z-tabs>
-	 */
-	export default {
-		name: 'z-tabs',
-		data() {
-			return {
-				currentIndex: 0,
-				currentSwiperIndex: 0,
-				bottomDotX: -1,
-				bottomDotXForIndex: 0,
-				showBottomDot: false,
-				shouldSetDx: true,
-				
-				barCalcedWidth: 0,
-				pxBarWidth: 0,
-				scrollLeft: 0,
-				tabsSuperWidth: uni.upx2px(750),
-				tabsWidth: uni.upx2px(750),
-				tabsHeight: uni.upx2px(80),
-				tabsLeft: 0,
-				tabsContainerWidth: 0,
-				itemNodeInfos: [],
-				isFirstLoaded: false,
-				currentScrollLeft: 0,
-				changeTriggerFailed: false,
-				currentChanged: false
-			};
-		},
-		props: {
-			//数据源数组，支持形如['tab1','tab2']的格式或[{name:'tab1',value:1}]的格式
-			list: {
-				type: Array,
-				default: function() {
-					return [];
-				}
-			},
-			//当前选中的index
-			current: {
-				type: [Number, String],
-				default: _gc('current',0)
-			},
-			//list数组长度超过scrollCount时滚动显示(不自动铺满全屏)
-			scrollCount: {
-				type: [Number, String],
-				default: _gc('scrollCount',5)
-			},
-			//z-tabs样式
-			tabsStyle: {
-				type: Object,
-				default: function() {
-					return _gc('tabsStyle',{})
-				}
-			},
-			//自定义每个tab的宽度，默认为0，即代表根据内容自动撑开，单位rpx，支持传100、"100px"或"100rpx"
-			tabWidth: {
-				type: [Number, String],
-				default: _gc('tabWidth',0)
-			},
-			//滑块宽度，单位rpx，支持传100、"100px"或"100rpx"
-			barWidth: {
-				type: [Number, String],
-				default: _gc('barWidth',45)
-			},
-			//滑块高度，单位rpx，支持传100、"100px"或"100rpx"
-			barHeight: {
-				type: [Number, String],
-				default: _gc('barHeight',8)
-			},
-			//滑块样式，其中的width和height将被barWidth和barHeight覆盖
-			barStyle: {
-				type: Object,
-				default: function() {
-					return _gc('barStyle',{});
-				}
-			},
-			//tabs与底部的间距，单位rpx，支持传100、"100px"或"100rpx"
-			bottomSpace: {
-				type: [Number, String],
-				default: _gc('bottomSpace',8)
-			},
-			//切换tab时滑块动画模式，与swiper联动时有效，点击切换tab时无效，必须调用setDx。默认为line，即切换tab时滑块宽度保持不变，线性运动。可选值为worm，即为类似毛毛虫蠕动效果
-			barAnimateMode: {
-				type: String,
-				default: _gc('barAnimateMode','line')
-			},
-			//list中item的name(标题)的key
-			nameKey: {
-				type: String,
-				default: _gc('nameKey','name')
-			},
-			//list中item的value的key
-			valueKey: {
-				type: String,
-				default: _gc('valueKey','value')
-			},
-			//激活状态tab的颜色
-			activeColor: {
-				type: String,
-				default: _gc('activeColor','#007AFF')
-			},
-			//未激活状态tab的颜色
-			inactiveColor: {
-				type: String,
-				default: _gc('inactiveColor','#666666')
-			},
-			//禁用状态tab的颜色
-			disabledColor: {
-				type: String,
-				default: _gc('disabledColor','#bbbbbb')
-			},
-			//激活状态tab的样式
-			activeStyle: {
-				type: Object,
-				default: function() {
-					return _gc('activeStyle',{});
-				}
-			},
-			//未激活状态tab的样式
-			inactiveStyle: {
-				type: Object,
-				default: function() {
-					return _gc('inactiveStyle',{});
-				}
-			},
-			//禁用状态tab的样式
-			disabledStyle: {
-				type: Object,
-				default: function() {
-					return _gc('disabledStyle',{});
-				}
-			},
-			//z-tabs背景色
-			bgColor: {
-				type: String,
-				default: _gc('bgColor','white')
-			},
-			//徽标数最大数字限制，超过这个数字将变成badgeMaxCount+
-			badgeMaxCount: {
-				type: [Number, String],
-				default: _gc('badgeMaxCount',99)
-			},
-			//徽标样式，例如可自定义背景色，字体等等
-			badgeStyle: {
-				type: Object,
-				default: function() {
-					return _gc('badgeStyle',{})
-				}
-			},
-			//初始化时是否自动触发change事件
-			initTriggerChange: {
-				type: Boolean,
-				default: _gc('initTriggerChange',false)
-			}
-		},
-		mounted() {
-			this.updateSubviewLayout();
-		},
-		watch: {
-			current: {
-				handler(newVal) {
-					this.currentChanged && this._lockDx();
-					this.currentIndex = newVal;
-					this._preUpdateDotPosition(this.currentIndex);
-					if (this.initTriggerChange) {
-						if (newVal < this.list.length) {
-							this.$emit('change', newVal, this.list[newVal][this.valueKey]);
-						}else {
-							this.changeTriggerFailed = true;
-						}
-					}
-					this.currentChanged = true;
-				},
-				immediate: true
-			},
-			list: {
-				handler(newVal) {
-					this._handleListChange(newVal);
-				},
-				immediate: false
-			},
-			bottomDotX(newVal) {
-				if(newVal >= 0){
-					// #ifndef APP-NVUE
-					this.showBottomDot = true;
-					// #endif
-					this.$nextTick(() => {
-						// #ifdef APP-NVUE
-						weexAnimation.transition(this.$refs['z-tabs-bottom-dot'], {
-							styles: {
-								transform: `translateX(${newVal}px)`
-							},
-							duration: this.showAnimate ? 200 : 0,
-							delay: 0
-						})
-						setTimeout(() => {
-							this.showBottomDot = true;
-						},10)
-						// #endif
-					})
-				}
-			},
-			finalBarWidth: {
-				handler(newVal) {
-					this.barCalcedWidth = newVal;
-					this.pxBarWidth = this.barCalcedWidth;
-				},
-				immediate: true
-			},
-			currentIndex: {
-				handler(newVal) {
-					this.currentSwiperIndex = newVal;
-				},
-				immediate: true
-			}
-		},
-		computed: {
-			shouldScroll(){
-				return this.list.length > this.scrollCount;
-			},
-			finalTabsHeight(){
-				return this.tabsHeight;
-			},
-			tabStyle(){
-				const stl = this.shouldScroll ? {'flex-shrink': 0} : {'flex': 1};
-				if(this.finalTabWidth > 0){
-					stl['width'] = this.finalTabWidth + 'px';
-				}else{
-					delete stl.width;
-				} 
-				return stl;
-			},
-			tabsListStyle(){
-				return this.shouldScroll ? {} : {'flex':1};
-			},
-			showAnimate(){
-				return this.isFirstLoaded && !this.shouldSetDx;
-			},
-			dotTransition(){
-				return this.showAnimate ? 'transform .2s linear':'none';
-			},
-			finalDotStyle(){
-				return {...this.barStyle, width: this.barCalcedWidth + 'px', height: this.finalBarHeight + 'px', opacity: this.showBottomDot ? 1 : 0};
-			},
-			finalTabWidth(){
-				return this._convertTextToPx(this.tabWidth);
-			},
-			finalBarWidth(){
-				return this._convertTextToPx(this.barWidth);
-			},
-			finalBarHeight(){
-				return this._convertTextToPx(this.barHeight);
-			},
-			finalBottomSpace(){
-				return this._convertTextToPx(this.bottomSpace);
-			}
-		},
-		methods: {
-			//根据swiper的@transition实时更新底部dot位置
-			setDx(dx) {
-				if (!this.shouldSetDx) return;
-				const isLineMode = this.barAnimateMode === 'line';
-				const isWormMode = this.barAnimateMode === 'worm';
-				let dxRate = dx / this.tabsSuperWidth;
-				this.currentSwiperIndex = this.currentIndex + parseInt(dxRate);
-				const isRight = dxRate > 0;
-				const barWidth = this.pxBarWidth;
-				if(this.currentSwiperIndex !== this.currentIndex){
-					dxRate = dxRate - (this.currentSwiperIndex - this.currentIndex);
-					const currentNode = this.itemNodeInfos[this.currentSwiperIndex];
-					if (!!currentNode){
-						this.bottomDotXForIndex = this._getBottomDotX(currentNode, barWidth);
+	},
+	mounted() {
+		this.updateSubviewLayout();
+	},
+	watch: {
+		current: {
+			handler(newVal) {
+				this.currentChanged && this._lockDx();
+				this.currentIndex = newVal;
+				this._preUpdateDotPosition(this.currentIndex);
+				if (this.initTriggerChange) {
+					if (newVal < this.list.length) {
+						this.$emit('change', newVal, this.list[newVal][this.valueKey]);
+					} else {
+						this.changeTriggerFailed = true;
 					}
 				}
-				const currentIndex = this.currentSwiperIndex;
-				let nextIndex = currentIndex + (isRight ? 1 : -1);
-				nextIndex = Math.max(0, nextIndex);
-				nextIndex = Math.min(nextIndex, this.itemNodeInfos.length - 1);
-				const currentNodeInfo = this.itemNodeInfos[currentIndex];
-				const nextNodeInfo = this.itemNodeInfos[nextIndex];
-				const nextBottomX = this._getBottomDotX(nextNodeInfo, barWidth);
-				if (isLineMode){
-					this.bottomDotX = this.bottomDotXForIndex + (nextBottomX - this.bottomDotXForIndex) * Math.abs(dxRate);
-				} else if (isWormMode) {
-					if ((isRight && currentIndex >= this.itemNodeInfos.length - 1) || (!isRight && currentIndex <= 0)) return;
-					const spaceOffset = isRight ? nextNodeInfo.right - currentNodeInfo.left : currentNodeInfo.right - nextNodeInfo.left;
-					let barCalcedWidth = barWidth + spaceOffset * Math.abs(dxRate);
-					if (isRight) {
-						if (barCalcedWidth > nextBottomX - this.bottomDotX + barWidth) {
-							const barMinusWidth = barWidth + spaceOffset * (1 - dxRate);
-							this.bottomDotX = this.bottomDotXForIndex + (barCalcedWidth - barMinusWidth) / 2;
-							barCalcedWidth = barMinusWidth;
-						}
-					}else if (!isRight) {
-						if (barCalcedWidth > this.bottomDotXForIndex + barWidth - nextBottomX){
-							const barMinusWidth = barWidth + spaceOffset * (1 + dxRate);
-							barCalcedWidth = barMinusWidth;
-							this.bottomDotX = nextBottomX;
-						} else{
-							this.bottomDotX = this.bottomDotXForIndex - (barCalcedWidth - barWidth);
-						}
-					}
-					barCalcedWidth = Math.max(barCalcedWidth, barWidth);
-					this.barCalcedWidth = barCalcedWidth;
-				}
+				this.currentChanged = true;
 			},
-			//在swiper的@animationfinish中通知z-tabs结束多setDx的锁定，若在父组件中调用了setDx，则必须调用unlockDx
-			unlockDx() {
-				this.$nextTick(() => {
-					this.shouldSetDx = true;
-				})
+			immediate: true
+		},
+		list: {
+			handler(newVal) {
+				this._handleListChange(newVal);
 			},
-			//更新z-tabs内部布局
-			updateSubviewLayout(tryCount = 0) {
-				this.$nextTick(() => {
-					let delayTime = 10;
-					// #ifdef APP-NVUE || MP-BAIDU
-					delayTime = 50;
-					// #endif
-					setTimeout(() => {
-						this._getNodeClientRect('.z-tabs-scroll-view-conatiner').then(res=>{
-							if (res){ 
-								if (!res[0].width && tryCount < 10) {
-									setTimeout(() => {
-										tryCount ++;
-										this.updateSubviewLayout(tryCount);
-									}, 50);
-									return;
-								}
-								this.tabsWidth = res[0].width;
-								this.tabsHeight = res[0].height;
-								this.tabsLeft = res[0].left;
-								this._handleListChange(this.list);
-							}
-						})
-						this._getNodeClientRect('.z-tabs-conatiner').then(res=>{
-							if(res && res[0].width){
-								this.tabsSuperWidth = res[0].width;
-							}
-						})
-					},delayTime)
-				})
-			},
-			//点击了tabs
-			tabsClick(index,item) {
-				if (item.disabled) return;
-				if (this.currentIndex != index) {
-					this.shouldSetDx = false;
-					this.$emit('change', index, item[this.valueKey]);
-					this.currentIndex = index;
-					this._preUpdateDotPosition(index);
-				} else {
-					this.$emit('secondClick',index, item[this.valueKey]);
-				}
-			},
-			//scroll-view滚动
-			scroll(e){
-				this.currentScrollLeft = e.detail.scrollLeft;
-			},
-			//锁定dx，用于避免在swiper被动触发滚动时候执行setDx中的代码
-			_lockDx() {
-				this.shouldSetDx = false;
-			},
-			//更新底部dot位置之前的预处理
-			_preUpdateDotPosition(index) {
+			immediate: false
+		},
+		bottomDotX(newVal) {
+			if (newVal >= 0) {
 				// #ifndef APP-NVUE
+				this.showBottomDot = true;
+				// #endif
 				this.$nextTick(() => {
-					uni.createSelectorQuery().in(this).select(".z-tabs-scroll-view").fields({
-					  scrollOffset: true
-					}, data => {
-						if (data) {
-							this.currentScrollLeft = data.scrollLeft;
-							this._updateDotPosition(index);
-						} else {
-							this._updateDotPosition(index);
-						}
-					}).exec();
+					// #ifdef APP-NVUE
+					weexAnimation.transition(this.$refs['z-tabs-bottom-dot'], {
+						styles: {
+							transform: `translateX(${newVal}px)`
+						},
+						duration: this.showAnimate ? 200 : 0,
+						delay: 0
+					})
+					setTimeout(() => {
+						this.showBottomDot = true;
+					}, 10)
+					// #endif
 				})
-				// #endif
-				
-				// #ifdef APP-NVUE
-				this._updateDotPosition(index);
-				// #endif
-			},
-			//更新底部dot位置
-			_updateDotPosition(index){
-				if(index >= this.itemNodeInfos.length) return;
-				this.$nextTick(async ()=>{
-					let node = this.itemNodeInfos[index];
-					let offset = 0;
-					let tabsContainerWidth = this.tabsContainerWidth;
-					if (JSON.stringify(this.activeStyle) !== '{}') {
-						const nodeRes = await this._getNodeClientRect(`#z-tabs-item-${index}`,true);
-						if (nodeRes) {
-							node = nodeRes[0];
-							offset = this.currentScrollLeft;
-							this.tabsHeight = Math.max(node.height + uni.upx2px(28), this.tabsHeight);
-							tabsContainerWidth = 0;
-							for(let i = 0;i < this.itemNodeInfos.length;i++){
-								let oldNode = this.itemNodeInfos[i];
-								tabsContainerWidth += i === index ? node.width : oldNode.width;
-							}
-						}
-					}
-					this.bottomDotX = this._getBottomDotX(node, this.finalBarWidth, offset);
-					this.bottomDotXForIndex = this.bottomDotX;
-					if (this.tabsWidth) {
-						setTimeout(()=>{
-							let scrollLeft = this.bottomDotX - this.tabsWidth / 2 + this.finalBarWidth / 2;
-							scrollLeft = Math.max(0,scrollLeft);
-							if (tabsContainerWidth) {
-								scrollLeft = Math.min(scrollLeft,tabsContainerWidth - this.tabsWidth + 10);
-							}
-							if (this.shouldScroll && tabsContainerWidth > this.tabsWidth) {
-								this.scrollLeft = scrollLeft;
-							}
-							this.$nextTick(()=>{
-								this.isFirstLoaded = true;
-							})
-						},200)
-					}
-				})
-			},
-			// 处理list改变
-			_handleListChange(newVal) {
-				this.$nextTick(async ()=>{
-					if(newVal.length){
-						let itemNodeInfos = [];
-						let tabsContainerWidth = 0;
-						let delayTime = 0;
-						// #ifdef MP-BAIDU
-						delayTime = 100;
-						// #endif
-						setTimeout(async()=>{
-							for(let i = 0;i < newVal.length;i++){
-								const nodeRes = await this._getNodeClientRect(`#z-tabs-item-${i}`,true);
-								if(nodeRes){
-									const node = nodeRes[0];
-									node.left += this.currentScrollLeft;
-									itemNodeInfos.push(node);
-									tabsContainerWidth += node.width;
-								}
-								if (i === this.currentIndex){
-									this.itemNodeInfos = itemNodeInfos;
-									this.tabsContainerWidth = tabsContainerWidth;
-									this._updateDotPosition(this.currentIndex);
-								}
-							}
-							this.itemNodeInfos = itemNodeInfos;
-							this.tabsContainerWidth = tabsContainerWidth;
-							this._updateDotPosition(this.currentIndex);
-						},delayTime)
-					}
-				})
-				
-				if (this.initTriggerChange && this.changeTriggerFailed && newVal.length) {
-					if (this.current < newVal.length) {
-						this.$emit('change', this.current, newVal[this.current][this.valueKey]);
-					}
-				}
-			},
-			//根据node获取bottomX
-			_getBottomDotX(node, barWidth = this.finalBarWidth, offset = 0){
-				return node.left + node.width / 2 - barWidth / 2 + offset - this.tabsLeft;
-			},
-			//获取节点信息
-			_getNodeClientRect(select, withRefArr = false) {
-				// #ifdef APP-NVUE
-				select = select.replace('.', '').replace('#', '');
-				const ref = withRefArr ? this.$refs[select][0] : this.$refs[select];
-				return new Promise((resolve, reject) => {
-					if (ref) {
-						weexDom.getComponentRect(ref, option => {
-							if (option && option.result) {
-								resolve([option.size]);
-							} else resolve(false);
-						})
-					} else resolve(false);
-				});
-				return;
-				// #endif
-				const res = uni.createSelectorQuery().in(this);
-				res.select(select).boundingClientRect();
-				return new Promise((resolve, reject) => {
-					res.exec(data => {
-						resolve((data && data != '' && data != undefined && data.length) ? data : false);
-					});
-				});
-			},
-			//格式化badge中的count
-			_formatCount(count) {
-				if (!count) return '';
-				if (count > this.badgeMaxCount) {
-					return this.badgeMaxCount + '+';
-				}
-				return count.toString();
-			},
-			//将文本的px或者rpx转为px的值
-			_convertTextToPx(text) {
-				const dataType = Object.prototype.toString.call(text);
-				if (dataType === '[object Number]') {
-					return uni.upx2px(text);
-				}
-				let isRpx = false;
-				if (text.indexOf('rpx') !== -1 || text.indexOf('upx') !== -1) {
-					text = text.replace('rpx', '').replace('upx', '');
-					isRpx = true;
-				} else if (text.indexOf('px') !== -1) {
-					text = text.replace('px', '');
-				} else {
-					text = uni.upx2px(text);
-				}
-				if (!isNaN(text)) {
-					if (isRpx) return Number(uni.upx2px(text));
-					return Number(text);
-				}
-				return 0;
 			}
+		},
+		finalBarWidth: {
+			handler(newVal) {
+				this.barCalcedWidth = newVal;
+				this.pxBarWidth = this.barCalcedWidth;
+			},
+			immediate: true
+		},
+		currentIndex: {
+			handler(newVal) {
+				this.currentSwiperIndex = newVal;
+			},
+			immediate: true
+		}
+	},
+	computed: {
+		shouldScroll() {
+			return this.list.length > this.scrollCount;
+		},
+		finalTabsHeight() {
+			return this.tabsHeight;
+		},
+		tabStyle() {
+			const stl = this.shouldScroll ? { 'flex-shrink': 0 } : { 'flex': 1 };
+			if (this.finalTabWidth > 0) {
+				stl['width'] = this.finalTabWidth + 'px';
+			} else {
+				delete stl.width;
+			}
+			return stl;
+		},
+		tabsListStyle() {
+			return this.shouldScroll ? {} : { 'flex': 1 };
+		},
+		showAnimate() {
+			return this.isFirstLoaded && !this.shouldSetDx;
+		},
+		dotTransition() {
+			return this.showAnimate ? 'transform .2s linear' : 'none';
+		},
+		finalDotStyle() {
+			return { ...this.barStyle, width: this.barCalcedWidth + 'px', height: this.finalBarHeight + 'px', opacity: this.showBottomDot ? 1 : 0 };
+		},
+		finalTabWidth() {
+			return this._convertTextToPx(this.tabWidth);
+		},
+		finalBarWidth() {
+			return this._convertTextToPx(this.barWidth);
+		},
+		finalBarHeight() {
+			return this._convertTextToPx(this.barHeight);
+		},
+		finalBottomSpace() {
+			return this._convertTextToPx(this.bottomSpace);
+		}
+	},
+	methods: {
+		//根据swiper的@transition实时更新底部dot位置
+		setDx(dx) {
+			if (!this.shouldSetDx) return;
+			const isLineMode = this.barAnimateMode === 'line';
+			const isWormMode = this.barAnimateMode === 'worm';
+			let dxRate = dx / this.tabsSuperWidth;
+			this.currentSwiperIndex = this.currentIndex + parseInt(dxRate);
+			const isRight = dxRate > 0;
+			const barWidth = this.pxBarWidth;
+			if (this.currentSwiperIndex !== this.currentIndex) {
+				dxRate = dxRate - (this.currentSwiperIndex - this.currentIndex);
+				const currentNode = this.itemNodeInfos[this.currentSwiperIndex];
+				if (!!currentNode) {
+					this.bottomDotXForIndex = this._getBottomDotX(currentNode, barWidth);
+				}
+			}
+			const currentIndex = this.currentSwiperIndex;
+			let nextIndex = currentIndex + (isRight ? 1 : -1);
+			nextIndex = Math.max(0, nextIndex);
+			nextIndex = Math.min(nextIndex, this.itemNodeInfos.length - 1);
+			const currentNodeInfo = this.itemNodeInfos[currentIndex];
+			const nextNodeInfo = this.itemNodeInfos[nextIndex];
+			const nextBottomX = this._getBottomDotX(nextNodeInfo, barWidth);
+			if (isLineMode) {
+				this.bottomDotX = this.bottomDotXForIndex + (nextBottomX - this.bottomDotXForIndex) * Math.abs(dxRate);
+			} else if (isWormMode) {
+				if ((isRight && currentIndex >= this.itemNodeInfos.length - 1) || (!isRight && currentIndex <= 0)) return;
+				const spaceOffset = isRight ? nextNodeInfo.right - currentNodeInfo.left : currentNodeInfo.right - nextNodeInfo.left;
+				let barCalcedWidth = barWidth + spaceOffset * Math.abs(dxRate);
+				if (isRight) {
+					if (barCalcedWidth > nextBottomX - this.bottomDotX + barWidth) {
+						const barMinusWidth = barWidth + spaceOffset * (1 - dxRate);
+						this.bottomDotX = this.bottomDotXForIndex + (barCalcedWidth - barMinusWidth) / 2;
+						barCalcedWidth = barMinusWidth;
+					}
+				} else if (!isRight) {
+					if (barCalcedWidth > this.bottomDotXForIndex + barWidth - nextBottomX) {
+						const barMinusWidth = barWidth + spaceOffset * (1 + dxRate);
+						barCalcedWidth = barMinusWidth;
+						this.bottomDotX = nextBottomX;
+					} else {
+						this.bottomDotX = this.bottomDotXForIndex - (barCalcedWidth - barWidth);
+					}
+				}
+				barCalcedWidth = Math.max(barCalcedWidth, barWidth);
+				this.barCalcedWidth = barCalcedWidth;
+			}
+		},
+		//在swiper的@animationfinish中通知z-tabs结束多setDx的锁定，若在父组件中调用了setDx，则必须调用unlockDx
+		unlockDx() {
+			this.$nextTick(() => {
+				this.shouldSetDx = true;
+			})
+		},
+		//更新z-tabs内部布局
+		updateSubviewLayout(tryCount = 0) {
+			this.$nextTick(() => {
+				let delayTime = 10;
+				// #ifdef APP-NVUE || MP-BAIDU
+				delayTime = 50;
+				// #endif
+				setTimeout(() => {
+					this._getNodeClientRect('.z-tabs-scroll-view-conatiner').then(res => {
+						if (res) {
+							if (!res[0].width && tryCount < 10) {
+								setTimeout(() => {
+									tryCount++;
+									this.updateSubviewLayout(tryCount);
+								}, 50);
+								return;
+							}
+							this.tabsWidth = res[0].width;
+							this.tabsHeight = res[0].height;
+							this.tabsLeft = res[0].left;
+							this._handleListChange(this.list);
+						}
+					})
+					this._getNodeClientRect('.z-tabs-conatiner').then(res => {
+						if (res && res[0].width) {
+							this.tabsSuperWidth = res[0].width;
+						}
+					})
+				}, delayTime)
+			})
+		},
+		//点击了tabs
+		tabsClick(index, item) {
+			if (item.disabled) return;
+			if (this.currentIndex != index) {
+				this.shouldSetDx = false;
+				this.$emit('change', index, item[this.valueKey]);
+				this.currentIndex = index;
+				this._preUpdateDotPosition(index);
+			} else {
+				this.$emit('secondClick', index, item[this.valueKey]);
+			}
+		},
+		//scroll-view滚动
+		scroll(e) {
+			this.currentScrollLeft = e.detail.scrollLeft;
+		},
+		//锁定dx，用于避免在swiper被动触发滚动时候执行setDx中的代码
+		_lockDx() {
+			this.shouldSetDx = false;
+		},
+		//更新底部dot位置之前的预处理
+		_preUpdateDotPosition(index) {
+			// #ifndef APP-NVUE
+			this.$nextTick(() => {
+				uni.createSelectorQuery().in(this).select(".z-tabs-scroll-view").fields({
+					scrollOffset: true
+				}, data => {
+					if (data) {
+						this.currentScrollLeft = data.scrollLeft;
+						this._updateDotPosition(index);
+					} else {
+						this._updateDotPosition(index);
+					}
+				}).exec();
+			})
+			// #endif
+
+			// #ifdef APP-NVUE
+			this._updateDotPosition(index);
+			// #endif
+		},
+		//更新底部dot位置
+		_updateDotPosition(index) {
+			if (index >= this.itemNodeInfos.length) return;
+			this.$nextTick(async () => {
+				let node = this.itemNodeInfos[index];
+				let offset = 0;
+				let tabsContainerWidth = this.tabsContainerWidth;
+				if (JSON.stringify(this.activeStyle) !== '{}') {
+					const nodeRes = await this._getNodeClientRect(`#z-tabs-item-${index}`, true);
+					if (nodeRes) {
+						node = nodeRes[0];
+						offset = this.currentScrollLeft;
+						this.tabsHeight = Math.max(node.height + uni.upx2px(28), this.tabsHeight);
+						tabsContainerWidth = 0;
+						for (let i = 0; i < this.itemNodeInfos.length; i++) {
+							let oldNode = this.itemNodeInfos[i];
+							tabsContainerWidth += i === index ? node.width : oldNode.width;
+						}
+					}
+				}
+				this.bottomDotX = this._getBottomDotX(node, this.finalBarWidth, offset);
+				this.bottomDotXForIndex = this.bottomDotX;
+				if (this.tabsWidth) {
+					setTimeout(() => {
+						let scrollLeft = this.bottomDotX - this.tabsWidth / 2 + this.finalBarWidth / 2;
+						scrollLeft = Math.max(0, scrollLeft);
+						if (tabsContainerWidth) {
+							scrollLeft = Math.min(scrollLeft, tabsContainerWidth - this.tabsWidth + 10);
+						}
+						if (this.shouldScroll && tabsContainerWidth > this.tabsWidth) {
+							this.scrollLeft = scrollLeft;
+						}
+						this.$nextTick(() => {
+							this.isFirstLoaded = true;
+						})
+					}, 200)
+				}
+			})
+		},
+		// 处理list改变
+		_handleListChange(newVal) {
+			this.$nextTick(async () => {
+				if (newVal.length) {
+					let itemNodeInfos = [];
+					let tabsContainerWidth = 0;
+					let delayTime = 0;
+					// #ifdef MP-BAIDU
+					delayTime = 100;
+					// #endif
+					setTimeout(async () => {
+						for (let i = 0; i < newVal.length; i++) {
+							const nodeRes = await this._getNodeClientRect(`#z-tabs-item-${i}`, true);
+							if (nodeRes) {
+								const node = nodeRes[0];
+								node.left += this.currentScrollLeft;
+								itemNodeInfos.push(node);
+								tabsContainerWidth += node.width;
+							}
+							if (i === this.currentIndex) {
+								this.itemNodeInfos = itemNodeInfos;
+								this.tabsContainerWidth = tabsContainerWidth;
+								this._updateDotPosition(this.currentIndex);
+							}
+						}
+						this.itemNodeInfos = itemNodeInfos;
+						this.tabsContainerWidth = tabsContainerWidth;
+						this._updateDotPosition(this.currentIndex);
+					}, delayTime)
+				}
+			})
+
+			if (this.initTriggerChange && this.changeTriggerFailed && newVal.length) {
+				if (this.current < newVal.length) {
+					this.$emit('change', this.current, newVal[this.current][this.valueKey]);
+				}
+			}
+		},
+		//根据node获取bottomX
+		_getBottomDotX(node, barWidth = this.finalBarWidth, offset = 0) {
+			return node.left + node.width / 2 - barWidth / 2 + offset - this.tabsLeft;
+		},
+		//获取节点信息
+		_getNodeClientRect(select, withRefArr = false) {
+			// #ifdef APP-NVUE
+			select = select.replace('.', '').replace('#', '');
+			const ref = withRefArr ? this.$refs[select][0] : this.$refs[select];
+			return new Promise((resolve, reject) => {
+				if (ref) {
+					weexDom.getComponentRect(ref, option => {
+						if (option && option.result) {
+							resolve([option.size]);
+						} else resolve(false);
+					})
+				} else resolve(false);
+			});
+			return;
+			// #endif
+			const res = uni.createSelectorQuery().in(this);
+			res.select(select).boundingClientRect();
+			return new Promise((resolve, reject) => {
+				res.exec(data => {
+					resolve((data && data != '' && data != undefined && data.length) ? data : false);
+				});
+			});
+		},
+		//格式化badge中的count
+		_formatCount(count) {
+			if (!count) return '';
+			if (count > this.badgeMaxCount) {
+				return this.badgeMaxCount + '+';
+			}
+			return count.toString();
+		},
+		//将文本的px或者rpx转为px的值
+		_convertTextToPx(text) {
+			const dataType = Object.prototype.toString.call(text);
+			if (dataType === '[object Number]') {
+				return uni.upx2px(text);
+			}
+			let isRpx = false;
+			if (text.indexOf('rpx') !== -1 || text.indexOf('upx') !== -1) {
+				text = text.replace('rpx', '').replace('upx', '');
+				isRpx = true;
+			} else if (text.indexOf('px') !== -1) {
+				text = text.replace('px', '');
+			} else {
+				text = uni.upx2px(text);
+			}
+			if (!isNaN(text)) {
+				if (isRpx) return Number(uni.upx2px(text));
+				return Number(text);
+			}
+			return 0;
 		}
-		
 	}
+
+}
 </script>
 
 <style scoped>
-	.z-tabs-conatiner{
-		/* #ifndef APP-NVUE */
-		overflow: hidden;
-		display: flex;
-		width: 100%;
-		/* #endif */
-		/* #ifdef APP-NVUE */
-		width: 750rpx;
-		/* #endif */
-		flex-direction: row;
-		height: 80rpx;
-	}
-	
-	.z-tabs-scroll-view-conatiner{
-		flex: 1;
-		position: relative;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		height: 100%;
-		width: 100%;
-		/* #endif */
-		flex-direction: row;
-	}
-	
+.z-tabs-conatiner {
 	/* #ifndef APP-NVUE */
-	.z-tabs-scroll-view ::-webkit-scrollbar {
-		display: none;
-		-webkit-appearance: none;
-		width: 0 !important;
-		height: 0 !important;
-		background: transparent;
-	}
+	overflow: hidden;
+	display: flex;
+	width: 100%;
 	/* #endif */
-	
-	.z-tabs-scroll-view{
-		flex-direction: row;
-		position: absolute;
-		left: 0;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		/* #ifndef APP-NVUE */
-		width: 100%;
-		height: 100%;
-		/* #endif */
-		flex: 1;
-	}
-	
-	.z-tabs-list-container{
-		position: relative;
-		/* #ifndef APP-NVUE */
-		height: 100%;
-		/* #endif */
-	}
-	
-	.z-tabs-list,.z-tabs-list-container{
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-	}
-	
-	.z-tabs-item{
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-		padding: 0px 20rpx;
-	}
-	
-	.z-tabs-item-title-container{
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		align-items: center;
-	}
-	
-	.z-tabs-item-title{
-		font-size: 30rpx;
-	}
-	
-	.z-tabs-item-title-disabled{
-		/* #ifndef APP-NVUE */
-		cursor: not-allowed;
-		/* #endif */
-	}
-	
-	.z-tabs-item-badge{
-		margin-left: 8rpx;
-		background-color: #ec5b56;
-		color: white;
-		font-size: 22rpx;
-		border-radius: 100px;
-		padding: 0rpx 10rpx;
-	}
-	
-	.z-tabs-bottom{
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-	}
-	
-	.z-tabs-bottom-dot{
-		border-radius: 100px;
-	}
-	
-	.z-tabs-left,.z-tabs-right{
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		align-items: center;
-	}
-</style>
+	/* #ifdef APP-NVUE */
+	width: 750rpx;
+	/* #endif */
+	flex-direction: row;
+	height: 80rpx;
+}
 
+.z-tabs-scroll-view-conatiner {
+	flex: 1;
+	position: relative;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	height: 100%;
+	width: 100%;
+	/* #endif */
+	flex-direction: row;
+}
+
+/* #ifndef APP-NVUE */
+.z-tabs-scroll-view ::-webkit-scrollbar {
+	display: none;
+	-webkit-appearance: none;
+	width: 0 !important;
+	height: 0 !important;
+	background: transparent;
+}
+
+/* #endif */
+
+.z-tabs-scroll-view {
+	flex-direction: row;
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	/* #ifndef APP-NVUE */
+	width: 100%;
+	height: 100%;
+	/* #endif */
+	flex: 1;
+}
+
+.z-tabs-list-container {
+	position: relative;
+	/* #ifndef APP-NVUE */
+	height: 100%;
+	/* #endif */
+}
+
+.z-tabs-list,
+.z-tabs-list-container {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+}
+
+.z-tabs-item {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	padding: 0px 20rpx;
+}
+
+.z-tabs-item-title-container {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+	align-items: center;
+}
+
+.z-tabs-item-title {
+	display: inline-block;
+	width: 100%;
+	font-size: 28rpx;
+}
+
+.z-tabs-item-title-disabled {
+	/* #ifndef APP-NVUE */
+	cursor: not-allowed;
+	/* #endif */
+}
+
+.z-tabs-item-badge {
+	margin-left: 8rpx;
+	background-color: #ec5b56;
+	color: white;
+	font-size: 22rpx;
+	border-radius: 100px;
+	padding: 0rpx 10rpx;
+}
+
+.z-tabs-bottom {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+.z-tabs-bottom-dot {
+	border-radius: 100px;
+}
+
+.z-tabs-left,
+.z-tabs-right {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+	align-items: center;
+}
+</style>
diff --git a/src/sheep/constant/service-enum.ts b/src/sheep/constant/service-enum.ts
index 10d6e0e..7c62f1c 100644
--- a/src/sheep/constant/service-enum.ts
+++ b/src/sheep/constant/service-enum.ts
@@ -22,8 +22,15 @@ const hardwarePayTypeEnum = {
   7: "线上订餐二维码支付",
 };
 
+const boxesBxStatusEnum = {
+  "0": "今日空闲",
+  "1": "今日部分空闲",
+  "2": "今日已满",
+};
+
 export default {
   hardwareOrderStatusEnum,
   hardwareOrderTypeEnum,
   hardwarePayTypeEnum,
+  boxesBxStatusEnum,
 };