更新记录

1.0.0（2025-06-08） 下载此版本

钱包页面组件，传三个数组：couponList是一行三列布局的数据，couponList2是一行两列布局的数据，tipsArr提示语， 两个回调方法：changeFun更新数据里的数量，submitFun点击支付的回调方法

平台兼容性

uni-app(4.65)

uni-app x(4.65)

amw-WalletCpt

功能介绍：钱包页面组件，传三个数组：couponList是一行三列布局的数据，couponList2是一行两列布局的数据，tipsArr提示语，

两个回调方法：changeFun更新数据里的数量，submitFun点击支付的回调方法

使用举例

<template>
    <view class="default-page">
        <WalletCpt :couponList="couponList" :couponList2="couponList2" @changeFun="changeFun" :tipsArr="tipsArr"
            @submitFun="submitFun"></WalletCpt>
    </view>
</template>

<script setup lang="ts">
    import {
        ref,
        computed
    } from 'vue'

    // 券数据
    const couponList = ref([{
        id: 1,
        price: 35,
        name: '饮品通用券',
        count: 0
    },
    {
        id: 2,
        price: 32,
        name: '饮品通用券',
        count: 0
    },
    {
        id: 3,
        price: 29,
        name: '饮品通用券',
        count: 0
    },
    {
        id: 4,
        price: 38,
        name: '饮品通用券',
        count: 0
    },
    {
        id: 5,
        price: 38,
        name: '饮品通用券',
        count: 0
    },
    {
        id: 6,
        price: 38,
        name: '饮品通用券',
        count: 0
    },
    {
        id: 7,
        price: 38,
        name: '饮品通用券',
        count: 0
    },
    {
        id: 8,
        price: 38,
        name: '饮品通用券',
        count: 0
    },
    {
        id: 9,
        price: 38,
        name: '饮品通用券',
        count: 0
    }
    ]);
    const couponList2 = ref([{
        id: 1,
        price: 35,
        name: '饮品通用券',
        count: 0
    },
    {
        id: 2,
        price: 32,
        name: '饮品通用券',
        count: 0
    },
    {
        id: 3,
        price: 29,
        name: '饮品通用券',
        count: 0
    }
    ]);

    const tipsArr = ref([
        {

            id: 1,
            text: "1. 咖啡券、电子礼品卡等非实物订单，不参与小蓝豆累积活动..."
        },
        {
            id: 2,
            text: "2. 建议您从官方正规渠道购买卡券。谨防低价、折扣、返利、刷单等为诱饵的任何形式的诈骗...",

        },
        {
            id: 3,
            text: "3. 请确保您的卡券在有效期内使用，过期将无法享受优惠...",

        },
        {
            id: 4,
            text: "4. 如遇到任何问题，请联系我们的客服团队获取帮助..."
        }
    ])

    // 计算总价
    const changeFun = (type : string, index : number, newCount : number) => {
        if (type === 'arr1') {
            couponList.value[index].count = newCount
        } else if (type === 'arr2') {
            couponList2.value[index].count = newCount
        }
    }
    const submitFun = () => {
        console.log("您点击了支付按钮")
        uni.showToast({
            title: '您点击了支付按钮',
            icon: 'none'
        })
    }
</script>

<style lang="scss" scoped>
    .default-page {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
</style>

参数:

插槽 Slots:

数据类型

使用举例有完整demo数据这里不再重复