|
|
@@ -0,0 +1,114 @@
|
|
|
+<template>
|
|
|
+ <el-dialog title="预览" :visible.sync="visible" width="550px" :close-on-click-modal="false" :show-close="false">
|
|
|
+ <p style="line-height: 24px; margin-bottom: 10px">
|
|
|
+ 预览码：
|
|
|
+ <span style="color: red">{{ shareCode }}(24小时内有效)</span>
|
|
|
+ </p>
|
|
|
+ <p style="line-height: 24px; margin-bottom: 10px">
|
|
|
+ 预览链接：
|
|
|
+ <span style="color: #999999">{{ shareLink }}</span>
|
|
|
+ </p>
|
|
|
+ <p style="line-height: 24px; margin-bottom: 10px">
|
|
|
+ <el-tag type="info">查看预览链接需要输入预览码，预览码24小时内有效，失效后需要重新进行预览操作获取。</el-tag>
|
|
|
+ </p>
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button type="primary" @click="handleConfirm"> 直接预览 </el-button>
|
|
|
+ <el-button type="primary" @click="handleCopy"> 全部复制 </el-button>
|
|
|
+ <el-button @click="handleCanle"> 取 消 </el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getCustomerShopList } from '@/api/user/customer/customer'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'ShareDialog',
|
|
|
+ filters: {
|
|
|
+ NumFormat(value) {
|
|
|
+ // 处理金额
|
|
|
+ return Number(value).toFixed(2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ shareInfo: {
|
|
|
+ type: Object,
|
|
|
+ default: null
|
|
|
+ },
|
|
|
+ shareCode: {
|
|
|
+ type: Number,
|
|
|
+ default: 2345
|
|
|
+ },
|
|
|
+ shareLink: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ productName: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visible: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ created() {},
|
|
|
+ methods: {
|
|
|
+ // 获取所有供应商列表
|
|
|
+ async getCustomerShopList() {
|
|
|
+ try {
|
|
|
+ const res = await getCustomerShopList(this.listQuery)
|
|
|
+ this.list = res.data.results
|
|
|
+ this.total = res.data.totalRecord
|
|
|
+ this.isLoading = false
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 全部复制链接
|
|
|
+ handleCopy() {
|
|
|
+ const truncatedName = this.truncateStringWithEllipsis(this.productName, 18)
|
|
|
+ const clipboardText = `商品${truncatedName}\n【${this.shareInfo.reportDate}】数据报表\n预览链接:${this.shareLink}\n预览码:${this.shareCode}(24小时内有效)`
|
|
|
+ navigator.clipboard
|
|
|
+ .writeText(clipboardText)
|
|
|
+ .then(() => {
|
|
|
+ this.$notify({
|
|
|
+ title: '复制成功！',
|
|
|
+ message: '',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error('复制失败：', err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 直接预览
|
|
|
+ handleConfirm() {
|
|
|
+ window.open(this.shareLink, '_blank')
|
|
|
+ },
|
|
|
+ handleCanle() {
|
|
|
+ // 取消弹窗
|
|
|
+ this.$emit('cancel')
|
|
|
+ },
|
|
|
+ truncateStringWithEllipsis(str, maxLength) {
|
|
|
+ if (str.length <= maxLength) {
|
|
|
+ return str // 如果字符串长度小于或等于最大长度，直接返回原字符串
|
|
|
+ } else {
|
|
|
+ const startIndex = maxLength - 3 // 从第10个字符开始
|
|
|
+ const endIndex = str.length - 3 // 保留最后3个字符
|
|
|
+ return `${str.slice(0, startIndex)}...${str.slice(endIndex)}` // 在中间插入省略号并返回截取后的字符串
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+::v-deep {
|
|
|
+ thead .el-checkbox {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
