Răsfoiți Sursa

feat:做任务赚积分模块提交

xyh 5 luni în urmă
părinte
comite
3a5a9671f9

+ 171 - 0
src/points/components/task-list/task-list.vue

@@ -0,0 +1,171 @@
+<template>
+  <view class="task-list-container">
+    <view class="task-list-header">
+      <text class="task-list-title">做任务赚积分</text>
+    </view>
+    <view class="task-list">
+      <view 
+        v-for="(task, index) in tasks" 
+        :key="index"
+        class="task-item"
+        @click="handleTask(task, index)"
+      >
+        <view class="task-item-left">
+          <view class="task-icon" :class="task.iconClass">
+            <image src="@/static/points/task_order.png"></image>
+<!--            <image src="@/static/points/task_shop.png"></image>-->
+<!--            <image src="@/static/points/task_trend.png"></image>-->
+<!--            <image src="@/static/points/task_wx.png"></image>-->
+<!--            <image src="@/static/points/task_account.png"></image>-->
+          </view>
+
+          <view class="task-info">
+            <view class="task-name">{{ task.name }}</view>
+            <view class="task-reward">
+              <image src="@/static/points/point.png"></image>
+              <text>+{{ task.reward }}</text>
+            </view>
+          </view>
+        </view>
+        <view class="task-item-right">
+          <button class="task-btn" @click.stop="handleTask(task, index)">
+            {{ task.status === 'completed' ? '已完成' : '去完成' }}
+          </button>
+        </view>
+      </view>
+    </view>
+    <view class="more-tasks" @click="handleMoreTasks">
+      赚更多积分 >
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tasks: [
+        {
+          id: 1,
+          name: '完成一次订单',
+          reward: 20,
+          status: 'pending',
+          icon: 'order',
+          iconClass: 'order-icon'
+        },
+        {
+          id: 2,
+          name: '浏览动态',
+          reward: 20,
+          status: 'pending',
+          icon: 'browse',
+          iconClass: 'browse-icon'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleTask(task, index) {
+      if (task.status !== 'completed') {
+        this.$emit('task', task)
+      }
+    },
+    handleMoreTasks() {
+      this.$emit('moreTasks')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.task-list-container {
+  background-color: #fff;
+  border-radius: 20rpx;
+  padding: 24rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  
+  .task-list-header {
+    margin-bottom: 26rpx;
+    
+    .task-list-title {
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #333;
+    }
+  }
+  
+  .task-list {
+    .task-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 15rpx;
+      .task-item-left {
+        display: flex;
+        align-items: center;
+        
+        .task-icon {
+          width: 72rpx;
+          height: 72rpx;
+          margin-right: 18rpx;
+          image{
+            width: 72rpx;
+            height: 72rpx;
+          }
+        }
+        
+        .task-info {
+          .task-name {
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            font-size: 28rpx;
+            color: #333333;
+            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-item-right {
+        .task-btn {
+          width: 126rpx;
+          height: 48rpx;
+          background: #03C1B8;
+          border-radius: 98rpx;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 500;
+          font-size: 26rpx;
+          color: #FFFFFF;
+          line-height: 48rpx;
+        }
+      }
+    }
+  }
+  
+  .more-tasks {
+    text-align: center;
+    font-weight: 500;
+    font-size: 28rpx;
+    color: #999999;
+  }
+}
+</style>

+ 1 - 1
src/points/home/index.vue

@@ -67,7 +67,7 @@ export default {
   width: 750rpx;
   height: 890rpx;
   position: relative;
-  padding: 52px 32rpx 0 32rpx;
+  padding: 52rpx 32rpx 0 32rpx;
   .points-header {
     width: 100%;
     padding: 0 12rpx;

BIN
src/static/points/point.png


BIN
src/static/points/task_account.png


BIN
src/static/points/task_order.png


BIN
src/static/points/task_shop.png


BIN
src/static/points/task_trend.png


BIN
src/static/points/task_wx.png