diff --git a/src/index/index.vue b/src/index/index.vue new file mode 100644 index 0000000..eaa49e1 --- /dev/null +++ b/src/index/index.vue @@ -0,0 +1,1224 @@ + + +{ + "layout": "tabbar", + "needLogin": false, + "style": { + // 'custom' 表示开启自定义导航栏,默认 'default' + "navigationStyle": "custom", + "navigationBarTitleText": "首页" + } +} + + + + + + + diff --git a/src/order/cancelled-order-detail.vue b/src/order/cancelled-order-detail.vue new file mode 100644 index 0000000..0c2909f --- /dev/null +++ b/src/order/cancelled-order-detail.vue @@ -0,0 +1,698 @@ + +{ + "needLogin": false, + "layout": "default", + "style": { + "navigationStyle": "custom" + } +} + + + + + + + + diff --git a/src/order/order-detail.vue b/src/order/order-detail.vue new file mode 100644 index 0000000..8fd6119 --- /dev/null +++ b/src/order/order-detail.vue @@ -0,0 +1,272 @@ + +{ + "needLogin": true, + "layout": "default", + "style": { + "navigationStyle": "custom" + } +} + + + + + + + + diff --git a/src/order/order.vue b/src/order/order.vue new file mode 100644 index 0000000..0eb3652 --- /dev/null +++ b/src/order/order.vue @@ -0,0 +1,806 @@ + + +{ + "needLogin": false, + "layout": "tabbar", + "style": { + // 'custom' 表示开启自定义导航栏,默认 'default' + "navigationStyle": "custom", + "navigationBarTitleText": "订单" + } +} + + + + + + + diff --git a/src/order/pending-order-detail.vue b/src/order/pending-order-detail.vue new file mode 100644 index 0000000..4aeb205 --- /dev/null +++ b/src/order/pending-order-detail.vue @@ -0,0 +1,754 @@ + +{ + "needLogin": false, + "layout": "default", + "style": { + "navigationStyle": "custom" + } +} + + + + + + + diff --git a/src/order/serving-detail.vue b/src/order/serving-detail.vue new file mode 100644 index 0000000..57a29ef --- /dev/null +++ b/src/order/serving-detail.vue @@ -0,0 +1,1172 @@ + +{ + "needLogin": false, + "layout": "default", + "style": { + "navigationStyle": "custom" + } +} + + + + + + + diff --git a/src/order/waiting-service-detail.vue b/src/order/waiting-service-detail.vue new file mode 100644 index 0000000..39dbb02 --- /dev/null +++ b/src/order/waiting-service-detail.vue @@ -0,0 +1,806 @@ + +{ + "needLogin": false, + "layout": "default", + "style": { + "navigationStyle": "custom" + } +} + + + + + + + diff --git a/src/tabbar/config.ts b/src/tabbar/config.ts index af9ecde..91f6b28 100644 --- a/src/tabbar/config.ts +++ b/src/tabbar/config.ts @@ -3,11 +3,11 @@ import type { TabBar } from '@uni-helper/vite-plugin-uni-pages' type NativeTabBarItem = TabBar['list'][0] type CustomTabBarItem = (Pick & { - iconType: 'uniUi' | 'uiLib' | 'unocss' | 'iconfont' | 'image' // 不建议用 image 模式,需要配置2张图 - icon: any // 其实是 string 类型,这里是为了避免 ts 报错 (tabbar/index.vue 里面 uni-icons 那行) - activeIcon?: string // 只有在 image 模式下才需要,传递的是高亮的图片(PS: 不建议用 image 模式) - badge?: number | 'dot' // badge 显示一个数字或 小红点(样式可以直接在 tabbar/index.vue 里面修改) - isBulge?: boolean // 是否是中间的鼓包tabbarItem + iconType: 'uniUi' | 'uiLib' | 'unocss' | 'iconfont' | 'image' // 不建议用 image 模式,需要配置2张图 + icon: any // 其实是 string 类型,这里是为了避免 ts 报错 (tabbar/index.vue 里面 uni-icons 那行) + activeIcon?: string // 只有在 image 模式下才需要,传递的是高亮的图片(PS: 不建议用 image 模式) + badge?: number | 'dot' // badge 显示一个数字或 小红点(样式可以直接在 tabbar/index.vue 里面修改) + isBulge?: boolean // 是否是中间的鼓包tabbarItem }) /** @@ -20,117 +20,121 @@ type CustomTabBarItem = (Pick & { * 温馨提示:本文件的任何代码更改了之后,都需要重新运行,否则 pages.json 不会更新导致配置不生效 */ export const TABBAR_MAP = { - NO_TABBAR: 0, - NATIVE_TABBAR: 1, - CUSTOM_TABBAR_WITH_CACHE: 2, - CUSTOM_TABBAR_WITHOUT_CACHE: 3, + NO_TABBAR: 0, + NATIVE_TABBAR: 1, + CUSTOM_TABBAR_WITH_CACHE: 2, + CUSTOM_TABBAR_WITHOUT_CACHE: 3, } // TODO: 1/3. 通过这里切换使用tabbar的策略 -export const selectedTabbarStrategy = TABBAR_MAP.NATIVE_TABBAR +// 使用自定义tabbar(wot-design-uni组件),支持缓存 +export const selectedTabbarStrategy = TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE // TODO: 2/3. 更新下面的 tabbar 配置 // 如果是使用 NO_TABBAR(0),nativeTabbarList 和 customTabbarList 都不生效(里面的配置不用管) // 如果是使用 NATIVE_TABBAR(1),customTabbarList 不生效(里面的配置不用管) // 如果是使用 CUSTOM_TABBAR(2,3),nativeTabbarList 不生效(里面的配置不用管) // pagePath 是 nativeTabbarList 和 customTabbarList 的关联点,如果没有对应上,会有问题!! -export const nativeTabbarList: NativeTabBarItem[] = [ - { - iconPath: 'static/tabbar/home.png', - selectedIconPath: 'static/tabbar/home_s.png', - pagePath: 'pages/index/index', - text: '首页', - }, - { - iconPath: 'static/tabbar/order.png', - selectedIconPath: 'static/tabbar/order_s.png', - pagePath: 'pages/order/order', - text: '订单', - }, - { - iconPath: 'static/tabbar/store.png', - selectedIconPath: 'static/tabbar/store_s.png', - pagePath: 'pages/store/store', - text: '门店管理', - }, - { - iconPath: 'static/tabbar/my.png', - selectedIconPath: 'static/tabbar/my_s.png', - pagePath: 'pages/my/my', - text: '我的', - } +export const nativeTabbarList: (NativeTabBarItem & { + icon?: string // wot-design-uni 图标名称 + selectedIcon?: string // wot-design-uni 选中图标名称 +})[] = [ + { + iconPath: 'static/tabbar/home.png', + selectedIconPath: 'static/tabbar/home_s.png', + pagePath: 'pages/index/index', + text: '首页', + // icon: 'home-o', + // selectedIcon: 'home', + }, + { + iconPath: 'static/tabbar/order.png', + selectedIconPath: 'static/tabbar/order_s.png', + pagePath: 'pages/order/order', + text: '订单', + // icon: 'orders-o', + // selectedIcon: 'orders', + }, + { + iconPath: 'static/tabbar/my.png', + selectedIconPath: 'static/tabbar/my_s.png', + pagePath: 'pages/my/my', + text: '我的', + // icon: 'user-o', + // selectedIcon: 'user', + }, ] // pagePath 是 nativeTabbarList 和 customTabbarList 的关联点,如果没有对应上,会有问题!! // 如果希望通过接口调用 customTabbarList,可以在 tabbar/index.vue 文件里面调用接口 // 本文件因为需要提前编译生成 pages.json, 接口拦截还不生效,无法正常调用接口 export const customTabbarList: CustomTabBarItem[] = [ - { - // text 和 pagePath 可以自己直接写,也可以通过索引从 nativeTabbarList 中获取 - text: '首页', - pagePath: 'pages/index/index', // pagePath 是两者的关联点 - // 本框架内置了 uniapp 官方UI库 (uni-ui)的图标库 - // 使用方式如: - // 图标列表地址:https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html - iconType: 'uniUi', - icon: 'home', - // badge: 'dot', - }, - { - text: nativeTabbarList[1].text, - pagePath: nativeTabbarList[1].pagePath, // pagePath 是两者的关联点 - // 注意 unocss 图标需要如下处理:(二选一) - // 1)在fg-tabbar.vue页面上引入一下并注释掉(见tabbar/index.vue代码第2行) - // 2)配置到 unocss.config.ts 的 safelist 中 - iconType: 'unocss', - icon: 'i-carbon-code', - // badge: 10, - }, + { + // text 和 pagePath 可以自己直接写,也可以通过索引从 nativeTabbarList 中获取 + text: '首页', + pagePath: 'pages/index/index', // pagePath 是两者的关联点 + // 本框架内置了 uniapp 官方UI库 (uni-ui)的图标库 + // 使用方式如: + // 图标列表地址:https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html + iconType: 'uniUi', + icon: 'home', + // badge: 'dot', + }, + { + text: nativeTabbarList[1].text, + pagePath: nativeTabbarList[1].pagePath, // pagePath 是两者的关联点 + // 注意 unocss 图标需要如下处理:(二选一) + // 1)在fg-tabbar.vue页面上引入一下并注释掉(见tabbar/index.vue代码第2行) + // 2)配置到 unocss.config.ts 的 safelist 中 + iconType: 'unocss', + icon: 'i-carbon-code', + // badge: 10, + }, - // { - // pagePath: 'pages/mine/index', - // text: '我的', - // // 注意 iconfont 图标需要额外加上 'iconfont',如下 - // iconType: 'iconfont', - // icon: 'iconfont icon-my', - // }, - // { - // pagePath: 'pages/index/index', - // text: '首页', - // // 使用 ‘image’时,需要配置 icon + iconActive 2张图片(不推荐) - // // 既然已经用了自定义tabbar了,就不建议用图片了,所以不推荐 - // iconType: 'image', - // icon: '/static/tabbar/home.png', - // iconActive: '/static/tabbar/homeHL.png', - // }, + // { + // pagePath: 'pages/mine/index', + // text: '我的', + // // 注意 iconfont 图标需要额外加上 'iconfont',如下 + // iconType: 'iconfont', + // icon: 'iconfont icon-my', + // }, + // { + // pagePath: 'pages/index/index', + // text: '首页', + // // 使用 ‘image’时,需要配置 icon + iconActive 2张图片(不推荐) + // // 既然已经用了自定义tabbar了,就不建议用图片了,所以不推荐 + // iconType: 'image', + // icon: '/static/tabbar/home.png', + // iconActive: '/static/tabbar/homeHL.png', + // }, ] // NATIVE_TABBAR(1) 和 CUSTOM_TABBAR_WITH_CACHE(2) 时,需要tabbar缓存 /** 是否启用 tabbar 缓存 */ export const tabbarCacheEnable - = [TABBAR_MAP.NATIVE_TABBAR, TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE].includes(selectedTabbarStrategy) + = [TABBAR_MAP.NATIVE_TABBAR, TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE].includes(selectedTabbarStrategy) // CUSTOM_TABBAR_WITH_CACHE(2) 和 CUSTOM_TABBAR_WITHOUT_CACHE(3) 时,启用自定义tabbar /** 是否启用自定义 tabbar */ export const customTabbarEnable - = [TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE, TABBAR_MAP.CUSTOM_TABBAR_WITHOUT_CACHE].includes(selectedTabbarStrategy) + = [TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE, TABBAR_MAP.CUSTOM_TABBAR_WITHOUT_CACHE].includes(selectedTabbarStrategy) // CUSTOM_TABBAR_WITH_CACHE(2)时,需要隐藏原生tabbar /** 是否需要隐藏原生 tabbar */ export const nativeTabbarNeedHide = selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE const _tabbar: TabBar = { - // 只有微信小程序支持 custom。App 和 H5 不生效 - custom: selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE, - color: '#999999', - selectedColor: '#018d71', - backgroundColor: '#FFF', - borderStyle: 'black', - height: '50px', - fontSize: '10px', - iconWidth: '24px', - spacing: '3px', - list: nativeTabbarList as unknown as TabBar['list'], + // 只有微信小程序支持 custom。App 和 H5 不生效 + custom: selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE, + color: '#999999', + selectedColor: '#018d71', + backgroundColor: '#FFF', + borderStyle: 'black', + height: '50px', + fontSize: '10px', + iconWidth: '24px', + spacing: '3px', + list: nativeTabbarList as unknown as TabBar['list'], } export const tabbarList = nativeTabbarList diff --git a/src/tabbar/index.vue b/src/tabbar/index.vue index ba3884f..0fa308d 100644 --- a/src/tabbar/index.vue +++ b/src/tabbar/index.vue @@ -1,45 +1,62 @@ diff --git a/vite.config.ts b/vite.config.ts index 8b5629a..2ff4f91 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -82,6 +82,63 @@ export default ({ command, mode }) => { }, }, UnoCSS(), + // 修复微信小程序 WXSS 兼容性问题 + { + name: 'fix-wxss-compatibility', + enforce: 'post', + transform(code, id) { + if (UNI_PLATFORM === 'mp-weixin' && (id.endsWith('.wxss') || id.endsWith('.css'))) { + // 将 rgb(r g b / alpha) 转换为 rgba(r, g, b, alpha) + code = code.replace(/rgb\((\d+)\s+(\d+)\s+(\d+)\s*\/\s*([\d.]+)\)/g, 'rgba($1, $2, $3, $4)') + // 移除 ::backdrop 伪元素及其内容(微信小程序不支持) + code = code.replace(/::backdrop\s*\{[^}]*\}/g, '') + // 移除行首空格,避免 WXSS 解析错误 + code = code.replace(/^\s+/gm, '') + // 移除或修复可能导致问题的属性选择器(UnoCSS attributify 生成) + // 这些选择器包含转义序列(如 \32, \33)可能导致 WXSS 解析错误 + code = code.replace(/\[\\?\d+[^\]]*_a_[^\]]*=""]\{[^}]*\}/g, '') + code = code.replace(/\[[^\]]*_a_[^\]]*=""]\{[^}]*\}/g, '') + // 移除包含转义序列的属性选择器(如 [\32 6_a_25=""]) + code = code.replace(/\[\\\d+[^\]]*\]\{[^}]*\}/g, '') + // 修复 SVG 数据 URL 中的引号问题,转义单引号 + code = code.replace(/url\("data:image\/svg\+xml[^"]*"\)/g, (match) => { + return match.replace(/'/g, "\\'") + }) + return { + code, + map: null, + } + } + }, + generateBundle(options, bundle) { + if (UNI_PLATFORM === 'mp-weixin') { + // 处理所有生成的 CSS 文件 + Object.keys(bundle).forEach((fileName) => { + const file = bundle[fileName] + if (file.type === 'asset' && (fileName.endsWith('.wxss') || fileName.endsWith('.css'))) { + let css = file.source.toString() + // 将 rgb(r g b / alpha) 转换为 rgba(r, g, b, alpha) + css = css.replace(/rgb\((\d+)\s+(\d+)\s+(\d+)\s*\/\s*([\d.]+)\)/g, 'rgba($1, $2, $3, $4)') + // 移除 ::backdrop 伪元素及其内容(微信小程序不支持) + css = css.replace(/::backdrop\s*\{[^}]*\}/g, '') + // 移除行首空格,避免 WXSS 解析错误 + css = css.replace(/^\s+/gm, '') + // 移除或修复可能导致问题的属性选择器(UnoCSS attributify 生成) + // 这些选择器包含转义序列(如 \32, \33)可能导致 WXSS 解析错误 + css = css.replace(/\[\\?\d+[^\]]*_a_[^\]]*=""]\{[^}]*\}/g, '') + css = css.replace(/\[[^\]]*_a_[^\]]*=""]\{[^}]*\}/g, '') + // 移除包含转义序列的属性选择器(如 [\32 6_a_25=""]) + css = css.replace(/\[\\\d+[^\]]*\]\{[^}]*\}/g, '') + // 修复 SVG 数据 URL 中的引号问题,转义单引号 + css = css.replace(/url\("data:image\/svg\+xml[^"]*"\)/g, (match) => { + return match.replace(/'/g, "\\'") + }) + file.source = css + } + }) + } + }, + }, AutoImport({ imports: ['vue', 'uni-app'], dts: 'src/types/auto-import.d.ts',