153 lines
3.7 KiB
Vue
153 lines
3.7 KiB
Vue
<template>
|
||
<div
|
||
class="flex h-screen w-screen items-center justify-center"
|
||
v-if="$resources.signupSettings.loading"
|
||
>
|
||
<Spinner class="mr-2 w-4" />
|
||
<p class="text-gray-800">加载中</p>
|
||
</div>
|
||
<div class="flex h-screen overflow-hidden sm:bg-gray-50" v-else>
|
||
<div class="w-full overflow-auto">
|
||
<LoginBox
|
||
title="几分钟内快速上手"
|
||
subtitle="14天免费试用，无需信用卡。"
|
||
:class="{ 'pointer-events-none': $resources.setupAccount?.loading }"
|
||
:logo="saasProduct?.logo"
|
||
>
|
||
<template v-slot:default>
|
||
<form
|
||
class="flex flex-col"
|
||
@submit.prevent="this.$resources.setupAccount.submit()"
|
||
>
|
||
<!-- 字段 -->
|
||
<FormControl
|
||
label="邮箱"
|
||
type="email"
|
||
placeholder="email@example.com"
|
||
variant="outline"
|
||
autocomplete="email"
|
||
v-model="email"
|
||
required
|
||
disabled
|
||
/>
|
||
<FormControl
|
||
class="mt-5"
|
||
label="国家"
|
||
type="select"
|
||
placeholder="选择您的国家"
|
||
autocomplete="country"
|
||
variant="outline"
|
||
:options="countries"
|
||
v-model="country"
|
||
required
|
||
/>
|
||
<div class="mt-5 text-base">
|
||
<label class="leading-6 tracking-normal">
|
||
<FormControl
|
||
type="checkbox"
|
||
v-model="terms_accepted"
|
||
class="mr-0.5 py-1 align-baseline"
|
||
/>
|
||
我同意 Jingrow
|
||
<Link href="https://jingrow.com/terms" target="_blank">
|
||
服务条款 </Link
|
||
>,
|
||
<Link href="https://jingrow.com/privacy" target="_blank">
|
||
隐私政策
|
||
</Link>
|
||
和
|
||
<Link
|
||
href="https://jingrow.com/cookie-policy"
|
||
target="_blank"
|
||
>
|
||
Cookie 政策
|
||
</Link>
|
||
</label>
|
||
</div>
|
||
<!-- 错误信息 -->
|
||
<ErrorMessage
|
||
class="mt-2"
|
||
:message="this.$resources?.setupAccount?.error"
|
||
/>
|
||
<!-- 按钮 -->
|
||
<div class="mt-8 flex flex-col items-center gap-3">
|
||
<Button
|
||
:loading="$resources.setupAccount?.loading || isRedirecting"
|
||
variant="solid"
|
||
class="w-full font-medium"
|
||
type="submit"
|
||
>
|
||
创建账户
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
</template>
|
||
</LoginBox>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { Spinner } from 'jingrow-ui';
|
||
import LoginBox from '../../components/auth/SaaSLoginBox.vue';
|
||
|
||
export default {
|
||
name: 'SaaSSignupOAuthSetupAccount',
|
||
props: ['productId'],
|
||
components: {
|
||
LoginBox,
|
||
Spinner
|
||
},
|
||
data() {
|
||
return {
|
||
key: this.$route.query.key,
|
||
email: this.$route.query.email,
|
||
country: null,
|
||
terms_accepted: false,
|
||
isRedirecting: false
|
||
};
|
||
},
|
||
resources: {
|
||
setupAccount() {
|
||
return {
|
||
url: 'jcloud.api.product_trial.setup_account',
|
||
makeParams() {
|
||
return {
|
||
key: this.key,
|
||
country: this.country
|
||
};
|
||
},
|
||
onSuccess: data => {
|
||
this.isRedirecting = true;
|
||
window.location.href = data?.location;
|
||
}
|
||
};
|
||
},
|
||
signupSettings() {
|
||
return {
|
||
url: 'jcloud.api.account.signup_settings',
|
||
params: {
|
||
product: this.productId,
|
||
fetch_countries: true,
|
||
timezone: window.Intl
|
||
? Intl.DateTimeFormat().resolvedOptions().timeZone
|
||
: null
|
||
},
|
||
auto: true,
|
||
onSuccess(res) {
|
||
if (res && res.country) {
|
||
this.country = res.country;
|
||
}
|
||
}
|
||
};
|
||
}
|
||
},
|
||
computed: {
|
||
saasProduct() {
|
||
return this.$resources.signupSettings.data?.product_trial;
|
||
},
|
||
countries() {
|
||
return this.$resources.signupSettings.data?.countries || [];
|
||
}
|
||
}
|
||
};
|
||
</script> |