提交 256a0d01b337e85db05ff84bc444659be5500e40

作者 wangyu
1 个父辈 46d5cfee

picker的模版封装及部分添加

... ... @@ -19,6 +19,34 @@
19 19 height: 2rpx;
20 20 }
21 21
  22 +.item_body {
  23 + width: 100%;
  24 + height: 80rpx;
  25 +}
  26 +
  27 +.text_black_28 {
  28 + font-family: PingFangSC-Regular;
  29 + font-size: 28rpx;
  30 + color: #000;
  31 + line-height: 80rpx;
  32 +}
  33 +
  34 +.text_333_28 {
  35 + font-family: PingFangSC-Regular;
  36 + font-size: 28rpx;
  37 + color: #333;
  38 + text-align: right;
  39 + line-height: 80rpx;
  40 +}
  41 +
  42 +.arrow_wrap {
  43 + width: 40rpx;
  44 + height: 40rpx;
  45 + float: right;
  46 + margin-top: 20rpx;
  47 + margin-left: 8rpx;
  48 +}
  49 +
22 50 .float_right {
23 51 float: right;
24 52 }
... ... @@ -36,4 +64,4 @@
36 64 color: #fff;
37 65 bottom: 0;
38 66 line-height: 84rpx;
39   -}
\ No newline at end of file
  67 +}
... ...
  1 +<template name="picker_cell_normal">
  2 + <view class='item_body'>
  3 + <text style='color:red;font-size: 28rpx;line-height: 80rpx;float:left'>*</text>
  4 + <text class='text_black_28 float_left'>{{label}}</text>
  5 + <image class='arrow_wrap' src='/images/arrow_right.png'></image>
  6 +
  7 + <view class="weui-cell__bd">
  8 + <picker mode="{{mode?mode:'selector'}}" range-key="{{range_key}}" range="{{values}}" fields="{{fields}}" start="{{start}}" end="{{end}}" bindchange="{{onChange}}" bindcolumnchange="{{onColumnChange}}" disabled="{{disabled}}">
  9 + <view wx:if="{{selected}}" class="text_333_28 float_right">{{selected}}</view>
  10 + <view wx:elif="{{placeholder}}" class="cell_right_label">{{placeholder}}</view>
  11 + </picker>
  12 + </view>
  13 +
  14 + <!-- <text class='text_333_28 float_right'>请选择关系</text> -->
  15 + </view>
  16 +</template>
