jsm-mall-h5-front/src/components/insuranceDialog.vue

<template>
  <u-popup v-if="showData" mode="center" round="10" :show="showMod" :closeOnClickOverlay="false">
    <view class="dialog">
      <view class="close">
        <u-icon name="close" color="#9E9E9E" size="24" @tap="closeDialog"></u-icon>
      </view>
      <view class="top">
        <image
          v-if="[2, 3].includes(showData.remindIn)"
          src="@/static/images/dialog/insurance-icon1.png"
          mode="widthFix"
        ></image>
        <image
          v-if="[1, 4].includes(showData.remindIn)"
          src="@/static/images/dialog/insurance-icon2.png"
          mode="widthFix"
        ></image>
      </view>
      <view v-if="[1, 2, 3].includes(showData.remindIn)" class="title">保险购买提示</view>
      <view v-if="[4].includes(showData.remindIn)" class="title">入驻申请提示</view>
      <view class="text" v-if="[1].includes(showData.remindIn)"
        >您在{{ showData.websitName }}网点入驻申请已审核通过，请尽快购买意外保险，以免影响接单</view
      >
      <view class="text" v-if="[2].includes(showData.remindIn)"
        >您在{{ showData.websitName }}网点的意外险距离到期还有{{
          calculateDaysDifference(showData.endTime)
        }}天，请及时续保，以免影响接单</view
      >
      <view class="text" v-if="[3].includes(showData.remindIn)"
        >您在{{ showData.websitName }}网点的意外险已过期，为了您的安全保障，请及时续保，以免影响接单</view
      >
      <view class="text" v-if="[4].includes(showData.remindIn)"
        >您在{{ showData.websitName }}网点入驻申请正在审核中，请耐心等待。</view
      >
      <view class="btn">
        <u-button
          v-if="[1].includes(showData.remindIn)"
          text="去购买"
          shape="circle"
          type="primary"
          @click="clickButton()"
        >
        </u-button>
        <u-button
          v-if="[2, 3].includes(showData.remindIn)"
          text="去续保"
          shape="circle"
          type="primary"
          @click="clickButton()"
        >
        </u-button>
        <u-button
          v-if="[4].includes(showData.remindIn)"
          text="知道了"
          shape="circle"
          type="primary"
          @click="closeDialog"
        >
        </u-button>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      data_: []
    }
  },

  watch: {
    data(newVal, oldVal) {
      this.data_ = JSON.parse(JSON.stringify(newVal)).map(item => {
        return {
          ...item,
          show_: true
        }
      })
    }
  },

  computed: {
    showData() {
      return this.data_.find(item => item.show_)
    },
    showMod() {
      return !!this.showData
    }
  },

  methods: {
    closeDialog() {
      var index = this.data_.map(item => item.websitId).indexOf(this.showData.websitId)
      if (~index) {
        this.data_.splice(index, 1, {
          ...this.showData,
          show_: false
        })
      }
    },

    clickButton() {
      this.$navToPage({
        url: '/packageEnter/pages/insurance/myInsuranceBuy/index?websitId=' + this.showData.websitId
      })
      this.$nextTick(() => {
        setTimeout(() => {
          this.closeDialog()
        }, 500)
      })
    },

    calculateDaysDifference(timeString) {
      const inputDate = new Date(timeString)
      const currentDate = new Date()
      const timeDiff = currentDate - inputDate
      const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24))
      return daysDiff
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog {
  width: 640rpx;
  background: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 70rpx 70rpx;
  box-sizing: border-box;
  .close {
    position: absolute;
    right: 40rpx;
    top: 40rpx;
  }
  .top {
    margin-top: 30rpx;
    image {
      width: 390rpx;
      height: 220rpx;
    }
  }
  .title {
    font-size: 44rpx;
    font-weight: 500;
  }
  .text {
    text-align: center;
    font-size: 32rpx;
    color: $sec-font;
    line-height: 48rpx;
    margin-top: 30rpx;
  }
  .btn {
    width: 100%;
    margin-top: 60rpx;
  }
}
</style>