hengmei-two/pagesA/activityTask/activityTask.vue

254 lines
9.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="pad-x180">
<!-- 状态栏 -->
<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 class="posixzy">
<bottom-tab></bottom-tab>
</view>
</view>
</template>
<script>
import bottomTab from '@/components/bottom-tab.vue';
export default {
components: {
bottomTab,
},
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>