Compare commits

..

3 Commits

Author SHA1 Message Date
Diyar Akhgar
08906e48b4 merge changes 2025-05-28 17:50:46 +03:30
Diyar Akhgar
fc622d2791 fix buy subscription Tab /// add other tab in components 2025-05-28 17:37:14 +03:30
Diyar Akhgar
561d59a28f fix buy subscription Tab /// add other tab in components 2025-05-28 17:36:19 +03:30
7 changed files with 594 additions and 1244 deletions

View File

@ -102,8 +102,6 @@
</template>
<script>
import axios from 'axios';
export default {
name: 'AddUserModal',
props: {
@ -141,32 +139,8 @@ export default {
alert('لطفاً تمام فیلدها را پر کنید.');
return;
}
const token = localStorage.getItem('token');
const userData = {
mobile_number: this.newUser.mobile_number,
first_name: this.newUser.first_name,
last_name: this.newUser.last_name,
semat: this.newUser.semat,
password: this.newUser.password,
isAdmin: this.newUser.isAdmin ? 'true' : 'false', // Sending as string "true" or "false"
};
axios.post('http://my.xroomapp.com:8000/add_teamMember', userData, {
headers: {
Authorization: `Token ${token}`,
'Content-Type': 'application/json',
},
})
.then((response) => {
console.log('کاربر جدید:', response.data);
alert('کاربر با موفقیت اضافه شد');
this.$emit('add-user', { ...this.newUser });
this.close();
})
.catch((error) => {
console.error('Error adding user:', error);
alert('خطا در افزودن کاربر');
});
},
},
};

View File

