长页等图片压缩，shop长页banner添加两个二维码设置

src/const/modules.js

@@ -172,17 +172,19 @@ export default {
       type: 'introduce',
       forms: [
         {
-          type: 'upload',
+          type: 'media',
           prop: 'pic',
-          label: '图片',
+          label: '资源',
           required: true,
-          crop: false
+          width: 1912,
+          height: 480
         },
         {
-          type: 'input',
-          prop: 'title',
-          label: '标题',
-          required: true
+          type: 'editor',
+          prop: 'des',
+          label: '描述',
+          pureText: true, // 编辑的时候是富文本，但是外面表格里展示的时候是纯文本(富文本里文字图片过大影响表格展示才需要用此方式)
+          pureProp: 'pureDes', // 跟pureText绑定的属性，有pureText才会有此字段，用以表格里展示纯文本
         },
         {
           type: 'link',
@@ -190,14 +192,33 @@ export default {
           label: '链接'
         },
         {
-          type: 'textarea',
-          prop: 'des',
-          label: '描述'
-        }
+          type: 'upload',
+          prop: 'weixinPic1',
+          label: '公众号二维码',
+          width: 103,
+          height: 103
+        },
+        {
+          type: 'input',
+          prop: 'weixinText1',
+          label: '公众号文案'
+        },
+        {
+          type: 'upload',
+          prop: 'weixinPic2',
+          label: '小程序二维码',
+          width: 103,
+          height: 103
+        },
+        {
+          type: 'input',
+          prop: 'weixinText2',
+          label: '小程序文案'
+        },
       ],
       form: {
         pic: '',
-        title: '',
+        des: ``,
         link: {
           linkName: '无',
           connectionType: 1,
@@ -209,13 +230,17 @@ export default {
           otherArticleId: '',
           isOpen: 1
         },
-        des: '',
+        pic: '',
+        weixinPic1: '',
+        weixinText1: ``,
+        weixinPic2: '',
+        weixinText2: ``,
         isEnable: 1
       },
       list: [
         {
           pic: 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20230904/png/1698579017697353728.png',
-          title: '最全，最新的实验教学产品中心',
+          mediaType: 'png',
           link: {
             linkName: '无',
             connectionType: 1,
@@ -227,11 +252,18 @@ export default {
             otherArticleId: '',
             isOpen: 1
           },
-          des: '稳定高效的在线实验教学与学习系统',
-          isEnable: 1
+          des: '<h6 style="margin-bottom: 25px;font-size: 2.2rem;color: #fff;">数字经济实训产品哪里有？</h6><p style="font-size: 1.5rem;color: #fff;">职站商城，让您一站式采购无忧</p>',
+          weixinPic1: '',
+          weixinText1: ``,
+          weixinPic2: '',
+          weixinText2: ``,
+          isEnable: 1,
         }
-      ]
+      ],
+      dialogWidth: '1200px',
+      labelWidth: '110px'
     },
+
     {
       type: 'introduce',
       forms: [
@@ -515,6 +547,7 @@ export default {
         weixinText1: ``,
         weixinPic2: '',
         weixinText2: ``,
+        isEnable: 1,
       },
       list: [],
       dialogWidth: '1200px',

src/pages/column/page/aboutUs.vue

@@ -26,13 +26,13 @@
               <div class="text-wrap">
                 <div class="text" v-html="item.des"></div>
                 <div v-if="!GTA" class="qrcodes">
-                  <div class="qrcode">
+                  <div v-if="item.weixinPic1" class="qrcode">
                     <img width="103" :src="item.weixinPic1" alt="">
-                    <p class="text">{{ item.weixinText1 }}</p>
+                    <p v-if="item.weixinText1" class="text">{{ item.weixinText1 }}</p>
                   </div>
-                  <div class="qrcode m-l-30">
+                  <div v-if="item.weixinPic2" class="qrcode m-l-30">
                     <img width="103" :src="item.weixinPic2" alt="">
-                    <p class="text">{{ item.weixinText2 }}</p>
+                    <p v-if="item.weixinText2" class="text">{{ item.weixinText2 }}</p>
                   </div>
                 </div>
               </div>

src/pages/column/page/shop.vue

@@ -12,11 +12,28 @@
 
     <div class="modules">
       <div class="relative">
-        <el-carousel height="500px"
+        <el-carousel height="354px" class="carousel"
           :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
           <template v-for="(item, i) in modules[0].list">
             <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
-              <img width="100%" height="100%" :src="item.pic" alt="">
+              <div v-if="isImg(item.mediaType)" class="pic" :style="{ backgroundImage: 'url(' + item.pic + ')' }"></div>
+              <video v-else class="pic" width="100%" height="100%" autoplay muted loop>
+                <source :src="item.pic" type="video/mp4">
+                您的浏览器不支持 video 标签。
+              </video>
+              <div class="text-wrap">
+                <div class="text" v-html="item.des"></div>
+                <div class="qrcodes">
+                  <div v-if="item.weixinPic1" class="qrcode">
+                    <img width="103" :src="item.weixinPic1" alt="">
+                    <p v-if="item.weixinText1" class="text">{{ item.weixinText1 }}</p>
+                  </div>
+                  <div v-if="item.weixinPic2" class="qrcode m-l-30">
+                    <img width="103" :src="item.weixinPic2" alt="">
+                    <p v-if="item.weixinText2" class="text">{{ item.weixinText2 }}</p>
+                  </div>
+                </div>
+              </div>
             </el-carousel-item>
           </template>
         </el-carousel>
@@ -44,10 +61,12 @@
 <script>
 import mixins from '@/mixins/page'
 import Modules from '@/const/modules'
+import Util from '@/libs/util'
 export default {
   mixins: [mixins],
   data () {
     return {
+      isImg: Util.isImg,
       modules: Modules.shop
     }
   },
@@ -61,6 +80,45 @@ export default {
 <style lang="scss" scoped>
 @import '../../../styles/page/page.scss';
 
+.carousel {
+  .pic {
+    height: 100%;
+    background-position: center center;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+
+  /deep/.el-carousel__container {
+    height: 100%;
+  }
+
+  .text-wrap {
+    position: absolute;
+    top: 55%;
+    left: 12%;
+    display: flex;
+    align-items: center;
+    color: #fff;
+    transform: translateY(-50%);
+  }
+
+  .qrcodes {
+    display: flex;
+    margin-right: 50px;
+  }
+
+  .qrcode {
+    text-align: center;
+
+    .text {
+      margin-top: 10px;
+      font-size: 12px;
+      color: #fff;
+    }
+  }
+}
+
+
 .intro {
   display: flex;
   justify-content: space-between;

src/pages/logo/index.vue

@@ -1,22 +1,39 @@
 <template>
   <div class="page">
-    <el-form ref="form" label-width="100px">
+    <el-form ref="form" label-width="120px">
       <el-form-item label="标题">
         <el-input v-model="form.title" ref="account" placeholder="请输入标题" style="width: 400px"></el-input>
       </el-form-item>
-      <el-form-item label="图标">
+      <el-form-item label="彩色图标">
         <el-upload accept=".jpg,.png,.jpeg,.svg" :action="this.api.upload" :on-remove="handleRemove"
           :on-error="uploadError" :before-remove="beforeRemove" :headers="headers" :file-list="fileList"
           :on-success="uploadSuccess">
           <div style="text-align: left;">
-            <el-button size="small" type="primary">上传logo</el-button>
-            <div class="m-t-10">
-              <img v-if="form.logoUrl" :src="form.logoUrl" class="logo">
+            <el-button size="small" type="primary">上传彩色logo</el-button>
+            <div v-if="form.logoUrl" class="m-t-10">
+              <img :src="form.logoUrl" class="logo">
             </div>
           </div>
 
           <div slot="tip" class="el-upload__tip">
-            <p>只能上传jpg/png/svg文件，请上传120*40左右的logo</p>
+            <p>只能上传jpg/png/svg图片，请上传120*40左右的彩色logo，用于常规页面展示</p>
+          </div>
+        </el-upload>
+      </el-form-item>
+
+      <el-form-item label="白色图标(非必须)">
+        <el-upload accept=".jpg,.png,.jpeg,.svg" :action="this.api.upload" :on-remove="handleRemove1"
+          :on-error="uploadError" :before-remove="beforeRemove" :headers="headers" :file-list="fileList1"
+          :on-success="uploadSuccess1">
+          <div style="text-align: left;">
+            <el-button size="small" type="primary">上传白色logo</el-button>
+            <div v-if="form.whiteUrl" class="m-t-10">
+              <img :src="form.whiteUrl" class="logo">
+            </div>
+          </div>
+
+          <div slot="tip" class="el-upload__tip">
+            <p>只能上传jpg/png/svg图片，请上传120*40左右的白色logo，用于透明导航的首页展示</p>
           </div>
         </el-upload>
       </el-form-item>
@@ -42,9 +59,11 @@ export default {
         id: '',
         title: '',
         logoUrl: '',
+        whiteUrl: '',
         siteId: this.$store.state.content.site.id,
       },
       fileList: [],
+      fileList1: [],
     }
   },
   mounted () {
@@ -59,13 +78,17 @@ export default {
           name: 'logo.jpg',
           url: res.data.logoUrl
         }] : []
+        this.fileList1 = res.data.whiteUrl ? [{
+          name: 'logo.jpg',
+          url: res.data.whiteUrl
+        }] : []
       }
     },
     handleExceed () { // 上传文件
       Util.warningMsg("当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！")
     },
     // 附件上传成功
-    uploadSuccess (data) {
+    uploadSuccess (data, prop) {
       if (data.code === 401) {
         Util.errorMsg("登录过期，请重新登录")
         setTimeout(() => {
@@ -75,19 +98,33 @@ export default {
       }
       this.form.logoUrl = data.url
     },
-    uploadError (err, file, fileList) {
+    // 附件上传成功
+    uploadSuccess1 (data, prop) {
+      if (data.code === 401) {
+        Util.errorMsg("登录过期，请重新登录")
+        setTimeout(() => {
+          this.$store.dispatch('user/logout')
+        }, 1000)
+        return false
+      }
+      this.form.whiteUrl = data.url
+    },
+    uploadError () {
       this.$message({
         message: "上传出错，请重试！",
         type: "error",
         center: true
       });
     },
-    beforeRemove (file, fileList) {
+    beforeRemove (file) {
       return this.$confirm(`确定移除 ${file.name}？`);
     },
     handleRemove () {
       this.form.logoUrl = ''
     },
+    handleRemove1 () {
+      this.form.whiteUrl = ''
+    },
     async save () {
       const { form } = this
       // if (!form.logoUrl) return Util.errorMsg('请上传logo！')