Browse Source

feat: 首页静态开发

liangan 1 month ago
parent
commit
c25ede5bc1

+ 48 - 0
src/components/product/product.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+  width: {
+    type: [Number, String],
+    default: 260,
+  },
+  height: {
+    type: [Number, String],
+    default: 260,
+  },
+})
+</script>
+
+<template>
+  <view
+    class="flex flex-[0.5] flex-col items-center border-1 border-#E0E0E0 border-solid pb-8rpx"
+    :style="{ width: Number.isFinite(width) ? `${width}rpx` : width }"
+  >
+    <view :style="{ width: Number.isFinite(width) ? `${width}rpx` : width, height: Number.isFinite(height) ? `${height}rpx` : height }">
+      <image
+        :src="item.image"
+        class="h-full w-full"
+        mode="aspectFit"
+      />
+    </view>
+    <view class="box-border w-full px-8rpx text-24rpx">
+      <view class="truncate">
+        {{ item.title }}
+      </view>
+      <view class="flex items-center justify-between">
+        <view class="text-24rpx text-#FF334A font-bold">
+          ৳ {{ item.price }}
+        </view>
+        <view class="text-24rpx text-#898989">
+          {{ item.sold }} Sold
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+//
+</style>

+ 1 - 0
src/locale/en.json

@@ -2,5 +2,6 @@
   "tabbar.home": "Home",
   "tabbar.income": "Income",
   "tabbar.mine": "Mine",
+  "home.vip": "VIP Membership",
   "app.name": "En Title"
 }

+ 20 - 21
src/pages.json

@@ -18,7 +18,7 @@
     "color": "#999999",
     "selectedColor": "#e61b28",
     "backgroundColor": "#ffffff",
-    "borderStyle": "black",
+    "borderStyle": "#c1c1c1",
     "height": "50px",
     "fontSize": "10px",
     "iconWidth": "24px",
@@ -43,22 +43,12 @@
   },
   "__esModule": true,
   "pages": [
-    {
-      "path": "pages/mine/mine",
-      "type": "home",
-      "layout": "tabbar",
-      "style": {
-        "navigationStyle": "custom",
-        "navigationBarTitleText": "首页"
-      }
-    },
     {
       "path": "pages/index/index",
       "type": "home",
       "layout": "tabbar",
       "style": {
-        "navigationStyle": "custom",
-        "navigationBarTitleText": "首页"
+        "navigationStyle": "custom"
       }
     },
     {
@@ -70,15 +60,6 @@
         "navigationBarTitleText": "首页"
       }
     },
-    {
-      "path": "pages/income/income",
-      "type": "home",
-      "layout": "tabbar",
-      "style": {
-        "navigationStyle": "custom",
-        "navigationBarTitleText": "首页"
-      }
-    },
     {
       "path": "pages/about/about",
       "type": "page",
@@ -101,6 +82,24 @@
       "style": {
         "navigationBarTitleText": "%app.name%"
       }
+    },
+    {
+      "path": "pages/income/income",
+      "type": "page",
+      "layout": "tabbar",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "首页"
+      }
+    },
+    {
+      "path": "pages/mine/mine",
+      "type": "page",
+      "layout": "tabbar",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "首页"
+      }
     }
   ],
   "subPackages": []

+ 2 - 2
src/pages/income/income.vue

@@ -1,5 +1,5 @@
 <!-- 使用 type="home" 属性设置首页,其他页面不需要设置,默认为page;推荐使用json5,更强大,且允许注释 -->
