hengmei-two/pagesA/activityTask/activityTask.vue

<template>
	<view>
		<!-- 状态栏 -->
		<status-nav :titleVal="'活动任务'" :statusTitle="true"></status-nav>
		<view :style="{paddingTop: statusHeight+'px'}" class="pad-zy32 pad-x20">
			<!-- 签到领积分 -->
			<view v-for="(item,index) in activityList" :key="index" class="bacf radius20 pad20 mar-s20">
				<view class="bold col3 disjbac">
					<view class="disac">
						<image :src="item.imgSrc" style="width: 60rpx;height: 60rpx;margin-right: 20rpx;" mode=""></image>
						<view class="fon28">{{item.title}}</view>
					</view>
					<view><span style="color: #3875F6;">{{item.danc}}</span>/{{item.allc}}</view>
				</view>
				<view class="fon24" style="color: #808080;">
					<view class="mar-s30">活动要求：{{item.description}}</view>
					<view class="mar-s20">获得奖励：{{item.amount}} <span v-if="item.isIcon!=1">积分</span><span v-else>孔雀币</span></view>
					<view class="mar-s20">会员：暂无</view>
					<view class="mar-s20">开始时间：{{item.startTime}}</view>
					<view class="mar-s20">结束时间：{{item.endTime}}</view>
				</view>
				<view class="disjcac">
					<!-- 线上签到 -->
					<view v-if="item.ntype=='sign_in'" class="disja">
						<view v-if="item.danc!=item.allc" @tap="goTosigin" class="mar-s30 activity-dai">立即签到</view>
						<view v-if="item.danc==item.allc && item.account_status!=1" @tap="btnEv(index)" class="mar-s30 activity-mo" style="background: #f8bf2c;">立即完成</view>
						<view v-if="item.danc==item.allc && item.account_status==1" class="activity-mo mar-s30">已完成</view>
					</view>
					<!-- 分享截图任务 -->
					<view v-if="item.ntype=='share_screenshots'" class="disja">
						<!-- <view @tap="btnEv(index)" class="activity-dai mar-s30">立即完成</view> -->
						<view v-if="item.account_status==3 || item.account_status==4" @tap="btnEv(index)" class="activity-dai mar-s30">立即完成</view>
						<view v-if="item.account_status==0" class="activity-mo mar-s30">审核中...</view>
						<view v-if="item.account_status==2" @tap="btnEv(index)" class="activity-dai mar-s30">审核不通过，重新提交审核</view>
						<view v-if="item.account_status==1" class="activity-mo mar-s30">已完成</view>
					</view>
					<!-- 线下签到 -->
					<view v-if="item.ntype=='offline_sign_in'" class="disja">
						<view v-if="item.account_status==4" @tap="btnEv(index)" class="mar-s30 activity-dai">立即完成</view>
						<view v-else class="activity-mo mar-s30">已完成</view>
					</view>
					<!-- 分享注册任务 -->
					<view v-if="item.ntype=='share'">
						<view v-if="item.account_status==4" @tap="btnEv(index)" class="mar-s30 activity-dai">立即完成</view>
						<view v-else class="activity-mo mar-s30">已完成</view>
					</view>
				</view>
			</view>
			<!-- 上传截图弹框 -->
			<view v-if="isScreenshot" @tap.stop="isScreenshot=false,upImg=''" class="posAll disjcac" style="padding: 0 85rpx;z-index: 3;">
				<view class="bacf width100" @tap.stop="isScreenshot=true" style="padding: 0 33rpx;border-radius: 20rpx;">
					<view class=" disjcac fc">
						<view class="fon32 col3 mar-s30 mar-x40">截图上传</view>
						<view v-if="upImg==''" @tap="chooseImg" class="task-add-box disjcac fc">
							<view class="posir disjcac mar-s50">
								<view class="posia task-add" style="transform: rotate(90deg);"></view>
								<view class="posia task-add"></view>
							</view>
							<view class="fon28 col9" style="margin-top: 120rpx;">点击上传截图</view>
						</view>
						<image v-else @tap="chooseImg" class="imgIng" :src="upImg" mode="aspectFill"></image>
					</view>
					<view class="disjbac mar-x20 tc">
						<view @tap.stop="isScreenshot=false,upImg=''" class="task-cancle-btn">取消</view>
						<view @tap.stop="shareEv" class="task-confrim-btn">确定</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 用户信息授权，手机号授权 -->
		<auth-userInfo-mobileInfo></auth-userInfo-mobileInfo>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isScreenshot:false,
				upImg:'',
				chooseIndex:0,
				activityList:[],//活动列表
				isNum:0,
				siginVal:'立即签到',
				partakeVal:'立即完成',
			}
		},
		onShow() {
			if(uni.getStorageSync('phone_active')!=0 && uni.getStorageSync('is_active')!=0){
				this.checkList();
			}
		},
		computed:{
			statusHeight() {
				return this.$store.state.statusHeight
			}
		},
		onLoad() {},
		methods: {
			btnEv(index){
				this.chooseIndex = index;
				if(this.activityList[index].ntype=='share_screenshots' && (this.activityList[index].account_status!=0 || this.activityList[index].account_status==2)){//分享截图测试
					this.isScreenshot = true;
				}
				if(this.activityList[index].ntype=='offline_sign_in' && this.activityList[index].account_status==4){//线下签到
					this.$toolAll.tools.showToast('请先完成任务，再来领取')
				}
				if(this.activityList[index].ntype=='share' && this.activityList[index].account_status==4){//分享注册任务
					uni.navigateTo({
						url:'/pagesB/personalPoster/personalPoster'
					})
				}
				if(this.activityList[index].danc == this.activityList[index].allc) {
					if(this.isNum==0) {
						this.isNum++;
						this.$requst.post('task/task/complete-task',{task_id:this.activityList[index].id}).then(res=>{
							if(res.code==0){
								this.isNum = 0;
								this.checkList();
							} else {
								setTimeout(()=>{
									this.isNum = 0;
								},2000)
								this.$toolAll.tools.showToast(res.msg);
							}
						})
					}
				}
				setTimeout(()=>{
					this.isNum = 0;
				},2000)
			},
			checkList(){//查询任务列表
				this.$requst.post('task/task/task-list').then(res=>{
					if(res.code==0){
						this.activityList = [];
						if(res.data.length!=0){
							res.data.forEach(item=>{
								let nIcon = 0;
								let nimg = '/static/public/task-01-60.png';
								if(item.icon==1) {
									nimg = '/static/public/task-02-60.png';
									nIcon = 1;
								} 
								if(item.icon==2) {
									nimg = '/static/public/task-03-60.png';
									nIcon = 2;
								} 
								if(item.icon==3) {
									nimg = '/static/public/task-04-60.png';
									nIcon = 3;
								} 
								let obj = {
									id:item.id,
									imgSrc:nimg,//icon图标
									title:item.title,//标题
									danc:item.completed_quantity,//进度次数
									allc:item.cycle,//总次数
									description:item.description,//活动要求
									amount:item.reward_number,//奖励数量
									account_status:item.account_status,
									member:'',//会员
									isStatus:item.status,
									startTime:item.start_at,//开始时间
									endTime:item.end_at,//结束时间
									isIcon:nIcon,//什么类型的任务 0签到 1孔雀币 2积分 3分享截图
									ntype:item.type//签到类型
								}
								this.activityList.push(obj);
							})
						}
						// account_status: 1	用户任务状态 0待审核 1正常 2拒绝 3重复完成（也是正常的一种）
						// completed_quantity: 0	完成进度
						// create_time: "2021-10-20 18:12:37"	任务创建时间
						// cycle: 1		周期数
						// description: ""		任务简介
						// end_at: "2021-10-30"		任务结束时间
						// id: 4	任务的id
						// long_term: 0		是否长期任务 长期为0
						// repeat: 0	是否可以重复完成
						// reward_number: 10	奖励总数
						// reward_type: "coin"	奖励类型 孔雀币或者积分
						// start_at: "2020-10-20"	任务开始时间
						// status: 1	任务状态 1 进行中 0 冻结
						// title: "分享截图任务"		任务标题
						// type: "share_screenshots"	任务类型 'share','sign_in','offline_sign_in','share_screenshots'型 分享 签到 线下签到 分享截图
					}
				})
			},
			chooseImg(){//选择图片事件
				uni.chooseImage({
					count:1,
					sourceType:['album'],
					success: (res) => {
						this.upImg = res.tempFilePaths[0];
						this.$requst.upload('file/upload/image',{file:this.upImg}).then(res=>{
							this.upImg = this.$http + res.data.src;
							this.$toolAll.tools.showToast('图片上传成功(*^▽^*)')
							this.isNum = 1;
						},error=>{})
					}
				})
			},
			shareEv(){//确认上传凭证
				if(this.isNum==1) {
					this.isNum++;
					this.$requst.post('task/task/complete-task',{task_id:this.activityList[this.chooseIndex].id,image:this.upImg}).then(res=>{
						if(res.code==0){
							this.isNum = 0;
							this.isScreenshot = false;
							this.upImg = '';
							this.$toolAll.tools.showToast('截图已上传');
							this.checkList();
						} else {
							setTimeout(()=>{
								this.isNum = 0;
							},2000)
							this.$toolAll.tools.showToast(res.msg);
						}
					})
				}
			},
			goTosigin(){
				uni.navigateTo({
					url:'/pagesA/signIn/signIn'
				})
			}
		}
	}
</script>

<style>
	.isWen{color: #3875F6;}
	.isWen::after{
		content: '';
		display: block;
		height: 8rpx;
		width: 80%;
		position: absolute;
		bottom: -20rpx;
		left: 50%;
		transform: translateX(-50%);
		background: #3875F6;
	}
</style>