sct/pagesT/Distribution/GradeDescription.vue

<template>
	<view class="Distribution">
		<view class="top-view">
			<view class="lever-view clearfix">
				<view class="lever-view-left float_left">
					<image class="user-avator" :src="avator" mode="aspectFill"></image>
					<text>{{ gradeName }}</text>
				</view>
			</view>
			<!--  -->
			<!-- <scroll-view class="Grade-view" :scroll-left="scroll_left_num" scroll-x @scroll="scrollGrade">
				<view style="display: inline-block;width: 280rpx;"></view>
				<view class="Grade-li" v-for="(item, index) in grade_list" :key="index">
					<view class="Grade-icon ibonfont ibonhuodaofukuan"></view>
					<view class="Grade-text">{{ item.name }}</view>
				</view>
				<view style="display: inline-block;width: 300rpx;"></view>
			</scroll-view> -->
			<swiper class="Grade-swiper" @change="gradeChange" :indicator-dots="false" :autoplay="false">
				<swiper-item class="left_item"></swiper-item>
				<swiper-item class="left_item"></swiper-item>
				<swiper-item class="Grade-item" v-for="(item, index) in grade_list" :key="index">
					<view class="Grade-li" :class="[grade_on === index ? 'Grade-on' : '']">
						<view class="Grade-icon ibonfont ibonhuiyuan"></view>
						<view class="Grade-text">{{ item.name }}</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="ibonfont ibonxiangshangjiantou top-jt-icon"></view>
		</view>
		<view class="money-ratio-view">
			<view class="money-ratio-tit">{{ text_set.commission || '佣金' }}比例</view>
			<view class="money-ratio-ul">
				<view class="money-ratio-li clearfix">
					<view class="float_left m-label">
						<text class="ibonfont ibonhuodaofukuan"></text>
						<text class="m-label-text">{{ text_set.level_one || '一级' }}{{ text_set.commission || '佣金' }}比例</text>
					</view>
					<view class="float_right m-value">{{ grade_detail.oneRate }}%</view>
				</view>
				<view class="money-ratio-li clearfix">
					<view class="float_left m-label">
						<text class="ibonfont ibonhuodaofukuan"></text>
						<text class="m-label-text">{{ text_set.level_two || '二级' }}{{ text_set.commission || '佣金' }}比例</text>
					</view>
					<view class="float_right m-value">{{ grade_detail.twoRate }}%</view>
				</view>
				<view class="money-ratio-li clearfix">
					<view class="float_left m-label">
						<text class="ibonfont ibonhuodaofukuan"></text>
						<text class="m-label-text">{{ text_set.level_three || '三级' }}{{ text_set.commission || '佣金' }}比例</text>
					</view>
					<view class="float_right m-value">{{ grade_detail.threeRate }}%</view>
				</view>
			</view>
		</view>
		<view class="up-term" v-if="grade_detail.upgradeConditionInfo.length">
			<view class="up-term-tit">
				<text>升级条件</text>
				<text class="fu-tit">(满足以下条件可升级)</text>
			</view>
			<view class="up-term-ul">
				<view class="up-term-li clearfix" v-for="(item, index) in grade_detail.upgradeConditionInfo" :key="index">
					<view class="float_left">
						<text>{{ item.name }}达到</text>
						<text class="money-u-num">{{ item.value }}</text>
						<text v-if="item.name.indexOf('额') > -1">元</text>
						<text v-else-if="item.name.indexOf('人') > -1">人</text>
						<text v-else>个</text>
					</view>
					<view class="float_right">
						<view class="status-btn" v-if="!item.status">未完成</view>
						<view class="status-btn status-ac-btn" v-else>已完成</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getAvator } from '@/access/common.js';
export default {
	data() {
		return {
			avator: '',
			scroll_left_num: 0,
			text_set: {},
			grade_list: [],
			gradeName: '',
			grade_detail: {
				upgradeConditionInfo: [],
				oneRate: '',
				twoRate: '',
				threeRate: ''
			},
			grade_on: 0
		};
	},
	onLoad(options) {
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#fe582e'
		});
		this.avator = getAvator();
		this.text_set = this.$store.state.distributionTextSet;
		this.getAllGrade();
		this.gradeName = options.gradeName;
	},
	methods: {
		scrollGrade(e) {
			const scrollLeft = e.detail.scrollLeft;
			// console.log(Math.round(scrollLeft / 50)* 100);
			// console.log(scrollLeft);
			// this.scroll_left_num = Math.round(scrollLeft / 50) * 100;
		},
		gradeChange(e) {
			console.log(e);
			this.grade_on = e.detail.current;
			this.grade_detail = this.grade_list[this.grade_on];
		},
		async getAllGrade() {
			this.$u.api.getAllGrade().then(({data})=>{
				this.grade_list = data;
				this.grade_detail = data[0];
			});
		}
	}
};
</script>

