业务组件功能完善

front/src/views/detailsAll/components/Business/BusinessApplicationCase.vue

@@ -215,6 +215,7 @@
           flex-direction: column;
           align-items: center;
           margin-right: 1rem;
+          text-align: center;
           .tab-top {
             min-width: 1.2rem;
             font-size: 0.24rem;

front/src/views/detailsAll/components/Business/BusinessApplicationScenarios.vue

@@ -145,6 +145,7 @@
           display: flex;
           flex-direction: column;
           align-items: center;
+          text-align: center;
           margin-right: 1rem;
           .tab-top {
             min-width: 1.2rem;

front/src/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue

@@ -146,6 +146,7 @@
           flex-direction: column;
           align-items: center;
           margin-right: 1rem;
+          text-align: center;
           .tab-top {
             min-width: 1.2rem;
             font-size: 0.24rem;

front/src/views/detailsAll/components/Business/BusinessNavigation.vue

@@ -121,7 +121,7 @@
         // 排序
         // eslint-disable-next-line vue/no-mutating-props
         props.dataList.infoList.sort((a, b) => {
-          console.log('排序==============>', a, b)
+          // console.log('排序==============>', a, b)
           return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
         })
         val.infoList.map((item) => {

front/src/views/detailsAll/components/Business/BusinessPresentation.vue

@@ -3,15 +3,17 @@
  * @Date: 2022-06-08 15:25:33
  * @LastEditors: hisense.liangjunhua
  * @LastEditTime: 2022-06-14 11:30:52
- * @Description: 组件展示  视频播放
+ * @Description: 应用展示  视频播放
 -->
 <template>
-  <div class="business-presentation" v-if="flag">
+  <div class="application-presentation" v-if="flag">
     <detals-title title="组件展示" type="IMAGE&VIDEO"></detals-title>
-    <div class="main">
+    <div
-      <img :src="leftImg" />
+      class="main"
+      :style="`${img}background-position:center;background-size:cover;`"
+    >
+      <!-- <a-image :src="img"></a-image> -->
       <div class="play" @click="showModal"></div>
-      <img :src="rightImg" />
     </div>
     <a-modal
       v-model:visible="visible"
@@ -31,8 +33,6 @@
 <script setup>
   import { ref, reactive, defineProps, watch } from 'vue'
   import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
-  const leftImg = require('@/assets/detailsAll/business/business_previous.png')
-  const rightImg = require('@/assets/detailsAll/business/business_next.png')
   const visible = ref(false)
   const options = reactive({
     width: '7.00rem', //播放器宽度
@@ -67,6 +67,7 @@
     dataList: { type: Object, default: null },
   })
   const flag = ref(true)
+  const img = ref({})
   console.log('111111111111111111111,', props.dataList)
   if (props.dataList.infoList) {
     let obj = props.dataList.infoList.filter(
@@ -76,7 +77,13 @@
     if (!obj) {
       flag.value = false
     } else {
+      let imgindex = props.dataList.infoList.filter(
+        (item) => item.attrType === '组件图片'
+      )[0]
       options.src = obj.attrValue
+      if (imgindex) {
+        img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
+      }
     }
   }
   watch(
@@ -90,29 +97,31 @@
         if (!obj) {
           flag.value = false
         } else {
+          let imgindex = props.dataList.infoList.filter(
+            (item) => item.attrType === '组件图片'
+          )[0]
           options.src = obj.attrValue
+          if (imgindex) {
+            img.value =
+              'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
+          }
         }
       }
     }
   )
 </script>
 <style lang="less" scoped>
-  .business-presentation {
+  .application-presentation {
-    padding: 0.8rem 3rem 0.8rem;
+    padding: 0.8rem 3rem 0;
-    background: url('~@/assets/detailsAll/business/business_module_bg.png')
-      no-repeat;
-    background-size: 100% 100%;
     .main {
       height: 3.4rem;
       border-radius: 0.1rem;
-      background: url('~@/assets/detailsAll/business/business_element_content.png')
+      background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
-        no-repeat center;
+      background-size: 100%;
-      background-size: 50% 100%;
       margin-top: 0.4rem;
       display: flex;
       justify-content: center;
       align-items: center;
-      position: relative;
       .play {
         width: 0.96rem;
         height: 0.96rem;
@@ -120,18 +129,6 @@
         background-size: 100%;
         cursor: pointer;
       }
-      img {
-        position: absolute;
-        top: 1.3rem;
-        left: 0.4rem;
-        cursor: pointer;
-      }
-      img:last-of-type {
-        position: absolute;
-        top: 1.3rem;
-        left: unset;
-        right: 0.4rem;
-      }
     }
   }
 </style>

front/src/views/detailsAll/components/Business/BusinessUsageMode.vue

@@ -12,22 +12,17 @@
         <div class="left">
           <div class="content-left-title">
             <span>{{ item.title }}</span>
-            <span>{{ item.titleSon }}</span>
           </div>
           <div class="content-left-content">
             <p>
               <span>{{ item.link.name }}</span>
-              <span>{{ item.link.value }}</span>
+              <span>{{ item.linkValue }}</span>
-            </p>
-            <p>
-              <span>{{ item.postMethod.name }}</span>
-              <span>{{ item.postMethod.value }}</span>
             </p>
           </div>
         </div>
         <div class="right">
           <div @click="technical()">技术文档</div>
-          <div>新手指引</div>
+          <div @click="technicalNew()">新手指引</div>
         </div>
       </div>
       <div class="content-right">
@@ -51,20 +46,20 @@
           </div>
         </div>
         <div class="content-right-right">
-          <div class="content-right-title">{{ item.contact }}</div>
+          <div class="content-right-title">{{ item.contact2 }}</div>
           <div class="content-right-content">
             <p>
-              <span>{{ item.people.name }}</span>
+              <span>{{ item.people2.name }}</span>
               <a-tooltip>
-                <template #title>{{ item.people.value }}</template>
+                <template #title>{{ item.people2.value }}</template>
-                <span>{{ item.people.value }}</span>
+                <span>{{ item.people2.value }}</span>
               </a-tooltip>
             </p>
             <p>
-              <span>{{ item.phone.name }}</span>
+              <span>{{ item.phone2.name }}</span>
               <a-tooltip>
-                <template #title>{{ item.phone.value }}</template>
+                <template #title>{{ item.phone2.value }}</template>
-                <span>{{ item.phone.value }}</span>
+                <span>{{ item.phone2.value }}</span>
               </a-tooltip>
             </p>
           </div>
@@ -83,26 +78,27 @@
     englishTitle: 'USAGE',
     content: [
       {
-        title: '技术对接',
+        title: '组件地址',
-        titleSon: '调用接口',
         link: {
           name: '接口地址：',
-          value: 'http://localhost:9999/#/details?id=1532278256619307010',
         },
-        postMethod: {
+        linkValue: '',
-          name: '请求方式：',
+        contact: '归属部门',
-          value: 'POST',
+        facilitator: { name: '归属部门：', value: '讯飞科大' },
-        },
+        people: { name: '部门联系人：', value: '李四' },
-        contact: '联系厂商：',
-        facilitator: { name: '服务商：', value: '科大讯飞' },
-        people: { name: '联系人：', value: '李四' },
         phone: {
-          name: '联系电话：',
+          name: '联系人电话：',
           value: '12345678901',
         },
+        contact2: '服务商',
+        facilitator2: { name: '服务商：', value: '科大讯飞' },
+        people2: { name: '服务商联系人：', value: '李四' },
+        phone2: {
+          name: '联系人电话：',
+          value: '1234567890',
+        },
       },
     ],
-    link: '',
   })
   //数据初始化
   const props = defineProps({
@@ -118,20 +114,17 @@
     } else {
       // eslint-disable-next-line vue/no-setup-props-destructure
       dataFrom.value.content[0].link.value = props.dataList.apiUrl
-      // eslint-disable-next-line vue/no-setup-props-destructure
+      dataFrom.value.content[0].facilitator.value = props.dataList.deptContacts
-      dataFrom.value.content[0].postMethod.value = props.dataList.apiMethodType
       console.log('dataList', props.dataList)
       props.dataList.infoList.map((item) => {
-        if (item.attrType === '使用方式') {
+        if (item.attrType === '组件地址') {
-          dataFrom.value.content[0].titleSon = item.attrValue
+          dataFrom.value.content[0].linkValue = item.attrValue || '--'
         } else if (item.attrType === '服务商') {
           dataFrom.value.content[0].facilitator.value = item.attrValue || '--'
         } else if (item.attrType === '服务商联系人') {
           dataFrom.value.content[0].people.value = item.attrValue || '--'
         } else if (item.attrType === '服务商联系电话') {
           dataFrom.value.content[0].phone.value = item.attrValue || '--'
-        } else if (item.attrType === '技术文档') {
-          dataFrom.value.link = item.attrValue || '--'
         }
       })
     }
@@ -145,11 +138,11 @@
           flag.value = false
         } else {
           dataFrom.value.content[0].link.value = val.apiUrl
-          dataFrom.value.content[0].postMethod.value = val.apiMethodType
+          dataFrom.value.content[0].facilitator.value = val.deptContacts
           console.log('dataList', val)
           val.infoList.map((item) => {
-            if (item.attrType === '使用方式') {
+            if (item.attrType === '组件地址') {
-              dataFrom.value.content[0].titleSon = item.attrValue
+              dataFrom.value.content[0].linkValue = item.attrValue || '--'
             } else if (item.attrType === '服务商') {
               dataFrom.value.content[0].facilitator.value =
                 item.attrValue || '--'
@@ -157,8 +150,6 @@
               dataFrom.value.content[0].people.value = item.attrValue || '--'
             } else if (item.attrType === '服务商联系电话') {
               dataFrom.value.content[0].phone.value = item.attrValue || '--'
-            } else if (item.attrType === '技术文档') {
-              dataFrom.value.link = item.attrValue || '--'
             }
           })
         }
@@ -180,6 +171,21 @@
     //     btoa(encodeURI(dataFrom.value.link))
     // )
   }
+  function technicalNew() {
+    // 拼接路径
+    // const type = pinyin(props.dataList.type, {
+    //   pattern: 'initial',
+    // }).replace(/\s*/g, '')
+    // // 打开文档
+    // const id = props.dataList.id
+    // window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
+    console.log('dataFrom.value.link', dataFrom.value.link)
+    window.open(
+      window.SITE_CONFIG.previewUrl +
+        'hisense_office/onlinePreview?url=' +
+        btoa(encodeURI(dataFrom.value.link))
+    )
+  }
 </script>
 
 <style lang="less" scoped>