partnerApp/pages/institutional/partner.vue

<template>
	<view class="">
		<!-- 全局 loding -->
		<public-module></public-module>
		<!-- 头部 -->
		<view class="headers dis a-c j-start">
			<u-icon name="arrow-left" color="#333" size="38" @click="back"></u-icon>
			<view class="headers-activeTab">
				<u-tabs :list="tablist" :is-scroll="true" active-color="#333" inactive-color="#999" :current="current"
					:show-bar="false" @change="change" name="gradeName"
					style="background: transparent;height: 80rpx;z-index: -1;"></u-tabs>
			</view>
			<view class="right dis a-c">
				<image src="/static/home/customerService.png" mode=""></image>
				<text>客服</text>
			</view>
		</view>
		<view class="homeBackground"></view>
		<!-- 业绩 -->
		<view class="filterTime dis j-end a-c ">
			<view class=" dis a-c ">
				<text>时间筛选</text>
				<text>▼</text>
			</view>
		</view>
		<view class="performance dis a-c j-c ">
			共有 5 笔订单，保费54252.25元，佣金569.35元
		</view>
		<view class="body p-2" style="padding-top: 340rpx;">
			<view class="card mb-2" v-for="(item,index) in personlist" :key="index" @click="partnerDetail">
				<view class="card-title dis a-c j-s mb-2">
					<view class="dis a-c ">
						<view class="avatar">
							<image src="/static/image/my/wuxingb.png" mode=""></image>
						</view>
						<text class="name ml-1">{{item.userName}}</text>
					</view>
					<text>{{item.createTime}} &nbsp;加入</text>
				</view>
				<view class="card-data dis a-c j-s ">
					<view class="view dis f-c a-c ">
						<text>{{item.number}}</text>
						<text>{{item.gradeName}}</text>
					</view>
					<view class="view dis f-c a-c ">
						<text>{{numberFormat(item.premium || 0 )}}</text>
						<text>保费</text>
					</view>
					<view class="view dis f-c a-c ">
						<text>{{numberFormat(item.commission || 0 )}}</text>
						<text>我的佣金</text>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="ShowModal" mode="bottom" border-radius="15">
			<view class="popup-code">
				<text @click="ShowModalCodeFun(level)">合伙人</text>
				<text @click="ShowModalCodeworkFun">工作室</text>
			</view>
		</u-popup>
		<u-popup v-model="ShowModalCode" mode="bottom" border-radius="15">
			<view class="ShowModalCode-style ">
				<text>{{chineseNumbers[relativeLeavl]}}级合伙人招募码</text>
				<view class=" ShowModalCode-con">
					<view>扫码加入</view>
					<image :src="partnerImg" mode="widthFix" lazy-load style="width: 150px;"></image>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="ShowModalCodebusiness" mode="bottom" border-radius="15">
			<view>
				<text class=" ShowModalCode-business">工作室业务</text>
				<view>
					<radio-group class="uni-list" @change="styleChange">
						<view v-for="(item, index) in styles" :key="index" class="uni-list-item">
							<view class="uni-list-item__container">
								<view class="uni-list-item__content">
									<text class="uni-list-item__content-title">{{ item.text }}</text>
								</view>
								<view class="uni-list-item__extra">
									<radio :value="item.value" :checked="item.checked" />
								</view>
							</view>
							<view class="uni-list-item__notestext">{{ item.notestext }}</view>
						</view>
					</radio-group>
				</view>
				<view class="ShowModalCode-sumbit" @click="ShowModalCodeSumbit()">确定</view>
			</view>
		</u-popup>
		<u-popup v-model="ShowModalCode1" mode="bottom" border-radius="15">
			<view class="ShowModalCode-style ">
				<text>工作室招募码</text>
				<view class=" ShowModalCode-con">
					<view>扫码加入</view>
					<image :src="workImg" mode="widthFix" lazy-load style="width:150px;"></image>
				</view>
			</view>
		</u-popup>
		<u-popup mode="center" ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="取消" confirmText="确定" title=" " :content="dialogContent"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</u-popup>
	</view>
