|
|
@@ -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>
|