hookehuyr

feat(页面): 在发布车源页面添加顶部导航栏

添加 NutNavbar 组件用于顶部导航,替换原生的导航栏标题设置
移除原生的 wx.setNavigationBarTitle 调用
新增返回按钮功能及样式配置
...@@ -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: '发布车源'
......