mirror of
https://github.com/Dadechin/XRoomDashboardFront.git
synced 2025-07-02 00:04:35 +00:00
changeAvatar
This commit is contained in:
parent
b869b3b2da
commit
7242f5fa2e
|
|
@ -14,59 +14,40 @@
|
|||
</div>
|
||||
<div class="avatar-selection-container">
|
||||
<!-- 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
|
||||
:src="avatar.src"
|
||||
alt="3D Model"
|
||||
ar
|
||||
ar-modes="webxr scene-viewer quick-look"
|
||||
environment-image="neutral"
|
||||
auto-rotate
|
||||
camera-controls
|
||||
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>
|
||||
|
||||
<!-- Female avatars column -->
|
||||
<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">
|
||||
<!-- Show profile_img or fallback -->
|
||||
<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;" />
|
||||
</div>
|
||||
<button @click="selectAvatar(avatar)" class="select-button">
|
||||
انتخاب این آواتار
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column - Men Models -->
|
||||
<div class="gender-column">
|
||||
<h3 class="mb-4 text-center">آواتارهای مردانه</h3>
|
||||
<div class="avatar-grid">
|
||||
<div v-for="(avatar, index) in maleAvatars" :key="'male-' + index" class="avatar-card">
|
||||
<div class="model-preview-container">
|
||||
<model-viewer
|
||||
:src="avatar.src"
|
||||
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>
|
||||
<!-- Male avatars column -->
|
||||
<div class="gender-column">
|
||||
<h3 class="mb-4 text-center">آواتارهای مردانه</h3>
|
||||
<div class="avatar-grid">
|
||||
<div v-for="(avatar, index) in maleAvatars" :key="'male-' + index" class="avatar-card">
|
||||
<div class="model-preview-container">
|
||||
<!-- Show profile_img -->
|
||||
<img :src="avatar.profile_img" alt="Avatar Image" style="width: 100%; height: 200px; object-fit: cover; border-radius: 8px;" />
|
||||
</div>
|
||||
<button @click="selectAvatar(avatar)" class="select-button">
|
||||
انتخاب این آواتار
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -97,18 +78,23 @@ export default {
|
|||
},
|
||||
setup() {
|
||||
const maleAvatars = ref([
|
||||
{ id: 1, name: 'مرد ۱', src: 'http://194.62.43.230:8000/media/2025/5/5/men1.glb' },
|
||||
{ id: 2, name: 'مرد ۲', src: 'http://194.62.43.230:8000/media/2025/5/5/men1.glb' },
|
||||
{ id: 7, 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://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://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
|
||||
]);
|
||||
|
||||
|
||||
|
||||
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
|
||||
]);
|
||||
|
||||
{ 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 selectAvatar = (avatar) => {
|
||||
|
|
@ -141,7 +127,8 @@ export default {
|
|||
|
||||
// try {
|
||||
await axios.post(`${this.baseUrl}/editProfile/`, {
|
||||
profile_glb_url: avatar.src
|
||||
profile_glb_url: avatar.src ,
|
||||
profile_img: avatar.profile_img
|
||||
}, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
|
|
|
|||
|
|
@ -28,14 +28,14 @@
|
|||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<router-link to="/dashboard/readyPlayer">تغییر آواتار </router-link>
|
||||
<router-link to="/dashboard/ChangeAvatar">تغییر آواتار </router-link>
|
||||
</span>
|
||||
<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">
|
||||
<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"/>
|
||||
</svg>
|
||||
<router-link to="/dashboard/readyPlayer">ساخت آواتار جدید </router-link>
|
||||
<router-link to="/dashboard/ChangeAvatar">ساخت آواتار جدید </router-link>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -135,8 +135,8 @@ router.beforeEach(async (to, from, next) => {
|
|||
if (!customer.is_sms_verified && to.name !== 'SmsVerification') {
|
||||
return next('/SmsVerification');
|
||||
}
|
||||
else if (!customer.profile_glb && to.name !== 'ReadyPlayer') {
|
||||
return next('/dashboard/readyPlayer');
|
||||
else if (!customer.profile_glb && (to.name !== 'ReadyPlayer' ||to.name !== 'ChangeAvatar' )) {
|
||||
return next('/dashboard/ChangeAvatar');
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user