走访打卡页面

app.json

@@ -52,6 +52,7 @@
                 "pages/searchResult/searchResult",
                 "pages/searchRecords/searchRecords",
                 "pages/resiInfo/resiInfo",
+                "pages/punchCard/punchCard",
                 "pages/checkLog/checkLog"
             ]
         },

subpages/searchResult/pages/punchCard/punchCard.js

@@ -0,0 +1,188 @@
+// subpages/searchResult/pages/punchCard/punchCard.js
+import api from "../../../../utils/api"
+const QQMapWX = require('../../../../utils/qqmap-wx-jssdk')
+const app = getApp()
+var timerId= null;
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        form:{
+            name:"",
+            birthday:"",
+            mobile:"",
+            homeName:"",
+            genderName:"",
+        },
+        resiId:"",
+        punchFlag:null,
+        currentTime:'',
+        address:'',
+        longitude:'',
+        latitude:'',
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+        this.updateTime();
+        timerId = setInterval(this.updateTime, 1000);
+        if(options.resiId){
+            this.setData({
+                resiId:options.resiId
+            })
+            this.getResiDetail()
+        }
+        this.data.qqMapWX = new QQMapWX({
+            key: 'CMJBZ-4DECI-JXGGN-5B4WU-QLV2H-B5BEJ'
+        })
+        this.reverseLocation()
+    },
+    updateTime() {
+        let date = new Date();
+        let hours = date.getHours().toString().padStart(2, '0');
+        let minutes = date.getMinutes().toString().padStart(2, '0');
+        let seconds = date.getSeconds().toString().padStart(2, '0');
+        this.setData({
+            currentTime: `${hours}:${minutes}:${seconds}`
+        });
+    },
+    getResiDetail: async function() {
+        try {
+            let res = await api.getResiDetail(this.data.resiId);
+            const {birthday,mobile,name,genderName,resideInfos} = res.data;
+             this.setData({
+                            'form.name':name,
+                            'form.genderName':genderName,
+                            'form.birthday':birthday,
+                            'form.mobile':mobile,
+                            'form.homeName' :resideInfos[0].agencyName + resideInfos[0].homeName,
+                            });
+                            console.log(this.data.form);
+        } catch(err) {
+            console.log(err);
+        }
+    },
+    handlePunch(){
+        this.setData({
+            punchFlag:!this.data.punchFlag,
+            animationClass:'animate'
+        })
+        setTimeout(() => {
+            this.setData({ animationClass: '' });
+            this.clockRecords()
+           
+        }, 1500);  
+    },
+    clockRecords(){
+        let currentDate = new Date().toISOString().split('T')[0]; // 会得到形如 "2023-09-27" 的日期
+        let obj = {
+            resiId:this.data.resiId,
+            clockTime: currentDate + " " + this.data.currentTime,
+            clockAddress: this.data.address,
+            longitude:this.data.longitude ,
+            latitude:this.data.latitude 
+        }
+       api.clockRecords(obj).then(res=>{
+           wx.showToast({
+            title: this.data.punchFlag?'打卡成功':'更新成功',
+            icon:'none'
+          })
+       }).catch(err=>{
+            console.log(err);
+        })
+    },
+    toAddResi(){
+         wx.navigateTo({
+                url: `/subpages/addResi/pages/addResi/addResi?type=edit&resiId=${this.data.resiId}`,
+            })
+    },
+    toWebView(){
+        console.log(app.globalData);
+        wx.navigateTo({
+            url: '/pages/webView/webView?url=' + app.globalData.questionnaireUrl,
+        })
+    },
+    toEvent(){
+        let obj ={
+            resiId : this.data.resiId,
+            resiMobile : this.data.form.mobile,
+            resiName:this.data.form.name
+        }
+        wx.setStorageSync('resiDetail',obj)
+        wx.navigateTo({
+          url: '/subpages/demandCheck/pages/dissatisfied/demandCheck/demandCheck',
+        })
+    },
+    reverseLocation() {
+        const _this = this
+        this.data.qqMapWX.reverseGeocoder({
+            success(res) {
+              console.log(res);
+                _this.setData({
+                    addressContent:res.result.address,
+                    address: res.result.address,
+                    longitude:res.result.location.lng,
+                    latitude:res.result.location.lat,
+                })
+            },
+            fail(err) {
+                console.debug(err)
+            }
+        })
+    },
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+        if (timerId) {
+            clearInterval(timerId);
+            timerId = null;
+        }
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

subpages/searchResult/pages/punchCard/punchCard.json

@@ -0,0 +1,4 @@
+{
+    "usingComponents": {},
+    "navigationBarTitleText": "详情"
+}

subpages/searchResult/pages/punchCard/punchCard.wxml

