首页&登陆页

env/.env

@@ -7,8 +7,9 @@ VITE_WX_APPID = 'wx79ae77033cd2c4a2'
 # h5部署网站的base，配置到 manifest.config.ts 里的 h5.router.base
 VITE_APP_PUBLIC_BASE=/unibest/
 
-VITE_SERVER_BASEURL = 'https://ukw0y1.laf.run'
-VITE_UPLOAD_BASEURL = 'https://ukw0y1.laf.run/upload'
+VITE_SERVER_BASEURL ='http://kpttest.kptyun.com'
+# VITE_SERVER_BASEURL = 'https://ukw0y1.laf.run' 
+# VITE_UPLOAD_BASEURL = 'https://ukw0y1.laf.run/upload'
 
 # h5是否需要配置代理
 VITE_APP_PROXY=false

src/pages-sub/demo/index.vue

@@ -1,13 +1,13 @@
 <route lang="json5" type="page">
 {
-  style: { navigationBarTitleText: '分包页面 标题' },
+  style: { navigationBarTitleText: '' },
 }
 </route>
 
 <template>
   <view class="text-center">
     <view class="m-8">http://localhost:9000/#/pages-sub/demo/index</view>
-    <view class="text-green-500">分包页面demo</view>
+    <view class="text-green-500">demo</view>
   </view>
 </template>
 

src/pages.json

@@ -72,11 +72,32 @@
         "navigationBarTitleText": "统计"
       }
     },
+    {
+      "path": "pages/battleForm/battleForm",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "新增信息"
+      }
+    },
+    {
+      "path": "pages/login/login",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "欢迎登录"
+      }
+    },
     {
       "path": "pages/my/my",
       "type": "page",
       "style": {
-        "navigationBarTitleText": "我的"
+        "navigationBarTitleText": "欢迎登录"
+      }
+    },
+    {
+      "path": "pages/serch/serch",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "搜索"
       }
     }
   ],

src/pages/battleForm/battleForm.vue

@@ -0,0 +1,19 @@
+<route lang="json5" type="page">
+{
+  style: { navigationBarTitleText: '新增信息' },
+}
+</route>
+
+<template>
+  <view class="text-center">
+    <view class="text-green-500">小牛表单</view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+// code here
+</script>
+
+<style lang="scss" scoped>
+//
+</style>

src/pages/index/index.vue

@@ -8,22 +8,27 @@
 }
 </route>
 <template>
-  <view class="containe px-4 overflow-hidden">
+  <view class="containe px-4">
     <!-- 渐变色 -->
     <view class="top-content"></view>
-    <view class="overflow-hidden pt-2 px-4" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
+    <view
+      class="overflow-hidden header header-fixed header-bg"
+      :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
+    >
       <wd-badge modelValue="12">
-        <wd-icon name="dong" size="26px" />
+        <wd-icon name="dong" size="52rpx" />
       </wd-badge>
+      <view class="input-box mt-2" @click="handleSerch">
+        <wd-icon name="search" />
+        请输入牛号
+      </view>
     </view>
-    <view class="input-box mt-2">
-      <wd-icon name="search" v-model="serchVal" @focus="focus" />
-      请输入牛号
-    </view>
-    <view class="work mt-4 shadow-xl">
-      <view class="mt-4 mb-4 px-2 title">工作进度</view>
-      <view class="work-box">
+    <!-- 进度 -->
+    <view class="work shadow-xl">
+      <view class="mt-4 mb-4 px-2 pb-2 title">工作进度</view>
+      <view class="work-box flex justify-around">
         <wd-circle
+          customClass="z-index: -1; position: reletive;"
           v-model="current"
           color="#f59e0b"
           :strokeWidth="15"
@@ -37,28 +42,112 @@
       </view>
     </view>
     <!-- 常用工具 -->
-    <view class="work mt-4 shadow-xl">
+    <view class="work mt-4 shadow-xl work-t">
       <view class="mt-4 mb-4 px-2 title">常用工具</view>
-      <view></view>
+      <view class="work-box-t flex justify-between flex-row flex-wrap">
+        <view
+          class="work-item mb-4 px-4"
+          v-for="item in workList"
+          :key="item.id"
+          @click="addBattle(item)"
+        >
+          <image :src="item.img" mode="scaleToFill" class="image" />
+          <view>
+            {{ item.title }}
+          </view>
+        </view>
+      </view>
     </view>
   </view>
 </template>
 
 <script lang="ts" setup>
