apply-assistant-v3/root/bind/inviteList.vue

<template>
	<view class="p-bind-inedx g_w_all g_h_all g_bg_f_5 g_kuaishou">
		<!-- 搜索栏 -->
		<view class="g-components-panel-hr g_flex_row_center" style="padding-bottom: 6px">
			<view class="g_flex_column_center">
				<view class="doc-left"></view>
			</view>
			<view class="g_flex_column_center g_fs_14 g_c_9 g_mr_10 g_ml_10 g_pt_10 g_pb_10">{{ "以下发单号向您发出关注邀请" }}</view>
			<view class="g_flex_column_center">
				<view class="doc-right"></view>
			</view>
		</view>
		<view class="m-panel">
			<view class="center">
				<!-- 列表区 -->
				<view class="m-list">
					<view class="link" :class="isShow ? '' : ''">
						<view class="item g_flex_row_between g_pt_12 g_pb_12 g_pl_16 g_pr_16 g_bg_f" @click="goApply" style="border-bottom: 1rpx solid #eee" v-if="tabInfo.active == 1">
							<view class="g_flex_1 g_flex_row_start">
								<view class="g_flex_column_center g_pr_16 g_flex_none">
									<view class="g_w_48 g_h_48 g_radius_8 g_flex_c" style="background-color: #ffeceb">
										<i class="iconfont icon-xindeshenqing g_fs_22" style="color: #ff7b7b; font-size: 22px"></i>
									</view>
								</view>
								<view class="g_flex_column_center g_flex_1">
									<view class="g_ell_1 g_fs_18 g_c_3">{{ tabInfo.active == 0 ? "新的关注" : "新的粉丝" }}</view>
									<view
										class="g_ell_1 g_fs_14 g_c_9 g_mt_4"
										v-if="tabInfo.active == 0"
										:style="{
											color: Number(waitNum_downs) == 0 ? '#fff' : '#999',
										}"
										>您有{{ waitNum_downs }}条信息等待对方通过</view
									>
									<view
										class="g_ell_1 g_fs_14 g_c_9 g_mt_4"
										v-else
										:style="{
											color: Number(waitNum_downs) == 0 ? '#fff' : '#999',
										}"
										>您有{{ waitNum_downs }}条新的粉丝申请</view
									>
								</view>
							</view>
							<view class="g_flex_none g_h_all g_flex_column_center g_pl_20 g_h_48" v-if="Number(waitNum_ups) > 0">
								<view class="tip g_w_16 g_h_16 g_bg_f0a g_c_f g_flex_c g_fs_14 g_radius_50">{{ waitNum_ups }}</view>
							</view>
						</view>
						<g-loading :loading="loading" v-if="loading && speed == -1" />
						<view v-if="!loading && speed == 0" class="g_pt_130">
							<g-empty :text="isLogin ? '暂无数据' : '请登录'" />
						</view>
						<scroll-view v-if="speed > 0" :scroll-y="true" @scrolltolower="reachBottom">
							<view class="item g_flex_row_between g_pl_16 g_pr_16 g_pb_6 g_pt_6 g_bg_f" hover-class="g_bg_e" v-for="(item, index) in query.list" :key="index" @click="goMain(item)" :class="index == 0 ? 'g_pt_12' : ''" :style="{ 'border-bottom': index == query.list.length - 1 ? '1rpx solid #fff' : '1rpx solid #eee' }">
								<view class="g_flex_none g_flex_row_start">
									<view class="g_flex_column_center g_pr_16 g_flex_none" style="position: relative">
										<g-panel-image :url="item.logo" size="96" radius="6" v-if="item.logo" />
										<g-panel-image size="96" radius="6" v-if="!item.logo" />

										<view v-if="item.supplierAccount == 1" style="position: absolute; left: 0; width: 48px; height: 48px" class="g_flex_row_end">
											<view class="g_flex_c" style="position: absolute; overflow: hidden; width: 20px; height: 10px; right: -2px; top: 0px">
												<image :src="cdnBaseImg + 'fadanhao.svg'" mode="widthFix" style="width: 16px; height: 13px"></image>
											</view>
										</view>
									</view>
								</view>

								<view class="g_flex_1 g_h_all g_flex_column_center g_h_60 _right">
									<view class="g_flex_row_between">
										<view class="g_flex_column_center g_flex_1 g_mr_12">
											<view class="g_flex_row_start flex_center">
												<view class="g_ell_1 g_fs_18 g_c_0 g_fw_600 g_flex_none" style="max-width: 460rpx">{{ item.agencyName }} </view>
												<view class="g_ml_6 g_text_c g_flex_1">
													<view class="g_w_36 g_h_18 g_fs_12 g_redius_4" style="background-color: #f2f7ff; color: #1677ff" v-if="item.teamType == 2">团队</view>
													<view class="g_w_36 g_h_18 g_fs_12 g_redius_4" style="background-color: #fff5f5; color: #ff4d4f" v-if="item.teamType == 1">个人</view>
												</view>
											</view>
											<view class="g_ell_1 g_fs_14 g_c_9 g_mt_4">
												<view class="g_flex_row_start">
													<view class="g_flex_row_start">
														<view> 职位 </view>
														<view class="g_mr_8 g_ml_5 g_c_3">
															{{ item.jobNum ? item.jobNum : "0" }}
														</view>
													</view>
													<view class="g_flex_row_start">
														<view> 今日更新 </view>
														<view class="g_mr_8 g_ml_5 g_c_3">
															{{ item.jobUpdateNum ? item.jobUpdateNum : "0" }}
														</view>
													</view>
													<view class="g_flex_row_start">
														<view> 粉丝 </view>
														<view class="g_mr_8 g_ml_5 g_c_3">
															{{ item.downNum ? item.downNum : "0" }}
														</view>
													</view>
												</view>
											</view>
										</view>

										<view class="g_flex_column_center g_mb_12">
											<view>
												<view class="g_radius_14 g_h_28 g_border_main g_fs_14 g_c_main g_pr_8 g_pl_8 g_flex_row_center flex_center" @click.stop="goApplyForm(item, index)" hover-class="g_bg_f_5" hover-stop-propagation>
													<i class="iconfont icon-tianjia g_fsi_12 g_mr_6"></i>
													关注
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<!-- <view v-if="isShow && speed > 0" class="g_bg_f_5">
					<g-panel-hr :str="query.isFinish >= 0 && query.isFinish < query.size ? speed + '个发单号' : '加载中'" />
				</view> -->
				<!-- #ifdef H5 -->
				<view style="height: 50px"></view>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	onReady() {
		this.G.setNavStyle();
	},
	onShareAppMessage() {
		return this.G.shareFun();
	},
	data() {
		return {
			cdnBaseImg: this.G.store().cdnBaseImg,
			isLogin: null,
			isShow: false,
			loading: true,
			speed: -1,
			query: {
				page: 1,
				size: 50,
				list: [],
				isFinish: -1,
			},
			keyword: "",
			scrollTop: 0,
			domHeight: 0,
			waitNum_downs: 0,
			waitNum_ups: 0,

			cardTab: [
				{
					icon: "t-icon-xunzhaoshangyou",
					title: "搜索发单号",
					remark: "关注更多单子的更新",
				},
				{
					icon: "t-icon-fazhanxiayou",
					title: "发展代理",
					remark: "让更多代理关注我",
				},
			],
			tabInfo: {
				list: [
					{
						name: "关注(0)",
						num: 0,
						tip: 0,
						cate_count: 0,
					},
					{
						name: "粉丝(0)",
						num: 0,
						tip: 1,
						cate_count: 0,
					},
				],
				active: 0,
			},
			tabFansInfo: {
				list: [
					{
						name: "新的代理",
					},
					{
						name: "全部粉丝",
					},
				],
				active: 0,
			},
		};
	},
	onLoad(options) {
		let that = this;
		that.tabInfo.active = options.active;
		if (that.tabInfo.active == 0) {
			uni.setNavigationBarTitle({
				title: "关注邀请",
			});
		} else {
			if (that.tabInfo.active == 1) {
				uni.setNavigationBarTitle({
					title: "我的粉丝",
				});
			}
		}
		const query = uni.createSelectorQuery().in(this);
		query
			.select(".m-top")
			.boundingClientRect((data) => {
				that.domHeight = data.height + 34;
			})
			.exec();
	},
	onShow() {
		let that = this;
		that.isLogin = uni.getStorageSync("apply-token");
		uni.setStorageSync("watch_invite", 1);
		if (!that.isLogin) {
			that.waitNum_downs = 0;
			that.waitNum_ups = 0;
			that.tabInfo.list[0].name = "关注(0)";
			that.tabInfo.list[1].name = "粉丝(0)";
			that.isShow = true;
			that.speed = 0;
			that.loading = false;
			that.query.list = [];
		} else {
			that.query.page = 1;
			that.getWaitNum();
			that.getNum();
			that.getList();
			that.getPoint();
		}
	},
	onReachBottom() {
		let that = this;
		if (that.query.isFinish == -1 || that.query.isFinish == that.query.size) {
			that.query.page++;
			that.getList("concat");
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	methods: {
		handleUpdateFensTab(e) {},
		reachBottom() {
      console.log('123123123123');
			let that = this;
			if (that.query.isFinish == -1 || that.query.isFinish == that.query.size) {
				that.query.page++;
				that.getList("concat");
			}
		},
		getPoint() {
			let that = this;
			that.G.Get(
				that.api.bind_getWaitNum + "/2",
				{
					type: 2,
				},
				(res) => {
					that.tabInfo.list[1].cate_count = res.unread;
				}
			);
		},
		getWaitNum() {
			let that = this;
			that.G.Get(
				that.api.bind_getWaitNum + "/" + (that.tabInfo.active * 1 + 1),
				{
					type: that.tabInfo.active * 1 + 1,
				},
				(res) => {
					that.waitNum_downs = res.total;
					that.waitNum_ups = res.unread;
					console.log("获取指定数量：", res);
					that.$forceUpdate();
				}
			);
		},
		getNum() {
			let that = this;
			that.G.Post(
				that.api.bind_getListNum,
				{
					keys: that.keyword,
				},
				(res) => {
					that.tabInfo.list[0].name = "关注(" + res.ups + ")";
					that.tabInfo.list[1].name = "粉丝(" + res.downs + ")";
				}
			);
		},
		getList($type = "init") {
			let that = this;
			that.isShow = false;
			that.G.Get(
				that.api.user_getInviteList,
				{
					pageSize: 15,
					pageNum: that.query.page,
				},

				(res) => {
					that.isShow = true;
					that.speed = res.length;
					if (that.speed == 0) {
						that.loading = false;
					} else {
						that.loading = true;
					}
					if ($type == "init") {
						that.query.list = [];
						that.query.list = res;
					} else {
						that.query.list = that.query.list.concat(res);
					}
				}
			);
		},
		getSearch(e) {
			if (e == "string") {
				this.keyword = e;
			}
			this.G.isLogin();
			if (this.G.isLogin()) {
				this.speed = -1;
				this.query.page = 1;
				this.getList();
			}
		},

		handleUpdateTab(e) {
			this.G.isLogin();
			if (this.G.isLogin()) {
				this.tabInfo.active = e;
				this.speed = -1;
				this.query.page = 1;
				this.getList();
				this.getWaitNum();
				this.getNum();
				this.getPoint();
			}
		},
		goMain($item) {
			let that = this;
			this.G.isLogin();
			console.log("$item", $item);
			// return
			if (this.G.isLogin()) {
				if ($item.supplierAccount == 1) {
					let params = {
						id: $item.id,
						type: 1,
						bindid: $item.id,
						isShowMore: false,
						isShowJob: false,
					};

					if (that.tabInfo.active == 0) {
						// 关注
						params.isShowMore = true;
						params.isShowJob = true;
					} else {
						// 粉丝
						if ($item.recordStatus == 1) {
							// 已关注
							params.isShowMore = true;
							params.isShowJob = false;
						} else {
							// 相互关注
							params.isShowMore = true;
							params.isShowJob = true;
						}
					}

					uni.navigateTo({
						url: "/root/detail/userShare?" + that.G.objToStr(params),
					});
				} else {
					// 直接前往操作页
					uni.navigateTo({
						url: "/root/bind/more?delta=1&id=" + $item.agencyId + "&himSee=" + $item.himSee + "&lookHim=" + $item.lookHim + "&type=" + 2 + "&hid=" + $item.id,
					});
				}
			}
		},
		goApply() {
			let that = this,
				str = "";
			this.G.isLogin();
			if (this.G.isLogin()) {
				uni.navigateTo({
					url: "/root/bind/applyList?active=2",
				});
			}
		},
		goSearch($item, $index) {
			let that = this;
			that.G.isLogin();
			if (that.G.isLogin()) {
				uni.navigateTo({
					url: "/root/bind/search?active=" + $index,
				});
			}
		},
		goApplyForm($item, $index) {
			let that = this;
			console.log("$item", $item);
			// return
			that.G.Post(
				that.api.user_updateInviteId,
				{
					agencyIds: $item.id,
				},
				(res) => {
					console.log(res);
					uni.showToast({
						title: "关注成功",
						icon: "success",
					});
					that.getList();
				}
			);

			// if ($item.recordStatus == 5 || $item.recordStatus == 6) {
			// } else {
			// 	uni.navigateTo({
			// 		url: "/root/bind/applyForm?code=" + $item.agencyId + "&form=1",
			// 	});
			// }
		},
	},
};
</script>

<style lang="scss">
.p-bind-inedx {
	.m-card {
		padding-left: 10px;
		padding-right: 10px;

		.item {
			width: calc(50% - 5px);
		}
	}

	.showdoc {
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 0 6px rgba(0, 0, 0, 0.02);
	}

	.suffix {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1;
		border-top-right-radius: 110rpx;
		border-bottom-right-radius: 110rpx;
	}

	.tab-fixed {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 44px;
		background-color: #fff;
		z-index: 1;
	}

	.m-search {
		// .u-icon-wrap{
		// 	position: absolute;
		// 	left: 190rpx;
		// }
	}

	.m-search-active {
		.u-icon-wrap {
			position: inherit;
			left: 0rpx;
		}
	}
}

.g-components-panel-hr {
	padding-bottom: 16px;
	.doc-left {
		width: 43px;
		height: 2px;
		border-top: 1px solid;
		border-image: linear-gradient(270deg, rgba(255, 255, 255, 0.2), #cccccc) 1 1;
		transform: rotate(180deg);
	}
	.doc-right {
		width: 43px;
		height: 2px;
		border-top: 1px solid;
		border-image: linear-gradient(270deg, rgba(255, 255, 255, 0.2), #cccccc) 1 1;
	}
}
</style>