assess-app/page_task/information/information.vue

<template>
	<view class="total-page page-box">
		<Nav :title="title" :genre="1" :fixedHeight="105"></Nav>
		<view class="task-tabs" :style="{top:`${$tools.topHeight()}px`}">
			<view class="m-t20">
				<view class="creation_item row-justify-sb center sys-background-fff m-lr30 m-b20 p-30 r-20"
					v-for="(item,index) in informationList" :key="index" @click="onCeationTask(item)">
					<view class="row-c">
						<image class="wh-80 m-r20 r-100" :src="item.icon" mode="aspectFill"></image>
						<view>
							<text class="size-28 text-color-12 sys-weight-600">{{item.name}}</text>
							<view class="size-24 text-color-999 m-t10">{{item.explain}}</view>
						</view>
					</view>
					<view class="">
						<button class="button-background info_button sys-weight-500 text-color-fff size-26 r-100"
							type="default" hover-class="is-hover" v-if="!item.is_finish"
							@click="onAuthentication(item)">待上传</button>
						<button class="info_button sys-bg-CBCBCB sys-weight-500 text-color-fff size-26 r-100"
							v-else>已认证</button>
					</view>
				</view>
			</view>
		</view>
		<EnButton is_both :leftText="'预览'" :rightText="'提交资料'" @onLeftSubmit="onLeftSubmit" @onSubmit="onSubmit">
		</EnButton>
	</view>
</template>

<script>
	import TaskImgTab from "@/common/task/task_ima_tab.vue"

	export default {
		components: {
			TaskImgTab,
		},
		data() {
			return {
				title: '',
				informationList: [{
					name: '身份信息',
					explain: '身份证、婚姻、职业、社保信息',
					icon: '/static/img/task/task-identity.png',
					path: '/page_task/identity/identity',
					type: 1,
					is_finish: false
				}, {
					name: '资产信息',
					explain: '房产、车辆等资产',
					icon: '/static/img/task/task-property.png',
					path: '/page_task/property/property',
					type: 2,
					is_finish: false
				}, {
					name: '申请信息',
					explain: '贷款额度信息',
					icon: '/static/img/task/task-apply.png',
					path: '/page_task/apply/apply',
					type: 3,
					is_finish: false
				}, {
					name: '联系人信息',
					explain: '其他联系人',
					icon: '/static/img/task/task-contacts.png',
					type: 4,
					is_finish: false
				}, {
					name: '征信信息',
					explain: '银行征信信息',
					icon: '/static/img/task/task-credit.png',
					type: 5,
					is_finish: false
				}, ]
			}
		},
		onLoad(options) {
			this.title = options.title
		},
		methods: {
			onAuthentication(item) {
				uni.navigateTo({
					url: `${item.path}?title=${item.name}`
				})
			},
			onCeationTask() {},
			onLeftSubmit() {
				console.log('预览');
			},
			onSubmit() {
				console.log('提交资料');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.info_button {
		width: 130rpx;
		height: 60rpx;
		border: none;
		line-height: 60rpx;
	}

	button::after {
		border: none;
	}
</style>