clsd/app/pages/index/index.vue

<template>
	<view class="main">
		<!--轮播图-->
		<view class="banner">
			<u-swiper circular :radius="5" :indicator="true" keyName="image" :list="bannerList" :height="150" class="uni-swiper" @click="click"></u-swiper>
		</view>
		<!--通知公告-->
		<view class="notice">
			<u-notice-bar color="#848484" :text="noticeList" :step="true" direction="column" mode="link" bgColor="white" speed="300" url="/pages/notice/index"></u-notice-bar>
		</view>
		<view class="flow">
			<view class="title">操作流程</view>
			<!--实名认证-->
			<view class="item" @click="go('/pages/authentication/index')">
				<view class="icon tb">&#xe600;</view>
				<view class="con">
					<view class="bt">实名认证</view>
					<view class="bor" style="background: linear-gradient(to right, rgb(198 187 250), rgb(251 251 251))"></view>
					<view class="zt">{{ !user.isAuthentication || user.isAuthentication == 0 ? '尚未提交资料' : '已提交资料' }}</view>
				</view>
				<view class="state" v-if="user.isAuthentication === 1">
					<text class="zt">已认证</text>
					<text class="icon">&#xe62b;</text>
				</view>
				<view class="state" v-else>
					<view class="go">去认证</view>
				</view>
			</view>
			<!--关联企业-->
			<view class="item" @click="go('/pages/company/index')">
				<view class="icon tb">&#xe623;</view>
				<view class="con">
					<view class="bt">关联企业</view>
					<view class="bor" style="background: linear-gradient(to right, #eecce0, rgb(253 253 253))"></view>
					<view class="zt">{{ !user.isCompany || user.isCompany == 0 ? '尚未关联企业' : '已完成' }}</view>
				</view>
				<view class="state" v-if="user.isCompany > 0">
					<text class="zt">{{ user.isCompany }}家</text>
					<text class="icon">&#xe62b;</text>
				</view>
				<view class="state" v-else>
					<view class="go" :style="{ backgroundColor: user.isAuthentication === 1 ? '#5a7afc' : '#d6d6d6' }">去关联</view>
				</view>
			</view>
			<!--开始接包-->
			<view class="item">
				<view class="icon tb">&#xe604;</view>
				<view class="con">
					<view class="bt">开始接包</view>
					<view class="bor" style="background: linear-gradient(to right, #c9f1d4, rgb(250 255 252))"></view>
					<view class="zt">{{ !user.isCompany || user.isCompany == 0 ? '请先完成上一步' : '去接包' }}</view>
				</view>
				<view class="state">
					<view class="go" :style="{ backgroundColor: user.isCompany > 0 ? '#5a7afc' : '#d6d6d6' }" @click="tab()">去接包</view>
				</view>
			</view>
			<!--电子签约-->
			<view class="item">
				<view class="icon tb">&#xe6ed;</view>
				<view class="con">
					<view class="bt">电子签约</view>
					<view class="bor" style="background: linear-gradient(to right, #f6f6bf, rgb(246 246 246))"></view>
					<view class="zt">{{ !user.isContract || user.isContract == 0 ? '请签约' : '已签约' }}</view>
				</view>
				<view class="state">
					<view class="go" :style="{ backgroundColor: user.isCompany > 0 ? '#5a7afc' : '#d6d6d6' }">去签约</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			ip: this.http.ip,
			user: {},
			bannerList: [{ image: '../../static/index.jpg' }],
			noticeList: ['承揽时代小程序上线了', '个人接包时代来临，动动手指就赚钱']
		};
	},
	onShow() {
		if (this.hasLogin()) {
			this.getUser();
		}
	},
	onLoad() {
		//this.getData();
	},
	methods: {
		getUser() {
			this.http.request({
				url: '/app/user/info',
				success: (res) => {
					this.user = res.data.data;
				}
			});
		},
		getData() {
			this.http.request({
				url: this.http.urls.home_list,
				success: (res) => {
					res.data.data.forEach((item) => {
						this.noticeList.push(item.title);
					});
				}
			});
		},
		go(url) {
			if (this.hasLogin()) {
				uni.navigateTo({ url: url });
			} else {
				uni.navigateTo({ url: '/pages/user/login' });
			}
		},
		tab() {
			if (this.user.isCompany > 0) {
				uni.switchTab({ url: '/pages/packages/index' });
			}
		}
	}
};
</script>

<style lang="scss">
.main {
	padding: 5px 15px 15px 15px;
}
.banner {
}
.notice {
	margin-top: 10px;
}
.flow {
	padding-top: 20px;
	.title {
		font-size: 15px;
	}
	.item {
		background-color: white;
		border-radius: 10px;
		padding: 18px;
		overflow: hidden;
		margin-top: 12px;
		.tb {
			float: left;
			padding: 13px;
			border: 1px solid $main-color;
			color: $main-color;
			border-radius: 50%;
			font-size: 23px;
		}
		.con {
			float: left;
			padding-left: 20px;

			.bt {
				font-size: 18px;
			}
			.bor {
				background-color: red;
				border-radius: 20px;
				height: 9px;
				margin-top: -9px;
				width: 105px;
				margin-left: -5px;
			}
			.zt {
				font-size: 13px;
				padding-top: 5px;
				color: #909090;
			}
		}
		.state {
			float: right;
			padding-top: 11px;
			.zt {
				font-size: 13px;
				color: $main-color;
			}
			.icon {
				color: #909090;
			}
			.go {
				padding: 5px 12px;
				font-size: 14px;
				background-color: #5a7afc;
				color: white;
				border-radius: 20px;
			}
		}
	}
}
</style>