|
|
@@ -0,0 +1,312 @@
|
|
|
+<template>
|
|
|
+ <view class="task-page">
|
|
|
+ <!-- 顶部积分信息 -->
|
|
|
+ <view class="points-header">
|
|
|
+ <view class="points-item">
|
|
|
+ <view class="img">
|
|
|
+ <u-avatar size="96rpx" default-url="/static/common/avatar.png" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="points-item">
|
|
|
+ <text class="points-value">{{ pointsData.current }}</text>
|
|
|
+ <text class="points-label">我的积分</text>
|
|
|
+ </view>
|
|
|
+ <view class="points-item">
|
|
|
+ <text class="points-value">{{ pointsData.completedTasks }}</text>
|
|
|
+ <text class="points-label">已完成任务</text>
|
|
|
+ </view>
|
|
|
+ <view class="points-item">
|
|
|
+ <text class="points-value">{{ pointsData.pendingTasks }}</text>
|
|
|
+ <text class="points-label">待完成任务</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="container">
|
|
|
+ <!-- 标签切换 -->
|
|
|
+ <u-tabs
|
|
|
+ :list="tabs"
|
|
|
+ :current="categoryIndex"
|
|
|
+ @change="handleTabChange"
|
|
|
+ lineWidth="60"
|
|
|
+ lineColor="#20CAC2"
|
|
|
+ :activeStyle="{
|
|
|
+ color: '#303133',
|
|
|
+ fontWeight: 'bold',
|
|
|
+ transform: 'scale(1.05)'
|
|
|
+ }"
|
|
|
+ :inactiveStyle="{
|
|
|
+ color: '#606266',
|
|
|
+ transform: 'scale(1)'
|
|
|
+ }"
|
|
|
+ itemStyle="padding:0 55rpx; height: 72rpx;font-size:28rpx"
|
|
|
+ class="tabs-container"
|
|
|
+ ></u-tabs>
|
|
|
+
|
|
|
+ <!-- 任务列表 -->
|
|
|
+ <view class="tasks-container">
|
|
|
+ <u-list style="height:calc(75vh - 60rpx)">
|
|
|
+ <u-list-item v-for="(task, index) in filteredTasks" :key="task.id" class="task-item">
|
|
|
+ <view class="task-icon">
|
|
|
+ <image :src="task.icon" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="task-info">
|
|
|
+ <text class="task-name">{{ task.name }}</text>
|
|
|
+ <view class="task-reward">
|
|
|
+ <ImageItem src="/static/points/point.png"/>
|
|
|
+ <text>+{{ task.reward }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="task-progress">
|
|
|
+ <text class="progress-text">{{ task.current }}/{{ task.target }}</text>
|
|
|
+ <button class="task-button" @click="handleTask(task)">
|
|
|
+ {{ task.current >= task.target ? '已完成' : '去完成' }}
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </u-list-item>
|
|
|
+ <!-- 空数据状态 -->
|
|
|
+ <u-empty
|
|
|
+ v-if="filteredTasks.length === 0"
|
|
|
+ icon="document"
|
|
|
+ text="暂无任务"
|
|
|
+ mode="page"
|
|
|
+ ></u-empty>
|
|
|
+ </u-list>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import ImageItem from "@/components/swiper/components/image.vue";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "taskList",
|
|
|
+ components: {ImageItem},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 积分数据
|
|
|
+ pointsData: {
|
|
|
+ current: 563,
|
|
|
+ completedTasks: 10,
|
|
|
+ pendingTasks: 15
|
|
|
+ },
|
|
|
+ // 标签数据
|
|
|
+ tabs: [
|
|
|
+ { key: 'new', name: '新手任务' },
|
|
|
+ { key: 'daily', name: '每日任务' },
|
|
|
+ { key: 'monthly', name: '每月任务' }
|
|
|
+ ],
|
|
|
+ // 当前选中的标签
|
|
|
+ activeTab: 'new',
|
|
|
+ // 任务数据
|
|
|
+ tasks: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ type: 'new',
|
|
|
+ name: '完成一次订单',
|
|
|
+ reward: 20,
|
|
|
+ current: 2,
|
|
|
+ target: 2,
|
|
|
+ icon: '/static/points/task_order.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ type: 'new',
|
|
|
+ name: '浏览动态',
|
|
|
+ reward: 20,
|
|
|
+ current: 0,
|
|
|
+ target: 1,
|
|
|
+ icon: '/static/points/task_trend.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ type: 'new',
|
|
|
+ name: '浏览商户',
|
|
|
+ reward: 20,
|
|
|
+ current: 2,
|
|
|
+ target: 2,
|
|
|
+ icon: '/static/points/task_shop.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ type: 'new',
|
|
|
+ name: '分享服务号',
|
|
|
+ reward: 20,
|
|
|
+ current: 2,
|
|
|
+ target: 2,
|
|
|
+ icon: '/static/points/task_wx.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ type: 'new',
|
|
|
+ name: '完成账号充值',
|
|
|
+ reward: 20,
|
|
|
+ current: 0,
|
|
|
+ target: 500,
|
|
|
+ icon: '/static/points/task_account.png'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ categoryIndex() {
|
|
|
+ return this.tabs.findIndex(item => item.key === this.activeTab)
|
|
|
+ },
|
|
|
+ // 过滤后的任务
|
|
|
+ filteredTasks() {
|
|
|
+ return this.tasks.filter(task => task.type === this.activeTab)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 切换标签
|
|
|
+ handleTabChange(data) {
|
|
|
+ this.activeTab = data.key
|
|
|
+ // 重置滚动位置
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const list = this.$refs.list
|
|
|
+ if (list) {
|
|
|
+ list.scrollTo(0, 0)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 处理任务
|
|
|
+ handleTask(task) {
|
|
|
+ if (task.current < task.target) {
|
|
|
+ console.log('去完成任务:', task.name)
|
|
|
+ // 这里可以跳转到相应的任务页面
|
|
|
+ } else {
|
|
|
+ console.log('任务已完成:', task.name)
|
|
|
+ // 这里可以领取奖励
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.task-page{
|
|
|
+ width: 750rpx;
|
|
|
+ min-height: 100vh;
|
|
|
+ background-image: url("@/static/points/pointBg.png");
|
|
|
+ background-size: 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-color: #ffe5ca;
|
|
|
+ padding-top: 48rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.points-header{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin-bottom: 42rpx;
|
|
|
+ padding: 0 36rpx;
|
|
|
+ .points-item{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .points-label{
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 24rpx;
|
|
|
+ }
|
|
|
+ .points-value{
|
|
|
+ font-family: DIN, DIN;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 32rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.container{
|
|
|
+ width: 686rpx;
|
|
|
+ height: 83vh;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ .tabs-container{
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.tasks-container{
|
|
|
+ .task-item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ flex-direction: row;
|
|
|
+ .task-icon{
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ image{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .task-info{
|
|
|
+ flex: 1;
|
|
|
+ .task-name{
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 28rpx;
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+ }
|
|
|
+ .task-reward {
|
|
|
+ display: inline-flex;
|
|
|
+ height: 32rpx;
|
|
|
+ background: #FBF2E1;
|
|
|
+ border-radius: 22rpx;
|
|
|
+ padding-right: 12rpx;
|
|
|
+ image{
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-right: 4rpx;
|
|
|
+ }
|
|
|
+ text{
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FF9F00;
|
|
|
+ line-height: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .task-progress{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ .progress-text{
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 28rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+ .task-button{
|
|
|
+ width: 120rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ background: linear-gradient( 78deg, #1AD8CF 0%, #21C8C0 100%);
|
|
|
+ border-radius: 98rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 48rpx;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
xyh
