@@ -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; | |||
} |