Escort/src/components/agreed-comp/agreed-comp.vue

75 lines
1.5 KiB
Vue
Executable File

<template>
<view class="mt-18rpx flex items-center">
<u-checkbox-group
v-model="checked"
placement="row"
shape="circle"
iconPlacement="left"
labelColor="#666"
labelSize="24rpx"
@change="handleChange"
:disabled="disabled"
>
<u-checkbox activeColor="#FF8CA6" name="1"></u-checkbox>
<!-- label="我已阅读并同意" -->
</u-checkbox-group>
<view
class="text-24rpx opacity-70 ml-0 text-#666"
@click="handleAgreeCheck"
>
我已阅读并同意
<text
class="text-#FF8CA6 active:text-primary-700"
@click.stop="handleAgree"
>
服务条款
</text>
同意书
</view>
</view>
</template>
<script setup>
const prop = defineProps({
agreed: {
type: Boolean,
default: () => false
},
disabled: {
type: Boolean,
default: () => false
}
})
const checked = ref([false])
const emit = defineEmits(['update:agreed'])
const instance = getCurrentInstance()
const { $Router } = instance.proxy
watchEffect(() => {
checked.value[0] = prop.agreed ? '1' : ''
})
const handleAgree = () => {
$Router.push({ path: '/pages/statement/index' })
}
const handleAgreeCheck = () => {
if (prop.disabled) return
checked.value[0] = checked.value[0] === '1' ? '' : '1'
emit('update:agreed', !!checked.value[0])
}
const handleChange = () => {
emit('update:agreed', !!checked.value[0])
}
</script>
<style lang="scss" scoped>
:v-deep {
.u-checkbox {
uni-text,
span {
font-size: 24rpx !important;
color: #666 !important;
}
}
}
</style>