西海岸：应用详情：增加 审批通过可以查看马赛克内容 逻辑

front/src/views/detailsAll/components/Application/ApplicationAbilityTrial.vue

@@ -13,7 +13,11 @@
         <p>{{ dataFrom.linkName }}</p>
         <a-tooltip>
           <template #title>请申请后查看</template>
-          <p style="cursor: pointer; filter: blur(4px)">
+          <!-- <p style="cursor: pointer; filter: blur(4px)">
+            {{ dataFrom.link }}
+          </p> -->
+          <p style="cursor: pointer;"
+            :class="{ 'blur-word': approveStatus == '通过' && whoShow1.itShowXiHaiAn ? false : true}">
             {{ dataFrom.link }}
           </p>
         </a-tooltip>
@@ -22,12 +26,11 @@
         <p>{{ dataFrom.numberName }}</p>
         <a-tooltip>
           <template #title>请申请后查看</template>
-          <p style="filter: blur(4px)">{{ dataFrom.number }}</p>
+          <!-- <p style="filter: blur(4px)">{{ dataFrom.number }}</p> -->
+          <p :class="{ 'blur-word': approveStatus == '通过' && whoShow1.itShowXiHaiAn ? false : true}">{{ dataFrom.number
+          }}</p>
         </a-tooltip>
-        <div
+        <div @click="copyFunction(dataFrom.number, '复制账号')" v-if="dataFrom.number != '' && flag">
-          @click="copyFunction(dataFrom.number, '复制账号')"
-          v-if="dataFrom.number != '' && flag"
-        >
           复制账号
         </div>
         <!-- <div v-else id="zanwu">暂无</div> -->
@@ -37,11 +40,9 @@
         <a-tooltip>
           <template #title>请申请后查看</template>
           <p style="filter: blur(4px)">{{ dataFrom.password }}</p>
+          <p style="filter: blur(4px)" :class="{ 'blur-word': approveStatus == '通过' && whoShow1.itShowXiHaiAn ? false : true}">{{ dataFrom.password }}</p>
         </a-tooltip>
-        <div
+        <div @click="copyFunction(dataFrom.password2, '复制密码')" v-if="dataFrom.password2 != '' && flag">
-          @click="copyFunction(dataFrom.password2, '复制密码')"
-          v-if="dataFrom.password2 != '' && flag"
-        >
           复制密码
         </div>
         <!-- <div v-else id="zanwu">暂无</div> -->
@@ -50,16 +51,16 @@
   </div>
 </template>
 <script setup>
-  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
-  import { ref, defineProps, watch } from 'vue'
+import { ref, defineProps, watch } from 'vue'
-  import { message } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
-  let flag = ref(true)
+let flag = ref(true)
-  const whoShow1 = ref(whoShow)
+const whoShow1 = ref(whoShow)
-  console.log('whoShow1', whoShow1.value.itShowQingDao)
+console.log('whoShow1', whoShow1.value.itShowQingDao)
-  const props = defineProps({
+const props = defineProps({
   dataList: { type: Object, default: null },
-  })
+})
-  const dataFrom = ref({
+const dataFrom = ref({
   linkName: '访问地址',
   link: '',
   numberName: '试用账号',
@@ -67,9 +68,13 @@
   passwordName: '试用密码',
   password: '**************************',
   password2: '',
-  })
+})
-  if (props.dataList.infoList) {
+console.log('props.dataList------------>', props.dataList);
-    let obj = props.dataList.approveStatus
+const approveStatus = ref('')
+
+if (props.dataList.infoList) {
+  let obj = props.dataList.approveStatus;
+  approveStatus.value = props.dataList.approveStatus
   if (obj !== '通过' && whoShow1.value.itShowQingDao) {
     flag.value = false
   }
@@ -85,12 +90,12 @@
     dataFrom.value.password = ''
   }
   // }
-  }
+}
-  const clickLink = (link) => {
+const clickLink = (link) => {
   window.open(link)
-  }
+}
-  //复制方法
+//复制方法
-  const copyFunction = (data, name) => {
+const copyFunction = (data, name) => {
   if (data !== '') {
     let url = data
     let oInput = document.createElement('input')
@@ -104,22 +109,23 @@
   } else {
     message.error('复制为空')
   }
-  }
+}
-  message.config({
+message.config({
   top: '100px', // 距离顶部的位置
-  })
+})
-  // const success = () => {
+// const success = () => {
-  //   message.success({
+//   message.success({
-  //     // content: 'This is a prompt message with custom className and style',
+//     // content: 'This is a prompt message with custom className and style',
-  //     className: 'custom-class',
+//     className: 'custom-class',
-  //     style: {},
+//     style: {},
-  //   })
+//   })
-  // }
+// }
-  watch(
+watch(
   () => props.dataList,
   (val) => {
     if (val) {
       let obj = props.dataList.approveStatus
+      approveStatus.value = props.dataList.approveStatus
       if (obj !== '通过' && whoShow1.value.itShowQingDao) {
         flag.value = false
       }
@@ -136,14 +142,15 @@
       }
     }
   }
-  )
+)
 </script>
 <style lang="less" scoped>
-  .algorithm-on-trial {
+.algorithm-on-trial {
   padding: 0.8rem 0px 0.8rem;
   display: flex;
   flex-direction: column;
   align-items: center;
+
   .main {
     margin-top: 0.3rem;
     width: 13rem;
@@ -152,11 +159,13 @@
     display: grid;
     grid-template-columns: 33.33% 33.33% 33.33%;
     align-items: center;
+
     .main-left {
       border-right: 0.01rem #ffffff solid;
       padding-left: 0.7rem;
       padding-right: 1rem;
-        & > p {
+
+      &>p {
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
@@ -165,29 +174,35 @@
         -webkit-box-orient: vertical;
       }
     }
+
     .main-center {
       padding-left: 1rem;
       padding-right: 1rem;
     }
+
     .main-right {
       padding-right: 0.7rem;
     }
-      & > div > p:first-child {
+
+    &>div>p:first-child {
       font-size: 0.26rem;
       color: #ffffff;
       font-weight: bold;
     }
-      & > div > p:nth-child(2) {
+
+    &>div>p:nth-child(2) {
       font-size: 0.22rem;
       color: #ffffff;
       line-height: 0.34rem;
     }
-      & > div:first-child > p:last-child {
+
+    &>div:first-child>p:last-child {
       text-decoration: underline;
       word-wrap: break-word;
       word-break: normal;
     }
-      & > div > div:last-child {
+
+    &>div>div:last-child {
       height: 0.34rem;
       width: 1.1rem;
       border: 0.01rem solid #ffffff;
@@ -199,6 +214,7 @@
       line-height: 0.34rem;
     }
   }
+
   #zanwu {
     height: 0.34rem;
     width: 1.1rem;
@@ -206,10 +222,14 @@
     color: #ffffff;
     border: 0;
   }
-  }
+}
+
+.blur-word {
+  filter: blur(4px);
+}
 </style>
 <style>
-  .custom-class {
+.custom-class {
   /* top: 100px; */
-  }
+}
 </style>