mirror of
https://github.com/Dadechin/XRoomDashboardFront.git
synced 2025-07-03 00:34:35 +00:00
changeAvatar
This commit is contained in:
parent
b869b3b2da
commit
7242f5fa2e
|
|
@ -14,59 +14,40 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="avatar-selection-container">
|
<div class="avatar-selection-container">
|
||||||
<!-- Left Column - Women Models -->
|
<!-- Left Column - Women Models -->
|
||||||
<div class="gender-column">
|
|
||||||
<h3 class="mb-4 text-center">آواتارهای زنانه</h3>
|
|
||||||
<div class="avatar-grid">
|
|
||||||
<div v-for="(avatar, index) in femaleAvatars" :key="'female-' + index" class="avatar-card">
|
|
||||||
<div class="model-preview-container">
|
|
||||||
|
|
||||||
<model-viewer
|
<!-- Female avatars column -->
|
||||||
:src="avatar.src"
|
<div class="gender-column">
|
||||||
alt="3D Model"
|
<h3 class="mb-4 text-center">آواتارهای زنانه</h3>
|
||||||
ar
|
<div class="avatar-grid">
|
||||||
ar-modes="webxr scene-viewer quick-look"
|
<div v-for="(avatar, index) in femaleAvatars" :key="'female-' + index" class="avatar-card">
|
||||||
environment-image="neutral"
|
<div class="model-preview-container">
|
||||||
auto-rotate
|
<!-- Show profile_img or fallback -->
|
||||||
camera-controls
|
<img :src="avatar.profile_img || 'https://via.placeholder.com/150?text=No+Image'" alt="Avatar Image" style="width: 100%; height: 200px; object-fit: cover; border-radius: 8px;" />
|
||||||
class="model-preview"
|
|
||||||
camera-orbit="10deg 135deg 1.1m"
|
|
||||||
field-of-view="10deg"
|
|
||||||
camera-target="0m 0.4m 0.1m"
|
|
||||||
></model-viewer>
|
|
||||||
</div>
|
|
||||||
<button @click="selectAvatar(avatar)" class="select-button">
|
|
||||||
انتخاب این آواتار
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<button @click="selectAvatar(avatar)" class="select-button">
|
||||||
|
انتخاب این آواتار
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Right Column - Men Models -->
|
<!-- Male avatars column -->
|
||||||
<div class="gender-column">
|
<div class="gender-column">
|
||||||
<h3 class="mb-4 text-center">آواتارهای مردانه</h3>
|
<h3 class="mb-4 text-center">آواتارهای مردانه</h3>
|
||||||
<div class="avatar-grid">
|
<div class="avatar-grid">
|
||||||
<div v-for="(avatar, index) in maleAvatars" :key="'male-' + index" class="avatar-card">
|
<div v-for="(avatar, index) in maleAvatars" :key="'male-' + index" class="avatar-card">
|
||||||
<div class="model-preview-container">
|
<div class="model-preview-container">
|
||||||
<model-viewer
|
<!-- Show profile_img -->
|
||||||
:src="avatar.src"
|
<img :src="avatar.profile_img" alt="Avatar Image" style="width: 100%; height: 200px; object-fit: cover; border-radius: 8px;" />
|
||||||
alt="3D Model"
|
|
||||||
ar
|
|
||||||
ar-modes="webxr scene-viewer quick-look"
|
|
||||||
environment-image="neutral"
|
|
||||||
auto-rotate
|
|
||||||
camera-controls
|
|
||||||
class="model-preview"
|
|
||||||
camera-orbit="10deg 90deg 1.5m"
|
|
||||||
field-of-view="10deg"
|
|
||||||
camera-target="0m 0.5m 0.5m"
|
|
||||||
></model-viewer>
|
|
||||||
</div>
|
|
||||||
<button @click="selectAvatar(avatar)" class="select-button">
|
|
||||||
انتخاب این آواتار
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<button @click="selectAvatar(avatar)" class="select-button">
|
||||||
|
انتخاب این آواتار
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -97,18 +78,23 @@ export default {
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const maleAvatars = ref([
|
const maleAvatars = ref([
|
||||||
{ id: 1, name: 'مرد ۱', src: 'http://194.62.43.230:8000/media/2025/5/5/men1.glb' },
|
{ id: 1, name: 'مرد ۱', src: 'http://my.xroomapp.com:8000/media/user_glbs/men1.glb', profile_img:'http://my.xroomapp.com:8000/media/user_images/men1.png' },
|
||||||
{ id: 2, name: 'مرد ۲', src: 'http://194.62.43.230:8000/media/2025/5/5/men1.glb' },
|
{ id: 2, name: 'مرد ۲', src: 'http://my.xroomapp.com:8000/media/user_glbs/men2.glb' , profile_img:'http://my.xroomapp.com:8000/media/user_images/men2.png'},
|
||||||
{ id: 7, name: 'مرد ۳', src: 'http://194.62.43.230:8000/media/2025/5/5/men1.glb' },
|
{ id: 7, name: 'مرد ۳', src: 'http://my.xroomapp.com:8000/media/user_glbs/men3.glb' , profile_img:'http://my.xroomapp.com:8000/media/user_images/men3.png'},
|
||||||
|
{ id: 17, name: 'مرد 4', src: 'http://my.xroomapp.com:8000/media/user_glbs/men4.glb' , profile_img:'http://my.xroomapp.com:8000/media/user_images/men4.png'},
|
||||||
// Add more male avatars as needed
|
// Add more male avatars as needed
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const femaleAvatars = ref([
|
|
||||||
{ id: 4, name: 'زن ۱', src: 'http://194.62.43.230:8000/media/2025/5/5/men1.glb' },
|
|
||||||
{ id: 10, name: 'زن ۳', src: 'http://194.62.43.230:8000/media/2025/5/5/men1.glb' },
|
|
||||||
// Add more female avatars as needed
|
|
||||||
]);
|
|
||||||
|
|
||||||
|
|
||||||
|
const femaleAvatars = ref([
|
||||||
|
{ id: 4, name: 'زن ۱', src: 'http://my.xroomapp.com:8000/media/user_glbs/women1.glb', profile_img: 'http://my.xroomapp.com:8000/media/user_images/women1.png' },
|
||||||
|
{ id: 10, name: 'زن ۳', src: 'http://my.xroomapp.com:8000/media/user_glbs/women2.glb', profile_img: 'http://my.xroomapp.com:8000/media/user_images/women2.png' },
|
||||||
|
{ id: 10, name: 'زن ۳', src: 'http://my.xroomapp.com:8000/media/user_glbs/women3.glb', profile_img: 'http://my.xroomapp.com:8000/media/user_images/women3.png' },
|
||||||
|
{ id: 10, name: 'زن ۳', src: 'http://my.xroomapp.com:8000/media/user_glbs/women4.glb', profile_img: 'http://my.xroomapp.com:8000/media/user_images/women4.png' },
|
||||||
|
{ id: 10, name: 'زن ۳', src: 'http://my.xroomapp.com:8000/media/user_glbs/women6.glb', profile_img: 'http://my.xroomapp.com:8000/media/user_images/women6.png' },
|
||||||
|
{ id: 10, name: 'زن ۳', src: 'http://my.xroomapp.com:8000/media/user_glbs/women7.glb', profile_img: 'http://my.xroomapp.com:8000/media/user_images/women7.png' },
|
||||||
|
]);
|
||||||
const selectedAvatar = ref(null);
|
const selectedAvatar = ref(null);
|
||||||
|
|
||||||
// const selectAvatar = (avatar) => {
|
// const selectAvatar = (avatar) => {
|
||||||
|
|
@ -141,7 +127,8 @@ export default {
|
||||||
|
|
||||||
// try {
|
// try {
|
||||||
await axios.post(`${this.baseUrl}/editProfile/`, {
|
await axios.post(`${this.baseUrl}/editProfile/`, {
|
||||||
profile_glb_url: avatar.src
|
profile_glb_url: avatar.src ,
|
||||||
|
profile_img: avatar.profile_img
|
||||||
}, {
|
}, {
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json'
|
'Content-Type': 'application/json'
|
||||||
|
|
|
||||||
|
|
@ -28,14 +28,14 @@
|
||||||
</clipPath>
|
</clipPath>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
<router-link to="/dashboard/readyPlayer">تغییر آواتار </router-link>
|
<router-link to="/dashboard/ChangeAvatar">تغییر آواتار </router-link>
|
||||||
</span>
|
</span>
|
||||||
<span style="display: flex;align-items: center;">
|
<span style="display: flex;align-items: center;">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||||
<path d="M2 8C2 9.18669 2.35189 10.3467 3.01118 11.3334C3.67047 12.3201 4.60754 13.0892 5.7039 13.5433C6.80026 13.9974 8.00666 14.1162 9.17054 13.8847C10.3344 13.6532 11.4035 13.0818 12.2426 12.2426C13.0818 11.4035 13.6532 10.3344 13.8847 9.17054C14.1162 8.00666 13.9974 6.80026 13.5433 5.7039C13.0892 4.60754 12.3201 3.67047 11.3334 3.01118C10.3467 2.35189 9.18669 2 8 2C6.32263 2.00631 4.71265 2.66082 3.50667 3.82667L2 5.33333" stroke="#3A57E8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
<path d="M2 8C2 9.18669 2.35189 10.3467 3.01118 11.3334C3.67047 12.3201 4.60754 13.0892 5.7039 13.5433C6.80026 13.9974 8.00666 14.1162 9.17054 13.8847C10.3344 13.6532 11.4035 13.0818 12.2426 12.2426C13.0818 11.4035 13.6532 10.3344 13.8847 9.17054C14.1162 8.00666 13.9974 6.80026 13.5433 5.7039C13.0892 4.60754 12.3201 3.67047 11.3334 3.01118C10.3467 2.35189 9.18669 2 8 2C6.32263 2.00631 4.71265 2.66082 3.50667 3.82667L2 5.33333" stroke="#3A57E8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
<path d="M2 2V5.33333H5.33333" stroke="#3A57E8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
<path d="M2 2V5.33333H5.33333" stroke="#3A57E8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
</svg>
|
</svg>
|
||||||
<router-link to="/dashboard/readyPlayer">ساخت آواتار جدید </router-link>
|
<router-link to="/dashboard/ChangeAvatar">ساخت آواتار جدید </router-link>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -135,8 +135,8 @@ router.beforeEach(async (to, from, next) => {
|
||||||
if (!customer.is_sms_verified && to.name !== 'SmsVerification') {
|
if (!customer.is_sms_verified && to.name !== 'SmsVerification') {
|
||||||
return next('/SmsVerification');
|
return next('/SmsVerification');
|
||||||
}
|
}
|
||||||
else if (!customer.profile_glb && to.name !== 'ReadyPlayer') {
|
else if (!customer.profile_glb && (to.name !== 'ReadyPlayer' ||to.name !== 'ChangeAvatar' )) {
|
||||||
return next('/dashboard/readyPlayer');
|
return next('/dashboard/ChangeAvatar');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user