394 lines
12 KiB
Vue
394 lines
12 KiB
Vue
<template>
|
||
<view class="crystal">
|
||
<!-- 签到成功弹出 -->
|
||
<view class="signBack" v-if="sign.signShow"></view>
|
||
<view class="signPop" v-if="sign.signShow">
|
||
<image class="signPop-tips" src="../../static/user/sign_tips.png" mode="widthFix"></image>
|
||
<view class="signPop-cont">
|
||
<view class="signPop-cont-name">
|
||
签到成功
|
||
</view>
|
||
<view class="signPop-cont-text">
|
||
能量碎片<view class="signPop-cont-number">+{{sign.signSuccess}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 签到 -->
|
||
<view class="signCont">
|
||
<view class="content-title">
|
||
每日签到，能量碎片多多<image @click="showHelp" class="content-title-img" src="../../static/user/sign_privilege.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="sign">
|
||
<view class="sign-list" :class="{ active: item.sign }" v-for="(item, index) in sign.signArr" :key="index">
|
||
<view class="sign-tips" v-if="item.sign">
|
||
<view class="sign-tips-text">已签</view>
|
||
</view>
|
||
<block v-if="index == 7">
|
||
<image class="sign-list-img" :src="item.sign ? '../../static/user/sign_icon_last_active.png' : '../../static/user/sign_icon_last.png'" mode="aspectFill"></image>
|
||
</block>
|
||
<block v-else>
|
||
<image class="sign-list-img" :src="item.sign ? '../../static/user/sign_icon_active.png' : '../../static/user/sign_icon.png'" mode="aspectFill"></image>
|
||
</block>
|
||
<view class="sign-list-day">
|
||
{{ item.text }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="sign-record">再签到{{ sign.nextTask.day }}天额外赠送{{ sign.nextTask.diff }}个能量碎片</view>
|
||
</view>
|
||
<view class="signBtn">
|
||
<view class="signBtn-go" v-if="sign.signCan" @click="signClick" style="cursor:pointer" >
|
||
签到领取能量碎片
|
||
</view>
|
||
<view class="signBtn-go" v-else @click="$Router.push({name:'Fragment'})">
|
||
能量碎片记录<image class="signBtn-go-icon" src="/static/user/sign_arrow.png" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
<!-- 水晶任务 -->
|
||
<view class="task">
|
||
<view class="task-liest">
|
||
能量碎片任务
|
||
</view>
|
||
<view class="task-item" v-for="(item, index) in task" :key="index" @click="JumpUrl(item.url, item.title)">
|
||
<image class="task-icon" :src="item.ico" mode="aspectFill"></image>
|
||
<view class="task-title">{{item.title}}</view>
|
||
<view class="task-subtitle">{{item.remark}}</view>
|
||
<view class="task-label">{{item.tips}}<image @click.stop="showHelp" class="task-label-icon" src="@/static/imgs/user-crystalMark-grey.png"></image></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import { task, sign, operateSign } from '@/apis/interfaces/crystal'
|
||
import { userIndex } from '@/apis/interfaces/user'
|
||
export default {
|
||
data() {
|
||
return {
|
||
task: [],
|
||
sign: {
|
||
signArr : [],
|
||
nextTask: '',
|
||
signCan : false,
|
||
signShow: false,
|
||
signSuccess: ''
|
||
},
|
||
tips : {
|
||
tipsTitle : '', // 弹出的动态名称
|
||
tipsContent : '', // 弹出的动态内容
|
||
tipsState : false // 弹出的动态状态
|
||
},
|
||
energyShard : '' // 碎片说明
|
||
}
|
||
},
|
||
onShow() {
|
||
this.sign.signShow = false
|
||
// 获取能量领取信息
|
||
task().then(res => {
|
||
uni.hideLoading()
|
||
this.task = res
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: err.message
|
||
})
|
||
})
|
||
|
||
// 读取配置信息
|
||
userIndex().then(res=>{
|
||
this.energyShard = res.help_doc.energy_shard
|
||
}).catch(err =>{
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
|
||
// 获取水晶签到信息
|
||
this.signInfo();
|
||
|
||
},
|
||
methods: {
|
||
// 水晶签到信息
|
||
signInfo() {
|
||
sign().then(res => {
|
||
this.sign.signArr = res.lists
|
||
this.sign.nextTask = res.next_task
|
||
this.sign.signCan = res.can_sign
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: err
|
||
})
|
||
})
|
||
},
|
||
|
||
// 能量碎片提示信息
|
||
showHelp() {
|
||
uni.showModal({
|
||
title: '能量碎片',
|
||
content: this.energyShard.description,
|
||
showCancel: false
|
||
})
|
||
},
|
||
|
||
// 签到
|
||
signClick() {
|
||
uni.vibrateShort({
|
||
success: () => {
|
||
operateSign().then(res => {
|
||
this.sign.signSuccess = res.task_crystals
|
||
// 获取水晶签到信息
|
||
this.sign.signShow = true
|
||
this.signInfo();
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: err
|
||
})
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 能量跳转
|
||
JumpUrl(open, title) {
|
||
var type = open.openType;
|
||
switch(type){
|
||
case 'switchTab':
|
||
this.$Router.pushTab({name: open.path})
|
||
break;
|
||
case 'web':
|
||
window.location.href = open.path
|
||
break;
|
||
case 'navigateTo':
|
||
this.$Router.push({name: open.path})
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
page {
|
||
background: #FFFFFF;
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
// 弹出层
|
||
.signBack {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: fixed;
|
||
background-color: rgba(0,0,0,.7);
|
||
z-index: 98;
|
||
left: 0;
|
||
top: 0;
|
||
animation: cssAnimation 0s ease-in 4s forwards;
|
||
}
|
||
.signPop {
|
||
width: 60%;
|
||
position: fixed;
|
||
z-index: 99;
|
||
left: 20%;
|
||
top: 30%;
|
||
height: 160px;
|
||
animation: cssAnimation 0s ease-in 4s forwards;
|
||
.signPop-tips,
|
||
.signPop-cont{
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
}
|
||
.signPop-cont {
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
padding-top: 90px;
|
||
.signPop-cont-name {
|
||
font-size: 34rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.signPop-cont-text {
|
||
text-align: center;
|
||
.signPop-cont-number {
|
||
display: inline-block;
|
||
color: #ffee4d;
|
||
font-size: 38rpx;
|
||
color: #f9dc4a;
|
||
font-weight: 600;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes cssAnimation {
|
||
to {
|
||
width: 0;
|
||
height: 0;
|
||
visibility: hidden;
|
||
}
|
||
}
|
||
|
||
// 签到
|
||
.signCont {
|
||
background: #7c52fc;
|
||
color: #FFFFFF;
|
||
padding-bottom: 80rpx;
|
||
.content-title {
|
||
font-size: 40rpx;
|
||
padding: 50rpx 45rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
.content-title-img {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin: 12rpx 20rpx;
|
||
}
|
||
}
|
||
.sign {
|
||
margin: 0 0 30rpx;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
.sign-list {
|
||
width: calc(14.28% - 20rpx);
|
||
position: relative;
|
||
margin: 0 10rpx;
|
||
display: inline-block;
|
||
text-align: center;
|
||
background-color: rgba(0,0,0,.3);
|
||
border-radius: 10rpx;
|
||
padding: 20rpx 0;
|
||
box-sizing: border-box;
|
||
.sign-tips {
|
||
position: absolute;
|
||
top: -20rpx;
|
||
left: calc(50% - 30rpx);
|
||
background-color: #ef4034;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
height: 32rpx;
|
||
line-height: 30rpx;
|
||
width: 60rpx;
|
||
text-align: center;
|
||
border-radius: 6rpx;
|
||
.sign-tips-text {
|
||
transform: scale(0.85);
|
||
}
|
||
&::after {
|
||
position: absolute;
|
||
content: '';
|
||
left: calc(50% - 8rpx);
|
||
bottom: -6rpx;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 8rpx solid transparent;
|
||
border-right: 8rpx solid transparent;
|
||
border-top: 8rpx solid #ef4034;
|
||
}
|
||
}
|
||
.sign-list-img {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
.sign-list-day {
|
||
font-size: 24rpx;
|
||
}
|
||
&.active {
|
||
background-color: #ffdb00;
|
||
color: #413e30;
|
||
box-shadow: 0 0 20rpx rgba(76,43,177,.3);
|
||
}
|
||
}
|
||
}
|
||
.sign-record {
|
||
opacity: .8;
|
||
padding: 0 40rpx;
|
||
display: flex;
|
||
line-height: 44rpx;
|
||
}
|
||
}
|
||
|
||
// 签到按钮
|
||
.signBtn {
|
||
padding: 0 40rpx;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: -50rpx;
|
||
position: relative;
|
||
z-index: 2;
|
||
.signBtn-go {
|
||
width: 100%;
|
||
line-height: 100rpx;
|
||
border-radius: 80rpx;
|
||
background-color: #f9dc4a;
|
||
color: #333333;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
.signBtn-go-icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
vertical-align: -6rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 水晶任务
|
||
.task{
|
||
padding: 60rpx 30rpx;
|
||
box-sizing: border-box;
|
||
.task-liest {
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.task-item {
|
||
position: relative;
|
||
border-bottom: solid 2rpx #F5F5F5;
|
||
padding: 30rpx 200rpx 40rpx 90rpx;
|
||
&:last-child {
|
||
border: none;
|
||
}
|
||
.task-icon {
|
||
position: absolute;
|
||
top: 50rpx;
|
||
left: 0;
|
||
width: 58rpx;
|
||
height: 58rpx
|
||
}
|
||
.task-title {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
line-height: 50rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.task-subtitle {
|
||
color: #999;
|
||
font-size: 26rpx;
|
||
line-height: 30rpx;
|
||
}
|
||
.task-label {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 38rpx;
|
||
line-height: 80rpx;
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
display: -webkit-box;
|
||
display: -webkit-flex;
|
||
display: flex;
|
||
.task-label-icon {
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
margin: 24rpx 0 0 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|