temporary-parking-frontend/src/components/wx-points-commit/wx-points-commit.vue

<template>
  <div class="box" v-if="show" @touchmove.stop.prevent>
    <div class="boxIn">
      <div class="content">
        <img class="commit-star" src="https://cnsh-kerry-crm-prod.oss-cn-shanghai.aliyuncs.com/images/wx-points/points-commit.png">
        </img>
        <img v-if="source !== 'PUDONG' && source !== 'JINGAN'" class="commit-logo-default" src="https://cnsh-kerry-crm-prod.oss-cn-shanghai.aliyuncs.com/images/wx-points/kerry.png" />
        <img v-else class="commit-logo-ko" src="https://cnsh-kerry-crm-prod.oss-cn-shanghai.aliyuncs.com/images/wx-points/ko.png" />
        <div class="logo">
        
        </div>
        <div class="title">
          {{'您有消费积分未领取'}}
        </div>
        <div class="text">
          如您的微信支付积分未到账，请于消费当日申请领取
        </div>
        <div @click="toWxPointsAuth" class="commit-btn" :class="{'commit-btn--blue': source === 'PUDONG','commit-btn--green': source === 'PUDONG', 'commit-btn--qhkc': isQHKC && source !== 'KIP' }">
          去领取
        </div>
        <img @click="close('time')" class="commit-cancel" src="https://cnsh-kerry-crm-prod.oss-cn-shanghai.aliyuncs.com/images/wx-points/close.svg" />
      </div>
    </div>
  </div>
</template>

<script>
/* https://kerryprops.atlassian.net/browse/KIP-15785 */
import Vue from 'vue';
import uni from '@/utils/uniHooks';
import { mapState } from "vuex"
import {
  wxEasyPointsCommitStatus
} from '@/utils/api-kip.js'
import { toLogin } from '@/utils'
export default {
  created() {
    // this.handleGetPointsConfig()
  },
  data() {
    return {
      pointsConfig: null,
      show: false,
      clickToWxPointsAuth: false,
      pointsModalFlag: false
    };
  },
  computed: {
    // custTypeId: 0 默认版本，1 上海静安 2 上海浦东
    ...mapState({
      // custTypeId: 0
      custTypeId: state => state.custTypeId,
      mallId: (state) => state.mallId,
      source: (state) => state.source,
    }),
    isQHKC() {
      return ['8a88a9fd7f73ffcd017f968739870006', '8aaa82ea804d07cd0180516ff03b0008'].includes(this.mallId);
    }
  },
  methods: {
    async toWxPointsAuth() {
      console.log('授权微信无感积分')
      if (this.clickToWxPointsAuth) {
        console.log('授权微信无感积分重复点击')
        return
      }
      if (window.__wxjs_environment === 'miniprogram') {
        wx.miniProgram.navigateTo({
          "url": this.source === 'KIP' ? '/pages/points/wx-points-commit' : "/pages/package-parkingFee/wx-points-commit" // 去 login 页面 1 去登录
        })
      }
      this.show = false;
      this.clickToWxPointsAuth = false
    },
    async open(callback) {
      const isShow = this.checkShowFlag();
      if(!isShow) {
        return
      }
      const pointsCommitStatus = await wxEasyPointsCommitStatus();

      if(pointsCommitStatus.pointsCommitStatus === 'PENDING') {
        // 展示
        this.show = true
        callback && callback()
      }
    },
    isInToday(timestamp) {
      // 创建当前日期的对象
      const today = new Date();

      // 将当前日期的时间部分设置为零
      today.setHours(0, 0, 0, 0);

      // 创建时间戳日期的对象
      const dateOfTimestamp = new Date(timestamp);

      // 将时间戳的时间部分也设置为零
      dateOfTimestamp.setHours(0, 0, 0, 0);

      // 比较两个日期是否相等
      return today.getTime() === dateOfTimestamp.getTime();
    },
    checkShowFlag() {
      // 如果是支付宝,不弹出弹窗
      if(Vue.prototype.isAlipayClient) {
        return false
      }
      const nowTime = new Date()
      const nowTime00 = new Date().getTime()
      var lbs_easy_end_time = uni.getStorageSync('lbs_easy_end_time')
      if (lbs_easy_end_time) {
        const arr_lbsId = lbs_easy_end_time.filter(element => {
            return element.lbsId === this.$store.state?.lbsId
        })
        // 24小时内只弹出一次, 次日凌晨失效
        if (arr_lbsId.length > 0 && arr_lbsId[arr_lbsId.length - 1].time && this.isInToday(arr_lbsId[arr_lbsId.length - 1].time)) {
           return false
        }
      }
      return true
    },
    close() {
      this.show = false
      var arr_lbs_end_time = []
      if (uni.getStorageSync('lbs_easy_end_time')) {
        arr_lbs_end_time = uni.getStorageSync('lbs_easy_end_time')
        arr_lbs_end_time = arr_lbs_end_time.filter(item => item.lbsId !== this.$store.state?.lbsId);
        console.log('del_arr_lbs_end_time:::', arr_lbs_end_time)
        arr_lbs_end_time.push({
            lbsId: this.$store.state?.lbsId,
            time: new Date().getTime()
        })
        uni.setStorageSync("lbs_easy_end_time", arr_lbs_end_time)
      } else {
        arr_lbs_end_time.push({
            lbsId: this.$store.state?.lbsId,
            time: new Date().getTime()
        })
        uni.setStorageSync("lbs_easy_end_time", arr_lbs_end_time)
      }
    },
  }
}
</script>
<style scoped>
.box{
  position: fixed;
  z-index: 10000;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.7);
  top: 0;
  left: 0;
}