-// import PLATFORM from '@/utils/platform'
+import { getAuth } from '@/service/index/auth'
 
 defineOptions({
   name: 'Home',
 })
 
 // 获取屏幕边界到安全区域距离
-const current = ref(20)
 const { safeAreaInsets } = uni.getSystemInfoSync()
-const serchVal = ref('')
-const focus = (val) => {
-  console.log(val, 'focus')
+const workList = reactive([
+  {
+    id: 1,
+    img: '../../static/images/work/称重.png',
+    title: '称重登记',
+  },
+  {
+    id: 2,
+    img: '../../static/images/work/治疗.png',
+    title: '登记治疗',
+  },
+  {
+    id: 3,
+    img: '../../static/images/work/发病.png',
+    title: '诊断',
+  },
+  {
+    id: 4,
+    img: '../../static/images/work/流产.png',
+    title: '流产登记',
+  },
+  {
+    id: 5,
+    img: '../../static/images/work/脖环绑定.png',
+    title: '脖环制定',
+  },
+  {
+    id: 6,
+    img: '../../static/images/work/result.png',
+    title: '治疗结果',
+  },
+  {
+    id: 7,
+    img: '../../static/images/work/发情.png',
+    title: '发情',
+  },
+  {
+    id: 8,
+    img: '../../static/images/work/配种.png',
+    title: '配种',
+  },
+  {
+    id: 9,
+    img: '../../static/images/work/孕检.png',
+    title: '孕检登记',
+  },
+  {
+    id: 10,
+    img: '../../static/images/work/进围产.png',
+    title: '进围产',
+  },
+])
+const current = ref(20)
+
+// 接口请求参数
+const logins = async () => {
+  const { data } = await getAuth({
+    username: 'shanshan',
+    password: '123456',
+  })
+  console.log(data, 'hss')
+}
+
+// 搜索页面跳转
+const handleSerch = () => {
+  uni.navigateTo({ url: '/pages/serch/serch?title=navigate' })
+}
+
+// 常用工具页面跳转
+const addBattle = (val) => {
+  console.log(val, '工具类型')
+  uni.navigateTo({ url: '/pages/battleForm/battleForm?title=1' })
 }
 
+onMounted(() => {
+  logins()
+})
+
 // 测试 uni API 自动引入
 onLoad(() => {
   console.log('onload')
@@ -66,19 +155,42 @@ onLoad(() => {
 </script>
 
 <style lang="scss" scoped>
+.work-item {
+  // border: 1px solid red;
+  width: 22%;
+  font-size: 32rpx;
+  text-align: center;
+  height: 200rpx;
+}
+.header {
+  margin-left: -32rpx;
+  margin-right: -32rpx;
+  padding: 32rpx;
+}
+.header-fixed {
+  position: sticky;
+  z-index: 10;
+  top: 0;
+}
+.header-bg {
+  background: linear-gradient(to bottom, #f59e0b, #f6d7a7);
+  // background-color: #fafafa;
+}
+.image {
+  width: 100rpx;
+  height: 100rpx;
+  margin-bottom: 30rpx;
+}
 .containe {
-  background: #fafafa;
-  overflow: hidden;
-  height: 100vh;
-  position: relative;
-  z-index: -99;
+  // background: #fafafa;
+  // position: relative;
 }
 .input-box {
-  border-radius: 24rpx;
+  border-radius: 44rpx;
   background: #fff;
-  height: 60rpx;
-  margin-top: 10rpx;
-  line-height: 60rpx;
+  height: 80rpx;
+  margin-top: 44rpx;
+  line-height: 74rpx;
   text-align: center;
   color: #6b7280;
 }
@@ -86,51 +198,47 @@ onLoad(() => {
   position: fixed;
   top: 0;
   left: 0;
-  right: 0%;
-  bottom: 0;
+  right: 0;
   background: linear-gradient(to bottom, #f59e0b, #fffbeb);
   z-index: -1;
-  height: 260px;
+  height: 422rpx;
   text-align: center;
 }
 .inputs {
   border-radius: 10%;
 }
 .cards {
-  margin: 10px 0;
+  margin: 10rpx 0;
 }
 .work {
-  border-radius: 10px;
-  overflow-y: scroll;
+  border-radius: 28rpx;
   background-color: $uni-text-color-inverse;
-  font-size: 14px;
+  font-size: 32rpx;
   color: $uni-text-color;
-  padding: 0px 5px 5px 5px;
-  box-shadow: 0 4px 8px 0 $uni-bg-color-grey;
+  padding: 10rpx;
+  box-shadow: 8rpx 16rpx 32rpx 0 $uni-bg-color-grey;
 }
 .title {
-  color: #262626;
-  font-size: 20px;
+  color: #333;
+  font-size: 40rpx;
   font-weight: 600;
 }
-.work-box {
-  display: flex;
-  justify-content: space-around;
 
+.work-box {
   .do-work {
-    font-size: 20px;
+    font-size: 40rpx;
     color: #ea580c;
     font-weight: 600;
-    margin-top: 30px;
+    margin-top: 74rpx;
   }
   .num {
     color: #ea580c;
-    font-size: 20px;
-    padding-left: 15px;
+    font-size: 40rpx;
+    padding-left: 14rpx;
   }
   .num1 {
     color: #f59e0b;
-    font-size: 14px;
+    font-size: 28rpx;
   }
 }
 </style>

src/pages/login/login.vue

@@ -0,0 +1,24 @@
+<route lang="json5" type="page">
+{
+  style: { navigationBarTitleText: '欢迎登录' },
+}
+</route>
+
+<template>
+  <view class="text-center">
+    <view class="text-green-500">
+      <view>科湃腾肉牛系统</view>
+      <view></view>
+      <view>用户一键登录</view>
+      <text>我已认真阅读并同意《服务协议》、《隐私政策》</text>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+// code here
+</script>
+
+<style lang="scss" scoped>
+//
+</style>

src/pages/my/my.vue

@@ -1,22 +1,44 @@
-<route lang="json5">
+<route lang="json5" type="page">
 {
-  style: {
-    navigationBarTitleText: '我的',
-  },
+  style: { navigationBarTitleText: '欢迎登录' },
 }
 </route>
 
 <template>
-  <view
-    class="bg-white overflow-hidden pt-2 px-4"
-    :style="{ marginTop: safeAreaInsets?.top + 'px' }"
-  >
-    我的
+  <view class="text-center px-4 pt-20">
+    <view class="con-top">
+      <view class="h1 mb-8 mt-10">科湃腾肉牛系统</view>
+      <view class="h3 mb-10 pt-4">让牧场管理更专业、更简单、更高效</view>
+    </view>
+    <view class="btn mt-10">用户一键登录</view>
+    <text class="mt-10 title">
+      <wd-radio :value="1">我已认真阅读并同意《服务协议》、《隐私政策》</wd-radio>
+    </text>
   </view>
 </template>
 
-<script>
-export default {}
+<script lang="ts" setup>
+// code here
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+//
+.con-top {
+  color: #f59e0b;
+  font-size: 56rpx;
+}
+.h3 {
+  font-size: 36rpx;
+}
+
+.btn {
+  color: #fff;
+  background-color: #f59e0b;
+  border-radius: 70rpx;
+  height: 100rpx;
+  line-height: 100rpx;
+  font-size: 38rpx;
+  width: 90%;
+  margin: 0 auto;
+}
+</style>

src/pages/serch/serch.vue

@@ -0,0 +1,19 @@
+<route lang="json5" type="page">
+{
+  style: { navigationBarTitleText: '搜索' },
+}
+</route>
+
+<template>
+  <view class="text-center">
+    <view class="text-green-500">搜索</view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+// code here
+</script>
+
+<style lang="scss" scoped>
+//
+</style>

src/service/index/auth.ts

@@ -0,0 +1,11 @@
+import { http } from '@/utils/http'
+
+export interface IFooItem {
+  username: string
+  password: string
+}
+
+/** POST 请求 */
+export const getAuth = (data) => {
+  return http.post<IFooItem>('/auth', data)
+}

src/service/index/foo.ts

@@ -13,3 +13,13 @@ export const getFooAPI = (name: string) => {
 export const postFooAPI = (name: string) => {
   return http.post<IFooItem>('/foo', { name }, { name })
 }
+
+export interface IFooItem {
+  id: string
+  name: string
+}
+
+/** POST 请求 */
+export const getAuth = (data) => {
+  return http.post<IFooItem>('/auth', data)
+}

src/types/uni-pages.d.ts

@@ -7,7 +7,10 @@ interface NavigateToOptions {
   url: "/pages/index/index" |
        "/pages/about/about" |
        "/pages/analyze/analyze" |
-       "/pages/my/my";
+       "/pages/battleForm/battleForm" |
+       "/pages/login/login" |
+       "/pages/my/my" |
+       "/pages/serch/serch";
 }
 interface RedirectToOptions extends NavigateToOptions {}