Przeglądaj źródła

新增添加客户经理弹窗

chenlei 2 miesięcy temu
rodzic
commit
d683e153df

BIN
src/assets/imgs/contact-person-bg.png


BIN
src/assets/imgs/contact-person.png


+ 45 - 0
src/components/ShowQrcode.vue

@@ -0,0 +1,45 @@
+<script setup>
+const props = defineProps({
+    show:{ // 是否打开弹窗
+    type:Boolean,
+    default:false,
+  },
+})
+
+const emits=defineEmits(['update:show'])
+
+function onConfirm() {
+    emits('update:show',false)
+}
+</script>
+
+<template>
+    <t-dialog
+      :visible="props.show"
+      title="扫一扫 添加专属客户经理"
+      confirm-btn="知道了"
+      :close-on-overlay-click="false"
+      @confirm="onConfirm"
+    >
+      <template #middle>
+        <div class="image-box">
+          <image class="image" :show-menu-by-longpress="true" detect="true" mode="scaleToFill" lazy-load src="@/assets/imgs/contact-person.png"></image>
+        </div>
+      </template>
+    </t-dialog>
+</template>
+
+<style lang="scss" scoped>
+.image-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .image {
+    margin-top: 45px;
+    width: 400px;
+    height: 400px;
+  }
+}
+</style>

+ 20 - 0
src/views/report/Detail.vue

@@ -41,6 +41,7 @@ const layoutBaseInfo = ref({
   '研报作者': '',
   '创建时间': ''
 })
+const isShowDialog = ref(false) // 控制弹窗显示
 
 // 报告内容分页
 const pageSize = 20
@@ -255,6 +256,13 @@ function goDetails(item){
     url:'/pages-user/authordetail/index?id='+item.id
   })
 }
+
+/**
+ * 打开联系人二维码
+ */
+function openContactPerson() {
+  isShowDialog.value = true
+}
 </script>
 
 <template>
@@ -338,6 +346,9 @@ function goDetails(item){
         <span class="time">{{ reportInfo.publishTime }}&nbsp;{{riskLevelInfo}}</span>
         <!-- <span class="btn" @click="isShowMZSM = true">免责声明</span> -->
       </div>
+      <div class="contact-person-box" @click="openContactPerson">
+        <img class="image" src="@/assets/imgs/contact-person-bg.png"></img>
+      </div>
     </template>
 
     <div class="des-box" v-if="reportInfo.abstract">
@@ -505,6 +516,8 @@ function goDetails(item){
       </div>
     </div>
   </t-popup>
+  <!-- 二维码展示弹窗 -->
+  <show-qrcode v-model:show="isShowDialog"></show-qrcode>
 </template>
 
 <style lang="scss" scoped>
@@ -574,6 +587,13 @@ function goDetails(item){
       color: var(--primary-color);
     }
   }
+  .contact-person-box {
+    margin-top: 20px;
+    .image {
+      width: 100%;
+      height: 100px;
+    }
+  }
   .des-box {
     background-color: #f8f8f8;
     padding: 20px;

+ 20 - 0
src/views/report/PDF.vue

@@ -33,6 +33,7 @@ const authorInfoList=ref([])
 const visible = ref(false);
 const subscribeStatus = ref('')//expired --过期 unSubscribe--未订阅 subscribed--订阅中
 const riskLevelStatus=ref('')//expired过期的 unTest未测评 unMatch风险等级不匹配
+const isShowDialog = ref(false) // 控制弹窗显示
 async function getReportInfo() {
   //获取研报详情
   if (!reportId || !productId) return
@@ -183,6 +184,13 @@ function goDetails(item){
     url:'/pages-user/authordetail/index?id='+item.id
   })
 }
+
+/**
+ * 打开联系人二维码
+ */
+ function openContactPerson() {
+  isShowDialog.value = true
+}
 </script>
 
 <template>
@@ -225,6 +233,9 @@ function goDetails(item){
         <span class="time">{{dayjs(reportInfo.publishedTime).format("YYYY-MM-DD HH:mm:ss")}}&nbsp;{{reportInfo.riskLevel}}</span>
         <!-- <span class="btn" @click="isShowMZSM = true">免责声明</span> -->
       </div>
+      <div class="contact-person-box" @click="openContactPerson">
+        <img class="image" src="@/assets/imgs/contact-person-bg.png"></img>
+      </div>
     </div>
     <div class="des-box" v-if="reportInfo.abstract">
       <svg-icon name="icon01"></svg-icon>
@@ -334,6 +345,8 @@ function goDetails(item){
       </div>
     </div>
   </t-popup>
+  <!-- 二维码展示弹窗 -->
+  <show-qrcode v-model:show="isShowDialog"></show-qrcode>
 </template>
 
 <style scoped lang="scss">
@@ -406,6 +419,13 @@ function goDetails(item){
       color: var(--primary-color);
     }
   }
+  .contact-person-box {
+    margin-top: 20px;
+    .image {
+      width: 100%;
+      height: 100px;
+    }
+  }
   .des-box {
     background-color: #f8f8f8;
     padding: 20px;