feat: 添加静态资源配置和页面结构优化

- 新增 VITE_STATIC_BASE_URL 环境变量配置到所有环境文件
- 添加 voucher 和 order 页面到路由配置
- 替换 about 页面为 voucher 页面，新增 order 页面
- 更新主题色为 #9ED605
- 添加 tabbar 图标切换功能，支持激活状态图标
- 实现首页页面重构，添加轮播图、筛选tabs和加油站列表
- 优化 App.vue 中的全局样式变量

.env.development

@@ -4,5 +4,7 @@
 # API 基础 URL - 开发环境
 VITE_API_BASE_URL=https://petstore3.swagger.io/api/v3
 
+# 静态资源基础 URL - 测试环境
+VITE_STATIC_BASE_URL=https://zswl-smqjh.oss-cn-chengdu.aliyuncs.com/static/static
 # 环境名称
 VITE_ENV_NAME=development

.env.production

@@ -4,5 +4,7 @@
 # API 基础 URL - 生产环境
 VITE_API_BASE_URL=https://api.yourapp.com
 
+# 静态资源基础 URL - 测试环境
+VITE_STATIC_BASE_URL=https://zswl-smqjh.oss-cn-chengdu.aliyuncs.com/static/static
 # 环境名称
 VITE_ENV_NAME=production

.env.staging

@@ -4,5 +4,9 @@
 # API 基础 URL - 测试环境
 VITE_API_BASE_URL=https://staging-api.yourapp.com
 
+
+# 静态资源基础 URL - 测试环境
+VITE_STATIC_BASE_URL=https://zswl-smqjh.oss-cn-chengdu.aliyuncs.com/static/static
+
 # 环境名称
 VITE_ENV_NAME=staging

pages.json.ts

@@ -37,7 +37,9 @@ export default defineConfig({
     list: [{
       pagePath: 'pages/index/index',
     }, {
-      pagePath: 'pages/about/index',
+      pagePath: 'pages/voucher/index',
+    }, {
+      pagePath: 'pages/order/index',
     }],
   },
 })

src/App.vue

@@ -7,6 +7,8 @@ onLaunch(() => {})
   min-height: calc(100vh - var(--window-top));
   box-sizing: border-box;
   background: #f9f9f9;
+   --them-color: #9ED605;
+   font-size: 24rpx;
 }
 
 .wot-theme-dark.page-wraper {

src/composables/types/theme.ts

@@ -37,7 +37,7 @@ export interface SystemThemeState {
  * 预定义的主题色选项
  */
 export const themeColorOptions: ThemeColorOption[] = [
-  { name: '默认蓝', value: 'blue', primary: '#4D7FFF' },
+  { name: '默认蓝', value: 'blue', primary: '#9ED605' },
   { name: '活力橙', value: 'orange', primary: '#FF7D00' },
   { name: '薄荷绿', value: 'green', primary: '#07C160' },
   { name: '樱花粉', value: 'pink', primary: '#FF69B4' },

src/composables/useTabbar.ts

@@ -4,11 +4,13 @@ export interface TabbarItem {
   active: boolean
   title: string
   icon: string
+  icon1: string
 }
-
+const staticUrl = import.meta.env.VITE_STATIC_BASE_URL
 const tabbarItems = ref<TabbarItem[]>([
-  { name: 'home', value: null, active: true, title: '首页', icon: 'home' },
-  { name: 'about', value: null, active: false, title: '关于', icon: 'user' },
+  { name: 'home', value: null, active: true, title: '首页', icon: `${staticUrl}/smqjh-jy-idx.png`, icon1: `${staticUrl}/smqjh-jy-idx1.png` },
+  { name: 'voucher', value: null, active: false, title: '优惠券', icon: `${staticUrl}/smqjh-jy-dk.png`, icon1: `${staticUrl}/smqjh-jy-dk1.png` },
+  { name: 'order', value: null, active: false, title: '订单', icon: `${staticUrl}/smqjh-jy-order.png`, icon1: `${staticUrl}/smqjh-jy-order1.png` },
 ])
 
 export function useTabbar() {

src/layouts/tabbar.vue

@@ -41,7 +41,12 @@ export default {
   >
     <wd-tabbar-item
       v-for="(item, index) in tabbarList" :key="index" :name="item.name"
-      :value="getTabbarItemValue(item.name)" :title="item.title" :icon="item.icon"
-    />
+      :value="getTabbarItemValue(item.name)" :title=" item.title"
+    >
+      <template #icon="{ active }">
+        <image v-if="active" :src="item.icon1" class="h44rpx w44rpx" />
+        <image v-else :src="item.icon" class="h44rpx w44rpx" />
+      </template>
+    </wd-tabbar-item>
   </wd-tabbar>
 </template>

src/pages.json

@@ -5,18 +5,24 @@
       "name": "home",
       "layout": "tabbar",
       "style": {
-        "navigationBarTitleText": "首页"
+        "navigationBarTitleText": "加油"
       }
     },
     {
-      "path": "pages/order/index"
+      "path": "pages/order/index",
+      "name": "order",
+      "islogin": false,
+      "style": {
+        "navigationBarTitleText": "订单"
+      },
+      "layout": "tabbar"
     },
     {
       "path": "pages/voucher/index",
-      "name": "about",
+      "name": "voucher",
       "layout": "tabbar",
       "style": {
-        "navigationBarTitleText": "关于"
+        "navigationBarTitleText": "抵扣卷"
       }
     }
   ],
@@ -47,7 +53,10 @@
         "pagePath": "pages/index/index"
       },
       {
-        "pagePath": "pages/about/index"
+        "pagePath": "pages/voucher/index"
+      },
+      {
+        "pagePath": "pages/order/index"
       }
     ]
   }

