tlfb/pages/category/apply.vue

<template>
	<view class="wrapper">
			<view class="top-box" style="height: 135rpx;">
				<image src="../../static/img/vip-bg.png" mode=""></image>
			</view>
			<view class="top">
				<view class="top-tit">
					陀罗商城美容院身份
				</view>
				<view class="top-btm">
					<text class="hx"></text><text>购买美容院礼包即可升级为美容院身份</text><text class="hx"></text>
				</view>
			</view>
			
			<view class="item">
				<view class="item-top">特权一</view>
				<view class="item-tit">
					享受3.5折拿货价
					<view class="line"></view>
				</view>
				<view class="item-info">
					<view class="info-y"></view>
					<view class="info">美容院专区商品享受3.5折的拿货价</view>
				</view>
			</view>
			<view class="item">
				<view class="item-top">特权二</view>
				<view class="item-tit">
					金豆奖励
					<view class="line"></view>
				</view>
				<view class="item-info">
					<view class="info-y"></view>
					<view class="info">购买美容院产品享受返10%的金豆奖励</view>
				</view>
			</view>
			<!-- <view class="item">
				<view class="item-top">特权三</view>
				<view class="item-tit">
					开实体店奖励
					<view class="line"></view>
				</view>
				<view class="item-info">
					<view class="info-y"></view>
					<view class="info">享受伞下全部用户产生的业绩奖励</view>
				</view>
			</view> -->
			<view class="more">
				<image src="../../static/icon/i-left.png" mode=""></image>
				<view class="more-tit">
					更多店长特权持续开放中，敬请期待
				</view>
				<image src="../../static/icon/i-right.png" mode=""></image>
			</view>
			<view class="btn" v-if="userInfo.level == 3" @click="changeStep('/pages/category/fillTable?type=edit')">编辑美容院信息</view>
			<view class="btn" v-if="userInfo.level != 3" @click="changeStep('/pages/category/fillTable?type=add')">立即申请成为美容院</view>
			
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { register, verify } from '@/api/login.js';
import { upload ,enter} from '@/api/user.js';
export default {
	data() {
		return {
			
		};
	},
	onLoad() {
		let obj = this
		obj.speed_id = uni.getStorageSync('spread') || '';
		if(obj.speed_id == '') {
			obj.speed_id = obj.userInfo.spread_uid || ''
		}
	},
	computed: {
		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
	},
	methods: {
		changeStep(url) {
			uni.navigateTo({
				url
			})
		},
	}
};
</script>

<style lang="scss" scoped>
.wrapper {
	height: 100%;
}
.top {
	position: relative;
	z-index: 2;
	margin: 0 auto 49rpx;
	width: 674rpx;
	background: linear-gradient(-23deg, #ffe7be, #fed591);
	border-radius: 10rpx;
	padding-bottom: 40rpx;
	.top-tit {
		padding-top: 80rpx;
		text-align: center;
		font-size: 49rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #6A4714;
	}
	.top-btm {
		margin-top: 40rpx;
		font-size: 19rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #6A4714;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		text {
			display: inline-block;
			padding: 0 4rpx;
		}
		.hx {
			width: 66rpx;
			height: 1rpx;
			background: #81504A;
		}
	}
}
.item {
	margin: 44rpx auto;
	width: 674rpx;
	// height: 176rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
	border-radius: 10rpx;
	padding-bottom: 40rpx;
	.item-top {
		width: 85rpx;
		line-height: 36rpx;
		background-color: #fed591;
		border-radius: 10rpx 18rpx 18rpx 0;
		text-align: center;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #975f4a;
	}
	.item-tit {
		display: inline-block;
		padding: 0 10rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #202020;
		margin-left: 68rpx;
		margin-top: 20rpx;
		.line {
			// width: 197rpx;
			margin-top: -10rpx;
			height: 15rpx;
			background: #FFF0C5;
		}
	}
	.item-info {
		display: flex;
		align-items: flex-start;
		padding-left: 68rpx;
		padding-top: 15rpx;
		// align-items: center;
		font-size: 21rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #6F6F6F;
		line-height: 40rpx;
		.info-y {
			width: 24rpx;
			height: 24rpx;
			background: #343238;
			border-radius: 50%;
			margin-right: 14rpx;
			margin-top: 8rpx;
			flex-shrink: 0;
		}
		.info {
			padding-right: 20rpx;
		}
	}
}
.btn {
	margin: 133rpx auto;
	width: 606rpx;
	height: 80rpx;
	background: linear-gradient(-23deg, #ffe7be, #fed591);
	border-radius: 40rpx;
	font-size: 35rpx;
	font-family: Source Han Sans CN;
	font-weight: 500;
	color: #704e1c;
	line-height: 80rpx;
	text-align: center;
}
.top-box {
	position: relative;
	z-index: 1;
	image {
		width: 750rpx;
		height: 236rpx;
		position: absolute;
		top: 0;
		
	}
}
.more {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 21rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #6F6F6F;
	height: 40rpx;
	line-height: 40rpx;
	image {
		height: 15rpx;
		width: 40rpx;
	}
	view {
		padding: 0 8rpx;
	}
}
</style>