@@ -0,0 +1,67 @@ | |||||
// pages/payee/add/add.js | |||||
const app = getApp(); | |||||
Page({ | |||||
/** | |||||
* 页面的初始数据 | |||||
*/ | |||||
data: { | |||||
isIPX: app.globalData.isIPX, | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面加载 | |||||
*/ | |||||
onLoad(options) { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面初次渲染完成 | |||||
*/ | |||||
onReady() { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面显示 | |||||
*/ | |||||
onShow() { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面隐藏 | |||||
*/ | |||||
onHide() { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面卸载 | |||||
*/ | |||||
onUnload() { | |||||
}, | |||||
/** | |||||
* 页面相关事件处理函数--监听用户下拉动作 | |||||
*/ | |||||
onPullDownRefresh() { | |||||
}, | |||||
/** | |||||
* 页面上拉触底事件的处理函数 | |||||
*/ | |||||
onReachBottom() { | |||||
}, | |||||
/** | |||||
* 用户点击右上角分享 | |||||
*/ | |||||
onShareAppMessage() { | |||||
} | |||||
}) |
@@ -0,0 +1,6 @@ | |||||
{ | |||||
"navigationStyle": "custom", | |||||
"usingComponents": { | |||||
"van-field": "@vant/weapp/field/index" | |||||
} | |||||
} |
@@ -0,0 +1,16 @@ | |||||
<!--pages/payee/add/add.wxml--> | |||||
<view class="ns" style="height:{{isIPX?'88px':'64px'}};"> | |||||
<image src="../../image/apply/back.png" style="top:{{isIPX?'54px':'30px'}};" mode="widthFix" bindtap="back"></image> | |||||
<text style="top:{{isIPX?'54px':'30px'}};">支出申请</text> | |||||
</view> | |||||
<view class="main-box table-box" style="margin-top:{{isIPX?'100px':'75px'}};"> | |||||
<van-field label="所属银行" value="{{ value }}" placeholder="请选择" border="{{ false }}" bind:change="onChange" input-align="right" required is-link arrow-direction ="down"/> | |||||
<van-field label="户名" value="{{ value }}" placeholder="请输入姓名" border="{{ false }}" bind:change="onChange" input-align="right" required/> | |||||
<van-field label="卡号" value="{{ value }}" placeholder="请输入收款账号" border="{{ false }}" bind:change="onChange" input-align="right" required/> | |||||
<van-field label="账户类型" value="{{ value }}" placeholder="请选择" border="{{ false }}" bind:change="onChange" input-align="right" required is-link arrow-direction ="down"/> | |||||
<van-field label="开户行" value="{{ value }}" placeholder="请选择" border="{{ false }}" bind:change="onChange" input-align="right" required is-link arrow-direction ="down" /> | |||||
<van-field label="联行号" value="{{ value }}" placeholder="请输入" border="{{ false }}" bind:change="onChange" input-align="right" required/> | |||||
</view> | |||||
<view class="bottom"> | |||||
<view class="btn2" bindtap="swichPaymentApply">确认</view> | |||||
</view> |
@@ -0,0 +1,50 @@ | |||||
/* pages/payee/add/add.wxss */ | |||||
.main-box{ | |||||
background: #ffffff; | |||||
padding: 20px; | |||||
width: 94%; | |||||
margin: 0 auto; | |||||
border-radius: 10px; | |||||
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.16); | |||||
} | |||||
.table-box van-field van-cell .van-cell{ | |||||
margin-bottom: 15px; | |||||
} | |||||
.table-box van-field:last-child van-cell .van-cell{ | |||||
margin-bottom: 0px; | |||||
} | |||||
.van-cell{ | |||||
padding: 0!important; | |||||
} | |||||
.van-cell--required:before { | |||||
left: 0!important; | |||||
} | |||||
.van-field__label { | |||||
padding-left: 10px; | |||||
} | |||||
.bottom{ | |||||
width: 100%; | |||||
margin: 0 auto; | |||||
text-align: center; | |||||
margin-top: 30px; | |||||
margin-bottom: 30px; | |||||
display: flex; | |||||
position: absolute; | |||||
bottom: 10%; | |||||
} | |||||
.bottom view { | |||||
width: 47%; | |||||
margin: 0 auto; | |||||
border-radius: 30px; | |||||
display: inline-block; | |||||
} | |||||
.bottom .btn2{ | |||||
border: 1px solid transparent; | |||||
padding: 8px 0px; | |||||
background-image: linear-gradient(to right, #2C8E68, #5CAE77); | |||||
color: #fff; | |||||
} |
@@ -0,0 +1,9 @@ | |||||
{ | |||||
"usingComponents": { | |||||
"van-checkbox": "@vant/weapp/checkbox/index", | |||||
"van-checkbox-group": "@vant/weapp/checkbox-group/index", | |||||
"van-cell": "@vant/weapp/cell/index", | |||||
"van-cell-group": "@vant/weapp/cell-group/index", | |||||
"van-search": "@vant/weapp/search/index" | |||||
} | |||||
} |
@@ -0,0 +1,48 @@ | |||||
<!--pages/payee/index.wxml--> | |||||
<view class="ns" style="height:{{isIPX?'88px':'64px'}};"> | |||||
<image src="../../image/apply/back.png" style="top:{{isIPX?'54px':'30px'}};" mode="widthFix" bindtap="back"></image> | |||||
<text style="top:{{isIPX?'54px':'30px'}};">支出申请</text> | |||||
</view> | |||||
<view class="search_box" style="margin-top:{{isIPX?'100px':'75px'}};"> | |||||
<van-search | |||||
value="{{ value }}" | |||||
shape="round" | |||||
background="transparent" | |||||
placeholder="请输入搜索关键词" | |||||
/> | |||||
<view class="add_btn"><text>新增</text></view> | |||||
</view> | |||||
<van-checkbox-group value="{{ result }}" bind:change="onChange"> | |||||
<van-cell-group> | |||||
<van-cell | |||||
wx:for="{{ list }}" | |||||
wx:key="index" | |||||
value-class="value-class" | |||||
clickable | |||||
data-index="{{ index }}" | |||||
bind:click="toggle" | |||||
use-label-slot | |||||
center | |||||
> | |||||
<view slot="icon" style="margin-right: 10px;"> | |||||
<image src="/image/apply/icon_icbc.png" style="width: 20px;height: 20px;vertical-align: middle;"></image> | |||||
</view> | |||||
<view slot="title"> | |||||
张亮亮 | |||||
</view> | |||||
<view slot="label"> | |||||
6217****2186 中国银行 | |||||
</view> | |||||
<van-checkbox | |||||
catch:tap="noop" | |||||
checked-color="#2C8E68" | |||||
class="checkboxes-{{ index }}" | |||||
name="{{ item }}" | |||||
/> | |||||
</van-cell> | |||||
</van-cell-group> | |||||
</van-checkbox-group> | |||||
<view class="bottom"> | |||||
<view class="btn2" bindtap="swichPaymentApply">确认</view> | |||||
</view> |
@@ -0,0 +1,54 @@ | |||||
/* pages/payee/index.wxss */ | |||||
.value-class { | |||||
flex: none !important; | |||||
} | |||||
.van-cell{ | |||||
background-color: transparent!important; | |||||
} | |||||
.van-search__content { | |||||
border: 1px solid #5CAE77!important; | |||||
background: transparent!important; | |||||
} | |||||
van-search { | |||||
flex: 0.8; | |||||
} | |||||
.search_box{ | |||||
display: flex; | |||||
} | |||||
.add_btn{ | |||||
flex: 0.2; | |||||
padding: var(--search-padding,10px 12px); | |||||
padding-left: 0; | |||||
} | |||||
.add_btn text{ | |||||
background-color: #62AD66; | |||||
display: block; | |||||
height: 100%; | |||||
text-align: center; | |||||
line-height: 36px; | |||||
color: #fff; | |||||
border-radius: 36px; | |||||
box-shadow: 0px 5px 5px #ddd; | |||||
} | |||||
.bottom{ | |||||
width: 84%; | |||||
margin: 0 auto; | |||||
text-align: center; | |||||
margin-top: 30px; | |||||
margin-bottom: 30px; | |||||
display: flex; | |||||
} | |||||
.bottom view { | |||||
width: 47%; | |||||
margin: 0 auto; | |||||
border-radius: 30px; | |||||
display: inline-block; | |||||
} | |||||
.bottom .btn2{ | |||||
border: 1px solid transparent; | |||||
padding: 8px 0px; | |||||
background-image: linear-gradient(to right, #2C8E68, #5CAE77); | |||||
color: #fff; | |||||
} |