<template>
|
<view class="content">
|
<view class="header">
|
<image class="header-background-image" src="/static/icon/task/background_task_header.png" mode="widthFix"></image>
|
<view class="header-text">
|
<view class="header-text-1">完成任务</view>
|
<view class="header-text-2">领取<text>饮水币</text>奖励</view>
|
</view>
|
</view>
|
<view class="container">
|
<view class="card">
|
<view class="cell-item">
|
<image class="cell-item-image" src="/static/icon/task/icon_task_logo.png" mode="widthFix"></image>
|
<view class="cell-item-info">
|
<view class="cell-item-info-title">注册</view>
|
<view class="cell-item-gold">
|
<image class="icon" src="/static/icon/task/icon_gold.png" mode="widthFix"></image>
|
<view class="text">+{{list[0].gold}}</view>
|
</view>
|
</view>
|
<block>
|
<button class="button handle-button disabled" disabled>已完成</button>
|
</block>
|
</view>
|
<view class="cell-item">
|
<image class="cell-item-image" src="/static/icon/task/icon_task_logo.png" mode="widthFix"></image>
|
<view class="cell-item-info">
|
<view class="cell-item-info-title">完善资料</view>
|
<view class="cell-item-gold">
|
<image class="icon" src="/static/icon/task/icon_gold.png" mode="widthFix"></image>
|
<view class="text">+{{list[1].gold}}</view>
|
</view>
|
</view>
|
<block>
|
<button class="button handle-button" v-if="list[1].state == 1" @click="$navTo('/pages/user/index/setting')">去完成</button>
|
<button class="button handle-button disabled" disabled v-if="list[1].state == 2">已完成</button>
|
</block>
|
</view>
|
<view class="cell-item">
|
<image class="cell-item-image" src="/static/icon/task/icon_task_logo.png" mode="widthFix"></image>
|
<view class="cell-item-info">
|
<view class="cell-item-info-title">邀请好友</view>
|
<view class="cell-item-gold">
|
<image class="icon" src="/static/icon/task/icon_gold.png" mode="widthFix"></image>
|
<view class="text">+{{list[9].gold}}</view>
|
</view>
|
</view>
|
<block>
|
<!-- <button class="button handle-button disabled" disabled v-if="userInfo.inviteNumber >= 10">已完成</button> -->
|
<view class="button-text">已完成<text>{{userInfo.inviteNumber}}个</text></view>
|
</block>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
list:[],
|
userInfo:{}
|
};
|
},
|
onLoad() {
|
this.init()
|
},
|
methods:{
|
init(){
|
this.$apis.user.getTaskList().then(res=>{
|
this.list = res.data
|
})
|
this.$apis.user.getUserInfo().then(res=>{
|
this.userInfo = res.data
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.content{
|
.header{
|
position: relative;
|
.header-background-image{
|
width: 750rpx;
|
}
|
.header-text{
|
position: absolute;
|
top: 103rpx;
|
left: 28rpx;
|
.header-text-1{
|
font-family: AliHYAiHei, AliHYAiHei;
|
font-size: 69rpx;
|
color: #FFFFFF;
|
line-height: 92rpx;
|
text-shadow: 0px 4px 8px rgba(255,39,41,0.29);
|
}
|
.header-text-2{
|
font-family: PingFangSC, PingFang SC;
|
font-size: 35rpx;
|
color: #FFFFFF;
|
line-height: 48rpx;
|
letter-spacing: 6px;
|
text{
|
color: #FFDD00;
|
font-size: 35rpx;
|
line-height: 48rpx;
|
}
|
}
|
}
|
}
|
.container{
|
padding: 0 26rpx 0 28rpx;
|
margin-top: -90rpx;
|
position: relative;
|
z-index: 2;
|
.card{
|
background-color: #FFFFFF;
|
border-radius: 19rpx;
|
padding: 14rpx 30rpx;
|
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,.4);
|
.cell-item{
|
display: flex;
|
align-items: center;
|
margin: 18rpx 0 26rpx;
|
.cell-item-image{
|
width: 80rpx;
|
}
|
.cell-item-info{
|
flex: 1;
|
padding-left: 15rpx;
|
.cell-item-info-title{
|
font-weight:700;
|
font-size: 31rpx;
|
color: #000000;
|
line-height: 42rpx;
|
}
|
.cell-item-gold{
|
display: flex;
|
align-items: center;
|
margin-top: 4rpx;
|
.icon{
|
width: 27rpx;
|
}
|
.text{
|
font-size: 23rpx;
|
color: rgba(0,0,0,.6);
|
line-height: 23rpx;
|
}
|
}
|
}
|
.handle-button{
|
width: 136rpx;
|
height: 54rpx;
|
background: #FF2729;
|
border-radius: 27rpx;
|
font-family: PingFang-SC, PingFang-SC;
|
font-size: 27rpx;
|
color: #FFFFFF;
|
line-height: 38rpx;
|
&.disabled{
|
background-color: rgba(0,0,0,.2);
|
}
|
}
|
.button-text{
|
font-size: 23rpx;
|
color: rgba(0,0,0,.6);
|
line-height: 33rpx;
|
text{
|
font-weight: bold;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