\ No newline at end of file
... ...
... ... @@ -5,73 +5,171 @@ Page({
5 5 * 页面的初始数据
6 6 */
7 7 data: {
8   -
  8 + isshow01: false,
  9 + isshow02: false,
  10 + isshow03: false,
  11 + singleDatas: [],
  12 + relativeData: {
  13 + label: '关系',
  14 + selected: '请选择关系',
  15 + values: ["子女", "配偶"],
  16 + onChange: 'onPickerSelect'
  17 + },
  18 + personstatusData: {
  19 + label: '纳税人状态',
  20 + selected: '请选择纳税人状态',
  21 + values: ["正常(在职)", "非正常"],
  22 + onChange: 'onPickerSelect'
  23 + },
  24 + cardtypeData: {
  25 + label: '证照类型',
  26 + selected: '居民身份证',
  27 + values: ["居民身份证", "军官证",'士兵证','武警警官证','港澳居民来往大陆通行证','外交官证','中国护照',
  28 + '外国护照','香港永久性居民身份证','澳门特别行政区永久性居民身份证','台湾身份证','外国人永久居留证'],
  29 + onChange: 'onPickerSelect'
  30 + },
  31 + relativeData: {
  32 + label: '是否境外人员',
  33 + selected: '否',
  34 + values: ["否", "是"],
  35 + onChange: 'onPickerSelect'
  36 + },
  37 + genderData: {
  38 + label: '性别',
  39 + selected: '请选择性别',
  40 + values: ["男", "女"],
  41 + onChange: 'onPickerSelect'
  42 + },
  43 + degreeData: {
  44 + label: '学历',
  45 + selected: '请选择学历',
  46 + values: ["研究生", "大学本科",'大学本科以下'],
  47 + onChange: 'onPickerSelect'
  48 + },
  49 + deformityData: {
  50 + label: '是否残疾',
  51 + selected: '否',
  52 + values: ["否", "是"],
  53 + onChange: 'onPickerSelect'
  54 + },
  55 + lieshuData: {
  56 + label: '是否烈属',
  57 + selected: '否',
  58 + values: ["否", "是"],
  59 + onChange: 'onPickerSelect'
  60 + },
  61 + lonelyolderData: {
  62 + label: '是否孤老',
  63 + selected: '否',
  64 + values: ["否", "是"],
  65 + onChange: 'onPickerSelect'
  66 + },
  67 + employeeData: {
  68 + label: '是否雇员',
  69 + selected: '否',
  70 + values: ["否", "是"],
  71 + onChange: 'onPickerSelect'
  72 + },
  73 + investpersonData: {
  74 + label: '是否天使投资个人',
  75 + selected: '否',
  76 + values: ["否", "是"],
  77 + onChange: 'onPickerSelect'
  78 + },
  79 + condition: false
9 80 },
10 81
11 82 /**
12 83 * 生命周期函数--监听页面加载
13 84 */
14   - onLoad: function (options) {
15   -
  85 + onLoad: function(options) {
  86 +
16 87 },
17 88
18 89 /**
19 90 * 生命周期函数--监听页面初次渲染完成
20 91 */
21   - onReady: function () {
22   -
  92 + onReady: function() {
  93 +
23 94 },
24 95
25 96 /**
26 97 * 生命周期函数--监听页面显示
27 98 */
28   - onShow: function () {
29   -
  99 + onShow: function() {
  100 + console.log(this.data.isshow01)
  101 + },
  102 +
  103 + span: function(e) {
  104 + console.log(e)
  105 + if ("1" == e.target.id) {
  106 + this.setData({
  107 + isshow01: !this.data.isshow01
  108 + })
  109 + } else if ("2" == e.target.id) {
  110 + this.setData({
  111 + isshow02: !this.data.isshow02
  112 + })
  113 + } else if ("3" == e.target.id) {
  114 + this.setData({
  115 + isshow03: !this.data.isshow03
  116 + })
  117 + }
  118 +
  119 + },
  120 +
  121 + onPickerSelect: function(e) {
  122 + console.log('picker发送选择改变,携带值为', e.detail.value)
  123 + var relative_data = this.data.relativeData
  124 + relative_data.selected = relative_data.values[e.detail.value]
  125 + this.setData({
  126 + relativeData: relative_data
  127 + })
30 128 },
31 129
32   - getIdInfo:function(e){
33   - if(true){
34   - wx.navigateTo({
35   - url: '../idinfo/idinfo',
36   - success: function(res) {},
37   - })
38   - }else{
  130 + getIdInfo: function(e) {
  131 + if (true) {
  132 + wx.navigateTo({
  133 + url: '../idinfo/idinfo',
  134 + success: function(res) {},
  135 + })
  136 + } else {
39 137
40   - }
  138 + }
41 139 },
42 140
43 141 /**
44 142 * 生命周期函数--监听页面隐藏
45 143 */
46   - onHide: function () {
47   -
  144 + onHide: function() {
  145 +
48 146 },
49 147
50 148 /**
51 149 * 生命周期函数--监听页面卸载
52 150 */
53   - onUnload: function () {
54   -
  151 + onUnload: function() {
  152 +
55 153 },
56 154
57 155 /**
58 156 * 页面相关事件处理函数--监听用户下拉动作
59 157 */
60   - onPullDownRefresh: function () {
61   -
  158 + onPullDownRefresh: function() {
  159 +
62 160 },
63 161
64 162 /**
65 163 * 页面上拉触底事件的处理函数
66 164 */
67   - onReachBottom: function () {
68   -
  165 + onReachBottom: function() {
  166 +
69 167 },
70 168
71 169 /**
72 170 * 用户点击右上角分享
73 171 */
74   - onShareAppMessage: function () {
75   -
  172 + onShareAppMessage: function() {
  173 +
76 174 }
77 175 })
\ No newline at end of file
... ...
1 1 <!--pages/main//editinfo/editinfo.wxml-->
  2 +<import src="../../common/picker_cell_normal"/>
  3 +
2 4 <view class='page'>
3 5 <form bindsubmit='formBindSubmit'>
4 6
5   - <!-- 成员关系 -->
  7 + <!-- 成员关系 -->
6 8 <view class='head_wrap'>
7 9 <text class='head_text_wrap1'>成员关系</text>
8   - <image class='head_image_wrap' src='/images/arrow_down.png' bindtap=''></image>
9 10 </view>
10   -<view class='data_list'>
  11 + <view class='data_list'>
11 12 <view class='data_item'>
12   - <view class='item_body'>
  13 + <view class='item_body'>
13 14 <text style='color:red;font-size: 28rpx;line-height: 80rpx;float:left'>*</text>
14 15 <text class='text_black_28 float_left'>姓名</text>
15 16 <input class='input_wrap float_right' placeholder='请填写姓名'></input>
16 17 </view>
17 18 <view class="divide_line"></view>
18   - <view class='item_body'>
  19 + <!-- <view class='item_body' bindtap='openpicker'>
19 20 <text style='color:red;font-size: 28rpx;line-height: 80rpx;float:left'>*</text>
20 21 <text class='text_black_28 float_left'>关系</text>
21 22 <image class='arrow_wrap' src='/images/arrow_right.png'></image>
22 23 <text class='text_333_28 float_right'>请选择关系</text>
23   - </view>
24   - <view class="divide_line"></view>
25   - </view> </view>
  24 + </view> -->
  25 +
  26 + <template is="picker_cell_normal" data="{{...relativeData}}"/>
  27 + </view>
  28 + </view>
26 29
27 30 <!-- 基本信息 -->
28   - <view class='head_wrap'>
  31 + <view class='head_wrap' bindtap='span' id='1'>
29 32 <text class='head_text_wrap1'>基本信息</text>
30 33 <text class='head_text_wrap2'>(点击收起非必填选项)</text>
31   - <image class='head_image_wrap' src='/images/arrow_down.png' bindtap=''></image>
  34 + <view style='float:right' wx:if='{{isshow01}}'>
  35 + <image class='head_image_wrap_up' src='/images/arrow_up.png'></image>
  36 + </view>
  37 + <view wx:else style='float:right'>
  38 + <image class='head_image_wrap_down' src='/images/arrow_down.png'></image>
  39 + </view>
  40 + <!-- <image class='{{isshow01}}?head_image_wrap_up:head_image_wrap_down' src="{{isshow01?'/images/arrow_up.png':'/images/arrow_down.png'}}"></image> -->
32 41 </view>
33 42
34 43 <view class='data_list'>
... ... @@ -67,7 +76,7 @@
67 76 <text style='color:red;font-size: 28rpx;line-height: 80rpx;float:left'>*</text>
68 77 <text class='text_black_28 float_left'>证照号码</text>
69 78 <image class='image_camera float_right' src='/images/camera.png'></image>
70   - <text class='text_333_28 float_right'>74385949574684868496</text>
  79 + <text class='text_333_28 float_right'></text>
71 80 </view>
72 81 <view class="divide_line"></view>
73 82
... ... @@ -77,9 +86,10 @@
77 86 <image class='arrow_wrap' src='/images/arrow_right.png'></image>
78 87 <text class='text_333_28 float_right'>否</text>
79 88 </view>
80   - <view class="divide_line"></view>
81 89 <!-- 非必填部分 -->
82   - <view hidden='{{false}}'>
  90 + <view hidden='{{!isshow01}}'>
  91 + <view class="divide_line"></view>
  92 +
83 93 <view class='item_body'>
84 94 <text class='text_666_28 float_left'>性别</text>
85 95 <image class='arrow_wrap' src='/images/arrow_right.png'></image>
... ... @@ -141,10 +151,15 @@
141 151 </view>
142 152
143 153 <!-- 联系方式 -->
144   - <view class='head_wrap' style='margin-top:20rpx'>
  154 + <view class='head_wrap' style='margin-top:20rpx' bindtap='span' id='2'>
145 155 <text class='head_text_wrap1'>联系方式</text>
146 156 <text class='head_text_wrap2'>(点击收起非必填选项)</text>
147   - <image class='head_image_wrap' src='/images/arrow_down.png' bindtap=''></image>
  157 + <view style='float:right' wx:if='{{isshow02}}'>
  158 + <image class='head_image_wrap_up' src='/images/arrow_up.png'></image>
  159 + </view>
  160 + <view wx:else style='float:right'>
  161 + <image class='head_image_wrap_down' src='/images/arrow_down.png'></image>
  162 + </view>
148 163 </view>
149 164
150 165 <view class='data_list'>
... ... @@ -154,64 +169,73 @@
154 169 <text class='text_black_28 float_left'>联系电话</text>
155 170 <input class='input_wrap float_right' placeholder='请填写电话'></input>
156 171 </view>
157   - <view class="divide_line"></view>
158   - <view class='item_body'>
159   - <text class='text_666_28 float_left'>联系地址</text>
160   - <image class='arrow_wrap' src='/images/arrow_right.png'></image>
161   - <text class='text_333_28 float_right'></text>
162   - </view>
163   - <view class="divide_line"></view>
164   - <view class='item_body'>
165   - <text class='text_666_28 float_left'>详细地址</text>
166   - <input class='input_wrap float_right'></input>
167   - </view>
168   - <view class="divide_line"></view>
169   - <view class='item_body'>
170   - <text class='text_666_28 float_left'>开户银行</text>
171   - <image class='arrow_wrap' src='/images/arrow_right.png'></image>
172   - <text class='text_333_28 float_right'></text>
173   - </view>
174   - <view class="divide_line"></view>
175   - <view class='item_body'>
176   - <text class='text_666_28 float_left'>银行账号</text>
177   - <input class='input_wrap float_right'></input>
178   - </view>
179   - <view class="divide_line"></view>
180   - <view class='item_body'>
181   - <text class='text_666_28 float_left'>电子邮箱</text>
182   - <input class='input_wrap float_right'></input>
183   - </view>
184   - <view class="divide_line"></view>
185   - <view class='item_body'>
186   - <text class='text_666_28 float_left'>居住地</text>
187   - <image class='arrow_wrap' src='/images/arrow_right.png'></image>
188   - <text class='text_333_28 float_right'></text>
189   - </view>
190   - <view class="divide_line"></view>
191   - <view class='item_body'>
192   - <text class='text_666_28 float_left'>详细地址</text>
193   - <input class='input_wrap float_right'></input>
194   - </view>
195   - <view class="divide_line"></view>
196   - <view class='item_body'>
197   - <text class='text_666_28 float_left'>户籍所在地</text>
198   - <image class='arrow_wrap' src='/images/arrow_right.png'></image>
199   - <text class='text_333_28 float_right'></text>
200   - </view>
201   - <view class="divide_line"></view>
202   - <view class='item_body'>
203   - <text class='text_666_28 float_left'>详细地址</text>
204   - <input class='input_wrap float_right'></input>
  172 + <!-- 非必填部分02 -->
  173 + <view hidden='{{!isshow02}}'>
  174 + <view class="divide_line"></view>
  175 + <view class='item_body'>
  176 + <text class='text_666_28 float_left'>联系地址</text>
  177 + <image class='arrow_wrap' src='/images/arrow_right.png'></image>
  178 + <text class='text_333_28 float_right'></text>
  179 + </view>
  180 + <view class="divide_line"></view>
  181 + <view class='item_body'>
  182 + <text class='text_666_28 float_left'>详细地址</text>
  183 + <input class='input_wrap float_right'></input>
  184 + </view>
  185 + <view class="divide_line"></view>
  186 + <view class='item_body'>
  187 + <text class='text_666_28 float_left'>开户银行</text>
  188 + <image class='arrow_wrap' src='/images/arrow_right.png'></image>
  189 + <text class='text_333_28 float_right'></text>
  190 + </view>
  191 + <view class="divide_line"></view>
  192 + <view class='item_body'>
  193 + <text class='text_666_28 float_left'>银行账号</text>
  194 + <input class='input_wrap float_right'></input>
  195 + </view>
  196 + <view class="divide_line"></view>
  197 + <view class='item_body'>
  198 + <text class='text_666_28 float_left'>电子邮箱</text>
  199 + <input class='input_wrap float_right'></input>
  200 + </view>
  201 + <view class="divide_line"></view>
  202 + <view class='item_body'>
  203 + <text class='text_666_28 float_left'>居住地</text>
  204 + <image class='arrow_wrap' src='/images/arrow_right.png'></image>
  205 + <text class='text_333_28 float_right'></text>
  206 + </view>
  207 + <view class="divide_line"></view>
  208 + <view class='item_body'>
  209 + <text class='text_666_28 float_left'>详细地址</text>
  210 + <input class='input_wrap float_right'></input>
  211 + </view>
  212 + <view class="divide_line"></view>
  213 + <view class='item_body'>
  214 + <text class='text_666_28 float_left'>户籍所在地</text>
  215 + <image class='arrow_wrap' src='/images/arrow_right.png'></image>
  216 + <text class='text_333_28 float_right'></text>
  217 + </view>
  218 + <view class="divide_line"></view>
  219 + <view class='item_body'>
  220 + <text class='text_666_28 float_left'>详细地址</text>
  221 + <input class='input_wrap float_right'></input>
  222 + </view>
  223 + <view class="divide_line"></view>
205 224 </view>
206   - <view class="divide_line"></view>
  225 +
207 226 </view>
208 227 </view>
209 228
210 229 <!-- 任职雇佣信息 -->
211   - <view class='head_wrap' style='margin-top:20rpx'>
  230 + <view class='head_wrap' style='margin-top:20rpx' bindtap='span' id='3'>
212 231 <text class='head_text_wrap1'>任职雇佣信息</text>
213 232 <text class='head_text_wrap2'>(点击收起非必填选项)</text>
214   - <image class='head_image_wrap' src='/images/arrow_down.png' bindtap=''></image>
  233 + <view style='float:right' wx:if='{{isshow03}}'>
  234 + <image class='head_image_wrap_up' src='/images/arrow_up.png'></image>
  235 + </view>
  236 + <view wx:else style='float:right'>
  237 + <image class='head_image_wrap_down' src='/images/arrow_down.png'></image>
  238 + </view>
215 239 </view>
216 240
217 241 <view class='data_list'>
... ... @@ -229,46 +253,49 @@
229 253 <image class='arrow_wrap' src='/images/arrow_right.png'></image>
230 254 <text class='text_333_28 float_right'></text>
231 255 </view>
232   - <view class="divide_line"></view>
233   - <view class='item_body'>
234   - <text class='text_666_28 float_left'>是否雇员</text>
235   - <image class='arrow_wrap' src='/images/arrow_right.png'></image>
236   - <text class='text_333_28 float_right'></text>
237   - </view>
238   - <view class="divide_line"></view>
239   - <view class='item_body'>
240   - <text class='text_666_28 float_left'>公司股本总额</text>
241   - <input class='input_wrap float_right'></input>
242   - </view>
243   - <view class="divide_line"></view>
244   - <view class='item_body'>
245   - <text class='text_666_28 float_left'>在职受雇日期</text>
246   - <image class='arrow_wrap' src='/images/arrow_right.png'></image>
247   - <text class='text_333_28 float_right'></text>
248   - </view>
249   - <view class="divide_line"></view>
250   - <view class='item_body'>
251   - <text class='text_666_28 float_left'>离职日期</text>
252   - <image class='arrow_wrap' src='/images/arrow_right.png'></image>
253   - <text class='text_333_28 float_right'></text>
254   - </view>
255   - <view class="divide_line"></view>
256   - <view class='item_body'>
257   - <text class='text_666_28 float_left'>工号</text>
258   - <input class='input_wrap float_right'></input>
259   - </view>
260   - <view class="divide_line"></view>
261   - <view class='item_body'>
262   - <text class='text_666_28 float_left'>是否天使投资个人</text>
263   - <image class='arrow_wrap' src='/images/arrow_right.png'></image>
264   - <text class='text_333_28 float_right'></text>
265   - </view>
266   - <view class="divide_line"></view>
267   - <view class='item_body'>
268   - <text class='text_666_28 float_left'>个人投资总额</text>
269   - <input class='input_wrap float_right'></input>
  256 + <view hidden='{{!isshow03}}'>
  257 + <view class="divide_line"></view>
  258 + <view class='item_body'>
  259 + <text class='text_666_28 float_left'>是否雇员</text>
  260 + <image class='arrow_wrap' src='/images/arrow_right.png'></image>
  261 + <text class='text_333_28 float_right'></text>
  262 + </view>
  263 + <view class="divide_line"></view>
  264 + <view class='item_body'>
  265 + <text class='text_666_28 float_left'>公司股本总额</text>
  266 + <input class='input_wrap float_right'></input>
  267 + </view>
  268 + <view class="divide_line"></view>
  269 + <view class='item_body'>
  270 + <text class='text_666_28 float_left'>在职受雇日期</text>
  271 + <image class='arrow_wrap' src='/images/arrow_right.png'></image>
  272 + <text class='text_333_28 float_right'></text>
  273 + </view>
  274 + <view class="divide_line"></view>
  275 + <view class='item_body'>
  276 + <text class='text_666_28 float_left'>离职日期</text>
  277 + <image class='arrow_wrap' src='/images/arrow_right.png'></image>
  278 + <text class='text_333_28 float_right'></text>
  279 + </view>
  280 + <view class="divide_line"></view>
  281 + <view class='item_body'>
  282 + <text class='text_666_28 float_left'>工号</text>
  283 + <input class='input_wrap float_right'></input>
  284 + </view>
  285 + <view class="divide_line"></view>
  286 + <view class='item_body'>
  287 + <text class='text_666_28 float_left'>是否天使投资个人</text>
  288 + <image class='arrow_wrap' src='/images/arrow_right.png'></image>
  289 + <text class='text_333_28 float_right'></text>
  290 + </view>
  291 + <view class="divide_line"></view>
  292 + <view class='item_body'>
  293 + <text class='text_666_28 float_left'>个人投资总额</text>
  294 + <input class='input_wrap float_right'></input>
  295 + </view>
  296 + <view class="divide_line"></view>
270 297 </view>
271   - <view class="divide_line"></view>
  298 +
272 299
273 300 <view style='width:100%'>
274 301 <text class='text_666_28 float_left'>备注</text>
... ... @@ -282,4 +309,6 @@
282 309
283 310 <button class="btn_bottom" formType="submit"> 保存</button>
284 311 </form>
285   -</view>
\ No newline at end of file
  312 +</view>
  313 +
  314 +<!-- 普通选择器 -->
... ...
... ... @@ -31,11 +31,15 @@
31 31 text-align: left;
32 32 }
33 33
34   -.head_image_wrap {
  34 +.head_image_wrap_down {
35 35 width: 28rpx;
36   - height: 14rpx;
37   - float: right;
38   - margin-top: 24rpx;
  36 + height: 16rpx;
  37 +}
  38 +
  39 +.head_image_wrap_up {
  40 + width: 40rpx;
  41 + height: 40rpx;
  42 + margin-top: 16rpx;
39 43 }
40 44
41 45 .data_list {
... ... @@ -53,18 +57,6 @@
53 57 display: flex;
54 58 }
55 59
56   -.item_body {
57   - width: 100%;
58   - height: 80rpx;
59   -}
60   -
61   -.text_black_28 {
62   - font-family: PingFangSC-Regular;
63   - font-size: 28rpx;
64   - color: #000;
65   - line-height: 80rpx;
66   -}
67   -
68 60 .input_wrap {
69 61 width: 500rpx;
70 62 height: 80rpx;
... ... @@ -76,14 +68,6 @@
76 68 white-space: nowrap;
77 69 }
78 70
79   -.text_333_28 {
80   - font-family: PingFangSC-Regular;
81   - font-size: 28rpx;
82   - color: #333;
83   - text-align: right;
84   - line-height: 80rpx;
85   -}
86   -
87 71 .text_666_28 {
88 72 font-family: PingFangSC-Regular;
89 73 font-size: 28rpx;
... ... @@ -92,19 +76,11 @@
92 76 line-height: 80rpx;
93 77 }
94 78
95   -.arrow_wrap {
96   - width: 40rpx;
97   - height: 40rpx;
98   - float: right;
99   - margin-top: 20rpx;
100   - margin-left: 8rpx;
101   -}
102   -
103 79 .image_camera {
104   - width: 48rpx;
105   - height: 48rpx;
  80 + width: 42rpx;
  81 + height: 42rpx;
106 82 margin-left: 10rpx;
107   - margin-top: 16rpx;
  83 + margin-top: 22rpx;
108 84 }
109 85
110 86 .extra_input {
... ...
... ... @@ -7,7 +7,7 @@ Page({
7 7 * 页面的初始数据
8 8 */
9 9 data: {
10   - taxlist:["",""]
  10 + taxlist:[""]
11 11 },
12 12
13 13 /**
... ...
注册登录 后发表评论