sadjv3_jishi/pages/index/technicianLevel.vue

<template>
	<view class="content">
		<view class="nav-tab">
			<image src="../../static/index/fanhui.png" mode="" @click="fanhui()"></image>
			<span class="nav-title">技师等级</span>
			<span class="nav-btn"></span>
		</view>
		<view class="mian">
			<view class="header">
				<view class="header-right">
					<view class="header-right-top">
						<span>当前周期</span>
						<span>{{ artificerData.beginTime }}~{{ artificerData.finishTime }}</span>
					</view>
					
					<view class="header-right-text">
						
						<!-- <view v-if="ultimately">
							<view v-if="lastGrade">
								上周期等级：【{{lastGrade}}】
							</view>
							<view v-if="grade">
								本周期到达等级：【{{grade}}】
							</view>
							<view v-if="maxStatus==true">
								已满级。
							</view>
							<view v-else>
								<view>升级到【{{differenceGrade}}】还差</view>
								<span v-if="differenceDurationOnline">
									【{{differenceDurationOnline}}】小时
								</span>
								<span v-if="differenceOutstandingAchievement">
									【{{differenceOutstandingAchievement}}】业绩
								</span>
								<span v-if="differenceIntegral">
									【{{differenceIntegral}}】积分
								</span>
							</view>
						</view>
						<view v-else>
							备注: 本期等级是根据技师上个周期的业绩最终计算得出
						</view> -->
						<view v-if="grade" class="dengji-text">
							本周期到达等级：【{{grade}}】
						</view>
						<u-line-progress active-color="#9dd47a" :show-percent="false" :height="15" inactive-color="#098f7a"
							:percent="lineProgressData" :striped-active="true"></u-line-progress>
						<view v-if="!maxStatus && longUpgradeDescriptionSet.differenceOutstandingAchievement" class="dengji-text">
							还差<span class="memo">{{ longUpgradeDescriptionSet.differenceDurationOnline }}</span>小时，<span class="memo">{{ longUpgradeDescriptionSet.differenceOutstandingAchievement }}</span>业绩，<span class="memo">{{ longUpgradeDescriptionSet.differenceIntegral }}</span>积分;可以升级<span class="memo">{{ longUpgradeDescriptionSet.differenceGrade }}</span>
						</view>
						<view v-if="maxStatus" class=" dengji-text">
							您已达到最高等级
						</view>
					</view>
				</view>
				<view class="header-right-bottom">
					<view class="djimg">{{ artificerData.grade }}</view>
					<!---<view class="djimg-text">当期等级</view>-->
				</view>
			</view>
			<view class="mian-view">
				<view class="mian-list" v-for="(item, index) in ArtificerLevelList" :key="item.id">
					<view class="mian-list-top">
						<view>
							<view class="djimg-s">{{ item.grade }}</view>
						</view>
						<view class="fencheng">
							<span>分成比例  </span>
							<span>{{ item.proportionalSharing*100 }}%</span>
						</view>
					</view>
					<view class="mian-list-bottom">
						<view class="mian-list-view">
							<span>{{ item.durationOnline }}h</span>
							<span>在线时长</span>
						</view>
						<view class="mian-list-view">
							<span>{{ item.outstandingAchievement }}</span>
							<span>最低业绩</span>
						</view>
<!-- 						<view class="mian-list-view">
							<span>{{ item.clockRate*100 }}%</span>
							<span>加钟率</span>
						</view> -->
						<view class="mian-list-view">
							<span>{{ item.integral }}</span>
							<span>积分</span>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				userId: 0,
				page: 1,
				limit: 10,
				artificerData: {},
				ArtificerLevelList: [],
				ultimately: "",
				lastGrade: "",
				grade: "",
				// maxStatus: "",
				differenceDurationOnline: "",
				differenceOutstandingAchievement: "",
				differenceIntegral: "",
				differenceGrade: "",
				currentWholeIncome: null, //App首页当期总收益
				totalIncomeRange: null, //App首页当前阶段收益总数
				currentRealIncome: null, //App首页当期实际收益（已扣除各项）
				currentIntegral: null, //App首页当期积分
				currentOrdersNum: null, //App首页当期订单数量
				currentRenewalNum: null, //App首页当期加钟率
				currentRechargeNum: null, //App首页当期充值率
				upgradeDescriptionStatus: false, // App首页升级描述
				currentGrade: null, //App首页当前等级
				lineProgressData: 0,
				maxStatus: null,
				longUpgradeDescriptionSet:{}
			}
		},
		onLoad(e) {
			this.ultimately = e.ultimately;
			this.lastGrade = e.lastGrade;
			this.grade = e.grade;
			// this.maxStatus = e.maxStatus;
			this.differenceDurationOnline = e.differenceDurationOnline;
			this.differenceOutstandingAchievement = e.differenceOutstandingAchievement;
			this.differenceIntegral = e.differenceIntegral;
			this.differenceGrade = e.differenceGrade;
			this.getArtificerLevels();
			this.getHomeListData();
		},
		methods: {
			//获取App首页数据
			getHomeListData() {
				let artificerId = uni.getStorageSync("artificerId");
			
				console.log('artificerId------->',artificerId);
				if (artificerId) {
					this.$Request.getXZX("/app/artificer/integral/home/?artificerId=" + artificerId,).then((res) => {
						if (res && res.data) {
							this.longUpgradeDescriptionSet = {
								differenceOutstandingAchievement: res?.data?.differenceOutstandingAchievement,
								differenceIntegral: res?.data?.differenceIntegral,
								differenceClockRate: res?.data?.differenceClockRate + "%",
								differenceDurationOnline: res?.data?.differenceDurationOnline,
								currentLevel: res?.data?.currentLevel,
								differenceGrade: res?.data?.differenceGrade,
							};
							this.upgradeDescriptionStatus = res?.data?.ultimately;
							this.currentGrade = res?.data?.lastGrade;
							uni.setStorageSync("currentRealIncome", res?.data?.earnings);
							this.totalIncomeRange = res?.data?.suffix;
							if (this.currentWholeIncome < 4000) {
								this.totalIncomeRange = 4000;
							} else if (this.currentWholeIncome < 6000 && this.currentWholeIncome > 4000) {
								this.totalIncomeRange = 6000;
							} else if (this.currentWholeIncome < 8000 && this.currentWholeIncome > 6000) {
								this.totalIncomeRange = 8000;
							} else if (this.currentWholeIncome < 10000 && this.currentWholeIncome > 8000) {
								this.totalIncomeRange = 10000;
							} else {
								this.totalIncomeRange = 4000;
							}
							this.currentWholeIncome = 2000;
							this.lineProgressData = this.currentWholeIncome / this.totalIncomeRange * 100;
						}
					})
				}
			},
			fanhui(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			getArtificerLevels() {
				let artificerId = uni.getStorageSync("artificerId");
				let data = {
					page: 1,
					limit: 100,
					artificerId: artificerId
				}
				this.$Request.get("/app/artificer/integral/getArtificerLevels",data).then((res) => {
						if (res && res.code === 0) {
							this.artificerData = res.artificerData;
							this.ArtificerLevelList = res.levelData.records;
						}
					})
			}
		}
	}
