<!-- 扫码支付 -->
|
<template>
|
<view class="page">
|
<view class="shop u-flex u-row-between">
|
<view class="u-m-r-30">
|
<view class="u-font-28 color-666 u-m-b-10">付款给</view>
|
<view class="u-font-34 font-bold color-333">{{ shopInfo.shop_name }}</view>
|
</view>
|
<image :src="shopInfo.logo_image||'/static/imgs/store-logo.png'" class="avg-img"></image>
|
</view>
|
<view class="u-p-48 bg-fff u-flex-1 content">
|
<view class="u-font-28 color-666">金额</view>
|
<view class="u-p-v-20 u-flex u-border-bottom u-relative">
|
<view class="money-icon color-333">¥</view>
|
<view class="u-flex-1 u-flex u-m-l-10" style="height: 80rpx;">
|
<view v-if="money" class="money-num">{{ money }}</view>
|
<view :class="['cursor',{'cursor-act':!money&&bordShow}]"></view>
|
<view v-if="!money" class="u-font-50 color-999">请输入金额</view>
|
<view :class="['cursor',{'cursor-act':money&&bordShow}]"></view>
|
</view>
|
<view class="mask" @click="showBord"></view>
|
</view>
|
<view class="u-font-28 color-666 u-m-t-60">选择支付方式</view>
|
<u-radio-group v-model="bankCardId" placement="column">
|
<view v-if="platform == 5" class="u-border-bottom u-p-v-20 u-flex u-row-between">
|
<image src="@/static/imgs/pay-zfb.png" class="pay-icon"></image>
|
<view class="flex-1">
|
<view class="u-font-30 color-333">支付宝</view>
|
<text v-if="isNew" class="tag u-m-t-10">会员享优惠</text>
|
<text v-if="!isNew&&token&&shopInfo.use_score_flag&&shopInfo.app_pay_use_score_flag"
|
class="u-font-24 color-999 u-m-t-10">
|
可用
|
<text class="color-red">{{ integral }}</text>
|
积分
|
</text>
|
</view>
|
<view v-if="token&&couponInfo&&shopInfo.user_coupon_flag&&shopInfo.app_pay_use_coupon_flag" class="tag-pain">
|
满{{
|
parseFloat((couponInfo.thresholdValue / 100).toFixed(2))
|
}}元减{{ parseFloat((couponInfo.discount / 100).toFixed(2)) }}元
|
</view>
|
<u-radio @change="radioChange($event,5)" :name="5" activeColor="#D41F28"
|
:customStyle="{ marginLeft: '10rpx' }"></u-radio>
|
</view>
|
<view v-if="platform == 2" class="u-border-bottom u-p-v-20 u-flex u-row-between">
|
<image src="@/static/imgs/pay-wx.png" class="pay-icon"></image>
|
<view class="flex-1">
|
<view class="u-font-30 color-333">微信</view>
|
<text v-if="isNew" class="tag u-m-t-10">会员享优惠</text>
|
<text v-if="!isNew&&token&&shopInfo.use_score_flag&&shopInfo.app_pay_use_score_flag"
|
class="u-font-24 color-999 u-m-t-10">
|
可用
|
<text class="color-red">{{ integral }}</text>
|
积分
|
</text>
|
</view>
|
<view v-if="token&&couponInfo&&shopInfo.user_coupon_flag&&shopInfo.app_pay_use_coupon_flag" class="tag-pain">
|
满{{
|
parseFloat((couponInfo.thresholdValue / 100).toFixed(2))
|
}}元减{{ parseFloat((couponInfo.discount / 100).toFixed(2)) }}元
|
</view>
|
<u-radio @change="radioChange($event,2)" :name="2" activeColor="#D41F28"
|
:customStyle="{ marginLeft: '10rpx' }">
|
</u-radio>
|
</view>
|
<navigator v-if="shuaka&&token&&bankCard!=-1" class="shuka" url="/pages/pay/shuaKa/shuaKa">
|
<image src="/static/shuaka/shuaka.png" mode=""></image>
|
</navigator>
|
<view v-if="bankCard.id" class="u-border-bottom u-p-v-20 u-flex">
|
<view @click="bordShow=false;bankCardOpen=true" class="flex-1 u-flex">
|
<image :src="bankCardStyle.logo" class="pay-icon"></image>
|
<view>
|
<view class="u-font-30 color-333 u-flex">
|
{{ bankCard.bankName }}({{ cardType[bankCard.cardType] }})({{ bankCard.cardNo }})
|
<u-icon name="arrow-right"
|
color="#000">
|
</u-icon>
|
</view>
|
<!-- <text v-if="isNew" class="tag u-m-t-10">会员享优惠</text> -->
|
<text v-if="!isNew&&shopInfo.use_score_flag&&shopInfo.bank_pay_use_score_flag"
|
class="u-font-24 color-999 u-m-t-10">
|
可用
|
<text class="color-red">{{ integral }}</text>
|
积分
|
</text>
|
</view>
|
</view>
|
<view v-if="!isNew&&shopInfo.user_coupon_flag&&shopInfo.bank_pay_use_coupon_flag&&couponInfo"
|
class="tag-pain">
|
满{{
|
parseFloat((couponInfo.thresholdValue / 100).toFixed(2))
|
}}元减{{ parseFloat((couponInfo.discount / 100).toFixed(2)) }}元
|
</view>
|
<u-radio @change="radioChange($event,3)" :name="bankCard.id" activeColor="#D41F28"
|
:customStyle="{ marginLeft: '10rpx' }">
|
</u-radio>
|
</view>
|
</u-radio-group>
|
<navigator v-if="bankCard==-1&&bindCard&&token&&!isNew" class="shuka" url="/pages/pay/bindCard/bindCard">
|
<image src="/static/bangka.png" mode=""></image>
|
</navigator>
|
<navigator v-if="bankCard==-1&&!isNew" url="/pages/pay/bindCard/bindCard"
|
class="u-border-bottom u-p-v-20 u-flex u-row-between">
|
<view class="u-flex-1 u-flex ">
|
<image class="pay-icon" :src="bankCardStyle.logo" mode=""></image>
|
<view class="flex-1 u-m-l-20">
|
<view class="u-font-30 color-333">银行卡</view>
|
<view class="u-font-24 color-red">绑卡可享更多优惠</view>
|
</view>
|
</view>
|
<u-radio disabled activeColor="#D41F28" :customStyle="{ marginLeft: '30rpx' }">
|
</u-radio>
|
</navigator>
|
<navigator v-if="isNew" class="reg-btn" :url="'/pages/pay/register?cid='+cid">
|
<image src="/static/register-btn.png" mode=""></image>
|
</navigator>
|
<!-- <view class="btn">
|
<wx-open-launch-weapp class="wx-app" id="launch-btn" appid="wxfc579973fbdde096"
|
username="gh_3676c3af5dda" path="pages/index/index" env-version="release">
|
<script type="text/wxtag-template">
|
<style>
|
.btn {
|
border: none;
|
position: absolute;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
border-radius: 50px;
|
text-align: center;
|
line-height: 100%;
|
color: #BF3B00;
|
font-size: 18px;
|
font-weight: 600;
|
background: linear-gradient(180deg, rgba(253, 222, 95, 1) 0%, rgba(254, 172, 31, 1) 71%, rgba(254, 186, 40, 1) 100%);
|
}
|
</style>
|
<button class="btn">打开小程序</button>
|
</script>
|
</wx-open-launch-weapp>
|
</view>-->
|
</view>
|
|
|
<button class="pay-it" @click="pay">付款</button>
|
<!-- 选择银行卡 -->
|
<u-popup mode="bottom" :closeable="true" :show="bankCardOpen" :round="10" @close="bankCardOpen = false">
|
<view class="u-font-32 color-333 u-text-center u-p-30 u-border-bottom">选择银行支付</view>
|
<scroll-view scroll-y class="u-p-h-30 bankCard-list">
|
<block v-for="(item,i) in bankCardList" :key="i">
|
<view @click="chooseBankCard(item)" class="u-border-bottom u-p-v-30 u-flex">
|
<view class="flex-1 u-flex">
|
<image :src="bankCardStyle.logo" class="pay-icon"></image>
|
<view>
|
<view class="u-font-26 color-333">{{ item.bankName }}</view>
|
<view class="u-m-t-10 u-font-28 color-333">{{ cardType[item.cardType] }}({{ item.cardNo }})
|
</view>
|
</view>
|
</view>
|
<u-icon name="checkbox-mark" :color="bankCardId==item.id?'#D31F28':'#fff'" size="22"></u-icon>
|
</view>
|
</block>
|
<navigator url="/pages/pay/bindCard/bindCard" class="u-border-bottom u-p-v-30 u-flex">
|
<view class="add-icon">
|
<u-icon name="plus" bold color="#D31F28"></u-icon>
|
</view>
|
<view class="u-font-28 color-333 u-m-l-20">使用新卡支付</view>
|
</navigator>
|
</scroll-view>
|
</u-popup>
|
<!-- 数字键盘 -->
|
<u-popup :show="bordShow" :overlay="false" @close="bordShow = false">
|
<key-bord @changeMoney="changeMoney" :num.sync="money" @close="bordShow = false" @pay="pay"></key-bord>
|
</u-popup>
|
<!-- 支付验证码 -->
|
<u-popup :show="codeShow" closeable mode="center" @close="codeShow = false">
|
<view class="u-p-h-40 u-p-b-40">
|
<view class="u-text-center u-p-t-20 u-m-b-30 u-font-34">请输入手机验证码</view>
|
<view class="u-text-center u-m-b-20 color-666">{{ shopInfo.shop_name }}</view>
|
<view class="u-flex u-row-center font-bold u-m-b-40">
|
<text class="u-font-42">￥</text>
|
<text
|
class="u-font-money">{{ money }}
|
</text>
|
</view>
|
<u-code-input @finish="bankPay" v-model="smscode" mode="box" :focus="true"></u-code-input>
|
</view>
|
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
import {
|
config,
|
cardType,
|
ACCESSTOKEN
|
} from '@/common/config.js';
|
import {
|
headBand,
|
bankCardStyle,
|
myBankCard,
|
queryShop,
|
queryMyDiscount,
|
getScoreWorth,
|
getOpenId,
|
getUserId,
|
queryScore,
|
queryMyUseSweepPayMaxCoupon,
|
getWechatConfigInfo,
|
saveWxOrder,
|
tlPay
|
} from '@/common/api/index'
|
import wx from 'weixin-js-sdk'; // 使用js-sdk
|
import {
|
activityInfo
|
} from '@/common/api/shuaka'
|
|
export default {
|
data() {
|
return {
|
platform: this.$utils.getPlat(),
|
cardType: cardType,
|
cid: '',
|
bordShow: false, // 显示键盘
|
scoreWorth: 0,
|
shopInfo: {
|
shop_name: '',
|
scan_flag: '',
|
use_score_flag: 0, //商铺是否可用积分 0否 1是
|
user_coupon_flag: 0, //商铺是否可用优惠券 0否 1是
|
app_pay_use_score_flag: 0, //微信/支付宝是否可用积分 0否 1是
|
app_pay_use_coupon_flag: 0, //微信/支付宝是否可用优惠券 0否 1是
|
bank_pay_use_score_flag: 0, //银行卡支付是否可用积分 0否 1是
|
bank_pay_use_coupon_flag: 0, //银行卡支付是否可用优惠券 0否 1是
|
},
|
money: '', // 金额
|
integral: 0, // 使用积分
|
couponInfo: null, // 优惠券内容
|
payWay: 3, //支付方式 5 支付宝 2 微信 3银行卡
|
token: null,
|
isNew: false, // 是否新用户，新用户查询不到积分和银行卡
|
codeShow: false, // 银行卡支付验证码输入弹窗
|
smscode: '', // 银行卡支付验证码
|
thpinfo: null,
|
bankCardStyle: {
|
color: '',
|
logo: ''
|
},
|
bankCardList: [], //银行卡列表
|
bankCard: -1, // 选中银行卡
|
bankCardId: null, // 选中银行卡
|
bankCardOpen: false,
|
canReset: false,
|
end: 0,
|
count: 0,
|
shuaka: null, //刷卡活动
|
bindCard: false, // 绑卡有礼
|
discount: {
|
memberGradeName: '',
|
shopDiscount: 10
|
},
|
aLiUserId: ''
|
};
|
},
|
onLoad(opt) {
|
this.isNew = uni.getStorageSync('IS_NEW')
|
uni.showLoading()
|
this.payWay = this.platform
|
if (opt.cid) {
|
this.cid = opt.cid
|
uni.setStorageSync('CID', opt.cid)
|
this.init()
|
}
|
if (opt.code || opt.auth_code) {
|
let type = this.platform
|
let code = opt.code
|
if (this.platform == 5) {
|
code = opt.auth_code
|
}
|
this.end++
|
getOpenId({
|
params: {
|
code: opt.code
|
}
|
}).then(res => {
|
this.count++
|
if (this.count >= this.end) {
|
uni.hideLoading()
|
}
|
this.token = res.token.accessToken
|
uni.setStorageSync(ACCESSTOKEN, res.token.accessToken)
|
uni.setStorageSync('IS_NEW', res.isNew)
|
this.isNew = res.isNew
|
if (!res.isNew) {
|
this.getUserInfo()
|
}
|
}).catch(() => {
|
uni.hideLoading()
|
})
|
} else {
|
if (process.env.NODE_ENV === 'development') {
|
console.log('开发环境');
|
} else {
|
console.log('生产环境');
|
const redirect_uri = encodeURIComponent(window.location.href.split('?')[0] + '?cid=' + this.cid)
|
if (this.platform == 2) {
|
window.location.href =
|
`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${config.wx_appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
|
} else if (this.platform == 5) {
|
window.location.href =
|
`https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=${config.ali_appid}&scope=auth_base&redirect_uri=${redirect_uri}&state=STATE`
|
}
|
}
|
}
|
|
},
|
onShow() {
|
this.token = uni.getStorageSync(ACCESSTOKEN) || null
|
this.bordShow = false
|
this.bankCardOpen = false
|
this.codeShow = false
|
this.smscode = ''
|
if (this.canReset && this.token && !this.isNew) {
|
this.end = 0
|
this.count = 0
|
uni.showLoading()
|
this.getUserInfo()
|
}
|
this.canReset = true
|
},
|
methods: {
|
radioChange(e, item) {
|
this.bordShow = false
|
this.payWay = item
|
},
|
// 更新金额
|
changeMoney(str) {
|
this.money = str;
|
},
|
// 展示键盘
|
showBord() {
|
this.bordShow = true;
|
},
|
init() {
|
this.end += 5
|
//获取商铺信息
|
queryShop({
|
params: {
|
cid: this.cid
|
}
|
}).then(res => {
|
this.count++
|
if (this.count >= this.end) {
|
uni.hideLoading()
|
}
|
if (res.logo_image) {
|
try {
|
let arr = JSON.parse(res.logo_image)
|
res.logo_image = config.sftpURL + arr[0].path
|
} catch (e) {
|
//TODO handle the exception
|
res.logo_image = ''
|
}
|
}
|
this.shopInfo = res
|
}).catch(() => {
|
uni.hideLoading()
|
})
|
// 刷卡有礼
|
activityInfo().then(res => {
|
this.count++
|
if (this.count >= this.end) {
|
uni.hideLoading()
|
}
|
this.shuaka = res
|
}).catch(() => {
|
uni.hideLoading()
|
})
|
// 首绑有礼
|
headBand().then(res => {
|
this.count++
|
if (this.count >= this.end) {
|
uni.hideLoading()
|
}
|
this.bindCard = res
|
}).catch(() => {
|
uni.hideLoading()
|
})
|
// 积分价值
|
getScoreWorth().then(res => {
|
this.count++
|
if (this.count >= this.end) {
|
uni.hideLoading()
|
}
|
this.scoreWorth = res.settingVal
|
}).catch(() => {
|
uni.hideLoading()
|
})
|
//获取银行卡风格配置
|
bankCardStyle().then(res => {
|
this.count++
|
if (this.count >= this.end) {
|
uni.hideLoading()
|
}
|
try {
|
let arr = JSON.parse(res.logo)
|
res.logo = config.sftpURL + arr[0].path
|
} catch (e) {
|
//TODO handle the exception
|
res.logo = ''
|
}
|
this.bankCardStyle = res
|
uni.setStorageSync('bankCardStyle', res)
|
}).catch(() => {
|
uni.hideLoading()
|
})
|
if (this.platform == 2) {
|
this.end += 1
|
//获取微信jsSdk配置
|
const uri = encodeURIComponent(window.location)
|
getWechatConfigInfo({
|
url: uri
|
}).then(res => {
|
this.count++
|
if (this.count >= this.end) {
|
uni.hideLoading()
|
}
|
wx.config({
|
debug: false, // 开启调试模式
|
appId: res.appId, // 必填，公众号的唯一标识
|
timestamp: res.timestamp, // 必填，生成签名的时间戳
|
nonceStr: res.noncestr, // 必填，生成签名的随机串
|
signature: res.signature, // 必填，签名
|
jsApiList: ['chooseWXPay'], // 必填，需要使用的 JS 接口列表
|
openTagList: [
|
'wx-open-launch-weapp'
|
] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
|
});
|
}).catch(() => {
|
uni.hideLoading()
|
})
|
}
|
|
},
|
// 获取会员相关信息
|
getUserInfo() {
|
this.end += 4
|
|
queryMyDiscount({
|
shopId: this.shopInfo.id
|
}).then(res => {
|
this.count++
|
if (this.count >= this.end) {
|
uni.hideLoading()
|
}
|
res.shopDiscount = parseFloat(res.shopDiscount / 10)
|
this.discount = res
|
uni.setStorageSync('DISCOUNT_INFO', res)
|
}).catch(() => {
|
this.count++
|
if (this.count >= this.end) {
|
uni.hideLoading()
|
}
|
})
|
//获取用户银行卡
|
myBankCard().then(res => {
|
this.count++
|
if (this.count >= this.end) {
|
uni.hideLoading()
|
}
|
this.bankCardList = res.rows
|
if (res.rows[0]) {
|
this.bankCard = res.rows[0]
|
if (this.platform == 3) {
|
this.bankCardId = res.rows[0].id
|
}
|
} else {
|
this.bankCard = -1
|
}
|
}).catch(() => {
|
this.count++
|
if (this.count >= this.end) {
|
uni.hideLoading()
|
}
|
})
|
//获取用户积分
|
queryScore().then(res => {
|
this.count++
|
if (this.count >= this.end) {
|
uni.hideLoading()
|
}
|
this.integral = res.totalScore
|
}).catch(() => {
|
this.count++
|
if (this.count >= this.end) {
|
uni.hideLoading()
|
}
|
})
|
//获取用户优惠券
|
queryMyUseSweepPayMaxCoupon({
|
params: {
|
shopId: this.shopInfo.id
|
}
|
}).then(res => {
|
|
this.count++
|
if (this.count >= this.end) {
|
uni.hideLoading()
|
}
|
this.couponInfo = res
|
}).catch(() => {
|
this.count++
|
if (this.count >= this.end) {
|
uni.hideLoading()
|
}
|
})
|
},
|
// 选择银行卡
|
chooseBankCard(item) {
|
this.payWay = 3
|
this.bankCard = item;
|
this.$nextTick(() => {
|
this.bankCardId = item.id
|
this.bankCardOpen = false
|
})
|
},
|
//跳转营销页面
|
toDiscount() {
|
let toDiscount = false
|
//不是会员
|
if (this.isNew) toDiscount = false
|
//没有积分、没有优惠券、没有店铺优惠
|
if (this.integral == 0 && !this.couponInfo && this.discount.shopDiscount == 1) toDiscount = false
|
const shopInfo = encodeURIComponent(JSON.stringify(this.shopInfo))
|
//有店铺优惠
|
if (this.discount.shopDiscount != 1) {
|
toDiscount = true
|
}
|
if (this.payWay == 3 && (this.shopInfo.bank_pay_use_score_flag || this.shopInfo.bank_pay_use_coupon_flag)) { //银行卡支付
|
toDiscount = true
|
} else if ((this.shopInfo.use_score_flag && this.shopInfo.app_pay_use_score_flag) || (this.shopInfo.user_coupon_flag && this.shopInfo.app_pay_use_coupon_flag)) {
|
toDiscount = true
|
} else {
|
toDiscount = false
|
}
|
uni.navigateTo({
|
url: `/pages/pay/discountpay?shopInfo=${shopInfo}&integral=${this.integral}&scoreWorth=${this.scoreWorth}&money=${this.money}&payWay=${this.payWay}&bankCardId=${this.bankCardId}`
|
})
|
return toDiscount
|
},
|
//确认支付
|
pay() {
|
if (uni.$u.test.isEmpty(this.money)) {
|
uni.$u.toast('请输入金额！')
|
return
|
}
|
this.bordShow = false
|
// return this.toDiscount() //判断是否需要跳转营销页面
|
if (this.toDiscount()) {
|
// 金额 this.money
|
uni.showLoading()
|
const params = {
|
money: parseFloat((this.money * 100).toPrecision(12)),
|
shopId: this.shopInfo.id,
|
cid: this.cid,
|
payWay: this.payWay,
|
score: 0,
|
couponDetailId: ''
|
}
|
if (this.payWay == 3) {
|
params.bankCardId = this.bankCardId
|
}
|
//生成订单
|
saveWxOrder(params).then(res => {
|
uni.hideLoading()
|
try {
|
this.orderId = res.orderId
|
res.youHuiInfo.shopName = this.shopInfo.shop_name
|
this.youHuiInfo = res.youHuiInfo
|
if (res.toPayMethod == 1) {
|
if (this.payWay == 3) {
|
this.smscode = ''
|
this.codeShow = true
|
}
|
} else if (res.toPayMethod == 2) {
|
if (this.payWay == 2) {
|
this.wxPay(res.paymentData)
|
}
|
if (this.payWay == 5) {
|
this.aliPay(res.paymentData)
|
}
|
} else if (res.toPayMethod == 3) {
|
window.location.href = res.paymentUrl
|
}
|
} catch (e) {
|
//TODO handle the exception
|
console.error(e);
|
}
|
}).catch(() => {
|
uni.hideLoading()
|
})
|
}
|
|
},
|
// 微信支付
|
wxPay(res) {
|
setTimeout(() => {
|
wx.chooseWXPay({
|
timestamp: res.timeStamp, // 支付签名时间戳
|
nonceStr: res.nonceStr, // 支付签名随机串，不长于 32 位
|
package: res.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
|
signType: res.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
|
paySign: res.paySign, // 支付签名
|
success: function (res) {
|
// 支付成功后的回调函数
|
uni.navigateTo({
|
url: `/pages/pay/paySuccess?orderId=${this.orderId}&youHuiInfo=${JSON
|
.stringify(this.youHuiInfo)}`
|
})
|
}
|
});
|
}, 200)
|
},
|
//支付宝支付
|
aliPay(res) {
|
ap.tradePay({
|
tradeNO: res.tradeNO
|
}, (res) => {
|
if (res.resultCode == 9000) {
|
uni.navigateTo({
|
url: `/pages/pay/paySuccess?orderId=${this.orderId}&youHuiInfo=${JSON
|
.stringify(this.youHuiInfo)}`
|
})
|
// 支付成功
|
} else if (res.resultCode == 8000 || res.resultCode == 6001) {
|
// 正在处理中 || 取消
|
} else {
|
// 支付失败
|
}
|
});
|
},
|
//银行卡支付
|
bankPay(e) {
|
uni.showLoading()
|
tlPay({
|
orderId: this.orderId,
|
payWay: 3,
|
bankCardId: this.bankCardId,
|
smscode: e,
|
}).then(res => {
|
uni.hideLoading()
|
uni.hideKeyboard()
|
this.codeShow = false
|
uni.navigateTo({
|
url: `/pages/pay/paySuccess?orderId=${this.orderId}&youHuiInfo=${JSON
|
.stringify(this.youHuiInfo)}`
|
})
|
}).catch(() => {
|
uni.hideLoading()
|
})
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.page {
|
height: calc(100vh - 0px);
|
display: flex;
|
flex-direction: column;
|
}
|
|
.shop {
|
padding: 50rpx 64rpx;
|
}
|
|
.avg-img {
|
width: 94rpx;
|
height: 94rpx;
|
border-radius: 10rpx;
|
background-color: #ffffff;
|
}
|
|
.content {
|
border-radius: 40rpx 40rpx 0 0;
|
}
|
|
.money {
|
font-size: 40rpx;
|
color: #333;
|
}
|
|
.money-icon {
|
font-size: 70rpx;
|
// font-weight: bold;
|
margin-right: 20rpx;
|
}
|
|
.money-num {
|
font-size: 96rpx;
|
// font-weight: bold;
|
}
|
|
.pay-it {
|
position: absolute;
|
width: 686rpx;
|
height: 98rpx;
|
bottom: 0;
|
border-radius: 10rpx;
|
font-size: 34rpx;
|
color: #ffffff;
|
background-color: #de2d35;
|
margin: 32rpx;
|
}
|
|
.bank-card-ad {
|
padding-top: 50rpx;
|
background-image: url(~@/static/bank-card-ad1.png);
|
background-size: 100% auto;
|
background-position: top center;
|
background-repeat: no-repeat;
|
}
|
|
.pay-icon {
|
align-self: flex-start;
|
width: 48rpx;
|
height: 48rpx;
|
margin-right: 20rpx;
|
}
|
|
.tag {
|
background-color: #F35656;
|
font-size: 20rpx;
|
color: #fff;
|
border-radius: 4rpx;
|
line-height: 1;
|
padding: 4rpx;
|
}
|
|
.tag-pain {
|
border: 1px solid #D31F28;
|
font-size: 22rpx;
|
color: #D31F28;
|
border-radius: 4rpx;
|
line-height: 1;
|
padding: 8rpx 4rpx;
|
}
|
|
.mask {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
left: 0;
|
bottom: 0;
|
z-index: 101;
|
background-color: rgba(0, 0, 0, 0);
|
}
|
|
@keyframes cursor-blinks {
|
0% {
|
opacity: 1;
|
display: block;
|
}
|
|
50% {
|
opacity: 0;
|
display: none;
|
}
|
|
100% {
|
opacity: 1;
|
display: block;
|
}
|
}
|
|
.cursor {
|
border-left: 1px solid transparent;
|
height: 80rpx;
|
}
|
|
.cursor-act {
|
border-left: 1px solid #333;
|
animation: cursor-blinks 1s infinite steps(1, start);
|
}
|
|
.reg-btn {
|
display: block;
|
margin-top: 30rpx;
|
width: 654rpx;
|
height: 198rpx;
|
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.u-font-money {
|
font-size: 60rpx;
|
}
|
|
.bankCard-list {
|
height: 50vh;
|
width: 750rpx;
|
box-sizing: border-box;
|
|
.pay-icon {
|
align-self: center;
|
}
|
}
|
|
.add-icon {
|
width: 50rpx;
|
height: 50rpx;
|
border-radius: 25rpx;
|
background: #ffc0c38f;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.shuka {
|
width: 678rpx;
|
height: 45rpx;
|
position: relative;
|
left: -10rpx;
|
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.btn {
|
/* position: fixed;
|
bottom: 100rpx; */
|
margin: 0 auto;
|
margin-top: 120rpx;
|
position: relative;
|
width: 680rpx;
|
height: 100rpx;
|
}
|
|
.wx-app {
|
position: absolute;
|
width: 680rpx;
|
height: 100rpx;
|
}
|
</style>
|
