mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-06 08:06:43 +08:00
remove unuse file
This commit is contained in:
jxxghp
@@ -0,0 +1,268 @@
|
||||
<script lang="ts" setup>
|
||||
import avatar1 from "@images/avatars/avatar-1.png";
|
||||
|
||||
const accountData = {
|
||||
avatarImg: avatar1,
|
||||
firstName: "john",
|
||||
lastName: "Doe",
|
||||
email: "johnDoe@example.com",
|
||||
org: "ThemeSelection",
|
||||
phone: "+1 (917) 543-9876",
|
||||
address: "123 Main St, New York, NY 10001",
|
||||
state: "New York",
|
||||
zip: "10001",
|
||||
country: "USA",
|
||||
language: "English",
|
||||
timezone: "(GMT-11:00) International Date Line West",
|
||||
currency: "USD",
|
||||
};
|
||||
|
||||
const refInputEl = ref<HTMLElement>();
|
||||
|
||||
const accountDataLocal = ref(structuredClone(accountData));
|
||||
const isAccountDeactivated = ref(false);
|
||||
|
||||
const resetForm = () => {
|
||||
accountDataLocal.value = structuredClone(accountData);
|
||||
};
|
||||
|
||||
// changeAvatar function
|
||||
const changeAvatar = (file: Event) => {
|
||||
const fileReader = new FileReader();
|
||||
const { files } = file.target as HTMLInputElement;
|
||||
|
||||
if (files && files.length) {
|
||||
fileReader.readAsDataURL(files[0]);
|
||||
fileReader.onload = () => {
|
||||
if (typeof fileReader.result === "string")
|
||||
accountDataLocal.value.avatarImg = fileReader.result;
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// reset avatar image
|
||||
const resetAvatar = () => {
|
||||
accountDataLocal.value.avatarImg = accountData.avatarImg;
|
||||
};
|
||||
|
||||
const timezones = [
|
||||
"(GMT-11:00) International Date Line West",
|
||||
"(GMT-11:00) Midway Island",
|
||||
"(GMT-10:00) Hawaii",
|
||||
"(GMT-09:00) Alaska",
|
||||
"(GMT-08:00) Pacific Time (US & Canada)",
|
||||
"(GMT-08:00) Tijuana",
|
||||
"(GMT-07:00) Arizona",
|
||||
"(GMT-07:00) Chihuahua",
|
||||
"(GMT-07:00) La Paz",
|
||||
"(GMT-07:00) Mazatlan",
|
||||
"(GMT-07:00) Mountain Time (US & Canada)",
|
||||
"(GMT-06:00) Central America",
|
||||
"(GMT-06:00) Central Time (US & Canada)",
|
||||
"(GMT-06:00) Guadalajara",
|
||||
"(GMT-06:00) Mexico City",
|
||||
"(GMT-06:00) Monterrey",
|
||||
"(GMT-06:00) Saskatchewan",
|
||||
"(GMT-05:00) Bogota",
|
||||
"(GMT-05:00) Eastern Time (US & Canada)",
|
||||
"(GMT-05:00) Indiana (East)",
|
||||
"(GMT-05:00) Lima",
|
||||
"(GMT-05:00) Quito",
|
||||
"(GMT-04:00) Atlantic Time (Canada)",
|
||||
"(GMT-04:00) Caracas",
|
||||
"(GMT-04:00) La Paz",
|
||||
"(GMT-04:00) Santiago",
|
||||
"(GMT-03:30) Newfoundland",
|
||||
"(GMT-03:00) Brasilia",
|
||||
"(GMT-03:00) Buenos Aires",
|
||||
"(GMT-03:00) Georgetown",
|
||||
"(GMT-03:00) Greenland",
|
||||
"(GMT-02:00) Mid-Atlantic",
|
||||
"(GMT-01:00) Azores",
|
||||
"(GMT-01:00) Cape Verde Is.",
|
||||
"(GMT+00:00) Casablanca",
|
||||
"(GMT+00:00) Dublin",
|
||||
"(GMT+00:00) Edinburgh",
|
||||
"(GMT+00:00) Lisbon",
|
||||
"(GMT+00:00) London",
|
||||
];
|
||||
|
||||
const currencies = [
|
||||
"USD",
|
||||
"EUR",
|
||||
"GBP",
|
||||
"AUD",
|
||||
"BRL",
|
||||
"CAD",
|
||||
"CNY",
|
||||
"CZK",
|
||||
"DKK",
|
||||
"HKD",
|
||||
"HUF",
|
||||
"INR",
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VCard title="个人信息">
|
||||
<VCardText class="d-flex">
|
||||
<!-- 👉 Avatar -->
|
||||
<VAvatar
|
||||
rounded="lg"
|
||||
size="100"
|
||||
class="me-6"
|
||||
:image="accountDataLocal.avatarImg"
|
||||
/>
|
||||
|
||||
<!-- 👉 Upload Photo -->
|
||||
<form class="d-flex flex-column justify-center gap-5">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<VBtn color="primary" @click="refInputEl?.click()">
|
||||
<VIcon icon="mdi-cloud-upload-outline" class="d-sm-none" />
|
||||
<span class="d-none d-sm-block">上传头像</span>
|
||||
</VBtn>
|
||||
|
||||
<input
|
||||
ref="refInputEl"
|
||||
type="file"
|
||||
name="file"
|
||||
accept=".jpeg,.png,.jpg,GIF"
|
||||
hidden
|
||||
@input="changeAvatar"
|
||||
/>
|
||||
|
||||
<VBtn type="reset" color="error" variant="tonal" @click="resetAvatar">
|
||||
<span class="d-none d-sm-block">重置</span>
|
||||
<VIcon icon="mdi-refresh" class="d-sm-none" />
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<p class="text-body-1 mb-0">允许 JPG, GIF 或 PNG 格式， 最大尽寸 800K。</p>
|
||||
</form>
|
||||
</VCardText>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<VCardText>
|
||||
<!-- 👉 Form -->
|
||||
<VForm class="mt-6">
|
||||
<VRow>
|
||||
<!-- 👉 First Name -->
|
||||
<VCol md="6" cols="12">
|
||||
<VTextField v-model="accountDataLocal.firstName" label="First Name" />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Last Name -->
|
||||
<VCol md="6" cols="12">
|
||||
<VTextField v-model="accountDataLocal.lastName" label="Last Name" />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Email -->
|
||||
<VCol cols="12" md="6">
|
||||
<VTextField
|
||||
v-model="accountDataLocal.email"
|
||||
label="E-mail"
|
||||
type="email"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Organization -->
|
||||
<VCol cols="12" md="6">
|
||||
<VTextField v-model="accountDataLocal.org" label="Organization" />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Phone -->
|
||||
<VCol cols="12" md="6">
|
||||
<VTextField v-model="accountDataLocal.phone" label="Phone Number" />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Address -->
|
||||
<VCol cols="12" md="6">
|
||||
<VTextField v-model="accountDataLocal.address" label="Address" />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 State -->
|
||||
<VCol cols="12" md="6">
|
||||
<VTextField v-model="accountDataLocal.state" label="State" />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Zip Code -->
|
||||
<VCol cols="12" md="6">
|
||||
<VTextField v-model="accountDataLocal.zip" label="Zip Code" />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Country -->
|
||||
<VCol cols="12" md="6">
|
||||
<VSelect
|
||||
v-model="accountDataLocal.country"
|
||||
label="Country"
|
||||
:items="['USA', 'Canada', 'UK', 'India', 'Australia']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Language -->
|
||||
<VCol cols="12" md="6">
|
||||
<VSelect
|
||||
v-model="accountDataLocal.language"
|
||||
label="Language"
|
||||
:items="['English', 'Spanish', 'Arabic', 'Hindi', 'Urdu']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Timezone -->
|
||||
<VCol cols="12" md="6">
|
||||
<VSelect
|
||||
v-model="accountDataLocal.timezone"
|
||||
label="Timezone"
|
||||
:items="timezones"
|
||||
:menu-props="{ maxHeight: 200 }"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Currency -->
|
||||
<VCol cols="12" md="6">
|
||||
<VSelect
|
||||
v-model="accountDataLocal.currency"
|
||||
label="Currency"
|
||||
:items="currencies"
|
||||
:menu-props="{ maxHeight: 200 }"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Form Actions -->
|
||||
<VCol cols="12" class="d-flex flex-wrap gap-4">
|
||||
<VBtn>保存</VBtn>
|
||||
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
type="reset"
|
||||
@click.prevent="resetForm"
|
||||
>
|
||||
重置
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Deactivate Account -->
|
||||
<VCard title="删除账户">
|
||||
<VCardText>
|
||||
<div>
|
||||
<VCheckbox v-model="isAccountDeactivated" label="我确认删除我的账户信息" />
|
||||
</div>
|
||||
|
||||
<VBtn :disabled="!isAccountDeactivated" color="error" class="mt-3">
|
||||
删除账户
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
Reference in New Issue
Block a user