src/pages/index/index.vue

@@ -7,16 +7,59 @@ definePage({
     navigationBarTitleText: '加油',
   },
 })
-function handleClick() {
-  console.log('拉起支付')
-  uni.navigateTo({ url: 'https://static.am.xiaojukeji.com/cf-terminal/oil/thanos-fe-oil/pages/open-energy-h5-pay/index.html?orderId=3521815091009230279&tradeId=20260227c9070e26dcd3a66aa6e022d41b37a4a321538314' })
-}
+const staticUrl = import.meta.env.VITE_STATIC_BASE_URL
+const tabList = ref([
+  { label: '距离优先', value: 1 },
+  { label: '价格从低到高', value: 2 },
+])
+const currentTab = ref(1)
 </script>
 
 <template>
-  <view>
-    <button @click="handleClick">
-      拉起支付
-    </button>
+  <view class="px24rpx py20px">
+    <view class="w132rpx">
+      轮播图展位
+    </view>
+    <view class="mt20rpx flex items-center">
+      <view v-for="item in tabList" :key="item.value" class="mr28rpx rounded-24rpx px16rpx py8rpx text-24rpx" :class="[currentTab === item.value ? 'bg-[var(--them-color)] text-white ' : 'bg-white']" @click="currentTab = item.value">
+        {{ item.label }}
+      </view>
+    </view>
+    <view v-for="item in 10" :key="item" class="relative mt20rpx rounded-16rpx bg-white p24rpx">
+      <view class="mt80rpx flex items-center justify-between">
+        <view class="text-36rpx font-semibold">
+          中国石化 | 富源加油站
+        </view>
+        <view class="flex items-center text-24rpx">
+          <image :src="`${staticUrl}/smqjh-jy-dh.png`" class="mr3 h18.34rpx w18.34rpx" />  1.9km
+        </view>
+      </view>
+      <view class="mt20rpx text-#aaa">
+        西湖区文三路100号
+      </view>
+      <view class="mt20rpx flex items-center justify-between">
+        <view class="flex items-center rounded-8rpx bg-#FF4A39 px12rpx py8rpx">
+          <image :src="`${staticUrl}/smqjh-jy-idicon.png`" class="h30rpx w30rpx" />
+          <view class="text-22rpx text-white">
+            满200前100升半价
+          </view>
+        </view>
+        <view class="flex items-center">
+          <view class="text-28rpx">
+            92#
+          </view>
+          <view class="mx8rpx ml12rpx flex items-center text-#ff4d3a">
+            特惠价 <view class="font-semibold">
+              <text class="text-20rpx">
+                ￥
+              </text> <text class="text-36rpx">
+                7.36L
+              </text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <image :src="`${staticUrl}/smqjh-jy-cz.png`" class="absolute left-0 top-0 h80rpx w234rpx" />
+    </view>
   </view>
 </template>

src/pages/order/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-definePage({ name: 'order', islogin: false, style: { navigationBarTitleText: '订单' } })
+definePage({ name: 'order', islogin: false, style: { navigationBarTitleText: '订单' }, layout: 'tabbar' })
 </script>
 
 <template>

src/uni-pages.d.ts

@@ -3,15 +3,14 @@
 // @ts-nocheck
 // Generated by @uni-ku/pages-json
 
-interface NavigateToOptions {
-  url: "/pages/voucher/index";
-}
+interface NavigateToOptions {}
 
 interface RedirectToOptions extends NavigateToOptions {}
 
 interface SwitchTabOptions {
   url: "/pages/index/index" |
-       "/pages/about/index";
+       "/pages/voucher/index" |
+       "/pages/order/index";
 }
 
 type ReLaunchOptions = NavigateToOptions | SwitchTabOptions;