提交

MrShi

2025-06-27 80310f6076d50374997774ccadf835083836422d

 wx/pages/changeRecord/changeRecord.vue

@@ -1,19 +1,305 @@
<template>
   <view>
		
   <view class="policy">
      <view class="policy_cate">
         <view :class="from.type === item.id ? 'policy_cate_item active' : 'policy_cate_item'" @click="changeType(item.id)" v-for="(item, index) in cate1" :key="index">
            {{item.name}}
         </view>
      </view>
      <Search :searchTop="88" topNum="150rpx" :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.status) }">
               <view class="item_top_info">
                  <text>{{item.solutionsName}}</text>
                  <text>关联保单号：{{item.applyCode}}</text>
               </view>
               <view class="item_top_img">
                  <image v-if="item.status === 2" src="@/static/icon/progress_yishengxiao@2x.png" mode="widthFix"></image>
                  <image v-if="item.status === 9" src="@/static/icon/ic_toubaozhong.png" mode="widthFix"></image>
                  <image v-if="item.status === 1" src="@/static/icon/progress_daishenhe@2x.png" mode="widthFix"></image>
                  <image v-if="item.status === 0" src="@/static/icon/progress_daiqianshu@2x.png" mode="widthFix"></image>
                  <image v-if="item.status === 3" src="@/static/icon/progress_shenqingtuihui@2x.png" mode="widthFix"></image>
                  <image v-if="item.status === 5" src="@/static/icon/progress_yituihui@2x.png" mode="widthFix"></image>
                  <image v-if="item.status === 6" src="@/static/icon/progress_yiguanbi@2x.png" mode="widthFix"></image>
                  <image v-if="item.status === 7" src="@/static/icon/progress_daichudan@2x.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.addNum}}人</view>
               </view>
               <view class="item_list_item">
                  <view class="item_list_item_label">减保人数：</view>
                  <view class="item_list_item_val">{{item.delNum}}人</view>
               </view>
               <view class="item_list_item" style="width: 100%;">
                  <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.applyStartTime}}</view>
               </view>
            </view>
         </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>
      </view>
      <view style="width: 100%; height: calc(env(safe-area-inset-bottom) + 110upx);"></view>
      <MyTabbar :currentPage="currentPage" />
   </view>
</template>

<script>
   import MyTabbar from '@/components/my-tabbar/my-tabbar.vue'
   import Search from '@/components/search/search.vue'
   export default {
      components: { MyTabbar, Search },
      data() {
         return {
            currentPage: '/pages/changeRecord/changeRecord',
            
            page: 1,
            next: false,
            list: [],
            from: {
               solutionsName: '',
               applyStartS: '',
               applyStartE: '',
               status: '',
               type: 0
            },
            cate: [
               { name: '全部', id: '' },
               { name: '待签署', id: '0' },
               { name: '待审核', id: '1' },
               { name: '待出单', id: '7' },
               { name: '投保中', id: '9' },
               { name: '申请退回', id: '3' },
               { name: '已退回', id: '5' },
               { name: '已生效', id: '2' },
               { name: '已关闭', id: '6' }
            ],
            cate1: [
               { name: '加减保记录', id: 0 },
               { name: '更换派遣单位记录', id: 1 },
            ]
         };
      },
      onLoad() {
         this.getList()
      },
      onReachBottom() {
         this.getList()
      },
      methods: {
         changeType(id) {
            this.from.type = id
            this.next = false
            this.page = 1
            this.list = []
            this.from.applyStartS = ''
            this.from.applyStartE = ''
            this.from.solutionsName = ''
            this.from.status = ''
            this.getList()
         },
         jump(id) {
            if (this.from.type === 0) {
               uni.navigateTo({
                  url: `/pages/addition_subtraction_details/addition_subtraction_details?id=${id}`
               })
            } else {
               uni.navigateTo({
                  url: `/pages/details_dispatch_unit/details_dispatch_unit?id=${id}`
               })
            }
         },
         getValue(obj) {
            this.next = false
            this.page = 1
            this.list = []
            this.from.applyStartS = obj.startTime
            this.from.applyStartE = obj.endTime
            this.from.solutionsName = obj.name
            this.from.status = obj.status
            this.getList()
         },
         returnStyle(type) {
            if ([2,9].includes(type)) {
               return 'linear-gradient( 180deg, #E5F7F1 0%, rgba(255,255,255,0) 100%);'
            } else if ([0,1,7].includes(type)) {
               return 'linear-gradient( 180deg, #FFF2E3 0%, rgba(255,255,255,0) 100%);'
            } else if ([3,5,6].includes(type)) {
               return '#ffffff'
            }
         },
         getList() {
            if (this.next) return
            this.$u.api.applyChangePage({
               page: this.page,
               capacity: 10,
               model: this.from
            }).then(res => {
               if (res.code === 200) {
                  if (res.data.records.length > 0) {
                     this.page++
                     this.list.push(...res.data.records)
                  } else {
                     this.next = true
                  }
               }
            })
         }
      }
   }
</script>

<style lang="scss">

<style>
   page {
      background-color: #F7F7F7;
   }
</style>
<style lang="scss" scoped>
   .policy {
      width: 100%;
      .policy_cate {
         width: 100%;
         height: 88rpx;
         display: flex;
         align-items: center;
         position: sticky;
         top: 0;
         left: 0;
         z-index: 9999;
         padding-top: 16rpx;
         box-sizing: border-box;
         background-color: #F7F7F7;
         .policy_cate_item {
            flex: 1;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 400;
            font-size: 30rpx;
            color: #222222;
         }
         .active {
            font-weight: 600 !important;
            font-size: 32rpx !important;
            color: #437CB3 !important;
            background: #FFFFFF !important;
            border-radius: 20rpx 20rpx 0rpx 0rpx !important;
         }
      }
      .policy_list {
         width: 100%;
         padding: 20rpx 30rpx;
         box-sizing: border-box;
         .policy_list_image {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 300rpx;
            image {
               width: 272rpx;
               height: 272rpx;
            }
         }
         .policy_list_item {
            margin-top: 20rpx;
            width: 100%;
            background: #ffffff;
            border-radius: 16rpx;
            overflow: hidden;
            &:first-child {
               margin-top: 0 !important;
            }
            .item_top {
               width: 100%;
               height: 144rpx;
               padding: 30rpx;
               box-sizing: border-box;
               display: flex;
               align-items: center;
               justify-content: space-between;
               .item_top_info {
                  flex: 1;
                  height: 100rpx;
                  display: flex;
                  flex-direction: column;
                  text {
                     &:nth-child(1) {
                        font-weight: 500;
                        font-size: 32rpx;
                        color: #222222;
                     }
                     &:nth-child(2) {
                        font-weight: 400;
                        font-size: 26rpx;
                        color: #777777;
                        font-style: normal;
                        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: center;
                  margin-bottom: 20rpx;
                  background: #ffffff;
                  &:last-child {
                     margin-bottom: 0 !important;
                  }
                  .item_list_item_label {
                     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>