shuquAi/pages/tusk/index.vue

<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<!-- 	<view style="color: #fff;">
			<tn-nav-bar :isBack="false" backgroundColor="#26B3A0" :bottomShadow="false" @rightClick="jumpScoreRed">任务大厅
			</tn-nav-bar>
			<view :style="{ height: tobheight + 'px' }"></view>
		</view> -->
		<!-- #endif -->


		<view class="content">
			<view class="top">
				<!-- 方案一 -->
				<swiper class="banner" circular :autoplay="true">
					<swiper-item v-for="i in bannerList">
						<image :src="i.picture
" mode="" @click="handleBannerJump(i.url)"></image>
					</swiper-item>
				</swiper>
				<!-- 方案二 -->
				<!-- <u-swiper height="250" radius="15" imgMode="scaleToFill" :list="list3" circular></u-swiper> -->

				<view class="searchBox">
					<view class="search">
						<icon type="search" size="18"></icon>
						<icon v-if="searchValue" @click="clearInputValue" class="clear" type="clear" size="16" />
					</view>

					<uni-easyinput placeholderStyle="fontSize:28rpx" :clearable="false" :inputBorder="false"
						v-model="searchValue" placeholder="搜索任务">


					</uni-easyinput>

				</view>

				<view class="line">
				</view>
			</view>

			<view class="keyWordBox" v-if="searchValue">
				<view class="taskList">
					<view class="ul">
						<view class="li" v-for="(item,index) in tuskList2" @click="goDetail(item.id)">
							<image :src="item.cover_image?item.cover_image:'../../static/posImg.png'" mode=""></image>
							<view class="right">
								<view class="title mb30">
									<!-- Chat GPT应用场景 -->
									{{item.name }}
								</view>
								<view class="des2 mb30">
									<!-- 主要完成应用场景的填写，查找，上传，学习后将收获对open ai的了解更加多元。 -->
									{{item.intro }}
								</view>
								<view class="bottom">
									<view class="money">
										<text class="yongjin">佣金：</text>￥{{item.task_commission}}
									</view>
									<view class="btn" @click="goDetail(item.id)">
										立即报名
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>


			<!-- 未搜索关键词时-------- -->
			<view class="catBox" v-if="!searchValue && tuskTabList.length!=0">
				<view class="taskGrid">
					<view class="title">
						任务分类
					</view>
					<ul>
						<li v-for="(item,index) in tuskTabList" @click="jumpPage(item)">
							<image :src="item.icon==''?'../../static/posImg.png':item.icon" mode=""></image>
							<view class="des" style="font-size: 32rpx;">
								{{item.name}}
							</view>
						</li>
					</ul>
				</view>

				<!-- tab部分 -->
				<view class="ct_tab">
					<view :class="{ 'ct_active': index == tabCur }" v-for="(item, index) in tabList" :key="index"
						class="ct_item" @click="clickCtTab(index)">
						<text v-text="item.title"></text>
					</view>
				</view>

				<view v-if="tabCur===0" class="taskList">
					<view class="ul">
						<view class="li" v-for="(item,index) in tuskList" @click="goDetail(item.id)">
							<image :src="item.cover_image?item.cover_image:'../../static/posImg.png'" mode=""></image>

							<view class="right">
								<view class="title mb30">
									<!-- Chat GPT应用场景 -->
									{{item.name }}
								</view>
								<view class="des2 mb30">
									<!-- 主要完成应用场景的填写，查找，上传，学习后将收获对open ai的了解更加多元。 -->
									{{item.intro }}
								</view>
								<view class="bottom">
									<view class="money">
										<text class="yongjin">佣金：</text>￥{{item.task_commission}}
									</view>
									<view class="btn" @click="goDetail(item.id)">
										立即报名
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="tabCur===1" class="taskList">
					<view class="ul">
						<view class="li" v-for="(item,index) in tuskList" @click="goDetail(item.id)">
							<image :src="item.cover_image?item.cover_image:'../../static/posImg.png'" mode=""></image>

							<view class="right">
								<view class="title mb30">
									<!-- Chat GPT应用场景 -->
									{{item.name }}
								</view>
								<view class="des2 mb30">
									<!-- 主要完成应用场景的填写，查找，上传，学习后将收获对open ai的了解更加多元。 -->
									{{item.intro }}
								</view>
								<view class="bottom">
									<view class="money">
										<text class="yongjin">佣金：</text>￥{{item.task_commission}}
									</view>
									<view class="btn" @click="goDetail(item.id)">
										立即报名
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="tabCur===2" class="taskList">
					<view class="ul">
						<view class="li" v-for="(item,index) in tuskList" @click="goDetail(item.id)">
							<image :src="item.cover_image?item.cover_image:'../../static/posImg.png'" mode=""></image>

							<view class="right">
								<view class="title mb30">
									<!-- Chat GPT应用场景 -->
									{{item.name }}
								</view>
								<view class="des2 mb30">
									<!-- 主要完成应用场景的填写，查找，上传，学习后将收获对open ai的了解更加多元。 -->
									{{item.intro }}
								</view>
								<view class="bottom">
									<view class="money">
										<text class="yongjin">佣金：</text>￥{{item.task_commission}}
									</view>
									<view class="btn" @click="goDetail(item.id)">
										立即报名
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
		<empty v-if="tuskList.length==0"></empty>
		<u-loadmore v-if="tuskList.length!=0" :status="status" />
		<wike-tabbar onTabbar="" isShowAnimate=""></wike-tabbar>
	</view>
