apply-assistant-v3/pages/home/index.vue

<template>
	<div class="p-home-inedx g_w_all g_bg_f_5 g_kuaishou" :class="computeCode == -1 ? 'g_flex_column_center' : ''">
		<div v-show="computeCode == -1" class="g_flex_column_center">
			<g-loading marginBottom="g_mb_130" />
		</div>

		<div v-show="computeCode > -1">
			<!-- 列表区 -->
			<!-- <div @click="showPop = true"> 1123 </div> -->
			<!-- `calc(${navInfo.windowHeight}px - ${navInfo.navigationBarHeight + navInfo.statusBarHeight}px)` -->
			<scroll-view class="m-list" id="listBox" :style="{ height: `calc(${navInfo.windowHeight}px)` }" :scroll-y="true" @scrolltolower="reachBottom">
				<div class="" hover-class="none" hover-stop-propagation="false">
					<div class="g_position_rela">
						<!-- 搜索区 -->
						<div class="m-search g_p_10 g_pt_8 g_position_rela bg_shawdoc" style="" id="searchInputBox">
							<u-search height="80" v-model="keyword" class="g_flex_1" placeholder="搜索职位名称" bg-color="#fff" :show-action="false" placeholder-class="g_c_c" search-icon-color="#999999" :maxlength="20"></u-search>
							<div class="g_w_all g_h_40 g_position_abso" style="left: 0; z-index: 9999; top: 0; height: 100%" @click.stop="goSearch"></div>
						</div>
					</div>
					<!-- #ifdef APP-PLUS || H5 || MP-TOUTIAO || MP-KUAISHOU -->
					<div>
						<div class="g_mb_10 g_bg_f_5 sticky g_flex_row_between">
							<div class="g_flex_1">
								<u-tabs bg-color="transparent" from="index" :list="tabInfo.list" :is-scroll="true" :current="tabInfo.active" active-color="#00b666" bar-width="64" bar-height="6" @change="handleUpdateTab" font-size="34" duration="0.05" height="76"></u-tabs>
							</div>
							<div class="g_flex_none g_flex_column_center g_fs_17 g_pr_26 g_pb_4" style="color: #576b95; text-decoration: underline" @click="goPage('/root/home/ignore')">忽略</div>
						</div>
						<g-list-job from="home" @uploadList="getList" bg="#f5f5f5" class="g_h_all" :list="query.list" :active="tabInfo.active" @shareJob="shareJob" :loading="loading" :speed="speed" :query="query" :isShowLoginBtn="isLogin ? false : true" :emptyText="isLogin ? (tabInfo.active == 0 || tabInfo.active == 2 ? '嘿，这里还没有数据呢' : '您还未收藏职位，快去试试收藏职位吧') : '您还有没有登录，请登录后查看职位'" :emptySubText="isLogin ? (tabInfo.active == 0 ? '关注发单号，我们会第一时间通知您新的动态' : tabInfo.active == 2 ? '快去试试发布职位吧' : '') : ''" />
					</div>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<div>
						<div class="g_mb_10 g_bg_f_5 sticky g_flex_row_between">
							<div class="g_flex_1">
								<u-tabs bg-color="transparent" from="index" :list="tabInfo.list" :is-scroll="true" :current="tabInfo.active" active-color="#00b666" bar-width="64" bar-height="6" @change="handleUpdateTab" font-size="34" duration="0.05" height="76"></u-tabs>
							</div>
							<div class="g_flex_none g_flex_column_center g_fs_17 g_pr_26 g_pb_4" style="color: #576b95; text-decoration: underline" @click="goPage('/root/home/ignore')">忽略</div>
						</div>
						<g-list-job from="home" @uploadList="getList" bg="#f5f5f5" class="g_h_all" :list="query.list" :active="tabInfo.active" @shareJob="shareJob" :loading="loading" :speed="speed" :query="query" :isShowLoginBtn="isLogin ? false : true" :emptyText="isLogin ? (tabInfo.active == 0 || tabInfo.active == 2 ? '嘿，这里还没有数据呢' : '您还未收藏职位，快去试试收藏职位吧') : '您还有没有登录，请登录后查看职位'" :emptySubText="isLogin ? (tabInfo.active == 0 ? '关注发单号，我们会第一时间通知您新的动态' : tabInfo.active == 2 ? '快去试试发布职位吧' : '') : ''" />
					</div>

					<!-- #endif -->
				</div>
			</scroll-view>
			<div hover-class="none" style="position: fixed; right: 10px; bottom: 54px" hover-stop-propagation="false" @click="toRecord" v-if="isLogin">
				<g-panel-image :url="cdnBaseImg + 'quick_application.svg'" size="136" />
			</div>
			<u-popup v-model="showPop" mode="bottom" uZindex="9999" border-radius="12" :closeable="true" :mask-close-able="true">
				<div class="g_fs_18 g_text_c g_pt_32">
					<div class="g_bg_f g_fw_600 g_pb_24">以下发单号向你发出关注邀请</div>
					<scroll-view class="g_flex_row_between" style="height: 500px" :scroll-y="true" @scrolltolower="onScrollToLower">
						<div class="g_flex_row_start g_pl_12">
							<!-- :key="item.id" -->
							<div v-for="(item, index) in attentionList" :class="item.checked ? 'g_bg_e7' : 'g_bg_f_5'" class="g_h_140 g_mb_12 g_mr_12 g_radius_6 g_position_rela" style="width: calc(33% - 12px)" :key="index" @click="checkChange(item)">
								<u-checkbox shape="circle" class="g_position_abso g_w_18" style="right: 8px; top: 8px" active-color="#00B666" v-model="item.checked"></u-checkbox>
								<div class="logo g_mt_32 g_mb_12">
									<g-panel-image class="" :url="item.logo" size="96" />
								</div>
								<div class="g_fs_14">{{ item.agencyName }}</div>
							</div>
						</div>
					</scroll-view>
					<div class="g_text_c g_pt_16 g_pb_24 g_pl_24 g_pr_16 g_bg_f g_flex_row_between flex_center" style="box-shadow: 0px -2px 4px 0px rgba(218, 218, 218, 0.5)">
						<u-checkbox @change="checkAllChange" shape="circle" active-color="#00B666" v-model="checkAll"><div class="g_c_6 g_ml_8">全选</div></u-checkbox>
						<g-button :btnText="`一键关注(${upInfo.num})`" type="primary" @clickBtn="submitInfo" />
					</div>
				</div>
			</u-popup>
		</div>
	</div>
