123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203 |
- <template>
- <div class="detail">
- <div class="other" v-if="type === '5'">
- {{ '个人话术' }}<span>已使用:{{ form?.pv || 0 }}次</span>
- </div>
- <div class="time">{{ form?.addTime }}</div>
- <div class="title">{{ form?.title }}</div>
- <div class="text" v-if="type === '5'">
- {{ form?.content }}
- </div>
- <div class="content" v-if="type !== '5'">
- <div v-html="form?.content" v-if="type === '4'" />
- <div class="file-content" v-if="type === '3'">
- <van-image :src="getFileImg(form?.waters as string).img" />
- </div>
- <div class="img-content" v-if="type === '1'">
- <div class="item" v-for="(img, i) in form?.waters" :key="i">
- <van-image
- fit="contain"
- width="100%"
- height="100%"
- :src="img"
- @click.native="shopImagePreviews(i)"
- />
- </div>
- </div>
- <div class="video-tontent" v-if="type === '2'">
- <video
- id="myVideoRef"
- ref="myVideoRef"
- class="video-js vjs-default-skin"
- controls
- autoplay
- x5-video-player-fullscreen="true"
- x5-video-player-type="h5"
- controlslist="nodownload"
- >
- <source :src="(form?.waters as string)" />
- </video>
- </div>
- </div>
- <p class="foot-mark">随便看看</p>
- <p class="foot-mark">{{ form?.shopName }}</p>
- <p class="foot-mark">{{ form?.keywords }}</p>
- <div class="data-btn">
- <data-button
- @handle-emit="handleClick"
- backgroundColor="#FFF"
- color="#FF5B00"
- label="查看文件"
- v-if="type === '3'"
- />
- <data-button
- @handle-emit="useCopyText(form?.content!)"
- backgroundColor="#FFF"
- color="#FF5B00"
- label="复制文本"
- v-if="type === '5'"
- />
- <data-button
- @handle-emit="useWeChatShare({ type: form?.type!, id: form?.id!, imageUrl: imageLink, spId: serviceProviderId as number, isShowToast: true })"
- backgroundColor="#FFF"
- color="#FF5B00"
- label="分享"
- v-if="type !== '5'"
- />
- </div>
- </div>
- </template>
- <script setup lang="ts">
- import useCopyText from "@/Hooks/useCopyText";
- import useWeChatShare from "@/Hooks/useWeChatShare";
- import { getArchiveFormDetails } from "@/api/context/context";
- import { DArchiveResultData } from "@/types/api/context.type";
- import { ChangeTabEmit } from "@/types/views/database.type";
- import { showImagePreview } from "vant";
- import { computed, onMounted, ref } from "vue";
- import { useRoute, useRouter } from "vue-router";
- import getFileImg from "@/Hooks/useFileImage";
- import { useUserInfoState } from "@/store/user/user";
- import { myDecrypt } from "@/util/authStorage";
- const route = useRoute();
- const router = useRouter();
- const { userId, serviceProviderId } = useUserInfoState();
- const form = ref<DArchiveResultData>();
- const id = computed<string>(() => String(route.query.id));
- const type = computed<ChangeTabEmit>(() => route.query.t as ChangeTabEmit);
- const handleClick = () => {
- router.push("/preview?t=" + type.value + "&id=" + id.value + "&isSp=" + 1);
- };
- const imageLink = computed<string>(() => {
- if (form.value!.type !== '1') return form.value!.image as string
- else return getFileImg(form.value!.waters![0]).img as string
- })
- const getArchiveForm = async () => {
- const { data } = await getArchiveFormDetails({
- id: id.value,
- userId: userId as string,
- });
- const DcreptoList = { ...data, ...{ waters: myDecrypt(data!.waters! as string[]) } };
- form.value = DcreptoList;
- console.log(data);
- };
- const shopImagePreviews = (index: number) => {
- console.log(index);
- showImagePreview({
- images: form.value?.waters! as string[],
- startPosition: index,
- });
- };
- onMounted(() => {
- getArchiveForm();
- });
- </script>
- <style scoped lang="scss">
- .detail {
- padding: 24px 15px;
- .other {
- font-size: 15px;
- color: $basicColor-content;
- margin-bottom: 12px;
- font-weight: bold;
- display: flex;
- align-items: center;
- span {
- background: #f5f5f5;
- color: #666;
- padding: 5px;
- margin-left: 10px;
- font-size: $basicFS-foot;
- border-radius: 2px;
- }
- }
- .time {
- font-size: $basicFS;
- color: $basicColor-content;
- margin-bottom: 12px;
- font-weight: bold;
- }
- .title {
- font-size: $basicFS;
- color: $basicColor-content;
- margin-bottom: 8px;
- }
- .text {
- font-size: $basicFS;
- color: $basicColor-foot;
- line-height: 21px;
- margin-bottom: 24px;
- }
- .content {
- margin-bottom: 18px;
- .img-content {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- grid-gap: 12px;
- .item {
- border: 1px solid #e1e1e1;
- width: 106px;
- height: 106px;
- }
- }
- .video-tontent {
- width: 100%;
- height: 210px;
- video {
- height: 100%;
- width: 100%;
- }
- }
- .file-content {
- height: 128px;
- width: 100%;
- @include display-flex-center;
- :deep() {
- .van-image {
- width: 86px;
- height: 86px;
- }
- }
- }
- }
- .foot-mark {
- color: $basicColor-foot;
- font-size: $basicFS-foot;
- margin-bottom: 9px;
- }
- .data-btn {
- margin-top: 35px;
- padding: 0 13px;
- }
- }
- :deep() {
- .van-button {
- border: 1px solid $basicColor;
- border-radius: 1px;
- margin-bottom: 12px;
- }
- }
- </style>
|