8 changed files with 1474 additions and 626 deletions
@ -0,0 +1,119 @@ |
|||
<template> |
|||
<view class="form-item"> |
|||
<!-- 左侧标签 + 必填提示 --> |
|||
<view class="label"> |
|||
<!-- <text v-if="required" class="required">*</text> --> |
|||
<text>{{ label }}</text> |
|||
<image v-if="required" class="required" :src="cssUrl + 'required.svg'" /> |
|||
</view> |
|||
|
|||
<!-- 输入模式 --> |
|||
<input |
|||
v-if="type === 'input'" |
|||
class="input" |
|||
:placeholder="placeholder" |
|||
:value="value" |
|||
@input="handleInput" |
|||
:disabled="disabled" |
|||
/> |
|||
|
|||
<!-- 点击选择模式（如性别、年份） --> |
|||
<view |
|||
v-else |
|||
class="picker" |
|||
@click="handleClick" |
|||
> |
|||
<text :class="{ 'placeholder': !value }"> |
|||
{{ displayValue || placeholder }} |
|||
</text> |
|||
<image class="right_img" :src="cssUrl + 'input_ex.png'" /> |
|||
|
|||
<!-- <uni-icons type="arrowright" size="14" color="#999" /> --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'FormItem', |
|||
props: { |
|||
label: String, // 左侧标签文本（如"姓名"） |
|||
type: { // 类型：input（输入）或 picker（点击选择） |
|||
type: String, |
|||
default: 'input', |
|||
validator: (val) => ['input', 'picker'].includes(val), |
|||
}, |
|||
value: [String, Number], // 绑定的值 |
|||
placeholder: String, // 占位文本 |
|||
required: Boolean, // 是否必填 |
|||
disabled: Boolean, // 是否禁用 |
|||
displayValue: String, // 显示的值（用于picker模式，如性别显示"男/女"） |
|||
}, |
|||
data(){ |
|||
return{ |
|||
cssUrl: this.cssUrl, |
|||
} |
|||
}, |
|||
methods: { |
|||
handleInput(e) { |
|||
this.$emit('input', e.detail.value); |
|||
}, |
|||
handleClick() { |
|||
if (!this.disabled) { |
|||
this.$emit('click'); // 触发父组件的选择逻辑 |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.form-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 36rpx 24rpx; |
|||
border-bottom: 1rpx solid #eee; |
|||
} |
|||
.right_img{ |
|||
width: 26rpx; |
|||
height: 26rpx; |
|||
} |
|||
|
|||
.label { |
|||
display: flex; |
|||
align-items: center; |
|||
font-family: PingFang SC; |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
line-height: 44rpx; |
|||
letter-spacing: 2rpx; |
|||
color: #222222; |
|||
} |
|||
|
|||
.required { |
|||
margin-left: 8rpx; |
|||
color: #f56c6c; |
|||
font-size: 12px; |
|||
width: 16rpx; |
|||
height: 16rpx; |
|||
} |
|||
|
|||
.input, |
|||
.picker { |
|||
flex: 1; |
|||
text-align: right; |
|||
padding-left: 20rpx; |
|||
color: #333; |
|||
} |
|||
|
|||
.placeholder { |
|||
font-family: PingFang SC; |
|||
font-size: 32rpx; |
|||
font-weight: normal; |
|||
line-height: 44rpx; |
|||
text-align: right; |
|||
letter-spacing: 0.24rpx; |
|||
color: #999999; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,167 @@ |
|||
<template> |
|||
<uni-popup ref="selectDate" :safe-area="false"> |
|||
<view class="popup-container"> |
|||
<view class="header"> |
|||
<view class="title PfScMedium">出生年份</view> |
|||
<image class="close-icon" @tap="closePop" :src="cssUrl + 'close.svg'" /> |
|||
</view> |
|||
<view class="date">请选择阳历出生年份</view> |
|||
|
|||
<view class="yearPicker date-wraper"> |
|||
<picker-view :value="value" @change="handleYearChange" class="picker-view"> |
|||
<picker-view-column class="picker-column"> |
|||
<view class="item" v-for="(item, index) in years" :key="index">{{ item }}</view> |
|||
</picker-view-column> |
|||
</picker-view> |
|||
</view> |
|||
|
|||
<view class="confirm-button-wrapper btPadding"> |
|||
<view class="confirm-button PfScMedium" @click="comfirmYear"> |
|||
确认 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
const date = new Date() |
|||
const years = [] |
|||
const year = date.getFullYear() |
|||
for (let i = 1990; i <= date.getFullYear(); i++) { |
|||
years.push(i) |
|||
} |
|||
return { |
|||
cssUrl:this.cssUrl, |
|||
years: years, // 年份列表 |
|||
currentYear: new Date().getFullYear(), |
|||
}; |
|||
}, |
|||
methods: { |
|||
handleYearChange(e) { |
|||
this.currentYear = this.years[e.detail.value]; |
|||
}, |
|||
comfirmYear(){ |
|||
this.$emit('change', this.currentYear) |
|||
this.closePop() |
|||
}, |
|||
show(){ |
|||
this.$refs.selectDate.open('bottom') |
|||
}, |
|||
closePop() { |
|||
this.$refs.selectDate.close() |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.yearPicker { |
|||
height: 470rpx; |
|||
background: #F7F7F7; |
|||
.picker-view { |
|||
height: 420rpx; |
|||
margin: 0 auto; |
|||
padding: 0 35rpx; |
|||
background: #F7F7F7; |
|||
|
|||
} |
|||
.item { |
|||
line-height: 70rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
text-align: center; |
|||
} |
|||
} |
|||
.popup-container { |
|||
position: relative; |
|||
max-height: calc(100vh - 200rpx); |
|||
overflow-y: scroll; |
|||
background: #ffffff; |
|||
border-radius: 40rpx 40rpx 0px 0px; |
|||
padding: 42rpx 54rpx 16rpx; |
|||
|
|||
.header { |
|||
position: relative; |
|||
text-align: center; |
|||
|
|||
.title { |
|||
font-weight: 500; |
|||
font-size: 32rpx; |
|||
color: #000000; |
|||
line-height: 36rpx; |
|||
} |
|||
|
|||
.close-icon { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.content-container { |
|||
padding: 24rpx 0rpx 68rpx; |
|||
font-family: PingFang SC; |
|||
|
|||
.content-item { |
|||
background: #FAFAFA; |
|||
|
|||
&:first-child { |
|||
border-top: none; |
|||
padding: 25rpx 24rpx; |
|||
} |
|||
|
|||
padding: 19rpx 24rpx; |
|||
border-top: 2rpx solid #F0F0F0; |
|||
|
|||
span {} |
|||
|
|||
.bold { |
|||
font-weight: 500; |
|||
font-size: 30rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
.top { |
|||
margin-top: 12rpx; |
|||
margin-bottom: 12rpx; |
|||
|
|||
} |
|||
|
|||
.special { |
|||
color: #949699; |
|||
letter-spacing: 2rpx; |
|||
font-size: 30rpx; |
|||
|
|||
.time { |
|||
margin: 0 6rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.confirm-button { |
|||
font-weight: 500; |
|||
font-size: 32rpx; |
|||
color: #ffffff; |
|||
margin-top: 46rpx; |
|||
line-height: 92rpx; |
|||
text-align: center; |
|||
width: 100%; |
|||
height: 92rpx; |
|||
background: #39d067; |
|||
border-radius: 16rpx; |
|||
} |
|||
|
|||
.date { |
|||
margin: 12rpx 36rpx 42rpx; |
|||
text-align: center; |
|||
color: #000000; |
|||
font-size: 26rpx; |
|||
font-family: PingFang SC; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,264 @@ |
|||
<template> |
|||
<uni-popup ref="sexWrap" :safe-area="false"> |
|||
<view class="popup-container"> |
|||
<view class="header"> |
|||
<view class="title PfScMedium">性别</view> |
|||
<image class="close-icon" @tap="closePop" :src="cssUrl + 'close.svg'" /> |
|||
</view> |
|||
<!-- <radio-group class="radio-group" @change="handleChange"> |
|||
<label class="radio-item" v-for="item in options" :key="item.value"> |
|||
<radio :value="item.value" :checked="value === item.value" /> |
|||
<text>{{ item.label }}</text> |
|||
</label> |
|||
</radio-group> --> |
|||
<view> |
|||
<uni-data-checkbox mode="button" v-model="tempValue" :localdata="options" |
|||
@change="handleChange"></uni-data-checkbox> |
|||
</view> |
|||
|
|||
<view class="confirm-button-wrapper btPadding"> |
|||
<view class="confirm-button PfScMedium" @click="handleConfirm"> |
|||
确认 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'MedicalInsuranceSelector', |
|||
options: { styleIsolation: "shared" }, |
|||
props: { |
|||
value: { // 当前选中的值（'yes' 或 'no'） |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
options: [ |
|||
{ text: '男', value: 0 }, |
|||
{ text: '女', value: 1 } |
|||
], |
|||
tempValue: this.value,// 临时存储选择的值 |
|||
cssUrl: this.cssUrl, |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
show() { |
|||
this.$refs.sexWrap.open('bottom') |
|||
}, |
|||
closePop() { |
|||
this.$refs.sexWrap.close() |
|||
}, |
|||
handleChange(e) { |
|||
this.tempValue = e.detail.value |
|||
}, |
|||
|
|||
handleConfirm() { |
|||
// this.$emit('input', this.tempValue) |
|||
this.$emit('confirm', this.tempValue) |
|||
this.closePop() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.medical-insurance-selector { |
|||
padding: 20rpx; |
|||
background-color: #fff; |
|||
border-radius: 12rpx; |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
.title { |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
.title text { |
|||
display: block; |
|||
font-size: 16px; |
|||
color: #333; |
|||
} |
|||
|
|||
.subtitle { |
|||
font-size: 14px; |
|||
color: #999; |
|||
margin-top: 10rpx; |
|||
} |
|||
|
|||
.radio-group { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.radio-item { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 90rpx; |
|||
border-bottom: 1rpx solid #f5f5f5; |
|||
} |
|||
|
|||
.radio-item text { |
|||
margin-left: 20rpx; |
|||
font-size: 15px; |
|||
} |
|||
|
|||
.popup-container { |
|||
position: relative; |
|||
max-height: calc(100vh - 200rpx); |
|||
overflow-y: scroll; |
|||
background: #ffffff; |
|||
border-radius: 40rpx 40rpx 0px 0px; |
|||
padding: 42rpx 54rpx 16rpx; |
|||
|
|||
.header { |
|||
position: relative; |
|||
text-align: center; |
|||
|
|||
.title { |
|||
font-weight: 500; |
|||
font-size: 32rpx; |
|||
color: #000000; |
|||
line-height: 36rpx; |
|||
} |
|||
|
|||
.close-icon { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.content-container { |
|||
padding: 24rpx 0rpx 68rpx; |
|||
font-family: PingFang SC; |
|||
|
|||
.content-item { |
|||
background: #FAFAFA; |
|||
|
|||
&:first-child { |
|||
border-top: none; |
|||
padding: 25rpx 24rpx; |
|||
} |
|||
|
|||
padding: 19rpx 24rpx; |
|||
border-top: 2rpx solid #F0F0F0; |
|||
|
|||
span {} |
|||
|
|||
.bold { |
|||
font-weight: 500; |
|||
font-size: 30rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
.top { |
|||
margin-top: 12rpx; |
|||
margin-bottom: 12rpx; |
|||
|
|||
} |
|||
|
|||
.special { |
|||
color: #949699; |
|||
letter-spacing: 2rpx; |
|||
font-size: 30rpx; |
|||
|
|||
.time { |
|||
margin: 0 6rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.confirm-button { |
|||
font-weight: 500; |
|||
font-size: 32rpx; |
|||
color: #ffffff; |
|||
margin-top: 46rpx; |
|||
line-height: 92rpx; |
|||
text-align: center; |
|||
width: 100%; |
|||
height: 92rpx; |
|||
background: #39d067; |
|||
border-radius: 16rpx; |
|||
} |
|||
|
|||
.date { |
|||
margin: 12rpx 36rpx 42rpx; |
|||
text-align: center; |
|||
color: #000000; |
|||
font-size: 26rpx; |
|||
font-family: PingFang SC; |
|||
} |
|||
|
|||
::v-deep .uni-data-checklist .checklist-group { |
|||
column-gap: 24rpx; |
|||
margin-bottom: 24rpx; |
|||
|
|||
.checklist-box { |
|||
margin: 0; |
|||
width: calc(50% - 14rpx); |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
.checklist-content { |
|||
flex: none; |
|||
} |
|||
|
|||
.checklist-content .checklist-text { |
|||
font-size: 30rpx; |
|||
font-weight: normal; |
|||
letter-spacing: 0.22rpx; |
|||
margin-left: 12rpx; |
|||
color: #666666; |
|||
} |
|||
|
|||
.radio__inner { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
border: 2rpx solid #BCBCBC; |
|||
border-radius: 36rpx; |
|||
} |
|||
|
|||
&.is--button { |
|||
margin-right: 0rpx; |
|||
padding: 20rpx 42rpx 20rpx 24rpx; |
|||
box-sizing: border-box; |
|||
border: none; |
|||
min-height: 82rpx; |
|||
border-radius: 8rpx; |
|||
transition: border-color 0.2s; |
|||
background: #F8F8F8; |
|||
|
|||
&.is-checked { |
|||
background: #F5FFF4; |
|||
|
|||
.radio__inner { |
|||
border-color: #00C160; |
|||
} |
|||
|
|||
.radio__inner-icon { |
|||
background: #00C160; |
|||
} |
|||
|
|||
.checklist-text { |
|||
color: #333333; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue