<template> <view> <!-- 状态栏 --> <status-nav :titleVal="'活动任务'" :statusTitle="true"></status-nav> <view :style="{paddingTop: statusHNH+'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 class="bacf radius20 pad20 mar-s20"> <view class="bold col3 disjbac"> <view class="disac"> <image src="/static/public/task-02-60.png" style="width: 60rpx;height: 60rpx;margin-right: 20rpx;" mode=""></image> <view class="fon28">分享孔雀币</view> </view> <view><span style="color: #3875F6;">0</span>/7</view> </view> <view class="fon24" style="color: #808080;"> <view class="mar-s30">活动要求:成功分享并注册成为会员9人可获得30孔雀币</view> <view class="mar-s20">获得奖励:10孔雀币</view> <view class="mar-s20">会员:暂无</view> <view class="mar-s20">结束时间:2021-09-10 10:30</view> </view> <view class="disjcac"> <view class="mar-s30" style="width: 546rpx;height: 70rpx;line-height: 70rpx;text-align: center;border-radius: 35rpx;font-size: 30rpx;color: #FFFFFF;background: #3875F6;">立即参与</view> </view> </view> --> <!-- 分享领积分 --> <!-- <view class="bacf radius20 pad20 mar-s20"> <view class="bold col3 disjbac"> <view class="disac"> <image src="/static/public/task-03-60.png" style="width: 60rpx;height: 60rpx;margin-right: 20rpx;" mode=""></image> <view class="fon28">分享领积分</view> </view> <view><span style="color: #3875F6;">0</span>/7</view> </view> <view class="fon24" style="color: #808080;"> <view class="mar-s30">活动要求:成功分享并注册成为会员2人可获得100积分</view> <view class="mar-s20">获得奖励:10孔雀币</view> <view class="mar-s20">会员:暂无</view> <view class="mar-s20">结束时间:2021-09-10 10:30</view> </view> <view class="disjcac"> <view class="mar-s30" style="width: 546rpx;height: 70rpx;line-height: 70rpx;text-align: center;border-radius: 35rpx;font-size: 30rpx;color: #FFFFFF;background: #3875F6;">立即参与</view> </view> </view> --> <!-- 分享至朋友圈 --> <!-- <view class="bacf radius20 pad20 mar-s20"> <view class="bold col3 disjbac"> <view class="disac"> <image src="/static/public/task-04-60.png" style="width: 60rpx;height: 60rpx;margin-right: 20rpx;" mode=""></image> <view class="fon28">分享至朋友圈</view> </view> <view><span style="color: #3875F6;">1</span>/1</view> </view> <view class="fon24" style="color: #808080;"> <view class="mar-s30">活动要求:成功分享并上传截图,认证通过后获得</view> <view class="mar-s20">获得奖励:20积分</view> <view class="mar-s20">会员:暂无</view> <view class="mar-s20">结束时间:2021-09-10 10:30</view> </view> <view class="disjcac"> <view @tap="isScreenshot=true" :style="{background:!isScreenshot?publicColor:'#CCCCCC'}" class="mar-s30" style="width: 546rpx;height: 70rpx;line-height: 70rpx;text-align: center;border-radius: 35rpx;font-size: 30rpx;color: #FFFFFF;">{{!isScreenshot?'立即参与':'审核中...'}}</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> </view> </template> <script> export default { data() { return { statusHNH:uni.getStorageSync('statusHNH'), publicColor:uni.getStorageSync('publicColor'),//主题颜色 isScreenshot:false, upImg:'', chooseIndex:0, activityList:[],//活动列表 isNum:0, siginVal:'立即签到', partakeVal:'立即完成' } }, onShow() { this.$toolAll.tools.isLogin(); this.checkList(); }, 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>