@@ -0,0 +1,46 @@
+<!--subpages/searchResult/pages/punchCard/punchCard.wxml-->
+<!-- 基本信息 -->
+<view class="card">
+    <view class="title">基础信息</view>
+    <view class="info">
+        <view class="item">
+            <view class="label">姓名：</view>
+            <View class="value">{{form.name}}</View>
+        </view>
+        <view class="item">
+            <view class="label">性别：</view>
+            <View class="value">{{form.genderName}}</View>
+        </view>
+        <view class="item">
+            <view class="label">出生日期：</view>
+            <View class="value">{{form.birthday}}</View>
+        </view>
+        <view class="item">
+            <view class="label">住宅：</view>
+            <View class="value">{{form.homeName}}</View>
+        </view>
+        <view class="item">
+            <view class="label">电话：</view>
+            <View class="value">{{form.mobile}}</View>
+        </view>
+    </view>
+</view>
+
+
+
+<!-- 走访打卡 -->
+<view class="card ">
+    <view class="title">走访打卡</view>
+    <view class="punch {{animationClass}}" bind:tap="handlePunch">
+        <view class="{{animationClass}}" style="font-size: 36rpx;">{{!punchFlag ? '开始打卡' : '更新打卡'}}</view>
+        <view class="{{animationClass}}" style="font-family:PingFang-SC-Regular;font-size: 28rpx;opacity: 0.72;">{{currentTime}}</view>
+    </view>
+    <view class="address">当前位置：{{addressContent}}</view>
+</view>
+<!-- 相关操作 -->
+<view class="card">
+    <view class="title">相关操作</view>
+    <view class="blue btn" bind:tap="toAddResi" style="margin-top: 40rpx ; ">修改居民信息</view>
+    <view class="yellow btn" bind:tap="toWebView">满意度调查</view>
+    <view class="green btn" bind:tap="toEvent">上报居民诉求</view>
+</view>

subpages/searchResult/pages/punchCard/punchCard.wxss

@@ -0,0 +1,104 @@
+/* subpages/searchResult/pages/punchCard/punchCard.wxss */
+/**index.wxss**/
+page {
+    width: 100%;
+    min-height: 100vh;
+    overflow: hidden;
+    overflow-y: scroll;
+    background-color: #f7f7f7;
+    padding: 0 20rpx;
+    box-sizing: border-box;
+  }
+.card{
+    background-color: #fff;
+    border-radius: 20rpx;
+    display: flex;
+    flex-direction: column;
+    min-height: 350rpx;
+    margin-top: 20rpx;
+    padding: 30rpx 30rpx 40rpx;
+}
+
+.card .title{
+    position: relative;
+    font-size: 34rpx;
+}
+.card .title::after{
+    position: absolute;
+    left: -30rpx;
+    top: 8rpx;
+    content: " ";
+    width: 10rpx;
+    height: 28rpx;
+    background-color: #3A80E7;
+}
+.info{
+    margin-top: 6rpx;
+}
+.info .item{
+    display: flex;
+    margin-top: 28rpx;
+}
+.info .item .label{
+    width: fit-content;
+}
+.punch{
+    width: 260rpx;
+    height: 260rpx;
+    background: linear-gradient(180deg,#5E9FFF, #3A80E7);
+    box-shadow: 0rpx 4rpx 35rpx 0rpx rgba(61,139,248,0.48);
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    margin: 50rpx auto 0;
+}
+
+.address{
+    color: #666666;
+    font-size: 28rpx ;
+    margin: 0 auto;
+    margin: 40rpx auto 30rpx;
+}
+  
+@keyframes rotateAnimation {
+    0% {
+      transform: rotateY(0deg);
+    }
+    100% {
+      transform: rotateY(180deg);
+    }
+  }
+  
+.animate {
+    animation: rotateAnimation 2s forwards;
+  }
+  .btn{
+      padding: 0 85rpx;
+      box-sizing: border-box;
+      min-width: 364rpx;
+      text-align: center;
+      height: 76rpx;
+      border-radius: 38rpx;
+      margin: 30rpx auto 0;
+      line-height: 76rpx;
+      border-radius: 76rpx;
+  }
+  
+  .blue{
+      color:#3A80E7 ;
+      border: 2rpx solid #3A80E7;
+
+  }
+  .yellow{
+      color: #FF783C;
+      border: 2rpx solid #FF783C;
+  }
+  .green{
+    color: #13C8BD;
+    border: 2rpx solid #13C8BD;
+  }
+
+  

subpages/searchResult/pages/resiInfo/resiInfo.js

@@ -828,8 +828,8 @@ Page({
     toEvent() {
         let obj = {
             resiId: this.data.resiId,
-            resiMobile: this.data.form.mobile,
+            resiMobile: this.data.form.baseInfoDto.mobile,
-            resiName: this.data.form.name
+            resiName: this.data.form.baseInfoDto.name
         }
         wx.setStorageSync('resiDetail', obj)
         wx.navigateTo({
@@ -921,6 +921,11 @@ Page({
             url: '/subpages/statistics/pages/residentPortrait2/residentPortrait?id=' + this.data.resiId,
         })
     },
+    handelTopunchCard(){
+        wx.navigateTo({
+            url: '/subpages/searchResult/pages/punchCard/punchCard?resiId=' + this.data.resiId,
+        })
+    },
     handelClickTab(e) {
         wx.pageScrollTo({
             selector: `#${e.currentTarget.dataset.item.id}`,

subpages/searchResult/pages/resiInfo/resiInfo.wxml

@@ -334,7 +334,7 @@
     <view class="btn" bind:tap="toWebView" wx:if="{{agencyLevel!=='street'}}">
         满意度调查</view>
     <!--  -->
-    <view class="btn blue">走访打卡</view>
+    <view class="btn blue" bind:tap="handelTopunchCard">走访打卡</view>
 </view>
 <van-dialog use-slot title="密码验证" show="{{ checkPassword }}" show-cancel-button bind:close="onClosePassword" bind:confirm="onConfirmassword" custom-class="dialog" confirm-button-color="#3974f6">
     <view>