jsm-mall-h5-front/src/packageEnter/pages/insurance/policyParticulars/index.vue

<template>
  <view style="height: 100vh">
    <zj-page-container>
      <zj-fiex-column
        background="#F7F7F7"
        @scrolltolower="carScrolltolower"
        @refresherrefresh="carRefresherrefresh"
        @refresherrestore="carRefresherrestore"
        :refresherEnabled="true"
        :refresherTriggered="refresherTriggered"
      >
        <view slot="before" class="head-view">
          <view class="head-view-bg"></view>
        </view>
        <view class="page-content">
          <view class="page-title-view">
            <text>{{ info.policyName }}</text>
            <image mode="aspectFit" src="/static/images/common/bpa.png"> </image>
          </view>
          <view class="page-content-view">
            <view class="page-content-text">
              <text class="mintext">保单名称：{{ info.policyName }}</text>
            </view>
            <view class="page-content-text">
              <text class="mintext"
                >保障期限：{{ info && info.startTime && info.startTime.split(' ')[0] }}至{{
                  info && info.endTime && info.endTime.split(' ')[0]
                }}</text
              >
              <text class="ogtext minwidth"
                >{{
                  parseInt(
                    baozhang > 0
                      ? baozhang === 1
                        ? getDaysBetween(info.startTime, new Date())
                        : getDaysBetween(info.startTime, info.endTime)
                      : 0
                  )
                }}天</text
              >
            </view>
            <view class="page-content-text">
              <text class="mintext">被保险人：{{ info.workerName || '' }}</text>
            </view>
            <view class="page-content-text">
              <text class="mintext">所属网点：{{ info.websitName || '' }}</text>
            </view>
            <image
              v-if="info.policyOrderStatus === 'DSX'"
              class="yingzhang"
              mode="aspectFit"
              src="/static/images/common/dsx.png"
            >
            </image>
            <image
              v-if="info.policyOrderStatus === 'BZZ'"
              class="yingzhang"
              mode="aspectFit"
              src="/static/images/common/yshx.png"
            >
            </image>
            <image
              v-if="info.policyOrderStatus === 'YSX'"
              class="yingzhang"
              mode="aspectFit"
              src="/static/images/common/ysx.png"
            >
            </image>
          </view>
          <!-- --------------------- -->
          <view class="page-content-view">
            <view class="page-content-text">
              <text class="bigtext">保障内容</text>
            </view>
            <view class="page-content-text">
              <text class="mintext">保单编码：{{ info.policyNumber }}</text>
            </view>
            <view class="page-content-text">
              <text class="mintext">承保公司：{{ info.policy && info.policy.company }}</text>
            </view>
            <view class="hr" />
            <view class="page-content-text">
              <text class="bigtext">保障范围</text>
            </view>
            <view class="page-content-text" v-for="(item, index) in info.policyRanges || []" :key="index">
              <text class="mintext">{{ item.rangeName }}</text>
              <text class="mintext maxwidth">{{ item.rangeText }}</text>
            </view>
            <view class="hr" />
            <view class="page-content-text">
              <text class="bigtext">保费</text>
              <text class="mintext">{{ info.payAmount }}</text>
            </view>
            <view class="page-content-text">
              <text class="mintext">缴费方式</text>
              <text class="mintext maxwidth">一次性年缴</text>
            </view>
            <view class="page-content-text">
              <text class="tsogtext">注：已承保期间，不足一个月的部分按一个月计缴费</text>
            </view>
          </view>
          <!-- --------------------- -->
          <view class="page-content-view">
            <view class="page-content-text">
              <text class="bigtext">协议条款</text>
            </view>
            <template v-for="(item, index) in insureAgreeList">
              <view class="page-content-text" :key="index" @click="goDetailsAgreement(item)">
                <view class="baoxianxieyi">
                  <text>《{{ item.agreementName }}》</text>
                  <u-icon name="arrow-right" size="18"></u-icon>
                </view>
              </view>
              <view class="minhr" v-if="index < insureAgreeList.length - 1" />
            </template>
          </view>
          <u-button type="primary" plain @click="goHome">返回首页</u-button>
        </view>
      </zj-fiex-column>
    </zj-page-container>
  </view>
</template>
<script>
import ZjFiexColumn from '@/components/zj-container/zj-fiex-column.vue'
import ZjFiexRow from '@/components/zj-container/zj-fiex-row.vue'
import ZjPageContainer from '@/components/zj-container/zj-page-container.vue'
export default {
  components: {
    ZjFiexRow,
    ZjFiexColumn,
    ZjPageContainer
  },
  data() {
    return {
      info: {},
      insureAgreeList: [],
      refresherTriggered: false,
      id: ''
    }
  },
  computed: {
    baozhang() {
      return this.info.startTime && this.info.endTime ? this.isDuringDate(this.info.startTime, this.info.endTime) : -1
    }
  },
  onLoad({ id }) {
    this.id = id
    this.redc()
    uni.$emit('updateUserInfo')
  },
  methods: {
    redc() {
      this.$api.post('/worker/myDetail', { id: this.id }).then(res => {
        console.log(res, '--')
        this.info = res.data
        this.insureAgreeList = res.data.agreements || []
        this.refresherTriggered = false
      })
    },
    getDaysBetween(date1, date2, a) {
      var startDate = Date.parse(date1)
      var endDate = Date.parse(date2)
      if (startDate > endDate) {
        return 0
      }
      if (startDate == endDate) {
        return 1
      }
      var days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000)
      return days
    },
    isDuringDate(beginDateStr, endDateStr) {
      var curDate = new Date(),
        beginDate = new Date(beginDateStr),
        endDate = new Date(endDateStr)
      if (curDate >= beginDate && curDate <= endDate) {
        return 1
      } else if (curDate < beginDate) {
        return 0
      } else if (curDate > endDate) {
        return 2
      }
    },
    goDetailsAgreement(item) {
      if (item.id) {
        this.$navToPage({
          url: `/packageEnter/pages/insurance/detailsAgreement/index?id=${item.id}`
        })
      }
    },
    // 滚动到底部
    carScrolltolower(e) {},
    // 触发下拉刷新
    carRefresherrefresh(e) {
      this.refresherTriggered = true
      this.redc()
    },
    // 下拉刷新结束
    carRefresherrestore(e) {},
    goHome() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import './style.scss';
</style>