@tencentcloud/ai-desk-customer-vue 0.1.0

package/components/message-multi-branch/index.vue

@@ -0,0 +1,60 @@
+<template>
+      <div class="message-form">
+        <branchPc
+          :payload ="payload"
+          @input-click="handleContentListItemClick"
+        />
+
+      </div>
+  </template>
+  
+  <script lang="ts">
+  import vue from '../../adapter-vue';
+  import BranchPc from './branch-pc.vue';
+  import { customerServicePayloadType } from '../../interface';
+  import { isApp, isPC } from '../../utils/env';
+  const { computed} = vue;
+  
+  interface branchItem {
+    content: string;
+    desc: string;
+  }
+  
+  interface Props {
+    payload: customerServicePayloadType;
+  }
+  
+  export default {
+    components: {
+        BranchPc
+    },
+    props: {
+      payload: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
+    emits: ['sendMessage'],
+    setup(props: Props, { emit }) {
+    const payload = computed<customerServicePayloadType>(() => {
+      return props.payload;
+    });
+      const handleContentListItemClick = (branch: branchItem) => {
+        emit('sendMessage', { text: branch.content });
+      };
+  
+      const handleFormSaveInputSubmit = (text: string) => {
+        emit('sendMessage', { text });
+      };
+      return {
+        payload,
+        handleContentListItemClick,
+        handleFormSaveInputSubmit,
+      };
+    },
+  };
+  </script>
+  <style lang="scss">
+
+  </style>
+  

package/components/message-multi-form/component-mobile/form-popup.vue

@@ -0,0 +1,37 @@
+<template>
+  <BottomPopup
+    class="form-item-bottom-popup"
+    :show="props.show"
+    :title="props.title"
+    borderRadius="20px"
+    @onClose="onClose"
+    @onSubmit="onSubmit"
+  >
+    <slot></slot>
+  </BottomPopup>
+  </template>
+  <script setup lang="ts">
+  import vue from "../../../adapter-vue";
+  const { withDefaults, defineProps, defineEmits } = vue;
+  import { TUITranslateService } from "@tencentcloud/chat-uikit-engine";
+  import BottomPopup from "../../common/BottomPopup";
+  const props = withDefaults(
+    defineProps<{
+      show: boolean;
+      title: string;
+    }>(),
+    {
+      show: false,
+      title: "",
+    }
+  );
+  const emits = defineEmits(["onClose", "onSubmit"]);
+  function onClose() {
+    emits("onClose");
+  }
+  function onSubmit() {
+    emits("onSubmit");
+  }
+  </script>
+  <style scoped lang="scss"></style>
+  

package/components/message-multi-form/component-mobile/input-mobile.vue

@@ -0,0 +1,102 @@
+<template>
+    <div class="form-input-box-mobile">
+        <LabelMobile :name="name" :is-required="isRequired" />
+      <div class="form-input-line">
+        <input
+            class="form-input-mobile"
+          v-model="text"
+          :placeholder="placeholder"
+          @input="onInputChanged"
+        >
+        <div v-if="validator" class="validator-line">
+            请填写必填项
+        </div>
+      </div>
+      
+    </div>
+</template>
+<script lang="ts">
+import vue from '../../../adapter-vue';
+import LabelMobile from './label-mobile.vue';
+const { computed, ref} = vue;
+
+interface FormItem{
+    name:string;
+    value:string;
+}
+
+
+export default {
+    components:{
+        LabelMobile
+    },
+    props:{
+        placeholder:{
+            type:String,
+            default:''
+        },
+        variableValue:{
+            type:String,
+            default:''
+        },
+        name:{
+            type:String,
+            default:'',
+        },
+        isRequired:{
+            type:Number,
+            default:0,
+        },
+        nodeStatus:{
+            type:Number,
+            default:0
+        },
+        validator:{
+            type:Boolean,
+            default:false
+        }
+    },
+    emits:['input-change'],
+    setup(props, {emit}){
+        const text = ref<string>('');
+        if(props.variableValue.length!=0){
+            text.value = props.variableValue;
+        }
+        const onInputChanged = ():void => {
+            emit('input-change',{name:props.name,value:text.value});
+        };
+        return {
+            text,
+            onInputChanged,
+            props
+        }
+    }
+}
+</script>
+<style lang="scss">
+.form-input-box-mobile{
+    display:flex;
+    flex-direction: row;
+    align-items: center;
+    margin:0 16px;
+    border-bottom:1px solid #e7e7e7;
+    padding-top:5px;
+}
+.form-input-line {
+    display:flex;
+    margin-bottom: 10px;
+    flex:1;
+    flex-direction: column;
+    
+}
+.form-input-mobile {
+    border-color:transparent;
+    padding:5px 8px;
+    font-size:14px;
+}
+.validator-line {
+    font-size: 12px;
+    color:#e54545;
+    margin-top: 3px;
+}
+</style>

package/components/message-multi-form/component-mobile/label-mobile.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="form-label">
+        {{ name }}
+        <div v-if="isRequired" style="color: red;">
+            &nbsp;*
+        </div>
+    </div>
+</template>
+<script lang="ts">
+    export default {
+        props:{
+            name:{
+                type:String,
+                default:''
+            },
+            isRequired:{
+                type:Number,
+                default:0
+            }
+        },
+        setup(props){
+            
+        }
+    }
+</script>
+<style lang="scss">
+.form-label {
+    display:flex;
+    width:70px;
+    padding-bottom: 8px;
+}
+</style>

package/components/message-multi-form/component-mobile/radios-mobile.vue

@@ -0,0 +1,161 @@
+<template>
+    <div class="label-container">
+        <div>
+            <Label :name="name" :is-required="isRequired"/>
+        </div>
+        <div class="radio-container">
+            <div v-if="validator" class="validator-line">
+                请填写必填项
+            </div>
+                <div class="form-radio-box-mobile" v-for="(item,index) in chooseItemList" :key="index">
+                    <div class="radio-container-uni" @click="clickItem(index)">
+                        <div class="radio-icon-uni">
+                            <div v-if="isUniFrameWork">
+                                <image :src="changeSelectedIcon(item)" alt="" style="width: 20px; height: 20px; vertical-align: middle;"/>
+                            </div>
+                            <div v-else>
+                                <img :src="changeSelectedIcon(item)" alt="" style="width: 20px; height: 20px; vertical-align: middle;"/>
+                            </div>
+                        </div>
+                        <div class="radio-label-uni">
+                            {{ item }}
+                        </div>
+                    </div>
+                </div>
+        </div>
+        
+    </div>
+</template>
+<script lang="ts">
+import Label from './label-mobile.vue';
+import vue from '../../../adapter-vue';
+import Icon from '../../customer-icon.vue';
+import radioUncheckIcon from '../../../assets/radio-uncheck.png';
+import radioCheckIcon from '../../../assets/radio-check.png';
+import { isPC, isH5,isWeChat, isUniFrameWork } from '../../../utils/env';
+const {  ref} = vue;
+export default {
+    components:{
+        Label,
+        Icon
+    },
+    props:{
+        chooseItemList:{
+            type:Array,
+            default:[]
+        },
+        name:{
+            type:String,
+            default:'',
+        },
+        isRequired:{
+            type:Number,
+            default:0,
+        },
+        validator:{
+            type:Boolean,
+            default:false
+        }
+    },
+    emits:['input-change'],
+    setup(props,{emit}){
+        const selectedOption = ref<string>('');
+        const checkedIcon = ref<string>('');
+        const changeSelectedIcon = (name:any) => {
+            if(selectedOption.value === name)
+                return radioCheckIcon;
+            else
+                return radioUncheckIcon;
+        }
+        
+        const clickItem=(index:number) => {
+            selectedOption.value = props.chooseItemList[index];
+            emit('input-change',{name:props.name,value:selectedOption.value});
+        }
+
+        const onInputChanged = ():void => {
+            emit('input-change',{name:props.name,value:selectedOption.value});
+        };
+        return {
+            onInputChanged,
+            selectedOption,
+            clickItem,
+            isUniFrameWork,
+            radioUncheckIcon,
+            radioCheckIcon,
+            changeSelectedIcon,
+            checkedIcon
+        }
+    }
+}
+</script>
+<style lang="scss">
+.label-container{
+    display:flex;
+    padding:0 16px;
+}
+.radio-container {
+    display:flex;
+    flex-direction: column;
+    margin-left:16px;
+    
+    width:100%;
+}
+
+.form-radio-box-mobile{
+    margin-bottom: 5px;
+    padding:10px 0;
+    border-bottom: 1px solid #e7e7e7;
+}
+
+input[type="radio"] {
+    display: none;
+    +label { 
+      position: relative; 
+      cursor: pointer; 
+      &::before { 
+        content: ""; 
+        position: absolute; 
+        left: -24px; 
+        top: 0px;
+        border-radius: 50%;
+        // border: 1px solid #6f686a;
+        width: 20px; 
+        height: 20px;
+        background-image: url('../../../assets/radio-uncheck.png');
+        background-size: cover;
+        background-position: center;
+    } 
+    &::after {
+      content: "";
+      position: absolute;
+      left: -24px;
+      top: 0px;
+      border-radius: 50%;
+      width: 20px;
+      height: 20px;
+      }
+  } 
+  &:checked {
+    + label::after {
+      background-image: url('../../../assets/radio-check.png');
+      background-size: cover;
+    }
+  }
+}
+
+.radio-container-uni{
+    display:flex;
+    flex-direction: row;
+    width: 100%;
+    align-items: center;
+    .radio-icon-uni {
+        margin-right:5px;
+    }
+}
+.validator-line {
+    font-size: 12px;
+    color:#e54545;
+    margin-top: 3px;
+}
+</style>

package/components/message-multi-form/component-pc/input-pc.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="form-input-box">
+      <div class="form-input-line">
+        <input
+          v-model="text"
+          :class="['form-input',validator? 'form-input-validate':'']"
+          :placeholder="placeholder"
+          @change="onInputChanged"
+        >
+        <div v-if="validator" class="validator-line">
+        请填写必填项
+      </div>
+      </div>
+      
+    </div>
+</template>
+<script lang="ts">
+import vue from '../../../adapter-vue';
+const { computed, ref} = vue;
+
+interface FormItem{
+    name:string;
+    value:string;
+}
+
+
+export default {
+    props:{
+        placeholder:{
+            type:String,
+            default:''
+        },
+        variableValue:{
+            type:String,
+            default:''
+        },
+        name:{
+            type:String,
+            default:'',
+        },
+        isRequired:{
+            type:Number,
+            default:0,
+        },
+        nodeStatus:{
+            type:Number,
+            default:0
+        },
+        validator:{
+            type:Boolean,
+            default:false
+        }
+    },
+    emits:['input-change'],
+    setup(props, {emit}){
+        const text = ref<string>('');
+        if(props.variableValue.length!=0){
+            text.value = props.variableValue;
+        }
+        const onInputChanged = ():void => {
+            emit('input-change',{name:props.name,value:text.value});
+        };
+        return {
+            text,
+            onInputChanged
+        }
+    }
+}
+</script>
+<style lang="scss">
+
+.form-input-line {
+    display:flex;
+    margin-bottom: 10px;
+    flex-direction: column;
+}
+.form-input {
+    flex:1;
+    height: 27px;
+    border-radius: 5px;
+    border-color: transparent;
+    width:300px;
+    padding:5px 8px;
+}
+.form-input-validate {
+    border:1px solid #e54545;
+}
+.validator-line {
+    font-size: 12px;
+    color:#e54545;
+    margin-top: 3px;
+}
+</style>

package/components/message-multi-form/component-pc/label-pc.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="form-label">
+        <div v-if="isRequired" style="color: red;">
+            *&nbsp;
+        </div>
+        {{ name }}
+        
+    </div>
+</template>
+<script lang="ts">
+    export default {
+        props:{
+            name:{
+                type:String,
+                default:''
+            },
+            isRequired:{
+                type:Number,
+                default:0
+            }
+        },
+        setup(props){
+            
+        }
+    }
+</script>
+<style lang="scss">
+.form-label {
+    display:flex;
+    padding-bottom: 8px;
+    margin-top:12px;
+}
+</style>

package/components/message-multi-form/component-pc/radio-pc.vue

@@ -0,0 +1,98 @@
+<template>
+    <div>
+        <div class="radio-container-pc">
+            <div v-if="validator" class="validator-line">
+                请填写必填项
+            </div>
+                <div class="form-radio-box-pc" v-for="(item,index) in chooseItemList" :key="index">
+                    <div class="radio-container-pc-icon" @click="clickItem(index)">
+                        <div class="radio-icon">
+                                <img :src="changeSelectedIcon(item)" alt="" style="width: 20px; height: 20px; vertical-align: middle;"/>
+                        </div>
+                        <div class="radio-label">
+                            {{ item }}
+                        </div>
+                    </div>
+                </div>
+        </div>
+        
+    </div>
+</template>
+<script lang="ts">
+import vue from '../../../adapter-vue';
+import Icon from '../../customer-icon.vue';
+import radioUncheckIcon from '../../../assets/radio-uncheck.png';
+import radioCheckIcon from '../../../assets/radio-check.png';
+const {  ref} = vue;
+export default {
+    props:{
+        chooseItemList:{
+            type:Array,
+            default:[]
+        },
+        name:{
+            type:String,
+            default:'',
+        },
+        isRequired:{
+            type:Number,
+            default:0,
+        },
+        validator:{
+            type:Boolean,
+            default:false
+        }
+    },
+    emits:['input-change'],
+    setup(props,{emit}){
+        const selectedOption = ref<string>('');
+        const checkedIcon = ref<string>('');
+        const changeSelectedIcon = (name:any) => {
+            if(selectedOption.value === name)
+                return radioCheckIcon;
+            else
+                return radioUncheckIcon;
+        }
+        
+        const clickItem=(index:number) => {
+            selectedOption.value = props.chooseItemList[index];
+            emit('input-change',{name:props.name,value:selectedOption.value});
+        }
+
+        const onInputChanged = ():void => {
+            emit('input-change',{name:props.name,value:selectedOption.value});
+        };
+        return {
+            onInputChanged,
+            selectedOption,
+            clickItem,
+            radioUncheckIcon,
+            radioCheckIcon,
+            changeSelectedIcon,
+            checkedIcon
+        }
+    }
+}
+</script>
+<style lang="scss">
+.form-radio-box{
+    margin-bottom: 5px;
+}
+.radio-container-pc {
+    display:flex;
+    flex-direction: column;
+    width:100%;
+}
+.form-radio-box-pc{
+    padding: 5px 0;
+}
+.radio-container-pc-icon{
+    display:flex;
+    flex-direction: row;
+    width: 100%;
+    align-items: center;
+    .radio-icon {
+        margin-right:5px;
+    }
+}
+</style>