</template>

<script>
export default {
	onReady() {
		this.G.setNavStyle("home");
	},
	onShareAppMessage() {
		return {
			title: " ",
			imageUrl: "../../static/image/fdzsshare.png",
		};
		// return this.G.shareFun();
	},
	onLoad() {
		let that = this;
		that.navInfo = that.G.getNavInfo();

		// #ifdef MP-WEIXIN
		// this.searchAnimate();
		// #endif
	},
	data() {
		return {
			background: {
				backgroundColor: "#caf1e0",
			},
			customList: [
				{
					icon: "icon-saoyisao-hui",
					title: "扫一扫",
					tip: 0,
				},
				{
					icon: "icon-saoyisao-hui",
					title: "发布职位",
					tip: 0,
				},
				{
					icon: "icon-saoyisao-hui",
					title: "发展代理",
					tip: 0,
				},
			],
			isShowTab: false,
			showPop: false, // 显示关注邀请弹窗显示
			attentionList: [], // 关注列表
			subAttentionList: [],
			attentionConfig: {
				num: 1,
				size: 12,
			},
			checkAll: false, // 全选
			upInfo: {
				num: 0,
				list: [],
			},
			computeCode: -1,
			isLogin: null,
			navInfo: {},
			cdnBaseImg: this.G.store().cdnBaseImg,
			localBaseImg: this.G.store().localBaseImg,
			loading: true,
			speed: -1,
			query: {
				page: 1,
				size: 50,
				list: [],
				isFinish: -1,
			},
			keyword: "",
			tabInfo: {
				list: [
					{
						name: "关注",
						num: 0,
						tip: 0,
						classify: 2,
					},
					{
						name: "收藏",
						num: 0,
						tip: 1,
						classify: 3,
					},
					{
						name: "我的",
						num: 0,
						tip: 2,
						classify: 1,
					},
				],
				active: 0,
			},
		};
	},
	watch: {
		"tabInfo.list": {
			handler(val) {
				console.log("tabInfo.list", val);
			},
			deep: true,
			immediate: true,
		},
		showPop(val) {
			if (val) {
				uni.hideTabBar();
			} else {
				uni.showTabBar();
			}
		},
	},
	computed: {},
	onShow() {
		let that = this;

		that.isLogin = uni.getStorageSync("apply-token");

		if (!that.isLogin) {
			that.loading = false;
			that.speed = 0;

			setTimeout(() => {
				that.computeCode = 1;
			}, 100);
		} else {
			that.getList();
			if (uni.getStorageSync("SHOW_INVITE_ALL")) {
				if (uni.getStorageSync("SHOW_INVITE_ALL") == 1 && uni.getStorageSync("SHOW_INVITE") == 1) {
					that.getInviteList();
				}
			}
			console.log('uni.getStorageSync("apply-supplierAccount")', uni.getStorageSync("apply-supplierAccount"));
			if (uni.getStorageSync("apply-supplierAccount") == 1) {
				// 有
				that.tabInfo.list = [
					{
						name: "关注",
						num: 0,
						tip: 0,
						classify: 2,
					},
					{
						name: "收藏",
						num: 0,
						tip: 1,
						classify: 3,
					},
					{
						name: "我的",
						num: 0,
						tip: 2,
						classify: 99,
					},
				];
				// that.tabInfo.active = 0;
				that.isShowTab = true;
			} else {
				// 无
				that.tabInfo.list = [
					{
						name: "关注",
						num: 0,
						tip: 0,
						classify: 2,
					},
					{
						name: "收藏",
						num: 0,
						tip: 1,
						classify: 3,
					},
				];
				// that.tabInfo.active = 0;
				that.isShowTab = false;
			}
		}
		this.$forceUpdate();
	},

	onReachBottom() {
		let that = this;
		console.log("onReachBottom", that.query.isFinish);
		this.G.isLogin();
		if (this.G.isLogin()) {
			console.log("that.query.size", that.query.size);
			if (that.query.isFinish == -1 || that.query.isFinish == that.query.size) {
				that.query.page++;
				that.getList("concat");
			}
		}
	},
	methods: {
		handleOpenCamera() {
			let that = this;
			that.G.handleScanCode();
		},
		goPage($path) {
			uni.navigateTo({
				url: $path,
			});
		},
		reachBottom() {
			let that = this;
			console.log("onReachBottom", that.query.isFinish);
			this.G.isLogin();
			if (this.G.isLogin()) {
				console.log("that.query.size", that.query.size);
				if (that.query.isFinish == -1 || that.query.isFinish == that.query.size) {
					that.query.page++;
					that.getList("concat");
				}
			}
		},
		getList($type = "init") {
			let that = this;
			console.log("job_list __________________________",1);
			let time = new Date().getTime();
			that.G.Post(
				that.api.job_list,
				{
					pageNum: that.query.page,
					pageSize: that.query.size,
					agencyId: that.tabInfo.active == 2 ? uni.getStorageSync("apply-agencyId") : "",
					classify: that.tabInfo.list[that.tabInfo.active].classify,
					keys: that.keyword,
				},
				(res) => {
					that.computeCode = 1;
					console.log("job_list __________________________", (new Date().getTime() - time) / 1000);
					// res.recordCount  = 0;
					// res.recordList = [];

					if (res.recordCount == 0) {
						that.loading = false;
					} else {
						that.loading = true;
					}
					that.speed = res.recordCount;
					that.query.isFinish = res.recordList.length;
					res.recordList = that.G.toGetAddressv3(res.recordList);
					res.recordList = that.G.toGetAge(res.recordList);
					res.recordList = that.G.yijobCopy(res.recordList);
					if ($type == "init") {
						that.query.list = [];
						if (res.recordList.length > 0) {
							that.query.list = res.recordList.map((item, index) => {
								// console.log(item)
								return {
									...item,
									title: item.jobName,
									address: item.district + item.age,
									price: item.salaryClassify != 7 ? that.G.getSalaryClassifyValue(item.salaryClassify, item.salaryClassifyValue) : that.G.getSalaryClassifyValue(item.salaryClassify, item.minMonthlyPay, item.maxMonthlyPay),
									logo: item.agencyLogo,
									time: that.G.setDeadLine(item.updateTime, "jiaofu"),
									fuWuFei: that.G.setReturnFee(item.returnFee, item.returnFeeType),
									gender: that.G.getGenderByMinAge(item),
									leafCateId: item.id,
									// serverPrice: that.tabInfo.list[that.tabInfo.active].tip == 2 ? that.G.setReturnFee(item.returnFee, item.returnFeeType) : that.G.setReturnFee(item.agencyReturnFee, item.agencyReturnFeeType),
									serverPrice: that.G.setReturnFee(item.agencyReturnFee, item.agencyReturnFeeType),
									recruitmentSwitch: item.recruitment == 1 ? true : false,
									recruitmentImage: item.recruitment,
									active: that.tabInfo.active,
									isToday: item.today == 0 ? false : true,
									tip: that.tabInfo.list[that.tabInfo.active].tip,
								};
							});
						}
					} else {
						that.query.list = that.query.list.concat(
							res.recordList.map((item, index) => {
								return {
									...item,
									title: item.jobName,
									price: item.salaryClassify != 7 ? that.G.getSalaryClassifyValue(item.salaryClassify, item.salaryClassifyValue) : that.G.getSalaryClassifyValue(item.salaryClassify, item.minMonthlyPay, item.maxMonthlyPay),
									fuWuFei: that.G.setReturnFee(item.returnFee, item.returnFeeType),
									gender: that.G.getGenderByMinAge(item),
									logo: item.agencyLogo,
									time: that.G.setDeadLine(item.updateTime, "jiaofu"),
									leafCateId: item.id,
									serverPrice: that.G.setReturnFee(item.agencyReturnFee, item.agencyReturnFeeType),
									recruitmentSwitch: item.recruitment == 1 ? true : false,
									recruitmentImage: item.recruitment,
									active: that.tabInfo.active,
									isToday: item.today == 0 ? false : true,
									tip: that.tabInfo.list[that.tabInfo.active].tip,
								};
							})
						);
					}
					console.log("首页 列表：", that.query.list);
				}
			);
		},
		/**
		 * 获取邀请关注列表
		 */
		getInviteList() {
			let that = this;
			uni.showLoading({
				title: "加载中...",
				mask: true,
			});
			that.G.Get(
				that.api.user_getInviteList,
				{
					pageSize: 15,
					pageNum: that.attentionConfig.num,
				},
				(res) => {
					console.log(res);
					if (that.attentionList.length > 0) {
						res.forEach((item) => {
							item.checked = false;
						});
						that.attentionList.concat(res);
					} else {
						that.attentionList = res;
						that.attentionList.forEach((item) => {
							item.checked = false;
						});
					}
					if (that.attentionList.length > 0) {
						that.showPop = true;
						uni.removeStorageSync("SHOW_INVITE");
						uni.setStorageSync("watch_invite", 2);
					}
					uni.hideLoading();
				}
			);
			return;
		},

		/**
		 * 搜索框的滚动监听变化
		 */
		searchAnimate() {
			let that = this;
			uni
				.createSelectorQuery()
				.select("#listBox")
				.fields(
					{
						scrollOffset: true,
						size: true,
					},
					(res) => {
						that.$mp.page.animate(
							"#searchInputBox",
							[
								{
									top: "10px",
									width: "100%",
								},
								{
									top: "-48px",
									width: "70%",
								},
							],
							800,
							{
								scrollSource: "#listBox",
								timeRange: 1000,
								startScrollOffset: 0,
								endScrollOffset: 60,
							}
						);
						that.$mp.page.animate(
							".the_city",
							[
								{
									color: "#333",
								},
								{
									color: "#fff",
								},
							],
							500,
							{
								scrollSource: "#listBox",
								timeRange: 1000,
								startScrollOffset: 0,
								endScrollOffset: 90,
							}
						);
						// that.$mp.page.animate(
						// 	".daotian",
						// 	[
						// 		{
						// 			opacity: "1",
						// 		},
						// 		{
						// 			opacity: "1",
						// 		},
						// 	],
						// 	1000,
						// 	{
						// 		scrollSource: "#listBox",
						// 		timeRange: 1000,
						// 		startScrollOffset: 0,
						// 		endScrollOffset: 90,
						// 	}
						// );
					}
				)
				.exec();
		},
		/**
		 * 跳转快速报名
		 */
		toRecord() {
			uni.navigateTo({
				url: "/root/home/quickApplication?title=快速报名",
			});
		},
		shareJob(e) {
			console.log(e);
			this.currentJob = e;
		},
		/**
		 * 跳转搜索页
		 */
		goSearch() {
			this.G.isLogin();
			if (this.G.isLogin()) {
				uni.navigateTo({
					url: "/root/other/search?from=home",
				});
			}
		},

		handleUpdateTab(e) {
			console.log("e", e);
			this.G.isLogin();
			if (this.G.isLogin()) {
				this.tabInfo.active = e;
				this.speed = -1;
				this.loading = true;
				this.query.page = 1;
				this.getList();
			}
		},
		checkAllChange(e) {
			console.log(e);
			this.attentionList.forEach((item) => {
				item.checked = e.value;
			});
			this.upInfo = this.getListNum();
		},
		checkChange(e) {
			console.log(e);
			console.log(this.attentionList);
			var check = true;
			this.attentionList.forEach((item) => {
				if (item.id == e.id) {
					item.checked = !item.checked;
				}
				if (item.checked === false) {
					check = false;
				}
			});
			this.checkAll = check;
			this.upInfo = this.getListNum();
		},
		getListNum() {
			let num = 0;
			let list = [];
			this.attentionList.forEach((item) => {
				if (item.checked) {
					num++;
					list.push(item.id);
				}
			});
			return {
				num,
				list,
			};
		},
		submitInfo() {
			let that = this;
			if (this.upInfo.num <= 0) {
				uni.showToast({
					title: "请至少选择一个",
					icon: "none",
				});
				return false;
			}
			uni.showLoading({
				title: "正在关注",
			});

			that.G.Post(
				that.api.user_updateInviteId,
				{
					agencyIds: that.upInfo.list.join(","),
				},
				(res) => {
					console.log(res);
					uni.showToast({
						title: "关注成功",
						icon: "",
						duration: 1000,
						complete: function () {
							// uni.hideLoading();
							that.showPop = false;
						},
					});
				}
			);
			// setTimeout(() => {}, 2000);
		},
		onScrollToLower() {
			console.log(123);
			let that = this;

			that.attentionConfig.num++;
			this.getInviteList();
		},
	},
};
</script>

