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.
217 lines
4.7 KiB
217 lines
4.7 KiB
<template>
|
|
<view class="card">
|
|
<view class="flex top">
|
|
<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>
|
|
<view class="flex bottom">
|
|
<view class="flex col">
|
|
<view>
|
|
<uv-checkbox-group
|
|
v-model="defaultCheckboxValue"
|
|
@change="onDefaultChange"
|
|
>
|
|
<uv-checkbox
|
|
size="36rpx"
|
|
icon-size="36rpx"
|
|
activeColor="#00A9FF"
|
|
:name="1"
|
|
></uv-checkbox>
|
|
</uv-checkbox-group>
|
|
</view>
|
|
<view>默认出行人</view>
|
|
</view>
|
|
<button class="flex col btn" @click="onEdit">
|
|
<image class="icon" src="@/pages_order/static/traveler/icon-edit.png" mode="scaleToFill"></image>
|
|
<view>编辑</view>
|
|
</button>
|
|
<button class="flex col btn" @click="onDelete">
|
|
<image class="icon" src="@/pages_order/static/traveler/icon-delete.png" mode="scaleToFill"></image>
|
|
<view>删除</view>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
const MEMBER_TYPE_AND_DESC_MAPPING = {
|
|
0: '成人',
|
|
1: '青少年',
|
|
2: '儿童',
|
|
}
|
|
|
|
export default {
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
selectCheckboxValue: [],
|
|
defaultCheckboxValue: [],
|
|
}
|
|
},
|
|
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
|
|
}
|
|
},
|
|
isDefault: {
|
|
set(val) {
|
|
this.defaultCheckboxValue = val ? [1]: []
|
|
|
|
if (this.data.isDefault == val) {
|
|
return
|
|
}
|
|
|
|
this.$emit('defaultChange', val)
|
|
},
|
|
get() {
|
|
return this.defaultCheckboxValue.length ? true : false
|
|
}
|
|
},
|
|
typeDesc() {
|
|
return MEMBER_TYPE_AND_DESC_MAPPING[this.data.type]
|
|
},
|
|
},
|
|
watch: {
|
|
data: {
|
|
handler(val) {
|
|
this.isSelected = val.isSelected
|
|
this.isDefault = val.isDefault
|
|
},
|
|
immediate: true,
|
|
deep: true,
|
|
}
|
|
},
|
|
methods: {
|
|
onSelectChange(val) {
|
|
this.isSelected = val.length ? true : false
|
|
},
|
|
onDefaultChange(val) {
|
|
this.isDefault = val.length ? true : false
|
|
},
|
|
onEdit() {
|
|
// todo
|
|
this.$emit('edit')
|
|
},
|
|
onDelete() {
|
|
uni.showModal({
|
|
title: '确认删除？',
|
|
success : e => {
|
|
if(e.confirm){
|
|
// todo
|
|
this.$emit('delete')
|
|
}
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.card {
|
|
padding: 24rpx 32rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
|
|
.top {
|
|
padding-bottom: 24rpx;
|
|
justify-content: flex-start;
|
|
column-gap: 24rpx;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
padding-top: 24rpx;
|
|
column-gap: 24rpx;
|
|
border-top: 2rpx dashed #DADADA;
|
|
|
|
.col {
|
|
flex: 1;
|
|
column-gap: 8rpx;
|
|
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
line-height: 1.4;
|
|
color: #9B9B9B;
|
|
|
|
.icon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|