clsd/app/pages/statement/index/index.vue

<template>
	<view class="main">
		<view class="flow">
			<!--实名认证-->
			<view class="item" @click="go('auth')">
				<view class="out">
					<view class="int">
						<view class="icon tb" style="color: rgb(72, 154, 253)">&#xe600;</view>
						<view class="con">
							<view class="bt">实名认证</view>
							<view class="zt">{{ !user.isAuthentication || user.isAuthentication == 0 ? '尚未提交资料' : '已认证' }}</view>
						</view>
						<view class="state" v-if="!user.isAuthentication || user.isAuthentication === 0">
							<view class="go">去认证</view>
						</view>
					</view>
				</view>
			</view>
			<!--关联企业-->
			<view class="item" @click="go('company')">
				<view class="out">
					<view class="int">
						<view class="icon tb" style="color: rgb(250, 178, 46)">&#xe623;</view>
						<view class="con">
							<view class="bt">关联企业</view>
							<view class="zt">{{ !user.isCompany || user.isCompany == 0 ? '尚未关联企业' : '已关联' }} {{ user.isCompany > 0 ? user.isCompany + '家' : '' }}</view>
						</view>
						<view class="state" v-if="!user.isCompany || user.isCompany == 0">
							<view class="go" :style="{ backgroundColor: user.isAuthentication === 1 ? '#5a7afc' : '#d6d6d6' }">去关联</view>
						</view>
					</view>
				</view>
			</view>
			<!--电子签约-->
			<view class="item" @click="go('contract')">
				<view class="out">
					<view class="int">
						<view class="icon tb" style="color: rgb(255, 87, 34)">&#xe6ed;</view>
						<view class="con">
							<view class="bt">电子签约</view>
							<view class="zt">{{ !user.isContract || user.isContract == 0 ? '尚未签约' : '已签约' }}</view>
						</view>
						<view class="state">
							<view class="go" :style="{ backgroundColor: user.isCompany > 0 ? '#5a7afc' : '#d6d6d6' }" v-if="!user.isContract || user.isContract == 0">去签约</view>
						</view>
					</view>
				</view>
			</view>
			<!--开始接包-->
			<view class="item" @click="go('packages')">
				<view class="out">
					<view class="int">
						<view class="icon tb" style="color: rgb(250, 83, 118)">&#xe604;</view>
						<view class="con">
							<view class="bt">进入结算</view>
							<view class="zt">{{ !user.isCompany || user.isCompany == 0 ? '请先签约' : '开始' }}</view>
						</view>
						<view class="state">
							<view class="go" :style="{ backgroundColor: user.isCompany > 0 && user.isContract == 1 ? '#5a7afc' : '#d6d6d6' }" v-if="!user.isCompany || user.isCompany == 0 || user.isContract == 0">进入</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-action-sheet round="20" :actions="actions" @select="selectClick" cancelText="取消" :show="show" @close="show = false"></u-action-sheet>
		<signature ref="sig" @sign="sign"></signature>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				ip: this.http.ip,
				user: {},
				bannerList: [],
				noticeList: [],
				contract: {},
				show: false,
				actions: [{ name: '查看合同' }, { name: '去签字' }]
			};
		},
		onShow() {
			if (this.hasLogin()) {
				this.getUserInfo();
			}
		},
		methods: {
			getUserInfo() {
				this.http.request({
					url: '/app/user/info',
					success: (res) => {
						this.user = res.data.data;
					}
				});
			},
			getData() {
				this.http.request({
					url: '/app/home/index',
					success: (res) => {
						this.contract = res.data.data.contract;
						this.bannerList = res.data.data.bannerList;
						res.data.data.noticeList.forEach((item) => {
							this.noticeList.push(item.title);
						});
					}
				});
			},
			go(url) {
				if (this.hasLogin()) {
					if (url == 'auth') {
						uni.navigateTo({ url: '/pages/auth/index' });
					}
					if (url == 'company' && this.user.isAuthentication === 1) {
						uni.navigateTo({ url: '/pages/company/index' });
					}
					if (url == 'packages' && this.user.isCompany > 0 && this.user.isContract == 1) {
						uni.navigateTo({ url: '/pages/packages/index' });
					}
					if (url == 'contract' && this.user.isContract == 1) {
						this.look();
					}
					if (url == 'contract' && this.user.isContract == 0) {
						this.show = true;
					}
				} else {
					uni.navigateTo({ url: '/pages/user/login' });
				}
			},
			selectClick(e) {
				if (e.name == '查看合同') {
					this.look();
				} else {
					this.$refs.sig.getSyncSignature();
				}
			},
			//查看合同
			look() {
				uni.showLoading({ title: '正在打开合同...', mask: true });
				uni.downloadFile({
					url: this.user.isContract == 0 ? this.ip + this.contract.url : this.ip + '/app/contract/look',
					header: { Authorization: this.getUser().token },
					success: (res) => {
						uni.openDocument({
							filePath: res.tempFilePath,
							showMenu: true,
							success: (res) => {
								uni.hideLoading();
							},
							fail: (res) => {
								uni.hideLoading();
								uni.showModal({ title: '提示', content: '打开合同失败', showCancel: false });
							}
						});
					},
					fail: (res) => {
						uni.hideLoading();
					}
				});
			},
			//电子签名
			sign(val) {
				this.http.request({
					url: '/app/contract/add',
					data: { contractId: this.contract.id, url: val },
					method: 'POST',
					success: (res) => {
						uni.showModal({
							title: '提示',
							content: '签约成功',
							showCancel: false,
							success: (res) => {
								this.getUserInfo();
							}
						});
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.main {
		padding: 5px 15px 15px 15px;
	}
	.banner {}
	.notice {
		margin-top: 10px;
		margin-bottom: -10px;
	}
	.flow {
		padding-top: 20px;
		.title {
			font-size: 15px;
			margin-bottom: 10px;
		}
		.item {
			border-radius: 10px;
			overflow: hidden;
			float: left;
			width: 50%;
			.out {
				padding: 5px;
				.int {
					padding: 15px;
					background-color: white;
					overflow: hidden;
					border-radius: 9px;
					text-align: center;
					.tb {
						margin: 0 auto;
						width: 40px;
						height: 40px;
						padding: 10px;
						line-height: 39px;
						color: $main-color;
						box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
						border-radius: 50%;
						font-size: 27px;
					}
					.con {
						padding-top: 8px;
						.bt {
							font-size: 18px;
						}
						.zt {
							font-size: 13px;
							padding-top: 5px;
							color: #909090;
						}
					}
					.state {
						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>