|
|
@@ -0,0 +1,285 @@
|
|
|
+<template>
|
|
|
+ <a-modal v-model:visible="visible" title="分享资源" @ok="handleOk">
|
|
|
+ <div style="display: flex; flex-direction: column">
|
|
|
+ <div style="display: flex; align-items: center; width: 100%">
|
|
|
+ <CheckCircleOutlined style="font-size: 20px; margin-right: 8px; color: green" />
|
|
|
+ <span style="display: block">成功创建分享链接</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="display: flex; align-items: center; width: 100%; justify-content: space-between">
|
|
|
+ <span>{{ thisUrl }}</span> <a-button type="primary" @click="copyLink()">复制链接</a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import { ref } from 'vue'
|
|
|
+ import TabSwitcher from './TabSwitcher.vue'
|
|
|
+ import EventBus from '@/utils/EventBus'
|
|
|
+ import { Modal, message, notification } from 'ant-design-vue'
|
|
|
+ import tool from '@/utils/tool'
|
|
|
+ const emit = defineEmits(['selectTab'])
|
|
|
+
|
|
|
+ // id: 1,
|
|
|
+ // name: '张三',是1000元,请给我一个好评,谢谢',
|
|
|
+ // follw: 0,
|
|
|
+
|
|
|
+ // const props = defineProps({
|
|
|
+ // item: {
|
|
|
+ // type: Object,
|
|
|
+ // default: () => {}
|
|
|
+ // }
|
|
|
+ // // name: {
|
|
|
+ // // type: String,
|
|
|
+ // // default: () => ''
|
|
|
+ // // },
|
|
|
+ // // talk: {
|
|
|
+ // // type: String,
|
|
|
+ // // default: () => ''
|
|
|
+ // // },
|
|
|
+ // // follw: {
|
|
|
+ // // type: Number,
|
|
|
+ // // default: () => 0
|
|
|
+ // // },
|
|
|
+ // // callBackTalk: {
|
|
|
+ // // type: Array,
|
|
|
+ // // default: () => []
|
|
|
+ // // }
|
|
|
+ // })
|
|
|
+ const listUnpublishedView = ref(null)
|
|
|
+ const tallTag = ref(false)
|
|
|
+ const visible = ref(false)
|
|
|
+ const itemData = ref(null)
|
|
|
+ const thisUrl = ref('')
|
|
|
+
|
|
|
+ const handleOk = () => {
|
|
|
+ // console.log('查询内容', form)
|
|
|
+ // tallTag.value == true ? (tallTag.value = false) : (tallTag.value = true)
|
|
|
+ // EventBus.emit('closeInput', null, props.item.id)
|
|
|
+ //....
|
|
|
+ visible.value = false
|
|
|
+ // listUnpublishedView.value.setData(tableData.value)
|
|
|
+ }
|
|
|
+ const open = (data) => {
|
|
|
+ console.log('要 打开分享弹窗')
|
|
|
+ visible.value = true
|
|
|
+ // itemData.value = data
|
|
|
+ thisUrl.value = window.location.href
|
|
|
+ }
|
|
|
+ const copyLink = () => {
|
|
|
+ tool.writeText(thisUrl.value)
|
|
|
+ message.success('复制成功')
|
|
|
+ }
|
|
|
+ watch(
|
|
|
+ () => visible.value,
|
|
|
+ (val) => {
|
|
|
+ console.log('可见不可见', val)
|
|
|
+ }
|
|
|
+ )
|
|
|
+ const handerPublish = () => {
|
|
|
+ tallTag.value = false
|
|
|
+ emit('publish')
|
|
|
+
|
|
|
+ //....
|
|
|
+ // listUnpublishedView.value.setData(tableData.value)
|
|
|
+ }
|
|
|
+ const handleCloseInput = (data, tag) => {
|
|
|
+ if (props.item.id != tag) {
|
|
|
+ tallTag.value = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ onMounted(() => {
|
|
|
+ // getList()
|
|
|
+ })
|
|
|
+
|
|
|
+ defineExpose({
|
|
|
+ open
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .tab-switcher {
|
|
|
+ display: flex;
|
|
|
+ border-radius: 20px;
|
|
|
+ border: 1px solid #1e90ff;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-switcher div {
|
|
|
+ padding: 2px 20px;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-switcher div.active {
|
|
|
+ background-color: #1e90ff;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-switcher div:not(:last-child) {
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ border: 1px solid #dfe2e5;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .resource-container {
|
|
|
+ width: 850px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 20px;
|
|
|
+ border: 1px solid #dfe2e5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-avatar {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background: #1e90ff;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-details {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-name {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .publish-time {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .metrics {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .metric-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .metric-item span:first-child {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .metric-item span:last-child {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .actions {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-btn,
|
|
|
+ .favorite-btn {
|
|
|
+ background-color: transparent;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .course-info {
|
|
|
+ margin-top: 20px;
|
|
|
+ line-height: 1.6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .liene {
|
|
|
+ height: 35px;
|
|
|
+ width: 1px;
|
|
|
+ background: #00000018;
|
|
|
+ }
|
|
|
+
|
|
|
+ .resource-container {
|
|
|
+ width: 850px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 20px;
|
|
|
+ border: 1px solid #dfe2e5;
|
|
|
+ }
|
|
|
+
|
|
|
+ h1 {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-descriptions {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-typography-title {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-typography-paragraph {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-space {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .video-info {
|
|
|
+ height: 100%; /* 确保填满容器高度 */
|
|
|
+ }
|
|
|
+ .resInfo {
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 350px;
|
|
|
+ height: 570px;
|
|
|
+ border: 1px solid #dfe2e5;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-info-container {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .resInfoTitile {
|
|
|
+ width: 5px;
|
|
|
+ height: 14px;
|
|
|
+ background-color: cadetblue;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tallList {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 850px;
|
|
|
+ border: 1px solid #dfe2e5;
|
|
|
+ padding: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tallListInfo {
|
|
|
+ color: rgba(0, 0, 0, 0.116);
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line {
|
|
|
+ width: 100%;
|
|
|
+ height: 0.5px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.075);
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemLayou {
|
|
|
+ padding: 0px;
|
|
|
+ border: 1px solid #dfe2e5;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+</style>
|