更换图片

pages/clock/clock.js

@@ -13,6 +13,7 @@ Page({
    */
   data: {
     approveStatus: false,
+    showCover: true,
     imgServerUrl,
     navigation: [
       {
@@ -154,11 +155,19 @@ Page({
       })
     }
     if (index === 2) {
-      wx.makePhoneCall({
-        phoneNumber: '4006920099',
-      })
+      this.changeCoverStatus()
     }
   },
+  callKefu() {
+    wx.makePhoneCall({
+      phoneNumber: '4006920099',
+    })
+  },
+  changeCoverStatus() {
+    this.setData({
+      showCover: !this.data.showCover
+    })
+  },
   async load() {
     const data = await this.location()
     punchClockNeedInfo({ longitude: data.longitude, latitude: data.latitude }).then(data => {

pages/clock/clock.wxml

@@ -72,16 +72,16 @@
           <text>上班打卡</text>
           <view class="clock-time">
             <image src="{{imgServerUrl}}/images/clock/clock-success-icon.png" wx:if="{{startPunch !== '未完成' }}"></image>
-            <text class="status-text"  wx:if="{{startPunch !== '未完成' }}">{{clock.formateHS(startPunch)}} 已打卡</text>
+            <text class="status-text" wx:if="{{startPunch !== '未完成' }}">{{clock.formateHS(startPunch)}} 已打卡</text>
             <text class="status-text" wx:else>{{startPunch}}</text>
           </view>
         </view>
         <view class="clock-out">
           <text>上班打卡</text>
           <view class="clock-time">
-            <image src="{{imgServerUrl}}/images/clock/clock-success-icon.png"  wx:if="{{endPunch !== '未完成' }}"></image>
-            <text class="status-text"  wx:if="{{endPunch !== '未完成' }}">{{clock.formateHS(endPunch)}} 已打卡</text>
-            <text class="status-text"  wx:else>{{endPunch}}</text>
+            <image src="{{imgServerUrl}}/images/clock/clock-success-icon.png" wx:if="{{endPunch !== '未完成' }}"></image>
+            <text class="status-text" wx:if="{{endPunch !== '未完成' }}">{{clock.formateHS(endPunch)}} 已打卡</text>
+            <text class="status-text" wx:else>{{endPunch}}</text>
           </view>
         </view>
       </view>
@@ -114,4 +114,15 @@
     </view>
     <image bindtap="toRule" src="{{imgServerUrl}}/images/clock/clock-video.png" class="video"></image>
   </view>
+</view>
+<view class="cover" hidden="{{showCover}}" bindtap="changeCoverStatus">
+  <view class="cover-kefu">
+    <view class="cover-kefu-title">开心工作客服电话</view>
+    <view class="cover-kefu-number">400-692-0099</view>
+    <view class="cover-kefu-tips">在线时间：每天8:00-21:00</view>
+    <view class="cover-kefu-button" bindtap="callKefu">
+      <image src="{{imgServerUrl}}/images/clock/clock-phone-call.png"></image>
+      <text>一键拨号</text>
+    </view>
+  </view>
 </view>

pages/clock/clock.wxss

@@ -9,6 +9,7 @@ page {
   width: 710rpx;
   height: 268rpx;
   margin: 20rpx;
+  box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.06);
 }
 
 .no-pass,
@@ -245,11 +246,14 @@ page {
 .image {
   height: 260rpx;
   width: 260rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .image image {
-  height: 100%;
-  width: 100%;
+  height: 260rpx;
+  width: 260rpx;
 }
 
 .clock-status {
@@ -311,8 +315,69 @@ page {
   height: 894rpx;
 }
 
-.video {
-  height: 268rpx;
-  width: 710rpx;
-  margin: 0 auto;
+.cover {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cover-kefu {
+  width: 600rpx;
+  height: 504rpx;
+  background: #FFFFFF;
+  border-radius: 30rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.cover-kefu-title {
+  font-size: 34rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #333333;
+}
+
+.cover-kefu-number {
+  font-size: 48rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #333333;
+  margin-top: 30rpx;
+  margin-bottom: 20rpx;
+}
+
+.cover-kefu-tips {
+  font-size: 28rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #666666;
+}
+
+.cover-kefu-button {
+  width: 392rpx;
+  height: 88rpx;
+  font-size: 34rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #FFFFFF;
+  background: #007AFF;
+  border-radius: 44rpx;
+  margin-top: 72rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cover-kefu-button image {
+  width: 36rpx;
+  height: 35rpx;
+  margin-right: 20rpx;
 }