</script>

<style scoped>
	.djimg-s{
		position: absolute;
		top: 0;
		background: url(../../static/images/index/vip.png) no-repeat center;
		background-size: cover;
		width: 96.39rpx;
		height:74rpx;
		text-align: center;
		line-height: 43px;
		font-weight: bold;
		font-size: 23rpx;
		color: #FFFFFF;
	}
	.mian-list-view span:nth-child(1){
		font-size: 40rpx;
		color: #019c88;
		font-weight: bold;
	}
	.mian-list-view span:nth-child(2){
		font-size: 24rpx;
		color: #333;
		margin-top: 2px;
	}
	.mian-list-view{
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.mian-list-bottom{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 40rpx;
	}
	.fencheng span{
		font-size: 25rpx;
	}
	.fencheng span:nth-child(1){
		color: #333333;
	}
	.fencheng span:nth-child(2){
		color: #FE912A;
		margin-top: 2px;
		margin-left: 5px;
		font-weight: bold;
	}
	.fencheng{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.xinren{
		font-weight: bold;
		font-size: 23rpx;
		color: #333333;
	}
	.mian-list-top{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;

	}
	.mian-list{
		width: 100%;
		background: #F7F7F7;
		border-radius: 14rpx;
		display: flex;
		flex-direction: column;
		padding: 15px;
		margin-bottom: 10px;
		position: relative;
	}
	.mian-view{
		width:100%;
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 0;
		margin-top: 140px;
		background: #fff;
	}
	.djimg-text{
		font-size: 23rpx;
		color: #FFFFFF;

	}

	.djimg {
		position: absolute;
		right: 20px;
		top: 0;
		background: url(../../static/images/index/vip.png) no-repeat center;
		background-size:100%;
		width: 198rpx;
		height: 70px;
		text-align: center;
		line-height: 82px;
		font-weight: normal;
		font-size: 40rpx;
		color: #FEFEFE;
		font-style: italic;
		font-weight: bold;
	}
	.header-right-bottom{
		width: 30%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		margin-top: 20px;
		margin-right: 6px;
	}
	.header-right-text{
		width: 100%;
		margin-top: 25px;
		font-size: 26rpx;
		color: #FFFFFF;
	}
	.header-right-top span:nth-child(1){
		width: 126rpx;
		height: 34rpx;
		text-align: center;
		line-height: 36rpx;
		font-size: 24rpx;
		color: #843200;
		background: linear-gradient(-36deg, #FFE45A, #FFBB46);
		border-radius: 15rpx 0rpx 15rpx 0rpx;
	}
	.header-right-top span:nth-child(2){
		font-size: 24rpx;
		color: #FFF5BC;
		margin-left: 5px;
	}
	.header-right-top{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 16px;
	}
	.header-right{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.header{
		width: 100%;
		padding: 13px 20px;
		height: 263rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background: linear-gradient(-90deg, #019C88, #1BB9A5, #029D88);
		border-top-left-radius: 56rpx;
		border-top-right-radius: 56rpx;
		position: relative;
	}
	.mian{
		width: 95%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		border-radius: 56rpx;
		position: relative;
	}
	.nav-btn{
		display: inline-block;
		width: 49rpx;
		height: 24rpx;
	}
	.nav-title{
		font-weight: bold;
		font-size: 38rpx;
		color: #17181C;
	}
	.nav-tab image{
		width: 15.42rpx;
		height: 27.64rpx;
	}
	.nav-tab{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 30px 10px 10px 10px;
	}
	.content{
		width: 100%;
		/* height: 100vh; 
		background:#f7f7f7;*/
		background-repeat: no-repeat;
		background-size: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		}
	.be-remarks{
		border: 1px dashed #FE912E;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
		color: #fe912E;
		font-size: 24rpx;
	}
	.progress-bar{
		margin-top:40rpx;
		width: 130%;
	}
	.u-demo-block__content {
		flex-direction: column !important;
		flex-wrap: nowrap;
		align-items: stretch;
		width: 100%;
	}
	.memo{
		font-size: 24rpx;
		color: #ffe35d;
		padding: 0 6rpx;
	}
	.dengji-text{
		font-size: 22rpx;
		
	}
</style>