提交云课堂pc端代码

fhKeeper/formulahousekeeper/course-pc/src/routes.js

@@ -14,6 +14,8 @@ import examCertification from './views/examCertification/examCertification.vue'
 import gcpCertification from './views/gcpCertification/gcpCertification.vue'
 import offlineRegistration from './views/offlineRegistration/registration.vue'
 import hotTopicCarousel from './views/hotTopicCarousel/hotTopicCarousel.vue'
+import myMessage from './views/myMessage/myMessage.vue'
+import customerServiceCenter from './views/customerServiceCenter/customerServiceCenter.vue'
 
 Vue.use(Router)
 
@@ -112,6 +114,26 @@ export const allRouters = [
             { path: '/gcpc-certification', component: gcpCertification, name: 'GCP证书展示' }
         ]
     },
+    {
+        path: '/my-message',
+        component: Home,
+        name: '我的消息',
+        iconCls: 'iconfont firerock-iconkehu',
+        leaf: true,
+        children: [
+            { path: '/my-message', component: myMessage, name: '我的消息' }
+        ]
+    },
+    {
+        path: '/customer-service-center',
+        component: Home,
+        name: '客服中心',
+        iconCls: 'iconfont firerock-iconkehu',
+        leaf: true,
+        children: [
+            { path: '/customer-service-center', component: customerServiceCenter, name: '客服中心' }
+        ]
+    },
     {
         path: '*',
         hidden: true,

fhKeeper/formulahousekeeper/course-pc/src/views/customerServiceCenter/customerServiceCenter.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="gcp-certification">
+    <h2 class="title">客服中心上传</h2>
+    <div class="upload-height">
+      <div class="upload-area">
+        <!-- 上传按钮 -->
+        <div class="imageUpload">
+          <el-upload ref="pictureCardRef" action="#" list-type="picture-card" :multiple="false"
+            :show-file-list="false" :http-request="uploadKFZXImg" accept="image/*" :disabled="fileList.length > 0">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+        </div>
+        <!-- 视频或图片 -->
+        <div class="image-list">
+          <div v-for="(file, index) in fileList" :key="index" :class="`${!file.loading ? 'image-item-hover' : ''} image-item`">
+            <img :src="file.url" class="cert-image" @click="previewImage(index)">
+            <div class="image-actions" v-if="!file.loading">
+              <el-button type="danger" icon="el-icon-delete" circle @click.stop="removeImage(index)"></el-button>
+              <el-button type="primary" icon="el-icon-view" circle @click.stop="previewImage(index)"></el-button>
+            </div>
+            <div class="image-actions-loging" v-if="file.loading">
+              文件上传中...
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import Viewer from 'v-viewer'
+import 'viewerjs/dist/viewer.css'
+
+Vue.use(Viewer)
+
+import { post, checkAndAddUpload } from '../../api'
+export default {
+  name: 'GcpCertification',
+  data() {
+    return {
+      fileList: [],
+      imageList: [],
+      imageListTime: null,
+    }
+  },
+  methods: {
+    uploadKFZXImg(file) {
+      this.imageList.unshift(file.file)
+      if (this.imageListTime) {
+        clearTimeout(this.imageListTime)
+      }
+      this.imageListTime = setTimeout(() => {
+        this.batchUploadGCPimg()
+      }, 500)
+    },
+    batchUploadGCPimg() {
+      for (let i = 0; i < this.imageList.length; i++) {
+        const formData = new FormData()
+        formData.append('coverImage', this.imageList[i])
+        this.fileList.unshift({
+          name: 'a',
+          loading: true,
+          url: '',
+          imgError: ''
+        })
+        this.http.uploadFile(`/customer-qr/uploadAndSave`, formData, res => {
+          this.fileList[i].url = checkAndAddUpload(res.data.coverUrl)
+          this.fileList[i].name = res.data.id
+          this.fileList[i].loading = false
+        }, err => {
+          this.fileList[i].loading = false
+          this.fileList[i].imgError = '图片上传失败'
+        })
+      }
+
+      setTimeout(() => {
+        this.imageList = []
+        this.$refs.pictureCardRef.clearFiles()
+      }, 1500)
+    },
+    removeImage(index) {
+      this.$confirm('此操作将永久删除该图片, 是否继续?', '删除图片', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        post(`/customer-qr/delete`, { id: this.fileList[index].name }).then(res => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          })
+          this.fileList.splice(index, 1)
+        })
+      })
+    },
+    previewImage(index) {
+      this.$viewerApi({
+        images: this.fileList.map(f => f.url),
+        options: {
+          initialViewIndex: index,
+          toolbar: {
+            zoomIn: 1,
+            zoomOut: 1,
+            oneToOne: 1,
+            reset: 1,
+            prev: 1,
+            next: 1,
+            rotateLeft: 1,
+            rotateRight: 1,
+            flipHorizontal: 1,
+            flipVertical: 1
+          }
+        }
+      })
+    },
+    obtainCertificateList() {
+      post(`/customer-qr/getOne`, {}).then(res => {
+        this.fileList = [res.data].map(item => {
+          return {
+            name: item.id,
+            url: checkAndAddUpload(item.coverUrl),
+            loading: false,
+            imgError: ''
+          }
+        }).reverse()
+      })
+    }
+  },
+  mounted() {
+    this.obtainCertificateList()
+  }
+}
+</script>
+
+<style scoped>
+.gcp-certification {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.title {
+  text-align: center;
+  margin-bottom: 30px;
+  color: #333;
+}
+
+.upload-area {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 30px;
+}
+
+.upload-height {
+  height: 70vh;
+  overflow-y: auto;
+}
+
+.hide-upload>>>.el-upload--picture-card {
+  display: none;
+}
+
+.image-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.imageUpload {
+  margin-right: 20px;
+}
+
+.image-item {
+  position: relative;
+  width: 148px;
+  height: 148px;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+}
+
+.image-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+.image-item-hover:hover .image-actions {
+  opacity: 1;
+}
+
+.cert-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  cursor: pointer;
+}
+
+.image-actions {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, .5);
+  gap: 10px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.image-actions-loging {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, .5);
+  color: #fff;
+}
+
+.submit-area {
+  text-align: center;
+}
+</style>

fhKeeper/formulahousekeeper/course-pc/src/views/myMessage/myMessage.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="myMessage">
+      我的消息
+  </div>
+</template>
+
+<script>
+  export default {
+      data() {
+          return {
+              
+          };
+      },
+      created() {
+      },
+      mounted() {
+          
+      },
+      methods: {
+      }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>