<style lang="scss">
.p-home-inedx {
	background-color: #f5f5f5;
	min-height: 100%;
	.m-more {
		position: absolute;
		left: 12rpx;
		bottom: -44rpx;
		width: 154px;
		background-color: #696969;
		box-shadow: 0px 2px 19px 0px rgba(179, 179, 179, 0.5);
		border-radius: 8px;
	}

	.suffix {
		position: absolute;
		right: 20rpx;
		top: 10px;
		z-index: 1;
		border-top-right-radius: 110rpx;
		border-bottom-right-radius: 110rpx;
	}

	// #ifdef MP-WEIXIN
	.u-border {
		border-color: #fff !important;
		background-color: #fff;
	}
	.navigatorBar .tabs {
		position: relative;
		left: 50%;
		color: #111;
		transform: translateX(-50%);
		justify-content: center;
		box-sizing: border-box;
	}

	.sticky {
		position: sticky;
		top: 0px;
		left: 0;
		z-index: 100;
	}
	// #searchInputBox {
	// 	display: flex;
	// 	justify-content: space-between;
	// 	padding: 0 10px;
	// 	top: 10px;
	// 	box-sizing: border-box;
	// 	position: absolute;
	// 	z-index: 9999;
	// 	width: 100vw;
	// }
	// #endif
}
</style>