Skip to content

S
SuperMan
Commit 34c2c25f authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 2bb344ca
Hide whitespace changes
Inline Side-by-side
Showing with 147 additions and 127 deletions
src/components/WebSet/WebSiteEdit.vue
View file @ 34c2c25f
......@@ -57,20 +57,41 @@
background-color: #ddd;
}
.WebSiteEdit .temp-list-wrap {
margin-top: 20px;
}
.WebSiteEdit .temp-list-wrap img {
display: block;
width: 210px;
}
.WebSiteEdit .temp-list-wrap div {
margin-bottom: 20px;
cursor: pointer;
}
</style>
<template>
<div class="WebSiteEdit">
<div flex="box:first" class="WebSiteContent">
<div class="WebSite_Left">
<el-select v-model="choiceModule">
<el-option v-for="item in selData" :label="item.TemplateName" :value="item.Id" :key="item.Id">
</el-option>
<el-select v-model="templateId" @change="getTemplateDetails()">
<el-option label="请选择" :value="0" :key="0">
</el-option>
<el-option v-for="item in templateList" :label="item.TemplateName" :value="item.Id" :key="item.Id">
</el-option>
</el-select>
<div class="temp-list-wrap">
<div v-for="(subItem,subIndex) in detailsList" :key="subIndex" @click="AddData(subItem)">
<img :src="subItem.TemplateData.CoverImg" :alt="subItem.SubTemplateName" />
</div>
</div>
</div>
<div class="WebSite_right">
<div class="WebSite_right_preview">
<div v-for="(item,index) in dataList" :key="index">
<movie1 v-if="item.Id='movie1'" :myData="item"></movie1>
<movie1 v-if="item.Id='white_label_video'" :plugData="item.plugData"></movie1>
</div>
</div>
</div>
......@@ -82,19 +103,14 @@
export default {
data() {
return {
//下拉框
selData:[],
choiceModule:0,
dataList: [{
Id: 'movie1',
isCked: false,
data: {
isShelves: 0, //是否上架
title: '', //標題
decrible: '', //描述
id: '', //YouTube 影片ID
}
}]
//模板列表
templateList: [],
//模板编号
templateId: 0,
//数据列表
dataList: [],
//模板详情列表
detailsList: [],
};
},
created() {},
......@@ -102,13 +118,37 @@
movie1
},
methods: {
//添加数据到组件列表
AddData(item) {
var obj = {
Id: item.TemplateKey,
plugData: item.TemplateData
};
this.dataList.push(obj);
},
//获取下拉框
getModule(){
getTemplate() {
this.apipost(
"ws_get_GetTemplateList", {},
res => {
if (res.data.resultCode == 1) {
this.selData=res.data.data;
this.templateList = res.data.data;
} else {
this.Error(res.data.message);
}
},
err => {}
);
},
//获取模板详情
getTemplateDetails() {
this.apipost(
"ws_get_GetTemplateDetailsList", {
TemplateId: this.templateId
},
res => {
if (res.data.resultCode == 1) {
this.detailsList = res.data.data;
} else {
this.Error(res.data.message);
}
......@@ -116,10 +156,10 @@
err => {}
);
}
},
mounted() {
this.getModule();
this.getTemplate();
}
};
......
src/components/WebSet/WebSiteTemplateDetails.vue
View file @ 34c2c25f
......@@ -23,20 +23,19 @@
<div>
<el-table :data="dataList" style="width: 100%" v-loading="loading"
:default-sort="{prop: 'date', order: 'descending'}">
<el-table-column prop="Id" label="编号" sortable>
<el-table-column prop="Id" label="编号" sortable width="100">
</el-table-column>
<el-table-column prop="TemplateName" label="模板名称" sortable>
<el-table-column prop="TemplateName" label="模板名称" sortable width="150">
</el-table-column>
<el-table-column prop="SubTemplateName" label="名称" sortable>
<el-table-column prop="SubTemplateName" label="名称" sortable sortable width="150">
</el-table-column>
<el-table-column prop="Data" label="模板数据" sortable>
<el-table-column prop="TemplateData" label="模板数据" sortable>
<template slot-scope="scope">
<span>
{{scope.row.Data}}
<span v-html="scope.row.TemplateData">
</span>
</template>
</el-table-column>
<el-table-column label="操作">
<el-table-column label="操作" sortable width="160">
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
<el-button type="primary" icon="el-icon-edit" circle @click="outerVisible = true,updateData(scope.row)">
......@@ -49,7 +48,7 @@
</el-table-column>
</el-table>
</div>
<el-dialog title="模板配置" :visible.sync="outerVisible" center width="400px">
<el-dialog title="模板配置" :visible.sync="outerVisible" center width="700px">
<el-form :model="addMsg" ref="addMsg" label-width="120px">
<el-row>
<el-col :span="24">
......@@ -58,7 +57,7 @@
</el-input>
</el-form-item>
<el-form-item label="模板详情">
<el-input type="textarea" :autosize="{ minRows: 5}" placeholder="请输入内容" v-model="addMsg.Data">
<el-input type="textarea" :autosize="{ minRows: 10}" placeholder="请输入内容" v-model="addMsg.Data">
</el-input>
</el-form-item>
</el-col>
......
src/components/WebSet/plug-in/movie1.vue
View file @ 34c2c25f
<style>
.WebSite_item{
display: flex;
border-bottom: 1px solid #f6f6f6;
background-color: #fff;
}
.diy-component-preview .WebSite_item .temp-img {
flex-basis: calc(60% - 60px);
}
.temp-img img{
display: block;
width: 100%;
user-select: none;
pointer-events: none;
}
.WebSite_item .temp-info{
padding: 15px 20px 0;
flex-basis: 40%;
background-color: #fff;
}
.WebSite_item .temp-title{
margin: 0;
font-size: 18px;
font-weight: 500;
}
.temp-subtitle{
margin: 0;
width: 280px;
padding-top: 2px;
font-size: 15px;
font-weight: 700;
color: #999;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.diy-component-edit{
position: absolute;
top: 0;
bottom: 0;
left: 465px;
right: 0;
background: #fff;
padding: 20px;
overflow: auto;
min-width: 650px;
padding-right: 20%;
}
.group-tool{
margin-top:20px;
}
.Movie_sj{
color:#333;
font-size:14px;
margin-left:20px;
}
.WebSite_item {
display: flex;
border-bottom: 1px solid #f6f6f6;
background-color: #fff;
}
.diy-component-preview .WebSite_item .temp-img {
flex-basis: calc(60% - 60px);
}
.temp-img img {
display: block;
width: 100%;
user-select: none;
pointer-events: none;
}
.WebSite_item .temp-info {
padding: 15px 20px 0;
flex-basis: 40%;
background-color: #fff;
}
.WebSite_item .temp-title {
margin: 0;
font-size: 18px;
font-weight: 500;
}
.temp-subtitle {
margin: 0;
width: 280px;
padding-top: 2px;
font-size: 15px;
font-weight: 700;
color: #999;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.diy-component-edit {
position: absolute;
top: 0;
bottom: 0;
left: 465px;
right: 0;
background: #fff;
padding: 20px;
overflow: auto;
min-width: 650px;
padding-right: 20%;
}
.group-tool {
margin-top: 20px;
}
.Movie_sj {
color: #333;
font-size: 14px;
margin-left: 20px;
}
</style>
<template>
<div>
<!-- <div class="diy-component-options" v-if="myData.isCked">
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
<el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
<el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
style="right: -25px; top: 0;"></el-button>
<el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
style="right: -25px; top: 30px;"></el-button>
</div> -->
<div class="diy-component-preview">
<div class="WebSite_item">
<div class="temp-img">
<!-- <img src="../../../assets/img/taiwan/video1.jpg" alt=""/> -->
<img :src="plugData.CoverImg" alt="" />
</div>
<div class="temp-info">
<h2 class="temp-title">影片 - 1</h2>
<h3 class="temp-subtitle">
創立於2018年。主要業務包括國內外旅遊、飯店、機票、商務旅遊等全方位服務。合作飯店覆蓋全球200個國家，並與超過一百萬間酒店緊密合作。我們擁有先進的交易服務平台，包括行動裝置瀏覽模式，目前有超過60%以上的訂單是從手機預訂，讓您隨時隨地輕鬆預定行程。我們致力於讓旅遊變得容易，專業行程企劃為您掌握最新景點、最佳行程！
</h3>
<div class="group-tool">
<el-button type="primary" size="small">編輯</el-button>
<el-button type="danger" size="small">刪除</el-button>
<span class="Movie_sj">上架</span>
<el-switch v-model="myData.isShelves" :active-value="1" :inactive-value="0" active-color="#13ce66"
<h2 class="temp-title">{{plugData.VideoTitle}}</h2>
<h3 class="temp-subtitle">
{{plugData.VideoDescribe}}
</h3>
<div class="group-tool">
<el-button type="primary" size="small">編輯</el-button>
<el-button type="danger" size="small">刪除</el-button>
<span class="Movie_sj">上架</span>
<el-switch v-model="plugData.isShelves" :active-value="1" :inactive-value="0" active-color="#13ce66"
inactive-color="#dcdfe6"></el-switch>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="diy-component-edit" v-if="myData.isCked">
<el-form label-width="100px">
<el-form-item label="標題">
<el-input type="text" v-model="myData.title"></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input type="textarea" v-model="myData.decrible" :rows="4"></el-input>
</el-form-item>
<el-form-item label="YouTube 影片ID">
<el-input type="text" v-model="myData.id"></el-input>
</el-form-item>
<el-form-item>
<div>如何取得 YouTube 影片 ID：</div>
<div>該影片網址 v= 後面的編號，即為該影片的 ID</div>
<div>
<img src="../../../assets/img/taiwan/youtubeId.jpg" alt=""/>
</div>
</el-form-item>
</el-form>
</div> -->
</div>
</template>
<script>
export default {
props: ["myData"],
props: ["plugData"],
data() {
return {
......@@ -125,9 +108,7 @@
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
},
mounted() {}
};
</script>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment