fix 有效期到期提醒

app.js

@@ -54,7 +54,7 @@ App({
     isSecondaryScreenState: true, // 是否能加载到副屏
     cycleIntervalId: null, // 副屏展示定时器
     cycleIntervalSwitch: false, // 副屏展示是否开启
-    secondaryPageImagesIndex: 0
+    secondaryPageImagesIndex: 0,
   },
   onLaunch(options) {
     // this.initGlobalDataWatcher();
@@ -366,7 +366,7 @@ App({
   },
   globalData: {
     isPortraitScreen: null,// 是否为竖屏：true竖屏 false横屏
-    // 13CD002006700011  137D002002300009  136D002002300012 118D002000500012
+    // 13CD002006700011  137D002002300009 118D002000500012 136D002002300012
     sn: '',
     appVersion: '', //app版本号
     // 获取访客机配置token
@@ -437,6 +437,7 @@ App({
       connectSearchTimeout: 40,
       faceFailHandInput: false,
       visitReason: '', // 拜访事由选项
+      expirationDate: null, // 使用时间期限
     },
     // 设备信息
     deviceInformation: {},
@@ -454,6 +455,7 @@ App({
     privateKeyRisk: 'yfxrbbnnmsyuteaj',
     // ⾃然⼈⻛险评分查询结果 1:正常2:逃犯3:其他
     riskResult: 1,
+    expirationDateOpenNum: 0, // 到期提醒打开次数
   },
   /*globalDataWatchers: {},
 

app.json

@@ -29,7 +29,8 @@
     "top-title": "./components/topTitle/index",
     "bottom-parnel": "./components/bottomParnel/index",
     "tail-tip": "./components/tailTip/index",
-    "custom-modal": "./components/customModal/index"
+    "custom-modal": "./components/customModal/index",
+    "expiration-reminder-modal": "./components/expirationReminderModal/index"
   },
   "behavior": {
     "requestReferrerStrategy": "page",

components/customModal/index.acss

@@ -9,6 +9,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 9999;
 }
 
 .main .dialog-overlay .dialog {

components/expirationReminderModal/index.acss

@@ -0,0 +1,164 @@
+.main .expiration-dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  color: rgb(0, 0, 0);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.main .expiration-dialog-overlay .dialog {
+  position: absolute;
+  top: calc(200vmax / 12.80);
+  /*background: white;*/
+  padding: calc(30vmax / 12.80);
+  width: calc(620vmax / 12.80);
+  /*height: calc(244vmax / 12.80);*/
+  border-radius: calc(36vmax / 12.80);
+  max-width: 90%;
+  box-sizing: border-box;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  border: calc(3vmax / 12.80) solid #FFFFFF;
+  background: linear-gradient(180deg, #FFE3BF 0%, #F8F8F8 100%);
+}
+
+.main .expiration-dialog-overlay .dialog .dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  position: relative;
+}
+
+.main .expiration-dialog-overlay .dialog .dialog-header .tips-title {
+  width: calc(192vmax / 12.80);
+  height: calc(48vmax / 12.80);
+}
+
+.main .expiration-dialog-overlay .dialog .dialog-header .tips-icon {
+  position: absolute;
+  top: calc(-60vmax / 12.80);
+  right: calc(30vmax / 12.80);
+  width: calc(147vmax / 12.80);
+  height: calc(150vmax / 12.80);
+}
+
+.main .expiration-dialog-overlay .dialog .dialog-header .tips-close-icon {
+  position: absolute;
+  top: calc(-120vmax / 12.80);
+  right: calc(-30vmax / 12.80);
+  width: calc(44vmax / 12.80);
+  height: calc(44vmax / 12.80);
+}
+
+.main .expiration-dialog-overlay .dialog .dialog-body {
+  margin-bottom: 20px;
+  font-size: calc(32vmax / 12.80);
+  line-height: calc(58vmax / 12.80);
+  padding: calc(30vmax / 12.80);
+  box-sizing: border-box;
+  background: #fff;
+  border-radius: calc(32vmax / 12.80);
+  margin-top: calc(60vmax / 12.80);
+  color: rgba(34, 79, 111, 1);
+
+}
+.main .expiration-dialog-overlay .dialog .dialog-body text{
+  color: #FF6600;
+  font-weight: 700;
+  padding: 0 calc(20vmax / 12.80);
+}
+
+.main .expiration-dialog-overlay .dialog .dialog-footer {
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.main .expiration-dialog-overlay .dialog .dialog-footer .dialog-footer-btn {
+  font-size: calc(26vmax / 12.80);
+  width: calc(360vmax / 12.80);
+  height: calc(60vmax / 12.80);
+  line-height: calc(60vmax / 12.80);
+  border-radius: calc(90vmax / 12.80);
+  border: calc(2vmax / 12.80) solid #782D024D;
+}
+
+.main .expiration-dialog-overlay .dialog .dialog-footer .confirm {
+  color: #782D02E5;
+}
+
+/*竖屏样式*/
+.portrait-main .expiration-dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  color: rgb(0, 0, 0);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.portrait-main .expiration-dialog-overlay .dialog {
+  position: absolute;
+  top: calc(200vmin / 12.80);
+  background: white;
+  padding: calc(30vmin / 12.80);
+  width: calc(492vmin / 12.80);
+  /*height: calc(244vmin / 12.80);*/
+  border-radius: calc(20vmin / 12.80);
+  max-width: 90%;
+  box-sizing: border-box;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.portrait-main .expiration-dialog-overlay .dialog .dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.portrait-main .expiration-dialog-overlay .dialog .dialog-body {
+  margin-bottom: 20px;
+  font-size: calc(32vmin / 12.80);
+  padding: calc(30vmin / 12.80) 0;
+  box-sizing: border-box;
+  color: rgba(34, 79, 111, 1);
+}
+
+.portrait-main .expiration-dialog-overlay .dialog .dialog-footer {
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.portrait-main .expiration-dialog-overlay .dialog .dialog-footer .dialog-footer-btn {
+  width: calc(360vmin / 12.80);
+  height: calc(60vmin / 12.80);
+  line-height: calc(60vmin / 12.80);
+  border-radius: calc(90vmin / 12.80);
+  border: calc(2vmin / 12.80) solid rgba(19, 181, 177, 0.8);
+}
+
+.portrait-main .expiration-dialog-overlay .dialog .dialog-footer .cancel {
+  background: #fff;
+  color: rgba(19, 181, 177, 0.8);
+}
+
+.portrait-main .expiration-dialog-overlay .dialog .dialog-footer .confirm {
+  background: rgba(19, 181, 177, 0.8);
+  color: #fff;
+}

components/expirationReminderModal/index.axml

@@ -0,0 +1,18 @@
+<view a:if="{{visible}}" class="expiration-dialog-overlay" onTap="cancel">
+  <view class="dialog">
+    <view class="dialog-header flex">
+      <image class="tips-title" mode="scaleToFill" src="../../image/tips-title.png" />
+      <image class="tips-icon" mode="scaleToFill" src="../../image/tips-icon.png" />
+      <image  a:if="{{btnStatus}}" class="tips-close-icon" mode="scaleToFill" src="../../image/tips-close-icon.png" onTap="confirm"/>
+    </view>
+    <view class="dialog-body" a:if="{{btnStatus}}">
+      设备还有 <text>{{ content }}</text> 到期，请尽快联系服务商续费。
+    </view>
+    <view class="dialog-body" a:else>
+      设备 <text>已到期</text> ，请联系服务商续费激活。
+    </view>
+    <view class="dialog-footer" a:if="{{btnStatus}}">
+      <view class="dialog-footer-btn flex confirm magnify" onTap="confirm">已知悉</view>
+    </view>
+  </view>
+</view>

components/expirationReminderModal/index.js

@@ -0,0 +1,101 @@
+const app = getApp()
+import {
+  throttle,
+  getWaterDrop
+} from '../../utils/index/index'
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    isVisible: {
+      type: Boolean,
+      value: false,
+      observer: "handleVisibilityChange"
+    }
+  },
+  props: {
+    // 是否显示modal
+    visible: {
+      type: Boolean,
+      value: false
+    },
+    // 自定义内容
+    content: {
+      type: String,
+      value: ''
+    },
+    // 是否显示取消按钮（默认显示）
+    // showCancelBtn: true,
+    showCancelBtn: { // 定义一个属性
+      type: Boolean,
+      value: true, // 默认值
+      observer(newVal, oldVal) {
+        // 属性变化监听器
+        console.log('myProperty changed from', oldVal, 'to', newVal);
+        this.updateValue(newVal);
+      }
+    },
+    // 是否显示确认按钮（默认不显示）
+    showOkBtn: true,
+    //取消按钮文本
+    cancelText: '取消',
+    //确认按钮文本
+    okText: '确认',
+    //取消按钮回调
+    onCancel: {
+      type: Function,
+      value: () => {}
+    },
+    //确认按钮回调
+    onOk: {
+      type: Function,
+      value: () => {}
+    },
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    btnStatus: true,
+  },
+  lifetimes: {
+    attached() {
+      // 初始化时手动调用
+      this.handleVisibilityChange(this.data.isVisible);
+    }
+  },
+  didMount() {
+    console.log(this.props.showCancelBtn)
+  },
+  didUpdate(newVal, oldVal) {
+    console.log('didUpdate', newVal, oldVal)
+    console.log(this.props.showCancelBtn)
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    handleVisibilityChange(isVisible) {
+      console.log("Visibility on load:", isVisible);
+    },
+    updateValue(newVal) {
+      console.log(newVal)
+      // 更新内部数据或执行其他逻辑
+      this.setData({
+        btnStatus: newVal
+      });
+    },
+    cancel: throttle( function () {
+      setTimeout(()=>{
+        this.props.onCancel();
+      }, 100)
+    }, 1000),
+    confirm: throttle( function () {
+      setTimeout(()=>{
+        this.props.onOk();
+      }, 100)
+    }, 1000),
+  },
+  observers: {}
+})

components/expirationReminderModal/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/topTitle/index.axml

@@ -24,4 +24,5 @@
     <image a:if="{{ hasNetworkType }}" class="logo2" mode="scaleToFill" src="https://tx.hz-hanghui.com:8088/yx-fyzd/file/upload/imagesnew/static/home/wifi.png" />
     <image a:if="{{ !hasNetworkType }}" class="logo2" mode="scaleToFill" src="https://tx.hz-hanghui.com:8088/yx-fyzd/file/upload/imagesnew/static/home/no-wifi.png" />
   </view>
+  <expiration-reminder-modal :showCancelBtn="{{cusModalObj.showCloseBtn}}" content="30天" visible="{{cusModalObj.visible}}" onOk="onOk"/>
 </view>

components/topTitle/index.js

@@ -1,7 +1,8 @@
 // components/tail_tip/index.js
 import {
   getDate,
-  getWaterDrop
+  getWaterDrop,
+  formatTime
 } from '../../utils/index/index'
 const app = getApp()
 Component({
@@ -31,6 +32,10 @@ Component({
     timer2: null,
     count: 0,
     hasNetworkType: false,
+    cusModalObj: {
+      visible: false,
+      showCloseBtn: true
+    },
   },
   didMount() {
     let showTitText = this.props.showTitText
@@ -40,7 +45,36 @@ Component({
       remainingTime,
     })
     this.data.timer2 && clearInterval(this.data.timer2)
+    let _this = this
     this.data.timer2 = setInterval(() => {
+      // let expirationDate = app.globalData.snDisposition.expirationDate;
+      let expirationDate = '2024-12-15';
+      // let expirationDate = '2025-01-15';
+      let visible = false
+      let showCloseBtn = false
+      if (expirationDate) {
+        const now = new Date();
+        const currentStr = new Date(formatTime(now,'YYYY-MM-DD 00:00:00'));
+        const expirationDateStr = new Date(formatTime(expirationDate,'YYYY-MM-DD 00:00:00'));
+        const expirationDateStr1 = new Date(expirationDateStr.getFullYear(), expirationDateStr.getMonth(), expirationDateStr.getDate() - 30);
+        console.log(app.globalData.expirationDateOpenNum)
+        if (currentStr.getTime() == expirationDateStr1.getTime() && app.globalData.expirationDateOpenNum == 0 && !this.data.cusModalObj.visible) {
+          app.globalData.expirationDateOpenNum = app.globalData.expirationDateOpenNum + 1;
+          _this.setData({
+            'cusModalObj.visible': true,
+            'cusModalObj.showCloseBtn': true,
+          })
+          console.log(currentStr.getTime() , expirationDateStr1.getTime(),currentStr.getTime() == expirationDateStr1.getTime())
+          return
+        }
+        if(currentStr.getTime() >= expirationDateStr.getTime() && !this.data.cusModalObj.visible){
+          console.log(currentStr.getTime() , expirationDateStr.getTime(),currentStr.getTime() >= expirationDateStr.getTime())
+          _this.setData({
+            'cusModalObj.visible': true,
+            'cusModalObj.showCloseBtn': false,
+          })
+        }
+      }
       this.setData({
         newDate: getDate()
       })
@@ -53,6 +87,11 @@ Component({
    * 组件的方法列表
    */
   methods: {
+    onOk() {
+      this.setData({
+        'cusModalObj.visible': false
+      })
+    },
     // 倒计时
     startCountdown() {
       let that = this