收银台采坑总结

问题：iphone的手机safari的兼容的情况

1,最近遇到一个safary兼容的收银台白屏的问题，通过在手机的safary配置（打开检查web配置），与电脑safary进行一个匹配，发现不能识别localstaryge,最后发现safary设置了无痕浏览，解除safary无痕浏览，并且加入错误的异常提示

try {
  var localStorage = window.localStorage
  var sessionStorage = window.sessionStorage
} catch (e) {
  alert('请关闭隐身模式，不能阻止cookie哦~')
}

2,在58同城环境下，部分低版本的浏览器下，存在倒计时退出重新进的时候，倒计时停止不动，做的是本地存储当前的倒计时的时间，和重新获得页面的数据做一个比较，如果当前倒计时的时间小于存储的时间，那么重新存储赋值

function diffCountTime () {
  const CashierPageData = window.PAY_DATA || {}
  if (CashierPageData.countDown) {
    let leftTime = CashierPageData.countDown.leftTime
    let now = new Date()
    let endTime = new Date()
    endTime = endTime.getTime() + leftTime * 1000
    let leftMilliseconds = endTime - now.getTime()
    let orderId = CashierPageData.payParam.orderId
    let timeInfo = sstorage.get('countDown', true)
    if (timeInfo && timeInfo[orderId]) {
      let sEndTime = timeInfo[orderId]
      if (sEndTime) {
        sEndTime = new Date(sEndTime).getTime()
        if (sEndTime < endTime) {
          endTime = sEndTime
          leftMilliseconds = endTime - now.getTime()
          CashierPageData.countDown.leftTime = Math.ceil(
            leftMilliseconds / 1000
          )
        }
      }
    }
    let _timeInfo = Object.assign({}, timeInfo, CashierPageData.countDown)
    _timeInfo[orderId] = endTime
    sstorage.set('countDown', _timeInfo)
  }
}

3,showdialog对于收银台只会展示一次，倒计时到期的时候会弹出，第二返回的时候会弹出，支付异常重新加载的时候会弹出，所以放在全局里构建

4，在安卓机上，58同城、58到家app，低版本的机型，触发返回bar的时候，那个卡，卡到怀疑人生，处理方案，取消掉自带慢的问题

   // js_back_result==true时候，去掉默认的返回的样式
        if (isAndroid()) {
          window.daojia.js_back_result(true)
        }

5，对于浏览器啊，小于12号的字体，他不会显示出来，看着浑身难受，差了些方案设置

1，transform: scale(0.5);//并不是真的小于12像素，只是在原来的基础上进行缩小了

2，html{-webkit-text-size-adjust:none;//旧版本的webkit内核的浏览器是支持，新版的webkit内核的浏览器已经不再支持这个属性}

6，显示金钱的不要用中文，它会与实际的间距多出几像素，所以用英文

&yen;

7，在这个项目里使用了骨架加载，开始单独做了一个页面，效果没有用上，很是遗憾，结果测试的过程中说支付成功页面为何一闪而过有个效果，他们不是很满意交互，提了bug，我想了下，这个bug提的好，我的骨架加载方案终于用上了，要干就干大票，那就写个组件，后期还是可以单独拿出来提供项目组使用，做成node的架包，节省人力，不多说，上代码

base---circle---squre

layout---row--column

index--

  <div class="vue-skeleton-loading">
    <div class="skeleton-bac-animation"></div>
    <slot></slot>
  </div>

8，该项目做了防重复提交的操作vue，立即执行去支付

   /**
     * 防止重复点击
     */
    defendRepeat: rtDebounce(function () {
      this.goPay()
    }, 200),

9，更多的坑微信支付掉不起，更多的原因就是业务线传的appsourece的问题，要么会提示appid异常，我们当前的域名要让微信授权，需要找漂亮的小姐姐帮忙授权

10，支付所需要的参数说明

 let params = {
        orderType: this.billInfo.orderType, // 1-预付单，2后附单
        billLastUpdateTime: this.billInfo.billLastUpdateTime, // 账单最后更新的时间，防止后附单-修改价格
        payDetailJson: JSON.stringify(
          [{
            payAmount: this.billInfo.needPayPrice, // 支付金额-必传
            payChannel: this.payChannel // 支付渠道-必传
          }]
        ),
        paySource: this.paySource, // 渠道
        totalTime: this.countDown && this.countDown.totalTime ? this.countDown.totalTime : 0 // 总共的时间
      }
      // payParam 参数
      if (this.payParam) {
        this.params = Object.assign(params, this.payParam)
      }

      if (this.payParam.businessId === 104 || this.payParam.businessId === 8000) {
        // 月嫂创建支付tradeId
        this.params = Object.assign(params, { tradeId: this.billInfo.tradeId })
      }
      // 当前的是微信环境进行参数拼接
      if (getIsWxClient()) {
        this.params = Object.assign(params, { openId: this.openId })
      }