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/App.vue b/src/App.vue
index d9ad0b8..aa74039 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,8 +16,10 @@ onHide(() => {
 @import "@/sheep/scss/global.scss";
 @import url(@/uni_modules/tm-ui/css/remixicon.min.css);
 
+
 $theme-green: #06be36;
 $theme-blue: #0094ff;
+$theme-gray: #999;
 
 .botder_btn {
   border: 1px solid #999;
diff --git a/src/pages.json b/src/pages.json
index a350897..3ecde96 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -87,6 +87,39 @@
 				}
 			]
 		},
+		{
+			"root": "pages/boxes",
+			"pages": [
+				{
+					"path": "apply",
+					"style": {
+						"navigationBarTitleText": "",
+						"disableScroll": true
+					}
+				},
+				{
+					"path": "detail",
+					"style": {
+						"navigationBarTitleText": "",
+						"disableScroll": true
+					}
+				},
+				{
+					"path": "list",
+					"style": {
+						"navigationBarTitleText": "",
+						"disableScroll": true
+					}
+				},
+				{
+					"path": "apply-list",
+					"style": {
+						"navigationBarTitleText": "",
+						"disableScroll": true
+					}
+				}
+			]
+		},
 		{
 			"root": "pages/merchant",
 			"pages": [
@@ -126,6 +159,25 @@
 				}
 			]
 		},
