搜索页面

project.config.json

@@ -24,5 +24,7 @@
   "editorSetting": {
     "tabIndent": "insertSpaces",
     "tabSize": 2
-  }
+  },
+  "miniprogramRoot": "dist/dev/mp-weixin/",
+  "srcMiniprogramRoot": "dist/dev/mp-weixin/"
 }

src/pages.json

@@ -62,14 +62,14 @@
       "path": "pages/about/about",
       "type": "page",
       "style": {
-        "navigationBarTitleText": "关于"
+        "navigationBarTitleText": "工作台"
       }
     },
     {
       "path": "pages/analyze/analyze",
       "type": "page",
       "style": {
-        "navigationBarTitleText": "统计"
+        "navigationBarTitleText": "分析"
       }
     },
     {
@@ -101,6 +101,13 @@
         "navigationBarTitleText": "手机登录"
       }
     },
+    {
+      "path": "pages/searchDetail/searchDetail",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "搜索"
+      }
+    },
     {
       "path": "pages/serch/serch",
       "type": "page",

src/pages/about/about.vue

@@ -1,7 +1,7 @@
 <route lang="json5">
 {
   style: {
-    navigationBarTitleText: '关于',
+    navigationBarTitleText: '工作台',
   },
 }
 </route>

src/pages/analyze/analyze.vue

@@ -1,7 +1,7 @@
 <route lang="json5">
 {
   style: {
-    navigationBarTitleText: '统计',
+    navigationBarTitleText: '分析',
   },
 }
 </route>

src/pages/index/index.vue

@@ -34,7 +34,7 @@
           :strokeWidth="15"
           :text="`已完成${current}%`"
         ></wd-circle>
-        <view class="do-work">
+        <view class="do-work" @click="switchPage">
           <text>待办:</text>
           <text class="num">{{ 4 }}/</text>
           <text class="num1">{{ 20 }}</text>
@@ -132,16 +132,19 @@ const logins = async () => {
   })
   console.log(data, 'hss')
 }
