洛阳学员端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

183 lines
4.1 KiB

<template>
<view class="pageBg">
<view class="pad">
<view class="card">
<view class="row" @click="showReason=true">
<view class="lab">退款原因</view>
<view class="val">申请同城转校</view>
<view class="icon">
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<view class="tpsBlue">此操作容易造成您已有学时丢失请谨慎</view>
<view class="row">
<view class="lab">退款金额</view>
<view class="val">
<u--input placeholder="请输入" border="none" clearable type="number" maxlength="11" v-model="FormData.phone"></u--input>
</view>
</view>
<view class="tpsBlue">退款金额不可超过¥2000.00</view>
</view>
<view class="card">
<view class="row">
<view class="lab">持卡人</view>
<view class="val">
<u--input placeholder="请输入" border="none" clearable type="number" maxlength="11" v-model="FormData.phone"></u--input>
</view>
</view>
<view class="row">
<view class="lab">手机号</view>
<view class="val">
<view class="flex-b">
<view class="inputBox">
<u--input placeholder="请输入" border="none" clearable type="number" maxlength="11" v-model="FormData.phone"></u--input>
</view>
<view class="code">获取验证码</view>
</view>
</view>
</view>
<view class="row">
<view class="lab">验证码</view>
<view class="val">
<u--input placeholder="请输入" border="none" clearable type="number" maxlength="11" v-model="FormData.phone"></u--input>
</view>
</view>
<view class="row">
<view class="lab">卡号</view>
<view class="val">
<view class="flex-b">
<view class="inputBox">
<u--input placeholder="请输入" border="none" clearable type="number" maxlength="11" v-model="FormData.phone"></u--input>
</view>
<view class="scan">
<image src="@/static/images/userCenter/btn_yinhangkax.png" mode=""></image>
</view>
</view>
</view>
</view>
<view class="row">
<view class="lab">开户行</view>
<view class="val">
<u--input placeholder="请输入" border="none" clearable type="number" maxlength="11" v-model="FormData.phone"></u--input>
</view>
</view>
</view>
<view class="footerBtn">
<view class="btnBg">提交</view>
</view>
</view>
<u-picker :show="showReason" :columns="reasonArr" keyName="lab" @confirm="confirmReason" @cancel="showReason=false"></u-picker>
</view>
</template>
<script>
export default {
data() {
return {
FormData: {
},
showReason: false ,
reasonArr: [
[
{lab: '不想学了',id: 1},
{lab: '有事情',id: 2},
{lab: '去别的地方学',id: 3},
]
],
}
},
methods: {
confirmReason(val) {
let item = val.value[0]
this.showReason = false
console.log(item)
}
}
}
</script>
<style lang="scss" scoped>
.card {
padding: 12rpx 28rpx;
margin-bottom: 24rpx;
.tpsBox {
height: 140rpx;
background: #FFFFFF;
border-radius: 16rpx;
.row {
height: 100%;
display: flex;
align-items: center;
.icon {
width: 36rpx;
height: 36rpx;
}
.tps {
padding-left: 26rpx;
font-size: 28rpx;
font-weight: 600;
color: $themC;
line-height: 1.2em;
}
}
}
}
.h1 {
margin-bottom: 20rpx;
}
.card {
.row {
display: flex;
align-items: center;
justify-content: space-between;
height: 80rpx;
line-height: 80rpx;
.lab {
font-size: 28rpx;
color: #333;
font-weight: 500;
width: 152rpx;
}
.val {
flex: 1;
&.tpsBlue {
font-size: 24rpx;
}
.flex-b {
.scan {
width: 44rpx;
height: 44rpx;
}
.code {
flex-shrink: 0;
color: #ADADAD;
&.active {
color: $themC;
}
}
}
}
.icon {
u-icon {
}
}
}
.tpsBlue {
color: #FF7270;
margin-bottom: 10rpx;
padding-left: 152rpx;
font-size: 24rpx;
}
.tpsHui {
font-size: 24rpx;
color: #ADADAD;
padding: 0rpx 0 16rpx 0;
}
}
</style>