uniapp-ZHSQ/packages/jfShop/index/index.vue

<template>
    <view>
        <view class="header">
            <image class="header_top" src="https://static.hshuishang.com/point_top.png" mode="" />
            <view class="header_sum">{{ pointsNum }}</view>
            <view class="header_dec">当前可用积分</view>
        </view>
        <view class="center">
            <view class="center_item" @click="toPage('mx')">
                <view class="image_item">
                    <image class="header_top" src="https://static.hshuishang.com/point_mx.png" mode="" />
                </view>
                <view>积分明细</view>
            </view>
            <view class="center_item">
                <view class="image_item" @click="toPage('gz')">
                    <image class="header_top" src="https://static.hshuishang.com/point_gz.png" mode="" />
                </view>
                <view>积分规则</view>
            </view>
            <view class="center_item">
                <view class="image_item" @click="toPage('jl')">
                    <image class="header_top" src="https://static.hshuishang.com/point_jl.png" mode="" />
                </view>
                <view>兑换记录</view>
            </view>
        </view>
        <!-- 分类导航 -->
        <view class="category-nav">
            <scroll-view scroll-x="true" class="category-scroll">
                <view v-for="(category, index) in categories" :key="index" class="category-item"
                    :class="{ active: activeCategory === category.id }" @click="activeCategory = category.id">
                    {{ category.category_name }}
                </view>
            </scroll-view>
        </view>
        <!-- 商品列表 -->
        <scroll-view scroll-y="true" @scrolltolower="loadMore" style="height: calc(100vh - 300rpx);">
            <view class="product-list">
                <view v-for="(product, index) in products" :key="index" class="product-item">
                    <image class="product-image" :src="product.commodity_pic" mode="aspectFill"></image>
                    <view class="product-title">{{ product.commodity_name }}</view>
                    <view class="product-info">
                        <view class="product-points">{{ product.goods_info_list[0].points }} 积分</view>
                        <view class="product-sold">已兑换{{ product.exchange_count }}件</view>
                    </view>
                    <view class="exchange-btn" @click="toDetail(product)">立即兑换</view>
                </view>
                <!-- 加载更多提示 -->
                <view v-if="loading" class="loading">加载中...</view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { request, picUrl, NavgateTo } from "../../../utils";
import { apiArr } from "../../../api/pointShop";
import { apiArr as apiArr2 } from '../../../api/v2User';

export default {
    data() {
        return {
            pointsNum: 0,
            activeCategory: '',
            categories: [],
            products: [],
            page_num: 1,
            page_size: 20,
            loading: false,
            noMore: false
        }
    },
    watch: {
        activeCategory(newVal) {
            // 切换分类时重置数据
            this.page_num = 1;
            this.products = [];
            this.noMore = false;
            this.getList();
        }
    },
    onShow() {
        this.getNum()
        this.getTab()
        this.page_num = 1;
        this.products = [];
        this.noMore = false;
        this.getList()
    },
    methods: {
        getNum() {
            if (!uni.getStorageSync("ctoken")) {
                return 0;
            }
            request(apiArr2.getUserInfo, 'POST', {}, { silent: false }).then(res => {
                this.pointsNum = res.points;
            });
        },
        getTab() {
            request(apiArr.pointShopTab, 'POST', {}, { silent: false }, false).then(res => {
                this.categories = [{ id: '', category_name: '全部' }, ...res.tabs];
            });
        },
        getList() {
            if (this.loading || this.noMore) return;

            this.loading = true;
            const params = {
                category_id: this.activeCategory,
                page_num: this.page_num,
                page_size: this.page_size
            }
            request(apiArr.pointShopPage, 'POST', params, { silent: false }, false).then(res => {
                this.loading = false;

                const newProducts = res.row.map(item => {
                    return {
                        ...item,
                        commodity_pic: picUrl + item.commodity_pic,
                    }
                });

                // 如果是第一页，直接替换数据，否则追加
                if (this.page_num === 1) {
                    this.products = newProducts;
                } else {
                    this.products = [...this.products, ...newProducts];
                }

                // 判断是否还有更多数据
                if (newProducts.length < this.page_size) {
                    this.noMore = true;
                }
            }).catch(() => {
                this.loading = false;
            });
        },
        loadMore() {
            if (!this.loading && !this.noMore) {
                this.page_num++;
                this.getList();
            }
        },
        toPage(data) {
            if (data == 'mx') {
                request(apiArr2.getUserInfo, 'POST', {}, { silent: false }).then(res => {
                    NavgateTo('/packages/user/wallet/index?type=1&item=' + JSON.stringify(res));
                });
            } else if (data == 'gz') {
                uni.navigateTo({
                    url: '/packages/jfShop/rule/index'
                })
            } else if (data == 'jl') {
                NavgateTo('/packages/jfShop/record/index');
            }
        },
        toDetail(product) {
            NavgateTo('/packages/jfShop/detail/index?product=' + JSON.stringify(product) + '&pointNum=' + this.pointsNum, { isLogin: false });
        }
    }
}
</script>

<style>
@import url("./index.css");
</style>