</template>

<script>
	import {
		catTab,
		taskList
	} from '@/api/tusk/index.js'
	import {
		banner
	} from '@/api/index/index.js'
	import empty from '@/components/empty/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				list3: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],


				tuskTabList: ['直播任务', '填写任务', '观察任务', '学习任务'],



				tobheight: 45,

				searchValue: '',


				tabCur: 0,
				tabList: [{
					title: '所有任务',
				}, {
					title: '今日任务',
				}, {
					title: '热门任务',
				}],
				bannerList: [],
				tuskList: [],
				tuskList2: [],

				timer: null,


				page: 1,
				pagesize: 10,
				totalElements: '',
				// loadstatus: "noMore"
				status: 'nomore',
			};
		},
		computed: {

		},
		watch: {
			searchValue(n, o) {
				if (this.tabCur) {
					this.tabCur = 0
				}
				this.handleSearch(n.trim())
			}
		},
		async onLoad() {
			if (!uni.getStorageSync('token')) {
				uni.redirectTo({
					url: '/pages/user/signin'
				})
			}

			let res1 = await banner()
			console.log('任务大厅轮播图返回值', res1);
			if (res1.code == 0) {
				this.bannerList = res1.data
			}


			let res = await catTab({
				// task_id: 1
			})
			if (res.code == 0) {
				this.tuskTabList = res.data

				this.totalElements = res.total
			}
			console.log('任务分类导航返回值', res);
		},

		async onReachBottom() {
			let allTotal = this.page * this.pagesize
			if (allTotal < this.totalElements) {
				console.log('onReachBottom()------------------');
				this.page++;
				this.status = "loading"

				let parms = {
					page: this.page,
					per_page: this.pagesize,
					name: '',
					type: ''
				}
				if (this.searchValue) {
					parms.name = this.searchValue
				} else if (this.tabCur == 0) {
					// parms.name=this.searchValue
				} else if (this.tabCur == 1) {
					parms.type = 'day'
				} else if (this.tabCur == 2) {
					parms.type = 'hot'
				}

				console.log('每次传递的参数', parms);
				let res = await taskList(parms)
				if (res.code == 0) {
					if (this.searchValue) {
						this.tuskList2 = [...this.tuskList2, ...res.data.data]
					} else {
						this.tuskList = [...this.tuskList, ...res.data.data]
					}
					this.status = "nomore"
				}
			} else {
				this.status = "nomore"
			}
		},
		onReady() {

		},
		onShow() {
			if (uni.getStorageSync('clickStudyBtn')) {
				uni.removeStorageSync('clickStudyBtn')
			}
			if (uni.getStorageSync('myScoreId')) {
				uni.removeStorageSync('myScoreId')
			}
			this.fetchTuskList()
		},
		onUnload() {

		},
		methods: {
			handleBannerJump(url) {
				// url = url.replace(/https/, 'http')
				console.log('url.............', url);
				if (url) {
					window.open(url)
				}
			},

			handleSearch(searchWord) {
				// if (this.timer) {
				// 	this.timer = null
				// 	return
				// }
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					console.log('搜索传递的关键词参数', {
						name: searchWord
					});
					this.fetchTuskList(searchWord)
				}, 1500)
				console.log('this.timer', this.timer)

			},

			async fetchTuskList(name = '', type = '', page = 1, per_page = 10) {
				this.page = 1
				let ress = await taskList({
					name,
					type,
					page,
					per_page
				})
				if (ress.code == 0) {

					this.totalElements = ress.data.total
					if (this.searchValue) {
						// this.page = 1
						this.tuskList2 = ress.data.data
					} else {
						this.tuskList = ress.data.data
					}
				}
				console.log('任务列表返回值', ress);
			},

			clearInputValue() {
				this.searchValue = ''
			},

			jumpPage(item) {
				console.log('任务分类导航跳转地址', item);
				if (item.url !== '') {
					uni.navigateTo({
						url: item.url + '&catName=' + item.name
					})
				}

				// uni.navigateTo({
				// 	url: 'pages/tusk/tuskCat/index?catId=' + item.name
				// })
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/tusk/tuskDetail/index?id=' + id
				})
			},

			clickCtTab(ctCur) {
				this.tabCur = ctCur
				if (ctCur == 0) {
					this.fetchTuskList('', '')
				} else if (ctCur == 2) {
					this.fetchTuskList('', 'hot')
				} else {
					this.fetchTuskList('', 'day')
				}
				console.log('点击了--->' + this.tabCur)
			},
			goScoreDetail() {
				uni.navigateTo({
					url: '/pages/index/scoreDetail/index'
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>