1. 完成首页相关UI+逻辑

README.md

@@ -7,7 +7,7 @@
 #### HBuilderX + 微信开发者工具（推荐使用IntelliJ工具编写，HBuilderX代码提示等功能做的较差）
 
 ## 技术栈 + 运行方式
-#### Uni-app创建的vue3项目，vue3 + pinia + uview-plus
+#### [uni-app](https://uniapp.dcloud.net.cn/)创建的vue3项目，目前并未使用uni-app x和uniCloud，主要使用vue3 + pinia + uview-plus
 #### 在HBuilderX中点击 文件 -> 导入 -> 从本地目录导入，选择项目目录即可导入项目 
 #### 运行只需执行`npm i` 安装依赖(node版本 v20.16)，然后在HBuilderX中点击运行 -> 运行到微信开发者工具即可（运行前勾选运行时压缩代码）
 
@@ -21,6 +21,6 @@
 
 ## 公共方法
 #### 示例在index页面中，后续添加公共方法会在文档中说明
-1. utils/request 请求方法（目前不了解服务端返回规则，仍需完善）
+1. utils/request 请求方法
 2. pinia 全局状态管理
-3. uview-plus Uni-app常用UI组件库，且提供很多常用api [官方文档](https://uiadmin.net/uview-plus/components/intro.html)
+3. [uview-plus](https://uiadmin.net/uview-plus/components/intro.html) Uni-app常用UI组件库，且提供很多常用api

api/lock.js

@@ -0,0 +1,12 @@
+import request from '../utils/request'
+
+// lock 锁模块
+
+// 获取锁列表
+export function getLockListRequest(data) {
+  return request({
+    url: '/lock/list',
+    method: 'POST',
+    data
+  })
+}

config/env.js

@@ -22,4 +22,4 @@ const PROD = {
 }
 
 // 更换环境的时候 切换导出就行
-export default DEV
+export default PRE

pages.json

@@ -9,10 +9,22 @@
 	},
 	"pages": [
 		{
-			"path": "pages/home/home"
+			"path": "pages/home/home",
+			"style": {
+				"navigationBarTitleText": "星星锁",
+				"navigationBarTextStyle": "white",
+				"navigationBarBackgroundColor": "#63b8af",
+				"navigationStyle": "default"
+			}
 		},
 		{
-			"path": "pages/mine/mine"
+			"path": "pages/mine/mine",
+			"style": {
+				"navigationBarTitleText": "星星锁",
+				"navigationBarTextStyle": "white",
+				"navigationBarBackgroundColor": "#63b8af",
+				"navigationStyle": "default"
+			}
 		},
 		{
 			"path": "pages/index/index"

pages/home/home.vue

@@ -1,45 +1,136 @@
 <template>
 	<view>
-    <view v-if="isLogin">111111</view>
-    <view v-else>
-      <view class="button-login" @click="login">登录</view>
+    <view v-if="!penging">
+      <view v-if="isLogin">
+        <scroll-view scroll-y="true" :style="{ height: 'calc(100vh)' }" lower-threshold="100"
+                     @refresherrefresh="refresherList" :refresher-enabled="true" @scrolltolower="nextPage"
+                     :refresher-triggered="refresherTriggered">
+          <view class="search">
+            <up-search :searchIconSize="48" :inputStyle="{ fontSize: '32rpx' }" @focus="getFocus" @blur="getBlur"
+                       :height="80" placeholder="搜索" :clearabled="false" @change="changeSearch"
+                       v-model="search.searchStr" bgColor="#ffffff" :showAction="false" maxlength="20"></up-search>
+          </view>
+          <view class="lock-list" v-if="!penging">
+            <view v-if="lockList.length === 0 && search.searchStr === '' && !focus">
+              <image src="/static/images/icon_add.png" mode="aspectFill" class="button-add-big"></image>
+              <view class="text">填加锁时，手机必须在锁旁边</view>
+            </view>
+            <view v-else>
+              <view class="group" v-for="group in lockList" :key="group.groupId">
+                <view class="group-name">
+                  <view class="group-name-text">{{group.groupName}}</view>
+                  <view class="group-name-line"></view>
+                </view>
+                <view class="lock" v-for="lock in group.lockList" :key="lock.lockId">
+                  <view class="lock-top">
+                    <image class="lock-image-lock" src="/static/images/icon_lock.png"></image>
+                    <view class="lock-top-right">
+                      <view class="lock-top-right-power">
+                        <image class="lock-top-right-power-image" src="/static/images/icon_power.png"></image>
+                        <view class="lock-top-right-power-text">{{lock.electricQuantity}}%</view>
+                      </view>
+                      <view>{{getRole(lock.userType)}}</view>
+                    </view>
+                  </view>
+                  <view class="lock-name">{{lock.lockName}}</view>
+                  <view class="lock-time">
+                    <view v-if="lock.keyType !== 1" style="font-size: 32rpx">{{ getTimeLimit(lock.keyType) }}</view>
+                    <view v-else>
+                      <view>{{ timeFormat(lock.startDate, 'yyyy-mm-dd h:M') }}</view>
+                      <view>{{ timeFormat(lock.endDate, 'yyyy-mm-dd h:M ') + getTimeLimit(lock.keyType) }}</view>
+                    </view>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+        <image v-if="lockList.length !== 0" src="/static/images/icon_add.png" mode="aspectFill"
+               class="button-add"></image>
+      </view>
+      <view v-else>
+        <view class="button-login" @click="login">登录</view>
+      </view>
     </view>
-	</view>
+  </view>
 </template>
 
 <script>
+  import { timeFormat } from 'uview-plus'
   import { getUserInfoRequest } from '@/api/user'
   import { useUserStore } from '@/stores/user'
+  import { useLockStore } from '@/stores/lock'
   import { mapState, mapActions } from 'pinia'
 
 	export default {
 		data() {
 			return {
-
+        search: {
+          pageNo: 1,
+          pageSize: 50,
+          searchStr: ''
+        },
+        refresherTriggered: false,
+        focus: false,
+        penging: false
 			}
 		},
     computed: {
-      ...mapState(useUserStore, ['userInfo', 'isLogin'])
+      ...mapState(useUserStore, ['userInfo', 'isLogin']),
+      ...mapState(useLockStore, ['lockList', 'lockTotal'])
     },
     async onLoad() {
       uni.showLoading({
         title: '加载中'
       })
+      this.penging = true
       const token = uni.getStorageSync('token')
       if(token) {
         this.updateLoginStatus(true)
-        await this.getUserInfo()
+        const code = await this.getUserInfo()
+        if(code === 0) {
+          await this.getLockList(this.search)
+        }
       }
+      this.penging = false
       uni.hideLoading()
     },
 		methods: {
+      timeFormat,
       ...mapActions(useUserStore, ['updateUserInfo', 'updateLoginStatus', 'login']),
+      ...mapActions(useLockStore, ['getLockList', 'getRole', 'getTimeLimit']),
+      async nextPage() {
+        if(this.lockList.length < this.lockTotal) {
+          this.search.pageNo++
+          const { code } = await this.getLockList(this.search)
+          if(code !== 0) {
+            this.search.pageNo--
+          }
+        }
+      },
+      async refresherList() {
+        this.refresherTriggered = true
+        this.search.pageNo = 1
+        await this.getLockList(this.search)
+        this.refresherTriggered = false
+      },
+      async changeSearch(data) {
+        this.search.searchStr = data
+        await this.getLockList(this.search)
+      },
       async getUserInfo() {
         const { code, data } = await getUserInfoRequest()
         if(code === 0) {
           this.updateUserInfo(data)
           console.log(this.userInfo)
         }
+        return code
+      },
+      getFocus() {
+        this.focus = true
+      },
+      getBlur() {
+        this.focus = false
       }
 		}
 	}
@@ -52,6 +143,12 @@ page {
 </style>
 
 <style scoped lang="scss">
+.search {
+  margin-top: 32rpx;
+  width: 686rpx !important;
+  margin-left: 32rpx;
+}
+
 .button-login {
   margin-top: 40vh;
   border-radius: 46rpx;
@@ -65,4 +162,117 @@ page {
   font-size: 48rpx;
   font-weight: bold;
 }
+
+.button-add {
+  width: 120rpx;
+  height: 120rpx;
+  position: fixed;
+  right: 50rpx;
+  bottom: 50rpx;
+  border-radius: 50%;
+}
+
+.lock-list {
+  padding-bottom: 32rpx;
+  width: 672rpx;
+  margin-left: 39rpx;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  .lock {
+    margin-top: 32rpx;
+    width: 320rpx;
+    height: 300rpx;
+    background: #FFFFFF;
+    box-shadow: 0 8rpx 36rpx 0 rgba(0,0,0,0.12);
+    border-radius: 32rpx;
+
+    .lock-name {
+      padding: 0 24rpx;
+      font-size: 32rpx;
+      font-weight: bold;
+      word-break: break-all;
+
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: normal;
+    }
+
+    .lock-time {
+      padding: 12rpx 24rpx 0 24rpx;
+      font-size: 22rpx;
+      font-weight: bold;
+    }
+
+    .lock-top {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 24rpx 24rpx 12rpx 24rpx;
+      font-size: 22rpx;
+
+      .lock-image-lock {
+        width: 64rpx;
+        height: 64rpx;
+      }
+
+      .lock-top-right-power {
+        display: flex;
+        align-items: center;
+
+        .lock-top-right-power-image {
+          width: 40rpx;
+          height: 40rpx;
+          margin-right: 10rpx;
+        }
+      }
+    }
+  }
+
+  .group {
+    width: 672rpx;
+    margin-top: 32rpx;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    .group-name {
+      width: 672rpx;
+      display: flex;
+      align-items: center;
+      font-size: 32rpx;
+      font-weight: bold;
+    }
+
+    .group-name-text {
+      padding: 0 32rpx;
+    }
+
+    .group-name-line {
+      flex-grow: 1;
+      height: 3rpx;
+      background: #E5E5E5;
+    }
+  }
+}
+
+.button-add-big {
+  width: 400rpx;
+  height: 400rpx;
+  margin-top: 250rpx;
+  margin-left: 136rpx;
+}
+
+.text {
+  width: 672rpx;
+  font-size: 32rpx;
+  color: #999999;
+  text-align: center;
+  margin-top: 32rpx;
+  font-weight: bold;
+}
 </style>

pages/mine/mine.vue

@@ -1,6 +1,6 @@
 <template>
 	<view v-if="buttonInfo">
-    <image :style="{marginTop: buttonInfo.bottom + 10 + 'px'}" src="/static/images/background_mine.png"
+    <image src="/static/images/background_mine.png"
            class="background-image"></image>
     <view v-if="isLogin">
       <view class="view">
@@ -99,6 +99,7 @@ page {
 
 <style scoped lang="scss">
 .background-image {
+  margin-top: 32rpx;
   margin-left: 20rpx;
   width: 710rpx;
   height: 156rpx;

pages/userInfo/userInfo.vue

@@ -92,7 +92,7 @@ export default {
       const path = e.detail.avatarUrl
       const list = path.split('/')
       const filename = list[list.length - 1]
-      wx.getFileSystemManager().getFileInfo({
+      uni.getFileSystemManager().getFileInfo({
         filePath: path,
         async success (res) {
           const size = res.size

stores/lock.js

@@ -0,0 +1,54 @@
+/**
+ * @description 锁信息数据持久化
+ */
+import { defineStore } from 'pinia'
+import { getLockListRequest } from '@/api/lock'
+
+export const useLockStore = defineStore('lock', {
+  state() {
+    return {
+      // 锁列表
+      lockList: [],
+      // 锁总数
+      lockTotal: 0
+    }
+  },
+  actions: {
+    getRole(userType) {
+      if(userType === 110301) {
+        return '超级管理员'
+      } else {
+        return '普通用户'
+      }
+    },
+    getTimeLimit(keyType) {
+      if(keyType === 1) {
+        return '永久'
+      } else if(keyType === 2) {
+        return '限时'
+      } else if(keyType === 3) {
+        return '单次'
+      } else {
+        return '循环'
+      }
+    },
+    async getLockList(params) {
+      const { code, data, message } = await getLockListRequest(params)
+      if(code === 0) {
+        this.lockTotal = data.total
+        if(params.pageNo === 1) {
+          this.lockList = data.groupList
+        } else {
+          this.lockList = this.lockList.concat(data.groupList)
+        }
+        return { code }
+      } else {
+        uni.showToast({
+          title: message,
+          icon: 'none'
+        })
+        return { code, message }
+      }
+    }
+  }
+})

stores/user.js

@@ -3,6 +3,7 @@
  */
 import { defineStore } from 'pinia'
 import { getUserInfoRequest } from '@/api/user'
+import { useLockStore } from '@/stores/lock'
 
 export const useUserStore = defineStore('user', {
   state() {
@@ -21,9 +22,13 @@ export const useUserStore = defineStore('user', {
       this.isLogin = status
     },
     async login() {
-      uni.setStorageSync('token', '1041|9UcJSZO3C1uuDnIgG8jXTxNXDIiCrvvIhdj7bFF8c1c07b2d')
+      uni.setStorageSync('token', '3021|MZv7iEf0NwjCPSGx4QWs37zOjeVN3GrSJ2v7D56L7db1fcc5')
       this.isLogin = true
       const { code, data } = await getUserInfoRequest()
+      useLockStore().getLockList({
+        pageNo: 1,
+        pageSize: 50
+      })
       if(code === 0) {
         this.updateUserInfo(data)
       }