fix: fit iPhone 8/SE device Dialog & Grid component

app.json

@@ -26,7 +26,9 @@
     "van-overlay": "@vant/weapp/overlay/index",
     "van-dialog": "@vant/weapp/dialog/index",
     "van-field": "@vant/weapp/field/index",
-    "van-empty": "@vant/weapp/empty/index"
+    "van-empty": "@vant/weapp/empty/index",
+    "van-grid": "@vant/weapp/grid/index",
+    "van-grid-item": "@vant/weapp/grid-item/index"
   },
   "window": {
     "backgroundTextStyle": "light",

app.wxss

@@ -2,6 +2,7 @@
 page {
   height: 100%;
   --maincolor: #45A6B5;
+  --grid-item-content-background-color: #f7f7f7;
   font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
     Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',
     sans-serif;

pages/allFile/allFile.js

@@ -46,7 +46,7 @@ Page({
    * 新建档案
    */
   handleAddFile() {
-    // this.setData({ vanoverlayshow: true })
+     this.setData({ vanoverlayshow: true })
   },
 
   /**

pages/allFile/allFile.wxml

@@ -23,17 +23,15 @@
     </view>
     <view class="actions ittflex-jcb">
       <view class="handle-btn manage-btn ittflex" bindtap="handleFile">管理</view>
-      <view class="handle-btn itt-btn">新建档案</view>
+      <view class="handle-btn itt-btn" bindtap="handleAddFile">新建档案</view>
     </view>
   </view>
-  <van-overlay show="{{ vanoverlayshow }}">
-      <view class="wrapper ittflex">
-        <view class="model">
-          <view class="top-title">建档人数已达上限</view>
-          <view class="bottom-action ittflex">
-            <view class="btn w-confirm-btn ittflex" bindtap="handleConfirm">确定</view>
-          </view>
-        </view>
-      </view>
-    </van-overlay>
+  <van-dialog
+      title="建档人数已达上限"
+      show="{{ vanoverlayshow }}"
+      confirm-button-text="确定"
+      confirm-button-color="#333"
+      bind:confirm="handleConfirm"
+    >
+  </van-dialog>
 </view>

pages/appointment/appointment.js

@@ -8,7 +8,7 @@ Page({
     hasAddress: false,
     calendarcolor: '#45A6B5',
     timeActive: '9',
-    vanoverlayshow: true
+    dialogsShow: true
   },
 
   /**

pages/appointment/appointment.wxml

@@ -72,16 +72,17 @@
       <view class="f-btn cancel-btn ittflex">取消</view>
       <view class="f-btn confirm-btn itt-btn">确定</view>
     </view>
-    <van-overlay show="{{ vanoverlayshow }}">
-      <view class="wrapper ittflex">
-        <view class="model">
-          <view class="top-title">您当前的检测次数为0，先充值次数</view>
-          <view class="bottom-action ittflex">
-            <view class="btn w-cancel-btn ittflex" bindtap="handleActiveCard">实体卡激活</view>
-            <view class="btn w-confirm-btn ittflex" bindtap="handleCharge">去充值</view>
-          </view>
-        </view>
-      </view>
-    </van-overlay>
+    <van-dialog
+      title="您当前的检测次数为0，先充值次数"
+      show="{{ dialogsShow }}"
+      show-cancel-button
+      confirm-button-text="去充值"
+      confirm-button-color="#333"
+      cancel-button-text="实体卡激活"
+      cancel-button-color="#666"
+      bind:confirm="handleCharge"
+      bind:cancel="handleActiveCard"
+    >
+    </van-dialog>
   </view>
 </view>

pages/buy/buy.js

@@ -6,7 +6,7 @@ Page({
    */
   data: {
     payType: 1,
-    vanoverlayshow: false
+    dialogsShow: false
   },
 
   /**
@@ -46,13 +46,13 @@ Page({
     setTimeout(() => {
       wx.hideLoading({
         success: () => {
-          this.setData({ vanoverlayshow: true })
+          this.setData({ dialogsShow: true })
         }
       })
     }, 1000);
   },
   onClickHide() {
-    this.setData({ vanoverlayshow: false })
+    this.setData({ dialogsShow: false })
   },
   handleAppointment () {
     wx.navigateTo({

pages/buy/buy.wxml

@@ -50,15 +50,16 @@
   </view>
   <view class="pay-btn default-btn ittflex" bindtap="handleWXPay">立即支付</view>
   <view class="s-tips">购买成功后，体验次数立即到账，不可退款</view>
-  <van-overlay show="{{ vanoverlayshow }}">
-    <view class="wrapper ittflex">
-      <view class="model">
-        <view class="top-title">支付成功，立即去预约</view>
-        <view class="bottom-action ittflex">
-          <view class="btn cancel-btn ittflex" bindtap="onClickHide">取消</view>
-          <view class="btn confirm-btn ittflex" bindtap="handleAppointment">去预约</view>
-        </view>
-      </view>
-    </view>
-  </van-overlay>
+  <van-dialog
+      title="支付成功，立即去预约"
+      show="{{ dialogsShow }}"
+      show-cancel-button
+      confirm-button-text="去预约"
+      confirm-button-color="#333"
+      cancel-button-text="取消"
+      cancel-button-color="#666"
+      bind:confirm="handleAppointment"
+      bind:cancel="onClickHide"
+    >
+    </van-dialog>
 </view>

pages/handleFile/handleFile.wxml

@@ -25,20 +25,18 @@
       <view class="handle-btn itt-btn" bindtap="handleDelFile">删除</view>
     </view>
   </view>
-  <van-overlay show="{{ vanoverlayshow }}">
-      <view class="wrapper ittflex">
-        <view class="model">
-          <view class="top-title">
-            <view class="main-title">删除检测人</view>
-            <view class="sub-title">确定要删除关关的档案信息吗？</view>
-            <view class="sub-title">相对应的体检报告也会相应删除哦！</view>
-          </view>
-          <view class="bottom-action ittflex">
-            <view class="btn w-cancel-btn ittflex" bindtap="handleCancel">取消</view>
-            <view class="btn w-confirm-btn ittflex" bindtap="handleConfirm">确定</view>
-          </view>
-        </view>
-      </view>
-    </van-overlay>
+  <van-dialog
+      title="删除检测人"
+      message="确定要删除关关的档案信息吗\n相对应的体检报告也会相应删除哦！"
+      show="{{ vanoverlayshow }}"
+      show-cancel-button
+      confirm-button-text="确定"
+      confirm-button-color="#333"
+      cancel-button-text="取消"
+      cancel-button-color="#666"
+      bind:confirm="handleConfirm"
+      bind:cancel="handleCancel"
+    >
+    </van-dialog>
 </view>
 

pages/my/my.js

@@ -10,7 +10,51 @@ Page({
     pageLogin: false,
     name: '点击授权登录',
     avatarUrl: '',
-    count: 0
+    count: 0,
+    gridList: [
+      {
+        id: 0,
+        title: '我的地址',
+        url: '/pages/address/address?form=my',
+        imgUrl: '../../imaes/dizhi@2x.png'
+      },
+      {
+        id: 1,
+        title: '我的档案',
+        url: '/pages/myFile/myFile?form=my',
+        imgUrl: '../../imaes/dangan@2x.png'
+      },
+      {
+        id: 2,
+        title: '我的预约',
+        url: '/pages/myAppointment/myAppointment?form=my',
+        imgUrl: '../../imaes/yuyue@2x.png'
+      },
+      {
+        id: 3,
+        title: '我的记录',
+        url: '/pages/myRecord/myRecord?form=my',
+        imgUrl: '../../imaes/jilu@2x.png'
+      },
+      {
+        id: 4,
+        title: '我的报告',
+        url: '/pages/report/report?form=my',
+        imgUrl: '../../imaes/baogao2@2x.png'
+      },
+      {
+        id: 5,
+        title: '开通区域',
+        url: '/pages/openArea/openArea?form=my',
+        imgUrl: '../../imaes/quyu@2x.png'
+      },
+      {
+        id: 6,
+        title: '设置',
+        url: '/pages/set/set?form=my',
+        imgUrl: '../../imaes/shezhi@2x.png'
+      }
+    ]
   },
 
   /**
@@ -48,54 +92,14 @@ Page({
       pageLogin: app.globalData.userInfo.login
     })
   },
-  /* 我的档案 */
-  handleMyFile () {
-     this.authNavTo('/pages/myFile/myFile')
-  },
-  /**
-   * 我的预约
-   */
-  handleMyAppointment() {
-     this.authNavTo('/pages/myAppointment/myAppointment')
-  },
-
-  /**
-   * 点击充值记录
-   */
-  handleMyRecord() {
-     this.authNavTo('/pages/myRecord/myRecord')
-  },
-
-  /**
-   * 点击开通区域
-   */
-  handleOpenarea() {
-     this.authNavTo('/pages/openArea/openArea')
-  },
-
-  /**
-   * 点击设置
-   */
-  handleSet() {
-     this.authNavTo('/pages/set/set')
-  },
-
-  /**
-   * 用户点击地址
-   */
-  handleMyAddress() {
-    this.authNavTo('/pages/address/address')
+  // 路由跳转
+  handleNavTo (e) {
+    var url = e.currentTarget.dataset.url
+    this.authNavTo(url)
   },
   /**
-   *  我的报告
+   * 路由拦截
    * **/
-  handleMyReport () {
-    this.authNavTo('/pages/report/report')
-  },
-
-  handleAppoint () {
-    this.authNavTo('/pages/appointment/appointment')
-  },
   authNavTo (url) {
     if (itt.loginAuth()) {
       wx.navigateTo({

pages/my/my.wxml

@@ -19,56 +19,12 @@
       </view>
     </view>
   </view>
-  <view class="actions">
-    <view class="act-item-col ittflex-jca">
-      <view class="act-item address" data-index="0" bindtap="handleMyAddress">
-        <view class="icon">
-          <image class="image-icon" src="./../../imaes/dizhi@2x.png"></image>
-        </view>
-        <view class="desc">我的地址</view>
-      </view>
-      <view class="act-item dangan" data-index="1" bindtap="handleMyFile">
-        <view class="icon">
-          <image class="image-icon" src="./../../imaes/dangan@2x.png"></image>
-        </view>
-        <view class="desc">我的档案</view>
-      </view>
-      <view class="act-item yuyue" data-index="2" bindtap="handleMyAppointment">
-        <view class="icon">
-          <image class="image-icon" src="./../../imaes/yuyue@2x.png"></image>
-        </view>
-        <view class="desc">我的预约</view>
-      </view>
-    </view>
-    <view class="act-item-col ittflex-jca">
-      <view class="act-item chongzhi" data-index="3" bindtap="handleMyRecord">
-        <view class="icon">
-          <image class="image-icon" src="./../../imaes/jilu@2x.png"></image>
-        </view>
-        <view class="desc">我的记录</view>
-      </view>
-      <view class="act-item baogao" data-index="4" bindtap="handleMyReport">
-        <view class="icon">
-          <image class="image-icon" src="./../../imaes/baogao2@2x.png"></image>
-        </view>
-        <view class="desc">我的报告</view>
-      </view>
-      <view class="act-item" data-index="5" bindtap="handleOpenarea">
-        <view class="icon">
-          <image class="image-icon" src="./../../imaes/quyu@2x.png"></image>
-        </view>
-        <view class="desc">开通区域</view>
-      </view>
-    </view>
-    <view class="act-item-col ittflex-jca" data-index="6" bindtap="handleSet">
-      <view class="act-item">
-        <view class="icon">
-          <image class="image-icon" src="./../../imaes/shezhi@2x.png"></image>
-        </view>
-        <view class="desc">设置</view>
-      </view>
-      <view class="act-item"></view>
-      <view class="act-item"></view>
-    </view>
+  <view class="my-grid">
+    <van-grid column-num="3" border="{{ false }}">
+      <van-grid-item use-slot wx:for="{{gridList}}" wx:key="index" data-url="{{item.url}}" bindtap="handleNavTo">
+        <image class="image-icon" src="{{item.imgUrl}}"></image>
+        <text class="desc">{{item.title}}</text>
+      </van-grid-item>
+    </van-grid>
   </view>
 </view>

pages/my/my.wxss

@@ -79,4 +79,7 @@
   color: #333333;
   margin-top: 10rpx;
   text-align: center;
+}
+.my-grid {
+  background-color: #f7f7f7;
 }

pages/myAppointment/myAppointment.wxml

@@ -37,16 +37,16 @@
       </view>
     </view>
   </block>
-  <van-overlay show="{{ vanoverlayshow }}">
-    <view class="wrapper ittflex">
-      <view class="model">
-        <!-- // 已超过取消预约时间 -->
-        <view class="top-title">确定要取消预约吗？</view>
-        <view class="bottom-action ittflex">
-          <view class="btn w-cancel-btn ittflex" bindtap="handleOverlayCancel">取消</view>
-          <view class="btn w-confirm-btn ittflex" bindtap="handleoverlayConfirm">确定</view>
-        </view>
-      </view>
-    </view>
-  </van-overlay>
+  <van-dialog
+      title="确定要取消预约吗？"
+      show="{{ vanoverlayshow }}"
+      show-cancel-button
+      confirm-button-text="确定"
+      confirm-button-color="#333"
+      cancel-button-text="取消"
+      cancel-button-color="#666"
+      bind:confirm="handleoverlayConfirm"
+      bind:cancel="handleOverlayCancel"
+    >
+    </van-dialog>
 </view>

pages/myFile/myFile.js

@@ -47,7 +47,7 @@ Page({
    * 新建档案
    */
   handleAddFile() {
-    // this.setData({ vanoverlayshow: true })
+    this.setData({ vanoverlayshow: true })
   },
 
   /**

pages/myFile/myFile.wxml

@@ -24,20 +24,18 @@
     </view>
     <view class="actions ittflex-jcb">
       <view class="handle-btn manage-btn ittflex" bindtap="handleFile">管理</view>
-      <view class="handle-btn itt-btn">新建档案</view>
+      <view class="handle-btn itt-btn" bindtap="handleAddFile">新建档案</view>
     </view>
   </view>
-  <van-overlay show="{{ vanoverlayshow }}">
-      <view class="wrapper ittflex">
-        <view class="model">
-          <view class="top-title">建档人数已达上限</view>
-          <view class="bottom-action ittflex">
-            <view class="btn w-confirm-btn ittflex" bindtap="handleConfirm">确定</view>
-          </view>
-        </view>
-      </view>
-    </van-overlay>
-    <van-dialog use-slot closeOnClickOverlay showConfirmButton="{{false}}" show="{{ qrcodeDialog }}">
+  <van-dialog
+    title="建档人数已达上限"
+    show="{{ vanoverlayshow }}"
+    confirm-button-text="确定"
+    confirm-button-color="#333"
+    bind:confirm="handleConfirm"
+  >
+  </van-dialog>
+  <van-dialog use-slot closeOnClickOverlay showConfirmButton="{{false}}" show="{{ qrcodeDialog }}">
     <view class="qrcode">
       <image class="qrcode-src" src="../../imaes/erweima@2x.png" />
     </view>