talent_map/uniapp/pages/policy/list.vue

<template>

    <view>
        <!-- 头部背景和搜索 -->
        <view>
            <image src="/static/images/list-bg.png" class="top-image w-full" id="top-image" mode="widthFix"></image>
        </view>
        <!-- 搜索 -->
        <view class="content">
            <block v-if="policyCengci.length > 0">
                <view class="flex row-center white lg bold">
                    <u-icon name="checkmark-circle-fill" size="48"></u-icon>
                    <view class="m-l-12">匹配成功</view>
                </view>
                <view class="flex row-center m-t-14 white p-l-20 p-r-20">根据您的条件AI智能计算可能符合以下政策，具体以实际申报为准</view>
                <view class="m-t-22 p-l-24 p-r-24">
                    <view class="top-line"></view>
                    <view class="list">
                        <view class="bg-white p-t-18 p-l-24 p-r-24 p-b-34">
                            <!-- 人才层次标签 -->
                            <u-tabs :list="policyCengci" name="level" :is-scroll="true" :current="currentTab"
                                :bold="true" active-color="#DD4250" height="80" bar-width="80" font-size="32"
                                @change="changeTab" />
                            <view class="p-15 m-t-20" style="border: 1px solid #DD4250;box-shadow: 0px 3px 6px 1px rgba(243,113,113,0.39);border-radius: 9px;
">
                                <view class="bold">您可能符合的认定条款：</view>
                                <view class="m-t-10 primary bold">
                                    <rich-text :nodes="policyCengci[currentTab].title"></rich-text>
                                </view>
								<view class="m-t-10 tips">
									<rich-text :nodes="policyCengci[currentTab].content"></rich-text>
								</view>
                            </view>
                            <!-- 政策列表 -->
                            <view class="flex flex-wrap m-t-30">
                                <view class="tag-item" :class="{ 'tat-active': activeIndex == index }"
                                    v-for="(item, index) in  policyList" :key="index" @tap="changeTag(index)">
                                    {{ item.title }}
                                </view>
                            </view>
                            <view v-for="(item, index) in policyList" :key="index" v-if="activeIndex == index">

                                <!-- <view class="detail">{{ item.content }}</view> -->
                                <rich-text :nodes="item.content"></rich-text>
                                <view class="flex row-center">
                                    <view class="user-logout flex col-center row-center white" @tap="goDetail(item)">
                                        <view class="m-r-12">查看“{{ item.title }}”详情</view>
                                        <u-icon name="arrow-rightward" size="28"></u-icon>
                                    </view>
                                </view>
                            </view>

                        </view>
                    </view>
                </view>
            </block>
            <view class="flex row-center white lg bold" v-else>
                <u-icon name="close-circle" size="48"></u-icon>
                <view class="m-l-12">暂未匹配到政策</view>
            </view>
        </view>
    </view>

</template>

<script>
    import {
        mapGetters,
        mapActions
    } from 'vuex'
    import {
        pxToRpx
    } from '@/utils/tools'
    const app = getApp()
    const homeItem = {
        name: '首页'
    }
    export default {
        data() {
            return {
                activeIndex: 0,
                policyList: [],
                policyCengci: [],
                currentTab: 0,
            }
        },
        onLoad(option) {
            this.policyList = uni.getStorageSync('policyList');
            this.policyCengci = uni.getStorageSync('policyCengci');
        },
        onShow() {
            // this.getHomeFun();
            // this.getUser();
        },
        onHide() {},
        onPullDownRefresh() {
            // this.getUser().then(() => {
            //     uni.stopPullDownRefresh();
            // })
        },
        methods: {
            // ...mapActions(['getUser']),
            changeTag(index) {
                this.activeIndex = index;
            },
            goDetail(item) {
                uni.setStorageSync('policyDetail', item);
                uni.navigateTo({
                    url: '/pages/policy/detail?id=' + item.id + '&title=' + item.title,
                })
            },
            // 改变当前的Tabs位置
            changeTab(index) {
                this.currentTab = index;
                //todo 切换关联的政策列表
            },
        },
        computed: {

            ...mapGetters(['appConfig']),
        }
    }
</script>

<style lang="less" scoped>
    .huodong-details {
        padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
    }

    .content {
        position: absolute;
        top: 54rpx;
        width: 100%;

        .detail {
            background: #F7F7F7;
            border-radius: 0rpx 0rpx 0rpx 0rpx;
            margin: 24rpx 0;
            padding: 24rpx;
        }


        .top-line {
            width: 100%;
            height: 24rpx;
            background: #DD4250;
            border-radius: 10rpx 10rpx 10rpx 10rpx;
            opacity: 1;
            border: 2rpx solid #B50818;
        }

        .list {
            margin-top: -12rpx;
            padding: 0 20rpx;
        }

        .tag-item {
            margin: 8rpx;
            padding: 16rpx 28rpx;
            background: #F7F8FA;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            opacity: 1;
        }


        .tat-active {
            color: #FFFFFF;
            background: #DD4250;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
        }

        .user-logout {
            padding: 12rpx 32rpx;
            background: #DD4250;
            box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(221, 66, 80, 0.32);
            border-radius: 40rpx 40rpx 40rpx 40rpx;
            opacity: 1;
        }
    }

    .details-images {
        height: 408rpx;
        border-radius: 20rpx;
        overflow: hidden;
        width: 100%;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .detail-title {
        // font-size: 36rpx;
        font-weight: bold;
        // padding: 30rpx 0;
    }

    .detail-cell {
        display: flex;
        // align-items: center;
        padding: 30rpx 0;

        .cell-img {
            padding: 5rpx 0;

            image {
                width: 48rpx;
                height: 48rpx;
                display: block
            }
        }

    }

    // .muted {
    //     color: #989898;
    //     padding-left: 10rpx;
    // }

    .detail-biaoti {
        // font-size: 36rpx;
        height: 88rpx;
        line-height: 88rpx;
    }

    .bj-w {
        background-color: #fff;
    }

    .padding-30 {
        padding: 0 30rpx !important;

    }

    .content-box {
        padding: 0 24rpx;
        box-shadow: 0rpx 8rpx 16rpx 2rpx rgba(0, 0, 0, 0.03);
        border-radius: 12rpx 12rpx 12rpx 12rpx;

        input {
            font-size: 28rpx;
        }

        textarea {
            width: 100%;
            height: 100rpx;
            font-size: 28rpx;
        }
    }

    .btn-r-border {
        position: relative;

        &::after {
            content: ' ';
            width: 1rpx;
            height: 36rpx;
            background-color: #CCCCCC;
            right: 0;
            top: 50%;
            margin-top: -18rpx;
            position: absolute;
        }
    }

    .width75 {
        width: 150rpx;
        font-weight: bold;
    }
</style>


<style lang="scss">
    .footer {
        left: 0%;
        bottom: 150rpx;
        width: 100%;
        padding: 0 24rpx;
        position: fixed;
        z-index: 99;

        .btn {
            height: 84rpx;
            line-height: 84rpx;
            background-color: $-color-primary;
            box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(243, 113, 113, 0.39);
            border-radius: 18rpx 18rpx 18rpx 18rpx;
        }
    }

    page {
        padding: 0;
    }

    .talent-tab {
        .title {
            font-size: 36rpx;
            font-weight: 400;
            color: #333333;
        }
    }
</style>