feat: карточки ItemsList

components/CardItem.vue

@@ -0,0 +1,84 @@
+<template>
+ <div class="card-item" @click="onClick">
+ <div v-bind:style="cardItemIconStyle"></div>
+ <div :title="title" class="card-item-text" v-html="text"></div>
+ </div>
+</template>
+
+<style lang="scss">
+.card-item {
+ display: flex;
+ padding: 10px;
+ color: #666;
+ &:hover {
+ color: #999;
+ }
+}
+.card-item-text {
+ padding: inherit;
+ color: inherit;
+}
+</style>
+
+<script>
+import {
+ AUTHOR_NAME,
+ ADD_MESSAGE,
+ ALICE_REQUEST,
+ RUN_TEST,
+ SET_WEBHOOK_URL
+} from "~/store";
+export default {
+ props: ["title", "image", "url", "payload", "hide"],
+
+ computed: {
+ // показывается человеку
+ text() {
+ return this.title || this.value;
+ },
+
+ // отправляется боту
+ sendText() {
+ return this.value || this.title;
+ },
+
+ cardItemIconStyle() {
+ return {
+ 'background-image': 'url(https://avatars.mds.yandex.net/get-dialogs-skill-card/' + this.image + '/menu-list-x1',
+ width: '60px',
+ height: '60px',
+ overflow: 'hidden',
+ position: 'relative',
+ 'background-size': 'cover',
+ 'background-repeat': 'no-repeat',
+ 'background-position': '0 0'
+ }
+ }
+ },
+
+ methods: {
+ onClick() {
+ // open url
+ if (this.url) {
+ window.open(this.url, "_blank");
+ return;
+ }
+
+ // add send message
+ this.$store.commit(ADD_MESSAGE, {
+ text: this.sendText,
+ author: AUTHOR_NAME
+ });
+
+ // send to alice
+ this.$store.dispatch(ALICE_REQUEST, {
+ command: this.sendText,
+ type: "ButtonPressed",
+ payload: this.payload,
+ url: this.url,
+ hide: this.hide
+ });
+ }
+ }
+};
+</script>

components/Message.vue

@@ -6,7 +6,15 @@
  </div>
 
  <div class="message__text-wrap">
- <div class="message__text" v-html="text"></div>
+ <div class="message__text">
+ <span v-html="text"></span>
+ <div class="card-items-list" v-if="message.card && message.card.items && message.card.items.length>0">
+ <span v-if="message.card.header" class="card-items-header" v-html="message.card.header.text"></span>
+ <CardItem v-for="item in message.card.items" :key="item.image_id"
+ :image="item.image_id" :title="item.title" :payload="item.button.payload">
+ </CardItem>
+ </div>
+ </div>
  </div>
 
  <div class="message__buttons">
@@ -17,6 +25,13 @@
 </template>
 
 <style lang="scss">
+.card-items-list {
+ background: white;
+}
+.card-items-header {
+ font-weight: bold;
+ padding: 5px;
+}
 .message {
  margin-top: 15px;
  margin-bottom: 15px;
@@ -107,9 +122,10 @@
 <script>
 import { AUTHOR_NAME, ADD_MESSAGE, ALICE_REQUEST } from '~/store';
 import MessageButton from '~/components/MessageButton';
+import CardItem from '~/components/CardItem';
 
 export default {
- components: { MessageButton },
+ components: { MessageButton,CardItem },
  props: ['message'],
 
  computed: {

components/MessageButton.vue

@@ -56,7 +56,7 @@ export default {
  }
 
  // run tests
- if (this.payload) {
+ if (this.payload && typeof this.payload ==="string") {
  const payload = JSON.parse(this.payload);
  if (payload.scenarios_test) {
  this.$store.dispatch(RUN_TEST, payload.scenarios_test);

store/index.js

@@ -256,6 +256,7 @@ export const actions = {
 
  commit(ADD_MESSAGE, {
  text: responseData.response.text,
+ card: responseData.response.card || {header:{},items:[]},
  buttons: responseData.response.buttons,
  end_session: responseData.response.end_session,
  author: 'Робот',