feat：积分商城积分明细和任务列表界面的接口对接

src/api/points.js

@@ -1,11 +1,11 @@
 import request from "@/utils/request.js";
 
 //获取我的积分信息
-export function getMyPoint(data) {
+export function getMyPoint(query) {
     return request({
         method: 'get',
         url: '/user/point',
-        data
+        query: query
     });
 }
 //周签到信息查询
@@ -36,6 +36,25 @@ export function getHomeTask(data) {
 }
 
 
+//积分明细
+export function getPointDetails(data) {
+    return request({
+        method: 'post',
+        url: '/user/point/page',
+        data
+    });
+}
+
+//任务明细
+export function getPointTaskList(data) {
+    return request({
+        method: 'post',
+        url: '/user/point/activity/page',
+        data
+    });
+}
+
+
 
 
 

src/points/components/task-list/task-list.vue

@@ -25,7 +25,8 @@
           <button 
             :class="task.completedStatus == 1 ? 'task-btn' : 'no-task-btn'" 
             @click.stop="handleTask(task)"
-            :disabled="task.completedStatus == 1">
+            :disabled="task.completedStatus == 1"
+          >
             {{ task.completedStatus == 1 ? '已完成' : '去完成' }}
           </button>
         </view>

src/points/home/index.vue

@@ -20,11 +20,11 @@ export default {
     }),
     // 总积分
     totalPoints() {
-      return this.myPoint.totalPoints || 0;
+      return this.myPoint && this.myPoint.totalPoints || 0;
     },
     // 本月新获取积分
     monthlyPoints() {
-      return this.myPoint.earnedPoints || 0;
+      return this.myPoint && this.myPoint.earnedPoints || 0;
     }
   },
   data() {
@@ -43,11 +43,18 @@ export default {
       }
     }
   },
