Nikita Kiselev
393bbb286b
Some checks failed
Telegram Mini App Shop Builder / Compute version metadata (push) Has been cancelled
Telegram Mini App Shop Builder / Run Frontend tests (push) Has been cancelled
Telegram Mini App Shop Builder / Run Backend tests (push) Has been cancelled
Telegram Mini App Shop Builder / Run PHP_CodeSniffer (push) Has been cancelled
Telegram Mini App Shop Builder / Build module. (push) Has been cancelled
Telegram Mini App Shop Builder / release (push) Has been cancelled
60 lines
1.5 KiB
Vue
60 lines
1.5 KiB
Vue
<template>
|
||
<div>
|
||
<div>
|
||
<select v-model="link.type" class="form-control link-type-select" @change="link.value = null">
|
||
<option value="none">Нет ссылки</option>
|
||
<option value="category">Ссылка на категорию</option>
|
||
<option value="product">Ссылка на товар</option>
|
||
<option value="url">Внешняя ссылка</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div v-if="link.type === 'url'" class="mt-10">
|
||
<input
|
||
:value="link.value?.url"
|
||
@input="setLink($event.target.value)"
|
||
type="text"
|
||
placeholder="https://example.com"
|
||
class="form-control"
|
||
/>
|
||
</div>
|
||
|
||
<div v-else-if="link.type === 'category'" class="mt-10">
|
||
<CategorySelect v-model="link.value"/>
|
||
</div>
|
||
|
||
<div v-else-if="link.type === 'product'" class="mt-10">
|
||
<ProductSelect v-model="link.value"/>
|
||
</div>
|
||
|
||
<div v-else-if="link.type === 'none'"></div>
|
||
|
||
<div v-else class="alert alert-danger">Не поддерживается: {{ link.type }}</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import CategorySelect from "@/components/Slider/CategorySelect.vue";
|
||
import ProductSelect from "@/components/Slider/ProductSelect.vue";
|
||
|
||
const link = defineModel();
|
||
|
||
function setLink(value) {
|
||
if (link.value?.value) {
|
||
link.value.value.url = value;
|
||
} else {
|
||
link.value.value = { url: value };
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.link-type-select {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mt-10 {
|
||
margin-top: 10px;
|
||
}
|
||
</style>
|