MeiMeiZhuan/pages/partner/partner.vue

<template>
	<view class="container">
		
		<view class="partner-bg">
			<image src="https://mmz.liuniu946.com/statics/img/img12.png"></image>
		</view>
		<swiper 
			class="swiper-block" 
			@change="swiperChange"  
			previous-margin="20rpx" 
			next-margin="48rpx" 
			current="0"
			circular>
			<block>
				<swiper-item>
					<view class="slide-image box">
						<view class="partner-header">
							<view class="header-title">升级会员会员即可享受以下权利</view>
							<view class="header-info">立即升级开始转钱</view>
						</view>
						<view  class="partner-content">
							<view class="partner-content-item" >
								<view class="img">
									<image src="https://mmz.liuniu946.com/statics/img/img09.png"></image>
								</view>
								<view class="detils">会员</view>
							</view>
							<view class="partner-content-item" >
								<view class="img">
									<image src="https://mmz.liuniu946.com/statics/img/img10.png"></image>
								</view>
								<view class="detils">
									<view>商品差价</view>
								</view>
							</view>
							<view class="partner-content-item" >
								<view class="img">
									<image src="https://mmz.liuniu946.com/statics/img/img11.png"></image>
								</view>
								<view class="detils">会员身份</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="slide-image box" >
						<view class="partner-header">
							<view class="header-title">升级合伙人即可享受以下权利</view>
							<view class="header-info">立即升级开始转钱</view>
						</view>
						<view  class="partner-content">
							<view class="partner-content-item" >
								<view class="img">
									<image src="https://mmz.liuniu946.com/statics/img/img09.png"></image>
								</view>
								<view class="detils">合伙人价格</view>
							</view>
							<view class="partner-content-item" >
								<view class="img">
									<image src="https://mmz.liuniu946.com/statics/img/img10.png"></image>
								</view>
								<view class="detils">
									<view>商品差价</view>
									<view>699礼包分销佣金</view>
								</view>
							</view>
							<view class="partner-content-item" >
								<view class="img">
									<image src="https://mmz.liuniu946.com/statics/img/img11.png"></image>
								</view>
								<view class="detils">合伙人身份</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="slide-image box">
						<view class="partner-header">
							<view class="header-title">升级超级合伙人即可享受以下权利</view>
							<view class="header-info">立即升级开始转钱</view>
						</view>
						<view  class="partner-content">
							<view class="partner-content-item" >
								<view class="img">
									<image src="https://mmz.liuniu946.com/statics/img/img09.png"></image>
								</view>
								<view class="detils">合伙人价格</view>
							</view>
							<view class="partner-content-item" >
								<view class="img">
									<image src="https://mmz.liuniu946.com/statics/img/img10.png"></image>
								</view>
								<view class="detils">
									<view>商品差价</view>
									<view>699礼包分销佣金</view>
									<view>合伙人平级奖励</view>
								</view>
							</view>
							<view class="partner-content-item" >
								<view class="img">
									<image src="https://mmz.liuniu946.com/statics/img/img11.png"></image>
								</view>
								<view class="detils">超级合伙人身份</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</block>
		</swiper>
		<view class="card-box" v-if="task.length">
			<view class="mode" v-for="(item,index) in task" :key="index"  >
				<text class="mode-1">晋升方式</text>
				<view class="mode-2">{{ item.name }}</view>
				<view class="progressbar flex1">
					<view class="progressbar-1">
						<view class='progressbar-2' :style="'width:'+ item.speed +'%;'"></view>
					</view>
					<text class="text" v-if="item.task_type != 'BuySomeProduct'" >{{ item.new_number }}/{{item.number}}</text>
					<view class="sumit" v-if="item.task_type != 'BuySomeProduct'" @click="navTos('/pages/index/index')">去购买</view>
					<text class="text" v-if="item.task_type == 'BuySomeProduct'" >{{ item.finish }}/1</text>
					<view class="sumit" v-if="item.task_type == 'BuySomeProduct'" @click="navTo(item)">去购买</view>
				</view>
			</view>
		</view>
		<!-- #ifndef MP -->
		<view class="partner-box">
			<view class="back" @click="navBack">
				<image src="../../static/img/img03.png" mode=""></image>
			</view>
		</view>
		<!-- #endif -->
		
	</view>
</template>

