13 changed files with 519 additions and 130 deletions
@ -0,0 +1,336 @@ |
|||
<template> |
|||
<view style="border: 1px solid #e5e5e5"> |
|||
<view v-for="(item, index) in infoList" :key="index"> |
|||
<template v-for="(colItem, itemIndex) in item"> |
|||
<view v-if="colItem.showType === 1" :key="itemIndex" class="flex flex-col text-sm ml-4 border-b"> |
|||
<view class="my-3 flex justify-between items-center" @click="changeShow(index, itemIndex)"> |
|||
{{ colItem.name }} |
|||
<u-icon name="arrow-up" class="mx-2" color="#909399" v-if="colItem.show"></u-icon> |
|||
<u-icon name="arrow-down" class="mx-2" color="#909399" v-else></u-icon> |
|||
</view> |
|||
<view v-if="colItem.show"> |
|||
<!-- 单选 --> |
|||
<view v-if="colItem.type === 1"> |
|||
<radio-group @change="change($event, index, itemIndex, colItem.type)" class="flex flex-wrap"> |
|||
<label |
|||
class="uni-list-cell uni-list-cell-pd flex flex-wrap items-center mr-4 mb-3" |
|||
v-for="(item, index) in colItem.radioList" |
|||
:key="index" |
|||
> |
|||
<radio class="radio-style" :value="item" /> |
|||
<view>{{ item }}</view> |
|||
</label> |
|||
</radio-group> |
|||
</view> |
|||
<!-- 多选 --> |
|||
<view v-if="colItem.type === 5"> |
|||
<u-checkbox-group> |
|||
<u-checkbox |
|||
class="mb-3" |
|||
@change="change($event, index, itemIndex, colItem.type)" |
|||
v-model="checkboxItem.checked" |
|||
v-for="(checkboxItem, checkboxIndex) in colItem.checkList" |
|||
:key="checkboxIndex" |
|||
:name="checkboxItem.name" |
|||
>{{ checkboxItem.name }} |
|||
</u-checkbox> |
|||
</u-checkbox-group> |
|||
</view> |
|||
<!-- 吸烟 --> |
|||
<view v-if="colItem.type === 10"> |
|||
<radio-group @change="change($event, index, itemIndex, colItem.type)" class="flex flex-col"> |
|||
<label class="uni-list-cell uni-list-cell-pd flex flex-wrap items-center mb-3"> |
|||
<radio class="radio-style" :value="0" /> |
|||
<view>否</view> |
|||
</label> |
|||
<label class="uni-list-cell uni-list-cell-pd flex flex-wrap items-center mb-3"> |
|||
<radio class="radio-style" :value="1" /> |
|||
<view class="flex flex-nowrap items-center"> |
|||
曾经是，但已经戒烟，已戒 |
|||
<input |
|||
class="mx-1 w-12 h-6 text-center border-b" |
|||
placeholder="0" |
|||
v-model="colItem.value1" |
|||
:clearable="false" |
|||
type="number" |
|||
@change="change($event, index, itemIndex, colItem.type)" |
|||
/> |
|||
年 |
|||
</view> |
|||
</label> |
|||
<label class="uni-list-cell uni-list-cell-pd flex flex-wrap items-center mb-3"> |
|||
<radio class="radio-style" :value="2" /> |
|||
<view class="flex flex-nowrap items-center"> |
|||
是，烟龄 |
|||
<input |
|||
class="mx-1 w-12 h-6 text-center border-b" |
|||
placeholder="0" |
|||
v-model="colItem.value2" |
|||
:clearable="false" |
|||
type="number" |
|||
@change="change($event, index, itemIndex, colItem.type)" |
|||
/> |
|||
年，每天 |
|||
<input |
|||
class="mx-1 w-12 h-6 text-center border-b" |
|||
placeholder="0" |
|||
:border="true" |
|||
v-model="colItem.value3" |
|||
type="number" |
|||
@change="change($event, index, itemIndex, colItem.type)" |
|||
/>只 |
|||
</view> |
|||
</label> |
|||
</radio-group> |
|||
</view> |
|||
<!-- 饮酒 --> |
|||
<view v-if="colItem.type === 11"> |
|||
<radio-group @change="change($event, index, itemIndex, colItem.type)" class="flex flex-col"> |
|||
<label class="uni-list-cell uni-list-cell-pd flex flex-wrap items-center mb-3"> |
|||
<radio class="radio-style" :value="0" /> |
|||
<view>否</view> |
|||
</label> |
|||
<label class="uni-list-cell uni-list-cell-pd flex flex-wrap items-center mb-3"> |
|||
<radio class="radio-style" :value="1" /> |
|||
<view class="flex flex-nowrap items-center"> |
|||
曾经是，但已经戒酒，已戒 |
|||
<input |
|||
class="mx-1 w-12 h-6 text-center border-b" |
|||
placeholder="0" |
|||
v-model="colItem.value1" |
|||
:clearable="false" |
|||
type="number" |
|||
@change="change($event, index, itemIndex, colItem.type)" |
|||
/> |
|||
年 |
|||
</view> |
|||
</label> |
|||
</radio-group> |
|||
</view> |
|||
<!-- 饮茶 --> |
|||
<view v-if="colItem.type === 12"> |
|||
<radio-group @change="change($event, index, itemIndex, colItem.type)" class="flex flex-col"> |
|||
<label class="uni-list-cell uni-list-cell-pd flex flex-wrap items-center mb-3"> |
|||
<radio class="radio-style" :value="0" /> |
|||
<view>否</view> |
|||
</label> |
|||
<label class="uni-list-cell uni-list-cell-pd flex flex-wrap items-center mb-3"> |
|||
<radio class="radio-style" :value="1" /> |
|||
<view class="flex flex-nowrap items-center"> |
|||
曾经是，但已经不喝，已不喝 |
|||
<input |
|||
class="mx-1 w-12 h-6 text-center border-b" |
|||
placeholder="0" |
|||
v-model="colItem.value1" |
|||
:clearable="false" |
|||
type="number" |
|||
@change="change($event, index, itemIndex, colItem.type)" |
|||
/> |
|||
年 |
|||
</view> |
|||
</label> |
|||
<label class="uni-list-cell uni-list-cell-pd flex flex-wrap items-center mb-3"> |
|||
<radio class="radio-style" :value="2" /> |
|||
<view class="flex flex-nowrap items-center"> |
|||
是，已持续 |
|||
<input |
|||
class="mx-1 w-12 h-6 text-center border-b" |
|||
placeholder="0" |
|||
v-model="colItem.value2" |
|||
:clearable="false" |
|||
type="number" |
|||
@change="change($event, index, itemIndex, colItem.type)" |
|||
/> |
|||
年 |
|||
</view> |
|||
</label> |
|||
</radio-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view v-else :key="itemIndex" class="flex justify-between items-center text-sm border-b"> |
|||
<view class="ml-4 my-3">{{ colItem.name }}</view> |
|||
<!-- 日期: 年月日 --> |
|||
<view v-if="colItem.type === 2"> |
|||
<view @click="changeShow(index, itemIndex)"> |
|||
<text :class="colItem.value ? '' : 'text-gray-350'">{{ colItem.value || '请选择' }} </text> |
|||
<u-icon name="arrow-right" class="mx-2" color="#909399"></u-icon> |
|||
</view> |
|||
<u-picker |
|||
@confirm="change($event, index, itemIndex, colItem.type)" |
|||
v-model="colItem.show" |
|||
mode="time" |
|||
:params="paramsDay" |
|||
></u-picker> |
|||
</view> |
|||
<!-- 数字输入框 --> |
|||
<view v-if="colItem.type === 3" class="pr-7"> |
|||
<u-input placeholder="请输入" v-model="colItem.value" type="number" input-align="right" /> |
|||
</view> |
|||
<!-- 单列下拉选框 --> |
|||
<view v-if="colItem.type === 4"> |
|||
<view @click="changeShow(index, itemIndex)"> |
|||
<text :class="colItem.value ? '' : 'text-gray-350'">{{ colItem.value || '请选择' }} </text> |
|||
<u-icon name="arrow-right" class="mx-2" color="#909399"></u-icon> |
|||
</view> |
|||
<u-select |
|||
v-model="colItem.show" |
|||
mode="single-column" |
|||
:list="colItem.radioList" |
|||
@confirm="change($event, index, itemIndex, colItem.type)" |
|||
:default-value="[14]" |
|||
></u-select> |
|||
</view> |
|||
<!-- 日期: 年月日时 --> |
|||
<view v-if="colItem.type === 6"> |
|||
<view @click="changeShow(index, itemIndex)"> |
|||
<text :class="colItem.value ? '' : 'text-gray-350'">{{ colItem.value || '请选择' }} </text> |
|||
<u-icon name="arrow-right" class="mx-2" color="#909399"></u-icon> |
|||
</view> |
|||
<u-picker |
|||
@confirm="change($event, index, itemIndex, colItem.type)" |
|||
v-model="colItem.show" |
|||
mode="time" |
|||
:params="paramsHour" |
|||
></u-picker> |
|||
</view> |
|||
<!-- 多列下拉选框 --> |
|||
<view v-if="colItem.type === 7"> |
|||
<view @click="changeShow(index, itemIndex)"> |
|||
<text :class="colItem.value ? '' : 'text-gray-350'">{{ colItem.value || '请选择' }} </text> |
|||
<u-icon name="arrow-right" class="mx-2" color="#909399"></u-icon> |
|||
</view> |
|||
<u-select |
|||
v-model="colItem.show" |
|||
mode="mutil-column" |
|||
:list="colItem.radioList" |
|||
@confirm="change($event, index, itemIndex, colItem.type)" |
|||
:default-value="[70, 100]" |
|||
title="低血压/高血压" |
|||
></u-select> |
|||
</view> |
|||
<!-- input 文本输入框 --> |
|||
<view v-if="colItem.type === 8" class="pr-7"> |
|||
<u-input placeholder="请输入" v-model="colItem.value" input-align="right" /> |
|||
</view> |
|||
<!-- 地区选择器 --> |
|||
<view v-if="colItem.type === 9"> |
|||
<view @click="changeShow(index, itemIndex)"> |
|||
<text :class="colItem.value ? '' : 'text-gray-350'">{{ colItem.value || '请选择' }} </text> |
|||
<u-icon name="arrow-right" class="mx-2" color="#909399"></u-icon> |
|||
</view> |
|||
<u-picker |
|||
@confirm="change($event, index, itemIndex, colItem.type)" |
|||
mode="region" |
|||
v-model="colItem.show" |
|||
:params="paramsArea" |
|||
></u-picker> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<view class="w-full h-2 bg-gray-100" v-if="index !== infoList.length - 1"></view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { infoList } from './config'; |
|||
|
|||
export default { |
|||
name: 'Info', |
|||
data() { |
|||
return { |
|||
headStyle: { |
|||
backgroundColor: '#fff', |
|||
height: '46px', |
|||
paddingLeft: '1rem', |
|||
fontSize: '0.875rem', |
|||
}, |
|||
bodyStyle: { paddingLeft: '1rem' }, |
|||
infoList, |
|||
paramsDay: { |
|||
year: true, |
|||
month: true, |
|||
day: true, |
|||
hour: false, |
|||
minute: false, |
|||
second: false, |
|||
}, |
|||
paramsHour: { |
|||
year: true, |
|||
month: true, |
|||
day: true, |
|||
hour: true, |
|||
minute: false, |
|||
second: false, |
|||
}, |
|||
paramsArea: { |
|||
province: true, |
|||
city: true, |
|||
area: false, |
|||
}, |
|||
}; |
|||
}, |
|||
|
|||
methods: { |
|||
changeShow(index, itemIndex) { |
|||
console.log('index, itemIndex: ', index, itemIndex); |
|||
this.infoList[index][itemIndex].show = !this.infoList[index][itemIndex].show; |
|||
}, |
|||
|
|||
change(e, index, itemIndex, type) { |
|||
console.log('e, index, itemIndex, type: ', e, index, itemIndex, type); |
|||
if (type === 1) { |
|||
// 单选 |
|||
this.infoList[index][itemIndex].value = e.target.value; |
|||
} else if (type === 2) { |
|||
// 日期选择器(年月日) |
|||
const value = e.year + '-' + e.month + '-' + e.day; |
|||
this.infoList[index][itemIndex].value = value; |
|||
} else if (type === 4) { |
|||
// 单列下拉选框 |
|||
this.infoList[index][itemIndex].value = e[0].value; |
|||
} else if (type === 5) { |
|||
// 多选 |
|||
let checkerList = this.infoList[index][itemIndex].value; |
|||
if (checkerList.length) { |
|||
const i = checkerList.findIndex(item => item === e.name); |
|||
if (i < 0) { |
|||
checkerList.push(e.name); |
|||
} else { |
|||
checkerList.splice(i, 1); |
|||
} |
|||
} else { |
|||
checkerList.push(e.name); |
|||
} |
|||
this.infoList[index][itemIndex].value = checkerList; |
|||
} else if (type === 6) { |
|||
// 日期选择器(年月日时) |
|||
const value = e.year + '-' + e.month + '-' + e.day + '-' + e.hour; |
|||
this.infoList[index][itemIndex].value = value; |
|||
} else if (type === 7) { |
|||
// 多列下拉选框 |
|||
this.infoList[index][itemIndex].value = e[0].value + '/' + e[1].value; |
|||
} else if (type === 9) { |
|||
// 地区选择 |
|||
this.infoList[index][itemIndex].value = e.province.label + e.city.label; |
|||
} else { |
|||
this.infoList[index][itemIndex].value = e; |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.border-b { |
|||
border-bottom: 1px solid #f8f8f8; |
|||
} |
|||
</style> |
|||
|
|||
<style> |
|||
.radio-style >>> .uni-radio-input { |
|||
width: 1rem !important; |
|||
height: 1rem !important; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue