detail.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <template>
  2. <div class="detail">
  3. <div class="other" v-if="type === '5'">
  4. {{ '个人话术' }}<span>已使用:{{ form?.pv || 0 }}次</span>
  5. </div>
  6. <div class="time">{{ form?.addTime }}</div>
  7. <div class="title">{{ form?.title }}</div>
  8. <div class="text" v-if="type === '5'">
  9. {{ form?.content }}
  10. </div>
  11. <div class="content" v-if="type !== '5'">
  12. <div v-html="form?.content" v-if="type === '4'" />
  13. <div class="file-content" v-if="type === '3'">
  14. <van-image :src="getFileImg(form?.waters as string).img" />
  15. </div>
  16. <div class="img-content" v-if="type === '1'">
  17. <div class="item" v-for="(img, i) in form?.waters" :key="i">
  18. <van-image
  19. fit="contain"
  20. width="100%"
  21. height="100%"
  22. :src="img"
  23. @click.native="shopImagePreviews(i)"
  24. />
  25. </div>
  26. </div>
  27. <div class="video-tontent" v-if="type === '2'">
  28. <video
  29. id="myVideoRef"
  30. ref="myVideoRef"
  31. class="video-js vjs-default-skin"
  32. controls
  33. autoplay
  34. x5-video-player-fullscreen="true"
  35. x5-video-player-type="h5"
  36. controlslist="nodownload"
  37. >
  38. <source :src="(form?.waters as string)" />
  39. </video>
  40. </div>
  41. </div>
  42. <p class="foot-mark">随便看看</p>
  43. <p class="foot-mark">{{ form?.shopName }}</p>
  44. <p class="foot-mark">{{ form?.keywords }}</p>
  45. <div class="data-btn">
  46. <data-button
  47. @handle-emit="handleClick"
  48. backgroundColor="#FFF"
  49. color="#FF5B00"
  50. label="查看文件"
  51. v-if="type === '3'"
  52. />
  53. <data-button
  54. @handle-emit="useCopyText(form?.content!)"
  55. backgroundColor="#FFF"
  56. color="#FF5B00"
  57. label="复制文本"
  58. v-if="type === '5'"
  59. />
  60. <data-button
  61. @handle-emit="useWeChatShare({ type: form?.type!, id: form?.id!, imageUrl: imageLink, spId: serviceProviderId as number, isShowToast: true })"
  62. backgroundColor="#FFF"
  63. color="#FF5B00"
  64. label="分享"
  65. v-if="type !== '5'"
  66. />
  67. </div>
  68. </div>
  69. </template>
  70. <script setup lang="ts">
  71. import useCopyText from "@/Hooks/useCopyText";
  72. import useWeChatShare from "@/Hooks/useWeChatShare";
  73. import { getArchiveFormDetails } from "@/api/context/context";
  74. import { DArchiveResultData } from "@/types/api/context.type";
  75. import { ChangeTabEmit } from "@/types/views/database.type";
  76. import { showImagePreview } from "vant";
  77. import { computed, onMounted, ref } from "vue";
  78. import { useRoute, useRouter } from "vue-router";
  79. import getFileImg from "@/Hooks/useFileImage";
  80. import { useUserInfoState } from "@/store/user/user";
  81. import { myDecrypt } from "@/util/authStorage";
  82. const route = useRoute();
  83. const router = useRouter();
  84. const { userId, serviceProviderId } = useUserInfoState();
  85. const form = ref<DArchiveResultData>();
  86. const id = computed<string>(() => String(route.query.id));
  87. const type = computed<ChangeTabEmit>(() => route.query.t as ChangeTabEmit);
  88. const handleClick = () => {
  89. router.push("/preview?t=" + type.value + "&id=" + id.value + "&isSp=" + 1);
  90. };
  91. const imageLink = computed<string>(() => {
  92. if (form.value!.type !== '1') return form.value!.image as string
  93. else return getFileImg(form.value!.waters![0]).img as string
  94. })
  95. const getArchiveForm = async () => {
  96. const { data } = await getArchiveFormDetails({
  97. id: id.value,
  98. userId: userId as string,
  99. });
  100. const DcreptoList = { ...data, ...{ waters: myDecrypt(data!.waters! as string[]) } };
  101. form.value = DcreptoList;
  102. console.log(data);
  103. };
  104. const shopImagePreviews = (index: number) => {
  105. console.log(index);
  106. showImagePreview({
  107. images: form.value?.waters! as string[],
  108. startPosition: index,
  109. });
  110. };
  111. onMounted(() => {
  112. getArchiveForm();
  113. });
  114. </script>
  115. <style scoped lang="scss">
  116. .detail {
  117. padding: 24px 15px;
  118. .other {
  119. font-size: 15px;
  120. color: $basicColor-content;
  121. margin-bottom: 12px;
  122. font-weight: bold;
  123. display: flex;
  124. align-items: center;
  125. span {
  126. background: #f5f5f5;
  127. color: #666;
  128. padding: 5px;
  129. margin-left: 10px;
  130. font-size: $basicFS-foot;
  131. border-radius: 2px;
  132. }
  133. }
  134. .time {
  135. font-size: $basicFS;
  136. color: $basicColor-content;
  137. margin-bottom: 12px;
  138. font-weight: bold;
  139. }
  140. .title {
  141. font-size: $basicFS;
  142. color: $basicColor-content;
  143. margin-bottom: 8px;
  144. }
  145. .text {
  146. font-size: $basicFS;
  147. color: $basicColor-foot;
  148. line-height: 21px;
  149. margin-bottom: 24px;
  150. }
  151. .content {
  152. margin-bottom: 18px;
  153. .img-content {
  154. display: grid;
  155. grid-template-columns: repeat(3, 1fr);
  156. grid-gap: 12px;
  157. .item {
  158. border: 1px solid #e1e1e1;
  159. width: 106px;
  160. height: 106px;
  161. }
  162. }
  163. .video-tontent {
  164. width: 100%;
  165. height: 210px;
  166. video {
  167. height: 100%;
  168. width: 100%;
  169. }
  170. }
  171. .file-content {
  172. height: 128px;
  173. width: 100%;
  174. @include display-flex-center;
  175. :deep() {
  176. .van-image {
  177. width: 86px;
  178. height: 86px;
  179. }
  180. }
  181. }
  182. }
  183. .foot-mark {
  184. color: $basicColor-foot;
  185. font-size: $basicFS-foot;
  186. margin-bottom: 9px;
  187. }
  188. .data-btn {
  189. margin-top: 35px;
  190. padding: 0 13px;
  191. }
  192. }
  193. :deep() {
  194. .van-button {
  195. border: 1px solid $basicColor;
  196. border-radius: 1px;
  197. margin-bottom: 12px;
  198. }
  199. }
  200. </style>