17 changed files with 661 additions and 109 deletions
@ -0,0 +1,60 @@ |
|||
<template> |
|||
<view v-if="list.length" class="m-4 flex flex-col"> |
|||
<view |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
class="flex flex-nowrap text-center p-2" |
|||
:class="item.checked ? 'bg-blue-500 text-white' : 'bg-gray-100'" |
|||
@click="changeChecked(index)" |
|||
> |
|||
<view v-if="item.checked"><u-icon name="checkbox-mark"></u-icon></view> |
|||
<view class="flex-1">{{ item.userName }} </view> |
|||
<view class="flex-1" v-if="item.sex">{{ item.sex === 1 ? '男' : item.sex === 2 ? '女' : '' }}</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState, mapMutations } from 'vuex'; |
|||
|
|||
export default { |
|||
name: 'BeFamily', |
|||
data() { |
|||
return { list: [], ids: [] }; |
|||
}, |
|||
|
|||
watch: { |
|||
elderlyInfo(val) { |
|||
if (val && val.length) { |
|||
val.forEach(item => { |
|||
item.checked = false; |
|||
}); |
|||
this.list = val; |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
computed: mapState('yanyuan', ['elderlyInfo', 'keyUserIds']), |
|||
|
|||
methods: { |
|||
...mapMutations('yanyuan', ['setKeyUserIds']), |
|||
|
|||
// 选中某个复选框时，由checkbox时触发 |
|||
changeChecked(index) { |
|||
let arr = [...this.list]; |
|||
if (!arr[index].checked) { |
|||
this.ids.push(arr[index].keyUserId); |
|||
arr[index].checked = true; |
|||
} else { |
|||
const newIds = this.ids.filter(item => item !== arr[index].keyUserId); |
|||
this.ids = newIds; |
|||
arr[index].checked = false; |
|||
} |
|||
this.list = [...arr]; |
|||
this.setKeyUserIds(this.ids); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
@ -0,0 +1,60 @@ |
|||
<template> |
|||
<view v-if="list.length" class="m-4 flex flex-col"> |
|||
<view |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
class="flex flex-nowrap text-center p-2" |
|||
:class="item.checked ? 'bg-blue-500 text-white' : 'bg-gray-100'" |
|||
@click="changeChecked(index)" |
|||
> |
|||
<view v-if="item.checked"><u-icon name="checkbox-mark"></u-icon></view> |
|||
<view class="flex-1">{{ item.userName }} </view> |
|||
<view class="flex-1" v-if="item.sex">{{ item.sex === 1 ? '男' : item.sex === 2 ? '女' : '' }}</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState, mapMutations } from 'vuex'; |
|||
|
|||
export default { |
|||
name: 'BeFamily', |
|||
data() { |
|||
return { list: [], ids: [] }; |
|||
}, |
|||
|
|||
watch: { |
|||
elderlyInfo(val) { |
|||
if (val && val.length) { |
|||
val.forEach(item => { |
|||
item.checked = false; |
|||
}); |
|||
this.list = val; |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
computed: mapState('yanyuan', ['elderlyInfo', 'keyUserIds']), |
|||
|
|||
methods: { |
|||
...mapMutations('yanyuan', ['setKeyUserIds']), |
|||
|
|||
// 选中某个复选框时，由checkbox时触发 |
|||
changeChecked(index) { |
|||
let arr = [...this.list]; |
|||
if (!arr[index].checked) { |
|||
this.ids.push(arr[index].keyId); |
|||
arr[index].checked = true; |
|||
} else { |
|||
const newIds = this.ids.filter(item => item !== arr[index].keyId); |
|||
this.ids = newIds; |
|||
arr[index].checked = false; |
|||
} |
|||
this.list = [...arr]; |
|||
this.setKeyUserIds(this.ids); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
@ -0,0 +1,110 @@ |
|||
<template> |
|||
<view> |
|||
<view class="flex flex-col text-sm border-b pb-2" v-for="(family, index) in beFamily" :key="index"> |
|||
<view class="flex flex-col" v-if="family.type === 4"> |
|||
<view class="my-3"> |
|||
{{ family.name }} |
|||
</view> |
|||
<u-radio-group v-model="family.value"> |
|||
<u-radio |
|||
class="mb-2" |
|||
@change="change($event, index, family.type)" |
|||
v-for="(radioItem, radioIndex) in family.radioList" |
|||
:key="radioIndex" |
|||
:name="radioItem" |
|||
> |
|||
{{ radioItem }} |
|||
</u-radio> |
|||
</u-radio-group> |
|||
<u-input |
|||
v-if="family.showOther" |
|||
:placeholder="`请输入其他${family.name}`" |
|||
v-model="family.otherValue" |
|||
:clearable="false" |
|||
@blur="change(family.otherValue, index, 99)" |
|||
/> |
|||
</view> |
|||
<view class="flex justify-between items-center" v-else> |
|||
<view class="my-3 flex justify-between items-center"> |
|||
{{ family.name }} |
|||
</view> |
|||
<view v-if="family.type === 1"> |
|||
<u-input |
|||
placeholder="请输入" |
|||
v-model="family.value" |
|||
:clearable="false" |
|||
input-align="right" |
|||
@blur="change(family.value, index, family.type)" |
|||
/> |
|||
</view> |
|||
<view v-if="family.type === 2"> |
|||
<u-input |
|||
placeholder="请输入" |
|||
v-model="family.value" |
|||
:clearable="false" |
|||
type="number" |
|||
input-align="right" |
|||
@blur="change(family.value, index, family.type)" |
|||
/> |
|||
</view> |
|||
<view v-if="family.type === 3"> |
|||
<u-radio-group v-model="family.value"> |
|||
<u-radio |
|||
class="mb-2" |
|||
@change="change($event, index, family.type)" |
|||
v-for="(radioItem, radioIndex) in family.radioList" |
|||
:key="radioIndex" |
|||
:name="radioItem" |
|||
> |
|||
{{ radioItem }} |
|||
</u-radio> |
|||
</u-radio-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { beFamily } from './config'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { beFamily }; |
|||
}, |
|||
|
|||
mounted() {}, |
|||
|
|||
methods: { |
|||
change(e, index, type) { |
|||
const info = this.beFamily[index]; |
|||
switch (type) { |
|||
case 99: { |
|||
// 其他 |
|||
info.otherValue = e; |
|||
break; |
|||
} |
|||
default: |
|||
{ |
|||
info.value = e; |
|||
if (e === '男') { |
|||
info.value = 1; |
|||
} |
|||
if (e === '女') { |
|||
info.value = 2; |
|||
} |
|||
if (e === '其他') { |
|||
info.showOther = true; |
|||
} else { |
|||
info.showOther = false; |
|||
} |
|||
} |
|||
break; |
|||
} |
|||
this.$emit('saveInfo', info); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
@ -1,18 +0,0 @@ |
|||
<template> |
|||
<view> 老人列表 </view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'BeFamily', |
|||
data() { |
|||
return {}; |
|||
}, |
|||
|
|||
mounted() {}, |
|||
|
|||
methods: {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
@ -0,0 +1,75 @@ |
|||
<template> |
|||
<view class="px-3"> |
|||
<u-top-tips ref="uTips" type="success"></u-top-tips> |
|||
<ApplyFamily @saveInfo="saveInfo"></ApplyFamily> |
|||
<u-button type="primary" class="m-4" @click="submit">提交</u-button> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState, mapMutations } from 'vuex'; |
|||
import ApplyFamily from 'components/ConfigInfo/components/ApplyFamily'; |
|||
import { beFamily } from 'components/ConfigInfo/components/config'; |
|||
import toolMixin from '@/mixins/tool'; |
|||
|
|||
export default { |
|||
components: { ApplyFamily }, |
|||
mixins: [toolMixin], |
|||
data() { |
|||
return { beFamily, params: {} }; |
|||
}, |
|||
|
|||
computed: mapState('yanyuan', ['keyUserIds']), |
|||
|
|||
mounted() {}, |
|||
|
|||
methods: { |
|||
...mapMutations('yanyuan', ['setApplyFamilyInfo']), |
|||
|
|||
// 填写用户信息 |
|||
saveInfo(info) { |
|||
this.params[info.label] = info.value; |
|||
// 其他 |
|||
if (info.value === '其他' && info.showOther && info.otherValue) { |
|||
this.params[info.label] = info.otherValue; |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 申请成为家属 |
|||
*/ |
|||
submit() { |
|||
if (!this.validationRequired()) return; |
|||
this.params.keyUserIds = this.keyUserIds; |
|||
this.setApplyFamilyInfo(this.params); |
|||
this.$refs.uTips.show({ |
|||
title: '用户信息添加成功, 即将申请成为家属', |
|||
type: 'success', |
|||
duration: '2000', |
|||
}); |
|||
this.$t.page.openPage('/pagesYanyuan/transfer-page/transfer-page?type=jiashu'); |
|||
}, |
|||
|
|||
// 验证必填 |
|||
validationRequired() { |
|||
let isComplete = true; |
|||
for (let i = 0; i < this.beFamily.length; i++) { |
|||
const item = this.beFamily[i]; |
|||
if (!item.value) { |
|||
this.$t.ui.showToast(`请填写${item.name}`); |
|||
isComplete = false; |
|||
break; |
|||
} |
|||
if (item.showOther && !item.otherValue) { |
|||
this.$t.ui.showToast(`请填写其他${item.name}`); |
|||
isComplete = false; |
|||
break; |
|||
} |
|||
} |
|||
if (isComplete) return true; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
@ -1,8 +1,13 @@ |
|||
/* eslint-disable */ |
|||
const state = { |
|||
isBinding: false, // 工具箱是否被绑定
|
|||
toolInfo: {}, // 绑定过的工具箱信息
|
|||
elderlyInfo: {}, // 用户创建的老人信息
|
|||
elderlyInfo: [], // 用户创建的老人信息
|
|||
showChooseElder: false, // 显示选择老人弹框
|
|||
personalInfo: {}, // 个人信息
|
|||
isApplying: false, // 是否正在申请成为家属
|
|||
keyUserIds: [], // 所选老人的id
|
|||
applyFamilyInfo: {}, // 申请家属信息
|
|||
showSetUser: false, // 显示设置使用者弹框
|
|||
}; |
|||
|
|||
export default state; |
|||
|
|||
Loading…
Reference in new issue