pika_shangjia/integralShop/task/index.vue

<template>
	<view>
		<view :class="'top-fixed' + (skinNotColor ? ' not-color' : '')" :style="'height: ' + systems.barHeight + 'rpx;'">
			<view :class="'bgcolor' + (isTop == 1 ? ' opacity' : '')" :style="'height:' + systems.barHeight + 'rpx'"></view>
			<view class="top-fixed-c" :style="'height: ' + systems.navigationHeight + 'rpx;margin-top:' + systems.ktxStatusHeight + 'rpx;'">
				<navigator url="" hover-class="none" open-type="navigateBack" class="back"><image :src="picUrlss + 'back_white.png'"></image></navigator>
				<view class="top-title tover" :style="'line-height: ' + systems.navigationHeight + 'rpx;'">获取积分</view>
			</view>
		</view>
		<view class="top" :style="'padding-top: ' + systems.barHeight + 'rpx;'">
			<image src="../static/integralShop/images/task_bg.png" class="task-bg"></image>
			<view class="top-c ddflex">
				<view class="jifen fflex">
					<text>我的积分</text>
					{{ integralData.userIntegral }}
				</view>
				<view class="top-btn ddflex" @click="jumpUrl('/integralshop/index/index')">
					<image src="../static/integralShop/images/jfico3.png"></image>
					积分商城
				</view>
			</view>
		</view>
		<view class="date" v-if="taskSign && taskSign.response && taskSign.response.length > 0">
			<view class="date-list ddflex">
				<view :class="'li' + (item.isSign ? ' end' : item.sameDay ? ' ing' : '')" v-for="(item, index) in taskSign.response" :key="index">
					<view class="li-jifen ddflex" v-if="item.isSign"><image src="../static/integralShop/images/qd_gou.png" class="yiqian"></image></view>
					<view class="li-jifen ddflex" v-else>+{{ item.integral }}</view>
					<view class="day">{{ item.sameDay ? '今天' : item.time }}</view>
				</view>
			</view>

			<view class="date-btn" v-if="sameDayData.isSign == 1">今日已签到</view><!-- @click="jumpUrl('/integralshop/share/index?categoryId=' + taskSign.bindId)" -->
			<view class="date-btn" v-else @click="signIn()">签到赚 {{ sameDayData.integral }} 积分</view>
			<!-- <view class="date-btn" v-else @click="jumpUrl('/integralshop/share/index?categoryId=' + taskSign.bindId)">签到赚 {{ sameDayData.integral }} 积分</view> -->
		</view>
		<view class="task">
			<view class="tits">积分任务</view>
			<view class="task-list" v-if="taskPageList && taskPageList.length > 0">
				<view class="li ddflex" v-for="(item, index) in taskPageList" :key="index">
					<view class="fflex">
						<view class="task-name">
							{{ item.title }}
							<text>+{{ item.reward }}</text>
						</view>
						<view class="task-bri">{{ item.brief }}</view>
					</view>
					<view class="li-r">
						<!-- isGet  0、未领取 1、已领取 -->
						<block v-if="item.isGet == 1">
							<view class="task-btn end" v-if="item.isCompletion == 1">已完成</view>
							<block v-else>
								<view
									v-if="item.bindType == 1 && item.completionCount != item.taskCount"
									class="task-btn ing"
									@click="jumpUrl('/integralshop/activity/index?bindId=' + item.bindId)"
								>
									去完成
								</view>
								<view v-else class="task-btn ing" @click="getTaskReceiveReward(item.id, index)">领取积分</view>
							</block>
						</block>
						<view class="task-btn" v-else @click="getTaskReceive(item.id, index)">领取任务</view>
						<view class="task-num" v-if="item.taskCount > 0">{{ item.completionCount }}/{{ item.taskCount }}</view>
						<view class="task-num" v-else>不限次数</view>
					</view>
				</view>
			</view>
			<view class="nodata" v-else>
				<image :src="picUrlss + 'empty_dd.png'"></image>
				<text>暂无任务</text>
			</view>
		</view>
	</view>
</template>

<script>
// pages/sort/sort.js
//获取应用实例
const app = getApp();
const req = require('../../utils/request.js');

export default {
	data() {
		return {
			picUrlss: req.public.picUrls,
			systems: {},
			isTop: 0,
			taskPageList: '',
			integralData: '',
			taskSign: '',
			sameDayData: '' //当天
		};
	},
	onLoad: async function(options) {},

	onShow() {
		this.getTaskSign();
		this.getTaskPage();
		this.getIntegral();
	},

	onReachBottom() {},

	methods: {
		jumpUrl(url) {
			uni.navigateTo({
				url: url
			});
		},

		jumpUrlTab(url) {
			uni.switchTab({
				url: url
			});
		},

		getIntegral() {
			req.getRequest('/api/integral/totalIntegral', {}, res => {
				// console.log(res);
				this.integralData = res;
			});
		},

		getTaskSign() {
			req.getRequest('/api/v3/task/sign', { taskCode: 'top_sign' }, data => {
				this.taskSign = data;
				if (data && data.response && data.response.length > 0) {
					var list = data.response.filter(it => it.sameDay);
					if (list.length > 0) {
						this.sameDayData = list[0];
					}
				}
			});
		},

		getTaskPage() {
			req.getRequest('/api/v3/task/page', { limit: 20, page: 1 }, data => {
				this.taskPageList = data.list;
			});
		},

		getTaskReceive(taskId, index) {
			req.postRequest(
				'/api/v3/task/receive',
				{ taskId: taskId },
				data => {
					this.getTaskPage();
				},
				true
			);
		},

		getTaskReceiveReward(taskId, index) {
			req.postRequest(
				'/api/v3/task/receive/reward',
				{ taskId: taskId },
				data => {
					this.getTaskPage();
					this.getIntegral();
				},
				true
			);
		},
		signIn(id){
			req.postRequest('/api/integral/sign', {}, data => {
				if (data) {
					// req.msg('连续签到' + data.continuityDay + '天' + ',获得' + data.IntegralChange + '积分');
					this.sameDayData.isSign == 1
					this.getTaskSign();
					this.getIntegral();
				}
			});
		}
	},
	created() {
		const systemInfo = uni.getSystemInfoSync();
		// px转换到rpx的比例
		let pxToRpxScale = 750 / systemInfo.windowWidth;
		let systems = {
			ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
			navigationHeight: 44 * pxToRpxScale // 导航栏的高度
		};
		systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
		this.systems = systems;
	},
	onPageScroll: function(e) {
		if (e.scrollTop > this.systems.barHeight) {
			this.isTop = 1;
		} else {
			this.isTop = 0;
		}
	}
};
</script>
<style>
@import './index.css';
</style>