dingdong-master/pages/area-proxy/my-team.vue

<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="false" :isBackHome="true" :homePageUrl="'/pages/index/index'" v-if="backIndex">
			<block slot="backHomeText">首页</block>
			<block slot="content">我的团队</block>
		</cu-custom>
		<cu-custom :bgColor="'bg-main-color'" :isBack="true" v-else>
			<block slot="backText">返回</block>
			<block slot="content">我的团队</block>
		</cu-custom>
		<!-- 团队成员 -->
		<view>
			<view class="bg-white padding bottom-border" v-for="(member, index) in members">
				<view class="flex justify-between">
					<view class="flex justify-start align-center" style="width: 40%;">
						<view class="cu-avatar round"
							:style="'background-image:url(' + member.workerLogoUrl + ');min-width: 64rpx'"></view>
						<view class="flex-column-between">
							<view class="text-lg margin-left-sm">{{member.name}}</view>
							<view class="cu-tag bg-red radius light margin-left-sm margin-top-xs" v-if="member.workerStatus !== 0">未实名或绑卡</view>
						</view>
					</view>
					<view class="flex justify-end align-center">
						<view v-if="Boolean(member.showEditInput)" :key="member.workerId"
							class="flex justify-end align-center margin-lr-sm">
							<input class="radius-input" type="text" v-model="member.workerName"
								placeholder="姓名备注"></input>
							<view class="text-lg margin-left-sm">
								<text class="cuIcon-roundcheckfill text-main-color" :data-index="index"
									@click="editWorkerName"></text>
								<text class="cuIcon-roundclosefill margin-left-xs" :data-index="index"
									@click="hideEditInput"></text>
							</view>
						</view>
						<view v-else class="flex justify-end margin-lr-sm" :key="member.workerId">
							<text>{{member.workerName ? member.workerName : ''}}</text>
							<text class="text-lg" :data-index="index" @click="showEditInput"><text
									class="cuIcon-edit margin-left-xs"></text></text>
						</view>
						<view class="text-xxl text-main-color" :data-phone="member.phone" @click="makePhoneCall">
							<view class="cuIcon-phone"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<load-status-bar class="margin-bottom-with-bar" ref="loadStatusBar" @loadMore="loadTeamPage"></load-status-bar>
		<!-- 底部操作栏 -->
		<view class="cu-bar bg-white tabbar border shop fixed-bottom-bar">
			<view class="left-grid text-center" data-modal="takeRateSet" @click="showModalByRef('setTakeRateModal')">
				<view>设置扣点</view>
				<view v-if="curUserInfo.leaderTeamRate">(扣点：<text
						class="text-red">{{Number(curUserInfo.leaderTeamRate)*100}}%</text>)</view>
			</view>
			<!-- <view class="bg-main-color submit" @click="showModalByRef('inviteMasterModal')">邀请团队</view> -->
			<view class="bg-main-color submit" v-if="!certified">
				<button class="cu-btn bg-main-color" style="width: 100%; height: 100%;" @click="noticeCertifyCheckedRes">
					<text class="cuIcon-share"></text>
					<text>邀请师傅</text>
				</button>
			</view>
			<view class="bg-main-color submit" v-else>
				<button class="cu-btn bg-main-color" open-type="share" style="width: 100%; height: 100%;">
					<text class="cuIcon-share"></text>
					<text>邀请师傅</text>
				</button>
			</view>
		</view>

		<set-take-rate ref="setTakeRateModal" :leaderTeamRate="Number(curUserInfo.leaderTeamRate)*100"
			:leaderTeamMoney="curUserInfo.leaderTeamMoney" @confirm="applySetTakeRate"></set-take-rate>
		<invite-master ref="inviteMasterModal" :inviteMasterObj="inviteMasterObj" @confirm="inviteMaster"></invite-master>
		<confirm-modal ref="loginTipModal" :content="'当前无法加入团队，请先完成注册。如您已注册，请登录后重新点击此链接，完成加入团队。'" @confirm="goToPage('/pages/login/login?inviter=', inviteMasterObj, true)"></confirm-modal>
		<confirm-modal ref="certifyTipModal" :content="'请前往完成师傅实名及银行账户绑定以激活'" @confirm="goToPage('/pages/index/index?menuCode=myPage')"></confirm-modal>
		<!-- 账户及实名弹窗 -->
		<vertify-certify ref="vertifyCertify"></vertify-certify>
		<vertify-business-certify ref="vertifyBusinessCertify"></vertify-business-certify>
	</view>
</template>