.boxIn {
  position: relative;
  width: 100%;
  height: 100%;
}

.content{
  position: relative;
  width: calc(100% - 110px);
  height: 245px;
  background: #FFFFFF;
  border-radius: 8px;
  margin: 0 auto;
  margin-top: 30vh;
}

.commit-star{
  position: absolute;
  width: calc(100vw - 40px);
  height: calc(48.1vw - 23.6px);
  top: calc(11.8px - 24.05vw);
  left: -33px;
}

.commit-logo-default{
  width: 84px;
  height:20px;
  position: relative;
  display: block;
  top: 15px;
  left: 30px;
}

.commit-logo-ko{
  width: 80px;
  height: 20px;
  position: relative;
  display: block;
  top: 15px;
  left: 35px;
}

.logo{
  height: 35px;
  border-bottom: 1rpx solid rgba(151,151,151,0.1);
}

.title{
  font-size: 16px;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-top: 22px;
}

.text{
  width: 180px;
  margin: 0 auto;
  margin-top: 8px;
  color: #999;
  font-size: 12px;
  text-align: center;
}

.text-content{
  width: calc(100% - 20px);
  line-height: 20px;
}

.commit-btn{
  width: calc(100vw - 180px);
  height: 40px;
  margin: 0 auto;
  margin-top: 27px;
  line-height: 40px;
  text-align: center;
  font-size: 15px;
  color: #fff;
  background: var(--k-color-primary-01, #064c8a);
  border-radius: 25px;
  box-shadow: 3px 3px 12px 0px var(--k-color-primary-01, #064c8a);
  
}

.commit-btn--blue {
  box-shadow: 3px 3px 12px 0px #13358E;
  background: #13358E;
}

.commit-btn--green {
  box-shadow: 3px 3px 12px 0px #25673C;
  background: #25673C;
}

.commit-btn--qhkc {
  box-shadow: 3px 3px 12px 0px #DF8443;
  background: #DF8443;
}

.commit-cancel{
  position: relative;
  display: block;
  margin: 0 auto;
  margin-top: 56px;
  width: 32px;
  height: 32px;
}
</style>