keysass_app/pages/personal/grade/gradeTask.vue

<template>
    <view class="taskWrap">
        <view class="taskItem" v-for="(task, index) in taskArrays" :key="index">
            <view>
                <view class="taskItemTitle">{{ task.lable }}</view>
                <view class="taskItemInfo"><span style="margin-right: 15rpx;color: #FC4A4A;">+{{ task.score }}
                    </span>成长值
                </view>
            </view>
            <view v-if="!task.state" class="taskBtn missonSuccess" @click="dropTo(task.url)">
                {{ '去完成' }}
            </view>
            <view v-else class="taskBtn missonFaild">
                {{ '已完成' }}
            </view>
        </view>
    </view>
</template>

<script>
const taskArrays = [
    { lable: '实名认证', score: '50', url: '/pages/personal/setup/certification', state: false },
    { lable: '云员工认证', score: '300', url: 'cloud', state: false },
    { lable: '去竞标任务', score: '200', url: '', state: false },
]
export default {
    data() {
        return {
            taskArrays: taskArrays,
            phoneuserinfo: null
        }
    },
    onShow() {
        this.phoneuserinfo = uni.getStorageSync('wxUserInfo');
        this.http.quickGet('/getInfo', true).then(res => {
            const { testerStatus } = res.data.user
            if (testerStatus == 1) {
                this.taskArrays[0].state = true
            } else if (testerStatus == 2) {
                this.taskArrays[0].state = true
                this.taskArrays[1].state = true
            } else if (testerStatus == 0) {
                this.taskArrays[0].state = false
            }
        })
    },
    methods: {
        dropTo(url) {
            if (url == 'cloud') {
                uni.showModal({
                    title: `云员工认证请前往PC端`,
                    content: 'PC端网址：https://bjkeyware.com',
                    showCancel: false,
                    confirmText: '复制网址',
                    success: function (res) {
                        if (res.confirm) {
                            uni.setClipboardData({
                                data: url,
                                success: function () {
                                    uni.showToast({
                                        title: '复制成功',
                                    })
                                },
                                fail: function () {
                                    uni.showToast({
                                        title: '复制失败',
                                    })
                                },
                            })
                        }
                    },
                })
                return
            }
            if (url) {
                uni.navigateTo({
                    url: `${url}`
                })
                return
            }
            uni.switchTab({
                url: '/pages/index/testcrowdsourc/testcrowdsourc',
            })

        }
    }
}
</script>

<style lang="scss" scoped>
.taskWrap {
    padding: 35rpx 0;

    .taskItem {
        width: 700rpx;
        height: 150rpx;
        background: linear-gradient(90deg, #E2EDFD, #E5E4FE);
        box-shadow: 0rpx 1rpx 10rpx 1rpx rgba(32, 37, 44, 0.2);
        border-radius: 10rpx;
        margin: 0 auto 30rpx auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 35rpx;
        font-family: PingFang SC;
        font-weight: 500;

        .taskItemTitle {
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 30rpx;
            color: #000;
            line-height: 38rpx;
        }

        .taskItemInfo {
            margin-top: 20rpx;
            font-size: 26rpx;
            color: #666666;
            line-height: 38rpx;
        }

        .taskBtn {
            width: 130rpx;
            height: 46rpx;
            border-radius: 23rpx;
            text-align: center;
            color: #fff;
            line-height: 46rpx;
        }

        .missonSuccess {
            background: linear-gradient(90deg, #39DA8C, #2B8EFE);

        }

        .missonFaild {
            background: linear-gradient(90deg, #FAD126, #FF544F);
        }
    }


}
</style>