applet/pages/shop/pointsMall.vue

<template>
    <view class="pointsMall">
        <view class="background">
            <view class="me-integral" v-if="userCode != null">
                <view class="item"> 我的积分： </view>
                <view class="num"> {{ userCode || 0 }}积分 </view>
            </view>
        </view>
        <swiper class="commodity" @change="imgActiveFun" :indicator-dots="false" :autoplay="false"
            v-if="headGoodsList && headGoodsList.length > 0">
            <swiper-item v-for="item in headGoodsList" :key="item.id" @click="
                goProductDetails('/pages/shop/goodsDetails?id=' + item.productId)
                ">
                <view class="commodity-item">
                    <image :src="`${item.coverImage}?x-oss-process=style/w_350`" mode=""></image>
                    <view class="number u-text2">
                        {{ item.title }}
                    </view>
                    <view class="completed">
                        {{ item.minPoints ? item.minPoints * 1 : '0' }}<text style="font-size: 30rpx;">积分</text><text
                            v-if="item.maxSalePrice > 0">
                            <text style="margin: 0 4rpx;">+</text>￥{{ item.maxSalePrice * 1 }}元</text>
                    </view>
                </view>
            </swiper-item>
        </swiper>
        <noData v-else :config="{ top: 1, content: '暂无商品~' }"></noData>

        <view class="option" v-if="RowsList && RowsList.length > 0">
            <view class="option-item" :class="{ active: activeBannerIndex == index }" v-for="(item, index) in RowsList"
                :key="index">
            </view>
        </view>
        <view class="selected">
            <view class="title">
                <view class="item"> 精选商品 </view>
                <view class="line"> </view>
                <view class="hotseparation"> 热销优品快来拼购 </view>
            </view>
            <view class="middle" v-if="RowsList && RowsList.length > 0">
                <view class="item" v-for="(item, index) in RowsList" :key="index" @click="
                    goProductDetails('/pages/shop/goodsDetails?id=' + item.productId)
                    ">
                    <image :src="`${item.coverImage}?x-oss-process=style/w_350`" mode=""></image>
                    <view class="titletop ">
                        {{ item.title }}
                    </view>
                    <view class="numintegral">
                        {{ item.minPoints ? item.minPoints * 1 : '0' }}积分
                        <text v-if="item.maxSalePrice > 0"><text>+</text>￥{{ item.maxSalePrice * 1 }}元 </text>
                    </view>
                </view>
            </view>
            <noData v-else :config="{ top: 1, content: '暂无商品~' }"></noData>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { totalIntegral_Api } from "@/api/userInfo.js";
import { shopProductPage_Api } from "@/api/shop.js";
import { usePageData } from "@/hooks/usePageData";
const { RowsList, LoadStatus, initData } = usePageData(shopProductPage_Api);

const activeBannerIndex = ref(0);
const userCode = ref(null);
const headGoodsList = ref([]);

const imgActiveFun = (e) => {
    activeBannerIndex.value = e.detail.current;
}
const goProductDetails = (url) => {
    uni.navigateTo({
        url: url,
    });
}

// 获取我的积分
const getMyMsg = () => {
    totalIntegral_Api().then(res => {
        if (res && res.code == 200) {
            userCode.value = res.data || 0;
            // console.log(userCode.value)
        }
    })
}

// 获取积分商品列表
const getHeadGoodsList = (type) => {
    shopProductPage_Api({
        pageSize: 6,
        pageNum: 1,
        productPaymentMode: 1,
    }).then((res) => {
        if (res && res.code == 200) {
            headGoodsList.value = res.rows || [];
        }
    });
}

onLoad(() => {
    getMyMsg();
    getHeadGoodsList();
    initData({
        productPaymentMode: 1,
    })
})
</script>

<style lang="scss" scoped>
.commodity {
    margin-top: -195rpx;
    width: 720rpx;
    margin-left: 30rpx;
    min-height: 428rpx;
    overflow: hidden;

    ::v-deep swiper-item {
        width: 286rpx !important;
        padding-right: 18rpx;
    }

    ::v-deep .uni-swiper-slide-frame {
        width: 42% !important;
    }

    .commodity-item {
        // margin-right: 30rpx;
        border-radius: 16rpx;
        background-color: #ffffff;
        // padding: 18rpx;
        padding-top: 20rpx;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 30rpx;

        image {
            width: 232rpx;
            height: 232rpx;
            border-radius: 16rpx;
        }

        .completed {
            font-size: 33rpx;
            margin-top: 14rpx;
            font-weight: Bold;

            color: #FF0000;

        }

        .number {
            height: 64rpx;
            line-height: 32rpx;
            margin-top: 20rpx;
            font-size: 22rpx;
            color: #333333;
            font-weight: 500;


            .zero {
                margin-left: 20rpx;
                font-size: 22rpx;
                color: #ff0000;
                font-weight: 500;
            }

            .one {
                color: #ff0000;
                font-size: 34rpx;
                font-weight: 700;
            }

            .two {
                color: #ff0000;
                font-size: 18rpx;
                font-weight: 700;
            }
        }
    }
}

.selected {
    background-color: #ffffff;
    border-radius: 40rpx 40rpx 0 0;
    overflow: hidden;

    .middle {
        padding: 30rpx 0 0 30rpx;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        .item {
            width: 216rpx;
            text-align: center;
            background-color: #ffffff;
            box-shadow: 0rpx 0rpx 5rpx #e6e6e6;
            border-radius: 20rpx;
            margin-bottom: 30rpx;
            margin-right: 20rpx;

            image {
                width: 216rpx;
                height: 216rpx;
                border-radius: 18rpx;
            }

            .titletop {
                font-size: 24rpx;
                line-height: 34rpx;
                font-weight: 400;
                color: #333333;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                padding: 0 10rpx;
            }

            .numintegral {
                font-size: 28rpx;
                font-weight: 500;
                color: #ff0000;
                margin-bottom: 12rpx;
                margin-top: 8rpx;
            }
        }
    }

    .title {
        display: flex;
        align-items: center;
        margin-top: 36rpx;
        margin-left: 30rpx;

        .item {
            font-weight: 700;
            font-size: 36rpx;
            color: #1a1a1a;
        }

        .line {
            width: 1rpx;
            height: 34rpx;
            background-color: #707070;
            margin: 0 15rpx;
        }

        .hotseparation {
            font-size: 24rpx;
            flex: 1;
            font-weight: 400;
            color: #666666;
        }
    }
}

.pointsMall {
    background-color: #f6f6f6;
}

.option {
    margin: 30rpx 0;
    display: flex;
    justify-content: center;

    .option-item {
        background-color: #d9d9d9;
        margin: 0 8rpx;
        width: 14rpx;
        height: 14rpx;
        border-radius: 7rpx;
    }

    .active {
        background-color: #ff4e15;
        width: 35rpx;
        height: 14rpx;
        border-radius: 7rpx;
    }
}

.background {
    width: 100%;
    height: 300rpx;
    background-color: #FA6138;
    overflow: hidden;

    .num {
        color: #ffffff;
        font-size: 28rpx;
        font-weight: 500;
    }

    .me-integral {
        display: flex;
        justify-content: center;
        color: #ffffff;
        font-size: 28rpx;
        font-weight: 500;
        margin-top: 30rpx;
    }
}
</style>