This commit is contained in:
林深时见react 2022-07-21 20:33:25 +08:00
parent fff5eaad06
commit 8939634357
3 changed files with 36 additions and 15 deletions

View File

@ -32,13 +32,9 @@
height: 96rpx; height: 96rpx;
padding: 0 32rpx; padding: 0 32rpx;
font-size: 32rpx; font-size: 32rpx;
margin-bottom: 32rpx;
background-color: #fff; background-color: #fff;
} }
.pannel-item .last {
margin-bottom: -13rpx;
}
.pannel-label { .pannel-label {
width: 160rpx; width: 160rpx;
margin-right: 32rpx; margin-right: 32rpx;

View File

@ -22,7 +22,7 @@ const IDCardTypeOptions = [
const PICKER_KEY = { const PICKER_KEY = {
SEX: 'sex', SEX: 'sex',
IDCARD: 'IDCard' IDCARD: 'idCard'
}; };
export default OakPage({ export default OakPage({
@ -74,11 +74,16 @@ export default OakPage({
GenderOptions, GenderOptions,
IDCardTypeOptions, IDCardTypeOptions,
PICKER_KEY, PICKER_KEY,
sexVisible: true,
}, },
methods: { methods: {
setValue(input: any) { setValue(input: any) {
console.log(input, 123123);
const { dataset, value } = this.resolveInput(input); const { dataset, value } = this.resolveInput(input);
const { key } = dataset;
if (key === 'sex') {
this.setUpdateData(dataset!.attr, value[0]);
return
}
this.setUpdateData(dataset!.attr, value); this.setUpdateData(dataset!.attr, value);
}, },
async confirm() { async confirm() {
@ -89,17 +94,16 @@ export default OakPage({
}, },
onClickPicker(e) { onClickPicker(e) {
const { key } = e?.currentTarget?.dataset; const { key } = e?.currentTarget?.dataset;
console.log(key);
this.setData({ this.setData({
[`${key}Visible`]: true, [`${key}Visible`]: true,
}); });
}, },
onPickerCancel(e) { onPickerClose(e) {
const { key } = e?.currentTarget?.dataset; const { key } = e?.currentTarget?.dataset;
this.setData({ this.setData({
[`${key}Visible`]: false, [`${key}Visible`]: false,
}); });
}, },
}, },
}); });

View File

@ -17,31 +17,52 @@
bindchange="setValue" bindchange="setValue"
> >
</t-date-time-picker> </t-date-time-picker>
<t-cell title="性别" hover arrow bind:click="chooseSex" />
<view class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.SEX}}"> <view class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.SEX}}">
<view class="pannel-label">性别</view> <view class="pannel-label">
<text style="color: #e34d59"> *</text>性别
</view>
<view class="pannel-text">{{genderText || '选择性别'}}</view> <view class="pannel-text">{{genderText || '选择性别'}}</view>
<t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" /> <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
</view> </view>
<view class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.IDCARD}}">
<view class="pannel-label">
<text style="color: #e34d59"> *</text>证件类别
</view>
<view class="pannel-text">{{idCardTypeText || '选择证件类别'}}</view>
<t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
</view>
<t-picker <t-picker
visible="{{sexVisiable}}" data-key="{{PICKER_KEY.SEX}}"
visible="{{sexVisible}}"
oak:value="gender" oak:value="gender"
title="选择性别" title="选择性别"
cancelBtn="取消" cancelBtn="取消"
confirmBtn="确认" confirmBtn="确认"
bindchange="setValue" bindchange="setValue"
bindcancel="onPickerCancel" bindcancel="onPickerClose"
bindconfirm="close" bindconfirm="onPickerClose"
> >
<t-picker-item options="{{GenderOptions}}"></t-picker-item> <t-picker-item options="{{GenderOptions}}"></t-picker-item>
</t-picker> </t-picker>
<t-picker
data-key="{{PICKER_KEY.IDCARD}}"
visible="{{idCardVisible}}"
oak:value="idCardType"
title="选择证件类型"
cancelBtn="取消"
confirmBtn="确认"
bindchange="setValue"
bindcancel="onPickerClose"
bindconfirm="onPickerClose"
>
<t-picker-item options="{{IDCardTypeOptions}}"></t-picker-item>
</t-picker>
<t-input placeholder="请输入" label="slot" size="medium" type="number" confirm-type="done" oak:value="idNumber" bind:change="setValue"> <t-input placeholder="请输入" label="slot" size="medium" type="number" confirm-type="done" oak:value="idNumber" bind:change="setValue">
<text slot="label"> <text slot="label">
<text style="color: #e34d59"> *</text>证件号 <text style="color: #e34d59"> *</text>证件号
</text> </text>
</t-input> </t-input>
<l-picker required="{{true}}" label="出生日期" placeholder="请选择" mode="date" data-attr="birth" value="{{birthText}}" bind:linchange="setValue" /> <l-picker required="{{true}}" label="出生日期" placeholder="请选择" mode="date" data-attr="birth" value="{{birthText}}" bind:linchange="setValue" />
<l-picker required="{{true}}" label="性别" placeholder="请选择" arr="{{GenderOptions}}" rangeKey="label" oak:value="gender" bind:linchange="setValue" />
<l-picker required="{{true}}" label="证件类别" placeholder="请选择" arr="{{IDCardTypeOptions}}" rangeKey="label" oak:value="idCardType" bind:linchange="setValue" /> <l-picker required="{{true}}" label="证件类别" placeholder="请选择" arr="{{IDCardTypeOptions}}" rangeKey="label" oak:value="idCardType" bind:linchange="setValue" />
</view> </view>
<view style="flex: 1" /> <view style="flex: 1" />