ai-agent-m/src/components/agreement/agreement.vue
2025-03-07 10:31:57 +08:00

1 line
2.1 KiB
Vue

<template>
<view class="agreement" v-if="isOpenAgreement" :class="{ shake: isShake }">
<view>
<u-checkbox v-model="isActive" shape="circle">
<view class="text-xs flex">
已阅读并同意
<view @click.stop>
<router-navigate
class="text-primary"
to="/packages/pages/agreement/agreement?type=service"
>
《服务协议》
</router-navigate>
</view>
<view @click.stop>
<router-navigate
class="text-primary"
to="/packages/pages/agreement/agreement?type=privacy"
>
《隐私协议》
</router-navigate>
</view>
</view>
</u-checkbox>
</view>
</view>
</template>
<script lang="ts" setup>
import { useAppStore } from '@/stores/app'
import { computed, ref } from 'vue'
const appStore = useAppStore()
const isActive = ref(false)
const isShake = ref(false)
const isOpenAgreement = computed(
() => appStore.getLoginConfig.openAgreement == 1
)
const checkAgreement = () => {
if (!isActive.value && isOpenAgreement.value) {
uni.$u.toast('请勾选已阅读并同意《服务协议》和《隐私协议》')
isShake.value = true
setTimeout(() => {
isShake.value = false
}, 1000)
} else if (!isOpenAgreement.value) {
return true
}
return isActive.value
}
defineExpose({
checkAgreement
})
</script>
<style lang="scss">
.shake {
animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
transform: translate3d(0, 0, 0);
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
</style>