Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit 6d754501 by hank
Options

修改点击页面切换

parent 0322a66c
Showing with 114 additions and 57 deletions
src/views/tempaltes/editMenu.vue
...@@ -25,6 +25,10 @@ ...@@ -25,6 +25,10 @@
</label> </label>
</div> </div>
<div> <div>
<div
class="input-title"
v-if="item.type === 'text' || item.type === 'textarea'"
>{{item.description}}</div>
<input <input
v-if="item.type === 'text'" v-if="item.type === 'text'"
class="edit-input" class="edit-input"
...@@ -72,6 +76,10 @@ ...@@ -72,6 +76,10 @@
</div> </div>
<div class="list-item-list"> <div class="list-item-list">
<div class="list-item-list-item" v-for="(item3, index3) in item2" :key="index3"> <div class="list-item-list-item" v-for="(item3, index3) in item2" :key="index3">
<div
class="input-title"
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'text' || item.modelSchema[isSchemaIndex(item2)][index3].type === 'textarea'"
>{{item.description}}</div>
<div v-if="(index3 != 'schemaIndex' && index3 != 'index')"> <div v-if="(index3 != 'schemaIndex' && index3 != 'index')">
<input <input
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'text'" v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'text'"
...@@ -161,15 +169,27 @@ ...@@ -161,15 +169,27 @@
:outputType="VueCropperOption.outputType" :outputType="VueCropperOption.outputType"
></vueCropper> ></vueCropper>
<div class="scale-container" @touchmove.prevent> <div class="scale-container" @touchmove.prevent>
<div class="scale-item" :class="VueCropperOption.fixedState == 0 ? 'scale-item-active' : ''" @click="changeFixedState(0)"> <div
class="scale-item"
:class="VueCropperOption.fixedState == 0 ? 'scale-item-active' : ''"
@click="changeFixedState(0)"
>
<img class="scale-icon" src="../../assets/img/16-9.png" alt /> <img class="scale-icon" src="../../assets/img/16-9.png" alt />
<div>16:9</div> <div>16:9</div>
</div> </div>
<div class="scale-item" :class="VueCropperOption.fixedState == 1 ? 'scale-item-active' : ''" @click="changeFixedState(1)"> <div
class="scale-item"
:class="VueCropperOption.fixedState == 1 ? 'scale-item-active' : ''"
@click="changeFixedState(1)"
>
<img class="scale-icon" src="../../assets/img/9-16.png" alt /> <img class="scale-icon" src="../../assets/img/9-16.png" alt />
<div>9:16</div> <div>9:16</div>
</div> </div>
<div class="scale-item" :class="VueCropperOption.fixedState == 2 ? 'scale-item-active' : ''" @click="changeFixedState(2)"> <div
class="scale-item"
:class="VueCropperOption.fixedState == 2 ? 'scale-item-active' : ''"
@click="changeFixedState(2)"
>
<img class="scale-icon" src="../../assets/img/auto.png" alt /> <img class="scale-icon" src="../../assets/img/auto.png" alt />
<div>自定义</div> <div>自定义</div>
</div> </div>
...@@ -252,28 +272,28 @@ export default { ...@@ -252,28 +272,28 @@ export default {
}, },
methods: { methods: {
changeFixedState(state) { changeFixedState(state) {
this.VueCropperOption.fixedState = state this.VueCropperOption.fixedState = state;
if(state === 0) { if (state === 0) {
this.VueCropperOption.fixedNumber = [16,9] this.VueCropperOption.fixedNumber = [16, 9];
this.VueCropperOption.fixed = true this.VueCropperOption.fixed = true;
this.VueCropperOption.autoCrop = false this.VueCropperOption.autoCrop = false;
setTimeout(() => { setTimeout(() => {
this.VueCropperOption.autoCrop = true this.VueCropperOption.autoCrop = true;
}, 300) }, 300);
} else if(state === 1) { } else if (state === 1) {
this.VueCropperOption.fixedNumber = [9,16] this.VueCropperOption.fixedNumber = [9, 16];
this.VueCropperOption.fixed = true this.VueCropperOption.fixed = true;
this.VueCropperOption.autoCrop = false this.VueCropperOption.autoCrop = false;
setTimeout(() => { setTimeout(() => {
this.VueCropperOption.autoCrop = true this.VueCropperOption.autoCrop = true;
}, 300) }, 300);
} else { } else {
this.VueCropperOption.fixedNumber = [1,1] this.VueCropperOption.fixedNumber = [1, 1];
this.VueCropperOption.fixed = false this.VueCropperOption.fixed = false;
this.VueCropperOption.autoCrop = false this.VueCropperOption.autoCrop = false;
setTimeout(() => { setTimeout(() => {
this.VueCropperOption.autoCrop = true this.VueCropperOption.autoCrop = true;
}, 300) }, 300);
} }
}, },
uploadFile(data) { uploadFile(data) {
...@@ -347,7 +367,7 @@ export default { ...@@ -347,7 +367,7 @@ export default {
} else { } else {
alert("选择类型添加，敬请期待！"); alert("选择类型添加，敬请期待！");
} }
this.$toast('添加成功,请在底部查看') this.$toast("添加成功,请在底部查看");
}, },
getHostUrl(dataUrl) { getHostUrl(dataUrl) {
return getHostUrl(this.frameUrl, dataUrl); return getHostUrl(this.frameUrl, dataUrl);
...@@ -355,15 +375,15 @@ export default { ...@@ -355,15 +375,15 @@ export default {
uploadAfter(file) { uploadAfter(file) {
if (this.templateShow === "HORIZONTAL") { if (this.templateShow === "HORIZONTAL") {
this.VueCropperOption.fixedNumber = [16, 9]; this.VueCropperOption.fixedNumber = [16, 9];
this.VueCropperOption.fixedState = 0 this.VueCropperOption.fixedState = 0;
} else { } else {
this.VueCropperOption.fixedNumber = [9, 16]; this.VueCropperOption.fixedNumber = [9, 16];
this.VueCropperOption.fixedState = 1 this.VueCropperOption.fixedState = 1;
} }
if (String(file.file.type).indexOf("image") !== -1) { if (String(file.file.type).indexOf("image") !== -1) {
this.$emit("setClipImg", true); this.$emit("setClipImg", true);
document.querySelector('.edit-container').style.height = '100vh' document.querySelector(".edit-container").style.height = "100vh";
this.VueCropperOption.img = file.content; this.VueCropperOption.img = file.content;
} else { } else {
this.uploadFile(file.file); this.uploadFile(file.file);
...@@ -386,7 +406,7 @@ export default { ...@@ -386,7 +406,7 @@ export default {
this.$emit("setList", this.schemaData); this.$emit("setList", this.schemaData);
}, },
saveCropper() { saveCropper() {
document.querySelector('.edit-container').style.height = 'auto' document.querySelector(".edit-container").style.height = "auto";
this.$emit("setClipImg", false); this.$emit("setClipImg", false);
this.VueCropperOption.img = ""; this.VueCropperOption.img = "";
this.$refs.cropper.getCropBlob(data => { this.$refs.cropper.getCropBlob(data => {
...@@ -422,6 +442,9 @@ export default { ...@@ -422,6 +442,9 @@ export default {
.menu-container { .menu-container {
// height: calc(100vh - 570px); // height: calc(100vh - 570px);
padding: 15px; padding: 15px;
.menu-container {
padding: 0;
}
position: static; position: static;
box-sizing: border-box; box-sizing: border-box;
// overflow: scroll; // overflow: scroll;
...@@ -603,6 +626,13 @@ export default { ...@@ -603,6 +626,13 @@ export default {
border-radius: 22px; border-radius: 22px;
} }
} }
.input-title {
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
padding-top: 23px;
padding-bottom: 16px;
}
.edit-input { .edit-input {
width: 97%; width: 97%;
background: #f5f5f5; background: #f5f5f5;
......
src/views/tempaltes/editMore.vue
...@@ -174,6 +174,8 @@ ...@@ -174,6 +174,8 @@
:style="!isIos ? 'width: 100vw' : ''" :style="!isIos ? 'width: 100vw' : ''"
:class="{'iframe-container2': templateData.templateShow === 'VERTICAL', isIos: isIos }" :class="{'iframe-container2': templateData.templateShow === 'VERTICAL', isIos: isIos }"
> >
<img class="arrow-right" src="../../assets/img/arrow-right.png" alt @click="NextSlider" />
<img class="arrow-left" src="../../assets/img/arrow-right.png" alt @click="PreSlider" />
<iframe <iframe
class="iframe" class="iframe"
name="tiframe" name="tiframe"
...@@ -377,6 +379,11 @@ export default { ...@@ -377,6 +379,11 @@ export default {
return this.show || this.pageViews || this.isPreview; return this.show || this.pageViews || this.isPreview;
} }
}, },
watch: {
currentPage: function() {
this.itemListIndex = 0
}
},
created() { created() {
let ua = window.navigator.userAgent; let ua = window.navigator.userAgent;
//$alert('浏览器版本: ' + app + '\n' + '用户代理: ' + ua); //$alert('浏览器版本: ' + app + '\n' + '用户代理: ' + ua);
...@@ -453,7 +460,7 @@ export default { ...@@ -453,7 +460,7 @@ export default {
// }, 1000); // }, 1000);
}, },
methods: { methods: {
message(data) { message(data) { // iframe 发送消息
window.frames["tiframe"].postMessage( window.frames["tiframe"].postMessage(
data, data,
"https://visual-clouds.bdideal.com" "https://visual-clouds.bdideal.com"
...@@ -461,23 +468,6 @@ export default { ...@@ -461,23 +468,6 @@ export default {
// window.frames[1].postMessage(data, "https://visual-clouds.bdideal.com"); // window.frames[1].postMessage(data, "https://visual-clouds.bdideal.com");
// document.querySelector('.iframe').postMessage(data, "https://visual-clouds.bdideal.com") // document.querySelector('.iframe').postMessage(data, "https://visual-clouds.bdideal.com")
}, },
htmltoImg() {
window
.html2canvas(document.querySelector("body"), {
allowTaint: true,
taintTest: false
})
.then(canvas => {
console.log(canvas);
canvas.id = "mycanvas";
//document.body.appendChild(canvas);
//生成base64图片数据
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = dataUrl;
document.body.appendChild(newImg);
});
},
setItemListIndex(index) { setItemListIndex(index) {
this.itemListIndex = index; this.itemListIndex = index;
}, },
...@@ -490,7 +480,6 @@ export default { ...@@ -490,7 +480,6 @@ export default {
} else if (item.action === "pageShow") { } else if (item.action === "pageShow") {
this.pageShow(); this.pageShow();
} }
console.log(item);
}, },
dragChange(value) { dragChange(value) {
console.log("dragChange", value); console.log("dragChange", value);
...@@ -505,6 +494,18 @@ export default { ...@@ -505,6 +494,18 @@ export default {
pages: this.templateData.listData pages: this.templateData.listData
}); });
}, },
NextSlider() {
if(this.currentPage < this.templateData.listData.length - 1) {
++this.currentPage
this.goPage(this.currentPage)
}
},
PreSlider() {
if(this.currentPage >= 1) {
--this.currentPage
this.goPage(this.currentPage)
}
},
setClipImg(show) { setClipImg(show) {
this.clipImg = show; this.clipImg = show;
}, },
...@@ -528,7 +529,7 @@ export default { ...@@ -528,7 +529,7 @@ export default {
this.templateData.listData.splice( this.templateData.listData.splice(
index, index,
0, 0,
this.templateData.defaultData[index] this.templateData.listData[index]
); );
this.message({ this.message({
type: "setList", type: "setList",
...@@ -1089,13 +1090,38 @@ export default { ...@@ -1089,13 +1090,38 @@ export default {
position: relative; position: relative;
width: 344px; width: 344px;
margin: 0 auto; margin: 0 auto;
padding-left: 22px;
padding-right: 22px;
padding-top: 16px;
padding-bottom: 16px;
margin-bottom: 10px;
.arrow-left {
position: absolute;
left: 0px;
top: calc(50% - 11px);
z-index: 1999;
width: 6.5px;
height: 22px;
transform: rotate(180deg);
}
.arrow-right {
position: absolute;
right: 0px;
top: calc(50% - 11px);
z-index: 1999;
width: 6.5px;
height: 22px;
}
} }
.iframe-container2 { .iframe-container2 {
box-sizing: border-box; box-sizing: border-box;
// display: flex; // display: flex;
// justify-content: center; // justify-content: center;
padding-top: 0;
width: 194px; padding-bottom: 0;
margin-bottom: 0;
padding: 0;
// width: 188px;
margin: 0 auto; margin: 0 auto;
} }
.isIos .iframe { .isIos .iframe {
...@@ -1105,7 +1131,8 @@ export default { ...@@ -1105,7 +1131,8 @@ export default {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
// margin-left: 16px; // margin-left: 16px;
height: 194px;
height: 169px;
display: block; display: block;
// box-shadow: 0px 14px 27px 0px rgba(0, 0, 0, 0.16); // box-shadow: 0px 14px 27px 0px rgba(0, 0, 0, 0.16);
// position: absolute; // position: absolute;
...@@ -1116,9 +1143,9 @@ export default { ...@@ -1116,9 +1143,9 @@ export default {
.viframe { .viframe {
overflow: hidden; overflow: hidden;
// position: absolute; // position: absolute;
width: 100% !important; width: 188px !important;
// margin-left: 91px; // margin-left: 91px;
height: 344px; height: 334px;
} }
} }
.content-left-v { .content-left-v {
...@@ -1351,14 +1378,14 @@ export default { ...@@ -1351,14 +1378,14 @@ export default {
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
position: absolute; position: absolute;
width: 15.5px; width: 30px;
height: 15.5px; height: 30px;
background: url(http://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/close.png) background: url(http://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/close.png)
no-repeat center; no-repeat center;
background-size: cover; background-size: 50%;
color: white; color: white;
top: 5px; top: 0px;
right: 3px; right: 0px;
font-size: 17px; font-size: 17px;
z-index: 3; z-index: 3;
} }
...@@ -1396,7 +1423,7 @@ export default { ...@@ -1396,7 +1423,7 @@ export default {
left: 0; left: 0;
right: 0; right: 0;
padding: 10px 40px; padding: 10px 40px;
padding-bottom: 10px; padding-bottom: 20px;
display: flex; display: flex;
z-index: 1000; z-index: 1000;
justify-content: space-between; justify-content: space-between;
......
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 sign in to comment