提交

MrShi

2025-06-27 34ff4c31d3082417a50a1d6ff0d0401cf3d00920

 wx/pages/index/index.vue

@@ -1,460 +1,249 @@
<template>
   <view class="content">
      <view class="content_head" :style="{backgroundImage: 'url(' + backgroundImg + ')'}">
         <view class="content_head_company" @click="show = true">
            <text>{{userInfo.company.name}}</text>
            <u-icon name="arrow-down-fill" color="#ffffff" size="16"></u-icon>
         </view>
         <text>当前在保：{{num}}人</text>
      </view>
      <view class="content_box">
         <view class="content_box_list">
            <view class="content_box_list_left" @click="jump(1)"
               :style="{backgroundImage: 'url(' + backgroundImg1 + ')'}">
               <text>投保申请</text>
               <text>简单便捷</text>
            </view>
            <view class="content_box_list_right">
               <view class="content_box_list_right_row" @click="jump(2)"
                  :style="{backgroundImage: 'url(' + backgroundImg2 + ')'}">
                  <text>我的保单</text>
                  <text>全面管保单</text>
   <view class="policy">
      <Search :list="cate" @search="getValue" label="保险生效起期" />
      <view class="policy_list" v-if="list.length > 0">
         <view class="policy_list_item" v-for="(item, index) in list" :key="index" @click="jump(item.id)">
            <view class="item_top" :style="{ background: returnStyle(item.statusCollect) }">
               <view class="item_top_info">
                  <text>{{item.solutionsName}}</text>
                  <text>保单号：{{item.code ? item.code : '-'}}</text>
               </view>
               <view class="content_box_list_right_row" @click="jump(3)"
                  :style="{backgroundImage: 'url(' + backgroundImg3 + ')'}">
                  <text>在线报案</text>
                  <text>方便迅速</text>
               <view class="item_top_img">
                  <image v-if="item.statusCollect === 2 || item.statusCollect === 27" src="@/static/icon/progress_baozhangzhong@2x.png" mode="widthFix"></image>
                  <image v-if="item.statusCollect === 0 || item.statusCollect === 22" src="@/static/icon/progress_daishenhe@2x.png" mode="widthFix"></image>
                  <image v-if="item.statusCollect === 7 || item.statusCollect === 28" src="@/static/icon/progress_daiqianshu@2x.png" mode="widthFix"></image>
                  <image v-if="item.statusCollect === 1 || item.statusCollect === 23" src="@/static/icon/progress_daichudan@2x.png" mode="widthFix"></image>
                  <image v-if="item.statusCollect === 5" src="@/static/icon/progress_shenqingtuihui@2x.png" mode="widthFix"></image>
                  <image v-if="item.statusCollect === 4 || item.statusCollect === 24" src="@/static/icon/progress_yituihui@2x.png" mode="widthFix"></image>
                  <image v-if="item.statusCollect === 6 || item.statusCollect === 25" src="@/static/icon/progress_yiguanbi@2x.png" mode="widthFix"></image>
                  <image v-if="item.statusCollect === 3" src="@/static/icon/progress_yiguoqi@2x.png" mode="widthFix"></image>
                  <image v-if="item.statusCollect === 26" src="@/static/icon/ic_toubaozhong.png" mode="widthFix"></image>
               </view>
            </view>
            <view class="item_center">
               <view class="item_center_x"></view>
            </view>
            <view class="item_list">
               <view class="item_list_item">
                  <view class="item_list_item_label">投保人数：</view>
                  <view class="item_list_item_val">{{item.insureNum}}人</view>
               </view>
               <view class="item_list_item">
                  <view class="item_list_item_label">在保时长：</view>
                  <view class="item_list_item_val">{{(item.serviceDays - item.loseEfficacyDays) < 0 ? `-` : item.serviceDays - item.loseEfficacyDays + '天'}}</view>
               </view>
               <view class="item_list_item" style="width: 100%;" v-if="item.solutionType === 1 && (item.statusCollect === 2 || item.statusCollect === 27)">
                  <view class="item_list_item_label">总费用：</view>
                  <view class="item_list_item_val">{{item.fee}}元</view>
               </view>
               <view class="item_list_item" style="width: 100%;">
                  <view class="item_list_item_label">保障日期：</view>
                  <view class="item_list_item_val">{{item.startTime}}-{{item.endTime}}</view>
               </view>
            </view>
         </view>
         <view class="content_box_list1">
            <view class="content_box_list1_item" @click="jump(4)"
               :style="{backgroundImage: 'url(' + backgroundImg4 + ')'}">
               <text>加减保申请</text>
               <text>增加/减少投保人</text>
            </view>
            <view class="content_box_list1_item" @click="jump(5)"
               :style="{backgroundImage: 'url(' + backgroundImg5 + ')'}">
               <text>加减保记录</text>
               <text>查看记录</text>
            </view>
            <view class="content_box_list1_item" @click="jump(6)"
               :style="{backgroundImage: 'url(' + backgroundImg6 + ')'}">
               <text>更换派遣\n单位</text>
               <!-- <text>更换派遣单位</text> -->
            </view>
            <view class="content_box_list1_item" @click="jump(7)"
               :style="{backgroundImage: 'url(' + backgroundImg7 + ')'}">
               <text>更换派遣\n单位记录</text>
               <!-- <text>查看记录</text> -->
            </view>
            <view class="content_box_list1_item" @click="jump(8)"
               :style="{backgroundImage: 'url(' + backgroundImg8 + ')'}">
               <text>员工管理</text>
               <text>查看人员投保信息</text>
            </view>
      </view>
      <view class="policy_list" v-else>
         <view class="policy_list_image">
            <image src="@/static/icon/default_nodata@2x.png" mode="widthFix"></image>
         </view>
         <!-- <button @click="test">身份证识别</button> -->
      </view>
      <view class="content_loginout">
         <u-button type="primary" shape="circle" color="#437CB3" :plain="true" text="退出登录"
            @click="loginOut"></u-button>
      </view>
      <!-- 切换企业 -->
      <u-picker :show="show" keyName="companyName" @confirm="confirmCompany" @cancel="cancel"
         :columns="[userInfo.companyPermissionList || []]"></u-picker>
      <MyTabbar :currentPage="currentPage" />
   </view>
