|
|
@@ -0,0 +1,175 @@
|
|
|
+<!-- 分享信息弹窗 -->
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ v-model="visible"
|
|
|
+ title="分享IP信息"
|
|
|
+ width="600px"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :append-to-body="true"
|
|
|
+ >
|
|
|
+ <el-form ref="formRef" :model="form" label-width="100px" :rules="rules">
|
|
|
+ <el-form-item label="IP标题" prop="name">
|
|
|
+ <el-input v-model="form.name" :disabled="true" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分享方式" prop="shareType">
|
|
|
+ <el-select v-model="form.shareType" placeholder="请选择分享方式" style="width: 100%">
|
|
|
+ <el-option label="微信" value="wechat" />
|
|
|
+ <el-option label="QQ" value="qq" />
|
|
|
+ <el-option label="微博" value="weibo" />
|
|
|
+ <el-option label="链接" value="link" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分享标题" prop="shareTitle">
|
|
|
+ <el-input v-model="form.shareTitle" placeholder="请输入分享标题" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分享描述" prop="shareDesc">
|
|
|
+ <el-input v-model="form.shareDesc" type="textarea" rows="3" placeholder="请输入分享描述" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分享图片" prop="shareImg">
|
|
|
+ <el-upload
|
|
|
+ class="share-upload"
|
|
|
+ action="#"
|
|
|
+ :http-request="handleUpload"
|
|
|
+ :show-file-list="false"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ >
|
|
|
+ <img v-if="form.shareImg" :src="form.shareImg" class="share-image" />
|
|
|
+ <el-icon v-else class="share-upload-icon"><Plus /></el-icon>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <el-row justify="center">
|
|
|
+ <el-button @click="visible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="handleSubmit">确认分享</el-button>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, reactive } from 'vue';
|
|
|
+import { getCurrentInstance } from 'vue';
|
|
|
+import { Plus } from '@element-plus/icons-vue';
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+
|
|
|
+// 弹窗可见性
|
|
|
+const visible = ref(false);
|
|
|
+
|
|
|
+// 表单引用
|
|
|
+const formRef = ref(null);
|
|
|
+
|
|
|
+// 表单数据
|
|
|
+const form = reactive({
|
|
|
+ id: '',
|
|
|
+ name: '',
|
|
|
+ shareType: 'wechat',
|
|
|
+ shareTitle: '',
|
|
|
+ shareDesc: '',
|
|
|
+ shareImg: ''
|
|
|
+});
|
|
|
+
|
|
|
+// 表单验证规则
|
|
|
+const rules = {
|
|
|
+ shareType: [
|
|
|
+ { required: true, message: '请选择分享方式', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ shareTitle: [
|
|
|
+ { required: true, message: '请输入分享标题', trigger: 'blur' },
|
|
|
+ { max: 50, message: '长度不能超过50个字符', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ shareDesc: [
|
|
|
+ { required: true, message: '请输入分享描述', trigger: 'blur' },
|
|
|
+ { max: 200, message: '长度不能超过200个字符', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+};
|
|
|
+
|
|
|
+// 打开弹窗
|
|
|
+const openDialog = (row) => {
|
|
|
+ visible.value = true;
|
|
|
+ form.id = row.id;
|
|
|
+ form.name = row.name;
|
|
|
+ form.shareTitle = row.name;
|
|
|
+ form.shareDesc = row.description || '';
|
|
|
+ form.shareImg = row.image || '';
|
|
|
+};
|
|
|
+
|
|
|
+// 上传前检查
|
|
|
+const beforeUpload = (file) => {
|
|
|
+ const isJPG = file.type === 'image/jpeg';
|
|
|
+ const isPNG = file.type === 'image/png';
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+
|
|
|
+ if (!isJPG && !isPNG) {
|
|
|
+ proxy.$message.error('上传图片只能是 JPG 或 PNG 格式!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ proxy.$message.error('上传图片大小不能超过 2MB!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+};
|
|
|
+
|
|
|
+// 处理上传
|
|
|
+const handleUpload = (options) => {
|
|
|
+ const { file } = options;
|
|
|
+ // 这里应该替换为实际的上传API
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('file', file);
|
|
|
+
|
|
|
+ // 模拟上传
|
|
|
+ setTimeout(() => {
|
|
|
+ // 模拟一个图片URL
|
|
|
+ form.shareImg = URL.createObjectURL(file);
|
|
|
+ }, 300);
|
|
|
+};
|
|
|
+
|
|
|
+// 提交分享
|
|
|
+const handleSubmit = () => {
|
|
|
+ formRef.value.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ // 这里应该替换为实际的分享API调用
|
|
|
+ proxy.$message.success('分享成功');
|
|
|
+ visible.value = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 向外暴露方法
|
|
|
+defineExpose({
|
|
|
+ openDialog
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.share-upload {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 148px;
|
|
|
+ height: 148px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-color: #409eff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-upload-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
