| | |
| | | <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> |