@tencentcloud/ai-desk-customer-vue 0.1.0

package/components/message-product-card.vue

@@ -0,0 +1,129 @@
+<template>
+  <div
+    class="message-product-card"
+  >
+    <image
+      v-if="isApp"
+      class="product-img"
+      :src="props.payload.content.pic"
+    />
+    <img
+      v-else
+      class="product-img"
+      :src="props.payload.content.pic"
+    >
+    <div class="product-card-information">
+      <div class="product-card-title">
+        {{ props.payload.content.header }}
+      </div>
+      <div class="product-card-description-block">
+          <div class="product-card-description">
+          {{ props.payload.content.desc }}
+        </div>
+        <div class="product-card-link"  @click="jumpProductCard">
+              跳转
+            </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { customerServicePayloadType } from '../interface';
+import { isApp } from '../utils/env';
+
+// eslint-disable-next-line
+declare var uni: any;
+
+interface Props {
+  payload: customerServicePayloadType;
+}
+
+export default {
+  props: {
+    payload: {
+      type: Object as () => customerServicePayloadType,
+      default: () => ({}),
+    },
+  },
+  emits: ['sendMessage'],
+  setup(props: Props) {
+    const jumpProductCard = () => {
+      if (window) {
+        window.open(props.payload.content.url, '_blank');
+      } else {
+        // uni && uni.navigateTo({ url: `/TUIKit/components/TUIChat/web-view?url=${props.payload.content.url}` });
+        // #ifdef APP-PLUS
+        // @ts-ignore
+        plus.runtime.openURL(props.payload.content.url);
+        // #endif
+        // #ifdef H5
+        // @ts-ignore
+        window.open(props.payload.content.url);
+        // #endif
+      }
+    };
+    return {
+      props,
+      isApp,
+      jumpProductCard,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.message-product-card {
+  min-width: 224px;
+  max-width: 288px;
+  display: flex;
+  padding: 10px;
+
+  .product-img {
+    width: 75px;
+    height: 75px;
+    border-radius: 10px;
+  }
+
+  .product-card-information {
+    width:100%;
+    margin-left: 12px;
+    margin-right:5px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .product-card-title {
+      font-size: 16px;
+      max-width: 165px;
+      display: -webkit-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      word-break: break-all;
+    }
+
+    .product-card-description-block {
+      display:flex;
+      justify-content: space-between;
+    }
+
+    .product-card-description {
+      font-size: 14px;
+      max-width: 165px;
+      color: #1c66e5;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: 600;
+    }
+
+    .product-card-link {
+      background-color: #1c66e5;
+      color:#ffffff;
+      padding:2px 12px;
+      border-radius: 12px;
+    }
+  }
+}
+</style>

package/components/message-rating/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <RatingStar
+    v-if="ratingTemplate.type === RATING_TEMPLATE_TYPE.STAR"
+    :ratingTemplate="ratingTemplate"
+    @sendMessage="sendCustomMessage"
+  />
+  <RatingNumber
+    v-else
+    :ratingTemplate="ratingTemplate"
+    @sendMessage="sendCustomMessage"
+  />
+</template>
+
+<script lang="ts">
+import vue from '../../adapter-vue';
+import { JSONToObject } from '../../utils/index';
+import { RATING_TEMPLATE_TYPE } from '../../constant';
+import RatingStar from './message-rating-star.vue';
+import RatingNumber from './message-rating-number.vue';
+import { IMessageModel } from '../../interface';
+const { computed } = vue;
+
+interface Props {
+  message: IMessageModel;
+}
+
+export default {
+  components: {
+    RatingStar,
+    RatingNumber,
+  },
+  props: {
+    message: {
+      type: Object as () => IMessageModel,
+      default: () => ({}),
+    },
+  },
+  emits: ['sendMessage'],
+  setup(props: Props, { emit }) {
+    const ratingTemplate = computed(() => {
+      const data = props.message && JSONToObject(props.message.payload.data);
+      return data?.menuContent;
+    });
+
+    const sendCustomMessage = (data: any) => {
+      emit('sendMessage', data);
+    };
+
+    return {
+      sendCustomMessage,
+      ratingTemplate,
+      RATING_TEMPLATE_TYPE,
+    };
+  },
+};
+</script>

package/components/message-rating/message-rating-number.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="message-rating-star">
+    <p class="rating-head">
+      {{ props.ratingTemplate.head }}
+    </p>
+
+    <div class="rating-card">
+      <span class="card-title">请对本次服务进行评价</span>
+      <div class="card-wrapper">
+        <div style="max-width: 250px">
+          <div
+            v-for="(item, index) in numberList"
+            :key="index"
+            :class="{
+              'active': !(index !== selectValue && index !== hoverValue),
+              'de-active': index !== selectValue && index !== hoverValue,
+            }"
+            :style="{
+              marginLeft: index === 0 ? 0 + 'px' : 20 + 'px',
+              margin: 5 + 'px',
+            }"
+            @click="setValue(index)"
+            @mouseenter="setHoverValue(index)"
+            @mouseleave="setHoverValue(-1)"
+          >
+            {{ item + 1 }}
+          </div>
+        </div>
+      </div>
+      <div :style="{ marginTop: 10 + 'px', marginBottom: 10 + 'px' }">
+        {{
+          hoverValue === -1
+            ? selectValue === -1
+              ? "如果满意请给好评哦～"
+              : desc[selectValue]
+            : desc[hoverValue]
+        }}
+      </div>
+      <button
+        class="submit-button"
+        :disabled="hasReply || hasExpire"
+        @click="submitRatingStar"
+      >
+        提交评价
+      </button>
+    </div>
+    <p
+      v-if="hasReply"
+      class="rating-tail"
+      :style="{
+        marginTop: 20 + 'px',
+      }"
+    >
+      {{ props.ratingTemplate.tail }}
+    </p>
+  </div>
+</template>
+
+<script lang="ts">
+import vue from '../../adapter-vue';
+import { CUSTOM_MESSAGE_SRC } from '../../constant';
+import { ratingTemplateType } from '../../interface';
+const { computed, ref, watchEffect } = vue;
+
+interface Props {
+  ratingTemplate: ratingTemplateType;
+}
+
+export default {
+  props: {
+    ratingTemplate: {
+      type: Object as () => ratingTemplateType,
+      default: () => ({}),
+    },
+  },
+  emits: ['sendMessage'],
+  setup(props: Props, { emit }) {
+    const hasReply = ref<boolean>(false);
+    const sessionId = ref<string>('');
+    const selectValue = ref<number>(-1);
+    const hoverValue = ref<number>(-1);
+    const hasExpire = ref<boolean>(false);
+
+    const desc = computed(() => {
+      return props.ratingTemplate?.menu.map(item => item.content);
+    });
+
+    const numberList = computed(() => {
+      return props.ratingTemplate?.menu.map((item, index) => index);
+    });
+
+    watchEffect(() => {
+      sessionId.value = props.ratingTemplate.sessionId || '';
+      if (props.ratingTemplate.selected != undefined) {
+        for (let i = 0; i < props.ratingTemplate.menu.length; i++) {
+          if (props.ratingTemplate.menu[i].id == props.ratingTemplate.selected.id) {
+            hasReply.value = true;
+            selectValue.value = i;
+            break;
+          }
+        }
+      }
+      const timestamp = Math.floor(new Date().getTime() / 1000);
+      if (timestamp > props.ratingTemplate.expireTime) {
+        hasExpire.value = true;
+      }
+    });
+
+    const setValue = (val: number) => {
+      if (!hasReply.value) {
+        selectValue.value = val;
+      }
+    };
+
+    const setHoverValue = (value: number) => {
+      if (!hasReply.value) {
+        hoverValue.value = value;
+      }
+    };
+
+    const submitRatingStar = () => {
+      if (selectValue.value >= 0) {
+        const submitData = {
+          data: JSON.stringify({
+            src: CUSTOM_MESSAGE_SRC.MENU_SELECTED,
+            menuSelected: {
+              id: props.ratingTemplate.menu[selectValue.value].id,
+              content: props.ratingTemplate.menu[selectValue.value].content,
+              sessionId: sessionId.value,
+            },
+            customerServicePlugin: 0,
+          }),
+        };
+        hasReply.value = true;
+        emit('sendMessage', submitData);
+      }
+    };
+
+    return {
+      props,
+      hasReply,
+      sessionId,
+      selectValue,
+      hoverValue,
+      hasExpire,
+      desc,
+      numberList,
+      setValue,
+      setHoverValue,
+      submitRatingStar,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.rating-head {
+  font-size: 14px;
+  font-weight: 400;
+  color: #999;
+}
+
+.rating-tail {
+  font-size: 14px;
+  font-weight: 400;
+  color: #999;
+}
+
+.card-title {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.rating-card {
+  min-width: 270px;
+  width: 50%;
+  background: #fbfbfb;
+  border-radius: 20px;
+  border: 0;
+  margin-top: 10px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+
+  button:disabled {
+    background: #d8d8d8;
+  }
+}
+
+.message-rating-star {
+  text-align: center;
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: center;
+  padding-bottom: 30px;
+  align-items: center;
+}
+
+.card-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding-top: 10px;
+}
+
+.submit-button {
+  width: 50%;
+  height: 50px;
+  background-color: #0365f9;
+  font-size: 18px;
+  font-weight: 400;
+  color: white;
+  border: 0;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.de-active {
+  height: 34px;
+  width: 34px;
+  display: inline-block;
+  border: 0 solid #006eff0d;
+  border-radius: 5px;
+  color: #006eff;
+  font-weight: 400;
+  font-size: 16px;
+  text-align: center;
+  line-height: 34px;
+  background: #006eff0d;
+}
+
+.active {
+  width: 34px;
+  height: 34px;
+  display: inline-block;
+  background: linear-gradient(
+    136.96deg,
+    rgba(10, 124, 255, 0.3) -39.64%,
+    #0a7cff 131.39%
+  );
+  border-radius: 5px;
+  color: white;
+  font-weight: 400;
+  font-size: 16px;
+  border: 0 solid #0a7cff;
+  text-align: center;
+  line-height: 34px;
+}
+</style>

package/components/message-rating/message-rating-star.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="message-rating-star">
+    <p class="rating-head">
+      {{ props.ratingTemplate.head }}
+    </p>
+    <div class="rating-card">
+      <span class="card-title">请对本次服务进行评价</span>
+      <div class="card-wrapper">
+        <div style="max-width: 200px">
+          <div
+            v-for="(item, index) in starList"
+            :key="index"
+            style="display: inline-block"
+            @click="setValue(index)"
+            @mouseenter="setHoverValue(index)"
+            @mouseleave="setHoverValue(-1)"
+          >
+            <Icon
+              v-if="item === 1"
+              :src="star"
+              width="25px"
+              height="25px"
+            />
+            <Icon
+              v-else
+              :src="starLine"
+              width="25px"
+              height="25px"
+            />
+          </div>
+        </div>
+      </div>
+      <div :style="{ marginTop: 10 + 'px', marginBottom: 10 + 'px' }">
+        {{
+          hoverValue === -1
+            ? value === -1
+              ? "如果满意请给好评哦～"
+              : desc[value]
+            : desc[hoverValue]
+        }}
+      </div>
+      <button
+        class="submit-button"
+        :disabled="hasReply || hasExpire"
+        @click="submitRatingStar"
+      >
+        提交评价
+      </button>
+    </div>
+    <p
+      v-if="hasReply"
+      class="rating-tail"
+      :style="{
+        marginTop: 20 + 'px',
+      }"
+    >
+      {{ props.ratingTemplate.tail }}
+    </p>
+  </div>
+</template>
+
+<script lang="ts">
+import vue from '../../adapter-vue';
+import { CUSTOM_MESSAGE_SRC } from '../../constant';
+import { ratingTemplateType } from '../../interface';
+import star from '../../assets/star.png';
+import starLine from '../../assets/starLine.png';
+import Icon from '../customer-icon.vue';
+const { computed, ref, watchEffect } = vue;
+
+interface Props {
+  ratingTemplate: ratingTemplateType;
+}
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    ratingTemplate: {
+      type: Object as () => ratingTemplateType,
+      default: () => ({}),
+    },
+  },
+  emits: ['sendMessage'],
+  setup(props: Props, { emit }) {
+    const hasReply = ref<boolean>(false);
+    const sessionId = ref<string>('');
+    const value = ref<number>(-1);
+    const hoverValue = ref<number>(-1);
+    const hasExpire = ref<boolean>(false);
+
+    watchEffect(() => {
+      sessionId.value = props.ratingTemplate.sessionId || '';
+      if (props.ratingTemplate.selected != undefined) {
+        for (let i = 0; i < props.ratingTemplate.menu.length; i++) {
+          if (props.ratingTemplate.menu[i].id == props.ratingTemplate.selected.id) {
+            hasReply.value = true;
+            value.value = i;
+            break;
+          }
+        }
+      }
+      const timestamp = Math.floor(new Date().getTime() / 1000);
+      if (timestamp > props.ratingTemplate.expireTime) {
+        hasExpire.value = true;
+      }
+    });
+
+    const desc = computed(() => {
+      return props.ratingTemplate?.menu.map((item) => {
+        return item.content;
+      });
+    });
+
+    const starList = computed(() => {
+      return props.ratingTemplate?.menu.map((item, index) => {
+        if (hoverValue.value !== -1) {
+          return index <= hoverValue.value ? 1 : 0;
+        } else {
+          return index <= value.value ? 1 : 0;
+        }
+      });
+    });
+
+    const setValue = (val: number) => {
+      if (hasReply.value) {
+        return;
+      }
+      value.value = val;
+    };
+
+    const setHoverValue = (value: number) => {
+      if (hasReply.value) {
+        return;
+      }
+      hoverValue.value = value;
+    };
+
+    const submitRatingStar = async () => {
+      if (value.value < 0) {
+        return;
+      }
+      const submitData = {
+        data: JSON.stringify({
+          src: CUSTOM_MESSAGE_SRC.MENU_SELECTED,
+          menuSelected: {
+            id: props.ratingTemplate.menu[value.value].id,
+            content: props.ratingTemplate.menu[value.value].content,
+            sessionId: sessionId.value,
+          },
+          customerServicePlugin: 0,
+        }),
+      };
+      hasReply.value = true;
+      emit('sendMessage', submitData);
+    };
+    return {
+      props,
+      hasReply,
+      sessionId,
+      value,
+      hoverValue,
+      hasExpire,
+      desc,
+      starList,
+      setValue,
+      setHoverValue,
+      submitRatingStar,
+      star,
+      starLine,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.rating-head {
+  font-size: 14px;
+  font-weight: 400;
+  color: #999;
+}
+
+.rating-tail {
+  font-size: 14px;
+  font-weight: 400;
+  color: #999;
+}
+
+.card-title {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.rating-card {
+  min-width: 250px;
+  width: 50%;
+  background: #fbfbfb;
+  border-radius: 20px;
+  border: 0;
+  margin-top: 10px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+
+  button:disabled {
+    background: #d8d8d8;
+  }
+}
+
+.message-rating-star {
+  text-align: center;
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: center;
+
+  align-items: center;
+}
+
+.card-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding-top: 10px;
+}
+
+.submit-button {
+  width: 40%;
+    height: 35px;
+    background-color: #0365f9;
+    font-size: 14px;
+    font-weight: 400;
+    color: white;
+    border: 0;
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+</style>