mirror of
https://github.com/Dadechin/XRoomDashboardFront.git
synced 2025-07-02 00:04:35 +00:00
fix buy subscription Tab /// add other tab in components
This commit is contained in:
Diyar Akhgar
parent
6aacb96992
commit
561d59a28f
|
|
@ -37,38 +37,46 @@
|
|||
<div class="popUp-objects">
|
||||
<form @submit.prevent="handleSubmit" autocomplete="off">
|
||||
<div class="form-group">
|
||||
<label for="full_name">نام و نام خانوادگی</label>
|
||||
<label for="first_name">نام</label>
|
||||
<input
|
||||
id="full_name"
|
||||
v-model="newUser.full_name"
|
||||
id="first_name"
|
||||
v-model="newUser.first_name"
|
||||
type="text"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">ایمیل</label>
|
||||
<label for="last_name">نام خانوادگی</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="newUser.email"
|
||||
type="email"
|
||||
id="last_name"
|
||||
v-model="newUser.last_name"
|
||||
type="text"
|
||||
required
|
||||
style="text-align: left;"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phone">شماره تماس</label>
|
||||
<label for="mobile_number">شماره تماس</label>
|
||||
<input
|
||||
id="phone"
|
||||
v-model="newUser.phone"
|
||||
id="mobile_number"
|
||||
v-model="newUser.mobile_number"
|
||||
type="tel"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="job_title">عنوان شغلی</label>
|
||||
<label for="password">رمز عبور</label>
|
||||
<input
|
||||
id="job_title"
|
||||
v-model="newUser.job_title"
|
||||
id="password"
|
||||
v-model="newUser.password"
|
||||
type="password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="semat">عنوان شغلی</label>
|
||||
<input
|
||||
id="semat"
|
||||
v-model="newUser.semat"
|
||||
type="text"
|
||||
required
|
||||
/>
|
||||
|
|
@ -77,21 +85,11 @@
|
|||
<span>مدیر</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="is_manager"
|
||||
id="isAdmin"
|
||||
class="checkbox"
|
||||
v-model="newUser.is_manager"
|
||||
v-model="newUser.isAdmin"
|
||||
/>
|
||||
<label for="is_manager" class="switch"></label>
|
||||
</div>
|
||||
<div class="form-group" style="justify-content: normal;">
|
||||
<span>مجوز</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="has_permission"
|
||||
class="checkbox"
|
||||
v-model="newUser.has_permission"
|
||||
/>
|
||||
<label for="has_permission" class="switch"></label>
|
||||
<label for="isAdmin" class="switch"></label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -115,32 +113,33 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
newUser: {
|
||||
full_name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
job_title: '',
|
||||
is_manager: false,
|
||||
has_permission: false,
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
mobile_number: '',
|
||||
password: '',
|
||||
semat: '',
|
||||
isAdmin: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.newUser = {
|
||||
full_name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
job_title: '',
|
||||
is_manager: false,
|
||||
has_permission: false,
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
mobile_number: '',
|
||||
password: '',
|
||||
semat: '',
|
||||
isAdmin: false,
|
||||
};
|
||||
this.$emit('close');
|
||||
},
|
||||
handleSubmit() {
|
||||
if (!this.newUser.full_name || !this.newUser.email || !this.newUser.phone || !this.newUser.job_title) {
|
||||
if (!this.newUser.first_name || !this.newUser.last_name || !this.newUser.mobile_number || !this.newUser.password || !this.newUser.semat) {
|
||||
alert('لطفاً تمام فیلدها را پر کنید.');
|
||||
return;
|
||||
}
|
||||
|
||||
this.$emit('add-user', { ...this.newUser });
|
||||
this.close();
|
||||
},
|
||||
|
|
@ -151,7 +150,7 @@ export default {
|
|||
<style scoped>
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0; /* جایگزین top: 0; left: 0; right: 0; bottom: 0 */
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -193,7 +192,7 @@ export default {
|
|||
}
|
||||
|
||||
.popUp-header button {
|
||||
background-color: inherit; /* استفاده از inherit برای حذف تکرار #101010 */
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -201,7 +200,7 @@ export default {
|
|||
.popUp-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start; /* اصلاح start به flex-start برای استاندارد بودن */
|
||||
align-items: flex-start;
|
||||
padding: 20px 50px 20px 20px;
|
||||
}
|
||||
|
||||
|
|
@ -219,7 +218,7 @@ export default {
|
|||
}
|
||||
|
||||
.popUp-objects {
|
||||
margin: 1rem auto 0; /* ترکیب margin-top و margin: auto */
|
||||
margin: 1rem auto 0;
|
||||
padding: 20px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
|
|
@ -241,28 +240,15 @@ export default {
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #718096;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
resize: none; /* برای textarea */
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
height: 45px;
|
||||
max-width: 22rem;
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
height: 140px;
|
||||
max-width: 25rem;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
@ -299,37 +285,37 @@ export default {
|
|||
|
||||
/* checkbox toggler */
|
||||
|
||||
.switch {
|
||||
position : relative ;
|
||||
display : inline-block;
|
||||
width: 60px !important;
|
||||
height: 25px;
|
||||
background-color: #CCCCCC;
|
||||
border-radius: 20px;
|
||||
margin-right: 12.5rem;
|
||||
}
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px !important;
|
||||
height: 25px;
|
||||
background-color: #CCCCCC;
|
||||
border-radius: 20px;
|
||||
margin-right: 12.5rem;
|
||||
}
|
||||
|
||||
.switch::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
top: 2px;
|
||||
right: 3px;
|
||||
transition: all 0.3s;
|
||||
.switch::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
top: 2px;
|
||||
right: 3px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.checkbox:checked + .switch::after {
|
||||
right: 37px;
|
||||
right: 37px;
|
||||
}
|
||||
|
||||
.checkbox:checked + .switch {
|
||||
background-color: #3a57e8;
|
||||
background-color: #3a57e8;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
display : none;
|
||||
.checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
281
xroom-dashboard/src/components/BuySubscription.vue
Normal file
281
xroom-dashboard/src/components/BuySubscription.vue
Normal 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>
|
||||
|
|
@ -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">
|
||||
|
|
@ -101,15 +104,17 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.header-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
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-weight: 500;
|
||||
color: #333333;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
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;
|
||||
|
|
|
|||
202
xroom-dashboard/src/components/Membership.vue
Normal file
202
xroom-dashboard/src/components/Membership.vue
Normal 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>
|
||||
29
xroom-dashboard/src/components/TeamDetails.vue
Normal file
29
xroom-dashboard/src/components/TeamDetails.vue
Normal 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>
|
||||
|
|
@ -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
Loading…
Reference in New Issue
Block a user