-<route lang="json5" type="home">
+<route lang="json5">
 {
   layout: 'tabbar',
   style: {
@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 defineOptions({
-  name: 'Home',
+  name: 'Income',
 })
 
 // 获取屏幕边界到安全区域距离

+ 0 - 3
src/pages/index/index copy.vue

@@ -53,9 +53,6 @@ console.log('index')
 
 <template>
   <view class="bg-white px-4 pt-2" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
-    <view class="mt-10">
-      <image src="/static/logo.svg" alt="" class="mx-auto block h-28 w-28" />
-    </view>
     <view class="mt-4 text-center text-4xl text-[#d14328]">
       unibest
     </view>

+ 204 - 27
src/pages/index/index.vue

@@ -5,43 +5,220 @@
   style: {
     // 'custom' 表示开启自定义导航栏,默认 'default'
     navigationStyle: 'custom',
-    navigationBarTitleText: '首页',
   },
 }
 </route>
 
 <script lang="ts" setup>
 defineOptions({
-  name: 'Home',
+  name: 'Index', // 首页
 })
 
 // 获取屏幕边界到安全区域距离
-let safeAreaInsets
-let systemInfo
-
-// #ifdef MP-WEIXIN
-// 微信小程序使用新的API
-systemInfo = uni.getWindowInfo()
-safeAreaInsets = systemInfo.safeArea
-  ? {
-      top: systemInfo.safeArea.top,
-      right: systemInfo.windowWidth - systemInfo.safeArea.right,
-      bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
-      left: systemInfo.safeArea.left,
-    }
-  : null
-// #endif
-
-// #ifndef MP-WEIXIN
-// 其他平台继续使用uni API
-systemInfo = uni.getSystemInfoSync()
-safeAreaInsets = systemInfo.safeAreaInsets
-// #endif
+const systemInfo = uni.getSystemInfoSync()
+const safeAreaInsets = systemInfo.safeAreaInsets
+
+// z-paging
+const paging = ref(null)
+
+// 轮播图
+const current = ref<number>(0)
+const swiperList = ref([
+  'https://picsum.photos/750/420?random=1',
+  'https://picsum.photos/750/420?random=2',
+  'https://picsum.photos/750/420?random=3',
+  'https://picsum.photos/750/420?random=4',
+])
+function handleClick(e) {
+  // console.log(e)
+}
+function onChange(e) {
+  // console.log(e)
+}
+
+// 新品列表
+
+const newProducts = ref([
+  {
+    image: 'https://picsum.photos/260?random=1',
+    title: 'Chanel Rouge Coco Shine…',
+    price: '123',
+    sold: 100,
+  },
+  {
+    image: 'https://picsum.photos/260?random=2',
+    title: 'Chanel Rouge Coco Shine…',
+    price: '123',
+    sold: 100,
+  },
+  {
+    image: 'https://picsum.photos/260?random=3',
+    title: 'Chanel Rouge Coco Shine…',
+    price: '123',
+    sold: 100,
+  },
+  {
+    image: 'https://picsum.photos/260?random=4',
+    title: 'Chanel Rouge Coco Shine…',
+    price: '123',
+    sold: 100,
+  },
+  {
+    image: 'https://picsum.photos/260?random=5',
+    title: 'Chanel Rouge Coco Shine…',
+    price: '123',
+    sold: 100,
+  },
+])
+
+//  商品列表
+const priceTab = ref<number>(0)
+
+// 300Spot    500Spot    1000Spot    2000Spot
+const priceTabList = ref([
+  {
+    title: '300Spot',
+    value: 300,
+  },
+  {
+    title: '500Spot',
+    value: 500,
+  },
+  {
+    title: '1000Spot',
+    value: 1000,
+  },
+  {
+    title: '2000Spot',
+    value: 2000,
+  },
+])
+
+const dataList = ref([])
+function queryList(pageNo, pageSize) {
+  // 此处请求仅为演示,请替换为自己项目中的请求
+  setTimeout(() => {
+    dataList.value = [
+      { title: '123' },
+      { title: '123' },
+      { title: '123' },
+      { title: '12345' },
+    ]
+    paging.value.complete(dataList.value)
+  }, 1000)
+}
 </script>
 
 <template>
-  <view class="bg-white px-4 pt-2" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
-    121212312312
-  </view>
-  <tabbar />
+  <z-paging
+    ref="paging"
+    :paging-style="{ paddingTop: `${safeAreaInsets?.top}px` }"
+    refresher-only
+    @query="queryList"
+  >
+    <template #top>
+      <view class="flex items-center justify-between pb-40rpx pl-42rpx pr-34rpx pt-26rpx">
+        <image
+          src="/static/header-logo.png"
+          class="h-54rpx w-250rpx"
+        />
+        <view class="flex items-center">
+          <wd-icon custom-class="mr-20rpx" name="search1" size="38rpx" />
+          <wd-icon name="notification" size="38rpx" />
+        </view>
+      </view>
+    </template>
+    <wd-swiper
+      v-model:current="current"
+      :list="swiperList"
+      autoplay
+      :indicator="{ type: 'fraction' }"
+      indicator-position="bottom-right"
+      @click="handleClick"
+      @change="onChange"
+    />
+    <view class="px-25rpx">
+      <view class="flex items-end justify-between pb-22rpx pt-24rpx">
+        <view class="flex items-center justify-between">
+          <view class="flex flex-col items-center">
+            <image
+              src="/static/index/home-vip.png"
+              class="h-100rpx w-100rpx"
+            />
+            <view class="mt-14rpx text-center text-22rpx text-#898989 font-bold">
+              {{ $t('home.vip') }}
+            </view>
+          </view>
+          <view class="flex flex-col items-center">
+            <image
+              src="/static/index/home-vip.png"
+              class="h-100rpx w-100rpx"
+            />
+            <view class="mt-14rpx text-center text-22rpx text-#898989 font-bold">
+              {{ $t('home.vip') }}
+            </view>
+          </view>
+        </view>
+        <view class="flex flex-col items-center">
+          <image
+            src="/static/index/home-vip.png"
+            class="h-112rpx w-112rpx"
+          />
+          <view class="mt-14rpx text-center text-22rpx text-#898989 font-bold">
+            {{ $t('home.vip') }}
+          </view>
+        </view>
+        <view class="flex items-center justify-between">
+          <view class="flex flex-col items-center">
+            <image
+              src="/static/index/home-vip.png"
+              class="h-100rpx w-100rpx"
+            />
+            <view class="mt-14rpx text-center text-22rpx text-#898989 font-bold">
+              {{ $t('home.vip') }}
+            </view>
+          </view>
+          <view class="flex flex-col items-center">
+            <image
+              src="/static/index/home-vip.png"
+              class="h-100rpx w-100rpx"
+            />
+            <view class="mt-14rpx text-center text-22rpx text-#898989 font-bold">
+              {{ $t('home.vip') }}
+            </view>
+          </view>
+        </view>
+      </view>
+      <view>
+        <view class="mb-16rpx text-32rpx">
+          News
+        </view>
+        <scroll-view scroll-x>
+          <view class="flex items-center gap-22rpx pb-24rpx">
+            <product
+              v-for="(item, index) in newProducts"
+              :key="index"
+              :item="item"
+            />
+          </view>
+        </scroll-view>
+      </view>
+      <view>
+        <wd-tabs v-model="priceTab" :line-width="0" :line-height="0">
+          <block v-for="item in priceTabList" :key="item">
+            <wd-tab :title="item.title" />
+          </block>
+        </wd-tabs>
+        <view class="flex flex-wrap gap-22rpx">
+          <product
+            v-for="(item, index) in newProducts"
+            :key="index"
+            :height="340"
+            :item="item"
+          />
+          <view />
+        </view>
+      </view>
+    </view>
+  </z-paging>
 </template>

+ 2 - 2
src/pages/mine/mine.vue

@@ -1,5 +1,5 @@
 <!-- 使用 type="home" 属性设置首页,其他页面不需要设置,默认为page;推荐使用json5,更强大,且允许注释 -->
-<route lang="json5" type="home">
+<route lang="json5">
 {
   layout: 'tabbar',
   style: {
@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 defineOptions({
-  name: 'Home',
+  name: 'Mine',
 })
 
 // 获取屏幕边界到安全区域距离

BIN
src/static/header-logo.png


BIN
src/static/index/home-vip.png


+ 1 - 0
src/style/index.scss

@@ -10,6 +10,7 @@
 
 :root,
 page {
+  font-size: 28rpx;
   // 修改按主题色
   --wot-color-theme: #e61b28;