xjc 4 роки тому
батько
коміт
f4f1100a71
3 змінених файлів з 309 додано та 2 видалено
  1. 4 0
      src/router.js
  2. 92 2
      src/views/journalQun/Journal.vue
  3. 213 0
      src/views/journalQun/ShowJournal.vue

+ 4 - 0
src/router.js

@@ -88,6 +88,10 @@ export default new Router({
         path: '/journal/journal/add',
         component: () => import('./views/journalQun/AddJournal.vue'),
         name: '中科院全刊'
+      },{
+        path: '/journal/journal/show',
+        component: () => import('./views/journalQun/ShowJournal.vue'),
+        name: '中科院全刊'
       }]
     },
     {

+ 92 - 2
src/views/journalQun/Journal.vue

@@ -1,4 +1,4 @@
-<style lang="scss">
+<style lang="scss" scoped>
 .preview {
   .el-form-item {
     margin-bottom: 15px;
@@ -8,6 +8,41 @@
     line-height: 25px !important;
   }
 }
+/deep/.avatar-uploader .el-upload {
+  width: 148px;
+  height: 148px;
+  line-height: 148px;
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  .avatar {
+    width: 100%;
+    height: auto;
+  }
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 68px;
+  height: 68px;
+  line-height: 68px;
+  text-align: center;
+}
+.avatar {
+  width: 68px;
+  height: 68px;
+  display: block;
+}
+/deep/.speaker_avatar .el-upload {
+  width: 80px;
+  height: 80px;
+  line-height: 80px;
+}
 </style>
 <template>
   <section>
@@ -74,7 +109,10 @@
         </el-table-column>
         <el-table-column prop="zip" width="150" label="操作" fixed="right">
           <template slot-scope="scope">
-            <el-button type="text" @click="dialogVisible = true"
+            <el-button type="text" @click="showQrcode(scope.row)"
+              >二维码上传</el-button
+            >
+            <el-button type="text" @click="showJournal(scope.row)"
               >查看</el-button
             >
             <el-button class="edit" type="text" @click="edit(scope.row)"
@@ -91,6 +129,41 @@
         :total="total"
         @pageChange="gopage"
       />
+      <!--二维码上传-->
+      <el-dialog
+        class="fu-dialog"
+        :title="dialogTitle"
+        :close-on-click-modal="false"
+        :visible.sync="dialogVisible"
+      >
+        <el-form
+          size="small"
+          class="preview"
+          :inline="false"
+          label-width="100px"
+          :model="form1"
+          ref="form1"
+        >
+          <el-form-item label="上传二维码:" prop="img">
+            <el-upload
+              class="avatar-uploader"
+              action="/api/admin/uploadfile"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+            >
+              <img v-if="form1.qrcode" :src="form1.qrcode" class="avatar" />
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+            <span style="font-size: 12px; color: #999999"
+              >建议图片尺寸为:210*160</span
+            >
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button size="small" type="normal" @click="dialogVisible=false,this.form1={}">取消</el-button>
+          <el-button size="small" type="primary" @click="save">确 定</el-button>
+        </span>
+      </el-dialog>
     </div>
   </section>
 </template>
@@ -108,9 +181,26 @@ export default {
       list: [{ name: "2333" }],
       loading: false,
       input: "",
+      dialogVisible: false,
+      dialogTitle: "",
+      form1: {},
     };
   },
   methods: {
+    showQrcode(row){
+      this.form1.qrcode = row.qrcode;
+      this.dialogVisible = true;
+    },
+    showJournal(row){
+      this.$router.push({
+        path:"/journal/journal/show",
+        query:{id:row.id}
+      })
+    },
+    //封面
+    handleAvatarSuccess(res, file) {
+      this.$set(this.form1,'img',file.response.data)
+    },
     gopage(size) {
       if (size) {
         this.form.page_size = size;

+ 213 - 0
src/views/journalQun/ShowJournal.vue

@@ -0,0 +1,213 @@
+<style lang="scss" scoped>
+.tbl {
+  // border:1px solid #ccc;
+}
+.tbl tr {
+  height: 31px;
+}
+.tbl td {
+  padding: 5px;
+  border: 1px solid #ccc;
+}
+// 活动回顾
+.journalItem {
+  height: 35px;
+  background: #0f1f8c;
+  margin-top: 65px;
+  display: flex;
+  // flex-direction: column;
+  justify-content: space-between;
+}
+.journalItem .title {
+  color: #ffffff;
+  width: 100px;
+  line-height: 35px;
+  text-align: center;
+}
+.add{
+  position:absolute;
+  right: 0px;
+}
+.overActivity {
+}
+</style>
+<template>
+  <section>
+    <p><span>刊群导览></span>期刊详情</p>
+    <div class="content">
+      <div class="jDetail">
+        <img
+          :src="form.img"
+          alt=""
+          width="159"
+          height="210"
+          style="float: left"
+        />
+        <table
+          class="tbl"
+          cellpadding="0"
+          cellspacing="0"
+          width="80%"
+          style="float: left; margin-left: 45px"
+        >
+          <tr>
+            <td width="119" align="right">名称:</td>
+            <td>{{ form.name }}</td>
+          </tr>
+          <tr>
+            <td align="right">微信号:</td>
+            <td>{{ form.wxcode }}</td>
+          </tr>
+          <tr>
+            <td align="right">主办单位:</td>
+            <td>{{ form.organizer_name }}</td>
+          </tr>
+          <tr>
+            <td align="right">所属学科:</td>
+            <td>{{ form.subject_name }}</td>
+          </tr>
+          <tr>
+            <td align="right">简介:</td>
+            <td>{{ form.desc }}</td>
+          </tr>
+        </table>
+        <div style="clear: both; height: 0; content: ''"></div>
+      </div>
+      <!-- 活动回顾 -->
+      <div class="journalItem overActivity">
+        <div class="title">活动回顾</div>
+        <div class="title more">查看更多>></div>
+        <el-button type="primary" class="add" size="mini">发布活动回顾</el-button>
+      </div>
+      <!-- 活动预告 -->
+      <div class="journalItem preActivity">
+        <div class="title">活动预告</div>
+        <div class="title more">查看更多>></div>
+      </div>
+      <!-- 精品文章 -->
+      <div class="journalItem preActivity">
+        <div class="title">精品文章</div>
+        <div class="title more">查看更多>></div>
+      </div>
+    </div>
+  </section>
+</template>
+<script>
+import fuEditor from "../../components/fuEditor";
+export default {
+  components: {
+    fuEditor,
+  },
+  data() {
+    return {
+      form: {},
+      subjectList: [],
+      organizerList: [],
+      imageUrl: "",
+      rules: {
+        name: [{ required: true, message: "请输入标题", trigger: "blur" }],
+        wxcode: [{ required: true, message: "请输入微信号", trigger: "blur" }],
+        organizer_id: [
+          { required: true, message: "请选择主办单位", trigger: "blur" },
+        ],
+        subject_id: [
+          { required: true, message: "请选择学科", trigger: "change" },
+        ],
+        img: [{ required: true, message: "封面图", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    //封面
+    handleAvatarSuccess(res, file) {
+      this.form.img = file.response.data;
+      console.log(this.form.img);
+    },
+    //主讲人
+    handleAvatarSuccess1(index, res, file) {
+      var speaker = this.form.speaker[index];
+      speaker.img = file.response.data;
+      this.$set(this.form.speaker, index, speaker);
+      // console.log(this.form.img)
+    },
+    beforeAvatarUpload() {},
+    handleClick() {},
+    addSpeaker() {
+      this.form.speaker.push({ name: "", intruduce: "" });
+    },
+    gopage(size) {
+      if (size) {
+        this.form.page_size = size;
+      }
+      this.form.page = this.$refs.pageButton.page;
+      this.getData();
+    },
+    getData() {
+      this.loading = true;
+      this.$api.searchSubjectList().then((res) => {
+        this.subjectList = res.data.data;
+      });
+      this.$api.searchOrganizerList().then((res) => {
+        this.organizerList = res.data.data;
+      });
+      // 期刊详情
+      let id = this.$route.query.id;
+      if (id) {
+        this.$api.getJournal({ id: id }).then((res) => {
+          this.form = res.data.data;
+        });
+      }
+    },
+    save() {
+      let id = this.$route.query.id;
+      let parm = this.form;
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (id) {
+            parm.id = id;
+            this.$api.updateJournal(parm).then((res) => {
+              if (res.data.code == 0) {
+                this.$message({
+                  type: "success",
+                  message: "保存成功!",
+                });
+              } else {
+                this.$message.error("保存失败!");
+              }
+            });
+          } else {
+            this.$api.addJournal(parm).then((res) => {
+              if (res.data.code == 0) {
+                this.$message({
+                  type: "success",
+                  message: "保存成功!",
+                });
+              } else {
+                this.$message.error("保存失败!");
+              }
+            });
+          }
+        } else {
+          this.$message.error("有必填项没有填!");
+        }
+      });
+    },
+    del(id) {
+      this.$confirm("确定删除吗", "提示", {
+        type: "warning",
+      }).then(() => {
+        this.$api.delJournal({ id: id }).then((res) => {
+          this.$message({
+            message: "删除成功",
+            type: "success",
+          });
+          this.getData();
+        });
+      });
+    },
+  },
+  created() {
+    this.getData();
+  },
+};
+</script>