|
|
@@ -4,8 +4,10 @@ import TaskList from '../components/task-list/task-list.vue'
|
|
|
import ProductList from '../components/product-list/product-list.vue'
|
|
|
import ImageItem from "@/components/swiper/components/image.vue";
|
|
|
import { mapState, mapActions } from 'vuex';
|
|
|
-import {getSignPoint,signPoint,getHomeTask} from '@/api/points'
|
|
|
+import { getSignPoint, signPoint, getHomeTask } from '@/api/points'
|
|
|
+
|
|
|
export default {
|
|
|
+ name: 'PointsHome',
|
|
|
components: {
|
|
|
ImageItem,
|
|
|
SignIn,
|
|
|
@@ -16,9 +18,11 @@ export default {
|
|
|
...mapState({
|
|
|
myPoint: state => state.points.myPoint
|
|
|
}),
|
|
|
+ // 总积分
|
|
|
totalPoints() {
|
|
|
return this.myPoint.totalPoints || 0;
|
|
|
},
|
|
|
+ // 本月新获取积分
|
|
|
monthlyPoints() {
|
|
|
return this.myPoint.earnedPoints || 0;
|
|
|
}
|
|
|
@@ -27,177 +31,251 @@ export default {
|
|
|
return {
|
|
|
// 滚动距离
|
|
|
scrollTop: 0,
|
|
|
- signData:[],
|
|
|
- taskData:[]
|
|
|
+ // 签到数据
|
|
|
+ signData: [],
|
|
|
+ // 任务数据
|
|
|
+ taskData: [],
|
|
|
+ // 加载状态
|
|
|
+ loading: {
|
|
|
+ points: false,
|
|
|
+ sign: false,
|
|
|
+ task: false
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
- // 获取积分信息
|
|
|
- this.getPointsInfo();
|
|
|
- this.getSignList();
|
|
|
- this.getTaskList();
|
|
|
- // 在H5端添加滚动事件监听器
|
|
|
- if (process.env.UNI_PLATFORM === 'h5') {
|
|
|
- // 使用this.$el获取当前组件的根元素
|
|
|
- const homeEl = this.$el
|
|
|
- if (homeEl) {
|
|
|
- homeEl.addEventListener('scroll', this.handleScroll)
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 在非H5端监听页面滚动事件
|
|
|
- uni.onPageScroll(this.handlePageScroll)
|
|
|
- }
|
|
|
+ // 初始化数据
|
|
|
+ this.initData();
|
|
|
+ // 绑定滚动事件
|
|
|
+ this.bindScrollEvent();
|
|
|
},
|
|
|
beforeUnmount() {
|
|
|
- // 移除滚动事件监听器
|
|
|
- if (process.env.UNI_PLATFORM === 'h5') {
|
|
|
- const homeEl = this.$el
|
|
|
- if (homeEl) {
|
|
|
- homeEl.removeEventListener('scroll', this.handleScroll)
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 移除页面滚动事件监听
|
|
|
- uni.offPageScroll(this.handlePageScroll)
|
|
|
- }
|
|
|
+ // 解绑滚动事件
|
|
|
+ this.unbindScrollEvent();
|
|
|
},
|
|
|
methods: {
|
|
|
...mapActions([
|
|
|
'getPointsInfo'
|
|
|
]),
|
|
|
+ // 初始化数据
|
|
|
+ async initData() {
|
|
|
+ try {
|
|
|
+ // 并行获取数据，提高加载速度
|
|
|
+ await Promise.all([
|
|
|
+ this.fetchPointsInfo(),
|
|
|
+ this.fetchSignList(),
|
|
|
+ this.fetchTaskList()
|
|
|
+ ]);
|
|
|
+ } catch (error) {
|
|
|
+ console.error('初始化数据失败:', error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取积分信息
|
|
|
+ async fetchPointsInfo() {
|
|
|
+ this.loading.points = true;
|
|
|
+ try {
|
|
|
+ await this.getPointsInfo();
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取积分信息失败:', error);
|
|
|
+ } finally {
|
|
|
+ this.loading.points = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取签到数据
|
|
|
+ async fetchSignList() {
|
|
|
+ this.loading.sign = true;
|
|
|
+ try {
|
|
|
+ // 实际项目中使用真实API
|
|
|
+ // const res = await getSignPoint({
|
|
|
+ // cityName: uni.getStorageSync('selectCity'),
|
|
|
+ // cityCode: uni.getStorageSync('selectCitycode'),
|
|
|
+ // });
|
|
|
+
|
|
|
+ // 模拟数据
|
|
|
+ const res = {
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ "date": "01-30",
|
|
|
+ "points": 1,
|
|
|
+ "status": 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "date": "02-01",
|
|
|
+ "points": 0,
|
|
|
+ "status": 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "date": "02-02",
|
|
|
+ "points": 1,
|
|
|
+ "status": 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "date": "02-03",
|
|
|
+ "points": 1,
|
|
|
+ "status": 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "date": "02-04",
|
|
|
+ "points": 1,
|
|
|
+ "status": 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "date": "02-05",
|
|
|
+ "points": 1,
|
|
|
+ "status": 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "date": "02-06",
|
|
|
+ "points": 3,
|
|
|
+ "status": 0
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ code: 200,
|
|
|
+ msg: "查询成功"
|
|
|
+ };
|
|
|
+
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.signData = res.data;
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取签到数据失败:', error);
|
|
|
+ } finally {
|
|
|
+ this.loading.sign = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取任务数据
|
|
|
+ async fetchTaskList() {
|
|
|
+ this.loading.task = true;
|
|
|
+ try {
|
|
|
+ // 实际项目中使用真实API
|
|
|
+ // const res = await getHomeTask({
|
|
|
+ // cityName: uni.getStorageSync('selectCity'),
|
|
|
+ // cityCode: uni.getStorageSync('selectCitycode'),
|
|
|
+ // });
|
|
|
+
|
|
|
+ // 模拟数据
|
|
|
+ const res = {
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ "activityId": 21,
|
|
|
+ "taskName": "浏览动态",
|
|
|
+ "rewardPoints": 10,
|
|
|
+ "completedCount": 1,
|
|
|
+ "triggerValue": 2,
|
|
|
+ "completedStatus": 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "activityId": 22,
|
|
|
+ "taskName": "完成一次订单",
|
|
|
+ "rewardPoints": 20,
|
|
|
+ "completedCount": 3,
|
|
|
+ "triggerValue": 2,
|
|
|
+ "completedStatus": 1
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ code: 200,
|
|
|
+ msg: "查询成功"
|
|
|
+ };
|
|
|
+
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.taskData = res.data;
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取任务数据失败:', error);
|
|
|
+ } finally {
|
|
|
+ this.loading.task = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 绑定滚动事件
|
|
|
+ bindScrollEvent() {
|
|
|
+ if (process.env.UNI_PLATFORM === 'h5') {
|
|
|
+ // 在H5端添加滚动事件监听器
|
|
|
+ const homeEl = this.$el;
|
|
|
+ if (homeEl && typeof homeEl.addEventListener === 'function') {
|
|
|
+ homeEl.addEventListener('scroll', this.handleScroll);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 在非H5端监听页面滚动事件
|
|
|
+ uni.onPageScroll(this.handlePageScroll);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 解绑滚动事件
|
|
|
+ unbindScrollEvent() {
|
|
|
+ if (process.env.UNI_PLATFORM === 'h5') {
|
|
|
+ const homeEl = this.$el;
|
|
|
+ if (homeEl && typeof homeEl.removeEventListener === 'function') {
|
|
|
+ homeEl.removeEventListener('scroll', this.handleScroll);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 移除页面滚动事件监听
|
|
|
+ uni.offPageScroll(this.handlePageScroll);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 处理滚动事件（H5端）
|
|
|
handleScroll() {
|
|
|
- const homeEl = this.$el
|
|
|
+ const homeEl = this.$el;
|
|
|
if (homeEl) {
|
|
|
- const scrollTop = homeEl.scrollTop
|
|
|
+ const scrollTop = homeEl.scrollTop;
|
|
|
// 更新滚动距离
|
|
|
- this.scrollTop = scrollTop
|
|
|
- const scrollHeight = homeEl.scrollHeight
|
|
|
- const clientHeight = homeEl.clientHeight
|
|
|
- // 当滚动到距离底部50px以内时，触发加载更多
|
|
|
- if (scrollTop + clientHeight >= scrollHeight - 50) {
|
|
|
- this.reachBottom()
|
|
|
- }
|
|
|
+ this.updateScrollTop(scrollTop);
|
|
|
+ // 检查是否触底
|
|
|
+ this.checkReachBottom(homeEl, scrollTop);
|
|
|
}
|
|
|
},
|
|
|
// 处理页面滚动事件（非H5端）
|
|
|
handlePageScroll(e) {
|
|
|
- const scrollTop = e.scrollTop
|
|
|
+ const scrollTop = e.scrollTop;
|
|
|
// 更新滚动距离
|
|
|
- this.scrollTop = scrollTop
|
|
|
- // 当滚动到距离底部50px以内时，触发加载更多
|
|
|
- const homeEl = this.$el
|
|
|
+ this.updateScrollTop(scrollTop);
|
|
|
+ // 检查是否触底
|
|
|
+ const homeEl = this.$el;
|
|
|
if (homeEl) {
|
|
|
- const scrollHeight = homeEl.scrollHeight
|
|
|
- const clientHeight = homeEl.clientHeight
|
|
|
- if (scrollTop + clientHeight >= scrollHeight - 50) {
|
|
|
- this.reachBottom()
|
|
|
- }
|
|
|
+ this.checkReachBottom(homeEl, scrollTop);
|
|
|
}
|
|
|
},
|
|
|
- reachBottom() {
|
|
|
- if (this.$refs.productRef) {
|
|
|
- this.$refs.productRef.loadMore()
|
|
|
+ // 更新滚动距离
|
|
|
+ updateScrollTop(scrollTop) {
|
|
|
+ this.scrollTop = scrollTop;
|
|
|
+ },
|
|
|
+ // 检查是否触底
|
|
|
+ checkReachBottom(element, scrollTop) {
|
|
|
+ const scrollHeight = element.scrollHeight;
|
|
|
+ const clientHeight = element.clientHeight;
|
|
|
+ // 当滚动到距离底部50px以内时，触发加载更多
|
|
|
+ if (scrollTop + clientHeight >= scrollHeight - 50) {
|
|
|
+ this.reachBottom();
|
|
|
}
|
|
|
},
|
|
|
- /** 签到领积分 */
|
|
|
- async getSignList() {
|
|
|
- // const res = await getSignPoint({
|
|
|
- // cityName: uni.getStorageSync('selectCity'),
|
|
|
- // cityCode:uni.getStorageSync('selectCitycode'),
|
|
|
- // });
|
|
|
- const res = {
|
|
|
- data: [
|
|
|
- {
|
|
|
- "date": "01-30",
|
|
|
- "points": 1,
|
|
|
- "status": 1
|
|
|
- },
|
|
|
- {
|
|
|
- "date": "02-01",
|
|
|
- "points": 0,
|
|
|
- "status": 0
|
|
|
- },
|
|
|
- {
|
|
|
- "date": "02-02",
|
|
|
- "points": 1,
|
|
|
- "status": 1
|
|
|
- },
|
|
|
- {
|
|
|
- "date": "02-03",
|
|
|
- "points": 1,
|
|
|
- "status": 0
|
|
|
- },
|
|
|
- {
|
|
|
- "date": "02-04",
|
|
|
- "points": 1,
|
|
|
- "status": 0
|
|
|
- },
|
|
|
- {
|
|
|
- "date": "02-05",
|
|
|
- "points": 1,
|
|
|
- "status": 0
|
|
|
- },
|
|
|
- {
|
|
|
- "date": "02-06",
|
|
|
- "points": 3,
|
|
|
- "status": 0
|
|
|
- }
|
|
|
- ],
|
|
|
- code: 200,
|
|
|
- msg: "查询成功"
|
|
|
+ // 触底加载更多
|
|
|
+ reachBottom() {
|
|
|
+ if (this.$refs.productRef) {
|
|
|
+ this.$refs.productRef.loadMore();
|
|
|
}
|
|
|
- this.signData = res.data;
|
|
|
},
|
|
|
+ // 处理签到
|
|
|
handleSign(index) {
|
|
|
signPoint().then(res => {
|
|
|
- if(res.code == 200){
|
|
|
+ if (res.code === 200) {
|
|
|
this.signData[index].status = 1;
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- /** 任务逻辑 */
|
|
|
- async getTaskList() {
|
|
|
- // const res = await getHomeTask({
|
|
|
- // cityName: uni.getStorageSync('selectCity'),
|
|
|
- // cityCode:uni.getStorageSync('selectCitycode'),
|
|
|
- // });
|
|
|
- const res = {
|
|
|
- data: [
|
|
|
- {
|
|
|
- "activityId": 21,
|
|
|
- "taskName": "浏览动态",
|
|
|
- "rewardPoints": 10,
|
|
|
- "completedCount": 1,
|
|
|
- "triggerValue": 2,
|
|
|
- "completedStatus": 0
|
|
|
- },
|
|
|
- {
|
|
|
- "activityId": 22,
|
|
|
- "taskName": "完成一次订单",
|
|
|
- "rewardPoints": 20,
|
|
|
- "completedCount": 3,
|
|
|
- "triggerValue": 2,
|
|
|
- "completedStatus": 1
|
|
|
- }
|
|
|
- ],
|
|
|
- code: 200,
|
|
|
- msg: "查询成功"
|
|
|
- }
|
|
|
- this.taskData = res.data;
|
|
|
+ }).catch(error => {
|
|
|
+ console.error('签到失败:', error);
|
|
|
+ });
|
|
|
},
|
|
|
- goBillPage(){
|
|
|
+ // 跳转到积分明细页面
|
|
|
+ goBillPage() {
|
|
|
uni.navigateTo({
|
|
|
url: '/points/pointInfo/billPage'
|
|
|
});
|
|
|
},
|
|
|
- orderGo(){
|
|
|
+ // 跳转到订单列表页面
|
|
|
+ orderGo() {
|
|
|
uni.navigateTo({
|
|
|
url: '/points/order/orderList'
|
|
|
});
|
|
|
},
|
|
|
// 滚动到搜索框
|
|
|
scrollToSearch() {
|
|
|
- // 计算滚动距离，使搜索框触底顶
|
|
|
const homeEl = this.$el;
|
|
|
if (homeEl) {
|
|
|
// 滚动到商品列表的位置，使搜索框显示在顶部
|
|
|
@@ -212,7 +290,7 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <view class="points-home">
|
|
|
+ <view class="points-home" ref="homeRef">
|
|
|
<view class="points-task">
|
|
|
<!-- 积分头部 -->
|
|
|
<view class="points-header" @click="goBillPage">
|
|
|
@@ -232,9 +310,9 @@ export default {
|
|
|
<!-- 商品列表组件 -->
|
|
|
<ProductList ref="productRef" :scrollTop="scrollTop" />
|
|
|
<!-- 积分订单跳转 -->
|
|
|
- <view @click="orderGo" class="orderIcons">
|
|
|
+ <view @click="orderGo" class="orderIcons">
|
|
|
<ImageItem src="/static/points/orderGo.png"/>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
xyh