服务页面静态页面

app.json

@@ -3,9 +3,8 @@
     "pages/index/index",
     "pages/message/message",
     "pages/life/life",
+    "pages/serve/serve",
     "pages/mine/mine"
-
-    
   ],
   "subPackages": [
     {
@@ -36,6 +35,10 @@
         "text":"消息",
         "pagePath": "pages/message/message",
         "iconPath": "images/icon/home.png"
+      },{
+        "text":"服务",
+        "pagePath": "pages/serve/serve",
+        "iconPath": "images/icon/home.png"
       },
       {
         "text":"生活圈",

app.wxss

@@ -112,10 +112,18 @@ page{
       width: 56rpx;
       height: 56rpx;
     }
+    .icon-80{
+      width: 80rpx;
+      height: 80rpx;
+    }
     .icon-100{
       width: 100rpx;
       height: 100rpx;
     }
+    .icon-68{
+      width: 68rpx;
+      height: 68rpx;
+    }
     .radius{
       border-radius: 100%;
     }
@@ -180,3 +188,12 @@ page{
 .flex-col{
   flex-direction: column;
 }
+.w-full{
+  width: 100%;
+}
+.h-full{
+  height: 100%;
+}
+.mr-30{
+  margin-right: 30rpx;
+}

custom-tab-bar/index.js

@@ -22,6 +22,14 @@ Component({
         selectedIconPath: "/images/icon/message-a.png",
         text: "消息",
       },
+      {
+        pagePath: "/pages/serve/serve",
+        iconPath: "/images/icon/serve.png",
+        selectedIconPath: "/images/icon/serve.png",
+        bulge:true,
+        text: "服务",
+      },
+
       {
         pagePath: "/pages/life/life",
         iconPath: "/images/icon/life.png",

custom-tab-bar/index.wxml

@@ -1,5 +1,6 @@
 <view class="tab-bar">
-  <view wx:for="{{list}}" wx:key="index" class="tab-bar-item " data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
+  <view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{item.bulge?'bulge':''}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
+    <view  wx:if="item.bulge" class="tab-bar-bulge"></view>
     <image class="image" src="{{selected == index ? item.selectedIconPath : item.iconPath}}"></image>
     <view  class="tab-bar-view" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
   </view>

custom-tab-bar/index.wxss

@@ -27,3 +27,26 @@
   font-size: 12px;
   margin-top: 4px;
 }
+.bulge {
+  background-color: #FFF;
+}
+.bulge .tab-bar-bulge{
+  position: absolute;
+  z-index: -1;
+  width: 64px;
+  height: 64px;
+  top: -24px;
+  border-radius: 50%;
+  background-color: #FFF;
+}
+.bulge .image{
+  position: absolute; 
+  width: 50px;
+  height: 50px;
+  top: -20px;
+}
+.bulge .tab-bar-view{
+  position: relative;
+  bottom: -16px;
+  margin-top: 4px;
+}

pages/serve/serve.js

@@ -0,0 +1,71 @@
+// pages/serve/serve.js
+const app = getApp()
+
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+        this.setData({
+            statusHeight: app.globalData.deviceInfo.statusHeight,
+            navigationHeight: app.globalData.deviceInfo.navigationHeight,
+          });
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

pages/serve/serve.json

@@ -0,0 +1,6 @@
+{
+    "usingComponents": {
+        "van-button": "@vant/weapp/button/index"
+    },
+    "navigationStyle": "custom"
+}

pages/serve/serve.wxml

@@ -0,0 +1,41 @@
+<!--pages/serve/serve.wxml-->
+<view class="header">
+    <view class="navigation" style="height: {{navigationHeight}}px; top: {{statusHeight}}px;line-height:{{navigationHeight}}px;text-align: center;">
+        服务
+    </view>
+    
+</view>
+<view class="body">
+    <view class="card header-card">
+        <view style="font-size: 40rpx;">您还未办理入住</view>
+        <view style="margin:12rpx 0 30rpx 0">在线合同签订、履约保证金等</view>
+        <view class="flex flex-sa" style="gap: 30rpx;">
+            <view class="card flex flex-flex-center-i" style="width: 50%;">
+                <image src="../../images/icon/000.png" class="icon-68" mode="" />
+                <view style="font-size:32rpx;color:#000000;font-weight: 600;" class="flex items-center flex-1">入住办理</view>
+            </view>
+            <view class="card flex flex-flex-center-i" style="width: 50%;">
+                <image src="../../images/icon/111.png" class="icon-68" mode="" />
+                <text style="font-size:32rpx;color:#000000;font-weight: 600;" class="flex items-center flex-1">入住评价</text>
+            </view>
+        </view>
+    </view>
+<view class="card flex flex-col list">
+    <view class="title">其他服务</view>
+    <view class="card flex items-center">
+        <image src="../../images/icon/333.png" class="icon-80 mr-30" mode=""/>
+        <view class="flex-1 text-30">故障报修</view>
+        <van-button color="#ecf6ff" round custom-style="color:#999999" size="small ">去处理</van-button>
+    </view>
+    <view class="card flex items-center">
+        <image src="../../images/icon/444.png" class="icon-80 mr-30" mode=""/>
+        <view class="flex-1 text-30">报事儿</view>
+        <van-button color="#ecf6ff" round custom-style="color:#999999" size="small ">去处理</van-button>
+    </view>
+    <view class="card flex items-center">
+        <image src="../../images/icon/555.png" class="icon-80 mr-30" mode=""/>
+        <view class="flex-1 text-30">共享空间</view>
+        <van-button color="#ecf6ff" round custom-style="color:#999999" size="small ">去处理</van-button>
+    </view>
+</view>
+</view>

pages/serve/serve.wxss

@@ -0,0 +1,32 @@
+/* pages/serve/serve.wxss */
+.navigation {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #333333;
+    font-size: 30rpx;
+    position: relative;
+    z-index: 100;
+  }
+  .header {
+    width: 100%;
+    background: linear-gradient(to right, #befeed 0%, #d5eefe 50%, #ebe9fb 100%);
+    height: 428rpx;
+  }
+  .body{
+    position: relative;
+    top: -245rpx;
+  }
+  .header-card{
+    background: linear-gradient(180deg, rgba(83,185,232,1) 0%,rgba(85,213,220,1) 56%,rgba(99,222,214,1) 100%);
+    width: calc(100vw - 40rpx);
+    margin: 0 auto;
+    top: 25px;
+    color: #ffffff;
+  }
+  .list{
+    width: calc(100vw - 40rpx);
+    margin: 80rpx auto 0;
+    background: linear-gradient(180deg, rgba(227,244,255,1) 0%,rgba(245,249,252,1) 100%);
+  }

project.private.config.json

@@ -10,5 +10,18 @@
         "autoAudits": false,
         "showShadowRootInWxmlPanel": true,
         "compileHotReLoad": true
+    },
+    "condition": {
+        "miniprogram": {
+            "list": [
+                {
+                    "name": "身份证识别",
+                    "pathName": "/subpages/OCRCard/pages/index/index",
+                    "query": "",
+                    "scene": null,
+                    "launchMode": "default"
+                }
+            ]
+        }
     }
 }

subpages/OCRCard/pages/index/index.js

@@ -1,13 +1,12 @@
 // subpages/OCRCard/pages/index/index.js
 const app = getApp()
-import  {getResidentBaseInfo} from "../../../../utils/api"
 Page({
 
     /**
      * 页面的初始数据
      */
     data: {
-
+        scanAnimation: null,
     },
 
     /**
@@ -24,6 +23,7 @@ Page({
      * 生命周期函数--监听页面初次渲染完成
      */
     onReady() {
+        this.startScanAnimation();
 
     },
 
@@ -68,52 +68,50 @@ Page({
     onShareAppMessage() {
 
     },
-    getTable: async function (type){
-    
-        let parm ={
-            searchKey:this.data.keyWord,
-            pageSize:10,
-            pageNo:1
-        }
-        let {data,code,msg} = await getResidentBaseInfo(parm)
-        if(code == 0){
-            this.setData({
-                tableData: this.data.tableData.concat(data.list),
-            })
-        }else{
 
-        }
-    },
     cardSuccess: async function(e){
         console.log(e.detail);
-        this.setData({
+       
-          keyWord:e.detail.id.text,
-          tableData:[]
-        })
-        // 跳转至居民详情页
-        await this.getTable('card')
-        if(this.data.tableData.length != 0){
-            wx.navigateTo({
-              url: `/subpages/searchResult/pages/resiInfo/resiInfo?resiId=${this.data.tableData[0].resiId}`,
-            })
-        }else{
-           wx.showToast({
-            title: '未查询到该居民，请录入居民信息',
-            duration:3000,
-            icon:'none',
-            success:function(){
-                setTimeout(()=>{
-                    wx.navigateTo({
-                        url: `/subpages/addResi/pages/addResi/addResi?type=add&name=${e.detail.name.text}&idCard=${e.detail.id.text}&gender=${e.detail.gender.text}&birth=${e.detail.birth.text}`,
-                      })
-                },3000)
-            }
-        })
-        }
     },
     back(){
         wx.navigateBack({
             delta: 1
         })
+    },
+    startScanAnimation() {
+        const that = this;
+        const maxY = 220; // 卡片高度 - 扫描线高度，具体看视觉需求
+      
+        function loopScan() {
+          // 从顶部到底部动画
+          const downAnim = wx.createAnimation({
+            duration: 2000,
+            timingFunction: 'linear',
+          });
+          downAnim.translateY(maxY).step();
+      
+          that.setData({
+            scanAnimation: downAnim.export()
+          });
+      
+          // 动画结束后，停一下然后回顶
+          setTimeout(() => {
+            const resetAnim = wx.createAnimation({
+              duration: 0,
+              timingFunction: 'step-start',
+            });
+            resetAnim.translateY(0).step();
+      
+            that.setData({
+              scanAnimation: resetAnim.export()
+            });
+      
+            // 再次循环
+            setTimeout(loopScan, 100);
+          }, 2000); // 等扫完后回顶
         }
+      
+        loopScan(); // 启动动画
+      }
+      
 })

subpages/OCRCard/pages/index/index.wxml

@@ -7,11 +7,18 @@
     </view>
 </view>
 <view class="body">
-    <image src="../../../../images/card.png" mode=""/>
+    <h1 style="font-size: 68rpx;font-weight: 600;text-align: left;" class="w-full">
-    <view>
+        Hi
-        <b>身份识别：</b>是在居民出示身份证原件或图片的场合下，通过OCR技术拍摄识别身份证信息。
+    </h1>
+    <view style="text-align: left;" class="w-full ">您需要先进行身份核验。</view>
+    <view class="card flex flex-center-i flex-col items-center mt-16" style="width: calc(100vw - 60px);">
+        <view class="card-container">
+  <image src="../../image/card.png" class="card-image" mode="aspectFit" />
+  <view class="scan-line" animation="{{scanAnimation}}"></view>
+</view>
+        <view style="font-size: 28rpx;color: #666666;" class="mt-16">温馨提示：请先拍照或上传身份证照片进行身份识别。</view>
     </view>
     <ocr-navigator bind:onSuccess="cardSuccess" certificateType="idCard" opposite="{{false}}" class="ocr">
-        <button hover-class="color">开始识别</button>
+        <button hover-class="color"  style="background-color:#0bb4b4">开始识别</button>
     </ocr-navigator>
 </view>

subpages/OCRCard/pages/index/index.wxss

@@ -5,20 +5,25 @@ page {
     overflow-y: scroll;
     background-color: #f7f7f7;
 }
+
 .top20 {
     margin-top: 20rpx;
 }
+
 .header {
     width: 100%;
     height: 550rpx;
     overflow: hidden;
 }
+
 .blue {
     color: #3A80E7;
 }
+
 .red {
     color: #FF502E;
 }
+
 .header .header-bg {
     width: 100%;
     height: 444rpx;
@@ -26,6 +31,7 @@ page {
     height: 100%;
     z-index: -997;
 }
+
 .header .navigation {
     width: 100%;
     display: flex;
@@ -36,13 +42,16 @@ page {
     position: relative;
     z-index: 100;
 }
+
 .gray {
     color: #999;
     font-size: 28rpx;
 }
+
 .font32 {
     font-size: 32rpx;
 }
+
 .back {
     width: 30rpx;
     height: 30rpx;
@@ -55,13 +64,14 @@ page {
 
 .body {
     position: relative;
-    top: -200rpx;
+    top: -414rpx;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 0 70rpx;
     align-items: center;
 }
+
 button {
     height: 84rpx;
     line-height: 84rpx;
@@ -71,12 +81,38 @@ button{
     color: #fff;
     font-size: 33rpx;
     border-radius: 84rpx;
-    background: linear-gradient(to right, #82b4fd, #3e93fe);
+    background: linear-gradient(to right, #82f1f1, #08b3b3);
     margin: 160rpx 0 0 !important;
 }
+
 .ocr {
     width: 100%;
 }
+
 .color {
     color: #fff;
 }
+
+.card-image {
+    width: 100%;
+    height: 100%;
+}
+
+
+.card-container {
+    position: relative;
+    width: 440rpx;
+    height: 280rpx;
+    overflow: hidden;
+}
+
+.scan-line {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 60rpx;
+    z-index: 10;
+    background: linear-gradient(to bottom, #b1e7e7, rgba(177, 231, 231, 0));
+    pointer-events: none;
+}