+		{
+			"root": "pages/refund",
+			"pages": [
+				{
+					"path": "apply",
+					"style": {
+						"navigationBarTitleText": "",
+						"disableScroll": true
+					}
+				},
+				{
+					"path": "history",
+					"style": {
+						"navigationBarTitleText": "",
+						"disableScroll": true
+					}
+				}
+			]
+		},
 		{
 			"root": "pages/wallet",
 			"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-list.vue b/src/pages/boxes/apply-list.vue
new file mode 100644
index 0000000..52eb4e2
--- /dev/null
+++ b/src/pages/boxes/apply-list.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { onLoad, onShow } from "@dcloudio/uni-app";
+
+import { hooks, router } from "@@/index"
+import { boxesApi } from "@@/api"
+
+import zTabs from "@@/components/other/z-tabs/z-tabs.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>({
+    pa: {
+        status: data.tabs[0].id,
+    },
+})
+
+onLoad(() => {
+
+});
+onShow(() => {
+    if (pageRef.value) {
+        pageRef.value.reload(false)
+    }
+})
+
+const pageRef = ref<any>(null)
+const pageHook = hooks.usePage(pageRef, boxesApi.MyBookingPage, null, 'data.list')
+const query = (page: number, pagesize: number) => {
+    pageHook.startPage(page, pagesize, false, state.pa);
+}
+
+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 })
+}
+
+const doCancelApply = async (v: any) => {
+    uni.showModal({
+        title: '提示',
+        content: '是否确定取消预约',
+        confirmColor: '#0094ff',
+        success: async (res) => {
+            if (!res.confirm) return
+            try {
+                uni.showLoading({ title: '取消预约中...', mask: true });
+                const _pa = { id: v.id }
+                const { data, code }: any = await boxesApi.cancel(_pa)
+                if (code != 0) throw new Error()
+                pageRef.value.reload(true)
+                uni.hideLoading()
+                uni.showToast({ title: '取消预约成功', icon: "none" });
+            } catch (error) {
+                console.error(error);
+                uni.hideLoading()
+            }
+        }
+    })
+}
+
+</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" />
+            <view class="flex-col card p-20rpx m-b-20rpx" v-for="(v, i) in pageHook.list" :key="i" @tap="doCard(v)">
+                <view>
+                    <view class="flex-row items-center justify-between">
+                        <view class="main-text-28">{{ v.boxesName }}</view>
+                        <view>
+                            <tm-tag v-if="v.status == 0" color="success" size="xs">预约成功</tm-tag>
+                            <tm-tag v-if="v.status == 1" color="error" size="xs">预约失败</tm-tag>
+                            <tm-tag v-if="v.status == 2" color="info" size="xs">取消预约</tm-tag>
+                        </view>
+                    </view>
+                    <view class="m-t-10rpx second-text-26">
+                        <text>预约时间</text>
+                        <text class="m-l-5rpx">
+                            {{ v.bookingDate }} {{ hooks.useTime(v.startTime, "{h}:{i}") }} ~ {{
+                                hooks.useTime(v.endTime, "{h}:{i}")
+                            }}
+                        </text>
+                    </view>
+                    <view class="m-t-10rpx second-text-26">
+                        <text>提交时间</text>
+                        <text class="m-l-5rpx">
+                            {{ hooks.useTime(v.createTime, "") }}
+                        </text>
+                    </view>
+                </view>
+                <view class="flex-row items-center justify-end p-t-10rpx">
+                    <view class="botder_btn" @tap.stop="doCancelApply(v)">取消预约</view>
+                </view>
+            </view>
+        </z-paging>
+    </crud-layout>
+</template>
+
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/pages/boxes/apply.vue b/src/pages/boxes/apply.vue
new file mode 100644
index 0000000..bddeac2
--- /dev/null
+++ b/src/pages/boxes/apply.vue
@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { onLoad, onShow } from "@dcloudio/uni-app";
+import { isEmpty, max, min } from "radash"
+import dayjs from "dayjs"
+
+import { hooks, router } from "@@/index"
+import { boxesApi } from "@@/api"
+
+const data = {
+
+}
+const state = reactive<any>({
+    detailType: "add",
+    detailId: null,
+    detail: null,
+    rechargeList: [],
+    selectRechargeList: [],
+    selectRechargeIdList: [],
+    pickerDate: {
+        start: "",
+        end: "",
+    }
+})
+const applyForm = reactive<any>({
+    displayTimeRange: "",
+    displayTimeRangeStr: "",
+    bxDate: null,
+})
+const applyFormRules = reactive<any>({
+    bxDate: [
+        { required: true, message: '预约时间不能为空' }
+    ],
+})
+
+onLoad((options: any) => {
+    const { type, id } = options
+    if (!isEmpty(type)) state.detailType = type
+    if (!isEmpty(id)) state.detailId = id
+    if (type === 'view') {
+        getDetail()
+    }
+    const today = dayjs()
+    state.pickerDate.start = dayjs().format('YYYY-MM-DD')
+    state.pickerDate.end = today.add(2, 'month').format('YYYY-MM-DD')
+    applyForm.bxDate = state.pickerDate.start
+    getDateRange()
+});
+onShow(() => {
+
+})
+
+const getDetail = async () => {
+    if (isEmpty(state.detailId)) return
+    const _pa = { id: state.detailId }
+    const { data } = await boxesApi.detail(_pa)
+    if (!isEmpty(data)) {
+        state.detail = data
+    }
+}
+
+const getDateRange = async () => {
+    const _pa = { id: state.detailId, currentDate: applyForm.bxDate }
+    const { data } = await boxesApi.get(_pa)
+    data.avaliabilityRespList.forEach(v => {
+        v.dateTime = `${v.bxDate} ${v.hour}`
+        v.timestamp = dayjs(v.dateTime).valueOf()
+    });
+    state.rechargeList = data.avaliabilityRespList
+}
+
+const bxDateConfirm = async (e: any) => {
+    getDateRange()
+}
+
+const doTimeItem = (v: any) => {
+    if (v.status == 1) {
+        uni.showToast({ title: '该时间段已被预约', icon: "none" })
+        return
+    }
+    const flag = state.selectRechargeList.some(i => i.id == v.id)
+    if (flag) {
+        state.selectRechargeList = state.selectRechargeList.filter(i => i.id != v.id)
+        if (state.selectRechargeList.length >= 2) {
+            const { timestamp: targetMin } = min(state.selectRechargeList, (i: any) => i.timestamp)
+            state.rechargeList.forEach(i => {
+                if (i.timestamp <= v.timestamp) {
+                    state.selectRechargeList = state.selectRechargeList.filter(j => j.id != i.id)
+                }
+            })
+        }
+    } else {
+        state.selectRechargeList.push({ ...v })
+        if (state.selectRechargeList.length >= 2) {
+            const { timestamp: targetMax } = max(state.selectRechargeList, (i: any) => i.timestamp)
+            const { timestamp: targetMin } = min(state.selectRechargeList, (i: any) => i.timestamp)
+            state.rechargeList.forEach(i => {
+                if (i.timestamp >= targetMin && i.timestamp <= targetMax) {
+                    state.selectRechargeList.push({ ...i })
+                }
+            })
+        }
+    }
+    state.selectRechargeIdList = state.selectRechargeList.map(v => v.id)
+}
+
+const applyFormRef = ref<any>(null)
+const doSubmit = async () => {
+    applyFormRef.value.submit()
+    const { isPass } = applyFormRef.value.validate()
+    if (!isPass) return
+    try {
+        const { hour: hourMax } = max(state.selectRechargeList, (i: any) => i.timestamp)
+        const { hour: hourMin } = min(state.selectRechargeList, (i: any) => i.timestamp)
+        const _pa = {
+            boxesId: state.detailId,
+            startTime: hourMin,
+            endTime: hourMax,
+            bxDate: applyForm.bxDate,
+        }
+        const { data, code }: any = await boxesApi.apply(_pa)
+        if (code != 0) throw new Error()
+        uni.showLoading({ title: '预定中...', mask: false })
+        uni.hideLoading()
+        uni.showToast({ title: '申请成功', icon: "none" })
+        router.jump("/pages/boxes/apply-list")
+    } catch (error) {
+        console.error(error);
+        uni.hideLoading()
+    }
+}
+
+</script>
+
+
+<template>
+    <crud-layout title="预定" mainIsScroll bg="/static/page/blue-bg.png">
+        <view class="h-30rpx" />
+        <view class="card p-x-30rpx p-y-40rpx">
+            <tm-form ref="applyFormRef" v-model="applyForm" :rules="applyFormRules" direction="vertical">
+                <tm-form-item name="bxDate" label="预约时间" :showBottom="false">
+                    <tm-picker-date v-model="applyForm.bxDate" :start="state.pickerDate.start"
+                        :end="state.pickerDate.end" v-model:model-str="applyForm.bxDate" format="YYYY-MM-DD"
+                        @confirm="bxDateConfirm">
+                        <view :style="{ pointerEvents: state.detailType == 'view' ? 'auto' : 'none' }">
+                            <tm-input v-model="applyForm.bxDate" disabled placeholder="请选择使用时间..">
+                                <template v-slot:rightIcon>
+                                    <text v-if="state.detailType != 'view'"
+                                        class="p-0.5rem color-#b1b1b1 iconfont icon-xiangxiajiantouxiao"></text>
+                                </template>
+                            </tm-input>
+                        </view>
+                    </tm-picker-date>
+                </tm-form-item>
+            </tm-form>
+        </view>
+        <view class="prefix_title m-t-35rpx">时间段</view>
+        <view class="recharge p-30rpx bg-white rounded-20rpx m-t-20rpx shadow-main">
+            <view
+                :class="[state.selectRechargeIdList.includes(v.id) ? 'recharge_item_active' : '', v.status == 1 ? 'recharge_item_disabled' : '']"
+                class="recharge_item" v-for="(v, i) in state.rechargeList" :key="i" @tap="doTimeItem(v)">
+                <text class="sub-text-24 text-center">{{ v.bxDate }}</text>
+                <text class="sub-text-24 text-center">{{ v.hour }}</text>
+            </view>
+        </view>
+        <template #main-bottom>
+            <view v-if="state.detailType != 'view'"
+                class="bg-#0094ff p-y-20rpx text-center rounded-40rpx m-x-30rpx m-y-30rpx sub-text-30 color-white!"
+                @tap="doSubmit">
+                提交
+            </view>
+        </template>
+    </crud-layout>
+</template>
+
+<style lang="scss" scoped>
+:deep() {
+    .tmFormItemLabel {
+        padding-bottom: 10rpx !important;
+    }
+}
+
+.recharge_item_active {
+    background: #e9f5fe;
+    border: 1px solid #e9f5fe !important;
+
+    &>text {
+        color: #0094ff !important;
+    }
+}
+
+.recharge_item_disabled {
+    background: #999;
+    border: 1px solid #999 !important;
+
+    &>text {
+        color: white !important;
+    }
+}
+
+.recharge {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 15rpx;
+    border-bottom: 1px solid #f9f9f9;
+
+    &_item {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid #cccccc;
+        border-radius: 16rpx;
+        padding: 20rpx 0;
+    }
+}
+</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..27cca19
--- /dev/null
+++ b/src/pages/boxes/detail.vue
@@ -0,0 +1,83 @@
+<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="" mainIsScroll 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-y-30rpx sub-text-30 color-white!"
+                @tap="doSubmit">
+                预定
+            </view>
+        </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/components/product-row.vue b/src/pages/merchant/components/product-row.vue
index 23630a5..32eaef0 100644
--- a/src/pages/merchant/components/product-row.vue
+++ b/src/pages/merchant/components/product-row.vue
@@ -65,7 +65,8 @@ const remove = () => {
 
 
 <template>
-    <view class="flex-row items-start card p-x-15rpx p-y-25rpx m-b-20rpx"
+    <view :class="[props.mode == 'car' ? 'car_border' : '']"
+        class="flex-row items-start card p-x-15rpx p-y-25rpx m-b-20rpx"
         @tap="props.productId && router.jump('/pages/merchant/product-detail', { id: props.productId })">
         <image v-if="props.mode == 'default'" class=" size-180rpx rounded-12rpx" :src="props.pic" mode="aspectFill" />
         <image v-if="props.mode == 'car'" class=" size-120rpx rounded-12rpx" :src="props.pic" mode="aspectFill" />
@@ -101,4 +102,8 @@ const remove = () => {
     </view>
 </template>
 
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+.car_border {
+    border: 1px solid #f2f2f2;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/merchant/detail.vue b/src/pages/merchant/detail.vue
index 7a0bac0..41e5422 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
@@ -149,7 +148,7 @@ const doVisibleCar = async () => {
     state.showCarDialog = true
 }
 
-const doPay = async () => {
+const submitPay = async () => {
     try {
         if (isEmpty(state.carList)) {
             uni.showToast({ title: '请至少购买一件商品', icon: "none" })
@@ -171,6 +170,18 @@ const doPay = async () => {
     }
 }
 
+const doPay = async () => {
+    uni.showModal({
+        title: '提示',
+        content: '是否确定购买',
+        confirmColor: '#0094ff',
+        success: async (res) => {
+            if (!res.confirm) return
+            submitPay()
+        }
+    })
+}
+
 const getHeight = () => {
     const rpx = 480
     return `calc(100vh - ${uni.upx2px(rpx)}px)`
@@ -239,7 +250,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/pages/order/detail.vue b/src/pages/order/detail.vue
index 7a22b1d..f9d6516 100644
--- a/src/pages/order/detail.vue
+++ b/src/pages/order/detail.vue
@@ -4,7 +4,7 @@ import { onLoad, onShow } from "@dcloudio/uni-app";
 import { isEmpty } from "radash"
 
 import { hooks, constant, router } from "@@/index"
-import { orderApi } from "@@/api"
+import { orderApi, refundApi } from "@@/api"
 
 const data = {
 
@@ -12,6 +12,7 @@ const data = {
 const state = reactive<any>({
     detailId: null,
     detail: {},
+    refundDetail: {},
     shopCarList: [],
 })
 
@@ -30,6 +31,9 @@ const getDetail = async () => {
     const _pa = { id: state.detailId };
     const { data } = await orderApi.detail(_pa)
     state.detail = data
+    if (state.detail.orderStatus == 10) {
+        getRefundDetail()
+    }
 }
 
 const getShopCarList = async () => {
@@ -39,6 +43,30 @@ const getShopCarList = async () => {
     state.shopCarList = data
 }
 
+const getRefundDetail = async () => {
+    if (isEmpty(state.detailId)) return
+    const _pa = { id: state.detailId };
+    const { data } = await refundApi.get(_pa)
+    state.refundDetail = data
+}
+
+const doCancelRefund = async () => {
+    uni.showModal({
+        title: '提示',
+        content: '是否确定取消申请退款',
+        confirmColor: '#0094ff',
+        success: async (res) => {
+            if (!res.confirm) return
+            uni.showLoading({ title: '取消中...', mask: false });
+            const _pa = { id: state.refundDetail.id }
+            const data = refundApi.cancel(_pa)
+            uni.hideLoading()
+            uni.showToast({ title: '取消成功', icon: "none" });
+            router.jump("/pages/tabbar/order", {}, 2)
+        }
+    })
+}
+
 </script>
 
 
@@ -89,7 +117,7 @@ const getShopCarList = async () => {
                 <view class="flex-row items-start justify-between" v-for="(v, i) in state.shopCarList" :key="i"
                     @tap.stop="router.jump('/pages/merchant/product-detail', { id: v.productId })">
                     <view class="flex-row items-center">
-                        <image class="w-160rpx h-160rpx" :src="v.productPic" mode="aspectFill" />
+                        <image class="w-160rpx h-160rpx rounded-8rpx" :src="v.productPic" mode="aspectFill" />
                         <view class="flex-col m-l-15rpx second-text-26">
                             <view class="sub-text-28">{{ v.productName }}</view>
                             <view class="m-t-5rpx">¥ {{ hooks.useMoney(v.productPrice) }}</view>
@@ -110,6 +138,52 @@ const getShopCarList = async () => {
                 </view>
             </view>
         </view>
+        <!-- start 退款相关 start -->
+        <slot v-if="state.detail.orderStatus == 10">
+            <view class="flex-row items-center justify-between card p-x-20rpx p-y-30rpx m-b-20rpx"
+                @tap="router.jump('/pages/refund/history', { id: state.refundDetail.id })">
+                <view>
+                    <view class="sub-text-28">
+                        <view>退款申请待商家处理</view>
+                    </view>
+                    <view class="m-t-10rpx second-text-26">
+                        {{ hooks.useTime(state.refundDetail.updateTime, "") }}
+                    </view>
+                </view>
+                <view class="m-l-15rpx color-#999 font-size-26rpx! iconfont icon-youjiantou" />
+            </view>
+            <view class="flex-row items-center justify-between card p-x-20rpx p-y-30rpx m-b-20rpx">
+                <view class="sub-text-28">退款金额</view>
+                <view class="sub-text-28 color-red!">¥{{ hooks.useMoney(state.refundDetail.refundPrice) }}</view>
+            </view>
+            <view class="card p-x-20rpx p-y-30rpx space-y-10rpx m-b-20rpx second-text-24">
+                <view class="flex-row items-center">
+                    <view>服务单号：</view>
+                    <view>{{ state.refundDetail.no }}</view>
+                </view>
+                <view class="flex-row items-center">
+                    <view>申请时间：</view>
+                    <view>{{ hooks.useTime(state.refundDetail.createTime, "") }}</view>
+                </view>
+                <view class="flex-row items-center">
+                    <view>售后类型：</view>
+                    <view>{{ state.refundDetail.applyReason }}</view>
+                </view>
+                <view class="flex-row items-center">
+                    <view>相关描述：</view>
+                    <view>{{ state.refundDetail.applyDescription }}</view>
+                </view>
+            </view>
+        </slot>
+        <!-- end 退款相关 end -->
+        <view class="h-30rpx" />
+        <template #main-bottom>
+            <view v-if="state.detail.orderStatus == 10 && !state.detail.applyCancelTime"
+                class="bg-#999 p-y-20rpx text-center rounded-40rpx m-x-30rpx m-y-30rpx sub-text-30 color-white!"
+                @tap="doCancelRefund">
+                取消申请
+            </view>
+        </template>
     </crud-layout>
 </template>
 
diff --git a/src/pages/refund/apply.vue b/src/pages/refund/apply.vue
new file mode 100644
index 0000000..b92e356
--- /dev/null
+++ b/src/pages/refund/apply.vue
@@ -0,0 +1,186 @@
+<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 { orderApi, refundApi, commonApi } from "@@/api"
+
+const data = {
+    payType: [
+        { text: "仅退款", disabled: false, type: "10", value: "10" },
+        { text: "退款退货", disabled: true, type: "20", value: "20" },
+    ]
+}
+const state = reactive<any>({
+    detailId: null,
+    detail: {},
+    shopCarList: [],
+    setting: {},
+    selectList: []
+})
+
+const applyForm = reactive<any>({
+    way: data.payType[0].type,
+    remark: "",
+    reason: "",
+    reasonStr: "",
+})
+
+onLoad((options: any) => {
+    if (!isEmpty(options.id)) {
+        state.detailId = options.id
+    }
+});
+onShow(() => {
+    getDetail()
+    getSetting()
+    getShopCarList()
+})
+
+const getSetting = async () => {
+    const _pa = {};
+    const { data } = await commonApi.setting(_pa)
+    state.setting = data
+    state.selectList = data.afterSaleRefundReasons.map(v => {
+        return {
+            id: v,
+            title: v,
+        }
+    })
+}
+const getDetail = async () => {
+    if (isEmpty(state.detailId)) return
+    const _pa = { id: state.detailId };
+    const { data } = await orderApi.detail(_pa)
+    state.detail = data
+}
+const getShopCarList = async () => {
+    if (isEmpty(state.detailId)) return
+    const _pa = { orderId: state.detailId };
+    const { data } = await orderApi.shopCarList(_pa)
+    state.shopCarList = data
+}
+
+const radioChange = (e: any) => {
+    switch (e) {
+        case "10":
+            state.selectList = state.setting.afterSaleRefundReasons.map(v => {
+                return {
+                    id: v,
+                    title: v,
+                }
+            })
+            break
+        case "20":
+            state.selectList = state.setting.afterSaleReturnReasons.map(v => {
+                return {
+                    id: v,
+                    title: v,
+                }
+            })
+            break
+    }
+}
+
+const doSubmit = async () => {
+    if (isEmpty(applyForm.reasonStr)) {
+        uni.showToast({ title: '请选择申请原因', icon: "none" });
+        return
+    }
+    const _pa = {
+        way: applyForm.way,
+        refundPrice: state.detail.practicalTotalPrice,
+        orderItemId: state.detailId,
+        images: [],
+        applyReason: applyForm.reasonStr,
+        applyDescription: applyForm.remark,
+    }
+    try {
+        uni.showLoading({ title: '申请中...', mask: false });
+        const data = await refundApi.create(_pa)
+        uni.hideLoading()
+        uni.showToast({ title: '申请成功', icon: "none" });
+        router.jump("/pages/order/detail", { id: state.detailId })
+    } catch (error) {
+        console.error(error);
+        uni.hideLoading()
+    }
+}
+
+</script>
+
+
+<template>
+    <crud-layout title="申请售后" mainIsScroll bg="/static/page/blue-bg.png">
+        <view class="h-30rpx" />
+        <view class="flex-col justify-center card p-x-20rpx p-y-30rpx m-b-20rpx">
+            <view class="m-t-15rpx">
+                <view class="flex-row items-start justify-between" v-for="(v, i) in state.shopCarList" :key="i"
+                    @tap.stop="router.jump('/pages/merchant/product-detail', { id: v.productId })">
+                    <view class="flex-row items-center">
+                        <image class="w-160rpx h-160rpx rounded-8rpx" :src="v.productPic" mode="aspectFill" />
+                        <view class="flex-col m-l-15rpx second-text-26">
+                            <view class="sub-text-28">{{ v.productName }}</view>
+                            <view class="m-t-5rpx">¥ {{ hooks.useMoney(v.productPrice) }}</view>
+                            <view class="m-t-5rpx">x {{ v.productCount }}</view>
+                        </view>
+                    </view>
+                    <view class="flex-row-center">
+                        <view class="sub-text-32">¥ {{ hooks.useMoney(v.totalPrice) }}</view>
+                    </view>
+                </view>
+                <view class="m-y-15rpx h-1px bg-#999 bg-opacity-5" />
+                <view class="flex-row items-center justify-between">
+                    <view class="sub-text-28">实付款</view>
+                    <view class="flex-row items-end">
+                        <view class="sub-text-28">¥</view>
+                        <view class="m-l-5rpx sub-text-28">{{ hooks.useMoney(state.detail.practicalTotalPrice) }}</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="card p-x-20rpx p-y-30rpx m-b-20rpx">
+            <view class="sub-text-28">售后类型</view>
+            <view class="m-t-20rpx">
+                <tm-radio-group @change="radioChange" direction="column" gap="20" v-model="applyForm.way">
+                    <tm-radio :disabled="v.disabled" v-for="(v, i) in data.payType" :key="i" :value="v.type"
+                        :label="v.text" />
+                </tm-radio-group>
+            </view>
+        </view>
+        <view class="flex-row items-center justify-between card p-x-20rpx p-y-30rpx m-b-20rpx">
+            <view class="sub-text-28">退款金额</view>
+            <view class="sub-text-28 color-red!">¥{{ hooks.useMoney(state.detail.practicalTotalPrice) }}</view>
+        </view>
+        <view class="card p-x-20rpx p-y-30rpx m-b-20rpx">
+            <tm-picker rang-key="title" rang-text="title" v-model="applyForm.reason"
+                v-model:model-str="applyForm.reasonStr" :list="state.selectList">
+                <view class="flex-row items-center justify-between">
+                    <view class="sub-text-28">申请原因</view>
+                    <view class="flex-row items-center second-text-24">
+                        <text>{{ applyForm.reasonStr || '请选择申请原因' }} </text>
+                        <text class="m-l-10rpx color-#b1b1b1 iconfont icon-xiangxiajiantouxiao" />
+                    </view>
+                </view>
+            </tm-picker>
+        </view>
+        <view class="flex-col justify-center card p-x-20rpx p-y-30rpx m-b-20rpx">
+            <view class="sub-text-28">相关描述</view>
+            <view class="m-t-20rpx">
+                <tm-input v-model="applyForm.remark" type="textarea" :showClear="false"
+                    placeholder="客官～请描述您遇到的问题"></tm-input>
+            </view>
+        </view>
+        <view class="h-30rpx" />
+        <template #main-bottom>
+            <view v-if="state.detailType != 'view'"
+                class="bg-#0094ff p-y-20rpx text-center rounded-40rpx m-x-30rpx m-y-30rpx sub-text-30 color-white!"
+                @tap="doSubmit">
+                提交申请
+            </view>
+        </template>
+    </crud-layout>
+</template>
+
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/pages/refund/history.vue b/src/pages/refund/history.vue
new file mode 100644
index 0000000..4d827d4
--- /dev/null
+++ b/src/pages/refund/history.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { onLoad, onShow } from "@dcloudio/uni-app";
+import { isEmpty } from "radash"
+
+import { hooks } from "@@/index"
+import { refundApi } from "@@/api"
+
+const data = {
+
+}
+const state = reactive<any>({
+    detailId: null,
+    historyList: []
+})
+
+onLoad((options: any) => {
+    if (!isEmpty(options.id)) {
+        state.detailId = options.id
+    }
+});
+onShow(() => {
+    getHistory()
+})
+
+const getHistory = async () => {
+    if (isEmpty(state.detailId)) return
+    const _pa = { id: state.detailId };
+    const { data } = await refundApi.history(_pa)
+    state.historyList = data
+}
+
+</script>
+
+
+<template>
+    <crud-layout mainIsScroll title="售后进度" bg="/static/page/blue-bg.png">
+        <view class="h-30rpx" />
+        <view class="flex card p-30rpx m-b-20rpx" v-for="(v, i) in state.historyList" :key="i">
+            <view class="m-t-10rpx size-12rpx rounded-full bg-green" />
+            <view class="m-l-15rpx">
+                <view class="sub-text-28">
+                    <view>{{ v.content }}</view>
+                </view>
+                <view class="m-t-10rpx second-text-26">
+                    {{ hooks.useTime(v.updateTime, "") }}
+                </view>
+            </view>
+        </view>
+        <view class="h-30rpx" />
+    </crud-layout>
+</template>
+
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/pages/tabbar/my.vue b/src/pages/tabbar/my.vue
index d7b1b6a..2206265 100644
--- a/src/pages/tabbar/my.vue
+++ b/src/pages/tabbar/my.vue
@@ -9,6 +9,7 @@ import { merchantApi, userApi, walletApi } from "@@/api"
 const data = {
     serviceList: [
         { text: '钱包管理', icon: '/static/icon/service_3.png', router: '/pages/wallet/list' },
+        { text: '包厢预定', icon: '/static/icon/service_4.png', router: '/pages/boxes/apply-list' },
         // { text: '车牌管理', icon: '/static/icon/service_2.png', router: '/pages/user/diff-price' },
         { text: '外来人员就餐', icon: '/static/icon/service_1.png', router: '/pages/apply/foreign-list' },
         { text: '跨单位就餐', icon: '/static/icon/service_1.png', router: '/pages/apply/stride-list' },
diff --git a/src/pages/tabbar/order.vue b/src/pages/tabbar/order.vue
index aa25474..13b6509 100644
--- a/src/pages/tabbar/order.vue
+++ b/src/pages/tabbar/order.vue
@@ -12,7 +12,7 @@ const data = {
         { id: null, name: '全部', disabled: false },
         { id: 1, name: '未支付', disabled: false },
         { id: 5, name: '待核销', disabled: false },
-        { id: 10, name: '已退款', disabled: false },
+        { id: 10, name: '售后中', disabled: false },
         { id: 15, name: '已核销', disabled: false },
     ]
 }
@@ -51,6 +51,8 @@ const doAppraise = () => {
 }
 
 const doRefund = (v: any) => {
+    router.jump("/pages/refund/apply", { id: v.id })
+    return
     uni.showModal({
         title: '提示',
         content: '是否确定退款',
@@ -70,7 +72,7 @@ const doRefund = (v: any) => {
                 uni.hideLoading()
             }
         }
-    });
+    })
 }
 
 </script>
@@ -100,7 +102,7 @@ const doRefund = (v: any) => {
                             </view>
                             <tm-tag v-if="v.orderStatus == 1" color="info" size="xs">未支付</tm-tag>
                             <tm-tag v-if="v.orderStatus == 5" color="success" size="xs">待核销</tm-tag>
-                            <tm-tag v-if="v.orderStatus == 10" color="error" size="xs">已退款</tm-tag>
+                            <tm-tag v-if="v.orderStatus == 10" color="error" size="xs">售后中</tm-tag>
                             <tm-tag v-if="v.orderStatus == 15" size="xs">已核销</tm-tag>
                         </view>
                         <view class="m-t-5rpx">
diff --git a/src/sheep/api/boxes.ts b/src/sheep/api/boxes.ts
new file mode 100644
index 0000000..606f141
--- /dev/null
+++ b/src/sheep/api/boxes.ts
@@ -0,0 +1,58 @@
+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,
+      },
+    }),
+  get: (data: any) =>
+    request({
+      url: "boxes/info/api/get",
+      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/common.ts b/src/sheep/api/common.ts
index 8c60b54..28c11b5 100644
--- a/src/sheep/api/common.ts
+++ b/src/sheep/api/common.ts
@@ -1,3 +1,13 @@
 import request from "@/sheep/utils/request";
 
-export default {};
+export default {
+  setting: (params: any) =>
+    request({
+      url: "pay/setting/get",
+      method: "GET",
+      params,
+      custom: {
+        showLoading: false,
+      },
+    }),
+};
diff --git a/src/sheep/api/index.ts b/src/sheep/api/index.ts
index a36c3e0..42acaf0 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";
@@ -12,6 +14,8 @@ export { default as payApi } from "./pay";
 
 export { default as productApi } from "./product";
 
+export { default as refundApi } from "./refund";
+
 export { default as userApi } from "./user";
 
 export { default as walletApi } from "./wallet";
diff --git a/src/sheep/api/refund.ts b/src/sheep/api/refund.ts
new file mode 100644
index 0000000..59da91e
--- /dev/null
+++ b/src/sheep/api/refund.ts
@@ -0,0 +1,32 @@
+import request from "@/sheep/utils/request";
+
+export default {
+  create: (data: any) => {
+    return request({
+      url: "/hardware/trade-after-sale/create",
+      method: "POST",
+      data,
+    });
+  },
+  get: (params: any) => {
+    return request({
+      url: "/hardware/trade-after-sale/get-by-order-id",
+      method: "GET",
+      params,
+    });
+  },
+  history: (params: any) => {
+    return request({
+      url: "/hardware/trade-after-sale/history",
+      method: "GET",
+      params,
+    });
+  },
+  cancel: (params: any) => {
+    return request({
+      url: "/hardware/trade-after-sale/cancel",
+      method: "GET",
+      params,
+    });
+  },
+};
diff --git a/src/sheep/components/crud/crud-layout/crud-layout.vue b/src/sheep/components/crud/crud-layout/crud-layout.vue
index 68d9a90..ce46af3 100644
--- a/src/sheep/components/crud/crud-layout/crud-layout.vue
+++ b/src/sheep/components/crud/crud-layout/crud-layout.vue
@@ -155,7 +155,9 @@ page {
       // background: #ecf4f9;
     }
 
-    &_bottom {}
+    &_bottom {
+      box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.1);
+    }
   }
 
   &_foot {}
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,
 };
diff --git a/src/static/icon/service_4.png b/src/static/icon/service_4.png
new file mode 100644
index 0000000..261355f
Binary files /dev/null and b/src/static/icon/service_4.png differ
diff --git a/src/uni_modules/tm-ui/components/tm-picker-date/tm-picker-date.vue b/src/uni_modules/tm-ui/components/tm-picker-date/tm-picker-date.vue
index b4dfce0..b4e923d 100644
--- a/src/uni_modules/tm-ui/components/tm-picker-date/tm-picker-date.vue
+++ b/src/uni_modules/tm-ui/components/tm-picker-date/tm-picker-date.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, computed, onMounted, watch, PropType } from 'vue';
+import { ref, computed, onMounted, watch, type PropType } from 'vue';
 import { useTmConfig } from "../../libs/config";
 import { tmDate, type tmDateTypeTime, createDate } from '../../libs/tmDate';
 import pickerItem from './../tm-picker-view/picker-item.vue';
@@ -528,7 +528,7 @@ onMounted(() => {
 	</view>
 	<tm-drawer @open="onOpen" :widthCoverCenter="true" :disabledScroll="true" :title="title" @close="onClose"
 		@confirm="onConfirm" @cancel="onCancel" :showFooter="true" v-model:show="show" :show-close="true" size="850">
-		<view v-if="yanchiDuration&&show" class="tmPickerDateWrap">
+		<view v-if="yanchiDuration && show" class="tmPickerDateWrap">
 			<picker-item @change-deep="change" :selected-index="_modelValueIndex" :list="dateList"
 				:cell-units="cellUnits.slice(0, dateList.length)"></picker-item>
 		</view>
diff --git a/src/uni_modules/tm-ui/components/tm-picker-view/tm-picker-view.vue b/src/uni_modules/tm-ui/components/tm-picker-view/tm-picker-view.vue
index 7041120..df2bf50 100644
--- a/src/uni_modules/tm-ui/components/tm-picker-view/tm-picker-view.vue
+++ b/src/uni_modules/tm-ui/components/tm-picker-view/tm-picker-view.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, computed, onMounted, onBeforeUnmount, watch, PropType, getCurrentInstance, ComponentInstance, onUpdated, nextTick, VueElement, inject } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount, watch, type PropType, getCurrentInstance, type ComponentInstance, onUpdated, nextTick, VueElement, inject } from 'vue';
 import { arrayNumberValid, arrayNumberValidByStyleMP, covetUniNumber, arrayNumberValidByStyleBorderColor, linearValid, getUnit, getUid } from "../../libs/tool";
 import { getDefaultColor, getDefaultColorObj, getOutlineColorObj, getTextColorObj, getThinColorObj } from "../../libs/colors";
 import { useTmConfig } from "../../libs/config";
@@ -54,7 +54,7 @@ const props = defineProps({
      * 当前选中项的id值
      */
     modelValue: {
-        type: Array<string|number>,
+        type: Array<string | number>,
         default: (): string[] => [] as string[]
     },
     /**
@@ -96,7 +96,7 @@ const props = defineProps({
 
 const _cellUnits = computed(() => props.cellUnits)
 const _list = computed(() => props.list)
-const _nowShowList = ref<Record<string,any>[][]>([])
+const _nowShowList = ref<Record<string, any>[][]>([])
 const _maxDeep = computed(() => {
     if (_list.value.length == 0) return 0;
     function getdiepWidth(list: TM_PICKER_X_ITEM[]): number {
@@ -114,28 +114,28 @@ const _maxDeep = computed(() => {
 const oninitFun = () => {
     nowValue.value = props.modelValue.slice(0)
     let currneinexs = getIndexsByids(nowValue.value).indexs;
-    _modelValueIndex.value =  nowValue.value.length==0||currneinexs.length==0?new Array(_maxDeep.value).fill(0):currneinexs;
-    const {data,strs,ids} = getIdsByindexs(_modelValueIndex.value)
+    _modelValueIndex.value = nowValue.value.length == 0 || currneinexs.length == 0 ? new Array(_maxDeep.value).fill(0) : currneinexs;
+    const { data, strs, ids } = getIdsByindexs(_modelValueIndex.value)
     _nowShowList.value = data.slice(0)
-    if(nowValue.value.length==0){
-        nowValue.value  = ids.slice(0)
-       nextTick(()=>{
-        emits('update:modelStr', strs.join(","))
-        emits('update:modelValue', ids.slice(0))
-      
-       })
+    if (nowValue.value.length == 0) {
+        nowValue.value = ids.slice(0)
+        nextTick(() => {
+            emits('update:modelStr', strs.join(","))
+            emits('update:modelValue', ids.slice(0))
+
+        })
 
     }
-   
-    
+
+
 }
 const change = (ixs: number[]) => {
-    
-    const {ids,data,strs} = getIdsByindexs(ixs)
+
+    const { ids, data, strs } = getIdsByindexs(ixs)
     _modelValueIndex.value = getIndexsByids(ids).indexs;
     _nowShowList.value = data.slice(0)
     nowValue.value = ids;
-    
+
     /**
      * 等同v-model
      */
@@ -148,14 +148,14 @@ const change = (ixs: number[]) => {
 
 
 // 根据id返回索引
-const getIndexsByids = (ids:Array<string|number>):{indexs:Array<number>,data:TM_PICKER_X_ITEM[][],strs:string[]}=> {
+const getIndexsByids = (ids: Array<string | number>): { indexs: Array<number>, data: TM_PICKER_X_ITEM[][], strs: string[] } => {
     let index = 0;
     let val = ids.slice(0)
     let indexs = [] as number[]
     let data = [] as TM_PICKER_X_ITEM[][]
     let strs = [] as string[]
 
-    if(_list.value.length==0||ids.length==0) return {indexs:[],data:[],strs:[]}
+    if (_list.value.length == 0 || ids.length == 0) return { indexs: [], data: [], strs: [] }
 
     function getIndex(nodes: TM_PICKER_X_ITEM[]) {
         if (val.length <= index || val.length == 0) return;
@@ -176,47 +176,47 @@ const getIndexsByids = (ids:Array<string|number>):{indexs:Array<number>,data:TM_
         }
     }
     getIndex(_list.value)
-    return {indexs,data,strs}
+    return { indexs, data, strs }
 }
 //根据索引返回ids
-const getIdsByindexs = (indexs:number[]):{ids:Array<string|number>,data:TM_PICKER_X_ITEM[][],strs:string[]} => {
+const getIdsByindexs = (indexs: number[]): { ids: Array<string | number>, data: TM_PICKER_X_ITEM[][], strs: string[] } => {
     let ids = [] as string[]
     let data = [] as TM_PICKER_X_ITEM[][]
     let index = 0;
     let val = indexs.slice(0)
     let strs = [] as string[]
-    
-    if(_list.value.length==0||indexs.length==0) return {ids:[],data:[],strs:[]}
+
+    if (_list.value.length == 0 || indexs.length == 0) return { ids: [], data: [], strs: [] }
     function getIds(nodes: TM_PICKER_X_ITEM[]) {
         if (val.length <= index || val.length == 0) return;
         let currentsIndex = val[index]
         let id = ''
         let str = ''
         let children = [];
-        if(nodes.length-1 >= currentsIndex){
+        if (nodes.length - 1 >= currentsIndex) {
             id = nodes[currentsIndex][props.rangKey]
             str = nodes[currentsIndex][props.rangText]
-            children = nodes[currentsIndex]?.children??[]
-        }else{
+            children = nodes[currentsIndex]?.children ?? []
+        } else {
             id = nodes[0][props.rangKey]
             str = nodes[0][props.rangText]
-            children = nodes[0]?.children??[]
+            children = nodes[0]?.children ?? []
         }
         ids.push(id)
         data.push(nodes)
         strs.push(str)
 
-        if(children.length>0){
+        if (children.length > 0) {
             index += 1
             getIds(children)
         }
     }
     getIds(_list.value)
-    return {ids,data,strs};
+    return { ids, data, strs };
 }
 
-const getNowCurrent = ()=>{
-    return  getIdsByindexs(_modelValueIndex.value)
+const getNowCurrent = () => {
+    return getIdsByindexs(_modelValueIndex.value)
 }
 // 获取相关数据。
 
@@ -233,11 +233,11 @@ onBeforeUnmount(() => {
 watch(() => props.modelValue, (newValue: Array<string | number>) => {
     if (newValue.join('') == nowValue.value.join('')) return;
     nowValue.value = newValue.slice(0);
-    
-    let defauleindexs =  nowValue.value.length==0?new Array(_maxDeep.value).fill(0):getIndexsByids(nowValue.value).indexs;
+
+    let defauleindexs = nowValue.value.length == 0 ? new Array(_maxDeep.value).fill(0) : getIndexsByids(nowValue.value).indexs;
     _modelValueIndex.value = defauleindexs;
 
-    const {data,strs} = getIdsByindexs(_modelValueIndex.value)
+    const { data, strs } = getIdsByindexs(_modelValueIndex.value)
     _nowShowList.value = data.slice(0)
     emits('update:modelStr', strs.join(","))
 
@@ -248,7 +248,7 @@ watch(() => props.list, (newValue) => {
     oninitFun()
 }, { deep: true })
 
-defineExpose({getIndexsByids,getIdsByindexs,getNowCurrent,onInit:oninitFun})
+defineExpose({ getIndexsByids, getIdsByindexs, getNowCurrent, onInit: oninitFun })
 
 </script>
 <script lang="ts">
@@ -263,14 +263,11 @@ export default {
 </script>
 <template>
     <view class="tmPickerView">
-        <picker-item :rangKey="props.rangKey" :rangText="props.rangText" 
-            :font-size="props.fontSize" :cellUnits="_cellUnits" @changeDeep="change"
-            :selectedIndex="_modelValueIndex" :list="_nowShowList"
+        <picker-item :rangKey="props.rangKey" :rangText="props.rangText" :font-size="props.fontSize"
+            :cellUnits="_cellUnits" @changeDeep="change" :selectedIndex="_modelValueIndex" :list="_nowShowList"
             class="tmPickerViewItem"></picker-item>
     </view>
 </template>
 <style scoped>
-.tmPickerView {
-    
-}
+.tmPickerView {}
 </style>
\ No newline at end of file