<script>
	import setTakeRate from '@/pages/area-proxy/modal/set-take-rate.vue';
	import inviteMaster from '@/pages/area-proxy/modal/invite-master.vue';
	import loadStatusBar from '@/components/custom-bar/load-status-bar.vue';

	export default {
		components: {
			inviteMaster,
			setTakeRate,
			loadStatusBar
		},
		data() {
			return {
				backIndex: false,
				members: [],
				pageNum: 0,
				pageSize: 0,
				curUserInfo: {},
				inviteMasterObj: {},
				certified: false,
				certifyInfo: null,
				certifyCheckedMsg: ''
			}
		},
		onLoad(options) {
			if (options && options.inviteMasterObj) {
				// 点击邀请链接进入的页面
				this.beInvited2Team(JSON.parse(decodeURIComponent(options.inviteMasterObj)));
				this.backIndex = true;
			} else {
				this.loadData();
			}
		},
		onShow() {
			this.checkCertify();
		},
		onShareAppMessage() {
			return {
				title: '邀请你成为我的团队成员',
				path: '/pages/area-proxy/my-team?inviteMasterObj=' + encodeURIComponent(JSON.stringify(this.curUserInfo)),
				imageUrl: 'http://gqz.opsoul.com/sys/group-selfie.png'
			}
		},
		methods: {
			async checkCertify() {
				// 查询实名信息
				let certifyInfoRes = await this.$request.getWorkerCertify();
				this.certifyInfo = certifyInfoRes.data;
				this.certified = true;
				if (!this.certifyInfo || !this.certifyInfo.workerCertificationId) {
					this.certified = false;
				} else if (this.certifyInfo.status != 1) {
					this.certified = false;
					this.certifyCheckedMsg = '营业执照认证审核通过后才具备组建公司团队资质';
				} else if (!this.certifyInfo.businessLicenseNum || !this.certifyInfo.businessLicenseUrl) {
					this.certified = false;
				}
			},
			noticeCertifyCheckedRes() {
				if (!this.certifyInfo || !this.certifyInfo.workerCertificationId 
				|| !this.certifyInfo.businessLicenseNum || !this.certifyInfo.businessLicenseUrl) {
					this.$refs.vertifyBusinessCertify.showModal();
				} else {
					uni.showToast({
						icon: 'none',
						title: this.certifyCheckedMsg,
						duration: 2500
					})
				}
			},
			async beInvited2Team(inviteMasterObj) {
				this.loadBasicData();
				this.inviteMasterObj = inviteMasterObj;
				// let curUserInfo = await this.login();
				if (!this.curUserInfo) {
					// 提示前往注册
					this.showModalByRef('loginTipModal');
				} else {
					this.showModalByRef('inviteMasterModal');
				}
			},
			// async login() {
				// 更新缓存中的userInfo
				// await this.$request.storageExistUser();
				// 返回缓存中的userInfo
				// return this.$request.getCurUserInfo();
			// },
			goToPage(pageUrl, obj, ifEncode) {
				// console.log(JSON.stringify(obj))
				let params = ifEncode ? encodeURIComponent(JSON.stringify(obj)) : JSON.stringify(obj);
				uni.reLaunch({
					url: pageUrl + params
				})
			},
			loadBasicData() {
				this.pageNum = this.$globalData.initPageNum;
				this.pageSize = this.$globalData.initPageSize;
				this.curUserInfo = this.$request.getCurUserInfo();
			},
			async loadData() {
				// this.myTeamInfo = await this.$api.data('myTeamInfo');
				// this.members = this.myTeamInfo.members;
				this.loadBasicData();
				this.loadTeamPage();
			},
			async reloadData() {
				this.members = [];
				this.loadData();
			},
			async loadTeamPage(params = {}) {
				params.pageNum = this.pageNum;
				params.pageSize = this.pageSize;
				params.leaderId = this.curUserInfo.workerId;
				params.workerId = null;
				params.hasRegistered = true;
				this.$refs.loadStatusBar.showLoading();
				try {
					let res = await this.$request.getTeamPage(params);
					let rowsLength = res.rows.length;
					if (rowsLength > 0) {
						this.members = this.members.concat(res.rows);
						this.pageNum++;
						if (rowsLength === this.pageSize) {
							this.$refs.loadStatusBar.showLoadMore();
							return;
						}
					}
					this.$refs.loadStatusBar.showLoadOver();
				} catch (e) {
					console.error(e)
					this.$refs.loadStatusBar.showLoadErr();
				}
			},
			showEditInput(e) {
				let curIndex = e.currentTarget.dataset.index;
				this.$set(this.members, curIndex, Object.assign(this.members[curIndex], {
					showEditInput: true
				}))
			},
			hideEditInput(e) {
				let curIndex = e.currentTarget.dataset.index;
				this.$set(this.members, curIndex, Object.assign(this.members[curIndex], {
					showEditInput: false
				}))
			},
			async editWorkerName(e) {
				let curIndex = e.currentTarget.dataset.index;
				let memberInfo = this.members[curIndex];
				let res = await this.$request.updateWorkerTeam({
					workerTeamId: memberInfo.workerTeamId,
					workerName: memberInfo.workerName
				});
				if (res.code === 0) {
					uni.showToast({
						title: '修改成功',
						icon: 'success',
						mask: true
					});
					this.hideEditInput(e);
				}
			},
			makePhoneCall(e) {
				let phoneNum = e.currentTarget.dataset.phone;
				uni.makePhoneCall({
					phoneNumber: phoneNum
				})
			},
			showModalByRef(refName) {
				this.$refs[refName].showModal();
			},
			async applySetTakeRate(params) {
				let res = await this.$request.updateWorker(params);
				if (res.code === 0) {
					uni.showToast({
						title: '保存成功',
						icon: 'success',
						mask: true
					});
					this.reloadData();
				}
			},
			async inviteMaster(params) {
				let res = await this.$request.addTeam(params);
				if (res.code === 0) {
					uni.showToast({
						title: '加入成功',
						icon: 'success',
						mask: true
					})
					this.reloadData();
					if (this.curUserInfo.status !== 0) {
						// 提示前往绑卡和实名已生效
						this.showModalByRef('certifyTipModal');
					}
				} else if (res.code === 301) {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						mask: true
					})
				}
			}
		},
	}
</script>

<style scoped>
	.left-grid {
		width: 50%;
	}

	.bottom-border {
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}
</style>