510 lines
12 KiB
Vue
510 lines
12 KiB
Vue
<template>
|
||
<view>
|
||
<touch-popup @close="close" ref="popup" background="transparent">
|
||
<view class="tabbar">
|
||
<view class="top-icon">
|
||
<view class="icon-item">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/touch-close-white.png" mode="heightFix"></image>
|
||
</view>
|
||
<view class="icon-item"></view>
|
||
</view>
|
||
<view class="top-left">
|
||
<view class="top-left-item" >
|
||
<view style="padding-top: 15px;">签到中心</view>
|
||
<view class="mybalance">
|
||
<text>我的橡果</text>
|
||
<text>{{user.amount}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="top-right">
|
||
<view class="top-right-item">
|
||
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/index/logo.png" mode="heightFix"></image>
|
||
<view class="sign-hint">
|
||
<view class="">
|
||
记得签到！
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view class="list" scroll-y>
|
||
<!-- 签到 -->
|
||
<view class="pd-15">
|
||
<view class="bck-group">
|
||
<view class="sign-title">
|
||
<text>已连续签到{{signUser.continuity_days}}天</text>
|
||
<text>再连续签到{{dayCount}}天，共获得{{dayAmount}}橡果</text>
|
||
</view>
|
||
<view class="sign-content">
|
||
<view class="sign-item" v-for="(item,index) in signConfig" key="sign">
|
||
<view class="sign-item-top">
|
||
<view style="flex: 1;padding: 2px;">
|
||
<view class="sign-item-icon" :class="{ 'sign-check': item.day <= signUser.continuity_days }">
|
||
<view>
|
||
<image style="width: 18px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/signin/icon-松果.png" mode="widthFix"></image>
|
||
</view>
|
||
<view style="height: 12px;">
|
||
<image v-if="item.day <= signUser.continuity_days" style="width: 12px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/signin/signin-ok.png" mode="widthFix"></image>
|
||
<text v-else style="font-size: 8px;">+{{item.number}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="sign-item-bottom">
|
||
<view class="" style="display: flex;width: 100%;">
|
||
<view class="signline" :class="{ 'bck-black' : item.day > 1 && item.day <= signUser.continuity_days }"></view>
|
||
<view class="signcircle" :class="{ 'bck-black': item.day <= signUser.continuity_days }"></view>
|
||
<view class="signline":class="{ 'bck-black': item.day < signConfig.length && item.day <= signUser.continuity_days }"></view>
|
||
</view>
|
||
<view class="signtext">
|
||
<text v-if="item.day <= signUser.continuity_days">{{signUser.is_sign && item.day === signUser.continuity_days ? '今日': ''}}已签</text>
|
||
<text v-else>{{item.day}}天</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="sign-btn">
|
||
<view class="sign-btn-item" @click="signDo">
|
||
<text>{{signUser.is_sign ? '今日已签到' : '签到领取橡果'}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 活动 -->
|
||
<view class="pd-15">
|
||
<view class="bck-group">
|
||
<view class="task-title">
|
||
今日活动
|
||
</view>
|
||
<view class="task-content">
|
||
<view class="task-item">
|
||
<view class="task-item-left">
|
||
<image style="width: 30px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/signin/icon-星星.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="task-item-center">
|
||
<view class="">
|
||
橡果大转盘
|
||
</view>
|
||
<view>
|
||
今日首次免费
|
||
</view>
|
||
</view>
|
||
<view class="task-item-right">
|
||
<view class="task-btn" @click="openLottery">
|
||
<text>打开</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</scroll-view>
|
||
|
||
</touch-popup>
|
||
<popup-lottery ref="pLottery"></popup-lottery>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
const app = getApp()
|
||
import { ref, defineExpose, getCurrentInstance, computed } from 'vue'
|
||
import touchPopup from '@/components/touch-popup/touch-popup'
|
||
const popup = ref() // ref组件
|
||
const pLottery = ref()
|
||
const {proxy} = getCurrentInstance()
|
||
|
||
const signConfig = ref([]) // 签到公共信息
|
||
const signUser = ref({}) // 用户的签到信息
|
||
const user = ref({}) // 用户信息，展示橡果数量
|
||
|
||
/* 计算属性 */
|
||
const dayCount = computed(() => {
|
||
return signConfig.value.length - signUser.value.continuity_days
|
||
})
|
||
const dayAmount = computed(() => {
|
||
let amount = 0
|
||
for (let i = signUser.value.continuity_days;i < signConfig.value.length;i++) {
|
||
amount += signConfig.value[i].number
|
||
}
|
||
return amount
|
||
})
|
||
|
||
/* 方法 */
|
||
const openLottery = () => {
|
||
pLottery.value.open()
|
||
}
|
||
const signDo = () => {
|
||
if (signUser.value.is_sign) {
|
||
uni.showToast({
|
||
title: '今日已签到～',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
// 签到
|
||
uni.showLoading({
|
||
title: '正在签到'
|
||
})
|
||
uni.request({
|
||
url: app.globalData.requestUrl + '/api/user/sign',
|
||
header: {
|
||
'Authorization': 'Bearer ' + app.globalData.token
|
||
},
|
||
method: 'POST',
|
||
success: (res) => {
|
||
if (res.data.code === 200) {
|
||
// 更改本地余额
|
||
uni.request({
|
||
url: app.globalData.requestUrl + '/api/user',
|
||
header: {
|
||
'Authorization': 'Bearer ' + app.globalData.token
|
||
},
|
||
success: (res) => {
|
||
app.globalData.userinfo = res.data.data
|
||
getUserSignInfo(false) // 再次请求用户签到信息
|
||
},
|
||
complete() {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '签到成功',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
const open = () => {
|
||
user.value = app.globalData.userinfo
|
||
if (JSON.stringify(signUser.value) !== '{}'){
|
||
popup.value.open()
|
||
return
|
||
}
|
||
uni.showLoading()
|
||
uni.request({
|
||
url: app.globalData.requestUrl + '/api/sign/config',
|
||
header: {
|
||
'Authorization': 'Bearer ' + app.globalData.token
|
||
},
|
||
success: (res) => {
|
||
console.log(res.data)
|
||
signConfig.value = res.data.data
|
||
getUserSignInfo()
|
||
},
|
||
fail() {
|
||
uni.showToast({
|
||
title: '获取签到信息失败',
|
||
icon: 'none'
|
||
})
|
||
},
|
||
complete() {
|
||
uni.hideLoading()
|
||
}
|
||
})
|
||
}
|
||
/**
|
||
* 请求用户签到信息
|
||
*/
|
||
const getUserSignInfo = (first = true) => {
|
||
uni.request({
|
||
url: app.globalData.requestUrl + '/api/user/sign/info',
|
||
header: {
|
||
'Authorization': 'Bearer ' + app.globalData.token
|
||
},
|
||
success(res2) {
|
||
console.log(res2.data)
|
||
if (!res2.data.data.hasOwnProperty('continuity_days')) {
|
||
res2.data.data.continuity_days = 0
|
||
res2.data.data.is_sign = false
|
||
res2.data.data.last_sign = '1970-01-01 03:00:00'
|
||
}
|
||
signUser.value = res2.data.data
|
||
},
|
||
complete() {
|
||
if (first) {
|
||
popup.value.open()
|
||
} else {
|
||
user.value = app.globalData.userinfo
|
||
}
|
||
}
|
||
})
|
||
}
|
||
const close = () => {
|
||
proxy.$emit('close')
|
||
}
|
||
defineExpose({
|
||
open
|
||
}) // 暴露方法
|
||
</script>
|
||
|
||
<style scoped>
|
||
.signtext {
|
||
padding-top: 5px;
|
||
font-family: Noto Sans S Chinese;
|
||
font-size: 8px;
|
||
font-weight: 400;
|
||
line-height: 12px;
|
||
color: #717171;
|
||
}
|
||
.mybalance text:first-child {
|
||
font-family: Noto Sans S Chinese;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
line-height: 18px;
|
||
}
|
||
.mybalance text:last-child {
|
||
font-family: Noto Sans S Chinese;
|
||
font-size: 26px;
|
||
font-weight: 700;
|
||
line-height: 39px;
|
||
margin-left: 5px;
|
||
}
|
||
.task-btn {
|
||
border: 1px solid #70EB3D;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
padding: 5px 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.task-item-right {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.task-item-center view:first-child {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
}
|
||
.task-item-center view:last-child {
|
||
font-size: 12px;
|
||
color: #717171;
|
||
}
|
||
.task-item-center {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 2px 5px;
|
||
}
|
||
.task-item-left {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 5px;
|
||
}
|
||
.task-item {
|
||
display: flex;
|
||
padding: 10px 0;
|
||
}
|
||
.task-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.task-title {
|
||
display: flex;
|
||
font-weight: 700;
|
||
}
|
||
.sign-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 5px;
|
||
justify-content: center;
|
||
}
|
||
.sign-btn-item text {
|
||
background: linear-gradient(90deg, #BFFF90 0%, #26FFB3 100%);
|
||
color: transparent;
|
||
-webkit-background-clip: text;
|
||
font-family: Noto Sans S Chinese;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
line-height: 21px;
|
||
}
|
||
.sign-btn-item {
|
||
background-color: #000;
|
||
width: 200px;
|
||
border-radius: 20px;
|
||
height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.bck-black {
|
||
background-color: #000 !important;
|
||
}
|
||
.bck-white {
|
||
background-color: #FFF !important;
|
||
}
|
||
.signline {
|
||
flex: 1;
|
||
height: 3px;
|
||
width: 100%;
|
||
background-color: transparent;
|
||
}
|
||
.signcircle {
|
||
height: 7px;
|
||
width: 7px;
|
||
border-radius: 3px;
|
||
background-color: transparent;
|
||
}
|
||
.sign-item-bottom {
|
||
flex-direction: column;
|
||
width: 100%;
|
||
padding-top: 2px;
|
||
}
|
||
.sign-check {
|
||
border: 2px solid #70EB3D !important;
|
||
}
|
||
.sign-item-icon {
|
||
padding: 4px 7px;
|
||
flex-direction: column;
|
||
border-radius: 6px;
|
||
border: 2px solid transparent;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
}
|
||
.sign-item-top {
|
||
flex: 1;
|
||
display: flex;
|
||
}
|
||
.sign-content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||
padding: 10px 0;
|
||
}
|
||
.sign-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.sign-item view {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.sign-title {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.sign-title text:first-child {
|
||
font-family: Noto Sans S Chinese;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
line-height: 18px;
|
||
}
|
||
.sign-title text:last-child {
|
||
font-family: Noto Sans S Chinese;
|
||
font-size: 9px;
|
||
font-weight: 400;
|
||
line-height: 13.5px;
|
||
color: #717171;
|
||
}
|
||
.bck-group {
|
||
background: #F5F5F5CC;
|
||
border-radius: 15px;
|
||
padding: 10px;
|
||
}
|
||
.pd-15 {
|
||
padding: 8px 15px;
|
||
}
|
||
.list {
|
||
background: linear-gradient(#acf393, #11ffb7);
|
||
height: calc(100% - 66px);
|
||
position: absolute;
|
||
z-index: 2;
|
||
}
|
||
.list .item {
|
||
background: #F5F5F5CC;
|
||
border-radius: 15px;
|
||
display: flex;
|
||
padding: 25px 15px;
|
||
margin: 15px;
|
||
flex-direction: column;
|
||
|
||
}
|
||
.tabbar {
|
||
display: flex;
|
||
}
|
||
.top-left {
|
||
flex: 1;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.top-right {
|
||
flex: 1;
|
||
background: linear-gradient(#c1fe8e, #acf393); /* 绿色 */
|
||
}
|
||
.top-left-item, .top-right-item {
|
||
flex: 1;
|
||
display: flex;
|
||
padding: 0 15px;
|
||
height: 78px;
|
||
}
|
||
.top-left-item {
|
||
flex-direction: column;
|
||
border-top-right-radius: 15px;
|
||
background: linear-gradient(#c1fe8e, #acf393); /* 绿色 */
|
||
font-family: Noto Sans S Chinese;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
line-height: 27px;
|
||
}
|
||
.top-right-item {
|
||
background-color: #fff;
|
||
justify-content: center;
|
||
border-bottom-left-radius: 15px;
|
||
}
|
||
.top-right-item image {
|
||
height: 150px;
|
||
width: auto;
|
||
position: absolute;
|
||
z-index: 1;
|
||
top: -55px;
|
||
}
|
||
.sign-hint {
|
||
position: absolute;
|
||
top: -60px;
|
||
width: 325rpx;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
}
|
||
.sign-hint view {
|
||
width: 100px;
|
||
display: flex;
|
||
margin-left: -50px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #fff;
|
||
border-radius: 16px;
|
||
height: 48px;
|
||
}
|
||
.top-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
position: absolute;
|
||
width: 100%;
|
||
padding: 6px 0;
|
||
}
|
||
.top-icon image {
|
||
height: 6px;
|
||
}
|
||
.icon-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 1;
|
||
}
|
||
</style> |