增加设为vip功能

pages/share-team/share-team.vue

 <template>
 	<view class="cteamStyle" :style="{'height':contentHeight}">
 		<view style="width: 100%;height: 100%;">
-			<u-tabs :list="list" name="GradeName" :is-scroll="false" :current="current" @change="change" :active-color='mainColor' ></u-tabs>
+			<u-tabs :list="list" name="GradeName" :is-scroll="false" :current="current" @change="change" :active-color='mainColor'></u-tabs>
 			<view style="width:100%;background:#fff;padding:20px 20px 0 20px;">
 				<view style="display:flex;align-items: center;">
 					<u-search :show-action="true" style="width:80%" v-model="msg2.Name" placeholder="请输入用户昵称" action-text="搜索" @custom="init2(1)"
@@ -15,32 +15,34 @@
 				<view class="cteam_Search">
 					<view class="ctem_item" @click="getSort(0,0)" :style="{ color: msg2.SortNum == 0 || msg2.SortNum == 1 ? mainColor : '#222'}">
 						<text>时间</text>
-						<u-icon v-if="msg2.SortNum==0||msg2.SortNum==1" :name="msg2.SortNum == 0 ? 'descending' : 'ascending'" size="36" :color="msg2.SortNum == 0 || msg2.SortNum == 1 ? mainColor : '#222'"></u-icon>
+						<u-icon v-if="msg2.SortNum==0||msg2.SortNum==1" :name="msg2.SortNum == 0 ? 'descending' : 'ascending'" size="36"
+						 :color="msg2.SortNum == 0 || msg2.SortNum == 1 ? mainColor : '#222'"></u-icon>
 					</view>
 					<view @click="getSort(2,1)" class="ctem_item" :style="{ color: msg2.SortNum == 2 || msg2.SortNum == 3 ? mainColor : '#222'}">
 						<text>客户人数</text>
-						<u-icon v-if="msg2.SortNum==2||msg2.SortNum==3" :name="msg2.SortNum == 2 ? 'descending' : 'ascending'" size="36" :color="msg2.SortNum == 2 || msg2.SortNum == 3 ? mainColor : '#222'"></u-icon>
+						<u-icon v-if="msg2.SortNum==2||msg2.SortNum==3" :name="msg2.SortNum == 2 ? 'descending' : 'ascending'" size="36"
+						 :color="msg2.SortNum == 2 || msg2.SortNum == 3 ? mainColor : '#222'"></u-icon>
 					</view>
 				</view>
 			</view>
 			<u-empty v-if="g.length==0" text="暂无数据" mode="data"></u-empty>
 			<template v-if="g.length > 0">
-				<view  
-				  style="
+				<view style="
 						height: calc(100vh - 160px);
 						width: calc(100vw);
 						overflow: hidden;
 						margin-top:10px;
 						
 				  ">
-					<scroll-view
-						:scroll-y="true"
-						:enable-back-to-top="true"
-						:enable-flex="true"
-						@scrolltolower="lower"
-						:style="{ height: '100%' }">
-						<view style="display: flex;flex-direction: column;align-items: center;">
-							<view v-for="(item, index) in g" :key="index" class="listbox" @click="goUrl(item.UserId)">
+					<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" :style="{ height: '100%' }">
+						<!-- <view style="display: flex;flex-direction: column;align-items: center;"> -->
+						<view>
+							<u-swipe-action :show="item.show" :disabled="item.disabled" :index="index" v-for="(item, index) in g" :key="item.id" @click="click" @open="open"
+							 :options="options">
+								<view class="share_Item u-border-bottom">
+									<!-- <u-avatar :src="item.Photo" size="64"></u-avatar> -->
+									<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
+									<view class="title-wrap" style="width:100%;">
 										<view class="box_top">
 											<u-avatar :src="item.Photo" size="64"></u-avatar>
 											<view class="box_r">
@@ -58,17 +60,12 @@
 											<Text style='color: #878787;font-size: 13px;'> <text style='color: #FF3F47;'> {{item.Income}}</text> 元</Text>
 											<Text style='color: #878787;font-size: 13px;'>{{item.OrderNum}}个订单</Text>
 										</view>
-								
 									</view>
 								</view>
-						<u-loadmore
-						  :status="status"
-						  :load-text="loadText"
-						  :font-size="24"
-						  :margin-top="20"
-						  :margin-bottom="20"
-						  bg-color="#f3f4f6"
-						/>
+							</u-swipe-action>
+						</view>
+						<!-- </view> -->
+						<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20" bg-color="#f3f4f6" />
 					</scroll-view>
 
 				</view>
