Merge branch 'master' of git.flexites.org:Students/ITRadio
This commit is contained in:
Mike0001-droid
commit
527dd8a20f
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<div ref="map" :style="{ width: mapWidth, height: mapHeight }"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'YandexMap',
|
||||
props: {
|
||||
apiKey: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
mapWidth: {
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
mapHeight: {
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
center: {
|
||||
type: Array,
|
||||
default: () => [61.402554, 55.159902],
|
||||
},
|
||||
zoom: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.loadYandexMap();
|
||||
},
|
||||
methods: {
|
||||
loadYandexMap() {
|
||||
if (document.querySelector('script[src*="api-maps.yandex.ru"]')) {
|
||||
this.initMap();
|
||||
} else {
|
||||
const script = document.createElement('script');
|
||||
script.src = `https://api-maps.yandex.ru/v3/?apikey=${this.apiKey}&lang=ru_RU`;
|
||||
script.onload = this.initMap;
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
},
|
||||
async initMap() {
|
||||
// eslint-disable-next-line no-undef
|
||||
await ymaps3.ready;
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
const { YMap, YMapDefaultSchemeLayer, YMapDefaultMarker } = ymaps3;
|
||||
|
||||
const map = new YMap(this.$refs.map, {
|
||||
location: {
|
||||
center: this.center,
|
||||
zoom: this.zoom,
|
||||
},
|
||||
});
|
||||
|
||||
map.addChild(new YMapDefaultSchemeLayer());
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -49,7 +49,9 @@ export default route(function (/* { store, ssrContext } */) {
|
|||
});
|
||||
|
||||
Router.beforeEach((to, from, next) => {
|
||||
if (to.meta.isAuth) {
|
||||
console.log(process.env.SERVER);
|
||||
//уточнить зачем нужен process.env.SERVER
|
||||
if (to.meta.isAuth && !process.env.SERVER) {
|
||||
if (store.state.user) {
|
||||
next();
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import { REST, RESTError } from './rest';
|
|||
// console.log(settings);
|
||||
|
||||
export default class extends REST {
|
||||
// export default class Django extends REST {
|
||||
|
||||
static get settings() {
|
||||
return settings;
|
||||
}
|
||||
|
|
@ -237,4 +239,16 @@ export default class extends REST {
|
|||
);
|
||||
});
|
||||
}
|
||||
|
||||
static getSupportInfo() {
|
||||
return this._get('radio/support_info', {}, {})
|
||||
.then((data) => {
|
||||
return data;
|
||||
})
|
||||
.catch((error) => {
|
||||
throw new RESTError(error, 'Ошибка при получении контактов');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// window.django = Django;
|
||||
|
|
|
|||
|
|
@ -8,29 +8,29 @@
|
|||
/>
|
||||
<h1 class="h2">Контакты</h1>
|
||||
<div class="contacts__content">
|
||||
<div class="contacts__info">
|
||||
<div class="text contacts__item">
|
||||
<span class="title">Телефон</span>
|
||||
+7 (900) 000-00-00
|
||||
</div>
|
||||
<div class="text contacts__item">
|
||||
<span class="title">Почта</span>
|
||||
it-radio@info.org
|
||||
</div>
|
||||
<div class="text contacts__item">
|
||||
<span class="title">Адрес</span>
|
||||
г. Челябинск, Адрес
|
||||
</div>
|
||||
<div class="text contacts__item">
|
||||
<span class="title">Соц. сети</span>
|
||||
<div class="contacts__social">
|
||||
<div class="contacts__social m--telegram"></div>
|
||||
<div class="contacts__social m--vk"></div>
|
||||
<div v-if="contacts" class="contacts__info">
|
||||
<div v-for="(item, index) in contactsField" :key="index">
|
||||
<div
|
||||
v-if="item.title !== dictionaryFields.socials"
|
||||
class="text contacts__item"
|
||||
>
|
||||
<span class="title">{{ item.title }}</span>
|
||||
{{ item.data }}
|
||||
</div>
|
||||
<div v-else class="contacts__socials">
|
||||
<span class="title">{{ item.title }}</span>
|
||||
<div
|
||||
v-for="(href, social) in item.data"
|
||||
:key="social"
|
||||
class="contacts__social"
|
||||
>
|
||||
<a :href="href" :class="['contacts__social', social]"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contacts__map">
|
||||
<div
|
||||
<!-- <div
|
||||
class="contacts__map-frame"
|
||||
style="position: relative; overflow: hidden"
|
||||
>
|
||||
|
|
@ -38,10 +38,6 @@
|
|||
href="https://yandex.ru/maps/56/chelyabinsk/?utm_medium=mapframe&utm_source=maps"
|
||||
style="color: #eee; font-size: 12px; position: absolute; top: 0px"
|
||||
>Челябинск</a
|
||||
><a
|
||||
href="https://yandex.ru/maps/geo/chelyabinsk/53159527/?ll=61.421984%2C55.159071&utm_medium=mapframe&utm_source=maps&z=14.04"
|
||||
style="color: #eee; font-size: 12px; position: absolute; top: 14px"
|
||||
>Челябинск — Яндекс Карты</a
|
||||
><iframe
|
||||
src="https://yandex.ru/map-widget/v1/?ll=61.421984%2C55.159071&mode=poi&poi%5Bpoint%5D=61.399655%2C55.160475&poi%5Buri%5D=ymapsbm1%3A%2F%2Fgeo%3Fdata%3DCgg1MzE1OTUyNxIg0KDQvtGB0YHQuNGPLCDQp9C10LvRj9Cx0LjQvdGB0LoiCg04nHVCFb2jXEI%2C&z=14.04"
|
||||
width="100%"
|
||||
|
|
@ -50,7 +46,8 @@
|
|||
allowfullscreen="true"
|
||||
style="position: relative"
|
||||
></iframe>
|
||||
</div>
|
||||
</div> -->
|
||||
<YandexMap apiKey="e73ed16e-35ea-483b-afb4-9daac388591a" />
|
||||
</div>
|
||||
<FormKit
|
||||
v-model="formData"
|
||||
|
|
@ -79,10 +76,12 @@
|
|||
<script>
|
||||
import AppBreadcrumbs from '@/components/app-breadcrumbs.vue';
|
||||
import SupportBlock from '@/components/support-block.vue';
|
||||
import YandexMap from '@/components/ymap.vue';
|
||||
import { app } from '@/services';
|
||||
|
||||
export default {
|
||||
name: 'contacts',
|
||||
components: { SupportBlock, AppBreadcrumbs },
|
||||
components: { SupportBlock, AppBreadcrumbs, YandexMap },
|
||||
data() {
|
||||
return {
|
||||
formData: {},
|
||||
|
|
@ -104,12 +103,11 @@ export default {
|
|||
outerClass: 'field--required',
|
||||
},
|
||||
{
|
||||
$formkit: 'maska',
|
||||
name: 'phone',
|
||||
maska: { mask: '+7 (###) ###-##-##' },
|
||||
label: 'Контактный телефон',
|
||||
placeholder: '+7 (###) ###-##-##',
|
||||
validation: 'required',
|
||||
$formkit: 'text',
|
||||
name: 'email',
|
||||
label: 'Электронная почта',
|
||||
placeholder: 'example@example.com',
|
||||
validation: 'required|email',
|
||||
outerClass: 'field--required',
|
||||
},
|
||||
{
|
||||
|
|
@ -122,10 +120,72 @@ export default {
|
|||
},
|
||||
],
|
||||
showLoaderSending: false,
|
||||
contacts: null,
|
||||
dictionaryFields: {
|
||||
phone: 'Телефон',
|
||||
address: 'Адрес',
|
||||
email: 'Почта',
|
||||
socials: 'Соц. сети',
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
contactsField() {
|
||||
const address = this.formatAddress(this.contacts);
|
||||
const phone = this.contacts.phone;
|
||||
const email = this.contacts.email;
|
||||
const socials = {
|
||||
['m--telegram']: this.contacts.telegram_url,
|
||||
['m--vk']: this.contacts.vk_url,
|
||||
};
|
||||
|
||||
const fields = {
|
||||
address,
|
||||
phone,
|
||||
email,
|
||||
socials,
|
||||
};
|
||||
|
||||
const fieldsWithoutNull = this.removeNullFields(fields);
|
||||
return this.createArrayContacts(this.dictionaryFields, fieldsWithoutNull);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
app.getSupportInfo().then((responce) => {
|
||||
this.contacts = { ...responce };
|
||||
});
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
submitHandler() {},
|
||||
removeNullFields(obj) {
|
||||
const result = {};
|
||||
for (const key in obj) {
|
||||
if (obj[key] !== null) {
|
||||
if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
|
||||
result[key] = this.removeNullFields(obj[key]);
|
||||
} else {
|
||||
result[key] = obj[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
createArrayContacts(dictionary, fields) {
|
||||
const result = [];
|
||||
for (const key in fields) {
|
||||
if (dictionary[key]) {
|
||||
result.push({ title: dictionary[key], data: fields[key] });
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
formatAddress(contacts) {
|
||||
if (contacts.city && contacts.street && contacts.house) {
|
||||
return `г. ${contacts.city}, ул. ${contacts.street}, д. ${contacts.house}`;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue