Skip to content

S
SuperMan
Commit f85cdfbc authored by zhengke's avatar zhengke
Browse files
Options

修改

parent 7d64327f
Hide whitespace changes
Inline Side-by-side
Showing with 203 additions and 76 deletions
src/components/WebSet/plug-in/picture_dialog.vue
View file @ f85cdfbc
<style> <style>
.tour-cover .img { .pictureDialog .webSliderDiv {
display: block; width: 370px;
line-height: 0;
height: 244px;
border: 1px solid #ccc;
cursor: pointer;
position: relative;
}
.pictureDialog .webSliderDiv .web_imgUrl {
width: 100%; width: 100%;
padding-bottom: 60%; height: 100%;
-webkit-background-size: cover; }
-moz-background-size: cover; .pictureDialog .webSliderDiv .el-upload{
-o-background-size: cover; width:100%;
background-size: cover; height:100%;
} }
.help-block{ .pictureDialog .webSliderDiv .addIconDiv {
display: block; position: absolute;
margin-top: 5px; width: 100%;
margin-bottom: 10px; height: 100%;
color: #737373; top: 0;
font-size:14px; background-color: transparent;
} display: flex;
align-items: center;
justify-content: center;
}
.pictureDialog .webSliderDiv i {
font-size: 50px;
color: #d1d1d1;
cursor: pointer;
}
.pictureDialog .webSliderDiv .addIconDiv:hover {
background: rgba(0, 0, 0, 0.5);
color: #fff;
}
.pictureDialog .webSliderDiv >div{
height:100%;
}
.pictureDialog .myWebDiv{
width:175px!important;
overflow: hidden;
}
.pictureDialog .webImg_radius{
width:310px!important;
height:310px!important;
border-radius:50%;
overflow: hidden;
}
</style> </style>
<template> <template>
<div> <div class="pictureDialog">
<el-form label-width="130px"> <el-form label-width="120px">
<el-form-item label="標題"> <el-form-item label="標題">
<el-input type="text" v-model="plugData.Title"></el-input> <el-input type="text" v-model="plugData.Title"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="副標題"> <el-form-item label="副標題">
<el-input type="text" v-model="plugData.SubTitle"></el-input> <el-input type="text" v-model="plugData.SubTitle"></el-input>
</el-form-item> </el-form-item>
<el-row v-for="(item,index) in plugData.Details" :key="index"> <template v-if="plugData.Type==1||plugData.Type==2||plugData.Type==3||plugData.Type==4">
<el-col :span="12"> <el-row v-for="(item,index) in plugData.Details" :key="index" style="margin-bottom:20px;">
<!-- <div class="webSliderDiv" @click="clickIndex=index"> <el-col :span="10">
<el-upload :http-request="UploadImage" :multiple="true" <div class="webSliderDiv" @click="clickIndex=index">
accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action=""> <el-upload :http-request="UploadImage" :multiple="true" accept="image/jpeg,image/gif,image/png,image/bmp"
<img v-if="item.LinkImg" :src="item.LinkImg" class="web_imgUrl" alt="" /> :show-file-list="false" action="">
<div class="addIconDiv"> <img v-if="item.ImageUrl" :src="item.ImageUrl" class="web_imgUrl" alt="" />
<i class="web_addImg iconfont icon-img_haha"></i> <div class="addIconDiv">
<i class="web_delImg iconfont icon-img_delete_small" style="margin-left:10px;" @click.stop="item.LinkImg=''"></i> <i class="web_addImg iconfont icon-img_haha"></i>
</div> <i class="web_delImg iconfont icon-img_delete_small" style="margin-left:10px;"
</el-upload> @click.stop="item.ImageUrl=''"></i>
</div> </div>
<div v-if="plugData.Type==1">圖片尺寸請上傳：1440x470，檔案請小於3M。前台顯示固定高度470px</div> --> </el-upload>
<div class="webLogoDiv" style="width:100%;height:100px;"> </div>
<el-upload :http-request="UploadImage" :multiple="true" <div v-if="plugData.Type==3" style="margin-top:5px;">圖片尺寸請上傳：600x264，檔案請小於3M</div>
accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action=""> <div v-else-if="plugData.Type==2">圖片尺寸請上傳：600x397，檔案請小於3M</div>
<img v-if="item.LinkUrl" :src="item.LinkUrl" class="web_imgUrl" alt="" /> <div v-else style="margin-top:5px;">圖片尺寸請上傳：800x530，檔案請小於3M</div>
</el-col>
<el-col :span="14">
<el-row>
<el-col :span="24">
<el-form-item label="行程名稱 1">
<el-input type="text" v-model="item.TripTitle"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="plugData.Type==1||plugData.Type==2">
<el-col :span="12">
<el-form-item label="價格">
<el-input type="text" v-model="item.Price"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="天數">
<el-input type="text" v-model="item.DayNum"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="連結網址">
<el-input type="text" v-model="item.LinkUrl"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-col>
</el-row>
</template>
<template v-if="plugData.Type==5">
<el-row v-for="(item,index) in plugData.Details" :key="index" style="margin-bottom:20px;">
<el-col :span="5">
<div class="webSliderDiv myWebDiv" @click="clickIndex=index">
<el-upload :http-request="UploadImage" :multiple="true" accept="image/jpeg,image/gif,image/png,image/bmp"
:show-file-list="false" action="">
<img v-if="item.ImageUrl" :src="item.ImageUrl" style="width:auto;" class="web_imgUrl" alt="" />
<div class="addIconDiv"> <div class="addIconDiv">
<i class="web_addImg iconfont icon-img_haha" style="left:25%;top:33%"></i> <i class="web_addImg iconfont icon-img_haha"></i>
<i class="web_delImg iconfont icon-img_delete_small" style="margin-left:10px;"
@click.stop="item.ImageUrl=''"></i>
</div> </div>
</el-upload> </el-upload>
</div> </div>
<div class="help-block">圖片尺寸請上傳：800x530，檔案請小於3M</div>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="19">
<el-row> <el-form-item style="margin-bottom:0">
<el-col :span="24"> <div>圖片尺寸請上傳：373x600，檔案請小於3M</div>
<el-upload :http-request="UploadImage" :multiple="true" accept="image/jpeg,image/gif,image/png,image/bmp" </el-form-item>
:show-file-list="false" action=""> <el-row>
<el-button type="primary" size="small">上傳</el-button> <el-col :span="24">
</el-upload> <el-form-item label="行程名稱">
<el-button type="danger" size="small">清除</el-button> <el-input type="text" v-model="item.TripTitle"></el-input>
</el-col> </el-form-item>
</el-row> </el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="連結網址">
<el-input type="text" v-model="item.LinkUrl"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-col>
</el-row>
</template>
<template v-if="plugData.Type==4">
<el-row>
<el-col :span="24">
<el-form-item>
<span>文字版位設定</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12" v-for="(item,index) in plugData.Details" :key="index">
<el-row>
<el-col :span="24">
<el-form-item :label="'行程名稱'+(index+1)">
<el-input type="text" v-model="item.TripTitle2"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="價格">
<el-input type="text" v-model="item.Price2"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="連結網址">
<el-input type="text" v-model="item.LinkUrl2"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-col>
</el-row>
</template>
<template v-if="plugData.Type==6">
<el-row v-for="(item,index) in plugData.Details" :key="index" style="margin-bottom:20px;">
<el-col :span="8">
<div class="webSliderDiv webImg_radius" @click="clickIndex=index">
<el-upload :http-request="UploadImage" :multiple="true" accept="image/jpeg,image/gif,image/png,image/bmp"
:show-file-list="false" action="">
<img v-if="item.ImageUrl" :src="item.ImageUrl" style="width:auto;" class="web_imgUrl" alt="" />
<div class="addIconDiv">
<i class="web_addImg iconfont icon-img_haha"></i>
<i class="web_delImg iconfont icon-img_delete_small" style="margin-left:10px;"
@click.stop="item.ImageUrl=''"></i>
</div>
</el-upload>
</div>
</el-col>
<el-col :span="16">
<el-form-item style="margin-bottom:0">
<div>圖片尺寸請上傳：700x700，檔案請小於3M</div>
</el-form-item>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="行程名稱 1"> <el-form-item :label="'行程名稱'+' '+(index+1)">
<el-input type="text"></el-input> <el-input type="text" v-model="item.TripTitle"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="價格">
<el-input type="text"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="天數">
<el-input type="text"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="連結網址"> <el-form-item label="連結網址">
<el-input type="text"></el-input> <el-input type="text" v-model="item.LinkUrl"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
</el-row> </el-row>
</template>
</el-form> </el-form>
</div> </div>
</template> </template>
...@@ -95,17 +215,24 @@ ...@@ -95,17 +215,24 @@
props: ["plugData"], props: ["plugData"],
data() { data() {
return { return {
clickIndex:1
}; };
}, },
created() {}, created() {},
methods: { methods: {
UploadImage(){ UploadImage(file) {
let newArr = [];
} newArr.push(file.file);
let fileName = file.file.name;
var path = "/Upload/WebSite/";
this.UploadSelfFileT(path, newArr, x => {
var str = x.data.FilePath;
var imgUrl = this.domainManager().ViittoFileUrl + str;
this.plugData.Details[this.clickIndex].ImageUrl = imgUrl;
});
}
}, },
mounted() { mounted() {
console.log(this.plugData,'plugindata');
}, },
}; };
......
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