</template>
<script>
	import myDatePicker from '../components/date-picker.vue';
	import seach from '../components/seach.vue';
	import QR from "@/common/wxqrcode.js"

	import {
		mapState,
		mapMutations
	} from "vuex"
	// import uniPopup from 'x../../../components/';

	// import card from '../components/card.vue'
	export default {
		components: {
			myDatePicker,
			seach
		},
		computed: {
			...mapState(['userInfo', "userCheckInfo", ]),
		},
		data() {
			return {
				//tab选项
				tablist: [], //动态tab
				personlist: [],
				current: 0,
				dialogContent: '',
				ShowalertDialog: false,
				relativeLeavl: null,
				ShowModal: false,
				ShowModalCode: false,
				ShowModalCode1: false,
				ShowModalCodebusiness: false,
				chineseNumbers: ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'],
				teamTabIndex: 0,
				directLsit: [{
						partnerNumber: 1
					},
					{
						partnerNumber: 2
					}
				],
				source: 0,
				totalPages: 0,
				totalSize: 0,
				status: 'loadmore',
				pageRequest: { //查询的默认条件
					pageNum: 1,
					pageSize: 20,
					userName: ''
				},
				partnerImg: '',
				workImg: '',
				directLsitOne: {},
				directLsitTwo: {},
				directLsitThree: {},
				directLsitFour: {},
				userLevel: "",
				styles: [{
						value: '1',
						text: '渠道',
						notestext: '团队长加出单员模式，无分销模式，结费都在团队长处。',
						checked: true
					},
					{
						value: '2',
						notestext: '团队长加代理人模式，三级分销模式，结费方式为个人，有佣金。',
						text: '个代'
					}
				],
				deptSource: 1
			}
		},
		async onLoad(params) {
			this.queryData(params.grade)
			this.userLevel = this.userInfo.sysUser.level
		},
		methods: {
			//数据格式化
			numberFormat(value) {
				return (value).toLocaleString('en-US');
			},
			change(index) {
				this.current = index;
			},
			dialogClose() {
				this.$refs.alertDialog.close()
			},
			styleChange(e) {
				this.deptSource = e.detail.value
			},
			dialogConfirm() {
				this.ShowModalCode = true
				this.$refs.alertDialog.close()
				this.partnerImg = QR.createQrCodeImg(this.$base.h5BaseUrl + "/#/pages/index/applypartner?level=" + this
					.level + '&userId=' + this.userInfo.sysUser.userId, {
						size: parseInt(200) //二维码大小  
					})
			},
			ShowModalCodeFun(level, relativeLeavl) {
				// 绝对等级：level  相对等级：relativeLeavl
				this.level = level
				this.relativeLeavl = relativeLeavl
				// this.ShowalertDialog=true
				this.dialogContent = `是否招募${this.chineseNumbers[relativeLeavl]}级合伙人?`
				this.$refs.alertDialog.open()
			},
			ShowModalCodeSumbit() {
				this.ShowModalCode1 = true
				this.workImg = QR.createQrCodeImg(this.$base.h5BaseUrl + "/#/pages/index/applystudio?deptSource=" + this
					.deptSource + '&userId=' + this.userInfo.sysUser.userId, {
						size: parseInt(200) //二维码大小  
					})
			},
			ShowModalCodeworkFun() {
				this.ShowModalCodebusiness = true
				this.deptSource = 1
			},

			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});

			},
			backHome() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			partnerDetail() {
				uni.navigateTo({
					url: "/pages/institutional/partnerDetail"
				})
			},
			closeInstitution(item, level) {
				if (item.leaderIds.length > 0) {
					item.level = level
					uni.navigateTo({
						url: "/pages/institutional/institutionalTeam?key=" + encodeURIComponent(JSON.stringify(
							item))
					})
				}
			},
			//列表数据
			async queryData(grade) {
				let res = await this.$http.get('/newAppPartner/selectByGradeList?grade=' + grade, );
				if (res.code == '200') {
					this.tablist = res.data; //选项卡
					this.tablist.map(val => {
						val.gradeName = "我是" + val.gradeName;
						return val;
					})
					this.personlist = res.data[0].data; //页面赋值第一条数据
				}
			},

		}

	}
