index.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <template>
  2. <van-dialog
  3. v-model:show="isShowContact"
  4. :show-confirm-button="false"
  5. class="contact-dialog"
  6. :show-cancel-button="false"
  7. >
  8. <!-- 联系方式 -->
  9. <div class="contact-content">
  10. <div class="title">联系我们</div>
  11. <div class="contact">
  12. <div class="code-box">
  13. <img :src="imgUrl + '&key=' + contantDetail.wechatQrCode" alt="" />
  14. <div class="title">客服微信二维码</div>
  15. </div>
  16. <div class="phone-box">
  17. <img :src="parseImgUrl('ipdImages', 'phone-icon.svg')" alt="" />
  18. <div class="title">{{ contantDetail.phone }}</div>
  19. <div class="concat-text">联系方式</div>
  20. </div>
  21. </div>
  22. <buttons class="dailog-btn" @click="closeDailog">我知道了</buttons>
  23. </div>
  24. </van-dialog>
  25. </template>
  26. <script lang="ts">
  27. import {
  28. defineComponent,
  29. reactive,
  30. toRefs,
  31. onBeforeMount,
  32. onMounted,
  33. ref,
  34. watch,
  35. getCurrentInstance,
  36. } from "vue";
  37. import { Loading, Dialog, Toast } from "vant";
  38. import { getUserInfo, parseImgUrl } from "@/utils";
  39. import { queryCustomerservice } from "@/apis/envmonitor";
  40. const userInfo: any = getUserInfo();
  41. export default defineComponent({
  42. props: {
  43. isShowContact: {
  44. type: Boolean,
  45. default: () => false,
  46. },
  47. contantDetail: {
  48. type: Object,
  49. default: () => {},
  50. },
  51. },
  52. components: {
  53. VanLoading: Loading,
  54. [Dialog.Component.name]: Dialog.Component,
  55. },
  56. setup(props, contx) {
  57. const contantDetail: any = {};
  58. const proxyGlobal: any = getCurrentInstance();
  59. const proxyData = reactive({
  60. parseImgUrl: parseImgUrl,
  61. contantDetail: props.contantDetail,
  62. userInfo: userInfo,
  63. imgUrl: proxyGlobal.proxy.$imgUrl,
  64. isShowContact: props.isShowContact,
  65. closeDailog() {
  66. contx.emit("closeDailog");
  67. },
  68. // 查询联系方式
  69. queryCustomerservice() {
  70. let params: any = {
  71. criteria: { projectId: proxyData.userInfo.projectId },
  72. };
  73. queryCustomerservice(params).then((res) => {
  74. let resData: any = res;
  75. let content: any = resData?.content ?? [];
  76. proxyData.contantDetail = content[0];
  77. });
  78. },
  79. });
  80. watch(
  81. props,
  82. (newProps: any) => {
  83. proxyData.isShowContact = newProps.isShowContact;
  84. proxyData.contantDetail = newProps.contantDetail;
  85. },
  86. {
  87. deep: false,
  88. immediate: true,
  89. }
  90. );
  91. onMounted(() => {
  92. // proxyData.queryCustomerservice();
  93. });
  94. return {
  95. ...toRefs(proxyData),
  96. };
  97. },
  98. });
  99. </script>
  100. <style lang="scss">
  101. .contact-dialog {
  102. width: 680px !important;
  103. height: 420px !important;
  104. background: #ffffff;
  105. border-radius: 32px;
  106. .van-dialog__content {
  107. width: 100%;
  108. height: 100%;
  109. }
  110. .contact-content {
  111. position: relative;
  112. width: 100%;
  113. height: 100%;
  114. .title {
  115. font-family: "PingFang SC";
  116. font-style: normal;
  117. font-weight: 500;
  118. font-size: 22px;
  119. line-height: 31px;
  120. text-align: center;
  121. padding: 30px;
  122. color: #000000;
  123. }
  124. .dailog-btn {
  125. position: absolute;
  126. bottom: 38px;
  127. width: 335px;
  128. left: 50%;
  129. transform: translateX(-50%);
  130. height: 50px;
  131. line-height: 50px;
  132. text-align: center;
  133. background: #ffffff;
  134. border: 1px solid #c3c7cb;
  135. border-radius: 25px;
  136. }
  137. }
  138. .contact {
  139. display: flex;
  140. height: 182px;
  141. .code-box {
  142. flex: 1;
  143. border-right: 1px solid #d9d9d9;
  144. text-align: center;
  145. color: #1f2429;
  146. img {
  147. width: 134px;
  148. height: 134px;
  149. // margin-bottom: 17px;
  150. }
  151. .title {
  152. color: #1f2429;
  153. font-family: "Noto Sans SC";
  154. font-style: normal;
  155. font-weight: 400;
  156. font-size: 14px;
  157. // line-height: 20px;
  158. text-align: center;
  159. }
  160. }
  161. .phone-box {
  162. flex: 1;
  163. text-align: center;
  164. .title {
  165. font-family: "Montserrat";
  166. font-style: normal;
  167. font-weight: 500;
  168. font-size: 24px;
  169. // line-height: 29px;
  170. margin-top: -15px;
  171. color: #af810c;
  172. }
  173. img {
  174. width: 100px;
  175. height: 100px;
  176. }
  177. .concat-text {
  178. margin-top: -10px;
  179. font-size: 14px;
  180. }
  181. }
  182. }
  183. }
  184. </style>