10 changed files with 359 additions and 37 deletions
@ -0,0 +1,165 @@ |
|||
// subpages/searchResult/pages/punchCard/punchCard.js
|
|||
import api from "../../../../utils/api" |
|||
const QQMapWX = require('../../../../utils/qqmap-wx-jssdk') |
|||
|
|||
var timerId= null; |
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
form:{ |
|||
name:"", |
|||
birthday:"", |
|||
mobile:"", |
|||
gridName:"", |
|||
homeName:"", |
|||
genderName:"", |
|||
}, |
|||
resiId:"", |
|||
punchFlag:null, |
|||
currentTime:'' |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
console.log(options); |
|||
this.updateTime(); |
|||
timerId = setInterval(this.updateTime, 1000); |
|||
console.log(timerId); |
|||
if(options.resiId){ |
|||
this.setData({ |
|||
resiId:options.resiId |
|||
}) |
|||
console.log(this.data.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,houseInfo,genderName} = res.data; |
|||
this.setData({ |
|||
'form.name':name, |
|||
'form.birthday':birthday, |
|||
'form.mobile':mobile, |
|||
'form.gridName' :houseInfo.gridName, |
|||
'form.homeName' :houseInfo.homeName, |
|||
'form.genderName' :genderName, |
|||
}); |
|||
console.log(this.data.form); |
|||
} catch(err) { |
|||
console.log(err); |
|||
} |
|||
}, |
|||
handlePunch(){ |
|||
this.setData({ |
|||
punchFlag:!this.data.punchFlag, |
|||
animationClass:'animate' |
|||
}) |
|||
console.log(this.data.animationClass); |
|||
setTimeout(() => { |
|||
this.setData({ animationClass: '' }); |
|||
}, 1500); |
|||
}, |
|||
toAddResi(){ |
|||
wx.navigateTo({ |
|||
url: `/subpages/addResi/pages/addResi/addResi?type=edit&resiId=${this.data.resiId}`, |
|||
}) |
|||
}, |
|||
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, |
|||
// 'fmData.address': res.result.address,
|
|||
// 'fmData.longitude':res.result.location.lng,
|
|||
// 'fmData.latitude':res.result.location.lat,
|
|||
}) |
|||
}, |
|||
fail(err) { |
|||
console.debug(err) |
|||
} |
|||
}) |
|||
}, |
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload() { |
|||
if (timerId) { |
|||
clearInterval(timerId); |
|||
timerId = null; |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage() { |
|||
|
|||
} |
|||
}) |
|||
@ -0,0 +1,4 @@ |
|||
{ |
|||
"usingComponents": {}, |
|||
"navigationBarTitleText": "详情" |
|||
} |
|||
@ -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}}">{{!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">修改居民信息</view> |
|||
<view class="yellow btn">满意度调查</view> |
|||
<view class="green btn" bind:tap="toEvent">上报居民诉求</view> |
|||
</view> |
|||
@ -0,0 +1,103 @@ |
|||
/* 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: 400rpx; |
|||
margin-top: 20rpx; |
|||
padding: 30rpx; |
|||
} |
|||
|
|||
.card .title{ |
|||
position: relative; |
|||
} |
|||
.card .title::after{ |
|||
position: absolute; |
|||
left: -30rpx; |
|||
top: 8rpx; |
|||
content: " "; |
|||
width: 10rpx; |
|||
height: 28rpx; |
|||
background-color: #3A80E7; |
|||
} |
|||
.info{ |
|||
margin-top: 40rpx; |
|||
} |
|||
.info .item{ |
|||
display: flex; |
|||
margin-top: 20rpx; |
|||
} |
|||
.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: 0 auto; |
|||
} |
|||
|
|||
.address{ |
|||
color: #666666; |
|||
font-size: 28rpx; |
|||
margin: 0 auto; |
|||
margin-top: 40rpx; |
|||
} |
|||
|
|||
@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; |
|||
} |
|||
|
|||
|
|||
Loading…
Reference in new issue