【uni-app】银行卡卡包页面

这篇具有很好参考价值的文章主要介绍了【uni-app】银行卡卡包页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求:

佣金提现银行卡。

UI图:

要点:
卡片的颜色、logo以及右下角的阴影logo图需要根据不同的银行来与之相匹配。

这里给出了十个银行的图,不在这十个银行以外的统一用没有logo的默认背景图展示。

【uni-app】银行卡卡包页面



分析

这个页面,基本数据只有一个关于用户银行卡的对象数组。给的数据很有限,因为银行名称标识不同银行,这里我就用银行名称来映射判断展示。

1. 创建映射数组,这里我是在utils目录下创建了一个bankCard.js文件

定义了这个对象数组,bankName银行名称用来映射,只要匹配得上就将图赋值给用户银行卡的对象数组。

如果银行卡名称没有在这些对象数组里面,就给其匹配最后一个通用样式的数组 — — 所以要新增适配的银行不能放在最后一个。

需要注意的是,这里引入图片文件,需要用require

export function bankCardInfo(bankName) {
  // let obj = {a: 1}
  // obj['b']
  return (
    {
      中国农业银行: {
        bank: "中国农业银行",
        bankIcon: require("../assets/bank-card/agri.png"),
        bankShadow: require("../assets/bank-card/agri_shade.png"),
        bg: "https://img2.coocaa.com/ui/partner-mini-program/blank/green_bg.png",
      },
      中国邮政储蓄银行: {
        bank: "中国邮政储蓄银行",
        bankIcon: require("../assets/bank-card/postal.png"),
        bankShadow: require("../assets/bank-card/postal_shade.png"),
        bg: "https://img2.coocaa.com/ui/partner-mini-program/blank/green_bg.png",
      },
      中国招商银行: {
        bank: "中国招商银行",
        bankIcon: require("../assets/bank-card/CMB.png"),
        bankShadow: require("../assets/bank-card/CMB_shade.png"),
        bg: "https://img2.coocaa.com/ui/partner-mini-program/blank/red_bg.png",
      },
      中国工商银行: {
        bank: "中国工商银行",
        bankIcon: require("../assets/bank-card/ICBC.png"),
        bankShadow: require("../assets/bank-card/ICBC_shade.png"),
        bg: "https://img2.coocaa.com/ui/partner-mini-program/blank/red_bg.png",
      },
      中国银行: {
        bank: "中国银行",
        bankIcon: require("../assets/bank-card/BOC.png"),
        bankShadow: require("../assets/bank-card/BOC_shade.png"),
        bg: "https://img2.coocaa.com/ui/partner-mini-program/blank/red_bg.png",
      },
      华夏银行: {
        bank: "华夏银行",
        bankIcon: require("../assets/bank-card/HX.png"),
        bankShadow: require("../assets/bank-card/HX_shade.png"),
        bg: "https://img2.coocaa.com/ui/partner-mini-program/blank/red_bg.png",
      },
      浦发银行: {
        bank: "浦发银行",
        bankIcon: require("../assets/bank-card/PF.png"),
        bankShadow: require("../assets/bank-card/PF_shade.png"),
        bg: "https://img2.coocaa.com/ui/partner-mini-program/blank/blue_bg.png",
      },
      中国建设银行: {
        bank: "中国建设银行",
        bankIcon: require("../assets/bank-card/CCB.png"),
        bankShadow: require("../assets/bank-card/CCB_shade.png"),
        bg: "https://img2.coocaa.com/ui/partner-mini-program/blank/blue_bg.png",
      },
      交通银行: {
        bank: "交通银行",
        bankIcon: require("../assets/bank-card/JT.png"),
        bankShadow: require("../assets/bank-card/JT_shade.png"),
        bg: "https://img2.coocaa.com/ui/partner-mini-program/blank/blue_bg.png",
      },
      上海银行: {
        bank: "上海银行",
        bankIcon: require("../assets/bank-card/SH.png"),
        bankShadow: require("../assets/bank-card/SH_shade.png"),
        bg: "https://img2.coocaa.com/ui/partner-mini-program/blank/blue_bg.png",
      },
    }[bankName] || {
      bg: "https://img2.coocaa.com/ui/partner-mini-program/blank/other_bg.png",
      bank: "",
      bankIcon: "",
      bankShadow: "",
    }
  );
}

2. 在需要匹配的页面引入这个js文件,并使用。

cardItem 的数据一般是从接口返回的,这里我使用了假数据来测试。

这里用的是 Object.assign 方法,这个方法会将第二个对象中,第一个对象不存在的KEY复制到第一个对象里。文章来源地址https://www.toymoban.com/news/detail-490650.html