</template>

<script>
   import {
      mapState
   } from 'vuex'
   import Search from '@/components/search/search.vue'
   import MyTabbar from '@/components/my-tabbar/my-tabbar.vue'
   export default {
      computed: {
         ...mapState(['userInfo', 'cookies'])
      },
      components: { Search, MyTabbar },
      data() {
         return {
            num: 0,
            show: false,
            companyList: [],
            backgroundImg: require('@/static/background/home_bg@2x.png'),
            backgroundImg1: require('@/static/background/home_ic_toubao@2x.png'),
            backgroundImg2: require('@/static/background/home_ic_baodan@2x.png'),
            backgroundImg3: require('@/static/background/home_ic_baoan@2x.png'),
            backgroundImg4: require('@/static/background/home_ic_jiajianbao@2x.png'),
            backgroundImg5: require('@/static/background/home_ic_jiajianbaojilu@2x.png'),
            backgroundImg6: require('@/static/background/home_ic_huanchang@2x.png'),
            backgroundImg7: require('@/static/background/home_ic_huanchangjilu@2x.png'),
            backgroundImg8: require('@/static/background/home_ic_yuangong@2x.png'),
         }
            list: [],
            next: false,
            cate: [
               { name: '全部', id: '' },
               { name: '保障中', id: '2' },
               { name: '待审核', id: '0' },
               { name: '待签署', id: '7' },
               { name: '待出单', id: '1' },
               { name: '已退回', id: '4' },
               { name: '申请退回', id: '5' },
               { name: '已关闭', id: '6' },
               { name: '已过期', id: '3' },
               { name: '投保中', id: '26' }
            ],
            form: {
               solutionName: '',
               startTimeE: '',
               startTimeS: '',
               statusCollect: ''
            },
            page: 1,
            currentPage: '/pages/index/index',
         };
      },
      onShow() {
         this.getNum()
      onLoad() {
         this.getList()
      },
      onReachBottom() {
         this.getList()
      },
      methods: {
         test() {
            // 选择图片
            wx.chooseImage({
               count: 1,
               success: async function(res) {
                  console.log(new wx.serviceMarket.CDN({ type: 'filePath', filePath: res.tempFilePaths[0] }))
                  try {
                     const invokeRes = await wx.serviceMarket.invokeService({
                        service: 'wx79ac3de8be320b71',
                        api: 'OcrAllInOne',
                        data: {
                           // 用 CDN 方法标记要上传并转换成 HTTP URL 的文件
                           img_url: new wx.serviceMarket.CDN({
                              type: 'filePath',
                              filePath: res.tempFilePaths[0],
                           }),
                           data_type: 3,
                           ocr_type: 1
                        },
                     })
                     console.log('invokeService success', invokeRes)
                     wx.showModal({ title: 'success', content: JSON.stringify(invokeRes) })
                  } catch (err) {
                     console.log(JSON.stringify(err))
                     wx.showModal({ title: 'fail', content: err })
                  }
               },
               fail: function(res) {},
               complete: function(res) {},
         jump(id) {
            uni.navigateTo({
               url: `/pages/policyDetails/policyDetails?orderId=${id}`
            })
         },
         cancel() {
            this.show = false
         getValue(obj) {
            this.next = false
            this.page = 1
            this.list = []
            this.form.solutionName = obj.name
            this.form.startTimeE = obj.endTime
            this.form.startTimeS = obj.startTime
            this.form.statusCollect = obj.status
            this.getList()
         },
         confirmCompany(e) {
            if (e.value[0].companyId === this.userInfo.companyId) {
               uni.showToast({
                  title: '不能切换当前企业',
                  icon: 'none'
               })
               return
         returnStyle(type) {
            if ([2,26,27].includes(type)) {
               return 'linear-gradient( 180deg, #E5F7F1 0%, rgba(255,255,255,0) 100%);'
            } else if ([0,7,1,22,28,23].includes(type)) {
               return 'linear-gradient( 180deg, #FFF2E3 0%, rgba(255,255,255,0) 100%);'
            } else if ([5,4,6,3,25,24].includes(type)) {
               return '#ffffff'
            }
            this.$u.api.switchCompany({
                  companyId: e.value[0].companyId
               })
               .then(async res => {
                  let user = await this.$u.api.getUserInfo()
                  if (user.code === 200) {
                     this.$store.commit('setUserInfo', user.data)
                     this.show = false
                  }
               })
         },
         getNum() {
            this.$u.api.guaranteeNum()
               .then(res => {
                  if (res.code === 200) {
                     this.num = res.data
         getList() {
            if (this.next) return
            this.$u.api.insuranceApplyPage({
               capacity: 10,
               page: this.page,
               model: this.form
            }).then(res => {
               if (res.code === 200) {
                  if (res.data.records.length > 0) {
                     this.page++
                     this.list.push(...res.data.records)
                  } else {
                     this.next = true
                  }
               })
         },
         loginOut() {
            this.$u.api.logout()
               .then(res => {
                  if (res.code === 200) {
                     this.$store.commit('empty')
                     uni.navigateTo({
                        url: '/pages/login/login'
                     })
                  }
               })
         },
         jump(type) {
            if (!this.cookies || !this.userInfo) {
               uni.navigateTo({
                  url: '/pages/login/login'
               })
            }
            switch (type) {
               case 1:
                  // if (this.userInfo.permissions.filter(item => item === 'business:insuranceapply:query').length > 0) {
                  uni.navigateTo({
                     url: '/pages/insuranceApplication/insuranceApplication'
                  })
                  // } else {
                  //    uni.showToast({
                  //       title: '您没有权限',
                  //       icon: 'none'
                  //    })
                  // }
                  break
               case 2:
                  // if (this.userInfo.permissions.filter(item => item === 'business:myPolicy:query').length > 0) {
                  uni.navigateTo({
                     url: '/pages/myPolicy/myPolicy'
                  })
                  // } else {
                  //    uni.showToast({
                  //       title: '您没有权限',
                  //       icon: 'none'
                  //    })
                  // }
                  break
               case 3:
                  // if (this.userInfo.permissions.filter(item => item === 'business:onlineReporting:create').length > 0) {
                  uni.navigateTo({
                     url: '/pages/online_reporting/online_reporting'
                  })
                  // } else {
                  //    uni.showToast({
                  //       title: '您没有权限',
                  //       icon: 'none'
                  //    })
                  // }
                  break
               case 4:
                  // if (this.userInfo.permissions.filter(item => item === 'business:addsubtract:apply').length > 0) {
                  uni.navigateTo({
                     url: '/pages/addition_subtraction_application/addition_subtraction_application'
                  })
                  // } else {
                  //    uni.showToast({
                  //       title: '您没有权限',
                  //       icon: 'none'
                  //    })
                  // }
                  break
               case 5:
                  // if (this.userInfo.permissions.filter(item => item === 'business:addsubtractInsuranceRecords:query').length > 0) {
                  uni.navigateTo({
                     url: '/pages/add_subtract_insurance/add_subtract_insurance'
                  })
                  // } else {
                  //    uni.showToast({
                  //       title: '您没有权限',
                  //       icon: 'none'
                  //    })
                  // }
                  break
               case 6:
                  // if (this.userInfo.permissions.filter(item => item === 'business:factoryChange:create').length > 0) {
                  uni.navigateTo({
                     url: '/pages/factoryChange/factoryChange'
                  })
                  // } else {
                  //    uni.showToast({
                  //       title: '您没有权限',
                  //       icon: 'none'
                  //    })
                  // }
                  break
               case 7:
                  // if (this.userInfo.permissions.filter(item => item === 'business:factoryChange:query').length > 0) {
                  uni.navigateTo({
                     url: '/pages/dispatch_unit_records/dispatch_unit_records'
                  })
                  // } else {
                  //    uni.showToast({
                  //       title: '您没有权限',
                  //       icon: 'none'
                  //    })
                  // }
                  break
               case 8:
                  // if (this.userInfo.permissions.filter(item => item === 'system:user:query').length > 0) {
                  uni.navigateTo({
                     url: '/pages/employee_management/employee_management'
                  })
                  // } else {
                  //    uni.showToast({
                  //       title: '您没有权限',
                  //       icon: 'none'
                  //    })
                  // }
                  break
            }
               }
            })
         }
      }
   }
</script>

<style>
   page {
      background-color: #F7F7F7;
   }
</style>
<style lang="scss" scoped>
   .content {
   .policy {
      width: 100%;

      .content_loginout {
         width: 200rpx;
         // margin: 0 auto;
         left: 50%;
         transform: translate(-50%, 0);
         position: fixed;
         bottom: calc(env(safe-area-inset-bottom) + 40rpx);
      }

      .content_head {
      .policy_list {
         width: 100%;
         height: 292rpx;
         padding: 40rpx;
         padding: 20rpx 30rpx;
         box-sizing: border-box;
         background-repeat: no-repeat;
         background-size: 100% 100%;
         display: flex;
         flex-direction: column;
         position: relative;

         .content_head_company {
         .policy_list_image {
            width: 100%;
            display: flex;
            align-items: center;

            text {
               font-weight: 600;
               font-size: 44rpx;
               color: #FFFFFF;
               font-style: normal;
               margin-right: 15rpx;
            justify-content: center;
            margin-top: 300rpx;
            image {
               width: 272rpx;
               height: 272rpx;
            }
         }

         text {
            // &:nth-child(1) {
            //    width: 100%;
            //    overflow: hidden;
            //    white-space: nowrap;
            //    text-overflow: ellipsis;
            //    font-weight: 600;
            //    font-size: 44rpx;
            //    color: #FFFFFF;
            //    font-style: normal;
            // }
            // &:nth-child(2) {
            font-weight: 500;
            font-size: 28rpx;
            color: #FFFFFF;
            font-style: normal;
            // }
         }
      }

      .content_box {
         width: 100%;
         padding: 0 30rpx;
         box-sizing: border-box;
         position: relative;
         top: -100rpx;
         left: 0;

         .content_box_list1 {
            width: 100%;
         .policy_list_item {
            margin-top: 20rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;

            .content_box_list1_item {
               width: 336rpx;
               height: 160rpx;
               margin-right: 18rpx;
               margin-bottom: 20rpx;
               padding: 24rpx 28rpx;
               box-sizing: border-box;
               background-repeat: no-repeat;
               background-size: 100% 100%;
               display: flex;
               flex-direction: column;

               &:nth-child(2n) {
                  margin-right: 0 !important;
               }

               text {
                  &:nth-child(1) {
                     font-weight: 500;
                     font-size: 32rpx;
                     color: #222222;
                     font-style: normal;
                  }

                  &:nth-child(2) {
                     font-weight: 400;
                     font-size: 24rpx;
                     color: #768188;
                     font-style: normal;
                     text-transform: uppercase;
                  }
               }
            }
         }

         .content_box_list {
            width: 100%;
            height: 336rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .content_box_list_left {
               width: 336rpx;
               height: 100%;
               background-repeat: no-repeat;
               background-size: 100% 100%;
               display: flex;
               flex-direction: column;
               padding: 24rpx 28rpx;
               box-sizing: border-box;

               text {
                  &:nth-child(1) {
                     font-weight: 500;
                     font-size: 32rpx;
                     color: #222222;
                     font-style: normal;
                  }

                  &:nth-child(2) {
                     font-weight: 400;
                     font-size: 24rpx;
                     color: #768188;
                     font-style: normal;
                     text-transform: uppercase;
                  }
               }
            background: #ffffff;
            border-radius: 16rpx;
            overflow: hidden;
            &:first-child {
               margin-top: 0 !important;
            }

            .content_box_list_right {
               width: 336rpx;
               height: 100%;
            .item_top {
               width: 100%;
               height: 144rpx;
               padding: 30rpx;
               box-sizing: border-box;
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: space-between;

               .content_box_list_right_row {
                  width: 100%;
                  height: 160rpx;
                  padding: 24rpx 28rpx;
                  box-sizing: border-box;
                  background-repeat: no-repeat;
                  background-size: 100% 100%;
               .item_top_info {
                  flex: 1;
                  height: 100rpx;
                  display: flex;
                  flex-direction: column;

                  text {
                     &:nth-child(1) {
                        font-weight: 500;
                        font-size: 32rpx;
                        color: #222222;
                        font-style: normal;
                     }

                     &:nth-child(2) {
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #768188;
                        font-size: 26rpx;
                        color: #777777;
                        font-style: normal;
                        text-transform: uppercase;
                        margin-top: 8rpx;
                     }
                  }
               }
               .item_top_img {
                  width: 100rpx;
                  height: 100rpx;
                  image {
                     width: 100%;
                     height: 100%;
                  }
               }
            }
            .item_center {
               width: 100%;
               padding: 0 30rpx;
               box-sizing: border-box;
               .item_center_x {
                  width: 100%;
                  border-top: 1rpx dashed #E5E5E5;
               }
            }
            .item_list {
               width: 100%;
               display: flex;
               align-items: center;
               flex-wrap: wrap;
               padding: 30rpx;
               box-sizing: border-box;
               .item_list_item {
                  width: 50%;
                  display: flex;
                  align-items: flex-start;
                  margin-bottom: 20rpx;
                  background: #ffffff;
                  &:last-child {
                     margin-bottom: 0 !important;
                  }
                  .item_list_item_label {
                     flex-shrink: 0;
                     font-weight: 400;
                     font-size: 26rpx;
                     color: #777777;
                     font-style: normal;
                  }
                  .item_list_item_val {
                     font-weight: 400;
                     font-size: 26rpx;
                     color: #222222;
                     font-style: normal;
                  }
               }
            }
         }
      }
   }
</style>
</style>