feat(页面): 在发布车源页面添加顶部导航栏
添加 NutNavbar 组件用于顶部导航,替换原生的导航栏标题设置 移除原生的 wx.setNavigationBarTitle 调用 新增返回按钮功能及样式配置
Showing
2 changed files
with
30 additions
and
4 deletions
| ... | @@ -20,6 +20,7 @@ declare module 'vue' { | ... | @@ -20,6 +20,7 @@ declare module 'vue' { |
| 20 | NutInput: typeof import('@nutui/nutui-taro')['Input'] | 20 | NutInput: typeof import('@nutui/nutui-taro')['Input'] |
| 21 | NutMenu: typeof import('@nutui/nutui-taro')['Menu'] | 21 | NutMenu: typeof import('@nutui/nutui-taro')['Menu'] |
| 22 | NutMenuItem: typeof import('@nutui/nutui-taro')['MenuItem'] | 22 | NutMenuItem: typeof import('@nutui/nutui-taro')['MenuItem'] |
| 23 | + NutNavbar: typeof import('@nutui/nutui-taro')['Navbar'] | ||
| 23 | NutOverlay: typeof import('@nutui/nutui-taro')['Overlay'] | 24 | NutOverlay: typeof import('@nutui/nutui-taro')['Overlay'] |
| 24 | NutPicker: typeof import('@nutui/nutui-taro')['Picker'] | 25 | NutPicker: typeof import('@nutui/nutui-taro')['Picker'] |
| 25 | NutPopup: typeof import('@nutui/nutui-taro')['Popup'] | 26 | NutPopup: typeof import('@nutui/nutui-taro')['Popup'] | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <view class="sell-page"> | 2 | <view class="sell-page"> |
| 3 | + <!-- 顶部导航 --> | ||
| 4 | + <nut-config-provider :theme-vars="themeVars"> | ||
| 5 | + <nut-sticky top="0"> | ||
| 6 | + <nut-navbar v-if="!isAuthMode" :title="isEditMode ? '编辑车源' : '发布车源'" left-show @on-click-back="goBack"> | ||
| 7 | + <template #left-show> | ||
| 8 | + <RectLeft color="white" /> | ||
| 9 | + </template> | ||
| 10 | + </nut-navbar> | ||
| 11 | + </nut-sticky> | ||
| 12 | + </nut-config-provider> | ||
| 13 | + | ||
| 3 | <!-- 表单内容 --> | 14 | <!-- 表单内容 --> |
| 4 | <view class="form-container"> | 15 | <view class="form-container"> |
| 5 | <!-- 车辆照片上传 --> | 16 | <!-- 车辆照片上传 --> |
| ... | @@ -285,11 +296,25 @@ | ... | @@ -285,11 +296,25 @@ |
| 285 | 296 | ||
| 286 | <script setup> | 297 | <script setup> |
| 287 | import { ref, reactive, onMounted } from 'vue' | 298 | import { ref, reactive, onMounted } from 'vue' |
| 288 | -import { Plus, Right, Location, Close } from '@nutui/icons-vue-taro' | 299 | +import { Plus, Right, Location, Close, RectLeft } from '@nutui/icons-vue-taro' |
| 289 | import Taro from '@tarojs/taro' | 300 | import Taro from '@tarojs/taro' |
| 290 | import BASE_URL from '@/utils/config'; | 301 | import BASE_URL from '@/utils/config'; |
| 291 | import './index.less' | 302 | import './index.less' |
| 292 | 303 | ||
| 304 | +const themeVars = ref({ | ||
| 305 | + navbarBackground: '#fb923c', | ||
| 306 | + navbarColor: '#ffffff', | ||
| 307 | +}) | ||
| 308 | + | ||
| 309 | +/** | ||
| 310 | + * 返回上一页 | ||
| 311 | + */ | ||
| 312 | +const goBack = () => { | ||
| 313 | + Taro.redirectTo({ | ||
| 314 | + url: '/pages/index/index' | ||
| 315 | + }) | ||
| 316 | +} | ||
| 317 | + | ||
| 293 | // 获取页面参数 | 318 | // 获取页面参数 |
| 294 | const instance = Taro.getCurrentInstance() | 319 | const instance = Taro.getCurrentInstance() |
| 295 | const { id, mode, type } = instance.router?.params || {} | 320 | const { id, mode, type } = instance.router?.params || {} |
| ... | @@ -811,9 +836,9 @@ onMounted(() => { | ... | @@ -811,9 +836,9 @@ onMounted(() => { |
| 811 | loadCarData() | 836 | loadCarData() |
| 812 | } | 837 | } |
| 813 | // 动态修改标题 | 838 | // 动态修改标题 |
| 814 | - wx.setNavigationBarTitle({ | 839 | + // wx.setNavigationBarTitle({ |
| 815 | - title: isEditMode.value ? '编辑车源' : '发布车源' | 840 | + // title: isEditMode.value ? '编辑车源' : '发布车源' |
| 816 | - }); | 841 | + // }); |
| 817 | if (isAuthMode.value) { | 842 | if (isAuthMode.value) { |
| 818 | wx.setNavigationBarTitle({ | 843 | wx.setNavigationBarTitle({ |
| 819 | title: '发布车源' | 844 | title: '发布车源' | ... | ... |
-
Please register or login to post a comment