keysass_app/pages/personal/grade/gradeRules.vue

<template>
    <view class="rulesWrap">
        <view class="rulesImage">
            <img src="http://image.bjkeyware.com/static/index/rulesBanner.png" alt="">
        </view>
        <view class="rulesGroup">
            <view class="rulesTitle">等级及对应成长值：</view>
            <u-table width="100%">
                <u-tr style="font-size: 25rpx;">
                    <u-th style="width: 11%;">等级</u-th>
                    <u-th style="width: 30%;">对应成长值</u-th>
                    <u-th style="width: 59%;">权益等级</u-th>
                </u-tr>
                <u-tr v-for="(item, index) in scoreArray" :key="index" style="" v-show="index != scoreArray.length -1">
                    <u-td style="width: 11%;">{{ scoreComputed(item.minScore, index,
                        'myLevel') }}</u-td>
                    <u-td style=" width: 30%;">
                        <view>{{
                            scoreComputed(item.minScore, index,
                                'scoreRange') }}</view>
                    </u-td>
                    <u-td style="width: 59%;">
                        <view> 新增竞标 <span :style="{
                            text: 'left',
                            color: scoreComputed(item.minScore, index,
                                'myGradeEquity') != '无门槛' ? '#FF5A4D' : ''
                        }">{{ scoreComputed(item.minScore, index,
                            'myGradeEquity') }}</span> 的众包任务的资格</view>
                    </u-td>
                </u-tr>

            </u-table>
        </view>
        <view class="rulesGroup">
            <view class="rulesTitle">成长值获取途径：</view>
            <view class="growWays">
                <view v-for="(item, index) in staticWays" :key="index">
                    <view class="waysTitle">{{ index + 1 }}. {{ item.split(' ')[0] }}</view>
                    <view class="waysInfo">{{ item.split(' ')[1] }}</view>
                </view>
            </view>
        </view>
        <view class="moreWays">更多获取途径敬请期待</view>
    </view>
</template>

<script>
const staticWays = [
    '实名认证 通过在我的页面完成实名认证，可获取50成长值',
    '云员工认证 通过去PC端https://bjkeyware.com/ability/user完成云员工认证可获得300成长值',
    '竞标任务 竞标成功后，实施验收通过后，可自动获取到200成长值'
]
import { scoreStrategies, getLevel } from '@/utils/userlevel';
const scoreArray = JSON.parse(JSON.stringify(scoreStrategies)).reverse()
export default {
    data() {
        return {
            scoreArray: scoreArray,
            staticWays: staticWays
        }
    },
    computed: {
        scoreComputed() {
            return (min, index, tag) => {
                const { level, equity } = getLevel(min)
                if (tag == 'myLevel') {
                    return 'L' + level
                } else if (tag == 'myGradeEquity') {
                    return equity
                } else {
                    if (index == this.scoreArray.length - 1) {
                        return `X ≥ ${this.scoreArray[index].minScore}`
                    }
                    const max = this.scoreArray[index + 1].minScore
                    return `${min} ≤X<${max}   `
                }
            }
        }
    }

}
</script>

<style lang="scss">
.u-td view {
    text-align: start;
    font-size: 24rpx;
}

.u-th view {
    text-align: start !important;
    font-size: 23rpx;
    padding-left: 15rpx;
    background-color: #EAF1FD !important;

}

.u-td {
    text-align: start !important;
    flex: none !important;
}

.u-th {
    font-size: 26rpx;
    text-align: start !important;
    padding-left: 15rpx;
    background-color: #EAF1FD !important;
    flex: none !important;
}




.rulesWrap {
    padding: 35rpx 25rpx;
    font-family: PingFang SC;
    font-weight: 500;

    .rulesImage {
        img {
            height: 200rpx;
            width: 100%;
        }
    }

    .rulesGroup {
        margin: 30rpx auto;
        background: #FFFFFF;
        border-radius: 10rpx;
        padding: 0 20rpx;
        font-family: PingFang SC;
        font-weight: 500;
        padding: 30rpx 25rpx 30rpx 25rpx;
        margin: 25rpx 0;

        .rulesTitle {
            font-size: 28rpx;
            color: #000000;
            font-weight: bold;
            line-height: 50rpx;
            margin-bottom: 10rpx;
        }

        .growWays {
            line-height: 42rpx;
            font-size: 24rpx;

            .waysTitle {
                color: #333333;
            }

            .waysInfo {
                color: #666666;
            }
        }


    }

    .moreWays {
        margin-top: 40rpx;
        text-align: center;
        font-size: 28rpx;
        color: #5F6975;
        line-height: 25rpx;
    }

}
</style>