star-uni/pages/task/task.vue

<template>
	<view class="content">
		<scroll-view scroll-y="true" class="scroll-content" :enhanced="true" :bounces="false" :show-scrollbar="false" @scroll="pageScroll">
			<view class="task-header">
				<cu-custom :bgColor="scrollHeight>20?'bg-bluev-head':'none'">
					<block slot="content">任务广场</block>
				</cu-custom>
				<view class="sub-name">任务多，变现快!</view>
				<view class="sub-logo" :style="style"><image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/task-star-small.png" mode="widthFix"></image></view>
			</view>
			<view class="fixed-filter" :style="fixedStyle" v-if="scrollHeight>20">
				<filterMain :data="filterData" @success="searchFilter"></filterMain>
			</view>
			<view class="task-content">
				<view class="home-search">
					<image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/search-icon.png" mode="widthFix"></image>
					<input type="text" class="search-input" placeholder="搜一搜最新任务" />
				</view>
				<view class="task-status" v-if="scrollHeight<20">
					<filterMain :data="filterData" @success="searchFilter"></filterMain>
				</view>
				<view class="star-task-list">
					<view class="task-item" v-for="(item,indx) in 10" :key="indx">
						<view class="item-body">
							<view class="item-img">
								<image src="https://p9-dy.byteimg.com/obj/ecom-shop-material/jpeg_m_e3fa80e91300b16e0df15e2bcbd8c003_sx_426270_www800-800" mode="aspectFill"></image>
							</view>
							<view class="item-info">
								<view class="title">【官方正品】金纺柔顺剂宝宝衣物适用0漂白剂抗静电蓬松不僵硬CW-星川任务-202</view>
								<view class="item-tags">
									<view class="tag-item">抖音</view>
									<view class="tag-item">手拍</view>
									<view class="tag-item">真人出境</view>
								</view>
								<view class="item-price">
									<view class="item-platform">抖音L1</view>
									<view class="price-txt"><text>￥</text>20.0w</view>
								</view>
							</view>
						</view>
						<view class="item-foot">
							<view class="item-join">
								<view class="cu-avatar-group">
									<view class="cu-avatar round sm" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
								</view>
								<view class="join-text"><text>180</text>/200人已参加</view>
							</view>
							<view class="foot-btn">
								<button class="btn disabled" :disabled="true">立即参加</button>
							</view>
						</view>
					</view>
				</view>
				<view class="star-task-more"></view>
			</view>
		</scroll-view>
		<halfLogin ref="loginCom"></halfLogin>
	</view>
</template>

<script>
var app;
import filterMain from "./filter";
export default {
	components: {
		filterMain
	},
	data() {
		return {
			style:"",
			fixedStyle:"",
			scrollHeight:0,
			avatar: [
				'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
				'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
				'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
				'https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg'
			],
			filterData:[
				{
					"name":"任务状态",
					"children":[
						{
							"name":"全部",
							"hide":"任务状态",
							"index":0
						},
						{
							"name":"招募中",
							"hide":"招募中",
							"index":1
						},
						{
							"name":"已终止",
							"hide":"已终止",
							"index":2
						}
					]
				},
				{
					"name":"平台等级",
					"children":[
						{
							"name":"全部",
							"hide":"平台等级",
							"index":0
						},
						{
							"name":"LV.1",
							"hide":"LV.1",
							"index":1
						},
						{
							"name":"LV.2",
							"hide":"LV.2",
							"index":2
						},
						{
							"name":"LV.3",
							"hide":"LV.3",
							"index":3
						},
						{
							"name":"LV.4",
							"hide":"LV.4",
							"index":4
						}
					]
				},
				{
					"name":"任务奖励",
					"children":[
						{
							"name":"不限",
							"hide":"任务奖励",
							"index":0
						},
						{
							"name":"100以下",
							"hide":"100以下",
							"index":1
						},
						{
							"name":"100-500",
							"hide":"100-500",
							"index":2
						},
						{
							"name":"500以上",
							"hide":"以上",
							"index":3
						}
					]
				},
				{
					"name":"排序方式",
					"children":[
						{
							"name":"不限",
							"hide":"排序方式",
							"index":0
						},
						{
							"name":"综合排序",
							"hide":"综合",
							"index":1
						},
						{
							"name":"奖励最高",
							"hide":"最高",
							"index":2
						},
						{
							"name":"奖励最低",
							"hide":"最低",
							"index":3
						},
						{
							"name":"最新发布",
							"hide":"最新",
							"index":4
						}
					]
				}
			]
		}
	},
	onLoad() {
		app = this;
		var StatusBar= this.StatusBar;
		var CustomBar= this.CustomBar;
		var style = `top:${StatusBar}px;`;
		app.style = style;
		app.fixedStyle = `top:${CustomBar}px;`;
	},
	methods: {
		pageScroll(event) {
			var scrollHeight = event.detail.scrollTop;
			app.scrollHeight = scrollHeight;
		},
		searchFilter(){
			
		}
	}
}
</script>

<style lang="scss">
page{background-color: #f8f8f8;}

.fixed-filter{position: fixed;background-image: linear-gradient(180deg, #f8f8f8 9%, #fff 100%);z-index: 999;padding: 10rpx 20rpx;right: 0;left: 0;}

.task-header{position: relative;background-image: linear-gradient(180deg, #85DFFE 9%, #D5F4FF 62.55%, #f8f8f8 100%);height: 290rpx;}
.task-header .sub-name{font-size: 32rpx;font-weight: 800;font-family: "bluevBold";padding-left: 20rpx;padding-top: 20rpx;}
.task-header .sub-logo{
	position: absolute;
	top: 40rpx;
	/* #ifdef MP-WEIXIN */
	right: 220upx;
	/* #endif */
	/* #ifdef MP-ALIPAY */
	right: 150upx;
	/* #endif */
}
.task-header .sub-logo image{width: 220rpx;max-height: 220rpx;}
.task-content{background-image: linear-gradient(180deg, #ffffff 1%, #f8f8f8 100%);border-radius: 40upx 40upx 0 0;padding: 20rpx;}

.home-search-loading{margin: 20rpx;height: 68rpx;}
.home-search{display: flex;align-items: center;background-color: rgba(246, 246, 246, 1);border-radius: 10rpx;height: 68rpx;padding: 0 20rpx;gap: 20rpx;}
.home-search image{width: 32rpx;height: 32rpx;}
.home-search .search-input{font-size: 24rpx;width: 100%;border: 0;height: 100%;box-sizing: none;box-shadow: none;}

</style>