消息

TUIKit/tui-customer-service-plugin/components/message-form/form-branch.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="form-branch-container">
+    <p
+      v-if="props.title"
+      class="card-title"
+    >
+      {{ props.title }}
+    </p>
+    <div
+      v-for="(item, index) in props.list"
+      :key="index"
+      class="form-branch-item"
+      @click="listItemClick(item)"
+    >
+      {{ item.content }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+interface branchItem {
+  content: string;
+  desc: string;
+}
+
+interface Props {
+  title: string;
+  list: branchItem[];
+}
+
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    list: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  emits: ['input-click'],
+  setup(props: Props, { emit }) {
+    const listItemClick = (branch: branchItem): void => {
+      emit('input-click', branch);
+    };
+    return {
+      props,
+      listItemClick,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.form-branch-container {
+  .card-title {
+    margin-bottom: 8px;
+  }
+
+  .form-branch-item {
+    font-weight: 400;
+    color: rgba(54, 141, 255, 1);
+    padding-top: 5px;
+    cursor: pointer;
+    padding-bottom: 5px;
+  }
+}
+</style>

TUIKit/tui-customer-service-plugin/components/message-form/form-input.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="form-input-container">
+    <div class="card-title">
+      {{ props.title }}
+    </div>
+    <div class="form-input-box">
+      <input
+        v-model="text"
+        class="form-input"
+      >
+      <button
+        class="form-button"
+        :disabled="disabled"
+        @click="listItemClick"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import vue from '../../adapter-vue';
+
+const { ref } = vue;
+
+interface Props {
+  title: string;
+}
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['input-submit'],
+  setup(props: Props, { emit }) {
+    const disabled = ref<boolean>(false);
+    const text = ref<string>('');
+
+    const listItemClick = (): void => {
+      disabled.value = true;
+      emit('input-submit', text.value);
+    };
+    return {
+      disabled,
+      text,
+      listItemClick,
+      props,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.form-input-container {
+  .card-title {
+    margin-bottom: 8px;
+  }
+
+  .form-input-box {
+    display: flex;
+
+    button:disabled {
+      background: #d8d8d8;
+    }
+  }
+
+  .form-input {
+    width: 100%;
+    height: 36px;
+    border-radius: 8px 0 0 8px;
+    border: 1px rgba(221, 221, 221, 1) solid;
+  }
+
+  .form-button {
+    position: relative;
+    height: 40px;
+    width: 42px;
+    font-size: 16px;
+    border-radius: 0 8px 8px 0;
+    border: 0 rgba(221, 221, 221, 1) solid;
+    background: #006eff;
+    color: white;
+    cursor: pointer;
+  }
+
+  .form-button::before {
+    content: "";
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: 50%;
+    right: 40%;
+    border-left: 2px solid #fff;
+    border-bottom: 2px solid #fff;
+    transform: translate(0, -50%) rotate(-135deg);
+  }
+}
+</style>

TUIKit/tui-customer-service-plugin/components/message-form/index.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    v-if="content.type === 1"
+    class="message-form"
+  >
+    <FormBranch
+      :title="content.header"
+      :list="content.items"
+      @input-click="handleContentListItemClick"
+    />
+  </div>
+  <div
+    v-else
+    class="message-form"
+  >
+    <FormInput
+      :title="content.header"
+      @input-submit="handleFormSaveInputSubmit"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import vue from '../../adapter-vue';
+import FormBranch from './form-branch.vue';
+import FormInput from './form-input.vue';
+
+const { computed } = vue;
+
+interface branchItem {
+  content: string;
+  desc: string;
+}
+
+interface Props {
+  payload: any;
+}
+
+export default {
+  components: {
+    FormBranch,
+    FormInput,
+  },
+  props: {
+    payload: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  emits: ['sendMessage'],
+  setup(props: Props, { emit }) {
+    const content = computed(() => {
+      return props.payload?.content || {
+        type: 0,
+        header: '',
+        items: [],
+      };
+    });
+
+    const handleContentListItemClick = (branch: branchItem) => {
+      emit('sendMessage', { text: branch.content });
+    };
+
+    const handleFormSaveInputSubmit = (text: string) => {
+      emit('sendMessage', { text });
+    };
+    return {
+      content,
+      handleContentListItemClick,
+      handleFormSaveInputSubmit,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.message-form {
+  max-width: 300px;
+}
+</style>