<script>
	import {
		userLevelGrade,
		userLevelTask
	} from '@/api/user.js';
	export default{
		data(){
			return {
				currentIndex: 0,
				task: [], //任务列表
				currentId:0,
				reach_count:0,
				carouselList:[
					{	id: 0,
						title:'升级会员即可享受以下权利',
						info:'立即升级，开始赚钱',
						piclist:[
							{ id: 0, detail:'会员价', pic: 'https://mmz.liuniu946.com/statics/img/img09.png' },
							{ id: 1, detail:'商品差价', pic: 'https://mmz.liuniu946.com/statics/img/img10.png' },
							{ id: 2, detail:'会员省份', pic: 'https://mmz.liuniu946.com/statics/img/img11.png' },
						],
					},
					{	id: 1,
						title:'升级合伙人即可享受以下权利',
						info:'立即升级，开始赚钱',
						piclist:[
							{ detail:'合伙人价格', pic: 'https://mmz.liuniu946.com/statics/img/img09.png' },
							{ detail:'商品差价', pic: 'https://mmz.liuniu946.com/statics/img/img10.png' },
							{ detail:'合伙人身份', pic: 'https://mmz.liuniu946.com/statics/img/img11.png' },
						],
					},
					{	id: 0,
						title:'升级超级合伙人即可享受以下权利',
						info:'立即升级，开始赚钱',
						piclist:[
							{ detail:'超级价格', pic: 'https://mmz.liuniu946.com/statics/img/img09.png' },
							{ detail:'商品差价', pic: 'https://mmz.liuniu946.com/statics/img/img10.png' },
							{ detail:'超级合伙人身份', pic: 'https://mmz.liuniu946.com/statics/img/img11.png' },
						],
					},
				]
			}
		},
		onLoad() {
			this.getVipList();
		},
		methods:{
			/**
			 * 获取会员等级
			 * 
			 */
			getVipList: function() {
				let that = this;
				userLevelGrade().then(res => {
					console.log(111,res)
					console.log(1112,res.data.task)
					// that.$set(that, 'VipList', res.data.list);
					that.task = res.data.task.task;
					that.reach_count = res.data.task.reach_count;
					// that.currentIndex = res.data.list[0] ? res.data.list[0].id : 0;
					// let arr = [];
					// res.data.list.forEach(function(item, index) {
					// 	if (item.is_clear == false) {
					// 		arr.push(item.grade);
					// 	}
					// })
					// that.grade = arr[0] || 0;
					// that.grade = res.data.list[0].grade
				});
			},
			/**
			 * 获取任务要求
			 */
			getTask: function() {
				let that = this;
				userLevelTask(that.currentId).then(res => {
					console.log(res)
					that.task = [];
					that.task = res.data.task;
					that.reach_count = res.data.reach_count;
				});
			},
			swiperChange: function (e) {
				this.currentIndex = e.detail.current
				this.currentId = e.detail.current + 1
				console.log(998,this.currentId)
				console.log(999,this.currentIndex)
				this.getTask();
			},
			// 后退
			navBack() {
				uni.navigateBack();
			},
			navTo(item){
				uni.navigateTo({
					url: '/pages/product/product?id=' + item.number
				});
			},
			navTos(url){
				uni.switchTab({
					url
				});
			}
		}
		
	}
</script>

<style lang="scss">
	body .container{
		background-color:transparent;
	}
	.container{
		margin-left: -1rpx;
		position: relative;
	}
	.partner-box{
		position: absolute;
		left:0;
		top:0;
		// width: 100%;
		// height: 451rpx;
		// border-bottom: 1px dashed #333333;
		.back{
			width: 20rpx;
			height: 35rpx;
			margin-left: 25rpx;
			margin-top: 25rpx;
			image{
				width: 21rpx;
				height: 36rpx;
			}
		}
	}
	.partner-bg{
		width: 100%;
		height: 451rpx;
		image{
			width: 100%;
			height: 451rpx;
		}
	}
	
	.swiper-block {
		height: 438rpx;
		width: 100%;
		 background-color:transparent;
		 position: absolute;
		 left: 0;
		 top: 258rpx;
		 // padding-bottom: 20rpx;
	}
	swiper-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		overflow: unset;
		.box{
			width: 96%;
			height: 438rpx;
			background-color: #fff;
			.partner-header{
				padding: 0;
				height: 152rpx;
				width: 100%;
				// border-bottom: 1px dashed  #ccc;
				display: flex;
				flex-direction: column;
				// justify-content: center;
				text-align: center;
				.header-title{
					margin-top: 41rpx;
					color: #474747;
					font-size: 32rpx;
				}
				.header-info{
					color: #999;
					font-size: 24rpx;
					margin-top: 12rpx;
				}
			}
			.partner-content{
				// height: 208rpx;
				width: 100%;
				background-color: #fff;
				display: flex;
				.partner-content-item{
					// height: 208rpx;
					width: 33.33%;
					text-align: center;
					color: #444444;
					font-size: 28rpx;
					padding-bottom: 14rpx;
					.img{
						width: 100%;
						height: 130rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						image{
							width: 81rpx;
							height: 84rpx;

						}
					}
					.detils{
						text-align: center;
						color: #444444;
						font-size: 28rpx;
					}
				}
				
			}
		}
	}
	.slide-image {
		height: 320rpx;
		width: 520rpx;
		border-radius: 9rpx;
		box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
		margin: 0rpx 30rpx;
		z-index: 1;
	}
	.active {
		transform: scale(1.14);
		transition: all .2s ease-in 0s;
		z-index: 20;
		// display: none;
	}
	.card-box{
		height: 225rpx;
		width: 94%;
		background-color: #fff;
		position: absolute;
		top:689rpx;
		left:0;
		margin: 30rpx 24rpx;
		border-radius: 10rpx;
		.mode{
			// margin: 30rpx  25rpx 0 25rpx;
			padding: 35rpx 25rpx 45rpx 25rpx;
			background:rgba(255,255,255,1);
			border-radius:10rpx;
			margin-bottom: 10rpx;
			.mode-1{
				font-size:30rpx;
				font-weight:600;
				color:rgba(51,51,51,1);
			}
			.mode-2{
				font-size:28rpx;
				color:rgba(51,51,51,1);
				margin-top: 32rpx;
			}
			.progressbar{
				height: 50rpx;
				.progressbar-1{
					float: left;
					margin-top: 20rpx;
					width:360rpx;
					height:12rpx;
					background:rgba(248,246,246,1);
					border-radius:6rpx;
					
					.progressbar-2{
						height:12rpx;
						background:#FFCC5E;
						border-radius:6rpx;
					}
				}
				.text{
					margin-left: 20rpx;
					float: left;
					flex:1;
					font-size:24rpx;
					font-weight:400;
					color:rgba(102,102,102,1);
				}
				.sumit{
					float: right;
					padding: 15rpx 25rpx;
					background:rgba(255,204,94,1);
					border-radius:25rpx;
					font-size:24rpx;
					font-weight:400;
					color:rgba(34,34,34,1);
				}
			}
			
		}
	}
</style>