import { bankCardInfo } from "@/utils/bankCard";

getCardList() {
      this.cardItem = [
        {
          bankName: "中国农业银行",
          accountType: "借记卡",
          cardNo: "6214111122221234",
        },
        {
          bankName: "中国建设银行",
          accountType: "贷记卡",
          cardNo: "6214111122221234",
        },
        {
          bankName: "中国招商银行",
          accountType: "预付费卡",
          cardNo: "62141111222212345",
        },
        {
          bankName: "河北农村商业银行",
          accountType: "准贷记卡",
          cardNo: "621411112222123475",
        },
      ];
      this.cardItem.forEach((item) =>
        Object.assign(item, bankCardInfo(item.bankName))
      );

最后实现的效果和UI图一模一样。

到了这里,关于【uni-app】银行卡卡包页面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app:刷新当前页面

    执行这三行代码就可以实现uniapp刷新当前页面。不论是tabbar还是page页面 * * * * * * * * * * * * * * * *

    2024年02月11日
    浏览(48)
  • uni-app分享小程序页面

    uni-app的小程序页面默认是不可分享的,点击页面右上角按钮进行分享时会提示:“当前页面不可转发/当前页面不可分享” 打开项目的manifest.json文件,在“App模块配置”项的“Share(分享)”下,勾选“微信分享”: 在代码中开启分享转发按钮 再次打开小程序页面,会发现已经

    2024年02月11日
    浏览(48)
  • uni-app修改页面背景色:

    1.设置全局背景色(法一): 2.设置全局背景色(法二): 在App.vue的style样式表中设置 3.设置单页面背景色: 4.在pages.json里面设置单页面背景色,这种是不行的,只能在页面内设置:

    2024年02月15日
    浏览(60)
  • uni-app返回上一个页面并进行页面刷新

    适用两个不同的页面跳转,返回上一个页面保存并刷新修改后的数据(也解决了uni-app的navigateBack返回不刷新的方法之一) 当前页: 上一页: 思路: 1、用getCurrentPages()获取打开的页面 2、保存当前页面和上一个页面 提示:不确定是不是从当前页跳转到上一页就console.log(pages[pa

    2024年02月12日
    浏览(55)
  • uni-app 如何返回到指定的页面

    实际开发中,发现了一个问题,即使签署合同的时候,发现调用法大大的页面,出现了一个问题,就是签署后,点回退,回退到了重新签署的页面。所以需要对回退进行自定义处理。 处理的话,就要到指定的返回页面。这里还存在不签署的情况,回退要是原来的页面。所以要

    2024年01月18日
    浏览(63)
  • Uni-app返回上一页面并携带参数

    目录 一、前言 二、实现方法 三、遇到的坑 四、事件详解 一、前言         需要实现这么一个需求:在一个列表页面,当子页面直接返回时,不刷新列表页面。但是当子页面的数据有变动时,需要刷新列表页面。本篇博客记录一下我是如何解决这个问题的。        

    2024年02月08日
    浏览(48)
  • uni-app小程序设置页面背景色

    在原生微信小程序中,可以通过下面的设置来设置页面背景色 但是在uni-app上,这样的设置在小程序端并没有起作用。 原因是因为style标签上加了scoped,那么如何在使用scoped的同时又能设置page背景色呢? 解决方案:

    2024年02月15日
    浏览(55)
  • uni-app uni.switchTab和uni.reLaunch跳转tabbar页面

    uni.switchTab: 跳转列表不会刷新 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。 uni.reLaunch: 跳转列表会刷新 关闭所有页面,打开到应用内的某个页面。( 可以跳转到tabBar 页面 ) 但如果是列表的自定义表头有多个title的时候需要加参数才能返回到对应的列表 如下图所示

    2024年02月11日
    浏览(50)
  • uni-app: onBackPress() 监听页面返回 - 更新数据

    生命周期 - onBackPress() 监听页面返回 函数名 说明 平台差异说明 onBackPress 监听页面返回 ,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:onBackPress 详解。支付宝小程序只有真机

    2024年02月11日
    浏览(58)
  • 【uni-app】【01】底部导航栏与页面切换

    1.(配置文件在哪)uni-app 路由控制是在 pages.json 文件中的。 2.(基本配置项有哪些)初学的时候主要有三个配置项,① pages ② globalStyle ③ tabbar [!TOC] 接下来主要是对这三个配置项做一个简单介绍。 负责页面管理。不需要自己写的,你在项目的 pages 文件夹下创建页面会自动生成配

    2023年04月27日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包