dandelionPlatformToB-uni-v3/root/vip/task.vue

<template>
	<div class="g_pl_12 g_pr_12" style="background-image: url('https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/dailibaoming/poster/a1.png'); background-size: cover">
		<div class="navContainer">
			<u-navbar :is-back="true" :is-fixed="true" title="任务" titleColor="#fff" backIconColor="#fff" :borderBottom="false" background="transparent" :title-bold="false"> </u-navbar>
		</div>
		<scroll-view class="" :style="{ height: `calc(100vh - ${navbarHeight}px)` }" scroll-y>
			<div class="" style="height: 150px"></div>
			<div class="r_box">
				<div class="g_flex_row_between flex_center g_p_12">
					<div class="g_fs_16 g_fw_600">连续签到领取高额星辉值奖励</div>
					<div class="g_w_72">
						<g-button size="small_auto" gradual="linear-gradient(50deg, #f98342, #fc4866)" type="gradual" height="32" :fontSize="12" btnText="已签到" @clickBtn="getCoze"></g-button>
					</div>
				</div>
				<div class="g_flex_row_start g_pl_12 g_pr_12" style="column-gap: 12px" :style="{ height: showMore ? '247px' : '80px', overflow: 'hidden', transition: 'all 0.3s' }">
					<div v-for="item in 21" :key="item" class="g_text_c g_mb_10" style="flex: calc((100% - 72px) / 7)">
						<div class="g_w_all g_bg_f40 g_radius_6" style="aspect-ratio: 0.75 /1"></div>
						<div class="g_fs_12 g_mt_4">第{{ item }}天</div>
					</div>
				</div>
					<div @click="showMore = !showMore" class="g_text_c g_p_12 g_c_6">{{ showMore ? "收起" : "展开" }} <span class="iconfont g_fsi_12" :class="showMore ? 'icon-shouqi' : 'icon-zhankai'"></span></div>
			</div>
			<div class="r_box g_mt_12" v-for="item in taskList">
				<div class="g_p_12 g_fs_16 g_fw_600">{{ item.title }}</div>
				<div class="">
					<div v-for="innerItme in item.list" class="g_flex_row_start flex_center g_pl_12 g_pr_12 g_pb_10">
						<div class="g_flex_row_start flex_center g_flex_1">
							<div class="g_w_36 g_h_36 g_bg_0 g_radius_8 g_mr_8"></div>
							<div class="g_flex_column_between g_h_42">
								<div class="g_fs_14 g_fw_600">{{ innerItme.title }} <span class="g_c_f40 g_fs_12">+1</span></div>
								<div class="g_fs_12 g_c_9">{{ innerItme.content }}</div>
							</div>
						</div>
						<div>
							<div class="g_w_72 g_fw_600">
								<g-button size="small_auto" gradual="linear-gradient(50deg, #f98342, #fc4866)" type="gradual" height="32" :fontSize="12" btnText="去完成"></g-button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div style="height: 120px"></div>
		</scroll-view>
	</div>
</template>

<script>
export default {
	onLoad(options) {
		console.log(options);
	},
	mounted() {
		const query = uni.createSelectorQuery().in(this);
		// 选择指定的 DOM 元素
		query
			.select(".navContainer")
			.boundingClientRect((res) => {
				this.navbarHeight = res.height;
			})
			.exec();
	},
	data() {
		return {
			type: "",
			showMore: false,
			navbarHeight: 0,
			taskList: {
				new: {
					title: "新手任务",
					list: [
						{
							title: "每日签到1",
							content: "每日签到轻松赚星辉值",
							logo: "",
							type: 1,
						},
						{
							title: "浏览招聘岗位15s",
							content: "浏览单个岗位详情页15s",
							logo: "",
							type: 2,
						},
					],
				},
				job: {
					title: "职场任务",
					list: [
						{
							title: "每日签到1",
							content: "每日签到轻松赚星辉值",
							logo: "",
							type: 1,
						},
						{
							title: "浏览招聘岗位15s",
							content: "浏览单个岗位详情页15s",
							logo: "",
							type: 2,
						},
						{
							title: "浏览招聘岗位15s",
							content: "浏览单个岗位详情页15s",
							logo: "",
							type: 2,
						},
					],
				},
				day: {
					title: "每日任务",
					list: [
						{
							title: "每日签到1",
							content: "每日签到轻松赚星辉值",
							logo: "",
							type: 1,
						},
						{
							title: "浏览招聘岗位15s",
							content: "浏览单个岗位详情页15s",
							logo: "",
							type: 2,
						},
						{
							title: "浏览招聘岗位15s",
							content: "浏览单个岗位详情页15s",
							logo: "",
							type: 2,
						},
						{
							title: "浏览招聘岗位15s",
							content: "浏览单个岗位详情页15s",
							logo: "",
							type: 2,
						},
					],
				},
			},
		};
	},
	created() {},

	methods: {},
};
</script>

<style></style>