官网页面编写+接口对接

package.json

@@ -7,6 +7,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "@wangeditor/editor-for-vue": "^1.0.2",
     "axios": "^1.5.0",
     "core-js": "^3.8.3",
     "echarts": "^5.4.3",
@@ -21,8 +22,8 @@
     "vue": "^2.7.14",
     "vue-router": "^3.5.1",
     "vue-seamless-scroll": "^1.1.23",
-    "vue-video-player": "^6.0.0",
+    "vuex": "^3.6.2",
-    "vuex": "^3.6.2"
+    "wangeditor": "^4.7.15"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~5.0.0",

src/App.vue

@@ -55,7 +55,7 @@ selectValue(e) {
   box-sizing: border-box;
   font-family: Microsoft YaHei;
   font-weight: 400;
-  color: #fff;
+  // color: #fff;
 }
 
 input::-webkit-outer-spin-button,
@@ -124,7 +124,12 @@ input::-webkit-inner-spin-button {
   background: linear-gradient(180deg, rgba(6, 72, 167, 0.5) 0%, rgba(6, 72, 167, 0) 100%);
 
 }
-
+.el-table{
+  .cell{
+    color: #fff;
+  }
+  
+}
 .input-50 {
   .input-title {
     font-size: 16px;

src/api/index.js

@@ -767,6 +767,15 @@ getIccid(data){
     website_getowpManagement(data){
       return sendGetRequest(`/website/getowpManagement`, data)
     },
+    website_addowp(data){
+      return sendPostRequest(`/website/addowp`, data)
+    },
+    website_updateowp(data){
+      return sendPutRequest(`/website/updateowp`, data)
+    },
+    website_delowp(data){
+      return sendDelRequest(`/website/delowp`, data)
+    },
     // 综合 产品/案例/新闻列表
     website_getowpabyowpidMan(data){
       return sendGetRequest(`/website/getowpabyowpidMan`, data)

src/assets/css/main.css

@@ -33,6 +33,7 @@
 
 .tips-model {
   padding: 10px;
+  color: #fff;
 }
 
 .tips-model .tips-model-title {
@@ -295,6 +296,7 @@ textarea {
 .warning-btn {
   justify-content: flex-end;
   margin-top: -70px;
+  color: #fff;
 }
 
 .warning-btn .btn.green {
@@ -303,6 +305,7 @@ textarea {
 
 .warning-model {
   padding: 0 30px 25px;
+  color: #fff;
 }
 
 .warning-model .input-main {
@@ -331,6 +334,7 @@ textarea {
 
 .warning-sel {
   width: 200px !important;
+  color: #fff;
 }
 
 .table-title {
@@ -385,6 +389,7 @@ textarea {
   background: url(../image/index-background.png) no-repeat;
   background-size: cover;
   background-position: center top;
+  color: #fff;
 }
 
 .index .no-list {
@@ -438,6 +443,7 @@ textarea {
   position: relative;
   z-index: 2;
   font-size: 35px;
+  color: #fff;
 }
 
 .index .header .header-center {
@@ -608,6 +614,7 @@ textarea {
   align-items: center;
   flex-wrap: wrap;
   margin-top: 15px;
+  color: #fff;
 }
 
 .input-view > div {
@@ -622,6 +629,10 @@ textarea {
   padding: 0 8px;
 }
 
+.input-sel {
+  color: #fff;
+}
+
 .input-sel > span {
   padding: 0 10px;
 }
@@ -697,6 +708,10 @@ textarea {
   width: 200px !important;
 }
 
+.input-main {
+  color: #fff;
+}
+
 .input-main span {
   padding: 0 10px;
 }
@@ -748,6 +763,7 @@ textarea {
   display: flex;
   align-items: center;
   margin: 0 15px 0 0 !important;
+  color: #fff;
 }
 
 .number-view > div {
@@ -773,6 +789,7 @@ textarea {
   flex-wrap: wrap;
   display: flex;
   align-items: center;
+  color: #fff;
 }
 
 .input-main-60.table-input {
@@ -826,6 +843,7 @@ textarea {
   flex-wrap: wrap;
   display: flex;
   align-items: center;
+  color: #fff;
 }
 
 .input-main-one.table-input {
@@ -871,6 +889,7 @@ textarea {
   width: 300px;
   border: none;
   background-color: #014781;
+  color: #fff;
 }
 
 .el-dropdown-menu.input-menu-180 {
@@ -951,6 +970,7 @@ textarea {
 }
 
 .formula {
+  color: #fff;
   width: 100%;
   height: 100%;
   padding: 20px;
@@ -970,6 +990,7 @@ textarea {
 .table-view {
   background: transparent;
   margin-top: 30px;
+  color: #fff;
 }
 
 .table-view .cell {
@@ -1181,6 +1202,7 @@ textarea {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+  color: #fff;
 }
 
 .flex-view > div {
@@ -1339,6 +1361,10 @@ textarea {
   border-color: #0294E2;
 }
 
+.PIDSet {
+  color: #fff;
+}
+
 .PIDSet .flex-view {
   border-bottom: none;
 }
@@ -1442,6 +1468,10 @@ textarea {
   min-height: 101px;
 }
 
+.upload {
+  color: #fff;
+}
+
 .upload .upload-view {
   width: 520px;
   height: 520px;
@@ -1493,6 +1523,7 @@ textarea {
 
 .sensorSet {
   height: 100%;
+  color: #fff;
 }
 
 .sensorSet .sensor-view {
@@ -1664,6 +1695,10 @@ textarea {
   padding: 0 20px;
 }
 
+.el-dialog__wrapper {
+  color: #fff;
+}
+
 .el-dialog__wrapper .el-dialog {
   background: rgba(0, 59, 114, 0.8);
   border: 2px solid rgba(0, 186, 255, 0.35);
@@ -1751,6 +1786,7 @@ textarea {
 
 .el-dialog__wrapper .el-dialog .el-dialog__body .model1-top .model-right > div .input-main-60 {
   width: auto;
+  color: #fff;
 }
 
 .el-dialog__wrapper .el-dialog .el-dialog__body .model1-bottom {
@@ -1801,6 +1837,10 @@ textarea {
   flex-shrink: 0;
 }
 
+.login {
+  color: #fff;
+}
+
 .login .login-header {
   position: relative;
   width: 100%;
@@ -1946,6 +1986,7 @@ textarea {
 
 .dataModel {
   height: 650px;
+  color: #fff;
 }
 
 .dataModel .view-new {
@@ -2004,6 +2045,7 @@ textarea {
   padding: 20px;
   flex-direction: column;
   justify-content: unset;
+  color: #fff;
 }
 
 .realTime .new-data {
@@ -2884,6 +2926,10 @@ textarea {
   margin-bottom: 10px;
 }
 
+.synthesis-con {
+  color: #fff;
+}
+
 .synthesis-con .synthesis-content {
   width: 100%;
   display: flex;
@@ -3042,6 +3088,7 @@ textarea {
 .vrcode .el-menu-item {
   display: flex;
   align-items: center;
+  color: #fff;
 }
 
 .vrcode .el-submenu__title .img,
@@ -3278,7 +3325,7 @@ textarea {
   margin-bottom: 10px;
 }
 
-.manage-input input {
+.manage-input input, .manage-input .input {
   width: 240px;
   height: 44px;
   background: rgba(0, 186, 255, 0.15);
@@ -3287,9 +3334,10 @@ textarea {
   font-family: Microsoft YaHei;
   font-weight: 400;
   color: #FFFFFF;
+  cursor: pointer;
 }
 
-.manage-input input::placeholder {
+.manage-input input::placeholder, .manage-input .input::placeholder {
   color: #92B1D0;
 }
 
@@ -3484,6 +3532,10 @@ textarea {
   transform: translateY(-50%);
 }
 
+.vrcode-model {
+  color: #fff;
+}
+
 .vrcode-model.manage-model .el-dialog {
   background: rgba(0, 59, 114, 0.8);
   border: 2px solid rgba(0, 186, 255, 0.35);
@@ -3497,6 +3549,14 @@ textarea {
   grid-column-gap: 20px;
 }
 
+.vrcode-model.manage-model .el-dialog__body .vrcode-content.grid-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.vrcode-model.manage-model .el-dialog__body .vrcode-content.flex-no {
+  display: block;
+}
+
 .vrcode-model.manage-model .el-dialog__footer {
   padding: 15px 22px;
   border-top: 1px solid rgba(0, 180, 255, 0.35);
@@ -3506,7 +3566,7 @@ textarea {
   justify-content: flex-start;
 }
 
-.vrcode-model.manage-model .manage-right .manage-img {
+.vrcode-model.manage-model .manage-img {
   width: 380px;
   position: relative;
   background: rgba(0, 132, 255, 0.15);
@@ -3518,20 +3578,21 @@ textarea {
   padding: 10px;
 }
 
-.vrcode-model.manage-model .manage-right .manage-img img {
+.vrcode-model.manage-model .manage-img img {
   width: 360px;
   height: auto;
   min-height: 200px;
+  max-height: 360px;
 }
 
-.vrcode-model.manage-model .manage-right .manage-img .upload-img {
+.vrcode-model.manage-model .manage-img .upload-img {
   width: 100px;
   height: 100px;
   min-height: unset;
   cursor: pointer;
 }
 
-.vrcode-model.manage-model .manage-right .manage-img #sel-img {
+.vrcode-model.manage-model .manage-img #sel-img, .vrcode-model.manage-model .manage-img #sel-img1 {
   width: 0;
   height: 0;
   position: absolute;
@@ -3597,6 +3658,7 @@ textarea {
   position: relative;
   font-weight: bold;
   text-align: left;
+  color: #fff;
 }
 
 .vrcode-model .vrcode-model-title.vrcode-model-title-282 {
@@ -3934,6 +3996,7 @@ textarea {
   max-height: 700px;
   overflow: auto;
   padding: 0 30px;
+  color: #fff;
 }
 
 .model-sel > div {
@@ -3951,6 +4014,7 @@ textarea {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  color: #fff;
 }
 
 .setsuyuan .setsuyuan-page {

src/assets/css/main.scss

@@ -35,6 +35,7 @@
 }
 .tips-model{
     padding: 10px;
+    color: #fff;
     .tips-model-title{
         font-size: 18px;
         font-weight: bold;
@@ -311,6 +312,7 @@ textarea{
     justify-content: flex-end;
     margin-top: -70px;
 
+    color: #fff;
     .btn.green {
         opacity: 1;
     }
@@ -319,6 +321,7 @@ textarea{
 .warning-model {
     padding: 0 30px 25px;
 
+    color: #fff;
     .input-main {
         margin: 0;
 
@@ -346,6 +349,7 @@ textarea{
 
 .warning-sel {
     width: 200px !important;
+    color: #fff;
 }
 
 .table-title {
@@ -402,6 +406,7 @@ textarea{
     background-size: cover;
     background-position: center top;
 
+    color: #fff;
     .no-list {
         color: #fff;
         display: flex;
@@ -447,6 +452,7 @@ textarea{
             .logo-title{
                 position: relative;z-index: 2;
                 font-size: 35px;
+                color: #fff;
             }
 
         }
@@ -626,6 +632,7 @@ textarea{
     flex-wrap: wrap;
     margin-top: 15px;
 
+    color: #fff;
     >div {
         flex-shrink: 0;
         margin-right: 20px;
@@ -641,6 +648,7 @@ textarea{
 }
 
 .input-sel {
+    color: #fff;
     >span {
         padding: 0 10px;
     }
@@ -723,6 +731,8 @@ textarea{
     }
 }
 .input-main {
+    
+    color: #fff;
     span {
         padding: 0 10px;
     }
@@ -786,6 +796,7 @@ textarea{
     align-items: center;
     margin: 0 15px 0 0 !important;
 
+    color: #fff;
     >div {
         width: 30px;
         height: 30px;
@@ -811,6 +822,7 @@ textarea{
     flex-wrap: wrap;
     display: flex;
     align-items: center;
+    color: #fff;
 
     &.table-input {
         justify-content: center;
@@ -865,6 +877,7 @@ textarea{
     display: flex;
     align-items: center;
 
+    color: #fff;
     &.table-input {
         justify-content: center;
 
@@ -910,6 +923,7 @@ textarea{
     border: none;
     background-color: #014781;
 
+    color: #fff;
     &.input-menu-180 {
         width: 180px;
     }
@@ -989,6 +1003,7 @@ textarea{
 }
 
 .formula {
+    color: #fff;
     width: 100%;
     height: 100%;
     padding: 20px;
@@ -1012,6 +1027,7 @@ textarea{
     background: transparent;
     margin-top: 30px;
 
+    color: #fff;
     .cell {
         text-align: center;
     }
@@ -1225,7 +1241,7 @@ textarea{
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-
+    color: #fff;
     >div {
         flex-shrink: 0;
         margin: 4.5px 0;
@@ -1388,6 +1404,7 @@ textarea{
 }
 
 .PIDSet {
+    color: #fff;
     .flex-view {
         border-bottom: none;
     }
@@ -1495,6 +1512,7 @@ textarea{
 }
 
 .upload {
+    color: #fff;
     .upload-view {
         width: 520px;
         height: 520px;
@@ -1553,6 +1571,7 @@ textarea{
 .sensorSet {
     height: 100%;
 
+    color: #fff;
     .sensor-view {
         display: flex;
         align-items: center;
@@ -1740,6 +1759,7 @@ textarea{
 }
 
 .el-dialog__wrapper {
+    color: #fff;
     .el-dialog {
         background: rgba(0, 59, 114, 0.8);
         border: 2px solid rgba(0, 186, 255, 0.35);
@@ -1829,6 +1849,7 @@ textarea{
 
                         .input-main-60 {
                             width: auto;
+                            color: #fff;
                         }
                     }
                 }
@@ -1897,6 +1918,7 @@ textarea{
 
 
 .login {
+    color: #fff;
     .login-header {
         position: relative;
         width: 100%;
@@ -2046,6 +2068,7 @@ textarea{
 
 .dataModel {
     height: 650px;
+    color: #fff;
     .view-new {
         width: 100%;
         display: flex;
@@ -2103,6 +2126,7 @@ textarea{
     padding: 20px;
     flex-direction: column;
     justify-content: unset;
+    color: #fff;
     @extend .scroll;
 
     .new-data {
@@ -3055,6 +3079,7 @@ textarea{
 }
 
 .synthesis-con {
+    color: #fff;
     .synthesis-content {
         width: 100%;
         display: flex;
@@ -3223,7 +3248,7 @@ textarea{
     .el-menu-item {
         display: flex;
         align-items: center;
-
+        color: #fff;
         .img {
             width: 16px;
             height: 16px;
@@ -3479,7 +3504,7 @@ textarea{
         margin-bottom: 10px;
     }
 
-    input {
+    input,.input {
         width: 240px;
         height: 44px;
         background: rgba(0, 186, 255, 0.15);
@@ -3488,12 +3513,13 @@ textarea{
         font-family: Microsoft YaHei;
         font-weight: 400;
         color: #FFFFFF;
-
+        cursor: pointer;
         &::placeholder {
             color: #92B1D0;
         }
     }
 }
+
 .m-t-34{
     margin-top: 34px;
 }
@@ -3675,9 +3701,11 @@ textarea{
     }
 }
 .vrcode-model {
+    color: #fff;
     &.manage-model {
         .el-dialog {
             background: rgba(0, 59, 114, 0.8);
+           
             border: 2px solid rgba(0, 186, 255, 0.35);
         }
 
@@ -3688,6 +3716,13 @@ textarea{
                 grid-template-columns: repeat(2, 1fr);
                 grid-row-gap: 0px; //纵向间隔
                 grid-column-gap: 20px; //横向间隔
+                &.grid-3{
+                    grid-template-columns: repeat(3, 1fr);
+                }
+                
+                &.flex-no{
+                    display: block;
+                }
             }
         }
 
@@ -3699,39 +3734,40 @@ textarea{
         .dialog-footer {
             justify-content: flex-start;
         }
-
+        .manage-img {
-        .manage-right {
+            width: 380px;
-            .manage-img {
+            position: relative;
-                width: 380px;
+            // height: 290px;
-                position: relative;
+            background: rgba(0, 132, 255, 0.15);
-                // height: 290px;
+            border: 2px solid rgba(0, 132, 255, 0.35);
-                background: rgba(0, 132, 255, 0.15);
+            min-height: 200px;
-                border: 2px solid rgba(0, 132, 255, 0.35);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            img {
+                width: 360px;
+                height: auto;
                 min-height: 200px;
-                display: flex;
+                max-height: 360px;
-                align-items: center;
-                justify-content: center;
-                img {
-                    width: 360px;
-                    height: auto;
-                    min-height: 200px;
-                }
-                .upload-img{
-                    width: 100px;
-                    height: 100px;
-                    min-height: unset;
-                    cursor: pointer;
-                }
-                padding: 10px;
-
-                #sel-img {
-                    width: 0;
-                    height: 0;
-                    position: absolute;
-                    left: 0;
-                    top: 0;
-                }
             }
+            .upload-img{
+                width: 100px;
+                height: 100px;
+                min-height: unset;
+                cursor: pointer;
+            }
+            padding: 10px;
+
+            #sel-img,#sel-img1 {
+                width: 0;
+                height: 0;
+                position: absolute;
+                left: 0;
+                top: 0;
+            }
+        }
+        .manage-right {
+    
         }
 
         .manage-text {
@@ -3794,7 +3830,7 @@ textarea{
         position: relative;
         font-weight: bold;
         text-align: left;
-
+        color: #fff;
         &.vrcode-model-title-282 {
             background: url(../img/vrcode-title-282.png) no-repeat;
             background-size: 282px 43px;
@@ -4144,7 +4180,7 @@ color: #FF9999;
     max-height: 700px;
     overflow: auto;
     padding: 0 30px;
-
+    color: #fff;
     >div {
         width: 33%;
         white-space: nowrap;
@@ -4163,7 +4199,7 @@ color: #FF9999;
     display: flex;
     align-items: center;
     justify-content: space-between;
-
+    color: #fff;
     .setsuyuan-page {
         width: 375px;
         height: 736px;

src/router/index.js

@@ -149,6 +149,14 @@ const routes = [
       path: '/officialWebsiteCase',
       name: 'officialWebsiteCase',
       component: () => import('../views/officialWebsite/case.vue')
+    }, {
+      path: '/officialWebsiteNews',
+      name: 'officialWebsiteNews',
+      component: () => import('../views/officialWebsite/new.vue')
+    }, {
+      path: '/officialWebsiteProduct',
+      name: 'officialWebsiteProduct',
+      component: () => import('../views/officialWebsite/product.vue')
     },
     ]
     }, 

src/views/index.vue

@@ -104,7 +104,7 @@ export default {
                 // { name: '设备菜单', router: '', routerList: [], img: require('../assets/image/header-img5.png') },
                 //systemManage systemManage
                 // manage
-                { name: '管理', router: 'manage', routerList: ['manage','dataDevice','deviceStatusSet','officialWebsiteBanner','officialWebsiteCase','deviceSet','deviceInfoManage','weatherData','mobileControl','userInfoControl','deviceManage','videoManage'], img: require('../assets/image/header-img6.png') },
+                { name: '管理', router: 'manage', routerList: ['manage','dataDevice','deviceStatusSet','officialWebsiteBanner','officialWebsiteProduct','officialWebsiteCase','officialWebsiteNews','deviceSet','deviceInfoManage','weatherData','mobileControl','userInfoControl','deviceManage','videoManage'], img: require('../assets/image/header-img6.png') },
 
                 { name: '大数据', router: 'largeScreen', routerList: ['largeScreen'], img: require('../assets/image/header-img8.png') }
             ],
@@ -138,6 +138,8 @@ export default {
 'mobileControl',
 'userInfoControl',
 'officialWebsiteCase',
+'officialWebsiteNews',
+'officialWebsiteProduct',
 'deviceManage',
 'videoManage',
 'officialWebsiteBanner',],
@@ -407,7 +409,9 @@ export default {
                     {deviceTypeName:'用户信息管理',router:'userInfoControl',index:6},
                     {deviceTypeName:'设备管理',router:'deviceManage',index:7},
                      {deviceTypeName:'官网顶部轮播图管理',router:'officialWebsiteBanner',index:8},
+                     {deviceTypeName:'官网产品管理',router:'officialWebsiteProduct',index:11},
                      {deviceTypeName:'官网案例管理',router:'officialWebsiteCase',index:9},
+                     {deviceTypeName:'官网新闻管理',router:'officialWebsiteNews',index:10},
                     // {deviceTypeName:'摄像头信息管理',router:'videoManage',index:8},
                 ] },
             ]

src/views/officialWebsite/case.vue

@@ -81,14 +81,7 @@
               placeholder="请输入排序"
             />
           </div>
-              <div class="manage-textarea">
+             
-               <div class="input-title">案例中文特点(以回车键换行)</div>
-               <textarea v-model="nowData.detailedIntroductionText" name="" id="" cols="30" rows="10"></textarea>
-          </div>
-            <div class="manage-textarea">
-               <div class="input-title">案例英文特点(以回车键换行)</div>
-               <textarea v-model="nowData.detailedIntroductionEnText" name="" id="" cols="30" rows="10"></textarea>
-          </div>
         </div>
         <div class="manage-right">
           <div class="manage-input">
@@ -122,6 +115,16 @@
           
         </div>
       </div>
+      <div class="vrcode-content flex-no" v-if="nowData">
+          <div class="manage-textarea">
+               <div class="input-title">案例中文特点(以回车键换行)</div>
+               <textarea v-model="nowData.detailedIntroductionText" name="" id="" cols="30" rows="10"></textarea>
+          </div>
+            <div class="manage-textarea">
+               <div class="input-title">案例英文特点(以回车键换行)</div>
+               <textarea v-model="nowData.detailedIntroductionEnText" name="" id="" cols="30" rows="10"></textarea>
+          </div>
+      </div>
       <span slot="footer" class="dialog-footer">
         <div class="vrcode-btn blue-btn w-100" @click="changeAddModel">
           确定

src/views/officialWebsite/new.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="videoManage manage-page">
     <div class="flex-view flex-title">
-      <div class="table-title">官网案例管理</div>
+      <div class="table-title">官网新闻管理</div>
       <div class="table-title-btn blue" @click="openModel({}, 0)">
         <img src="../../assets/manageImg/add-btn.png" alt="" />添加
       </div>
     </div>
+
     <div class="table-view">
       <el-table
         :data="tableData"
@@ -15,9 +16,16 @@
       >
         <el-table-column prop="detailedIntroductionSort" label="排序">
         </el-table-column>
-         <el-table-column prop="detailedIntroductionName" label="案例名字">
+        <el-table-column prop="detailedIntroductionName" label="新闻标题">
         </el-table-column>
-           <el-table-column prop="detailedIntroductionEnName" label="案例英文名字">
+        <el-table-column prop="detailedIntroductionEnName" label="新闻英文标题">
+        </el-table-column>
+        <el-table-column prop="newsTime" label="日期">
+          <template slot-scope="scope">
+            <div class="table-flex">
+              <div>{{ scope.row.newsTime | formatDate }}</div>
+            </div>
+          </template>
         </el-table-column>
         <el-table-column label="操作">
           <template slot-scope="scope">
@@ -54,25 +62,25 @@
       <div class="vrcode-model-title">
         {{ modelName }}
       </div>
+
       <div class="vrcode-content" v-if="nowData">
         <div class="manage-left">
           <div class="manage-input">
-            <div class="input-title">案例名字</div>
+            <div class="input-title">新闻标题</div>
             <input
               type="text"
               v-model="nowData.detailedIntroductionName"
-              placeholder="请输入案例名字"
+              placeholder="请输入新闻标题"
             />
           </div>
           <div class="manage-input">
-            <div class="input-title">案例英文名字</div>
+            <div class="input-title">新闻英文标题</div>
             <input
               type="text"
               v-model="nowData.detailedIntroductionEnName"
-              placeholder="请输入案例英文名字"
+              placeholder="请输入新闻英文标题"
             />
           </div>
-        
           <div class="manage-input">
             <div class="input-title">排序</div>
             <input
@@ -81,18 +89,40 @@
               placeholder="请输入排序"
             />
           </div>
-              <div class="manage-textarea">
+
-               <div class="input-title">案例中文特点(以回车键换行)</div>
+          <div class="manage-input">
-               <textarea v-model="nowData.detailedIntroductionText" name="" id="" cols="30" rows="10"></textarea>
+            <div class="input-title">新闻日期选择</div>
+            <el-date-picker
+              v-model="nowData.newsTime"
+              type="date"
+              placeholder="选择日期"
+            >
+            </el-date-picker>
           </div>
-            <div class="manage-textarea">
+          <div class="manage-input">
-               <div class="input-title">案例英文特点(以回车键换行)</div>
+            <div class="input-title">新闻内容编写</div>
-               <textarea v-model="nowData.detailedIntroductionEnText" name="" id="" cols="30" rows="10"></textarea>
+            <div></div>
+            <input
+              @click="openNewsModel(0)"
+              type="text"
+              v-model="nowData.detailedIntroductionText"
+              placeholder="点击进行编写内容"
+            />
+          </div>
+          <div class="manage-input">
+            <div class="input-title">新闻英文内容编写</div>
+            <input
+              @click="openNewsModel(1)"
+              type="text"
+              v-model="nowData.detailedIntroductionEnText"
+              placeholder="点击进行编写内容"
+            />
           </div>
         </div>
+
         <div class="manage-right">
           <div class="manage-input">
-            <div class="input-title">案例图片(图片大小不能超过2MB)</div>
+            <div class="input-title">新闻展示图片(图片大小不能超过2MB)</div>
           </div>
           <div class="manage-img" v-loading="loading">
             <label for="sel-img">
@@ -118,8 +148,6 @@
               @change="handleImageChange($event, 0)"
             />
           </div>
-      
-          
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
@@ -131,12 +159,62 @@
         </div>
       </span>
     </el-dialog>
+
+    <el-dialog
+      :close-on-click-modal="false"
+      title="新闻内容编写"
+      top="10vh"
+      :visible.sync="newsModel"
+      width="1000px"
+      class="vrcode-model manage-model"
+      :append-to-body="true"
+    >
+      <div class="vrcode-model-title">
+        新闻{{ newsEdit == 1 ? "英文" : "中文" }}内容编写
+      </div>
+
+      <div class="vrcode-content flex-no">
+        <div style="border: 1px solid #ccc; width: 100%" v-loading="upLoading">
+          <Toolbar
+            style="border-bottom: 1px solid #ccc"
+            :editor="editor"
+            :defaultConfig="toolbarConfig"
+            :mode="mode"
+          />
+          <Editor
+            style="height: 500px; overflow-y: hidden"
+            v-model="html"
+            :defaultConfig="editorConfig"
+            :mode="mode"
+            @onCreated="handleCreated"
+            @onChange="handleChange"
+          />
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <div class="vrcode-btn blue-btn w-100" @click="changeNewModel">
+          确定
+        </div>
+        <div class="vrcode-btn cancle-btn w-100" @click="closeNewsModel">
+          取消
+        </div>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { DomEditor } from "@wangeditor/editor";
 export default {
+  components: {
+    Editor,
+    Toolbar,
+  },
+
   data() {
     return {
+      newsModel: false,
+      newsEdit: 0, //编辑/添加的是中文还是英文 0是中文1是英文
       tableData: [],
       addModel: false,
       nowData: {
@@ -146,38 +224,151 @@ export default {
         detailedIntroductionText: "",
         detailedIntroductionName: "",
         detailedIntroductionSort: "",
-        type:2,
+        newsTime: "",
+        type: 3,
       },
       modelName: "添加",
       typeSelList: [],
       TypeSel: "",
       selId: "",
       loading: false,
+
+      //
+      upLoading: false,
+      editor: null,
+      html: "",
+      mode: "default",
+      editorConfig: {
+        placeholder: "请编写新闻内容...",
+        backColor: "red", // 背景颜色
+        MENU_CONF: {
+          uploadImage: {
+            customUpload: this.uploaadImg,
+          },
+          uploadVideo: {
+            customUpload: this.uploaadVideo,
+          },
+        },
+      },
+      toolbarConfig: {},
     };
   },
+  filters: {
+    formatDate: function (value) {
+      if (!value) return "";
+      const date = new Date(value);
+
+      // 处理时区问题，转换为本地时间
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, "0");
+      const day = String(date.getDate()).padStart(2, "0");
+
+      return `${year}-${month}-${day}`;
+    },
+  },
   mounted() {
     this.dataInit();
   },
+  beforeDestroy() {
+    const editor = this.editor;
+    if (editor == null) return;
+    editor.destroy(); // 销毁编辑器
+  },
   methods: {
     dataInit() {
       this.api.website_getowpabyowpidMan().then((res) => {
         if (res.data.code == 200) {
-          this.tableData = res.data.data.filter(item => item && item.type === 2);
+          this.tableData = res.data.data.filter(
+            (item) => item && item.type === 3
+          );
         }
       });
     },
+    handleCreated(editor) {
+      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
+      //   设置工具栏详情
+      this.toolbarConfig = {
+        excludeKeys: [
+          "insertVideo",
+          "uploadVideo",
+          "group-video",
+          "fullScreen",
+        ],
+      };
+    },
+    closeNewsModel() {
+      if (this.upLoading) {
+        this.$message("请等待图片上传完成");
+        return;
+      }
+      this.html = "";
+      this.newsModel = false;
+    },
+    // 新闻弹窗点击确定
+    changeNewModel() {
+      if (this.newsEdit == 0) {
+        this.nowData.detailedIntroductionText = this.html;
+      } else {
+        this.nowData.detailedIntroductionEnText = this.html;
+      }
+      this.newsModel = false;
+      this.newsEdit = 0;
+    },
+    // 打开新闻页面 0是中文编辑 1是英文
+    openNewsModel(type) {
+      if (type == 0) {
+        this.html = this.nowData.detailedIntroductionText
+          ? this.nowData.detailedIntroductionText
+          : "";
+      } else {
+        this.html = this.nowData.detailedIntroductionEnText
+          ? this.nowData.detailedIntroductionEnText
+          : "";
+      }
+      this.newsEdit = type;
+      this.newsModel = true;
+    },
+    handleChange(content) {
+      const toolbar = DomEditor.getToolbar(content);
+      //   查看工具栏列表toolbar.getConfig().toolbarKeys
+    },
+    // 上传图片到线上 并且插入到富文本编辑器中
+    async uploaadImg(file, insertFn) {
+      // 处理入参
+      this.upLoading = true;
+      var data = { file: file };
+      await this.api
+        .websiteUploadImage(data)
+        .then((res) => {
+          this.upLoading = false;
+          if (res.data.code == 200) {
+            this.$message.success("插入图片成功");
+            insertFn(res.data.msg); // 页面插入图片
+          } else {
+            this.$message.error(res.data.msg);
+          }
+        })
+        .catch((err) => {
+          this.upLoading = false;
+          this.$message.error("插入图片失败");
+        });
+    },
+    uploaadVideo(file, insertFn) {
+      this.$emit("uploadVideo", file, insertFn);
+    },
+
     openModel(item, type) {
       if (type == 0) {
         this.modelName = "添加";
         this.addModel = true;
         this.nowData = {
           detailedIntroductionImage: "",
-        detailedIntroductionEnName: "",
+          detailedIntroductionEnName: "",
-        detailedIntroductionEnText: "",
+          detailedIntroductionEnText: "",
-        detailedIntroductionText: "",
+          detailedIntroductionText: "",
-        detailedIntroductionName: "",
+          detailedIntroductionName: "",
-        detailedIntroductionSort: "",
+          detailedIntroductionSort: "",
-        type:2,
+          type: 3,
         };
       } else {
         this.modelName = "编辑";
@@ -185,6 +376,7 @@ export default {
         this.addModel = true;
       }
     },
+
     changeAddModel() {
       this.Addloading = this.$loading({
         lock: true,
@@ -192,9 +384,9 @@ export default {
         spinner: "el-icon-loading",
         background: "rgba(0, 0, 0, 0.7)",
       });
-      
+
       if (this.modelName == "编辑") {
-        var data = { ...this.nowData,id:this.nowData.id.toString() };
+        var data = { ...this.nowData, id: this.nowData.id.toString() };
         this.api.website_updateops(data).then((res) => {
           this.Addloading.close();
           if (res.data.code == 200) {
@@ -252,7 +444,7 @@ export default {
             this.nowData.detailedIntroductionImage = res.data.msg;
             this.$refs.fileInput.value = "";
           } else {
-             this.$message.error(res.data.msg);
+            this.$message.error(res.data.msg);
           }
         });
       };
@@ -281,4 +473,6 @@ export default {
   },
 };
 </script>
+
+<style src="@wangeditor/editor/dist/css/style.css"></style>
 <style lang="scss"></style>

src/views/officialWebsite/product.vue

@@ -0,0 +1,608 @@
+<template>
+  <div class="videoManage manage-page">
+    <div class="flex-view flex-title">
+      <div class="table-title">官网产品列表管理</div>
+      <div class="table-title-btn blue" @click="openModel1({}, 0)">
+        <img src="../../assets/manageImg/add-btn.png" alt="" />添加
+      </div>
+    </div>
+    <div class="table-view">
+      <el-table
+        :data="tableData1"
+        :row-class-name="tableRowClassName"
+        height="320"
+        style="width: 100%"
+      >
+        <el-table-column prop="productDisplaySort" label="排序">
+        </el-table-column>
+        <el-table-column prop="productDisplayName" label="产品列表名称">
+        </el-table-column>
+        <el-table-column prop="productDisplayEnName" label="产品列表英文名称">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <div class="table-flex">
+              <div class="table-operate blue" @click="openModel1(scope.row, 1)">
+                <img src="../../assets/manageImg/table-edit.png" alt="" />编辑
+              </div>
+              <el-popconfirm
+                @confirm="confirmDel1(scope.row)"
+                title="这一段内容确定删除吗？"
+                icon-color="red"
+              >
+                <div class="table-operate red" slot="reference">
+                  <img
+                    src="../../assets/manageImg/table-delete.png"
+                    alt=""
+                  />删除
+                </div>
+              </el-popconfirm>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="flex-view"></div>
+    <div class="flex-view flex-title">
+      <div class="table-title">官网产品管理</div>
+      <div class="table-title-btn blue" @click="openModel({}, 0)">
+        <img src="../../assets/manageImg/add-btn.png" alt="" />添加
+      </div>
+    </div>
+    <div class="table-view">
+      <el-table
+        :data="tableData"
+        :row-class-name="tableRowClassName"
+        height="320"
+        style="width: 100%"
+      >
+        <el-table-column prop="detailedIntroductionSort" label="排序">
+        </el-table-column>
+        <el-table-column prop="detailedIntroductionName" label="产品名字">
+        </el-table-column>
+        <el-table-column prop="detailedIntroductionEnName" label="产品英文名字">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <div class="table-flex">
+              <div class="table-operate blue" @click="openModel(scope.row, 1)">
+                <img src="../../assets/manageImg/table-edit.png" alt="" />编辑
+              </div>
+              <el-popconfirm
+                @confirm="confirmDel(scope.row)"
+                title="这一段内容确定删除吗？"
+                icon-color="red"
+              >
+                <div class="table-operate red" slot="reference">
+                  <img
+                    src="../../assets/manageImg/table-delete.png"
+                    alt=""
+                  />删除
+                </div>
+              </el-popconfirm>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 产品列表弹窗 -->
+       <el-dialog
+      :close-on-click-modal="false"
+      title="提示"
+      top="10vh"
+      :visible.sync="addModel1"
+      width="700px"
+      class="vrcode-model manage-model"
+      :append-to-body="true"
+    >
+      <div class="vrcode-model-title">
+        {{ modelName1 }}
+      </div>
+      <div class="vrcode-content" v-if="nowData1">
+        <div class="manage-left">
+          <div class="manage-input">
+            <div class="input-title">产品列表名字</div>
+            <input
+              type="text"
+              v-model="nowData1.productDisplayName"
+              placeholder="请输入产品列表名字"
+            />
+          </div>
+          <div class="manage-input">
+            <div class="input-title">产品列表英文名字</div>
+            <input
+              type="text"
+              v-model="nowData1.productDisplayEnName"
+              placeholder="请输入产品列表英文名字"
+            />
+          </div>
+
+          <div class="manage-input">
+            <div class="input-title">排序</div>
+            <input
+              type="number"
+              v-model="nowData1.productDisplaySort"
+              placeholder="请输入排序"
+            />
+        </div>
+        
+      </div>
+      <div class="manage-right">
+          <div class="manage-input">
+            <div class="input-title">产品列表图片(图片大小不能超过2MB)</div>
+          </div>
+          <div class="manage-img" v-loading="loading">
+            <label for="sel-img1">
+              <img
+                v-show="nowData1.productDisplayImages"
+                class=""
+                :src="nowData1.productDisplayImages"
+                alt="产品列表图片"
+              />
+              <img
+                class="upload-img"
+                v-show="!nowData1.productDisplayImages"
+                src="../../assets/img/upload-img.png"
+                alt=""
+              />
+            </label>
+            <input
+              ref="fileInput1"
+              type="file"
+              :multiple="false"
+              id="sel-img1"
+              accept="image/*"
+              @change="handleImageChange1($event, 0)"
+            />
+          </div>
+        </div>
+        </div>
+      <span slot="footer" class="dialog-footer">
+        <div class="vrcode-btn blue-btn w-100" @click="changeAddModel1">
+          确定
+        </div>
+        <div class="vrcode-btn cancle-btn w-100" @click="addModel1 = false">
+          取消
+        </div>
+      </span>
+    </el-dialog>
+    <!-- 产品详情弹窗 -->
+    <el-dialog
+      :close-on-click-modal="false"
+      title="提示"
+      top="10vh"
+      :visible.sync="addModel"
+      width="1050px"
+      class="vrcode-model manage-model"
+      :append-to-body="true"
+    >
+      <div class="vrcode-model-title">
+        {{ modelName }}
+      </div>
+      <div class="vrcode-content grid-3" v-if="nowData">
+        <div class="manage-left">
+          <div class="manage-input">
+            <div class="input-title">所属产品列表</div>
+           <el-select v-model="nowData.productId" placeholder="请选择">
+    <el-option
+      v-for="item in tableData1"
+      :key="item.id"
+      :label="item.productDisplayName"
+      :value="item.id">
+    </el-option>
+  </el-select>
+          </div>
+          <div class="manage-input">
+            <div class="input-title">产品名称</div>
+            <input
+              type="text"
+              v-model="nowData.detailedIntroductionName"
+              placeholder="请输入产品名称"
+            />
+          </div>
+          <div class="manage-input">
+            <div class="input-title">产品英文名称</div>
+            <input
+              type="text"
+              v-model="nowData.detailedIntroductionEnName"
+              placeholder="请输入产品英文名称"
+            />
+          </div>
+
+          <div class="manage-input">
+            <div class="input-title">排序</div>
+            <input
+              type="number"
+              v-model="nowData.detailedIntroductionSort"
+              placeholder="请输入排序"
+            />
+          </div>
+          <div class="manage-input">
+            <div class="input-title">产品详情小标题</div>
+            <input
+              type="text"
+              v-model="nowData.detailedIntroductionTextTitle"
+              placeholder="请输入产品详情小标题"
+            />
+          </div>
+          <div class="manage-input">
+            <div class="input-title">产品详情小标题英文</div>
+            <input
+              type="text"
+              v-model="nowData.detailedIntroductionTextEnTitle"
+              placeholder="请输入产品详情小标题英文"
+            />
+          </div>
+       
+        </div>
+        <div class="manage-right">
+           <div class="manage-textarea">
+            <div class="input-title">产品中文内容(以回车键换行)</div>
+            <textarea
+              v-model="nowData.detailedIntroductionTextContent"
+              name=""
+              id=""
+              cols="30"
+              rows="10"
+            ></textarea>
+          </div>
+          <div class="manage-textarea">
+            <div class="input-title">产品英文内容(以回车键换行)</div>
+            <textarea
+              v-model="nowData.detailedIntroductionTextEnContent"
+              name=""
+              id=""
+              cols="30"
+              rows="10"
+            ></textarea>
+          </div>
+               <div class="manage-textarea">
+            <div class="input-title">产品中文讲解(以回车键换行)</div>
+            <textarea
+              v-model="nowData.detailedIntroductionText"
+              name=""
+              id=""
+              cols="30"
+              rows="10"
+            ></textarea>
+          </div>
+          <div class="manage-textarea">
+            <div class="input-title">产品英文讲解(以回车键换行)</div>
+            <textarea
+              v-model="nowData.detailedIntroductionEnText"
+              name=""
+              id=""
+              cols="30"
+              rows="10"
+            ></textarea>
+          </div>
+          
+        </div>
+        <div class="manage-right">
+            <div class="manage-input">
+            <div class="input-title">产品详情图片(图片大小不能超过2MB)</div>
+          </div>
+          <div class="manage-img" v-loading="loading">
+            <label for="sel-img">
+              <img
+                v-show="nowData.detailedIntroductionImage"
+                class=""
+                :src="nowData.detailedIntroductionImage"
+                alt="案例图片"
+              />
+              <img
+                class="upload-img"
+                v-show="!nowData.detailedIntroductionImage"
+                src="../../assets/img/upload-img.png"
+                alt=""
+              />
+            </label>
+            <input
+              ref="fileInput"
+              type="file"
+              :multiple="false"
+              id="sel-img"
+              accept="image/*"
+              @change="handleImageChange($event, 0)"
+            />
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <div class="vrcode-btn blue-btn w-100" @click="changeAddModel">
+          确定
+        </div>
+        <div class="vrcode-btn cancle-btn w-100" @click="addModel = false">
+          取消
+        </div>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      // 产品列表
+      tableData1: [],
+      addModel1: false,
+      nowData1: {
+        productDisplayEnName: "",
+        productDisplayImages: "",
+        productDisplayName: "",
+        productDisplaySort: "",
+      },
+      modelName1: "添加",
+      typeSelList: [],
+      TypeSel: "",
+      selId: "",
+
+      // 产品信息
+      tableData: [],
+      addModel: false,
+      nowData: {
+         detailedIntroductionEnName: "",
+detailedIntroductionEnText: '',
+detailedIntroductionImage: '',
+detailedIntroductionName: "",
+detailedIntroductionSort:'',
+detailedIntroductionText: '',
+detailedIntroductionTextContent: '',
+detailedIntroductionTextEnContent: '',
+detailedIntroductionTextEnTitle:'',
+detailedIntroductionTextTitle:'',
+productId: "",
+          type: 1,
+      },
+      modelName: "添加",
+      selId: "",
+
+      loading: false,
+    };
+  },
+  mounted() {
+    this.dataInit();
+  },
+  methods: {
+    dataInit() {
+      this.api.website_getowpabyowpidMan().then((res) => {
+        if (res.data.code == 200) {
+          this.tableData = res.data.data.filter(
+            (item) => item && item.type === 1
+          );
+        }
+      });
+      this.api.website_getowpManagement().then((res) => {
+        if (res.data.code == 200) {
+          this.tableData1 = res.data.data;
+        }
+      });
+    },
+    // 产品详情
+    openModel(item, type) {
+      if (type == 0) {
+        this.modelName = "添加";
+        this.addModel = true;
+        this.nowData = {
+     detailedIntroductionEnName: "",
+detailedIntroductionEnText: '',
+detailedIntroductionImage: '',
+detailedIntroductionName: "",
+detailedIntroductionSort:'',
+detailedIntroductionText: '',
+detailedIntroductionTextContent: '',
+detailedIntroductionTextEnContent: '',
+detailedIntroductionTextEnTitle:'',
+detailedIntroductionTextTitle:'',
+productId: "",
+          type: 1,
+        };
+      } else {
+        this.modelName = "编辑";
+        this.nowData = JSON.parse(JSON.stringify(item));
+        this.addModel = true;
+      }
+    },
+    // 产品列表
+      openModel1(item, type) {
+      if (type == 0) {
+        this.modelName1 = "添加";
+        this.addModel1 = true;
+        this.nowData1 = {
+           productDisplayEnName: "",
+        productDisplayImages: "",
+        productDisplayName: "",
+        productDisplaySort: "",
+        };
+      } else {
+        this.modelName1 = "编辑";
+        this.nowData1 = JSON.parse(JSON.stringify(item));
+        this.addModel1 = true;
+      }
+    },
+    // 产品详情
+    changeAddModel() {
+      this.Addloading = this.$loading({
+        lock: true,
+        text: "加载中",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+
+      if (this.modelName == "编辑") {
+        var data = { ...this.nowData, id: this.nowData.id.toString() };
+        this.api.website_updateops(data).then((res) => {
+          this.Addloading.close();
+          if (res.data.code == 200) {
+            this.$message.success(res.data.msg);
+            this.dataInit();
+            this.addModel = false;
+          } else {
+            this.$message.error(res.data.msg);
+            this.addModel = false;
+          }
+        });
+      } else {
+        var data = { ...this.nowData };
+        this.api.website_addops(data).then((res) => {
+          this.Addloading.close();
+          if (res.data.code == 200) {
+            this.$message.success(res.data.msg);
+            this.dataInit();
+            this.addModel = false;
+          } else {
+            this.$message.error(res.data.msg);
+            this.addModel = false;
+          }
+        });
+      }
+    },
+    // 产品列表
+    changeAddModel1() {
+      this.Addloading = this.$loading({
+        lock: true,
+        text: "加载中",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+
+      if (this.modelName1 == "编辑") {
+        var data = { ...this.nowData1, id: this.nowData1.id.toString() };
+        this.api.website_updateowp(data).then((res) => {
+          this.Addloading.close();
+          if (res.data.code == 200) {
+            this.$message.success(res.data.msg);
+            this.dataInit();
+            this.addModel1 = false;
+          } else {
+            this.$message.error(res.data.msg);
+            this.addModel1 = false;
+          }
+        });
+      } else {
+        var data = { ...this.nowData1 };
+        this.api.website_addowp(data).then((res) => {
+          this.Addloading.close();
+          if (res.data.code == 200) {
+            this.$message.success(res.data.msg);
+            this.dataInit();
+            this.addModel1 = false;
+          } else {
+            this.$message.error(res.data.msg);
+            this.addModel1 = false;
+          }
+        });
+      }
+    },
+    // 产品详情
+    handleImageChange(event, type) {
+      this.loading = true;
+      if (event.target.files.length === 0) {
+        // 用户点击了取消
+        this.loading = false;
+        return;
+      }
+      const file = event.target.files[0];
+
+      const reader = new FileReader();
+      const maxSize = 2 * 1024 * 1024; // 2MB in bytes
+      if (file.size > maxSize) {
+        this.$message.error("图片大小不能超过2MB");
+        this.$refs.fileInput.value = "";
+        return;
+      }
+
+      reader.onload = (e) => {
+        const imageData = e.target.result;
+        const convertedFile = new File([imageData], file.name, {
+          type: file.type,
+        });
+        // 处理转换后的文件...
+
+        var data = { file: convertedFile };
+        this.api.websiteUploadImage(data).then((res) => {
+          this.loading = false;
+          if (res.data.code == 200) {
+            this.nowData.detailedIntroductionImage = res.data.msg;
+            this.$refs.fileInput.value = "";
+          } else {
+            this.$message.error(res.data.msg);
+          }
+        });
+      };
+      reader.readAsArrayBuffer(file);
+    },
+    // 产品列表
+        handleImageChange1(event, type) {
+      this.loading = true;
+      if (event.target.files.length === 0) {
+        // 用户点击了取消
+        this.loading = false;
+        return;
+      }
+      const file = event.target.files[0];
+
+      const reader = new FileReader();
+      const maxSize = 2 * 1024 * 1024; // 2MB in bytes
+      if (file.size > maxSize) {
+        this.$message.error("图片大小不能超过2MB");
+        this.$refs.fileInput1.value = "";
+        return;
+      }
+
+      reader.onload = (e) => {
+        const imageData = e.target.result;
+        const convertedFile = new File([imageData], file.name, {
+          type: file.type,
+        });
+        // 处理转换后的文件...
+
+        var data = { file: convertedFile };
+        this.api.websiteUploadImage(data).then((res) => {
+          this.loading = false;
+          if (res.data.code == 200) {
+            this.nowData1.productDisplayImages = res.data.msg;
+            this.$refs.fileInput1.value = "";
+          } else {
+            this.$message.error(res.data.msg);
+          }
+        });
+      };
+      reader.readAsArrayBuffer(file);
+    },
+    // 产品详情
+    confirmDel(item) {
+      var data = { id: item.id.toString() };
+      this.api.website_delops(data).then((res) => {
+        if (res.data.code == 200) {
+          this.dataInit();
+          this.$message.success(res.data.msg);
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      });
+    },
+    // 产品列表
+     confirmDel1(item) {
+      var data = { id: item.id.toString() };
+      this.api.website_delowp(data).then((res) => {
+        if (res.data.code == 200) {
+          this.dataInit();
+          this.$message.success(res.data.msg);
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      });
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 == 1) {
+        return "warning-row";
+      } else if (rowIndex % 2 == 0) {
+        return "success-row";
+      }
+      return "";
+    },
+  },
+};
+</script>
+<style lang="scss"></style>

src/views/officialWebsite/productList.vue

@@ -1,284 +0,0 @@
-<template>
-  <div class="videoManage manage-page">
-    <div class="flex-view flex-title">
-      <div class="table-title">官网案例管理</div>
-      <div class="table-title-btn blue" @click="openModel({}, 0)">
-        <img src="../../assets/manageImg/add-btn.png" alt="" />添加
-      </div>
-    </div>
-    <div class="table-view">
-      <el-table
-        :data="tableData"
-        :row-class-name="tableRowClassName"
-        height="620"
-        style="width: 100%"
-      >
-        <el-table-column prop="detailedIntroductionSort" label="排序">
-        </el-table-column>
-         <el-table-column prop="detailedIntroductionName" label="案例名字">
-        </el-table-column>
-           <el-table-column prop="detailedIntroductionEnName" label="案例英文名字">
-        </el-table-column>
-        <el-table-column label="操作">
-          <template slot-scope="scope">
-            <div class="table-flex">
-              <div class="table-operate blue" @click="openModel(scope.row, 1)">
-                <img src="../../assets/manageImg/table-edit.png" alt="" />编辑
-              </div>
-              <el-popconfirm
-                @confirm="confirmDel(scope.row)"
-                title="这一段内容确定删除吗？"
-                icon-color="red"
-              >
-                <div class="table-operate red" slot="reference">
-                  <img
-                    src="../../assets/manageImg/table-delete.png"
-                    alt=""
-                  />删除
-                </div>
-              </el-popconfirm>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <el-dialog
-      :close-on-click-modal="false"
-      title="提示"
-      top="10vh"
-      :visible.sync="addModel"
-      width="700px"
-      class="vrcode-model manage-model"
-      :append-to-body="true"
-    >
-      <div class="vrcode-model-title">
-        {{ modelName }}
-      </div>
-      <div class="vrcode-content" v-if="nowData">
-        <div class="manage-left">
-          <div class="manage-input">
-            <div class="input-title">案例名字</div>
-            <input
-              type="text"
-              v-model="nowData.detailedIntroductionName"
-              placeholder="请输入案例名字"
-            />
-          </div>
-          <div class="manage-input">
-            <div class="input-title">案例英文名字</div>
-            <input
-              type="text"
-              v-model="nowData.detailedIntroductionEnName"
-              placeholder="请输入案例英文名字"
-            />
-          </div>
-        
-          <div class="manage-input">
-            <div class="input-title">排序</div>
-            <input
-              type="number"
-              v-model="nowData.detailedIntroductionSort"
-              placeholder="请输入排序"
-            />
-          </div>
-              <div class="manage-textarea">
-               <div class="input-title">案例中文特点(以回车键换行)</div>
-               <textarea v-model="nowData.detailedIntroductionText" name="" id="" cols="30" rows="10"></textarea>
-          </div>
-            <div class="manage-textarea">
-               <div class="input-title">案例英文特点(以回车键换行)</div>
-               <textarea v-model="nowData.detailedIntroductionEnText" name="" id="" cols="30" rows="10"></textarea>
-          </div>
-        </div>
-        <div class="manage-right">
-          <div class="manage-input">
-            <div class="input-title">案例图片(图片大小不能超过2MB)</div>
-          </div>
-          <div class="manage-img" v-loading="loading">
-            <label for="sel-img">
-              <img
-                v-show="nowData.detailedIntroductionImage"
-                class=""
-                :src="nowData.detailedIntroductionImage"
-                alt="案例图片"
-              />
-              <img
-                class="upload-img"
-                v-show="!nowData.detailedIntroductionImage"
-                src="../../assets/img/upload-img.png"
-                alt=""
-              />
-            </label>
-            <input
-              ref="fileInput"
-              type="file"
-              :multiple="false"
-              id="sel-img"
-              accept="image/*"
-              @change="handleImageChange($event, 0)"
-            />
-          </div>
-      
-          
-        </div>
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <div class="vrcode-btn blue-btn w-100" @click="changeAddModel">
-          确定
-        </div>
-        <div class="vrcode-btn cancle-btn w-100" @click="addModel = false">
-          取消
-        </div>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      tableData: [],
-      addModel: false,
-      nowData: {
-        detailedIntroductionImage: "",
-        detailedIntroductionEnName: "",
-        detailedIntroductionEnText: "",
-        detailedIntroductionText: "",
-        detailedIntroductionName: "",
-        detailedIntroductionSort: "",
-        type:2,
-      },
-      modelName: "添加",
-      typeSelList: [],
-      TypeSel: "",
-      selId: "",
-      loading: false,
-    };
-  },
-  mounted() {
-    this.dataInit();
-  },
-  methods: {
-    dataInit() {
-      this.api.website_getowpabyowpidMan().then((res) => {
-        if (res.data.code == 200) {
-          this.tableData = res.data.data.filter(item => item && item.type === 2);
-        }
-      });
-    },
-    openModel(item, type) {
-      if (type == 0) {
-        this.modelName = "添加";
-        this.addModel = true;
-        this.nowData = {
-          detailedIntroductionImage: "",
-        detailedIntroductionEnName: "",
-        detailedIntroductionEnText: "",
-        detailedIntroductionText: "",
-        detailedIntroductionName: "",
-        detailedIntroductionSort: "",
-        type:2,
-        };
-      } else {
-        this.modelName = "编辑";
-        this.nowData = JSON.parse(JSON.stringify(item));
-        this.addModel = true;
-      }
-    },
-    changeAddModel() {
-      this.Addloading = this.$loading({
-        lock: true,
-        text: "加载中",
-        spinner: "el-icon-loading",
-        background: "rgba(0, 0, 0, 0.7)",
-      });
-      
-      if (this.modelName == "编辑") {
-        var data = { ...this.nowData,id:this.nowData.id.toString() };
-        this.api.website_updateops(data).then((res) => {
-          this.Addloading.close();
-          if (res.data.code == 200) {
-            this.$message.success(res.data.msg);
-            this.dataInit();
-            this.addModel = false;
-          } else {
-            this.$message.error(res.data.msg);
-            this.addModel = false;
-          }
-        });
-      } else {
-        var data = { ...this.nowData };
-        this.api.website_addops(data).then((res) => {
-          this.Addloading.close();
-          if (res.data.code == 200) {
-            this.$message.success(res.data.msg);
-            this.dataInit();
-            this.addModel = false;
-          } else {
-            this.$message.error(res.data.msg);
-            this.addModel = false;
-          }
-        });
-      }
-    },
-    handleImageChange(event, type) {
-      this.loading = true;
-      if (event.target.files.length === 0) {
-        // 用户点击了取消
-        this.loading = false;
-        return;
-      }
-      const file = event.target.files[0];
-
-      const reader = new FileReader();
-      const maxSize = 2 * 1024 * 1024; // 2MB in bytes
-      if (file.size > maxSize) {
-        this.$message.error("图片大小不能超过2MB");
-        this.$refs.fileInput.value = "";
-        return;
-      }
-
-      reader.onload = (e) => {
-        const imageData = e.target.result;
-        const convertedFile = new File([imageData], file.name, {
-          type: file.type,
-        });
-        // 处理转换后的文件...
-
-        var data = { file: convertedFile };
-        this.api.websiteUploadImage(data).then((res) => {
-          this.loading = false;
-          if (res.data.code == 200) {
-            this.nowData.detailedIntroductionImage = res.data.msg;
-            this.$refs.fileInput.value = "";
-          } else {
-             this.$message.error(res.data.msg);
-          }
-        });
-      };
-      reader.readAsArrayBuffer(file);
-    },
-
-    confirmDel(item) {
-      var data = { id: item.id.toString() };
-      this.api.website_delops(data).then((res) => {
-        if (res.data.code == 200) {
-          this.dataInit();
-          this.$message.success(res.data.msg);
-        } else {
-          this.$message.error(res.data.msg);
-        }
-      });
-    },
-    tableRowClassName({ row, rowIndex }) {
-      if (rowIndex % 2 == 1) {
-        return "warning-row";
-      } else if (rowIndex % 2 == 0) {
-        return "success-row";
-      }
-      return "";
-    },
-  },
-};
-</script>
-<style lang="scss"></style>