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