171 lines
4.0 KiB
Vue
171 lines
4.0 KiB
Vue
<template>
|
|
<view class="">
|
|
<view class="paymentList">
|
|
<view class="title">支付方式</view>
|
|
<view style="height: 45rpx;"></view>
|
|
<view class="payment" :class="{'active': jianhangValue}" @click="jianhangchange">
|
|
<view style="display: flex;align-items: center;">
|
|
<image class="img" v-if="jianhangValue" src="../../static/img/federation/jiansheyinhanglan.png" ></image>
|
|
<image class="img" v-else src="../../static/img/federation/jiansheyinhanghui.png"></image>
|
|
<view class="name">建行卡号支付</view>
|
|
<view class="price">手续费0.00元</view>
|
|
</view>
|
|
<checkbox :checked="jianhangValue" style="transform:scale(0.8)"/>
|
|
</view>
|
|
<view style="height: 45rpx;"></view>
|
|
<view class="payment" :class="{'active': yinlianValue}" @click="yinlianchange">
|
|
<view style="display: flex;align-items: center;">
|
|
<image class="img" v-if="yinlianValue" src="../../static/img/federation/yilianlan.png" ></image>
|
|
<image class="img" v-else src="../../static/img/federation/yinlianhui.png"></image>
|
|
<view class="name">银联支付</view>
|
|
<view class="price">手续费0.00元</view>
|
|
</view>
|
|
<checkbox :checked="yinlianValue" style="transform:scale(0.8)"/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="paymentPrice">
|
|
<view class="title">结算信息</view>
|
|
<view class="bodyPrice">
|
|
<view class="price"><view style="font-size: 46rpx;height: 20px;">￥</view>20.00</view>
|
|
<view class="tip">应付费用</view>
|
|
</view>
|
|
<view class="bottomPrice">
|
|
<view class="priceBox">
|
|
<view>缴费金额</view>
|
|
<view>¥ 20.00 元</view>
|
|
</view>
|
|
<view class="priceBox">
|
|
<view>支付手续费</view>
|
|
<view>¥ 0.00 元</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="nextBtn" @click="payment">
|
|
确认支付
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
data (){
|
|
return {
|
|
jianhangValue: false,
|
|
yinlianValue: false,
|
|
}
|
|
},
|
|
methods: {
|
|
jianhangchange (){
|
|
this.yinlianValue = false
|
|
this.jianhangValue = !this.jianhangValue
|
|
},
|
|
yinlianchange (){
|
|
this.jianhangValue = false
|
|
this.yinlianValue = !this.jianhangValue
|
|
},
|
|
payment (){
|
|
console.log('支付')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page{
|
|
background: #F6F6F6;;
|
|
}
|
|
.paymentPrice{
|
|
width: 690rpx;
|
|
height: 469rpx;
|
|
background: #FFFFFF;
|
|
margin: 0 30rpx;
|
|
.title{
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
padding: 30rpx 0 0 30rpx;
|
|
}
|
|
.bodyPrice{
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 205rpx;
|
|
.price{
|
|
font-size: 73rpx;
|
|
font-weight: normal;
|
|
color: #333333;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.tip{
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
}
|
|
.bottomPrice{
|
|
border-top: 1px solid #E8E8E8;
|
|
padding: 30rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
.priceBox{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
line-height: 36px;
|
|
}
|
|
}
|
|
}
|
|
.paymentList{
|
|
width: 630rpx;
|
|
height: 319rpx;
|
|
background: #FFFFFF;
|
|
margin:30rpx;
|
|
padding: 0 30rpx;
|
|
.title{
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
border-bottom: 1px solid #E8E8E8;
|
|
padding: 15px 0 10px 0;
|
|
}
|
|
.payment{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.img{
|
|
width: 50rpx;height: 50rpx;
|
|
}
|
|
.name{
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #999999;
|
|
width: 170rpx;
|
|
margin: 0 20rpx;
|
|
}
|
|
.price{
|
|
font-size: 22rpx;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
}
|
|
.active{
|
|
color: #1B66FF !important;
|
|
}
|
|
}
|
|
.nextBtn{
|
|
margin: 50rpx 30rpx;
|
|
height: 80rpx;
|
|
background: #1B66FF;
|
|
border-radius: 8rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
}
|
|
</style>
|