File manager - Edit - /home/premiey/www/wp-content/plugins/ameliabooking/assets/views/frontend/catalog/Package.vue
Back
<template> <div id="amelia-booking-wrap" class="am-wrap"> <!-- Package --> <div id="am-service-booking" ref="bookingContainer" v-if="!empty && package && package.status === 'visible'"> <transition name="fade"> <div v-show="fetchedPackage"> <!-- Package Gallery --> <div class="am-service-gallery"> <el-carousel v-if="package.gallery.length > 0" indicator-position="none" :arrow="package.gallery.length === 1 ? 'never' : 'always'" :autoplay=true > <el-carousel-item v-for="(image, index) in package.gallery" :key="index"> <div class="am-image-slide" :style="{'background-image': 'url(' + image.pictureFullPath + ')'}"> </div> </el-carousel-item> </el-carousel> </div> <!-- Package Details --> <div class="am-service" :style="{backgroundColor: formColors.formBackgroundColor}"> <!-- Package Header --> <div class="am-service-header"> <!-- Package Profile Photo --> <div class="am-service-image"> <img :src="pictureLoad(package, false)" @error="imageLoadError(package, false)" :alt="package.name" > </div> <!-- Package Data --> <div class="am-service-data"> <!-- Package Back --> <div v-if="passedCategory" :style="{color: formColors.formTextColor}" class="am-category-url" @click="backToCategory" > <i class="el-icon-back"></i> {{ passedCategory.name }} </div> <!-- Package Name --> <div class="am-service-title"> <h2 :style="{color: formColors.formTextColor, fontFamily: $root.settings.customization.font}"> {{ package.name }} </h2> </div> </div> <!-- Package Price --> <div class="am-service-price" v-if="package.price"> {{ getFormattedPrice(package.calculatedPrice ? package.price : package.price - package.price / 100 * package.discount, !$root.settings.payments.hideCurrencySymbolFrontend) }} </div> </div> <el-row v-if="formParts.package_rules_description.visibility || formParts.selected_services.visibility" class="am-package-selected" > <el-col v-if="formParts.package_rules_description.visibility" :span="12" class="am-package-selected-col" > <div class="am-package-rule"> <div> <span :style="{color: formColors.formTextColor}"> <i class="el-icon-date"></i> {{ $root.labels.package_book_service }} {{ package.sharedCapacity && package.quantity ? $root.labels.package_book_service_2 + ' ' + package.quantity + ' ' + (package.quantity === 1 ? $root.labels.appointment.toLowerCase() : $root.labels.appointments.toLowerCase()) + '.' : '' }} </span> </div> <div v-if="package.durationType !== null || package.endDate !== null"> <span v-if="package.durationType === 'day' || package.durationType === 'week' || package.durationType === 'month'" :style="{color: formColors.formTextColor}" > <i class="el-icon-time"></i> {{ $root.labels.package_book_duration }} {{ package.durationCount }} {{ package.durationCount > 1 ? $root.labels[package.durationType + 's'].toLowerCase() : $root.labels[package.durationType].toLowerCase() + '.' }} </span> <span v-if="package.endDate !== null" :style="{color: formColors.formTextColor}" > <i class="el-icon-time"></i> {{ $root.labels.package_book_expire }} {{ formatDate(package.endDate) }} </span> </div> </div> <div class="am-package-description ql-description"><p v-html="package.description" :style="{color: formColors.formTextColor}"></p></div> </el-col> <el-col v-if="formParts.selected_services.visibility" :span="12" class="am-package-selected-col" > <el-row v-for="bookable in package.availableBookableInfo" :key="bookable.serviceId"> <el-col :span="16" class="am-package-service" :style="{color: formColors.formTextColor}"> {{ bookable.serviceName }} <span :style="{color: formColors.formTextColor}" v-if="!package.sharedCapacity">x{{ bookable.serviceQuantity }}</span> </el-col> </el-row> </el-col> </el-row> <!-- Package Booking --> <booking v-if="fetchedPackage" :id="id" :form-type="'catalogForm'" :passedPackage="package" :passedCategory="passedCategory" :passedEntities="options.entities" :passedEntitiesRelations="options.entitiesRelations" :showPackage="false" :addToCalendarProperty="addToCalendarProperty" @entitiesFetched="getEntities" > </booking> </div> </div> </transition> </div> <div v-if="empty" class="am-no-services"> <img :src="$root.getUrl+'public/img/am-empty-booking.svg'" style="margin-top: 10px;"> <h1>{{$root.labels.oops}}</h1> <h3>{{$root.labels.no_services_employees}}</h3> <p>{{$root.labels.add_services_employees}}</p> <a href="https://wpamelia.com/services-and-categories/"> {{$root.labels.add_services_url}} </a> <span style="font-size:14px">{{$root.labels.and}}</span> <a href="https://wpamelia.com/employees/"> {{$root.labels.add_employees_url}} </a> </div> </div> </template> <script> import imageMixin from '../../../js/common/mixins/imageMixin' import PhoneInput from '../../parts/PhoneInput.vue' import catalogMixin from '../../../js/frontend/mixins/catalogMixin' import durationMixin from '../../../js/common/mixins/durationMixin' import entitiesMixin from '../../../js/common/mixins/entitiesMixin' import cacheMixin from '../../../js/frontend/mixins/cacheMixin' import Booking from '../booking/Booking' import Extras from './parts/Extras' import EmployeesBlock from './parts/EmployeesBlock' import helperMixin from '../../../js/backend/mixins/helperMixin' import dateMixin from '../../../js/common/mixins/dateMixin' import moment from 'moment' import formsCustomizationMixin from '../../../../assets/js/common/mixins/formsCustomizationMixin' export default { mixins: [cacheMixin, dateMixin, imageMixin, catalogMixin, durationMixin, entitiesMixin, helperMixin, formsCustomizationMixin], props: { addToCalendarProperty: { type: Object, default: () => { return { visible: true } } }, formsData: { type: Object, default: () => { return {} } }, customize: { type: Object, default: () => { return {} } }, passedCategory: { default: () => {}, type: Object }, passedPackage: { default: () => {}, type: Object }, passedEntities: { default: () => {}, type: Object }, passedEntitiesRelations: { default: () => {}, type: Object } }, data () { return { empty: false, id: 'am-step-booking-catalog', package: {}, fetchedPackage: false, responseEntities: { categories: [], employees: [], locations: [], customFields: [] }, options: { availableEntitiesIds: { packages: [], categories: [], employees: [], locations: [], services: [] }, entitiesRelations: {}, entities: { packages: [], services: [], employees: [], locations: [] } }, packageId: '', columnsLg: 12, formColors: Object.keys(this.formsData).length ? (this.$root.settings.customization.useGlobalColors.catalogForm ? this.$root.settings.customization.globalColors : this.formsData.categoryPackageForm.globalSettings) : {}, formParts: Object.keys(this.formsData).length ? this.formsData.categoryPackageForm.parts : {} } }, created () { if (!Object.keys(this.formsData).length) { let customizedData = this.getTranslatedForms('catalogForm').catalogForm this.formColors = this.$root.settings.customization.useGlobalColors.catalogForm ? this.$root.settings.customization.globalColors : customizedData.categoryPackageForm.globalSettings this.formParts = customizedData.categoryPackageForm.parts } this.id = this.id + this.$root.shortcodeData.counter this.packageId = 'package' in this.$root.shortcodeData.booking ? this.$root.shortcodeData.booking.package : null window.addEventListener('resize', this.handleResize) }, mounted () { this.$nextTick(() => { if (this.$refs && this.$refs.bookingContainer) { this.$refs.bookingContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' }) } }) if (this.passedPackage) { this.options.isFrontEnd = true this.package = JSON.parse(JSON.stringify(this.passedPackage)) this.fetchedPackage = true this.options.entities = this.passedEntities this.options.entitiesRelations = this.passedEntitiesRelations // Customization hook if ('beforeCatalogPackageLoaded' in window) { window.beforeCatalogPackageLoaded(this.package) } } else { this.fetchEntities((success) => { if (success) { this.fetchedEntities() } }, { types: ['locations', 'employees', 'categories', 'custom_fields', 'packages'], isFrontEnd: true, isPanel: false }) } }, updated () { this.handleResize() }, methods: { fetchedEntities () { this.package = this.getPackageById(this.packageId) if (this.options.entities.packages.length === 0 || this.options.entities.employees.length === 0 || !this.package) this.empty = true this.fetchedPackage = true }, backToCategory () { this.$emit('showAllServices') }, getEntities (entities) { this.options.entities = entities }, handleResize () { let amContainer = document.getElementById('amelia-app-booking' + this.$root.shortcodeData.counter) let amContainerWidth = amContainer.offsetWidth if (amContainerWidth < 670) { this.columnsLg = 24 amContainer.classList.add('am-mobile-collapsed') amContainer.classList.remove('am-desktop') } else { this.columnsLg = 12 amContainer.classList.add('am-desktop') amContainer.classList.remove('am-mobile-collapsed') } }, formatDate (date) { return this.getFrontedFormattedDate( moment(date).format('YYYY-MM-DD') ) } }, components: { PhoneInput, Booking, Extras, EmployeesBlock } } </script>
| ver. 1.4 |
Github
|
.
| PHP 5.4.45 | Generation time: 0 |
proxy
|
phpinfo
|
Settings