xiaomeng/wszhyWx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

官网页面编写+接口对接

Browse Source
This commit is contained in:
home孙 2025-05-29 18:25:40 +08:00
parent 34f060c1a4
commit d108544886
12 changed files with 1762 additions and 436 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

812
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -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",

9
src/App.vue
View File

@ -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;

9
src/api/index.js
View File

@ -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)

76
src/assets/css/main.css
View File

@ -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 {

112
src/assets/css/main.scss
View File

@ -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-right {
.manage-img {
width: 380px;
position: relative;
// height: 290px;
background: rgba(0, 132, 255, 0.15);
border: 2px solid rgba(0, 132, 255, 0.35);
.manage-img {
width: 380px;
position: relative;
// height: 290px;
background: rgba(0, 132, 255, 0.15);
border: 2px solid rgba(0, 132, 255, 0.35);
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
img {
width: 360px;
height: auto;
min-height: 200px;
display: flex;
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;
}
max-height: 360px;
}
.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;

8
src/router/index.js
View File

@ -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')
},
]
},

6
src/views/index.vue
View File

@ -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},
] },
]

19
src/views/officialWebsite/case.vue
View File

@ -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">
确定

250
src/views/officialWebsite/new.vue
View File

@ -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>
<textarea v-model="nowData.detailedIntroductionText" name="" id="" cols="30" rows="10"></textarea>
<div class="manage-input">
<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="input-title">案例英文特点(以回车键换行)</div>
<textarea v-model="nowData.detailedIntroductionEnText" name="" id="" cols="30" rows="10"></textarea>
<div class="manage-input">
<div class="input-title">新闻内容编写</div>
<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: "",
detailedIntroductionEnText: "",
detailedIntroductionText: "",
detailedIntroductionName: "",
detailedIntroductionSort: "",
type:2,
detailedIntroductionEnName: "",
detailedIntroductionEnText: "",
detailedIntroductionText: "",
detailedIntroductionName: "",
detailedIntroductionSort: "",
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>

608
src/views/officialWebsite/product.vue Normal file
View File

@ -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>

284
src/views/officialWebsite/productList.vue
View File

@ -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>