7 changed files with 1078 additions and 241 deletions
@ -1,52 +1,116 @@ |
|||
<!--subpages/searchResult/pages/punchCard/punchCard.wxml--> |
|||
<!-- 基本信息 --> |
|||
<view class="card"> |
|||
<view class="top"> |
|||
<view class="left"> |
|||
<view class="name"> |
|||
<view style="font-size: 32rpx;margin-right: 35rpx;">{{form.baseInfoDto.name}}</view> |
|||
<view style="font-size: 28rpx;color:#999999 ;">信息完整度：</view> |
|||
<view style="color:#04b8ad;">{{form.integrityData.score}}%</view> |
|||
</view> |
|||
<view class="tags"> |
|||
<view class="tag" wx:for="{{form.baseInfoDto.categoryInfo.categoryNames}}" wx:key="index">{{item}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="right"> |
|||
<view class="jm-btn" bind:tap="toAddResi">编辑</view> |
|||
</view> |
|||
</view> |
|||
<view class="form"> |
|||
<view class="form_label">地址：</view> |
|||
<view class="form_value">{{form |
|||
.resideInfoDtos[0].agencyName + form.resideInfoDtos[0].homeName}}</view> |
|||
</view> |
|||
<view class="form"> |
|||
<view class="form_label">创建时间：</view> |
|||
<view class="form_value">{{form.baseInfoDto.createdTime}}</view> |
|||
</view> |
|||
<view class="form"> |
|||
<view class="form_label">最近更新时间：</view> |
|||
<view class="form_value">{{form.baseInfoDto.updatedTime}}</view> |
|||
</view> |
|||
<view class="tabs"> |
|||
<view class="tab_item {{activeType === index ? 'border_bto' : ''}}" wx:for="{{tabList}}" bind:tap="handelClickTab" data-item="{{item}}" data-index="{{index}}" wx:key="index"> |
|||
{{item.name}} <text style="color:{{item.filledQty!==item.totalQty?'#f27225':'#1ebfb5'}}">（{{ item.filledQty }}/{{ item.totalQty }}）</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="card"> |
|||
<view class="title">基础信息</view> |
|||
<view class="info"> |
|||
<view class="item"> |
|||
<view class="label">姓名：</view> |
|||
<View class="value">{{form.name}}</View> |
|||
<view class="label">国籍：</view> |
|||
<View class="value">{{form.baseInfoDto.nationalityName|| '--' }}</View> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="label">证件类型：</view> |
|||
<View class="value">{{idTypeList[form.baseInfoDto.idType].label}}</View> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="label">证件号：</view> |
|||
<View class="value">{{form.baseInfoDto.idNum}}</View> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="label">联系电话：</view> |
|||
<View class="value">{{form.baseInfoDto.mobile}}</View> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="label">文化程度：</view> |
|||
<View class="value">{{form.eduInfoDto.cultureLevelName}}</View> |
|||
</view> |
|||
|
|||
<view class="item"> |
|||
<view class="label">性别：</view> |
|||
<View class="value">{{form.genderName}}</View> |
|||
<View class="value">{{form.baseInfoDto.genderName}}</View> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="label">出生日期：</view> |
|||
<View class="value">{{form.birthday}}</View> |
|||
<View class="value">{{form.baseInfoDto.birthday}}</View> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="label">民族：</view> |
|||
<View class="value">{{form.baseInfoDto.nationName}}</View> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="label">住宅：</view> |
|||
<View class="value">{{form.homeName}}</View> |
|||
<view class="label">婚姻状况：</view> |
|||
<View class="value"> {{marriageName}}</View> |
|||
|
|||
</view> |
|||
<view class="item"> |
|||
<view class="label">电话：</view> |
|||
<View class="value">{{form.mobile}}</View> |
|||
<view class="label">籍贯：</view> |
|||
<View class="value">{{form.baseInfoDto.nativePlace}}</View> |
|||
</view> |
|||
</view> |
|||
<view class="jm-btn" bind:tap="goResidentPortrait2">居民画像</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
<!-- 走访打卡 --> |
|||
<view class="card "> |
|||
<view class="flex-sb"> |
|||
<view class="title">走访打卡</view> |
|||
<view class="view" bind:tap="gotopage" data-url="/subpages/searchResult/pages/checkLog/checkLog?resiId={{resiId}}">打卡记录</view> |
|||
<view class="card" wx:for="{{expandList}}" wx:key="index" id="{{item.scrollId}}"> |
|||
<view class="title">{{item.title}}</view> |
|||
<view class="info" wx:for="{{item.children}}" wx:for-index="indexC" wx:key="indexC" wx:for-item="itemC"> |
|||
<view class="item"> |
|||
<view class="label">{{itemC.label}}：</view> |
|||
<View class="value">{{itemC.value|| '--' }}</View> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 走访打卡 --> |
|||
<!-- <view class="card "> |
|||
<view class="flex-sb"> |
|||
<view class="title">走访打卡</view> |
|||
<view class="view" bind:tap="gotopage" data-url="/subpages/searchResult/pages/checkLog/checkLog?resiId={{resiId}}">打卡记录</view> |
|||
</view> |
|||
<view class="punch {{animationClass}}" bind:tap="handlePunch"> |
|||
<!-- <view class="{{animationClass}}" style="font-size: 36rpx;">{{!punchFlag ? '打卡' : '更新打卡'}}</view> --> |
|||
<view class="{{animationClass}}" style="font-size: 36rpx;">打卡</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 class="address" style="margin-top: 0;" wx:if="{{lastLog.clockInTime}}">最近打卡时间：{{lastLog.clockInTime}}</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" wx:if="{{agencyLevel!=='street'}}">满意度调查</view> |
|||
<view class="green btn" bind:tap="toEvent">上报居民诉求</view> |
|||
</view> --> |
|||
|
|||
|
|||
<view class="bto_btn"> |
|||
<button class="btn" hover-class="blue" bind:tap="toEvent">上报诉求</button> |
|||
<button class="btn" hover-class="blue" bind:tap="toWebView" wx:if="{{agencyLevel!=='street'}}"> |
|||
满意度调查</button> |
|||
<!-- --> |
|||
<button class="btn blue">走访打卡</button> |
|||
</view> |
|||
@ -1,127 +1,235 @@ |
|||
/* 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; |
|||
} |
|||
|
|||
background-color: #f7f7f7; |
|||
height: auto; |
|||
overflow-y: scroll; |
|||
padding: 0 20rpx 160rpx ; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.form { |
|||
display: flex; |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
.form .form_label { |
|||
font-size: 30rpx; |
|||
color: #999999; |
|||
} |
|||
|
|||
.form .form_value { |
|||
color: #333333; |
|||
text-align: left; |
|||
font-weight: 500; |
|||
flex: 1; |
|||
} |
|||
|
|||
.card { |
|||
background-color: #fff; |
|||
border-radius: 20rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
margin-top: 20rpx; |
|||
padding: 30rpx 30rpx 40rpx; |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.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; |
|||
0% { |
|||
transform: rotateY(0deg); |
|||
} |
|||
.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; |
|||
|
|||
100% { |
|||
transform: rotateY(180deg); |
|||
} |
|||
.yellow{ |
|||
color: #FF783C; |
|||
border: 2rpx solid #FF783C; |
|||
} |
|||
.green{ |
|||
color: #13C8BD; |
|||
border: 2rpx solid #13C8BD; |
|||
} |
|||
} |
|||
|
|||
.flex-sb { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.view { |
|||
color: #999; |
|||
font-size: 24rpx; |
|||
} |
|||
.jm-btn { |
|||
position: absolute; |
|||
top: 30rpx; |
|||
right: 20rpx; |
|||
width: 146rpx; |
|||
height: 56rpx; |
|||
line-height: 56rpx; |
|||
background: #3A80E7; |
|||
border-radius: 28rpx; |
|||
color: #fff; |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
} |
|||
.card { |
|||
position: relative; |
|||
} |
|||
.animate { |
|||
animation: rotateAnimation 2s forwards; |
|||
} |
|||
|
|||
.btn { |
|||
box-sizing: border-box; |
|||
text-align: center; |
|||
height: 76rpx; |
|||
border-radius: 38rpx; |
|||
margin: 30rpx 0; |
|||
line-height: 76rpx; |
|||
border-radius: 76rpx; |
|||
border: 2rpx solid #999999; |
|||
} |
|||
|
|||
.blue{ |
|||
background-color:#3974f6; |
|||
color: #fff; |
|||
border-color: #3974f6; |
|||
} |
|||
|
|||
.flex-sb { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.view { |
|||
color: #999; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.jm-btn { |
|||
position: absolute; |
|||
top: 30rpx; |
|||
right: 20rpx; |
|||
width: fit-content; |
|||
height: 56rpx; |
|||
padding: 0 20rpx; |
|||
box-sizing: border-box; |
|||
line-height: 56rpx; |
|||
background: #3974f6; |
|||
border-radius: 28rpx; |
|||
color: #fff; |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.tabs { |
|||
display: flex; |
|||
justify-content: start; |
|||
flex-wrap: wrap; |
|||
border-top: 1px solid #EAEAEA; |
|||
margin-top: 30rpx; |
|||
} |
|||
|
|||
.tabs .tab_item { |
|||
display: flex; |
|||
margin-right: 20rpx; |
|||
padding-bottom: 10rpx; |
|||
width: auto; |
|||
margin-top: 20rpx; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.tabs .tab_item .num { |
|||
font-weight: 400; |
|||
font-size: 36rpx; |
|||
} |
|||
|
|||
.tabs .tab_item .name { |
|||
font-size: 26rpx; |
|||
padding-bottom: 6rpx; |
|||
box-sizing: border-box; |
|||
color: #666666; |
|||
} |
|||
|
|||
|
|||
|
|||
.top { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.top .left { |
|||
flex: 1; |
|||
} |
|||
|
|||
.top .right { |
|||
width: 130rpx; |
|||
|
|||
} |
|||
|
|||
.top .left .name { |
|||
display: flex; |
|||
} |
|||
|
|||
.top .left .tags { |
|||
display: flex; |
|||
flex-grow: 0; |
|||
justify-content: start; |
|||
max-width: 645rpx; |
|||
overflow-x: scroll; |
|||
margin-top: 20rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.top .left .tags .tag { |
|||
background-color: rgba(236, 236, 236, 0.500000); |
|||
border-radius: 4rpx; |
|||
margin-right: 6rpx; |
|||
white-space: nowrap; |
|||
padding: 7rpx 8rpx; |
|||
width: auto; |
|||
box-sizing: border-box; |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #999999; |
|||
} |
|||
.border_bto{ |
|||
color: #3974f6 !important; |
|||
border-bottom: solid 6rpx #3974f6; |
|||
} |
|||
|
|||
.bto_btn{ |
|||
position: fixed; |
|||
bottom: 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
left: 0; |
|||
right: 0; |
|||
padding:0 20rpx; |
|||
box-sizing: border-box; |
|||
background: #fff; |
|||
padding-bottom: constant(safe-area-inset-bottom); |
|||
padding-bottom: env(safe-area-inset-bottom); |
|||
} |
|||
Loading…
Reference in new issue