sdz/jobslink-user-clent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

project init

Browse Source
This commit is contained in:
zxy
2024-02-02 10:24:54 +08:00
commit 21a84c3035
253 changed files with 25212 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
pageMy/federation/forMembership/payment.vue Normal file
View File

@@ -0,0 +1,170 @@
<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>