@ -0,0 +1,281 @@
<template>
<div class="buy-subscription-container">
<div class="subscription-title">
<h3 style="text-align: center; margin-bottom: 20px;">
لطفا نوع اشتراک خود را انتخاب کنید
</h3>
<span>
ما مدل مجوزدهی انعطافپذیری ارائه میدهد. شما میتوانید بهصورت ماهانه و به ازای هر کاربر پرداخت کنید. تعداد کاربران را میتوان فوراً افزایش داد، اما در صورت کاهش مجوزها، تغییرات در پایان دورهی صورتحساب اعمال خواهند شد.
</span>
</div>
<div class="user-count" style="text-align: start; margin: 3rem 0 2rem 0;">
<label for="memberCount" style="margin-left: 10px;">تعداد کاربران : </label>
<select
id="memberCount"
:value="memberCount"
@change="updateMemberCount($event)">
<option v-for="count in availableMemberOptions" :key="count" :value="count">
{{ count }} کاربر
</option>
</select>
</div>
<div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
<div class="plan-card">
<div class="card-inner">
<h4>هفتگی</h4>
<div class="card-price-title">
<p>{{ (plans.weekly.price * memberCount).toLocaleString() }} تومان</p>
<small>برای {{ memberCount }} کاربر، در هفته</small>
</div>
<button class="primary-button" @click="selectPlan('weekly')">
انتخاب طرح اشتراک
</button>
</div>
</div>
<div class="plan-card">
<div class="card-inner">
<h4>ماهانه</h4>
<div class="card-price-title">
<p>{{ (plans.monthly.price * memberCount).toLocaleString() }} تومان</p>
<small>برای {{ memberCount }} کاربر، در ماه</small>
</div>
<button class="primary-button" @click="selectPlan('monthly')">
انتخاب طرح اشتراک
</button>
</div>
</div>
<div class="plan-card">
<div class="card-inner">
<h4>سالانه</h4>
<div class="card-price-title">
<p>{{ (plans.yearly.price * memberCount).toLocaleString() }} تومان</p>
<small>برای {{ memberCount }} کاربر، در سال</small>
</div>
<button class="primary-button" @click="selectPlan('yearly')">
انتخاب طرح اشتراک
</button>
</div>
</div>
</div>
<!-- فاکتور -->
<div
v-if="selectedPlan"
class="invoice-box"
style="margin-top: 40px; background: white; padding: 20px; border-radius: 12px; max-width: 400px; margin-right: auto; margin-left: auto;"
>
<h4 style="margin-bottom: 16px;">پیشفاکتور اشتراک {{ selectedPlan.name }}</h4>
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
<span>قیمت پایه:</span>
<span>{{ selectedPlan.basePrice.toLocaleString() }} تومان</span>
</div>
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
<span>مالیات (۹٪):</span>
<span>{{ selectedPlan.tax.toLocaleString() }} تومان</span>
</div>
<div
style="display: flex; justify-content: space-between; font-weight: bold; font-size: 16px; margin-bottom: 20px;"
>
<span>مبلغ قابل پرداخت:</span>
<span>{{ selectedPlan.total.toLocaleString() }} تومان</span>
</div>
<button class="primary-button" style="width: 100%;" @click="pay">
پرداخت
</button>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'BuySubscription',
props: {
memberCount: {
type: Number,
default: 5,
},
availableMemberOptions: {
type: Array,
default: () => [5, 10, 20, 100],
},
baseUrl: {
type: String,
required: true,
},
},
data() {
return {
selectedPlan: null,
plans: {
weekly: { name: 'هفتگی', price: 250000 },
monthly: { name: 'ماهانه', price: 670000 },
yearly: { name: 'سالانه', price: 4600000 },
},
};
},
methods: {
updateMemberCount(event) {
const newCount = Number(event.target.value);
this.$emit('update:memberCount', newCount);
if (this.selectedPlan) {
this.selectPlan(
this.selectedPlan.name === 'هفتگی' ? 'weekly' : this.selectedPlan.name === 'ماهانه' ? 'monthly' : 'yearly'
);
}
},
selectPlan(planKey) {
const plan = this.plans[planKey];
if (!plan) return;
const base = plan.price * this.memberCount;
const tax = Math.round(base * 0.09);
this.selectedPlan = {
...plan,
basePrice: base,
tax,
total: base + tax,
};
this.$emit('plan-selected', this.selectedPlan);
},
async pay() {
if (!this.selectedPlan) {
alert('لطفاً ابتدا یک طرح اشتراک انتخاب کنید.');
return;
}
try {
const startTime = new Date().toISOString();
let endTime;
if (this.selectedPlan.name === 'هفتگی') {
endTime = new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000).toISOString();
} else if (this.selectedPlan.name === 'ماهانه') {
endTime = new Date(new Date().getTime() + 30 * 24 * 60 * 60 * 1000).toISOString();
} else if (this.selectedPlan.name === 'سالانه') {
endTime = new Date(new Date().getTime() + 365 * 24 * 60 * 60 * 1000).toISOString();
}
const subscriptionData = {
user_count: this.memberCount,
license_number: `ABC-${Math.random().toString(36).substr(2, 6).toUpperCase()}-XYZ`,
startTime: startTime,
endTime: endTime,
price: this.selectedPlan.total,
};
const token = localStorage.getItem('token');
await axios.post(`${this.baseUrl}/add_subscription/`, subscriptionData, {
headers: {
Authorization: `Token ${token}`,
'Content-Type': 'application/json',
},
});
alert(`پرداخت با موفقیت انجام شد برای ${this.memberCount} کاربر`);
this.selectedPlan = null;
this.$emit('payment-success');
} catch (error) {
console.error('خطا در ارسال اطلاعات اشتراک:', error);
alert('خطا در ثبت اشتراک. لطفاً دوباره تلاش کنید.');
}
},
},
};
</script>
<style scoped>
.buy-subscription-container {
direction: rtl;
font-family: IRANSansXFaNum, sans-serif;
}
.plan-card {
background-color: white;
border-radius: 16px;
padding: 1px 1px 2px 1px;
width: 32%;
text-align: center;
height: 25rem;
background: linear-gradient(to right, #001940, #4364F7);
}
.card-inner {
background-color: white;
border-radius: 14px;
height: 100%;
padding: 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: 4rem;
}
.plan-card h4 {
font-size: 25px;
color: #101010;
margin-bottom: 10px;
}
.primary-button {
background-color: #3a57e8;
color: white;
border: none;
padding: 12px 24px;
font-size: 14px;
border-radius: 10px;
cursor: pointer;
}
.primary-button:hover {
background-color: #2e45c8;
}
.subscription-title {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.subscription-title h3 {
color: #101010;
font-weight: 600;
font-size: 20px;
}
.subscription-title span {
color: #4F5A69;
line-height: 190%;
font-size: 16px;
}
.user-count select {
padding: 8px 12px;
border-radius: 8px;
border-left: 16px solid transparent !important;
box-shadow: #00000029 0px 1px 4px 0px;
border: none;
}
.user-count select:focus {
outline: none;
}
.card-price-title p{
color: #101010;
font-size: 20px;
line-height: 140%;
margin-bottom: 8px;
}
.card-price-title small {
color: #8D99AB;
font-size: 17px;
line-height: 140%;
margin-top: 10px;
}
</style>

View File

@ -1,6 +1,5 @@
<template>
<header class="header-container">
<img class="line" src="https://c.animaapp.com/m9nvumalUMfQbN/img/line-1.svg" />
<div class="welcome-container">
<p class="welcome-message">{{ pageTitle }} </p>
</div>
@ -10,7 +9,11 @@
<img class="user-avatar" :src="profileIcon" />
</div>
<div class="user-name">{{ fullName }}</div>
<img class="user-icon" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-10.svg" />
<span>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.19922 10L11.9992 14L16.7992 10" stroke="#8D99AB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<!-- Dropdown positioned relative to user-info-container -->
<div v-if="showDropdown" class="dropdown-menu">
@ -105,11 +108,13 @@ export default {
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: #ffffff;
border-bottom: 1px solid #eaeaea;
position: relative;
z-index: 100;
padding-right: 0;
}
/* New green button styles */
.green-button {
display: flex;
@ -169,9 +174,9 @@ export default {
}
.user-name {
font-size: 14px;
font-size: 16px;
font-weight: 500;
color: #333333;
color: #101010;
}
.avatar-wrapper {
@ -279,16 +284,7 @@ export default {
}
/* Ensure header has proper z-index */
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: #ffffff;
border-bottom: 1px solid #eaeaea;
position: relative;
z-index: 100; /* Lower than dropdown but higher than page content */
}
.dropdown-menu {
position: absolute;

View File

@ -0,0 +1,202 @@
<template>
<div class="tab-content">
<div class="access-container">
<div class="access-header" style="background: white; border-radius: 20px; padding: 20px;">
<img :src="require('@/assets/img/lock Icon.png')" alt="lock" class="lock-icon" />
<div class="header-text">
<h3>فعالسازی دسترسی XRoom</h3>
<p>دسترسی کامل به امکانات XRoom بدون واترمارک</p>
</div>
<button class="primary-button" @click="changeTab('buy-subscription')">
<img style="margin-left: 10px" :src="require('@/assets/img/hand.png')" alt="hand" />
انتخاب طرح اشتراکی
</button>
</div>
<!-- subscription card -->
<div class="info-cards">
<div class="info-card">
<h4>وضعیت اشتراک تیم</h4>
<p v-if="subscriptionCount - teamMemberCapacity > 0">
ظرفیت کل تیم: <strong>{{ subscriptionCount }} کاربر</strong><br />
ظرفیت باقیمانده: <strong>{{ subscriptionCount - teamMemberCapacity }} کاربر</strong><br />
کاربران اضافه کرده: <strong>{{ teamMemberCapacity }} کاربر</strong>
</p>
<p class="invalid-subscription" v-else>شما اشتراک فعالی ندارین، لطفا اشتراک جدیدی خریداری نمایید.</p>
<button class="disable-button" v-if="subscriptionCount - teamMemberCapacity > 0">
اشتراک فعال دارید
</button>
<button class="secondary-button" @click="changeTab('buy-subscription')" v-else>
خرید اشتراک جدید
</button>
</div>
<div class="info-card">
<h4>جزئیات صورتحساب</h4>
<p>
اصفهان، خیابان وحید، نبش خیابان حسین آباد، مجتمع عسگری ۳، واحد ۳<br />
۸۱۷۵۹۴۹۹۹۱<br />
شماره تماس: ۰۹۳۷۹۸۹۸۶۲۳<br />
ایمیل: aminimperator@gmail.com
</p>
<button class="secondary-button" @click="openBillingModal">
ویرایش جزئیات صورتحساب
</button>
</div>
<div class="info-card">
<h4>عضویتها</h4>
<p>
هنوز مجوزی فعال نیست. کاربران شما نمیتوانند از XRoom با واترمارک استفاده کنند.
</p>
<button class="secondary-button">مدیریت عضویتها</button>
</div>
<div class="info-card">
<h4>روش پرداخت</h4>
<p>هیچ روش پرداختی برای صورتحساب مرتبط نیست.</p>
</div>
</div>
<EditBillingModal :isVisible="isBillingModalVisible" @close="closeBillingModal" />
</div>
</div>
</template>
<script>
import EditBillingModal from '@/components/EditBillingModal.vue';
export default {
name: 'Membership',
components: {
EditBillingModal,
},
props: {
subscriptionCount: {
type: Number,
required: true,
},
teamMemberCapacity: {
type: Number,
required: true,
},
isBillingModalVisible: {
type: Boolean,
required: true,
},
},
methods: {
changeTab(tabName) {
this.$emit('change-tab', tabName);
},
openBillingModal() {
this.$emit('update:isBillingModalVisible', true);
},
closeBillingModal() {
this.$emit('update:isBillingModalVisible', false);
},
},
};
</script>
<style scoped>
.access-container {
direction: rtl;
font-family: IRANSansXFaNum, sans-serif;
padding: 20px;
background-color: #f9f9fb;
width: -webkit-fill-available;
}
.access-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.header-text h3 {
font-size: 20px;
font-weight: 700;
color: #1a202c;
margin-bottom: 6px;
}
.header-text p {
color: #4a5568;
font-size: 14px;
}
.lock-icon {
width: 40px;
height: 40px;
}
.primary-button {
background-color: #3a57e8;
color: white;
border: none;
padding: 12px 24px;
font-size: 14px;
border-radius: 10px;
margin-bottom: 30px;
cursor: pointer;
}
.info-cards {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.info-card {
background: white;
border-radius: 16px;
padding: 20px;
width: 100%;
max-width: 300px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.info-card h4 {
font-size: 16px;
font-weight: 600;
margin-bottom: 12px;
}
.info-card p {
font-size: 14px;
color: #4a5568;
margin-bottom: 16px;
line-height: 1.7;
}
.secondary-button {
background-color: #3a57e8;
color: white;
border: none;
padding: 10px 16px;
font-size: 13px;
border-radius: 8px;
cursor: pointer;
}
.invalid-subscription {
color: #f44336 !important;
}
.disable-button {
background-color: #ebeeFD;
color: #101010;
border: none;
padding: 10px 16px;
font-size: 14px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
}
.tab-content {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
</style>

View File

@ -0,0 +1,29 @@
<template>
<div class="tab-content">
<div class="card">جزئیات تیم ۱</div>
<div class="card">جزئیات تیم ۲</div>
</div>
</template>
<script>
export default {
name: 'TeamDetails',
};
</script>
<style scoped>
.tab-content {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
background-color: white;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 20px;
min-width: 200px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
</style>

View File

@ -2,7 +2,7 @@
<div class="card license-card">
<span>لایسنس های قابل استفاده : 0</span>
<div class="buy-subscription" @click="goToBuySubscription">
خرید اشتراک
<p>خرید اشتراک</p>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
<path d="M12 19.5L5 12.5L12 5.5" stroke="#48BB78" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

File diff suppressed because it is too large Load Diff