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.
116 lines
2.1 KiB
116 lines
2.1 KiB
<template>
|
|
<popupSelect
|
|
ref="popupRef"
|
|
title="请选择增值服务"
|
|
@confirm="onConfirm"
|
|
>
|
|
<view class="content">
|
|
<view class="flex-between option"
|
|
v-for="(option, index) in props.options"
|
|
:key="`option-${index}`"
|
|
@click="onSelectServe(option.value)"
|
|
>
|
|
<view class="option-info">
|
|
<view class="option-title">{{ option.title }}</view>
|
|
<view class="option-desc">{{ option.desc }}</view>
|
|
</view>
|
|
<up-icon
|
|
name="checkmark-circle-fill"
|
|
:color="serves.includes(option.value) ? '#FFBF60' : '#BDBDBD'"
|
|
size="46rpx"
|
|
></up-icon>
|
|
</view>
|
|
</view>
|
|
</popupSelect>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
import popupSelect from '../components/popupSelect.vue';
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Array,
|
|
default() {
|
|
return []
|
|
}
|
|
},
|
|
options: {
|
|
type: Array,
|
|
default() {
|
|
return []
|
|
}
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const serves = ref([])
|
|
|
|
const onSelectServe = (serve) => {
|
|
const oldServes = serves.value
|
|
let newServes = []
|
|
|
|
if (oldServes.includes(serve)) {
|
|
newServes = oldServes.filter(item => item !== serve)
|
|
} else {
|
|
newServes = oldServes.concat(serve)
|
|
}
|
|
|
|
serves.value = newServes
|
|
}
|
|
|
|
const popupRef = ref()
|
|
|
|
const open = () => {
|
|
serves.value = props.modelValue
|
|
popupRef.value.open()
|
|
}
|
|
|
|
const close = () => {
|
|
popupRef.value.close()
|
|
}
|
|
|
|
const onConfirm = () => {
|
|
emit('update:modelValue', serves.value)
|
|
}
|
|
|
|
defineExpose({ open, close })
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.content {
|
|
padding-bottom: 25rpx;
|
|
}
|
|
|
|
.option {
|
|
padding: 0 49rpx 0 25rpx;
|
|
background-color: #FFF5E5;
|
|
border-radius: 8rpx;
|
|
|
|
& + & {
|
|
margin-top: 12rpx;
|
|
}
|
|
|
|
&-info {
|
|
padding: 7rpx 0 13rpx 0;
|
|
}
|
|
|
|
&-title {
|
|
color: #000000;
|
|
font-size: 28rpx;
|
|
line-height: 37rpx;
|
|
}
|
|
|
|
&-desc {
|
|
margin-top: 12rpx;
|
|
color: #707070;
|
|
font-size: 20rpx;
|
|
line-height: 26rpx;
|
|
}
|
|
}
|
|
|
|
</style>
|