assess-app/pages/index/module/index_column.vue

<template>
	<view class="row-c m-t20">
		<view class="column_item sys-background-dominant r-30 column-justify-sb" v-if="!is_admin">
			<view class="column_build column-c">
				<view class="row-c" @click="onCreationTask">
					<image class="wh-80 m-r30" src="/static/img/index/index-add.png" mode="">
					</image>
					<text class="text-color-fff sys-weight-600 size-30">新建任务</text>
				</view>
			</view>
			<view class="column_record row-justify-sb center p-lr20">
				<view class="column_task">
					<view class="row-c m-b16 column-c justify-center line-30">
						<text class="size-26 text-color-fff">任务记录</text>
					</view>
					<text class="column_record_num text-color-fff size-24 text-center r-12 line-30 p-tb6">
						创建中({{memberData.draftNum}})
					</text>
				</view>
				<view class="column_line"></view>
				<view class="column_task">
					<view class="row-c m-b16 column-c justify-center line-30">
						<text class="size-26 text-color-fff">征信审核</text>
					</view>
					<text class="column_record_num text-color-fff size-24 text-center r-12 line-30 p-tb6">
						待验证({{memberData.creditNum}})
					</text>
				</view>
			</view>
		</view>
		<view class="column_item column-justify-sb" v-else>
			<view class="column column_loan justify-center r-30 p-lr24">
				<view class="row-c">
					<view class="sys-background-dominant r-10" style="width: 8rpx;height: 24rpx;">
					</view>
					<text class="text-color-12 sys-weight-600 size-24 m-l10">今日放款</text>
				</view>
				<view class="row-justify-sb center m-t20 line-40">
					<text class="sys-weight-600" style="color: #02154E;">13678.45万</text>
					<view class="row-c">
						<text style="color: #02154E;padding-right: 6rpx;">34</text>
						<text class="size-24 text-color-999">笔</text>
					</view>
				</view>
			</view>
			<view class="column column_proceeds justify-center r-30 p-lr24">
				<view class="row-c">
					<view class="sys-background-dominant r-10" style="width: 8rpx;height: 24rpx;">
					</view>
					<text class="text-color-12 sys-weight-600 size-24 m-l10">今日回款</text>
				</view>
				<view class="row-justify-sb center m-t20 line-40">
					<text class="sys-weight-600" style="color: #02154E;">78459.80万</text>
					<view class="row-c">
						<text style="color: #02154E;padding-right: 6rpx;">56</text>
						<text class="size-24 text-color-999">笔</text>
					</view>
				</view>
			</view>
		</view>
		<view class="column_item m-l20 column-justify-sb">
			<view class="task_item row-justify center r-30" @click="onGetTask">
				<view class="m-l40" style="position: relative;">
					<image class="wh-90 r-circle m-r20" src="/static/img/index/index-task.png" mode="">
					</image>
					<view class="task_num text-color-fff size-20" style="" v-if="memberData.take_num>0">
            {{memberData.take_num}}
					</view>
				</view>
				<text class="text-color-12 sys-weight-600">领取任务</text>
			</view>
			<view class="task_message row-justify center r-30" @click="onMessage">
				<view class="m-l40" style="position: relative;">
					<image class="wh-90 r-circle m-r20" src="/static/img/index/index-money.png" mode="">
					</image>
					<view class="task_num text-color-fff size-20" style="" v-if="memberData.noticeNum>0">
            {{memberData.noticeNum}}
					</view>
				</view>
				<text class="text-color-12 sys-weight-600">任务消息</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'index_column',
		props: {
      memberData:{
        default:{
          position_name: "",
          head_img: "",
          id: 5,
          name: "",
          nickname: "",
          phone: "",
          draftNum: "0",
          creditNum: "0",
          noticeNum: "0",
          take_num: "0",
        }
      },
			is_admin: {
				type: Boolean,
				default: false
			},
			data: {
				type: Object,
				default: () => {}
			},
		},
		data() {
			return {

			}
		},
		methods: {
			onGetTask() {
				uni.navigateTo({
					url: "/page_task/gain_task/gain_task"
				})
			},
			onMessage() {
				uni.navigateTo({
					url: "/page_subpack/message/message"
				})
			},
			onCreationTask() {
				uni.navigateTo({
					url: "/page_task/creation_task/creation_task"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.column_item {
		width: 50%;
		height: 300rpx;
	}

	.column_build {
		height: 160rpx;
		line-height: 160rpx;
	}

	.column_line {
		width: 1rpx;
		margin: 0 6rpx;
		height: 88rpx;
		background: #FFFFFF;
		opacity: 0.5;
	}

	.column_record {
		height: 140rpx;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 16rpx 16rpx 30rpx 30rpx;
	}

	.column_task {
		width: 140rpx;
		text-align: center;
	}

	.column_record_num {
		background-color: rgba(0, 0, 0, 0.2);
		opacity: 0.7;
		line-height: 40rpx;
		padding: 0 16rpx;
		display: block;
		height: 46rpx;
		line-height: 46rpx;
	}

	.column_loan {
		height: 140rpx;
		background: linear-gradient(180deg, #94ECE1 0%, rgba(255, 255, 255, 1) 100%);
	}

	.column_proceeds {
		height: 140rpx;
		background: linear-gradient(180deg, #FFF5DA 0%, rgba(255, 255, 255, 1) 100%);
	}

	.task_item {
		height: 140rpx;
		background: linear-gradient(180deg, #FFEEDA 0%, rgba(255, 255, 255, 1) 100%);
	}

	.task_message {
		height: 140rpx;
		background: linear-gradient(180deg, #DAF4FF 0%, rgba(255, 255, 255, 1) 100%);
	}

	.task_num {
		border-radius: 40rpx;
		background: red;
		padding: 2rpx 10rpx;
		position: absolute;
		right: 10rpx;
		top: -10rpx;
		line-height: 30rpx;
	}
</style>