zq
5 months ago
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