@@ -84,67 +81,78 @@
 		data() {
 			return {
 				pageTitle: "我的团队",
-				contentHeight:0,
-				mainColor:'',
-				secondary:'',
-				current:0,
-				g:[],
-				list:[
-					{GradeName: '一级分销'},
-					{GradeName: '二级分销'},
-					{GradeName: '三级分销'},
+				contentHeight: 0,
+				mainColor: '',
+				secondary: '',
+				current: 0,
+				g: [],
+				list: [{
+						GradeName: '一级分销'
+					},
+					{
+						GradeName: '二级分销'
+					},
+					{
+						GradeName: '三级分销'
+					},
 				],
-				msg:{
+				msg: {
 					pageIndex: 1,
-					pageSize:10,
-					GradeId:1
+					pageSize: 10,
+					GradeId: 1
 				},
-				msg2:{
+				msg2: {
 					pageIndex: 1,
-					pageSize:10,
-					FXGradeId:0,
-					Name:'', //昵称
-					SortNum:0 ,// 0时间降序 1时间升序 2人数倒序 3人数升序
-					IsDirect:0 //1直属下线 0不是
+					pageSize: 10,
+					FXGradeId: 0,
+					Name: '', //昵称
+					SortNum: 0, // 0时间降序 1时间升序 2人数倒序 3人数升序
+					IsDirect: 0 //1直属下线 0不是
 				},
-				page_count:1,
+				page_count: 1,
 				status: "loadmore",
 				loadText: {
 					loadmore: "轻轻上拉，加载更多",
 					loading: "努力加载中",
 					nomore: "没有更多了",
 				},
-				IsEnableFXGrade:0,
-				isCheckIn:false, //是否选中
-			
+				IsEnableFXGrade: 0,
+				isCheckIn: false, //是否选中
+				options: [{
+					text: '设为VIP',
+					style: {
+						backgroundColor: '#007aff'
+					}
+				}]
 			}
 		},
 
-		created(){
-			 this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
+		created() {
+			this.contentHeight = this.$utils.calcContentHeight(-40) + 'px';
 			this.mainColor = this.$uiConfig.mainColor;
 			this.secondary = this.$uiConfig.secondary;
 
 		},
-		onLoad(option){
-			if(option && option.IsEnableFXGrade){
+		onLoad(option) {
+			if (option && option.IsEnableFXGrade) {
 				this.IsEnableFXGrade = option.IsEnableFXGrade;
 			}
-			if(this.IsEnableFXGrade==1){
-				this.list=[{GradeName: '普通会员'},]//设置默认值
+			if (this.IsEnableFXGrade == 1) {
+				this.list = [{
+					GradeName: '普通会员'
+				}, ] //设置默认值
 				this.getUserMyTeamTitelListForFX()
 
-			}else{
+			} else {
 				this.init()
 			}
 
 		},
 		mounted() {
 			let currentPages = getCurrentPages();
-			 let u = "/" + currentPages[currentPages.length-1].route;
-			 let pages = wx.getStorageSync("basedata")
-			   ? wx.getStorageSync("basedata").bar_title
-			   : [];
+			let u = "/" + currentPages[currentPages.length - 1].route;
+			let pages = wx.getStorageSync("basedata") ?
+				wx.getStorageSync("basedata").bar_title : [];
 			pages.forEach((x) => {
 				if (x.value == u) {
 					this.pageTitle = x.new_name ? x.new_name : x.name;
@@ -155,34 +163,36 @@
 			});
 		},
 		methods: {
-			getDirest(){
-				if(this.isCheckIn){
-					this.msg2.IsDirect=1;
-				}else{
-					this.msg2.IsDirect=0;
+			open() {
+
+			},
+			getDirest() {
+				if (this.isCheckIn) {
+					this.msg2.IsDirect = 1;
+				} else {
+					this.msg2.IsDirect = 0;
 				}
 				this.init2(1);
 			},
-			getUserMyTeamTitelListForFX(){
+			getUserMyTeamTitelListForFX() {
 				uni.showLoading({
 					title: '加载中'
 				});
-				this.request2(
-					{
+				this.request2({
 						url: '/api/AppletUser/GerUserMyTeamTitelListForFX',
 						data: {}
 					},
 
 					(res) => {
 						uni.hideLoading();
-					this.list=res.data;
+						this.list = res.data;
 						this.msg2.FXGradeId = this.list[0].Id;
 						this.init2()
 					}
 				);
 			},
 			//排序
-			getSort(sort,t){
+			getSort(sort, t) {
 				if (t == 0) {
 					if (this.msg2.SortNum == 0) {
 						this.msg2.SortNum = 1; //升序
@@ -199,21 +209,28 @@
 				}
 				this.init2(1);
 			},
-			init2(num){
-				if(num==1){
-					this.g=[];
+			init2(num) {
+				if (num == 1) {
+					this.g = [];
 				}
 				uni.showLoading({
 					title: '加载中'
 				});
-				this.request2(
-					{
+				this.request2({
 						url: '/api/AppletUser/GetUserMyTeamPageListForFX',
 						data: this.msg2
 					},
 					(res) => {
 						uni.hideLoading();
 						this.g = this.g.concat(res.data.pageData);
+						this.g.forEach(x=>{
+							x.show=false;
+							if(this.list[this.current].Id!=1){
+								x.disabled=true;
+							}else{
+								x.disabled=false;
+							}
+						})
 						this.page_count = res.data.pageCount;
 						if (this.page_count == 1) {
 							this.status = "nomore";
@@ -221,13 +238,12 @@
 					}
 				);
 			},
-			init(){
+			init() {
 
 				uni.showLoading({
 					title: '加载中'
 				});
-				this.request2(
-					{
+				this.request2({
 						url: '/api/AppletUser/GetUserMyTeamPageList',
 						data: this.msg
 					},
@@ -243,23 +259,22 @@
 					}
 				);
 			},
-			change(index){
-				this.current = index
-				if(this.IsEnableFXGrade==1){
+			change(index) {
+				this.current = index;
+				if (this.IsEnableFXGrade == 1) {
 					this.msg2.FXGradeId = this.list[index].Id;
-					this.msg2.pageIndex=1;
-					this.g=[]
+					this.msg2.pageIndex = 1;
+					this.g = []
 					this.init2()
-				}else{
-					this.msg.GradeId = index+1;
-					this.msg.pageIndex=1;
-					this.g=[]
+				} else {
+					this.msg.GradeId = index + 1;
+					this.msg.pageIndex = 1;
+					this.g = []
 					this.init()
 				}
-				
 			},
 			lower(e) {
-				if(this.IsEnableFXGrade==1){
+				if (this.IsEnableFXGrade == 1) {
 					if (this.msg2.pageIndex < this.page_count) {
 						this.msg2.pageIndex++;
 						this.status = "loading";
@@ -267,7 +282,7 @@
 					} else {
 						this.status = "nomore";
 					}
-				}else{
+				} else {
 					if (this.msg.pageIndex < this.page_count) {
 						this.msg.pageIndex++;
 						this.status = "loading";
@@ -278,22 +293,55 @@
 				}
 			},
 			//跳转详情
-			goUrl(UserId){
-				console.log('点击');
+			goUrl(UserId) {
 				uni.navigateTo({
-					url: '/pages/share-team/share-detail?UserId='+UserId
+					url: '/pages/share-team/share-detail?UserId=' + UserId
 				});
+			},
+			click(index) {
+				let msg={
+					NewUserId:this.g[index].UserId
+				}
+				this.request2({
+						url: '/api/AppletUser/SetUserToVip',
+						data: msg
+					},
+				
+					(res) => {
+						this.request2({
+								url: '/api/AppletUser/GerUserMyTeamTitelListForFX',
+								data: {}
+							},
+						
+							(res) => {
+								this.list = res.data;
+							}
+						);
+						this.init2(1)
+					}
+				);
+				this.g[index].show = false;
+			},
+			open(index) {
+				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
+				// 原本为'false'，再次设置为'false'会无效
+				this.g[index].show = true;
+				this.g.map((val, idx) => {
+					if(index != idx) this.g[idx].show = false;
+				})
+				this.$forceUpdate();
 			}
 		}
 	}
 </script>
 
 <style>
-.cteamStyle{
+	.cteamStyle {
 		background: #f3f4f6;
 
-}
-.cteamStyle .loading{
+	}
+
+	.cteamStyle .loading {
 		width: 200rpx;
 		height: 200rpx;
 		background: #000000;
@@ -305,11 +353,12 @@
 		justify-content: center;
 		position: fixed;
 		left: 50%;
-		top:30%;
+		top: 30%;
 		margin-left: -100rpx;
 		z-index: 999;
 	}
-	.cteamStyle .listbox{
+
+	.cteamStyle .listbox {
 		width: 100%;
 		background: #fff;
 		padding: 0 15px;
@@ -317,34 +366,38 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		margin-bottom:10px;
+		margin-bottom: 10px;
 	}
-	.cteamStyle .box_top{
-		width:100% ;
+
+	.cteamStyle .box_top {
+		width: 100%;
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
-		padding: 10px 0 ;
+		padding: 10px 0;
 		/* border-bottom: 1px solid #f5f5f5; */
 
 	}
-	.cteamStyle .box_r{
-		width: calc(100vw - 25px - 32px - 20px);
+
+	.cteamStyle .box_r {
+		width: calc(100vw - 25px - 32px - 10px);
 		height: 32px;
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
 	}
-	.cteamStyle .box_r .l_name{
+
+	.cteamStyle .box_r .l_name {
 		overflow: hidden;
 		text-overflow: ellipsis;
 		display: -webkit-box;
 		-webkit-line-clamp: 1;
 		-webkit-box-orient: vertical;
-		font-size:13px;
+		font-size: 13px;
 	}
-	.cteamStyle .box_b{
+
+	.cteamStyle .box_b {
 		width: 100%;
 		height: 40px;
 		padding: 0 10px;
@@ -356,11 +409,13 @@
 		border-radius: 4px;
 		margin: 10px 0;
 	}
-	.cteamStyle .cteam_Search{
+
+	.cteamStyle .cteam_Search {
 		display: flex;
-		margin-top:10px;
+		margin-top: 10px;
 	}
-	.cteamStyle .ctem_item{
+
+	.cteamStyle .ctem_item {
 		height: 40px;
 		line-height: 40px;
 		flex: 1;
@@ -368,4 +423,9 @@
 		display: flex;
 		justify-content: center;
 	}
+
+	.cteamStyle .share_Item {
+		display: flex;
+		padding:20rpx;
+	}
 </style>