You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
128 lines
2.4 KiB
128 lines
2.4 KiB
<template>
|
|
<view class="flex card">
|
|
<view>
|
|
<uv-checkbox-group
|
|
v-model="selectCheckboxValue"
|
|
@change="onSelectChange"
|
|
>
|
|
<uv-checkbox
|
|
size="36rpx"
|
|
icon-size="36rpx"
|
|
activeColor="#00A9FF"
|
|
:name="1"
|
|
></uv-checkbox>
|
|
</uv-checkbox-group>
|
|
</view>
|
|
<view class="info">
|
|
<view class="flex name">
|
|
<view>{{ data.name }}</view>
|
|
<view :class="['tag', `tag-${data.type}`]">{{ typeDesc }}</view>
|
|
</view>
|
|
<view class="id">{{ data.idNo }}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
const MEMBER_TYPE_AND_DESC_MAPPING = {
|
|
0: '成人',
|
|
1: '青少年',
|
|
2: '儿童',
|
|
}
|
|
|
|
export default {
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
selectCheckboxValue: [],
|
|
}
|
|
},
|
|
computed: {
|
|
isSelected: {
|
|
set(val) {
|
|
this.selectCheckboxValue = val ? [1]: []
|
|
|
|
if (this.data.isSelected == val) {
|
|
return
|
|
}
|
|
|
|
this.$emit('selectChange', val)
|
|
},
|
|
get() {
|
|
return this.selectCheckboxValue.length ? true : false
|
|
}
|
|
},
|
|
typeDesc() {
|
|
return MEMBER_TYPE_AND_DESC_MAPPING[this.data.type]
|
|
},
|
|
},
|
|
watch: {
|
|
data: {
|
|
handler(val) {
|
|
this.isSelected = val.isSelected
|
|
},
|
|
immediate: true,
|
|
deep: true,
|
|
}
|
|
},
|
|
methods: {
|
|
onSelectChange(val) {
|
|
this.isSelected = val.length ? true : false
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.card {
|
|
justify-content: flex-start;
|
|
column-gap: 24rpx;
|
|
padding: 24rpx;
|
|
background: #F9F9F9;
|
|
}
|
|
|
|
.info {
|
|
.name {
|
|
justify-content: flex-start;
|
|
column-gap: 24rpx;
|
|
font-size: 32rpx;
|
|
color: #181818;
|
|
|
|
.tag {
|
|
padding: 2rpx 14rpx;
|
|
font-size: 24rpx;
|
|
color: #00A9FF;
|
|
background: #E9F8FF;
|
|
border: 2rpx solid #00A9FF;
|
|
border-radius: 8rpx;
|
|
|
|
&-1 {
|
|
color: #03C25C;
|
|
background: #E9FFF5;
|
|
border-color: #03C25C;
|
|
}
|
|
|
|
&-2 {
|
|
color: #EE6E05;
|
|
background: #FFEFE9;
|
|
border-color: #EE6E05;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.id {
|
|
margin-top: 8rpx;
|
|
font-size: 28rpx;
|
|
color: #9B9B9B;
|
|
}
|
|
}
|
|
</style>
|