<template> 
 | 
    <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.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 || item.status === 4" src="@/static/icon/progress_shenqingtuihui@2x.png" mode="widthFix"></image> 
 | 
                        <image v-if="item.status === 5 || item.status === 8" 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" style="width: 100%;"> 
 | 
                        <view class="item_list_item_label">更换派遣单位人数:</view> 
 | 
                        <view class="item_list_item_val">{{item.changeNum}}人</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> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
    import Search from '@/components/search/search.vue' 
 | 
    export default { 
 | 
        components: { Search }, 
 | 
        data() { 
 | 
            return { 
 | 
                list: [], 
 | 
                page: 1, 
 | 
                next: false, 
 | 
                status: '', 
 | 
                solutionsName: '', 
 | 
                applyStartS: '', 
 | 
                applyStartE: '', 
 | 
                cate: [ 
 | 
                    { name: '全部', id: '' }, 
 | 
                    { name: '待签署', id: '0' }, 
 | 
                    { name: '申请退回', id: '3' }, 
 | 
                    { name: '投保中', id: '9' }, 
 | 
                    { name: '待出单', id: '7' }, 
 | 
                    { name: '已退回', id: '5' }, 
 | 
                    { name: '待审核', id: '1' }, 
 | 
                    { name: '已生效', id: '2' }, 
 | 
                    { name: '已关闭', id: '6' } 
 | 
                ] 
 | 
            }; 
 | 
        }, 
 | 
        onLoad() { 
 | 
            this.getList() 
 | 
        }, 
 | 
        onReachBottom() { 
 | 
            this.getList() 
 | 
        }, 
 | 
        methods: { 
 | 
            jump(id) { 
 | 
                uni.navigateTo({ 
 | 
                    url: `/pages/details_dispatch_unit/details_dispatch_unit?id=${id}` 
 | 
                }) 
 | 
            }, 
 | 
            getValue(e) { 
 | 
                this.solutionsName = e.name 
 | 
                this.applyStartS = e.startTime 
 | 
                this.applyStartE = e.endTime 
 | 
                this.status = e.status 
 | 
                this.list = [] 
 | 
                this.page = 1 
 | 
                this.next = false 
 | 
                this.getList() 
 | 
            }, 
 | 
            getList() { 
 | 
                if (this.next) return 
 | 
                this.$u.api.applyChangePage({ 
 | 
                    capacity: 10, 
 | 
                    page: this.page, 
 | 
                    model: { 
 | 
                        type: 1, 
 | 
                        solutionsName: this.solutionsName, 
 | 
                        status: this.status, 
 | 
                        applyStartS: this.applyStartS, 
 | 
                        applyStartE: this.applyStartE 
 | 
                    } 
 | 
                }).then(res => { 
 | 
                    if (res.code === 200) { 
 | 
                        if (res.data.records.length > 0) { 
 | 
                            this.page++ 
 | 
                            this.list.push(...res.data.records) 
 | 
                        } else { 
 | 
                            this.next = true 
 | 
                        } 
 | 
                    } 
 | 
                }) 
 | 
            }, 
 | 
            returnStyle(type) { 
 | 
                if ([2,9].includes(type)) { 
 | 
                    return 'linear-gradient( 180deg, #E5F7F1 0%, rgba(255,255,255,0) 100%);' 
 | 
                } else if ([1,0,7].includes(type)) { 
 | 
                    return 'linear-gradient( 180deg, #FFF2E3 0%, rgba(255,255,255,0) 100%);' 
 | 
                } else if ([3,4,5,8,6].includes(type)) { 
 | 
                    return '#ffffff' 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
</script> 
 | 
<style> 
 | 
    page { 
 | 
        background-color: #F7F7F7; 
 | 
    } 
 | 
</style> 
 | 
<style lang="scss" scoped> 
 | 
    .policy { 
 | 
        width: 100%; 
 | 
        .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> 
 |