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

<template>
  <view style="width: 100%; height: 100vh; background: rgb(247, 248, 255)">
    <zj-page-container>
      <view class="toubuyangs">
        <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>
      <zj-page-fill>
        <zj-page-layout
          :isScroll="true"
          :refresherTriggered="refresherTriggered"
          @refresherrefresh="refresherrefresh"
          :hasFooter="true"
        >
          <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>
          <template slot="footer" v-if="!!baoxiandangqianxianxitishi.length">
            <view class="bottom-container" style="box-sizing: border-box; padding: 20rpx">
              <u-button text="去购买" shape="circle" type="primary" @click="qugoumai"> </u-button>
            </view>
          </template>
        </zj-page-layout>
      </zj-page-fill>
    </zj-page-container>
  </view>
</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 || []
    })
  },
  methods: {
    qugoumai() {
      this.baoxiandangqianxianxitishi = []
      if (this.tab == 'DS') {
        this.$api.post('/worker/myDsWebsit').then(res => {
          this.baoxiandangqianxianxitishi = res.data
          this.isShowWebsitDialog = true
        })
      } else {
        this.$api.post('/worker/myWebsit').then(res => {
          this.baoxiandangqianxianxitishi = res.data
          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 || []
      })
    },

    // 触发下拉刷新
    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>