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

<template>
  <zj-page-layout
    :isScroll="true"
    :refresherTriggered="refresherTriggered"
    @refresherrefresh="refresherrefresh"
    :hasFooter="true"
  >
    <view class="toubuyangs" slot="header">
      <view class="toubuyangsTab">
        <view class="toubuyangsTabItem" @click="tabQiehuan('AC')">
          <view>意外险</view>
          <view :class="{ hengxian: true, xuanzhong: tab == 'AC' }"> </view>
        </view>
        <view class="toubuyangsTabItem" @click="tabQiehuan('DS')">
          <view>第三者责任险</view>
          <view :class="{ hengxian: true, xuanzhong: tab == 'DS' }"></view>
        </view>
      </view>
    </view>
    <view class="myInsurance">
      <view class="myInsuranceCart" v-for="(item, index) in list" :key="index" @click="gopage(item)">
        <view class="myInsuranceCartbuju xiangxia">
          <view class="">
            {{ item.policyName }}
          </view>
          <view class="" style="color: red">
            {{ { BZZ: '保障中', YSX: '失效', DSX: '待生效' }[item.policyOrderStatus] }}
          </view>
        </view>
        <view class="">
          <view class="xiangxia"> 所属网点：{{ item.websitName }} </view>
          <view class="xiangxia">
            保单类型：{{ { AC: '意外险', EM: '雇主险', IN: '工伤险', DS: '第三者责任险' }[item.type] }}
          </view>
          <view class="xiangxia"> 保单编号：{{ item.policyNumber }} </view>
          <view class="xiangxia"> 保单金额：{{ item.payAmount }} </view>
          <view class="xiangxia" v-if="item.startTime && item.endTime">
            有效时间：{{ item.startTime ? item.startTime.split(' ')[0] : '' }}~{{
              item.endTime ? item.endTime.split(' ')[0] : ''
            }}
          </view>
          <view class="xiangxia" v-else> 有效时间： </view>
        </view>
      </view>
    </view>
    <Loading :loadStatus="loadStatus" :dataList="list" />
    <zjDialogPicker
      ref="websitDialog"
      :isShow="isShowWebsitDialog"
      :multiple="false"
      :styleType="2"
      :title="'选择对应网点购买保险'"
      :list="baoxiandangqianxianxitishi"
      :keyName="'name'"
      @cancel="isShowWebsitDialog = false"
      @confirm="confirmWebsitDialog"
    >
    </zjDialogPicker>
    <view
      slot="footer"
      v-if="!!baoxiandangqianxianxitishi.length"
      class="bottom-container"
      style="box-sizing: border-box; padding: 20rpx"
    >
      <u-button text="去购买" shape="circle" type="primary" @click="qugoumai"> </u-button>
    </view>
  </zj-page-layout>
</template>
<script>
import zjDialogPicker from '@/components/zj-dialog/zj-dialog-picker.vue'
import zjPageContainer from '@/components/zj-page-container/zj-page-container.vue'
import zjPageFill from '@/components/zj-page-container/zj-page-fill.vue'
export default {
  components: {
    zjDialogPicker,
    zjPageContainer,
    zjPageFill
  },
  data() {
    return {
      loadStatus: 0,
      list: [],
      websitId: '',
      baoxiandangqianxianxitishi: [],
      isShowWebsitDialog: false,
      refresherTriggered: false,
      tab: 'AC'
    }
  },
  onShow() {
    uni.showLoading({
      title: '加载中'
    })
    this.loadStatus = 1
    this.$api.post('/worker/myPolicy', { pageNum: 1, pageSize: -1, type: this.tab }).then(res => {
      this.$nextTick(() => {
        uni.hideLoading()
      })
      this.loadStatus = 2
      this.list = res?.data?.records || []
    })
    if (this.tab == 'DS') {
      this.$api.post('/worker/myDsWebsit').then(res => {
        this.baoxiandangqianxianxitishi = res.data
      })
    } else {
      this.$api.post('/worker/myWebsit').then(res => {
        this.baoxiandangqianxianxitishi = res.data
      })
    }
  },
  methods: {
    qugoumai() {
      this.isShowWebsitDialog = true
    },
    tabQiehuan(index) {
      this.tab = index
      this.loadStatus = 1
      this.$api.post('/worker/myPolicy', { pageNum: 1, pageSize: -1, type: this.tab }).then(res => {
        this.loadStatus = 2
        this.list = res?.data?.records || []
      })
      this.baoxiandangqianxianxitishi = []
      if (this.tab == 'DS') {
        this.$api.post('/worker/myDsWebsit').then(res => {
          this.baoxiandangqianxianxitishi = res.data
        })
      } else {
        this.$api.post('/worker/myWebsit').then(res => {
          this.baoxiandangqianxianxitishi = res.data
        })
      }
    },

    // 触发下拉刷新
    refresherrefresh(e) {
      this.refresherTriggered = true
      this.loadStatus = 1
      this.$api.post('/worker/myPolicy', { pageNum: 1, pageSize: -1, type: this.tab }).then(res => {
        this.$nextTick(() => {
          this.refresherTriggered = false
        })
        this.loadStatus = 2
        this.list = res?.data?.records || []
      })
    },
    confirmWebsitDialog(e) {
      this.isShowWebsitDialog = false
      this.$navToPage({
        url:
          '/packageEnter/pages/insurance/myInsuranceBuy/index?websitId=' +
          this?.baoxiandangqianxianxitishi?.[e[0]]?.websitId +
          '&xzType=' +
          this.tab
      })
    },
    gopage(item) {
      this.$navToPage({
        url: `/packageEnter/pages/insurance/policyParticulars/index?id=${item.id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.myInsurance {
  box-sizing: border-box;
  padding: 20rpx;
  padding-top: 40rpx;

  .myInsuranceCart {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02), 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
      12.5px 12.5px 10px rgba(0, 0, 0, 0.035), 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
      41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05), 100px 100px 80px rgba(0, 0, 0, 0.07);
    border-radius: 10rpx;
    background: #ffffff;

    .myInsuranceCartbuju {
      display: flex;
      justify-content: space-between;
    }

    .xiangxia {
      margin-bottom: 10rpx;
    }
  }
}

.toubuyangs {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 30rpx 30rpx 15rpx 30rpx;
  .toubuyangsTab {
    width: 100%;
    height: auto;
    padding: 30rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .toubuyangsTabItem {
      box-sizing: border-box;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .hengxian {
        margin-top: 20rpx;
        width: 100rpx;
      }
      .xuanzhong {
        border-bottom: 4rpx solid #000;
      }
    }
  }
}
</style>