<style lang="scss">
.top-view {
	color: #ffffff;
	background-color: #fe582e;
	position: relative;
	.top-jt-icon {
		position: absolute;
		bottom: -14upx;
		line-height: 36upx;
		height: 36upx;
		font-size: 36upx;
		color: #fff;
		left: 50%;
		transform: translateX(-18upx);
	}
	.lever-view {
		padding: 30upx 24upx;
		.lever-view-left {
			font-size: 22upx;
			font-weight: bold;
			line-height: 38upx;
			height: 42upx;
			padding-right: 16upx;
			border-radius: 22upx;
			background-color: rgba($color: #ffffff, $alpha: 0.3);
			text {
				transform: translateY(4upx);
				display: inline-block;
			}
			.user-avator {
				margin-right: 8upx;
				width: 42upx;
				height: 42upx;
				border-radius: 100%;
				vertical-align: middle;
				transform: translateY(-2upx);
			}
		}
	}
	.Grade-swiper {
		height: 200rpx;
		.Grade-item {
			width: 150upx !important;
		}
		.left_item {
			width: 150upx !important;
		}
		.Grade-li {
			width: 150upx;
			text-align: center;
			font-size: 24upx;
			opacity: 0.6;
			.Grade-icon {
				width: 60upx;
				height: 60upx;
				line-height: 60upx;
				font-size: 40upx;
				margin-bottom: 30upx;
				display: block;
				border: 1upx solid #FFFFFF;
				border-radius: 100%;
				margin: 0 auto 20upx;
			}
		}
		.Grade-on {
			opacity: 1;
			.Grade-icon{
				background-color: #FFFFFF;
				color: #fe582e;
			}
		}
	}

	.Grade-view {
		padding: 50upx 0;
		white-space: nowrap;
		width: 100%;
		.Grade-li {
			display: inline-block;
			width: 200upx;
			text-align: center;
			font-size: 24upx;
			opacity: 0.6;
			.Grade-icon {
				font-size: 60upx;
				margin-bottom: 30upx;
			}
		}
		.Grade-on {
			opacity: 1;
		}
	}
}
.money-ratio-view {
	padding: 0 40upx;
	.money-ratio-tit {
		line-height: 100upx;
		font-size: 32upx;
	}
	.money-ratio-ul {
		border-radius: 10upx;
		background-color: #fbf4e2;
		color: #9b7953;
		.money-ratio-li {
			padding: 0 40upx;
			line-height: 100upx;
			border-bottom: 1upx solid #fff;
			.ibonhuodaofukuan {
				color: #d8a96c;
				margin-right: 20upx;
			}
			.m-value {
				font-size: 32upx;
			}
		}
	}
}
.up-term {
	padding: 0 40rpx;
	.up-term-tit {
		line-height: 100upx;
		font-size: 32upx;
		.fu-tit {
			font-size: 24upx;
			color: #666;
			font-weight: 300;
		}
	}
	.up-term-ul {
		background-color: #fff;
		border-radius: 10upx;
		box-shadow: 0 0 10upx 4upx #f5f5f5;
		.up-term-li {
			line-height: 100upx;
			padding: 0 24upx;
			border-bottom: 1px solid #f5f5f5;
			.money-u-num {
				color: #d83d1f;
				font-weight: 300;
				margin-left: 10upx;
				margin-right: 10upx;
			}
			.status-btn {
				background-color: #fef0f0;
				color: #fa3534;
				padding: 6upx 20upx;
				font-size: 24upx;
				border-radius: 32upx;
				line-height: 32upx;
				display: inline-block;
			}
			.status-ac-btn{
				color: #999999;
				background-color: #f4f4f4;
			}
			&:last-child {
				border-bottom: 0 none;
			}
		}
	}
}
</style>