barter-app/pages/store/index.vue

<template>
	<view class="content" v-if="!loding">
		<block v-if="this.$store.state.token != ''">
			<block v-if="!certification">
				<!-- 企业认证 -->
				<view class="statusBar">
					<view class="statusBar-title">企业工具</view>
				</view>
				<view class="store-login">
					<block v-if="appliesState.code === -1">
						<image class="icon" src="@/static/icons/approve-icon.png" mode="widthFix"></image>
						<view class="sub-title">{{appliesState.message}}</view>
						<button type="default" @click="onRightBtn">认证并开通</button>
					</block>
					<block v-else-if="appliesState.code === 2">
						<image class="icon" src="@/static/icons/approve-icon.png" mode="widthFix"></image>
						<view class="title">认证失败</view>
						<view class="sub-title">{{appliesState.message}}</view>
						<button type="default" @click="$Router.push({name: 'Approve', params: {formType: 'put'}})">重新提交认证</button>
					</block>
					<block v-else-if="appliesState.code === 0">
						<image class="icon" src="@/static/icons/audit-icon.png" mode="widthFix"></image>
						<view class="sub-title">{{appliesState.message}}</view>
					</block>
				</view>
			</block>
			<block v-else>
				<view class="statusBar">
					<view class="statusBar-box">
						<image class="logo" :src="company.logo" mode="aspectFill"></image>
						<view class="company">
							<view class="name">{{company.name}}</view>
							<view class="faith">诚信{{company.faith}}</view>
						</view>
						<view class="btn" @click="$Router.push({name: 'Vip'})">{{company.identity}}</view>
					</view>
				</view>
				<!-- 老板 -->
				<boss v-if="!employee" :word-data="workbench"/>
				<!-- 员工 -->
				<staff v-if="employee"/>
			</block>
		</block>
		<!-- 登录提示 -->
		<block v-else>
			<view class="statusBar">
				<view class="statusBar-title">企业工具</view>
			</view>
			<view class="store-login">
				<image class="icon" src="@/static/icons/login-icon.png" mode="widthFix"></image>
				<view class="sub-title">一键开启您的易货之旅</view>
				<button type="default" @click="login">登录</button>
			</view>
		</block>
	</view>
</template>

<script>
	import { index } from '@/apis/interfaces/store'
	import { isallow, appliesQuery } from '@/apis/interfaces/company'
	import boss from '@/components/store-boss/store-boss'
	import staff from '@/components/store-staff/store-staff'
	import userAuth from '@/public/userAuth'
	export default {
		components:{
			boss,
			staff
		},
		data() {
			return {
				loding 		 : true,
				appliesState : {},
				certification: false,
				employee	 : false,
				workbench	 : {},
				company		 : {}
			}
		},
		onShow(){
			this.getIndex()
		},
		methods: {
			// 首页数据
			getIndex(){
				if(this.$store.state.token == ''){
					this.loding = false
					return
				}
				index().then(res => {
					if(!res.is_certification){
						this.getAppliesQuery()
						return
					}
					this.company	   = {
						logo	: res.cover,
						name	: res.name,
						identity: res.company_identity,
						faith	: res.integrity
					}
					this.workbench 	   = {
						top		: res.top,
						middle	: res.middle,
						order	: res.order
					}
					this.certification = res.is_certification
					this.employee	   = res.is_employee
					this.loding 	   = false
				}).catch(err =>{
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 查询企业认证状态
			getAppliesQuery(){
				appliesQuery().then(res=>{
					this.appliesState = res
					this.loding 	  = false
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 登录
			login(){
				let auth = new userAuth()
				auth.Login().then(res => {
					if(res.auth) this.getIndex()
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 开通vip
			onRightBtn(){
				isallow().then(res =>{
					this.$Router.push({name: 'Approve'})
				}).catch(err =>{
					uni.showModal({
						title		: '提示',
						content		: '暂未开通商家vip无法开通店铺工具',
						confirmText	: '立即开通',
						success		: res=> {
							if(res.confirm){
								this.$Router.push({name: 'Vip'})
							}
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 登录提示
	.store-login{
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 9;
		background: white;
		text-align: center;
		@extend .vertical;
		button{
			margin-top: $margin*3;
			display: inline-block;
			width: 50%;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: $radius/2;
			background: $text-price;
			color: white;
			font-weight: bold;
			font-size: $title-size;
		}
		.sub-title{
			color: $text-gray;
			font-size: $title-size-m;
		}
		.icon{
			width: 288rpx;
		}
	}
	// Bar
	.statusBar{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		background: $text-price;
		@extend .ios-top;
		.statusBar-box{
			min-height: 68rpx;
			position: relative;
			padding: $padding ($padding + 200) $padding ($padding + 88);
			color: white;
			.logo{
				position: absolute;
				left: $padding;
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
			}
			.company{
				.name{
					line-height: 40rpx;
					@extend .nowrap;
					font-size: $title-size;
				}
				.faith{
					line-height: 28rpx;
					@extend .nowrap;
					font-size: $title-size-sm;
				}
			}
			
			.btn{
				position: absolute;
				right: $padding;
				top: $padding;
				line-height: 68rpx;
				font-size: $title-size-m;
			}
		}
		.statusBar-title{
			line-height: 88rpx;
			min-height: 88rpx;
			color: white;
			text-align: center;
			font-weight: bold;
		}
	}
	.content{
		padding-top: calc(var(--status-bar-height) + #{$padding * 2} + 65rpx);
		padding-bottom: $padding;
	}
</style>