From a6b5211e178eb77543a7573f02b707e411690b1a Mon Sep 17 00:00:00 2001
From: zx <604444282@qq.com>
Date: Wed, 22 Jun 2022 18:03:40 +0800
Subject: [PATCH] zx

---
 src/router/index.js                        |   9 ++
 src/views/StarwayInfo/_actDetail/index.vue | 155 +++++++++++++++++++++
 src/views/StarwayInfo/index.vue            |   5 +-
 3 files changed, 168 insertions(+), 1 deletion(-)
 create mode 100644 src/views/StarwayInfo/_actDetail/index.vue

diff --git a/src/router/index.js b/src/router/index.js
index fd694aa..450a51d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -90,6 +90,15 @@ const routes = [
 				},
 				hidden: true
 			},
+			{
+				path: '/actDetail',
+				name: "ActDetail",
+				component: () => import("@/views/StarwayInfo/_actDetail/index.vue"),
+				meta: {
+					title: '动态详情',
+				},
+				hidden: true
+			},
 			{
 				path: '/matManage',
 				name: "MatManage",
diff --git a/src/views/StarwayInfo/_actDetail/index.vue b/src/views/StarwayInfo/_actDetail/index.vue
new file mode 100644
index 0000000..c858b33
--- /dev/null
+++ b/src/views/StarwayInfo/_actDetail/index.vue
@@ -0,0 +1,155 @@
+<template>
+    <div class="main-content">
+        <div class="form-area">
+            <el-form size="default" :model="form" label-width="120px">
+                <el-form-item label="标题" style="width: 80%">
+                    <el-input disabled placeholder="请输入" v-model="form.title" />
+                </el-form-item>
+                <el-form-item label="副标题" style="width: 80%">
+                    <el-input disabled type="textarea" placeholder="请输入" v-model="form.subtitle" />
+                </el-form-item>
+                <el-form-item label="动态类型">
+                    <el-radio-group disabled v-model="form.type">
+                        <el-radio :label="1">视频</el-radio>
+                        <el-radio :label="2">图片</el-radio>
+                        <el-radio :label="3">文字</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="上传封面">
+                    <uploadFile @change="handlerUpload" :config="{limit: 1, accept: '.jpg, .jpeg, .png, .gif'}">
+                        <el-icon v-if="form.cover == ''" class="img-upload"><Plus /></el-icon>
+                        <img v-else class="img-upload" :src="$ImgUrl(form.cover)" />
+                    </uploadFile>
+                </el-form-item>
+                <el-form-item label="文章内容" v-if="form.type == 3">
+                    <div style="border: 1px solid #ccc">
+                        <Toolbar
+                            style="border-bottom: 1px solid #ccc;width: 700px"
+                            :editor="editorRef"
+                            :defaultConfig="toolbarConfig"
+                            :mode="mode"
+                        />
+                        <Editor
+                            style="height: 301px; overflow-y: hidden;"
+                            v-model="form.content"
+                            :defaultConfig="editorConfig"
+                            :mode="mode"
+                            @onCreated="handleCreated"
+                        />
+                    </div>
+                </el-form-item>
+                <el-form-item label="上传图片" v-else-if="form.type == 2">
+                    <uploadFile @change="handlerUploadPic" :config="{ limit: 1, accept: '.jpg, .jpeg, .png, .gif'}">
+                        <el-icon class="img-upload"><Plus /></el-icon>
+                    </uploadFile>
+                </el-form-item>
+                <el-form-item label="上传视频" v-else-if="form.type == 1">
+                    <uploadFile @change="handlerUploadVideo" :config="{ limit: 1, accept: '.mp4, .ogv, .ogg, .webm'}">
+                        <el-icon class="img-upload"><Plus /></el-icon>
+                    </uploadFile>
+                </el-form-item>
+                <!-- <el-form-item>
+                    <el-button type="primary" @click="confirm">提交</el-button>
+                </el-form-item> -->
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script>
+import '@wangeditor/editor/dist/css/style.css'
+import { onBeforeUnmount, shallowRef, onMounted } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import {defineComponent, reactive, getCurrentInstance} from 'vue'
+export default defineComponent({
+    name: 'v-questRelease',
+    components: { Editor, Toolbar },
+    setup() {
+        const form = reactive({
+            title: '',
+            subtitle: '',
+            type: 1,
+            content: '<p>请在此输入内容</p>',
+            cover:''
+        });
+        const { proxy } = getCurrentInstance();
+        /////////////
+        const editorRef = shallowRef()
+        // onMounted(() => { // 模拟 ajax 异步获取内容
+        //     setTimeout(() => {
+        //         valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
+        //     }, 1500)
+        // }) 
+        //配置项
+        const toolbarConfig = {}
+        const editorConfig = {}
+        // 组件销毁时，也及时销毁编辑器
+        onBeforeUnmount(() => {
+            const editor = editorRef.value
+            if (editor == null) return
+            editor.destroy()
+        })
+        const handleCreated = (editor) => {
+            editorRef.value = editor // 记录 editor 实例，重要！
+        }
+        /////////////
+        return {
+            form,proxy,
+            editorRef, mode: 'simple', toolbarConfig, editorConfig, handleCreated
+        }
+    },
+    mounted() {
+        this.getApi();
+    },
+    methods: {
+        getApi() {
+            if(this.$route.params.id) {
+                this.proxy.$post("/topicActivity/detail", {id: this.$route.params.id}).then(res => {
+                    this.form.title = res.data.title;
+                    this.form.type = res.data.type;
+                    this.form.subtitle = res.data.subtitle;
+                    this.form.content = res.data.content;
+                    this.form.cover = res.data.cover
+                }).catch(() => {});
+            }
+        },
+        confirm() {
+            if(this.$route.params.id) {
+                let obj = Object.assign(this.form, {id: this.$route.params.id})
+                this.proxy.$post("/topicActivity/upd", obj).then(res => {
+                    this.$message.success(res.data);
+                    this.$router.go(-1);
+                }).catch(() => {});
+            } else {
+                this.proxy.$post("/topicActivity/add", this.form).then(res => {
+                    this.$message.success(res.data);
+                    this.$router.go(-1);
+                }).catch(() => {});
+            }
+        },
+        handlerUpload(data) {
+            this.form.cover = data.fileUrl
+        },
+        handlerUploadPic(data) {
+            this.form.content = data.fileUrl
+        },
+        handlerUploadVideo(data) {
+            this.form.content = data.fileUrl
+        }
+    }
+})
+</script>
+
+<style lang="less">
+.form-area {
+    width: 600px
+}
+.img-upload {
+    font-size: 28px;
+    color: #8c939d;
+    width: 135px;
+    height: 135px;
+    text-align: center;
+    border: 1px solid;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/StarwayInfo/index.vue b/src/views/StarwayInfo/index.vue
index f0bb9f2..b845414 100644
--- a/src/views/StarwayInfo/index.vue
+++ b/src/views/StarwayInfo/index.vue
@@ -29,7 +29,7 @@
                </el-table-column>
                <el-table-column prop="action" label="操作" fixed="right" width="240">
                    <template #default="scope">
-                       <el-link type="primary" style="margin-right: 8px">查看</el-link>
+                       <el-link type="primary" style="margin-right: 8px" @click="goDetail(scope.row.id)">查看</el-link>
                        <el-link type="primary" style="margin-right: 8px" @click="goEdit(scope.row.id)">编辑</el-link>
                        <el-link type="danger" style="margin-right: 8px" @click="singleDel(scope.row.id)">删除</el-link>
                    </template>
@@ -102,6 +102,9 @@ export default defineComponent({
         goEdit(value) {
             this.$router.push({ name: "ActRelease",params:{id:value}})
         },
+        goDetail(value) {
+            this.$router.push({ name: "ActDetail",params:{id:value}})
+        },
         //删除
         singleDel(id) {
             this.$alert(