451 lines
16 KiB
Vue
451 lines
16 KiB
Vue
<template>
|
||
<view class="mission">
|
||
<!-- 姓名 头像 已领DT积分 已领商品 -->
|
||
<view class="top">
|
||
<image class="bg" src="/static/mission/diwen.png" mode="widthFix" />
|
||
<view class="userinfo">
|
||
<view class="nickname" >{{user.nickname}}</view>
|
||
</view>
|
||
<view class="avatar" > <image :src="user.avatar" mode="aspectFill" /> </view>
|
||
<view class="count">
|
||
<view class="count-item" @click="onTab('GetDt')">
|
||
<view class="number">{{user.DtScore}} </view>
|
||
<view class="des"> 已领DT积分 </view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="count-item" @click="onTab('GetGoods')">
|
||
<view class="number">{{user.goodsNum}} </view>
|
||
<view class="des"> 已领商品 </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 看视频 得积分 -->
|
||
<!--
|
||
giftCode:item.me.code, // 任务是否完成 1 已完成 2 未完成
|
||
is_gift :item.me.is_gift, // 1已领取 0 未领取
|
||
gift_type:item.gift_type.code, //1商品 2 dt 积分
|
||
-->
|
||
<view class="list-content" v-if="videos.length>0">
|
||
<view class="title">
|
||
<image class="bind" src="/static/mission/icon-right.png" mode="widthFix" />
|
||
<view class="name">看视频得奖励</view>
|
||
<image class="bind" src="/static/mission/icon-left.png" mode="widthFix" />
|
||
<view class="right-title" @click="change('1')" >
|
||
<block v-if="videoHasMore"> <image :class="['change',canRotate0?'rotateChange':'']" src="/static/mission/change.png" mode="widthFix" /> 换一换 </block>
|
||
</view>
|
||
</view>
|
||
<block>
|
||
<view class="list" v-for="item in videos" :key="item.task_id">
|
||
<image class='icon' src="/static/mission/video.png" mode="widthFix" />
|
||
<view class="list-item">
|
||
<view class="list-item-left">
|
||
<view class="item-title">{{item.title}}<span v-if="item.gift_type && item.gift_type.code == 2">+{{item.attach_gift.price}}</span> </view>
|
||
<view class="item-des"> {{item.description}}</view>
|
||
</view>
|
||
<view class="list-item-right">
|
||
<view class="btn" v-if="item.me.code == 0 || item.me.code == 2" @click="goPlay(item.task_id)">去完成</view>
|
||
<block v-if="item.me && item.me.code == 1">
|
||
<block v-if="item.gift_type && item.gift_type.code == 1">
|
||
<view class="btn" v-if="item.me && item.me.is_gift == 0" @click="goAdr(item.task_id)">完善收货</view>
|
||
<view class="btn" v-if="item.me && item.me.is_gift == 1" >已完成</view>
|
||
</block>
|
||
<block v-if="item.gift_type && item.gift_type.code == 2">
|
||
<view class="btn">已完成</view>
|
||
</block>
|
||
</block>
|
||
<view class="count" v-if="item.type && item.type.code == 1 "> ({{item.me.number}}/{{item.attach_type.num}}）</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
|
||
<!-- 做任务 得积分 -->
|
||
<!--
|
||
giftCode:item.me.code, // 任务是否完成 1 已完成 2完成一半 0未开始
|
||
is_gift :item.me.is_gift, // 1已领取 0 未领取
|
||
gift_type:item.gift_type.code, //1商品 2 dt 积分
|
||
-->
|
||
<view class="list-content">
|
||
<view class="title" style="margin-top:30rpx;">
|
||
<image class="bind" src="/static/mission/icon-right.png" mode="widthFix" />
|
||
<view class="name">做任务得积分</view>
|
||
<image class="bind" src="/static/mission/icon-left.png" mode="widthFix" />
|
||
<view class="right-title" @click="change('2')" >
|
||
<block v-if="missionsHasMore">
|
||
<image :class="['change',canRotate1?'rotateChange':'']" src="/static/mission/change.png" mode="widthFix" /> 换一换
|
||
</block>
|
||
</view>
|
||
</view>
|
||
<block v-if="missions.length>0">
|
||
<view class="list" v-for="item in missions" :key="item.task_id">
|
||
<image class='icon' src="/static/mission/mission.png" mode="widthFix" />
|
||
<view class="list-item">
|
||
<view class="list-item-left">
|
||
<view class="item-title">{{item.title}}<span v-if="item.gift_type && item.gift_type.code == 2">+{{item.attach_gift.price}}</span> </view>
|
||
<view class="item-des"> {{item.description}}</view>
|
||
</view>
|
||
<view class="list-item-right">
|
||
<view class="btn" @click="goWebView(item.task_id)">去完成</view>
|
||
<!-- <view class="count">({{item.me.number}}/{{item.attach_type.num}}）</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {list,user} from '@/apis/interfaces/mission.js'
|
||
import eventBus from '@/utils/eventBus.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
videos: [],
|
||
videoPage: 1,
|
||
videoHasMore: true,
|
||
missions: [],
|
||
missionsPage: 1,
|
||
missionsHasMore: true,
|
||
canRotate0: false,
|
||
canRotate1: false,
|
||
user:{},
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.getUser();
|
||
this.getList(1);
|
||
// this.getList(2);
|
||
eventBus.$on('played', (data)=> {
|
||
let index = this.videos.findIndex((item) => item.task_id == data.task_id);
|
||
this.videos[index].me.number = data.number
|
||
this.videos[index].me.is_gift = data.is_gift
|
||
this.videos[index].me.code = data.code
|
||
});
|
||
},
|
||
destroyed() {
|
||
eventBus.$off('played')
|
||
},
|
||
methods: {
|
||
getUser(){
|
||
user().then(res=>{
|
||
res.base.DtScore = res.DtScore
|
||
res.base.goodsNum = res.goodsNum
|
||
this.user = res.base
|
||
}).catch(err=>{
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none',
|
||
mask: true,
|
||
duration: 2000,
|
||
})
|
||
})
|
||
},
|
||
goPlay(id) {
|
||
uni.navigateTo({
|
||
url: '/pages/mission/videoPlay/videoPlay?id=' + id,
|
||
})
|
||
},
|
||
goAdr(id){
|
||
uni.navigateTo({
|
||
url:'/pages/address/index?task_id='+id
|
||
})
|
||
},
|
||
goWebView(id){
|
||
uni.navigateTo({
|
||
url: '/pages/mission/webview/webview?id=' + id,
|
||
})
|
||
},
|
||
getList(type) {
|
||
let data = {
|
||
page: type == 1 ? this.videoPage : this.missionsPage,
|
||
type: type,
|
||
}
|
||
list(data).then(res => {
|
||
if (type == 1) {
|
||
if (this.videoPage == 1) {
|
||
this.videos = [];
|
||
}
|
||
this.videoHasMore = res.page.has_more;
|
||
this.videos = res.data
|
||
return;
|
||
}
|
||
|
||
if (type == 2) {
|
||
if (this.missionsPage == 1) {
|
||
this.missions = [];
|
||
}
|
||
this.missionsHasMore = res.page.has_more;
|
||
this.missions = res.data
|
||
return;
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none',
|
||
mask: true,
|
||
duration: 2000,
|
||
})
|
||
})
|
||
},
|
||
change(num) {
|
||
switch (num) {
|
||
case '1':
|
||
this.canRotate0 = true;
|
||
if (this.videoHasMore) {
|
||
this.videoPage = this.videoPage + 1;
|
||
} else {
|
||
this.videoPage = 1;
|
||
}
|
||
this.getList(1);
|
||
break;
|
||
case '2':
|
||
// if(this.videoHasMore){
|
||
// this.videoPage = this.videoPage + 1;
|
||
// }else{
|
||
// this.videoPage = 1;
|
||
// }
|
||
break;
|
||
}
|
||
this.close();
|
||
},
|
||
close() {
|
||
setTimeout(() => {
|
||
this.canRotate0 = false;
|
||
this.canRotate1 = false;
|
||
}, 3000)
|
||
},
|
||
// 跳转已领取的 dt 积分和商品
|
||
onTab(it) {
|
||
this.$Router.push({
|
||
name: it
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.top {
|
||
width: 100%;
|
||
height: 300rpx;
|
||
background-color: #e74a45;
|
||
position: relative;
|
||
padding-top: 140rpx;
|
||
margin-bottom: $padding * 5;
|
||
|
||
// 背景图片
|
||
.bg {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
bottom: 0;
|
||
}
|
||
|
||
// 用户信息
|
||
.userinfo {
|
||
color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
|
||
.nickname {
|
||
padding-bottom: 30rpx;
|
||
padding-left: 14rpx;
|
||
}
|
||
}
|
||
|
||
// 头像
|
||
.avatar {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
top: 10rpx;
|
||
z-index: 2;
|
||
|
||
image {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 50%;
|
||
box-shadow: 0 2rpx 20rpx 2rpx rgba(255, 0, 0, 0.3);
|
||
border: solid 10rpx rgba(255, 255, 255, 0.8);
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
|
||
// 积分数量
|
||
.count {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
margin: 0 $margin;
|
||
padding: $padding*3 $padding $padding $padding;
|
||
border-radius: 20rpx;
|
||
box-shadow: 0 0 20rpx 4rpx rgba(255, 0, 0, 0.1);
|
||
position: relative;
|
||
top: -$padding * 2;
|
||
|
||
.line {
|
||
width: 2rpx;
|
||
height: 60rpx;
|
||
background-color: #cacaca;
|
||
}
|
||
|
||
.count-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
font-size: 26rpx;
|
||
|
||
.number {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.des {
|
||
color: #626675;
|
||
padding-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.list-content {
|
||
.title {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
padding: 0 $padding;
|
||
|
||
.bind {
|
||
width: 100rpx;
|
||
}
|
||
|
||
.right-title {
|
||
margin-left: $margin * 2;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
box-sizing: border-box;
|
||
font-size: 26rpx;
|
||
color: #626675;
|
||
|
||
.change {
|
||
width: 30rpx;
|
||
height: 0;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.rotateChange {
|
||
animation: fadenum1;
|
||
animation-duration: 1s;
|
||
}
|
||
|
||
@keyframes fadenum1 {
|
||
100% {
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.name {
|
||
padding: $padding $padding - 10;
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
color: #454545;
|
||
}
|
||
}
|
||
|
||
.list {
|
||
padding: 0 $padding;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
|
||
.icon {
|
||
width: 60rpx;
|
||
height: 0;
|
||
}
|
||
|
||
.list-item {
|
||
border-bottom: solid 1rpx #f9f9f9;
|
||
flex: 1;
|
||
margin-left: $margin;
|
||
padding: $padding 0;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
|
||
.list-item-left {
|
||
flex: 1;
|
||
}
|
||
|
||
.list-item-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
align-items: center;
|
||
margin-left: $margin;
|
||
|
||
.btn {
|
||
background-color: #e74a45;
|
||
color: #fff;
|
||
border-radius: 40rpx;
|
||
padding: 12rpx $padding;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.count {
|
||
color: #626675;
|
||
font-size: 24rpx;
|
||
padding-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.item-title {
|
||
font-size: 30rpx;
|
||
|
||
span {
|
||
padding-left: $padding - 10;
|
||
color: #e74a45;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
|
||
.item-des {
|
||
padding-top: 10rpx;
|
||
color: #999;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|