u

code/container-ocr/ocr-uniapp/src/pages/home/index.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { useUserStore } from '@/store'
+
+const userStore = useUserStore()
+
+onShow(() => {
+  userStore.requireLogin()
+})
+
+const swiperCurrent = ref(0)
+const swiperList = [
+  {},
+  {},
+  {},
+]
+
+function handleToLogin() {
+  uni.reLaunch({
+    url: '/pages-sub/login/index',
+  })
+}
+
+function toLinkUrl(url) {
+  if (!url) {
+    return
+  }
+  uni.navigateTo({
+    url,
+  })
+}
+</script>
+
+<template>
+  <view>
+    <view class="swiper-container">
+      <swiper
+        :current="swiperCurrent"
+        autoplay
+        :interval="3000"
+        class="swiper"
+        @change="swiperCurrent = $event.detail.current"
+      >
+        <swiper-item>
+          <image
+            src="@/static/images/bg.jpg"
+            style="width: 100%;height:100%"
+          />
+        </swiper-item>
+        <swiper-item>
+          <image
+            src="@/static/images/bg1.jpg"
+            style="width: 100%;height:100%"
+          />
+        </swiper-item>
+        <swiper-item>
+          <image
+            src="@/static/images/bg2.jpg"
+            style="width: 100%;height:100%"
+          />
+        </swiper-item>
+      </swiper>
+      <sar-swiper-dot
+        :current="swiperCurrent"
+        :list="swiperList"
+      />
+    </view>
+    <view v-if="userStore.isLogined" class="grid-container">
+      <sar-grid :columns="2" gap="24rpx">
+        <sar-grid-item
+          @click="toLinkUrl('/pages-sub/waybill/index')"
+        >
+          <view class="grid-item">
+            <image src="/static/images/home/waybill.png" />
+            <text>在途运单</text>
+          </view>
+        </sar-grid-item>
+        <sar-grid-item
+          @click="toLinkUrl('/pages-sub/waybill-history/index')"
+        >
+          <view class="grid-item">
+            <image src="/static/images/home/HistoricalWaybill.png" />
+            <text>历史运单</text>
+          </view>
+        </sar-grid-item>
+        <sar-grid-item
+          @click="toLinkUrl('/pages-sub/yewu-yingfu/index')"
+        >
+          <view class="grid-item">
+            <image src="/static/images/home/MyExpenses.png" />
+            <text>业务应付</text>
+          </view>
+        </sar-grid-item>
+        <sar-grid-item
+          @click="toLinkUrl('/pages-sub/feiyong-baoxiao/index')"
+        >
+          <view class="grid-item">
+            <image src="/static/images/home/ExpensesClaimIndex.png" />
+            <text>费用报销</text>
+          </view>
+        </sar-grid-item>
+        <sar-grid-item
+          @click="toLinkUrl('/pages-sub/jiayou/index')"
+        >
+          <view class="grid-item">
+            <image src="/static/images/home/refuelling.png" />
+            <text>加油管理</text>
+          </view>
+        </sar-grid-item>
+        <sar-grid-item
+          @click="toLinkUrl('/pages-sub/cheliang-weixiu/index')"
+        >
+          <view class="grid-item">
+            <image src="/static/images/home/CheliangWeixiu.png" />
+            <text>车辆维修</text>
+          </view>
+        </sar-grid-item>
+      </sar-grid>
+    </view>
+    <sar-result v-else status="warning" title="尚未登陆" style="margin-top: 32rpx;">
+      <sar-button
+        @click="handleToLogin"
+      >
+        前去登录
+      </sar-button>
+    </sar-result>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.swiper-container {
+  position: relative;
+  .swiper {
+    height: 400rpx;
+    width: 100%;
+  }
+}
+
+.grid-container {
+  padding-top: 32rpx;
+
+  :deep(.sar-grid__content) {
+    background-color: #fff;
+  }
+  :deep(.sar-grid) {
+    row-gap: 0 !important;
+  }
+  :deep(.sar-grid__item) {
+    margin-bottom: 24rpx;
+  }
+
+  :deep(.sar-grid__wrapper) {
+    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+
+  :deep(.sar-badge) {
+    width: 42rpx;
+    height: 42rpx;
+  }
+
+  .grid-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 36rpx;
+    image {
+      width: 128rpx;
+      height: 128rpx;
+    }
+    text {
+      margin-top: 16rpx;
+      font-weight: 600;
+      color: #000;
+    }
+  }
+}
+</style>