-
+// 工作待办跳转
+const switchPage = () => {
+  uni.switchTab({ url: '/pages/about/about' })
+}
 // 搜索页面跳转
 const handleSerch = () => {
-  uni.navigateTo({ url: '/pages/serch/serch?title=navigate' })
+  uni.navigateTo({ url: '/pages/serch/serch' })
 }
 
 // 常用工具页面跳转
 const addBattle = (val) => {
   console.log(val, '工具类型')
-  uni.navigateTo({ url: '/pages/battleForm/battleForm?title=1' })
+  uni.navigateTo({ url: '/pages/battleForm/battleForm?type=1' })
 }
 
 onMounted(() => {
@@ -173,7 +176,7 @@ onLoad(() => {
   top: 0;
 }
 .header-bg {
-  background: linear-gradient(to bottom, #f59e0b, #f6d7a7);
+  background: linear-gradient(to bottom, #f59e0b, #f5d198);
   // background-color: #fafafa;
 }
 .image {
@@ -190,7 +193,7 @@ onLoad(() => {
   background: #fff;
   height: 80rpx;
   margin-top: 44rpx;
-  line-height: 74rpx;
+  line-height: 80rpx;
   text-align: center;
   color: #6b7280;
 }
@@ -213,27 +216,27 @@ onLoad(() => {
 .work {
   border-radius: 28rpx;
   background-color: $uni-text-color-inverse;
-  font-size: 32rpx;
+  font-size: 28rpx;
   color: $uni-text-color;
   padding: 10rpx;
   box-shadow: 8rpx 16rpx 32rpx 0 $uni-bg-color-grey;
 }
 .title {
   color: #333;
-  font-size: 40rpx;
+  font-size: 36rpx;
   font-weight: 600;
 }
 
 .work-box {
   .do-work {
-    font-size: 40rpx;
+    font-size: 36rpx;
     color: #ea580c;
     font-weight: 600;
     margin-top: 74rpx;
   }
   .num {
     color: #ea580c;
-    font-size: 40rpx;
+    font-size: 36rpx;
     padding-left: 14rpx;
   }
   .num1 {

src/pages/my/my.vue

@@ -11,15 +11,30 @@
   <view class="text-center container">
     <view class="px-5 pt-20 pb-20 top-box">
       <view class="con-top">
-        <view class="h1 mb-8 mt-10">科湃腾肉牛系统</view>
-        <view class="h3 mb-10 pt-4">简化牧场管理，从这里开始！</view>
+        <view class="h1 mb-6 mt-8">科湃腾肉牛系统</view>
+        <view class="h3 mb-14 pt-4">简化牧场管理，从这里开始！</view>
       </view>
-      <view class="btn mt-10 user">用户一键登录</view>
-      <view class="btn mt-10 tel" @click="getPhone">手机号安全登录</view>
+      <!-- <view class="btn mt-10 user" @click="handleWX">用户一键登录</view> -->
+      <view class="footer mt-10">
+        <wd-button
+          type="primary"
+          size="large"
+          open-type="getUserInfo"
+          getuserinfo="loginWithWeChat"
+          block
+        >
+          用户一键登录
+        </wd-button>
+      </view>
+      <view class="footer mt-5">
+        <wd-button size="large" type="success" @click="getPhone" block>手机号安全登录</wd-button>
+      </view>
+      <!-- <view class="btn mt-10 tel" @click="getPhone">手机号安全登录</view> -->
+
       <view class="mt-5">
         <wd-radio-group :modelValue="isChecked" inline checked-color="#eea441" @change="setChecked">
           <wd-radio :value="true" shape="dot" class="title" inline>
-            我已认真阅读并同意《隐私政策》
+            我已认真阅读并同意《服务协议》、《隐私政策》
           </wd-radio>
           <!-- <text>  我已认真阅读并同意《服务协议》、《隐私政策》</text> -->
         </wd-radio-group>
@@ -39,6 +54,8 @@ const getPhone = () => {
   uni.navigateTo({ url: '/pages/phone/phone' })
 }
 
+// 选择微信登录
+const handleWX = () => {}
 // 勾选同意
 const setChecked = (val) => {
   console.log(val, isChecked.value, '000')
@@ -48,6 +65,41 @@ const setChecked = (val) => {
     isChecked.value = true
   }
 }
+
+// 微信授权登录
+const loginWithWeChat = (e) => {
+  if (e.detail.userInfo) {
+    uni.login({
+      provider: 'weixin',
+      success: (loginRes) => {
+        console.log(loginRes)
+        // 获取微信登录的授权码
+        const code = loginRes.code
+        // TODO: 获取code码 给到后端接口获取用户信息
+        // uni.request({
+        //   url: 'https://your-api.com/wechat-login',
+        //   method: 'POST',
+        //   data: {
+        //     code: loginRes.code,
+        //   },
+        //   success: (res) => {
+        //     if (res.data.success) {
+        //       uni.setStorageSync('userToken', res.data.token)
+        //       uni.showToast({
+        //         title: '登录成功',
+        //       })
+        //     } else {
+        //       uni.showToast({
+        //         title: '登录失败',
+        //         icon: 'none',
+        //       })
+        //     }
+        //   },
+        // })
+      },
+    })
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -65,9 +117,11 @@ const setChecked = (val) => {
   border-radius: 60rpx;
   height: 80rpx;
   line-height: 80rpx;
-  font-size: 36rpx;
+  font-size: 16px;
   margin: 30rpx auto;
+  font-family: PingFang SC;
 }
+
 .user {
   background-color: #eea441;
   margin-bottom: 50rpx;
@@ -77,17 +131,20 @@ const setChecked = (val) => {
 }
 .container {
   // background-color: #fafafa;
-
   height: 100vh;
 }
 .top-box {
   // background-color: #fff;
   background: linear-gradient(to bottom, #f6d7a7, #fff);
 }
+::v-deep .wd-radio-group.data-v-a6e3f5b0,
 .wd-radio-group {
-  background: none;
+  background-color: transparent;
+}
+::v-deep .title > .wd-radio__label {
+  font-size: 20rpx !important;
 }
-v-deep .title > .wd-radio__label {
-  font-size: 16rpx !important;
+::v-deep .wd-button.is-success.data-v-aa3a6253 {
+  background-color: #2a9d8f !important;
 }
 </style>

src/pages/phone/phone.vue

@@ -47,14 +47,16 @@
             提交
           </wd-button>
         </view>
-        <view class="mt-5 title">
+        <view class="mt-5">
           <wd-radio-group
             :modelValue="model.isChecked"
             inline
             checked-color="#eea441"
             @change="setChecked"
           >
-            <wd-radio :value="true" shape="dot" inline>我已认真阅读并同意《隐私政策》</wd-radio>
+            <wd-radio :value="true" shape="dot" inline class="title">
+              我已认真阅读并同意《服务协议》、《隐私政策》
+            </wd-radio>
           </wd-radio-group>
         </view>
       </wd-form>
@@ -139,8 +141,8 @@ const setChecked = (val) => {
   top: 22rpx;
   right: 10rpx;
 }
-.title {
-  font-size: 20rpx;
-  // text-align: left;
+
+::v-deep .title > .wd-radio__label {
+  font-size: 20rpx !important;
 }
 </style>

src/pages/searchDetail/searchDetail.vue

@@ -0,0 +1,38 @@
+<route lang="json5" type="page">
+{
+  style: { navigationBarTitleText: '搜索' },
+}
+</route>
+
+<template>
+  <view class="serch-box">
+    <wd-search
+      placeholder="请输入牛号"
+      cancel-txt="搜索"
+      v-model="searchObj.searchNum"
+      light
+      @cancel="doSearch"
+    />
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+defineOptions({
+  name: 'Login',
+})
+let searchObj = reactive({
+  searchNum: '',
+})
+onLoad((options) => {
+  console.log(options)
+  searchObj.searchNum = options.serch
+})
+
+// 拿到搜索框参数 去请求接口
+function doSearch() {}
+</script>
+
+<style lang="scss" scoped>
+//
+</style>

src/pages/serch/serch.vue

@@ -5,15 +5,95 @@
 </route>
 
 <template>
-  <view class="text-center">
-    <view class="text-green-500">搜索</view>
+  <view class="serch-box">
+    <wd-search
+      placeholder="请输入牛号"
+      cancel-txt="搜索"
+      v-model="serchObj.searchNum"
+      light
+      @cancel="doSearch"
+    />
+    <view class="serch px-4 pt-4 flex">
+      <text>历史搜索</text>
+      <wd-icon name="delete-thin" size="40rpx" color="#3a3a3a" @click="clearList"></wd-icon>
+    </view>
+    <view class="history px-4 mt-4">
+      <text
+        class="px-4 pt-1 pb-1 item mb-2"
+        v-for="(item, index) in serchObj.historyList"
+        :key="index"
+        @click="searchHistory(item)"
+      >
+        {{ item }}
+      </text>
+    </view>
   </view>
 </template>
 
 <script lang="ts" setup>
-// code here
+import { reactive, ref } from 'vue'
+
+defineOptions({
+  name: 'Serch',
+})
+
+const searchNum = ref('')
+let serchObj = reactive({
+  searchNum: '',
+  historyList: [],
+})
+
+//用户搜索时将搜索文字存储
+function doSearch(searchStr) {
+  const val = searchStr.value.trim()
+  if (val) {
+    let history = JSON.parse(uni.getStorageSync('history')) || []
+    console.log(history, 'historyList---11')
+    history = history.filter((item) => item !== val)
+    history.unshift(val)
+    if (history.length > 6) {
+      history.pop()
+    }
+    serchObj.historyList = history
+    console.log(serchObj.historyList, 'historyList---999')
+    uni.setStorageSync('history', JSON.stringify(serchObj.historyList))
+    uni.navigateTo({ url: `/pages/searchDetail/searchDetail?serch=${searchStr.value}` })
+  }
+}
+
+// 清除按钮
+function clearList() {
+  serchObj.historyList = []
+  uni.setStorageSync('history', JSON.stringify(serchObj.historyList))
+}
+// 历史搜索
+function searchHistory(val) {
+  console.log(val, '999')
+  serchObj.searchNum = val
+  uni.navigateTo({ url: `/pages/searchDetail/searchDetail?serch=${val}` })
+}
+onLoad(() => {
+  //进入搜索页面时将存储在本地的历史记录取出并展示
+  let history = uni.getStorageSync('history')
+  if (history) {
+    serchObj.historyList = JSON.parse(history) || []
+    console.log(serchObj.historyList, '初始化历史')
+  }
+})
 </script>
 
 <style lang="scss" scoped>
 //
+.serch {
+  color: #3a3a3a;
+  font-size: 36rpx;
+  justify-content: space-between;
+}
+.item {
+  background-color: #eae8e8;
+  border-radius: 4rpx;
+  display: inline-block;
+  margin-right: 10rpx;
+  font-size: 24rpx;
+}
 </style>

src/types/uni-pages.d.ts

@@ -11,6 +11,7 @@ interface NavigateToOptions {
        "/pages/login/login" |
        "/pages/my/my" |
        "/pages/phone/phone" |
+       "/pages/searchDetail/searchDetail" |
        "/pages/serch/serch";
 }
 interface RedirectToOptions extends NavigateToOptions {}