|
@@ -1,25 +1,93 @@
|
|
<template>
|
|
<template>
|
|
<view>
|
|
<view>
|
|
- <u-navbar class="u-navbar-box" title="申请详情" placeholder bgColor="transparent" autoBack />
|
|
|
|
|
|
+ <u-navbar class="u-navbar-box" :title="handleTitle" placeholder bgColor="transparent" autoBack />
|
|
|
|
+ <!-- 小程序不支持动态表单 -->
|
|
|
|
+ <!-- <view>
|
|
|
|
+ <component :is="currentComponent"></component>
|
|
|
|
+ </view> -->
|
|
|
|
+ <!-- 加载组件 -->
|
|
|
|
+ <view>
|
|
|
|
+ <Page1 v-show="tabbarIndex === 0" />
|
|
|
|
+ <Page2 v-show="tabbarIndex === 1" />
|
|
|
|
+ <Page3 v-show="tabbarIndex === 2" />
|
|
|
|
+ </view>
|
|
|
|
+ <up-tabbar :value="tabbarIndex" @change="tabbarChange" fixed placeholder safeAreaInsetBottom>
|
|
|
|
+ <up-tabbar-item text="特困审批" icon="home" />
|
|
|
|
+ <up-tabbar-item text="基本信息" icon="home" />
|
|
|
|
+ <up-tabbar-item text="申请进度" icon="home" />
|
|
|
|
+ </up-tabbar>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
-
|
|
|
|
-</script>
|
|
|
|
|
|
+ import {
|
|
|
|
+ reactive,
|
|
|
|
+ ref,
|
|
|
|
+ computed
|
|
|
|
+ } from 'vue';
|
|
|
|
+ import Page1 from './componenets/page1.vue';
|
|
|
|
+ import Page2 from './componenets/page2.vue';
|
|
|
|
+ import Page3 from './componenets/page3.vue';
|
|
|
|
+ // 假设 Page1 和 Page2 已经通过某种方式导入或全局注册
|
|
|
|
+ // const components = ref([Page1, Page2);
|
|
|
|
+ // 计算属性来确定要渲染的组件名称
|
|
|
|
+ // const pages = [Page1, Page2, Page3];
|
|
|
|
+ // const currentComponent = computed(() => pages[tabbarIndex.value]);
|
|
|
|
+ //tabbar
|
|
|
|
+ const tabbarIndex = ref(0);
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
|
|
|
+ function tabbarChange(index) {
|
|
|
|
+ if (index === tabbarIndex) return;
|
|
|
|
+ tabbarIndex.value = index;
|
|
|
|
+ }
|
|
|
|
+ const handleTitle = computed(() => {
|
|
|
|
+ if (tabbarIndex.value === 0) return '特困审批';
|
|
|
|
+ else if (tabbarIndex.value === 1) return '基本信息';
|
|
|
|
+ else return '申请进度';
|
|
|
|
+ })
|
|
|
|
+</script>
|
|
|
|
+<style>
|
|
page {
|
|
page {
|
|
background-color: #F6F8FD;
|
|
background-color: #F6F8FD;
|
|
}
|
|
}
|
|
-
|
|
|
|
- :deep(.u-navbar__content__title) {
|
|
|
|
- font-weight: bold;
|
|
|
|
- font-size: 36rpx;
|
|
|
|
- color: #222222;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
|
|
+</style>
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+ ::v-deep{
|
|
|
|
+ .u-navbar__content__title{
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
+ color: #222222;
|
|
|
|
+ }
|
|
|
|
+ .u-navbar__content{
|
|
|
|
+ background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
|
|
|
|
+ }
|
|
|
|
+ .u-textarea{
|
|
|
|
+ background-color: rgba(245, 248, 252, 1) !important;
|
|
|
|
+ border: none;
|
|
|
|
+ }
|
|
|
|
+ .u-textarea__count{
|
|
|
|
+ background-color: transparent !important;
|
|
|
|
+ }
|
|
|
|
+ .u-steps-item{
|
|
|
|
+ padding-bottom: 50rpx;
|
|
|
|
+ }
|
|
|
|
+ .u-steps-item__line {
|
|
|
|
+ background: repeating-linear-gradient(to bottom,
|
|
|
|
+ #207DFF 0,
|
|
|
|
+ #207DFF 2rpx,
|
|
|
|
+ transparent 4rpx,
|
|
|
|
+ transparent 8rpx) !important;
|
|
|
|
+ }
|
|
|
|
+ .u-steps-item__content {
|
|
|
|
+ margin-top: 0 !important;
|
|
|
|
+ margin-left: 30rpx !important;
|
|
|
|
+ .u-text__value{
|
|
|
|
+ font-size: 32rpx !important;
|
|
|
|
+ color: #222222 !important;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
.u-navbar-box {
|
|
.u-navbar-box {
|
|
background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
|
|
background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
|
|
}
|
|
}
|
|
-</style>
|
|
|
|
|
|
+</style>
|