quickapp_front/src/views/Task/index.ux

<template>
	<div class="task-page">
		<div class="task-banner">
			<div class="swiper-container">
				<swiper class="swipe-bar" autoplay="true" indicator="false">
					<block for="book in bannerList">
						<div class="swipe-item">
							<image class="cover" src="{{book.banner_url}}" @click="pageRouter(book)"></image>
						</div>
					</block>
				</swiper>
			</div>
		</div>
		<div class="sign-section">
			<div class="sign-title" @click="showRules"><text>已连续签到{{signData.signDay}}天</text>
				<image src="../../assets/imgs/question.png"></image>
			</div>
			<text class="sign-desc">连续签到可持续获得高额奖励</text>
			<div class="sign-line">
				<div class="sign-line__item" for="{{signList}}">
					<text class="sign-line__day">{{$item.day}}天</text>
					<image src="../../assets/imgs/sign_{{$item.iconType}}.jpg"></image>
					<text class="sign-line__fee">{{$item.fee}}书币</text>
				</div>
			</div>
			<text class="sign-button" @click="signToday" if="{{!signData.is_sign}}">
				签到
			</text>
			<text class="sign-button-disabled" if="{{signData.is_sign}}">
				已签到
			</text>
		</div>
		<div class="task-section">
			<div class="task-section__tab">
				<text class="{{type=='new'?'on':''}}" @click="changeTab('new')">新手任务</text>
				<text class="{{type=='day'?'on':''}}" @click="changeTab('day')">日常福利</text>
			</div>
			<div class="banner">
				<image src="https://cdn-novel.iycdm.com/quickapp/task/day_task.png" show="{{type=='day'}}"></image>
				<image src="https://cdn-novel.iycdm.com/quickapp/task/new_task.png" show="{{type=='new'}}"></image>
			</div>
			<div class="task-section__list">
				<div class="list-item" for="{{currentList}}" @click="compeletTask($item.status,$item.type,$item.id,$item.path)">
					<image src="{{$item.icon}}" class="icon" />
					</image>
					<div class="content">
						<div><text>{{$item.name}}</text>
							<div class="task-award">
								<image src="{{$item.icon}}"></image><text>{{$item.value}}<text>
							</div>
						</div>
						<text class="content-desc">{{$item.desc}}</text>
					</div>
					<text class="button-status {{ $item.status==0 ? 'wait': ($item.status==1 ? 'get' : 'disabled') }}">
						{{$item.status==0?'去完成':$item.status==1?'领取':'已领取'}}
					</text>
				</div>
			</div>
		</div>
		<div class="mask" show="{{showRule}}">
			<div class="rule">
				<text class="rule-title">签到规则</text>
				<text class="detail">1.每7天为一个签到周期，用户连续签满7天，完成一个签到周期，下次签到重新计算签到周期 </text>
				<text class="detail">2.用户连续签到获得的奖励更高，若中途漏签，则从第一天开始重新计算签到周期 </text>
			</div>
			<image src="../../assets/imgs/pop_close.png" class="close-icon" @click="closeRule"></image>
		</div>
		<div class="mask" if="{{SignSuccess}}">
			<div class="sign-banner">
				<text class="sign-banner__text"><span>获得</span><span class="orange">{{ currentFee}}</span><span>书币</span></text>
			</div>
			<image src="../../assets/imgs/pop_close.png" class="close-icon" @click="closeSign"></image>
		</div>
	</div>
</template>
<script>
import { userTaskList, userAddDsktop, getTaskAward, getSignInfo, noVipSign, taskBook } from "../../api/index";
import router from "@system.router";
import shortcut from "@system.shortcut";
import storage from "@system.storage";
import prompt from '@system.prompt';
export default {
	public: {
		push_id: ''
	},
	protected: {
		signList: [
		],
		currentFee: 0,
		signData: {},
		showRule: false,
		SignSuccess: false,
		dayList: [],
		newList: [],
		type: 'new',
		bannerList: [],
		isClick: false,
	},
	computed: {
		currentList() {
			let curList = this.type == 'new' ? this.newList : this.dayList;
			return curList;
		},
	},
	async onInit() {
		if (this.push_id) {
			await storage.set({ key: "push_id", value: this.push_id });
		}
		this.getBook();
		this.getSignList();
	},
	onShow() {
		this.getTaskList();
	},
	async getBook() {
		let bookList = await taskBook();
		this.bannerList = bookList;
	},
	async getSignList() {
		let signList = [];
		let signData = await getSignInfo();
		signData.reward_list.map((item, idx) => {
			signList.push({ day: idx + 1, iconType: idx < signData.sign_day ? 'checked' : 'coin', fee: item })
		})
		signData.signDay = signData.sign_day;
		this.currentFee = signData.reward_list[Number(signData.sign_day)];
		this.signList = signList;
		this.signData = signData;
	},
	async getTaskList() {
		//每次展示刷新当前任务
		let list = await userTaskList().catch((err) => { console.log(err) });
		let dayList = list.date_tasks;
		let newList = list.new_user_tasks;
		//TODO数组处理
		this.dayList = dayList;
		this.newList = newList;
	},
	changeTab(type) {
		this.type = type;
	},
	closeRule() {
		this.showRule = false;
	},
	showRules() {
		this.showRule = true;
	},
	signToday() {
		noVipSign().then(res => {
			this.signList[this.signData.sign_day].iconType = 'checked'
			this.SignSuccess = true;
			this.signData.signDay++;
			this.signData.sign_day++;
			this.signData.is_sign = true;
			prompt.showToast("恭喜您签到成功！");
		})
	},
	pageRouter(page) {
		router.push({
			uri: page.redirect_url,
			params: {
				bid: page.bid,
				chapter_id: page.cid
			}
		})
	},
	closeSign() {
		this.SignSuccess = false;
	},
	async compeletTask(status, type, id, path) {
		if (this.isClick) return false;
		this.isClick = true;
		if (status == 2) {
			this.isClick = false;
			return false;
		} else if (status == 0) {
			this.isClick = false;
			this.goTask(type, path)
		} else {
			let data = await getTaskAward(id);
			this.getTaskList();
			this.isClick = false;
			prompt.showToast("领取成功！");
		}
		this.isClick = false;
	},
	goTask(type, path) {
		let _self = this;
		if (type == 'add_desk') {
			shortcut.hasInstalled({
				success: ret => {
					if (!ret) {
						shortcut.install({
							message: "添加【追书云】到桌面，方便下次阅读",
							success: () => {
								prompt.showToast("添加成功！");
								userAddDsktop(1).then(res => {
									_self.getTaskList();
								}).catch(r => {
									//TODO 失败后统计上报
								});

							},
							fail: code => {
								console.log(code)
							}
						});
					} else {
						userAddDsktop(1).then(res => {
							_self.getTaskList();
						}).catch(r => {
							//TODO 失败后统计上报
						});
					}
				}
			});

		} else if (path && path != '') {
			router.push({
				uri: path
			})
		}

	}

}
</script>
<style lang="less">
@import "../../assets/less/task.less";
</style>