first commit
This commit is contained in:
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
|
||||
|
||||
<view v-if="loading" class="" style="margin: 20rpx;">
|
||||
<!-- 收益统计骨架 -->
|
||||
<view class="skeleton-card">
|
||||
<view class="skeleton-slot skeleton-title"></view>
|
||||
<view class="skeleton-slot skeleton-subtitle"></view>
|
||||
<view class="skeleton-slot skeleton-progress"></view>
|
||||
</view>
|
||||
|
||||
<!-- 签到区域骨架 -->
|
||||
<view class="skeleton-slot skeleton-section-title"></view>
|
||||
<view class="skeleton-signin-area"></view>
|
||||
|
||||
<!-- 任务列表骨架 -->
|
||||
<view class="skeleton-slot skeleton-section-title"></view>
|
||||
<view class="skeleton-task-list">
|
||||
<view class="skeleton-task-item" v-for="index in 3" :key="index">
|
||||
<view style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<view class="skeleton-slot skeleton-task-name"></view>
|
||||
<view class="skeleton-slot skeleton-task-progress"></view>
|
||||
</view>
|
||||
<view class="skeleton-slot skeleton-task-reward"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 说明文字骨架 -->
|
||||
<view class="skeleton-slot skeleton-note"></view>
|
||||
</view>
|
||||
|
||||
<view v-else style="margin: 20rpx ;">
|
||||
<view class=""
|
||||
style="background: linear-gradient(to bottom,#FFF8F0,#fff 90%); border-radius: 20rpx; padding: 40rpx 20rpx; ">
|
||||
<view class="" style="font-size: 34rpx; font-weight: 600; color: red; ">
|
||||
今日最高可赚 ¥45.00
|
||||
</view>
|
||||
<view class="" style="margin: 15rpx 0; color: #666666;">
|
||||
已获得 ¥12.00
|
||||
</view>
|
||||
<up-line-progress :percentage="30" inactiveColor='#FFEFD5' activeColor='#FF6F00'
|
||||
:showText="false"></up-line-progress>
|
||||
</view>
|
||||
<view class="" style="margin-top: 20rpx; font-size: 34rpx; font-weight: 600; ">
|
||||
每日签到
|
||||
</view>
|
||||
|
||||
<view class=""
|
||||
style=" width: 100%; box-shadow: 0 0 10rpx 0 #e2e2e2 ; border-radius: 20rpx; margin-top: 20rpx; ">
|
||||
<calendar :insert="true" :lunar="true" :selected='selected' :start-date="'2019-3-2'" />
|
||||
</view>
|
||||
|
||||
<view class="" style="margin-top: 20rpx; font-size: 34rpx; font-weight: 600; ">
|
||||
冲单奖励任务
|
||||
</view>
|
||||
<view class="" style="margin-top: 20rpx;">
|
||||
<view class="" v-for="(orderItem,orderIndex) in 3" :key="orderIndex"
|
||||
style=" margin-bottom: 30rpx; padding: 20rpx 30rpx; box-shadow: 0 0 10rpx 0 #e2e2e2 ; border-radius: 20rpx; ">
|
||||
<view class="" style="display: flex; align-items: center;justify-content: space-between;">
|
||||
<view class="" style="font-size: 30rpx; font-weight: 600; ">
|
||||
今日完成10单
|
||||
</view>
|
||||
<view class=""
|
||||
style="border: 1rpx solid var(--nav-mian); color: var(--nav-mian); border-radius: 30rpx; font-size: 26rpx; padding: 6rpx 24rpx; display: flex; align-items: center; justify-content: center; ">
|
||||
6/10
|
||||
</view>
|
||||
</view>
|
||||
<view class="" style="color: red; margin-top: 10rpx; ">
|
||||
奖励¥20.00
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class=""
|
||||
style="border-radius: 10rpx; background-color: #F9F9F9; padding: 20rpx; 30rpx;margin-top: 30rpx;">
|
||||
奖励将在任务完成后24小时内发放至钱包,可在‘收入中心’查看。
|
||||
</view>
|
||||
<view class="" style="width: 100vw; height: 100rpx; " >
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onShow, onLoad } from "@dcloudio/uni-app";
|
||||
import { Service } from "@/Service/Service"
|
||||
import { ref } from "vue";
|
||||
import calendar from "@/uni_modules/uni-calendar/components/uni-calendar/uni-calendar"
|
||||
|
||||
|
||||
let loading = ref(true)
|
||||
|
||||
let selected = ref([{ date: '2025-10-27', info: '签到'}])
|
||||
|
||||
onLoad(() => {
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 1000)
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 骨架屏样式 - 纯CSS实现 */
|
||||
.skeleton-slot {
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
/* 骨架屏动画 */
|
||||
@keyframes skeleton-loading {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 收益统计骨架 */
|
||||
.skeleton-card {
|
||||
background: linear-gradient(to bottom, #fff8f0, #fff 90%);
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx 20rpx;
|
||||
}
|
||||
|
||||
.skeleton-title {
|
||||
width: 60%;
|
||||
height: 34rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.skeleton-subtitle {
|
||||
width: 40%;
|
||||
height: 28rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.skeleton-progress {
|
||||
width: 100%;
|
||||
height: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
/* 区域标题骨架 */
|
||||
.skeleton-section-title {
|
||||
width: 30%;
|
||||
height: 34rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
/* 签到区域骨架 */
|
||||
.skeleton-signin-area {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 0 10rpx 0 #e2e2e2;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
/* 任务列表骨架 */
|
||||
.skeleton-task-list {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.skeleton-task-item {
|
||||
margin-bottom: 30rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
box-shadow: 0 0 10rpx 0 #e2e2e2;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.skeleton-task-name {
|
||||
width: 40%;
|
||||
height: 30rpx;
|
||||
}
|
||||
|
||||
.skeleton-task-progress {
|
||||
width: 120rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 25rpx;
|
||||
}
|
||||
|
||||
.skeleton-task-reward {
|
||||
width: 25%;
|
||||
height: 28rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
/* 说明文字骨架 */
|
||||
.skeleton-note {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user