-  mounted() {
+  onLoad(options) {
     // 初始化数据
     this.initData();
     // 绑定滚动事件
     this.bindScrollEvent();
+    // 检查 URL 参数，如果需要滚动到搜索框
+    if (options.scrollToSearch === '1') {
+      // 延迟执行，确保页面已经加载完成
+      setTimeout(() => {
+        this.scrollToSearch();
+      }, 1000);
+    }
   },
   beforeUnmount() {
     // 解绑滚动事件
@@ -276,11 +283,23 @@ export default {
     },
     // 滚动到搜索框
     scrollToSearch() {
-      const homeEl = this.$el;
-      if (homeEl) {
-        // 滚动到商品列表的位置，使搜索框显示在顶部
-        const scrollDistance = 470; // 积分任务区域的高度
-        homeEl.scrollTop = scrollDistance;
+      // 滚动到商品列表的位置，使搜索框显示在顶部
+      const scrollDistance = 470; // 积分任务区域的高度
+      
+      if (process.env.UNI_PLATFORM === 'h5') {
+        // 在H5端使用元素的scrollTop
+        const homeEl = this.$el;
+        if (homeEl) {
+          homeEl.scrollTop = scrollDistance;
+          // 更新滚动距离
+          this.scrollTop = scrollDistance;
+        }
+      } else {
+        // 在非H5端使用uni.pageScrollTo
+        uni.pageScrollTo({
+          scrollTop: scrollDistance,
+          duration: 300
+        });
         // 更新滚动距离
         this.scrollTop = scrollDistance;
       }

src/points/pointInfo/billPage.vue

@@ -20,7 +20,7 @@
       <!-- 标签切换 -->
       <u-tabs
           :list="tabs"
-          :current="categoryIndex"
+          :current="opType"
           @change="handleTabChange"
           lineWidth="60"
           lineColor="#20CAC2"
@@ -39,23 +39,26 @@
 
       <!-- 积分记录列表 -->
       <view class="records-container">
-        <u-list @scrolltolower="loadMore" style="height:calc(75vh - 60rpx)">
-          <u-list-item v-for="(item, index) in filteredRecords" :key="item.id" class="record-item">
+        <u-list @scrolltolower="loadMore" ref="list" style="height:calc(75vh - 60rpx)">
+          <u-list-item v-for="(item, index) in filteredRecords" :key="index" class="record-item">
             <view class="record-info">
-              <text class="record-description">{{ item.description }}</text>
-              <text class="record-date">{{ item.date }}</text>
+              <text class="record-description">{{ item.activityName }}</text>
+              <text class="record-date">{{ item.createTime }}</text>
             </view>
-            <text class="record-amount" :class="{ income: item.amount > 0, expense: item.amount < 0 }">
-              {{ item.amount > 0 ? '+' : '' }}{{ item.amount }}
+            <text class="record-amount" :class="{ income: item.opType == 2, expense: item.opType == 1 }">
+              {{ item.opType == 1 ? '+' : '-' }}{{ item.points }}
             </text>
           </u-list-item>
           <!-- 空数据状态 -->
           <u-empty 
-            v-if="filteredRecords.length === 0"
-            icon="document"
+            v-if="filteredRecords.length === 0 && !loading"
             text="暂无积分记录"
-            mode="page"
+            mode="list"
           ></u-empty>
+          <!-- 加载中状态 -->
+          <view v-if="loading && filteredRecords.length === 0" class="loading-container">
+            <u-loading-icon text="加载中..."></u-loading-icon>
+          </view>
           <!-- 加载更多 -->
           <u-loadmore 
             v-if="filteredRecords.length > 0"
@@ -72,42 +75,23 @@
 
 <script>
 import {mapState} from "vuex";
-
+import { getPointDetails } from '@/api/points'
 export default {
   name: "billPage",
   data() {
     return {
       // 标签数据
       tabs: [
-        { key: 'all', name: '明细' },
-        { key: 'income', name: '收入' },
-        { key: 'expense', name: '支出' }
+        { key: '', name: '明细' },
+        { key: '1', name: '收入' },
+        { key: '2', name: '支出' }
       ],
       // 当前选中的标签
-      activeTab: 'all',
+      activeTab: '',
       // 积分记录数据
-      pointRecords: [
-        { id: 1, type: 'order', description: '订单消费', amount: 10, date: '2026.10.1 12:22:54' },
-        { id: 2, type: 'exchange', description: '购物兑换', amount: -10, date: '2026.10.1 12:22:54' },
-        { id: 3, type: 'order', description: '完成订单', amount: 10, date: '2026.10.1 12:22:54' },
-        { id: 4, type: 'reward', description: '好评奖励', amount: -10, date: '2026.10.1 12:22:54' },
-        { id: 5, type: 'order', description: '完成订单', amount: 10, date: '2026.10.1 12:22:54' },
-        { id: 6, type: 'reward', description: '好评奖励', amount: -10, date: '2026.10.1 12:22:54' },
-        { id: 7, type: 'order', description: '订单消费', amount: 10, date: '2026.10.1 12:22:54' },
-        { id: 8, type: 'exchange', description: '购物兑换', amount: -10, date: '2026.10.1 12:22:54' },
-        { id: 9, type: 'order', description: '完成订单', amount: 10, date: '2026.10.1 12:22:54' },
-        { id: 10, type: 'reward', description: '好评奖励', amount: -10, date: '2026.10.1 12:22:54' },
-        { id: 11, type: 'order', description: '完成订单', amount: 10, date: '2026.10.1 12:22:54' },
-        { id: 12, type: 'reward', description: '好评奖励', amount: -10, date: '2026.10.1 12:22:54' },
-        { id: 13, type: 'order', description: '订单消费', amount: 10, date: '2026.10.1 12:22:54' },
-        { id: 14, type: 'exchange', description: '购物兑换', amount: -10, date: '2026.10.1 12:22:54' },
-        { id: 15, type: 'order', description: '完成订单', amount: 10, date: '2026.10.1 12:22:54' },
-        { id: 16, type: 'reward', description: '好评奖励', amount: -10, date: '2026.10.1 12:22:54' },
-        { id: 17, type: 'order', description: '完成订单', amount: 10, date: '2026.10.1 12:22:54' },
-        { id: 18, type: 'reward', description: '好评奖励', amount: -10, date: '2026.10.1 12:22:54' }
-      ],
+      pointRecords: [],
       // 分页数据
-      page: 1,
+      pageNum: 1,
       pageSize: 10,
       hasMore: true,
       loading: false
@@ -118,69 +102,70 @@ export default {
       myPoint: state => state.points.myPoint
     }),
     totalPoints() {
-      return this.myPoint.totalPoints || 0;
+      return this.myPoint && this.myPoint.totalPoints || 0;
     },
     earnedPoints() {
-      return this.myPoint.earnedPoints || 0;
+      return this.myPoint && this.myPoint.earnedPoints || 0;
     },
     expirePoints() {
-      return this.myPoint.expirePoints || 0;
+      return this.myPoint && this.myPoint.expirePoints || 0;
     },
-    categoryIndex() {
+    opType() {
       return this.tabs.findIndex(item => item.key === this.activeTab)
     },
-    // 过滤后的积分记录
+    // 积分记录（直接使用原始数据，因为已经通过接口参数过滤）
     filteredRecords() {
-      if (this.activeTab === 'all') {
-        return this.pointRecords
-      } else if (this.activeTab === 'income') {
-        return this.pointRecords.filter(record => record.amount > 0)
-      } else if (this.activeTab === 'expense') {
-        return this.pointRecords.filter(record => record.amount < 0)
-      }
+      return this.pointRecords
     }
   },
+  mounted() {
+    // 初始获取数据
+    this.fetchPointDetails()
+  },
   methods: {
     // 切换标签
     handleTabChange(data) {
       this.activeTab = data.key
       // 重置分页数据
-      this.page = 1
+      this.pageNum = 1
       this.hasMore = true
-      // 重置滚动位置
-      this.$nextTick(() => {
-        const list = this.$refs.list
-        if (list) {
-          list.scrollTo(0, 0)
-        }
-      })
+      // 清空数据
+      this.pointRecords = []
+      // 重新获取数据
+      this.fetchPointDetails();
     },
     // 加载更多数据
     loadMore() {
       if (this.loading || !this.hasMore) return
       
+      this.pageNum++
+      this.fetchPointDetails(true)
+    },
+    // 获取积分明细数据
+    async fetchPointDetails(isLoadMore = false) {
       this.loading = true
-      this.page++
-      
-      // 模拟加载数据
-      setTimeout(() => {
-        // 模拟新数据
-        const newRecords = [
-          { id: this.pointRecords.length + 1, type: 'order', description: '订单消费', amount: 10, date: '2026.10.1 12:22:54' },
-          { id: this.pointRecords.length + 2, type: 'exchange', description: '购物兑换', amount: -10, date: '2026.10.1 12:22:54' },
-          { id: this.pointRecords.length + 3, type: 'order', description: '完成订单', amount: 10, date: '2026.10.1 12:22:54' }
-        ]
-        
-        // 添加新数据
-        this.pointRecords = [...this.pointRecords, ...newRecords]
-        
-        // 模拟没有更多数据
-        if (this.page >= 3) {
-          this.hasMore = false
+      try {
+        const res = await getPointDetails({
+          pageNum: this.pageNum,
+          pageSize: this.pageSize,
+          opType: this.activeTab
+        })
+        if (res.code === 200) {
+          if (isLoadMore) {
+            // 加载更多数据
+            this.pointRecords = [...this.pointRecords, ...res.rows]
+          } else {
+            // 初始加载数据
+            this.pointRecords = res.rows
+          }
+          // 判断是否还有更多数据
+          this.hasMore = this.pointRecords.length < res.total
         }
-        
+      } catch (error) {
+        console.error('获取积分明细失败:', error)
+      } finally {
         this.loading = false
-      }, 1000)
+      }
     }
   }
 }
@@ -271,5 +256,13 @@ export default {
       }
     }
   }
+  .u-empty{
+    margin-top: 20vh!important;
+  }
+  
+  /* 加载中容器 */
+  .loading-container {
+    margin-top: 20vh!important;
+  }
 }
 </style>

src/points/pointInfo/taskList.vue

@@ -25,7 +25,7 @@
       <!-- 标签切换 -->
       <u-tabs
           :list="tabs"
-          :current="categoryIndex"
+          :current="type"
           @change="handleTabChange"
           lineWidth="60"
           lineColor="#20CAC2"
@@ -44,32 +44,52 @@
 
       <!-- 任务列表 -->
       <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">
+        <u-list 
+          ref="taskList"
+          @scrolltolower="loadMore" 
+          style="height:calc(75vh - 60rpx)"
+        >
+          <u-list-item v-for="(task, index) in tasks" :key="index" class="task-item">
             <view class="task-icon">
-              <image :src="task.icon" mode="aspectFill"></image>
+              <image :src="getTaskIcon(task.taskName)" mode="aspectFill"></image>
             </view>
             <view class="task-info">
-              <text class="task-name">{{ task.name }}</text>
+              <text class="task-name">{{ task.taskName }}</text>
               <view class="task-reward">
                 <ImageItem src="/static/points/point.png"/>
-                <text>+{{ task.reward }}</text>
+                <text>+{{ task.rewardPoints }}</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 ? '已完成' : '去完成' }}
+              <text class="progress-text">{{ task.completedCount }}/{{ task.triggerValue }}</text>
+              <button 
+                :class="task.completedCount >= task.triggerValue ? 'task-btn' : 'no-task-btn'" 
+                @click.stop="handleTask(task)"
+                :disabled="task.completedCount >= task.triggerValue"
+              >
+                {{ task.completedCount >= task.triggerValue ? '已完成' : '去完成' }}
               </button>
             </view>
           </u-list-item>
           <!-- 空数据状态 -->
           <u-empty
-              v-if="filteredTasks.length === 0"
+              v-if="tasks.length === 0 && !loading"
               icon="document"
               text="暂无任务"
               mode="page"
           ></u-empty>
+          <!-- 加载中状态 -->
+          <view v-if="loading && tasks.length === 0" class="loading-container">
+            <u-loading-icon text="加载中..."></u-loading-icon>
+          </view>
+          <!-- 加载更多 -->
+          <u-loadmore 
+            v-if="tasks.length > 0"
+            :status="loading ? 'loading' : (hasMore ? 'more' : 'nomore')"
+            loading-text="加载中..."
+            nomore-text="没有更多任务了"
+            @loadmore="loadMore"
+          ></u-loadmore>
         </u-list>
       </view>
     </view>
@@ -79,6 +99,7 @@
 <script>
 import ImageItem from "@/components/swiper/components/image.vue";
 import { mapState } from 'vuex';
+import {getPointTaskList} from '@/api/points'
 export default {
   name: "taskList",
   components: {ImageItem},
@@ -87,103 +108,244 @@ export default {
       myPoint: state => state.points.myPoint
     }),
     totalPoints() {
-      return this.myPoint.totalPoints || 0;
+      return this.myPoint && this.myPoint.totalPoints || 0;
     },
     completedTask() {
-      return this.myPoint.completedTask || 0;
+      return this.myPoint && this.myPoint.completedTask || 0;
     },
     pendingTasks() {
-      return this.myPoint.pendingTasks || 0;
+      return this.myPoint && this.myPoint.pendingTasks || 0;
     },
-    categoryIndex() {
+    type() {
       return this.tabs.findIndex(item => item.key === this.activeTab)
     },
-    // 过滤后的任务
-    filteredTasks() {
-      return this.tasks.filter(task => task.type === this.activeTab)
-    }
+
   },
   data() {
     return {
       // 标签数据
       tabs: [
-        { key: 'new', name: '新手任务' },
-        { key: 'daily', name: '每日任务' },
-        { key: 'monthly', name: '每月任务' }
+        { key: '1', name: '新手任务' },
+        { key: '2', name: '每日任务' },
+        { key: '3', name: '每月任务' }
       ],
       // 当前选中的标签
-      activeTab: 'new',
+      activeTab: '1',
       // 任务数据
-      tasks: [
-        {
-          id: 1,
-          type: 'new',
-          name: '完成一次订单',
-          reward: 20,
-          current: 2,
-          target: 2,
-          icon: '/static/points/task_order.png'
+      tasks: [],
+      // 分页数据
+      pageNum: 1,
+      pageSize: 10,
+      hasMore: true,
+      loading: false,
+      // 任务类型配置
+      taskConfig: {
+        order: {
+          icon: '/static/points/task_order.png',
+          action: this.handleOrderTask
         },
-        {
-          id: 2,
-          type: 'new',
-          name: '浏览动态',
-          reward: 20,
-          current: 0,
-          target: 1,
-          icon: '/static/points/task_trend.png'
+        merchant: {
+          icon: '/static/points/task_shop.png',
+          action: this.handleMerchantTask
         },
-        {
-          id: 3,
-          type: 'new',
-          name: '浏览商户',
-          reward: 20,
-          current: 2,
-          target: 2,
-          icon: '/static/points/task_shop.png'
+        dynamic: {
+          icon: '/static/points/task_trend.png',
+          action: this.handleDynamicTask
         },
-        {
-          id: 4,
-          type: 'new',
-          name: '分享服务号',
-          reward: 20,
-          current: 2,
-          target: 2,
-          icon: '/static/points/task_wx.png'
+        service: {
+          icon: '/static/points/task_wx.png',
+          action: this.handleServiceTask
         },
-        {
-          id: 5,
-          type: 'new',
-          name: '完成账号充值',
-          reward: 20,
-          current: 0,
-          target: 500,
-          icon: '/static/points/task_account.png'
+        recharge: {
+          icon: '/static/points/task_account.png',
+          action: this.handleRechargeTask
         }
-      ]
+      }
     }
   },
+  mounted() {
+    // 初始获取数据
+    this.fetchTaskList()
+  },
   methods: {
     // 切换标签
     handleTabChange(data) {
       this.activeTab = data.key
-      // 重置滚动位置
-      this.$nextTick(() => {
-        const list = this.$refs.list
-        if (list) {
-          list.scrollTo(0, 0)
-        }
-      })
+      // 重置分页数据
+      this.pageNum = 1
+      this.hasMore = true
+      // 清空数据
+      this.tasks = []
+      // 重新获取数据
+      this.fetchTaskList()
     },
     // 处理任务
     handleTask(task) {
-      if (task.current < task.target) {
-        console.log('去完成任务:', task.name)
-        // 这里可以跳转到相应的任务页面
-      } else {
-        console.log('任务已完成:', task.name)
-        // 这里可以领取奖励
+      if (task.completedCount >= task.triggerValue) return;
+
+      if (task.taskName.includes('订单')) {
+        this.taskConfig.order.action();
+      } else if (task.taskName.includes('商户')) {
+        this.taskConfig.merchant.action();
+      } else if (task.taskName.includes('动态')) {
+        this.taskConfig.dynamic.action();
+      } else if (task.taskName.includes('服务号')) {
+        this.taskConfig.service.action();
+      } else if (task.taskName.includes('账号充值')) {
+        this.taskConfig.recharge.action();
+      }
+    },
+    // 处理订单任务
+    handleOrderTask() {
+      uni.navigateTo({
+        url: '/points/home/index?scrollToSearch=1'
+      });
+    },
+    // 处理商户任务
+    handleMerchantTask() {
+      uni.switchTab({
+        url: '/pages/identify/identify'
+      });
+    },
+    // 处理动态任务
+    handleDynamicTask() {
+      uni.switchTab({
+        url: '/pages/discover/discover'
+      });
+    },
+    // 处理服务号任务
+    handleServiceTask() {
+      // 服务号任务处理逻辑
+    },
+    // 处理账号充值任务
+    handleRechargeTask() {
+      uni.navigateTo({
+        url: '/pages/my/pay'
+      });
+    },
+    // 加载更多数据
+    loadMore() {
+      if (this.loading || !this.hasMore) return
+      
+      this.pageNum++
+      this.fetchTaskList(true)
+    },
+    // 获取任务列表数据
+    async fetchTaskList(isLoadMore = false) {
+      this.loading = true
+      try {
+        // const res = await getPointTaskList({
+        //   pageNum: this.pageNum,
+        //   pageSize: this.pageSize,
+        //   type: this.activeTab
+        // })
+
+        const res = {
+          total: 30,
+          rows: [
+            {
+              "activityId": 25,
+              "taskName": "完成订单",
+              "rewardPoints": 20,
+              "completedCount": 1,
+              "triggerValue": 2
+            },
+            {
+              "activityId": 25,
+              "taskName": "完成订单",
+              "rewardPoints": 20,
+              "completedCount": 1,
+              "triggerValue": 2
+            },
+            {
+              "activityId": 25,
+              "taskName": "完成订单",
+              "rewardPoints": 20,
+              "completedCount": 1,
+              "triggerValue": 2
+            },
+            {
+              "activityId": 25,
+              "taskName": "完成订单",
+              "rewardPoints": 20,
+              "completedCount": 1,
+              "triggerValue": 2
+            },
+            {
+              "activityId": 25,
+              "taskName": "完成订单",
+              "rewardPoints": 20,
+              "completedCount": 1,
+              "triggerValue": 2
+            },
+            {
+              "activityId": 25,
+              "taskName": "完成订单",
+              "rewardPoints": 20,
+              "completedCount": 1,
+              "triggerValue": 2
+            },
+            {
+              "activityId": 25,
+              "taskName": "完成订单",
+              "rewardPoints": 20,
+              "completedCount": 1,
+              "triggerValue": 2
+            },
+            {
+              "activityId": 25,
+              "taskName": "完成订单",
+              "rewardPoints": 20,
+              "completedCount": 1,
+              "triggerValue": 2
+            },
+            {
+              "activityId": 25,
+              "taskName": "完成订单",
+              "rewardPoints": 20,
+              "completedCount": 1,
+              "triggerValue": 2
+            },
+            {
+              "activityId": 25,
+              "taskName": "完成订单",
+              "rewardPoints": 20,
+              "completedCount": 1,
+              "triggerValue": 2
+            }
+          ],
+          code: 200,
+          msg: "查询成功"
+        }
+        setTimeout(()=>{
+          if (res.code === 200) {
+            if (isLoadMore) {
+              // 加载更多数据
+              this.tasks = [...this.tasks, ...res.rows]
+            } else {
+              // 初始加载数据
+              this.tasks = res.rows
+            }
+
+            // 判断是否还有更多数据
+            this.hasMore = this.tasks.length < res.total
+          }
+          this.loading = false
+        },1000)
+
+      } catch (error) {
+        console.error('获取任务列表失败:', error)
+        this.loading = false
       }
+    },
+    // 根据任务名称获取图标
+    getTaskIcon(taskName) {
+      if (taskName.includes('订单')) return this.taskConfig.order.icon;
+      if (taskName.includes('商户')) return this.taskConfig.merchant.icon;
+      if (taskName.includes('动态')) return this.taskConfig.dynamic.icon;
+      if (taskName.includes('服务号')) return this.taskConfig.service.icon;
+      if (taskName.includes('账号充值')) return this.taskConfig.recharge.icon;
+      return ''
     }
   }
 }
@@ -300,19 +462,40 @@ export default {
         margin-right: 8rpx;
         margin-top: 10rpx;
       }
-      .task-button{
-        width: 120rpx;
+      .task-btn {
+        height: 48rpx;
+        background: #EEEEEE;
+        border-radius: 98rpx;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 26rpx;
+        color: #999999;
+        line-height: 48rpx;
+        border: 1px solid #EEEEEE;
+        margin: 0;
+        padding: 0 20rpx;
+      }
+      .no-task-btn {
         height: 48rpx;
-        background: linear-gradient( 78deg, #1AD8CF 0%, #21C8C0 100%);
+        background: #03C1B8;
         border-radius: 98rpx;
-        font-size: 24rpx;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 26rpx;
         color: #FFFFFF;
-        text-align: center;
         line-height: 48rpx;
         margin: 0;
-        padding: 0;
+        padding: 0 20rpx;
       }
     }
   }
+  .u-empty{
+    margin-top: 20vh!important;
+  }
+
+  /* 加载中容器 */
+  .loading-container {
+    margin-top: 20vh!important;
+  }
 }
 </style>