new_app/pages/task/index.vue

<template>
	<view class="task_bg u-absolute">
		<image class="task_bg" src="@/static/task/task_bg.png"></image>
	</view>
	<view class="icon">
		<image class="task_icon1" src="@/static/task/task_icon1.png"></image>
		<view class="icon_title">新人好礼送不停</view>
		<image class="task_icon2" src="@/static/task/task_icon2.png"></image>
	</view>

	<view class="contentTop ">
		<view>
			<image src="@/static/task/renwubg.png" mode=""></image>
			<view>已连续签到 <text class="num">{{ datas.signDays }}</text> 天</view>
		</view>
		<view>
			<view v-for="item in datas.signInList" :key="item.id"
				:style="item.status == 1 ? 'color:#EFA765' : 'color:#999'">
				{{ item.status == 1 ? '已签到' : '待签到' }}
				<view :style="item.status == 1 ? 'color:#999' : 'color:#EFA765'">
					{{ item.signDay.substr(5, 8) }}
				</view>
				<image v-if="item.status == 0" src="@/static/task/xing (1).png" mode=""></image>
				<image v-else src="@/static/task/xing (2).png" mode="">
				</image>
			</view>
		</view>
	</view>
	<!-- <view class="content margin-lr padding bg-white u-relative" v-if="list.length">
		<view class="cell flex justify-between" v-for="(item, index) in list" :key="index" v-if="item.shows">
			<view class="cell_left flex">
				<view class="cell_title flex">
					<view class="u-font-28 text-bold title"
						:style="{ alignSelf: item.rewardImg ? 'center' : 'flex-start' }">{{ item.title }}</view>
					<u-image v-if="item.rewardImg" class="cell_icon" :src="item.rewardImg"></u-image>
					<view class="u-font-24 tip">{{ item.rewardDetail }}</view>
				</view>
				<view class="subhead u-font-24">{{ item.detail }}</view>
			</view>
			<view class="cell_right flex">
				<view v-if="item.disabled" class="btn u-font-24 text-bold"
					:style="{ backgroundColor: item.buttonBgColor, color: item.buttonFontColor }" @click="goNav(item)">
					{{ item.type == 1 ? item.buttonTitle : item.number ? `${item.discNumber}/${item.number}` : (
						item.discNumber <= 0 ? item.buttonTitle : `剩余${item.discNumber}次`) }} </view>
						<view v-else class="btn u-font-24 text-bold disabled">
							{{ item.type == 1 ? item.buttonTitle : item.number ? `${item.discNumber}/${item.number}`
								: (item.discNumber <= 0 ? item.buttonTitle : `剩余${item.discNumber}次`) }} </view>
								<view v-if="item.buttonUnderContent && item.buttonUnderUrl" class="u-font-22 tip"
									@click="goNav({ id: item.id, buttonUrl: item.buttonUnderUrl, jumpType: 1, title: item.title, disabled: item.disabled, discNumber: item.discNumber })">
									{{ item.buttonUnderContent }}
								</view>
						</view>
				</view>
			</view>
		</view>
	</view> -->
</template>

<script setup>
import {
	reactive,
	watch
} from "vue";
import {
	onShow, onReachBottom
} from '@dcloudio/uni-app'
import { getUserSignData } from '@/api/task/index.js'

let datas = reactive({
	signDays: 0,
	signInList: [],
})
onShow(() => {
	// this.getTaskdata()
	getsignIn()
})
// 获得签到
async function getsignIn() {
	let res = await getUserSignData()
	datas.signInList = res.recordList
	datas.signDays = res.signDays
}
// 获取任务列表
function getTaskdata() {
	this.$Request.getT('/app/taskCenter/selectTaskCenter', {}).then(res => {
		if (res.code == 0) {
			if (!this.isShowMoneyPay) {
				let arrData = []
				res.data.forEach(ele => {
					if (ele.title.indexOf('分享奖励') == -1 && ele.title.indexOf('新人福利') == -1 &&
						ele.title.indexOf('观看视频奖励') == -1) {
						arrData.push(ele)
					}
				})
				this.list = arrData
			} else {
				this.list = res.data
			}
		}
		uni.stopPullDownRefresh();
	})
}

</script>

<style scoped lang="scss">
.u-absolute {
	position: absolute;
}

.task_bg {
	width: 100% !important;
	height: 494rpx !important;
}

.icon {
	position: relative;
	padding: 32rpx;

	.icon_title {
		color: #000000;
		margin-left: 28rpx;
		top: -20rpx;
		font-size: 32rpx;
		font-weight: bold;
		position: relative;
	}

	.task_icon1 {
		width: 74rpx !important;
		height: 78rpx !important;
		margin-left: 235rpx;
		position: relative;
	}

	.task_icon2 {
		width: 126rpx !important;
		height: 120rpx !important;
		top: -40rpx;
		position: relative;
	}
}

.contentTop {
	margin-bottom: 32rpx;
	border-radius: 16rpx;
	top: -126rpx;
	padding: 30rpx;
	position: relative;
	background-color: #ffffff;
	color: #666666;
	margin-left: 32rpx;
	margin-right: 32rpx;

	>view:first-child {
		>image {
			width: 100%;
			height: 78rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1
		}

		>view {
			z-index: 9999;
			position: absolute;
			text-align: center;
			width: 98%;

			.num {
				color: #EC6F48;
				margin: 0 10rpx;
			}
		}
	}

	>view:last-child {
		margin-top: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		>view {
			position: relative;

			>view {
				margin-top: 20rpx;
				width: 80rpx;
				height: 94rpx;
				background: linear-gradient(180deg, #FFF7E3 0%, #FFFFFF 100%);
				border-radius: 14rpx 14rpx 0rpx 0rpx;

			}

			>image {
				width: 52rpx;
				height: 48rpx;
				position: absolute;
				top: 100rpx;
				left: 14rpx;
			}
		}
	}
}
</style>