</script>

<style lang="scss" scoped>
	.headers {
		position: fixed;
		top: 0;
		left: 0;
		height: auto;
		width: 100%;
		z-index: 999999;
		padding: 30rpx;
		padding-top: 50px;

		text {
			font-size: 36rpx;
			font-weight: bold;
			color: #000;
		}

		.headers-activeTab {
			width: 80%;
		}

		.right {
			position: absolute;
			right: 30rpx;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 4rpx;
			}

			text {
				font-weight: 400;
				color: #000;
				font-size: 24rpx;
			}
		}
	}

	//头部背景
	.homeBackground {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 176rpx;
		background: linear-gradient(180deg, #D1EFFE 0%, #FFFFFF 100%);
		border-bottom: 1rpx solid #f2f2f2;
	}

	//时间筛选
	.filterTime {
		position: fixed;
		top: 176rpx;
		left: 0;
		width: 100%;
		z-index: 999;
		background: #fff;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		text:first-child {
			font-size: 26 rpx;
			color: #333;
		}

		text:last-child {
			font-size: 19rpx;
			color: #666;
			margin-left: 4rpx;
		}
	}

	//业绩
	.performance {
		position: fixed;
		top: 266rpx;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 60rpx;
		background: #EBF4FF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		font-size: 30rpx;
		color: #2B67EF;
	}

	.partner-head {
		background: #FFFFFF;
		color: #333333;
		font-size: 14px;

		i {
			margin-left: 2px;
			display: inline-block;
			width: 0;
			height: 0;
			border: 4px solid;
			border-color: #666666;
			border-bottom: 4px solid transparent;
			border-right: 4px solid transparent;
			border-left: 4px solid transparent;
		}
	}

	.sum-insurance {
		padding: 10px 0;

		view {
			text-align: center;
			width: 33.33%;
			border-right: 1px solid #EEEEEE;

			text {
				display: block;
			}

			text:first-child {
				font-weight: 600;
				font-size: 18px;
				color: #333333;
			}

			text:last-child {
				font-size: 10px;
				color: #999999;
			}
		}
	}

	//列表数据
	.card {
		background: #FFFFFF;
		border-radius: 10rpx;
		background-image: url("/static/card.png");
		background-size: 100% 100%;
		border-top: 1px solid;
		border-image: linear-gradient(270deg, rgba(45, 109, 255, 0), rgba(45, 109, 255, 1), rgba(45, 109, 255, 0)) 1 1;
		padding: 20rpx 30rpx 30rpx;

		.card-title {
			.avatar {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;

				image {
					width: 100%;
					height: 100%;
				}
			}

			>text {
				font-size: 24rpx;
				color: #666;
			}

			.name {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}
		}

		.card-data {
			.view {
				width: 33.33%;

				text:first-child {
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
				}

				text:last-child {
					font-size: 24rpx;
					color: #999;
				}
			}

			.view:nth-child(2) {
				border-left: 1rpx solid #eee;
				border-right: 1rpx solid #eee;
			}
		}

	}

	.popup-code {
		text {
			display: block;
			border-bottom: 1px solid #EEEEEE;
			height: 50px;
			line-height: 50px;
			text-align: center;
			font-size: 16px;
			color: #666666;
		}
	}

	.ShowModalCode-style {
		text:first-of-type {
			display: block;
			font-weight: 600;
			font-size: 16px;
			color: #333333;
			border: 1px solid #EEEEEE;
			padding: 15px;
			text-align: center;
		}
	}

	.popup-code {
		text {
			display: block;
			border-bottom: 1px solid #EEEEEE;
			height: 50px;
			line-height: 50px;
			text-align: center;
			font-size: 16px;
			color: #666666;
		}
	}

	.ShowModalCode-con {
		padding: 30px;
		text-align: center;

		image {
			margin: 0 auto;
			margin-top: 15px;
		}
	}
</style>