支付宝微信支付方式的选择

32.支付宝微信支付方式的单选框选择

场景：一个h5网页支付页面，需要同时展现支付宝和微信两种支付方式

实现目标：

实现步骤：

在项目中，安装并引入vant的相关组件：RadioGroup, Radio, Cell, CellGroup和样式

页面代码实现

      <div><div class="paytype" v-show="paylist.length!==0" ><div class="title">请选择自费支付方式</div><van-radio-group @change="radioCheck" v-model="checkType"><van-cell-group><van-cellv-show="from=='alipay'? (hasalipay ? true : false) : (hasalipay ? (from.indexOf('iswx') == -1? true:false) : false)"clickable@click="checkType = '1'"><div class="item"><imgclass="type"src="./../assets/alipay.png"alt=""/><span><p>支付宝支付</p><div>数亿用户都在用，安全可托付</div></span></div><template #right-icon><van-radiochecked-color="#00CDA6"name="1"/></template></van-cell><van-cellv-show="from.indexOf('iswx')>-1 ? (haswx ? true : false):(haswx ? (from.indexOf('alipay') ==-1 ? true:false) : false) "clickable@click="checkType = '2'"><div class="item"><imgclass="type"src="./../assets/wechat.png"alt=""/><span><p>微信支付</p><div>数亿用户都在用，安全可托付</div></span></div><template #right-icon><van-radiochecked-color="#00CDA6"name="2"/></template></van-cell></van-cell-group></van-radio-group></div></div>

页面样式

.paytype {width: 3.45rem;background-color: #fff;border-radius: 0.1rem;margin: 0 auto;overflow: hidden;
}
.van-radio-group{border-radius: 0.02rem;
}
.paytype .title {color: #333333;height: 0.5rem;line-height: 0.5rem;font-weight: 600;text-align: left;margin-left: 0.15rem;
}
.item {display: flex;align-items: center;height: 0.5rem;line-height: 0.5rem;
}
.item .type {width: 0.3rem;height: 0.3rem;
}
.item span {margin-left: 0.11rem;
}
.item span p {color: #333;font-weight: 600;
}
.item span div {color: #999;font-size: 0.12rem;
}

js部分

    data部分加入默认选择：  checkType: '1',//在选择立即支付时，根据checkType的值，判断支付方式

支付宝微信支付方式的选择相关推荐

支付宝微信的数字经营项目是风口还是割韭菜（带项目评测）
大部分创业者存在一个误区,就是忽视创业前的市场调研,尤其是通过加盟形式代理产品时.往往只听人家一面之词,就糊里糊涂去找店铺.装修.找员工.开始营业,最终的结果多半是亏本转让或者艰难维继. 而我现在要做 ...
利用Apple Developer申请苹果开发者账号（支付宝微信付款）
因为近期苹果开发者账号在网页申请无法付款,所以苹果推出了Apple Developer 应用,支持在苹果手机申请开发者账号并且付款,支付宝微信银行卡都可以付款! 无法在网页申请的可以尝试这个方式去申请 ...
Android-移动支付支付宝微信银联
前言这里开篇讲解一系列的Android相关的移动支付.移动支付也称为手机支付,用户使用移动的设备,完成对所购买商品或者服务的支付功能.包括远程支付(网上支付.短信支付),近场支付(刷卡.滴卡.pos ...
个人申请支付宝微信支付接口教程（无需营业执照）
提示:以下教程只适用于自己申请的微信支付,如果您已成功申请微信支付的通过微信认证的服务号,您可以按照以下教程操作,如果您是未认证的服务号,或者还未成功申请微信支付服务号,您只能使用系统代收的方式. 以 ...
WooCommerce接入支付宝微信支付
WooCommerce接入支付宝微信支付前言安装支付宝插件(方法一) 安装配置获取注册信息安装支付宝插件(方法二) 安装微信支付插件下载及安装获取微信公众号APPID,微信支付密钥获取微 ...
ajax余额支付宝微信支付（多种情况调用同一个接口、jquery创建新对象设置属性）
需求:需要用余额.支付宝.微信支付方式支付会员,余额支付显示余额其余支付不显示余额.余额点支付直接成功或失败,支付宝/微信支付弹出相应的二维码.支付接口为同一个,但要处理三种情况. 用到了ajax的c ...
app内嵌h5支付功能，跳转支付宝微信，vue组件
一.功能梳理 app内前h5涉及到支付的功能,ios非实物商品实付需要使用ios原生支付方式,实物商品则可以三方支付,主要的实现思路为后端返回跳转支付宝或微信的支付scheme链接,前端进行跳转支付, ...
移动支付--银联,支付宝,微信(android)
在这个移动互联网快速发展的时代,手机已经成为人们生活或者出行之中必不可少的设备了,如今非常多城市的商户都能够採用支付宝,微信支付了.人们出门仅仅须要随身携带带手机.不用带大量现金就能够放心购物了.如今 ...
【安卓学习之第三方库】 Rxpay学习：支付宝微信支付
█ [安卓学习之第三方库] Rxpay学习:支付宝微信支付 █ 相关文章: [安卓学习之第三方库]库的使用2-jar类库的使用(以dom4j为例)和升级(以极光推送为例) [安卓学习之第三方库] 消息 ...

支付宝微信支付方式的选择

32.支付宝微信支付方式的单选框选择

支付宝微信支付方式的选择相关推荐

最新文章

热门文章