<template>
	<div class="content">
		<!-- banner图 -->
		<banner></banner>
		<!-- 寄件按钮 -->
		<div class="btn-two">
			<a @click="goPage(1)" v-if="role.express">
				<span class="iconfont icon-delTask_slt iconStyle"></span>
				<!-- <img src="../assets/images/jkd.png" alt=""> -->
				<span>
					<p>寄快递</p>
					<!-- <p>放心寄 丢必赔</p> -->
				</span>
			</a>
			<a @click="goPage('trans')" v-if="role.trans">
				<span class="iconfont icon-delTask_slt iconStyle"></span>
				<!-- <img src="../assets/images/jkd.png" alt=""> -->
				<span>
					<p>门店调货</p>
					<!-- <p>放心寄 丢必赔</p> -->
				</span>
			</a>
			<router-link to="Inexpress" v-if="role.inexpress">
				<span class="iconfont icon-neibujianpeizhi iconStyle"></span>
				<!-- <img src="../assets/images/nbj.png" alt=""> -->
				<span>
					<p>内部件</p>
					<!-- <p>让工作 更便捷</p> -->
				</span>
			</router-link>
			<router-link to="Logisticslist">
				<span class="iconfont icon-24gf-box2 iconStyle"></span>
				<!-- <img src="../assets/images/wdkd.png" alt=""> -->
				<span>
					<p>我的寄件</p>
					<!-- <p>让工作 更便捷</p> -->
				</span>
			</router-link>
			<router-link to="Search">
				<span class="iconfont icon-a-jijiansel iconStyle"></span>
				<!-- <img src="../assets/images/wdsj.png" alt=""> -->
				<span>
					<p>我的收件</p>
					<!-- <p>让工作 更便捷</p> -->
				</span>
			</router-link>
		</div>
		<tabbar></tabbar>

	</div>
</template>
<script>
import { Toast } from 'vant'
import { getRole } from '../api/index'

const authMap = {
	'211': 'express', // web外部寄件
	'210': 'inexpress', // web内部寄件
	'212': 'trans' // web门店调货
}

export default {
	data() {
		return {
			role: {
				express: false,
				inexpress: false,
				trans: false,
			}
		};
	},
	created: async function () {
		// this.getOpenid();
		console.log('开始走了')

		getRole({}).then(res => {
			if (res.code.toString() === '200') {
				this.setRole(res.roleInfo.rights)
			} else {
				Toast(res.msg)
			}
		}).catch(err => {
			console.log(e)
		})
	},
	methods: {
		setRole(authStr) {
			try {
				let authArr = authStr.split(',')
				authArr.forEach(item => {
					if (authMap[item]) {
						this.role[authMap[item]] = true
					}
				})
			} catch (e) {
				console.log(e)
			}

		},
		link() {
			Toast("正在开发中，敬请期待！")
		},
		goPage(type) {
			if (type === 1) {
				window.location.href = window.location.href + "Express"
				window.location.reload()
				return
			}
			if (type === 'trans') {
				// this.$router.push({ path: "/transferGoods" })
				window.location.href = window.location.href + "transferGoods"
				window.location.reload()
				return
			}
		}
	}
};
</script>

<style lang="less" scoped>
.content {
	padding: .33rem .34rem 1rem;

	.btn-two {
		font-size: .24rem;
		color: #999999;
		display: flex;
		flex-wrap: wrap;
		margin: .2rem auto;
		height: 300px;

		a {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #999999;
			padding: .25rem 0rem;
			background: white;
			width: 50%;
			border-radius: .05rem;
			justify-content: center;

			.iconStyle {
				font-size: 1rem;
				color: #0c2469;
				// width: 1.2rem;
				// height: 1.2rem;
				position: relative;
				top: .1rem;
				margin-bottom: 10px;
			}

			span {
				p:nth-of-type(1) {
					font-size: .3rem;
					color: #333;
					font-weight: bold;
					margin-bottom: .1rem;
				}
			}
		}
	}

	.btn-four {
		font-size: .24rem;
		color: #999999;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: .2rem auto;
		background: white;
		padding: .25rem .2rem;
		border-radius: .05rem;

		div {
			flex: 1;
			min-width: 48%;
			padding: .2rem 0rem;

			a {
				display: flex;
				color: #999999;
				justify-content: center;
				padding: .1rem 0rem;

				img {
					width: .52rem;
					height: .5rem;
					position: relative;
					top: .2rem;
				}

				span {
					margin-left: .25rem;

					p:nth-of-type(1) {
						font-size: .3rem;
						color: #333;
						font-weight: bold;
						margin-bottom: .1rem;
					}
				}
			}

		}

		div:nth-of-type(1) a,
		div:nth-of-type(3) a {
			border-right: .01rem solid #f7f7f7;
		}

		div:nth-of-type(1),
		div:nth-of-type(2) {
			border-bottom: .01rem solid #f7f7f7;
		}

	}

	.ad-two {
		font-size: .24rem;
		color: #999999;
		display: flex;
		justify-content: center;
		margin: .2rem auto;

		a {
			flex: 1;
			color: #999999;
			padding: .35rem 0rem;
			background: white;
			width: 48%;
			border-radius: .05rem;
			text-align: center;

			img {
				width: .55rem;
				height: .55rem;
				margin-bottom: .1rem;
			}

			span {
				display: block;

			}
		}
	}

	.foot_icon {
		display: flex;
		justify-content: center;
		margin: .55rem auto;

		div {
			flex: 1;
			text-align: center;
			font-size: .2rem;
			color: #999999;

			img {
				width: .64rem;
				height: .64rem;
			}
		}
	}
}

.iconStyle {
	font-size: 1rem;
	color: #0c2469;
}
</style>
