Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit 9920a79d by hank
Options

Merge branch 'develop' into test

parents 5665d306 b0295384
Showing with 113 additions and 23 deletions
src/views/tempaltes/editMenu.vue
...@@ -154,8 +154,24 @@ ...@@ -154,8 +154,24 @@
:img="VueCropperOption.img" :img="VueCropperOption.img"
:canMove="false" :canMove="false"
:autoCrop="VueCropperOption.autoCrop" :autoCrop="VueCropperOption.autoCrop"
:fixedNumber="VueCropperOption.fixedNumber"
:fixed="VueCropperOption.fixed"
:outputType="VueCropperOption.outputType" :outputType="VueCropperOption.outputType"
></vueCropper> ></vueCropper>
<div class="scale-container">
<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)">
<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)">
<img class="scale-icon" src="../../assets/img/auto.png" alt />
<div>自定义</div>
</div>
</div>
<div class="save-img-btn" @click="saveCropper"> <div class="save-img-btn" @click="saveCropper">
<!-- <van-button @click="VueCropperOption.img = ''">取消</van-button> --> <!-- <van-button @click="VueCropperOption.img = ''">取消</van-button> -->
确定 确定
...@@ -190,6 +206,10 @@ export default { ...@@ -190,6 +206,10 @@ export default {
type: Boolean, type: Boolean,
default: true default: true
}, },
templateShow: {
type: String,
default: "HORIZONTAL"
},
schemaData: { schemaData: {
type: Object, type: Object,
default: () => {} default: () => {}
...@@ -199,9 +219,15 @@ export default { ...@@ -199,9 +219,15 @@ export default {
selectDataCom, selectDataCom,
VueCropper VueCropper
}, },
created() { mounted() {
console.log(this.schemaData); console.log(this.tempalteShow, "this.tempalteShow");
if (this.tempalteShow === "HORIZONTAL") {
this.VueCropperOption.fixedNumber = [16, 9];
} else {
this.VueCropperOption.fixedNumber = [9, 16];
}
}, },
created() {},
data() { data() {
return { return {
activeName: "", activeName: "",
...@@ -212,14 +238,42 @@ export default { ...@@ -212,14 +238,42 @@ export default {
show: false show: false
}, },
VueCropperOption: { VueCropperOption: {
fixedState: 0,
img: "", img: "",
outputType: "png", outputType: "png",
autoCrop: true, autoCrop: true,
fixed: true,
fixedNumber: [16, 9],
preImg: "" preImg: ""
} }
}; };
}, },
methods: { methods: {
changeFixedState(state) {
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
setTimeout(() => {
this.VueCropperOption.autoCrop = true
}, 300)
} else {
this.VueCropperOption.fixedNumber = [1,1]
this.VueCropperOption.fixed = false
this.VueCropperOption.autoCrop = false
setTimeout(() => {
this.VueCropperOption.autoCrop = true
}, 300)
}
},
uploadFile(data) { uploadFile(data) {
this.$toast.loading({ this.$toast.loading({
mask: true, mask: true,
...@@ -243,19 +297,19 @@ export default { ...@@ -243,19 +297,19 @@ export default {
}); });
}, },
onBlur() { onBlur() {
var top = window.scrollY var top = window.scrollY;
console.log(top) console.log(top);
window.scrollTo(0, 0); window.scrollTo(0, 0);
var time = setTimeout(() => { var time = setTimeout(() => {
window.scrollTo(0, top); window.scrollTo(0, top);
clearTimeout(time) clearTimeout(time);
}, 100) }, 100);
}, },
valueChange2() { valueChange2() {
console.log(this.schemaData) console.log(this.schemaData);
setTimeout(() => { setTimeout(() => {
this.$emit("setList", this.schemaData); this.$emit("setList", this.schemaData);
}, 100) }, 100);
this.$emit("setList", this.schemaData); this.$emit("setList", this.schemaData);
}, },
setList() { setList() {
...@@ -297,7 +351,14 @@ export default { ...@@ -297,7 +351,14 @@ export default {
return getHostUrl(this.frameUrl, dataUrl); return getHostUrl(this.frameUrl, dataUrl);
}, },
uploadAfter(file) { uploadAfter(file) {
// console.log(file); if (this.templateShow === "HORIZONTAL") {
this.VueCropperOption.fixedNumber = [16, 9];
this.VueCropperOption.fixedState = 0
} else {
this.VueCropperOption.fixedNumber = [9, 16];
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);
this.VueCropperOption.img = file.content; this.VueCropperOption.img = file.content;
...@@ -364,7 +425,7 @@ export default { ...@@ -364,7 +425,7 @@ export default {
.cropper-container { .cropper-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #666; background-color: black;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
...@@ -375,23 +436,47 @@ export default { ...@@ -375,23 +436,47 @@ export default {
// overflow: hidden; // overflow: hidden;
z-index: 10000000; z-index: 10000000;
.vue-cropper { .vue-cropper {
height: calc(100vh - 84px); height: calc(100vh - 130px);
// width:
z-index: 100000000; z-index: 100000000;
} }
.scale-container {
padding-top: 15px;
display: flex;
justify-content: center;
.scale-item {
color: white;
font-size: 13px;
font-weight: 300px;
width: 20.3%;
text-align: center;
opacity: 0.6;
.scale-icon {
width: 22px;
height: 22px;
margin-bottom: 9px;
}
}
.scale-item-active {
opacity: 1;
}
}
.save-img-btn { .save-img-btn {
width: 294px; width: 177px;
height: 44px; height: 44px;
line-height: 44px; line-height: 44px;
font-size: 18px; font-size: 18px;
margin: 20px auto; margin: 20px auto;
margin-bottom: 20px; margin-bottom: 20px;
background: linear-gradient( // background: linear-gradient(
266deg, // 266deg,
rgba(255, 171, 32, 1) 0%, // rgba(255, 171, 32, 1) 0%,
rgba(255, 114, 14, 1) 100% // rgba(255, 114, 14, 1) 100%
); // );
box-shadow: 0px 2px 8px 0px rgba(255, 167, 31, 0.31); border: 1px solid rgba(255, 255, 255, 1);
border-radius: 30px; // box-shadow: 0px 2px 8px 0px rgba(255, 167, 31, 0.31);
// border-radius: 30px;
border-radius: 19px;
text-align: center; text-align: center;
color: white; color: white;
z-index: 1000000; z-index: 1000000;
......
src/views/tempaltes/editMore.vue
...@@ -184,7 +184,7 @@ ...@@ -184,7 +184,7 @@
:src="'https://127.0.0.1:9000/template.html' + '?isEdit=1&filmId='+templateData.filmId + '&now=' + date" :src="'https://127.0.0.1:9000/template.html' + '?isEdit=1&filmId='+templateData.filmId + '&now=' + date"
:src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId + '&now=' + date"--> :src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId + '&now=' + date"-->
</div> </div>
<div class="content-menu" v-show="!clipImg"> <!-- <div class="content-menu" v-show="!clipImg">
<slider :list="templateData.listData"> <slider :list="templateData.listData">
<div <div
class="menu-item" class="menu-item"
...@@ -195,7 +195,7 @@ ...@@ -195,7 +195,7 @@
<img :src="scope.slider.thumb" alt /> <img :src="scope.slider.thumb" alt />
</div> </div>
</slider> </slider>
</div> </div> -->
<div class="group-menu" v-if="templateData.listData[currentPage]" v-show="!clipImg"> <div class="group-menu" v-if="templateData.listData[currentPage]" v-show="!clipImg">
<slider :list="templateData.listData[currentPage].itemList"> <slider :list="templateData.listData[currentPage].itemList">
<div <div
...@@ -217,6 +217,7 @@ ...@@ -217,6 +217,7 @@
:item="templateData.listData[currentPage].itemList[itemListIndex]" :item="templateData.listData[currentPage].itemList[itemListIndex]"
:schemaData="templateData.listData[currentPage].schemaData" :schemaData="templateData.listData[currentPage].schemaData"
:frameUrl="templateData.frameUrl" :frameUrl="templateData.frameUrl"
:templateShow="templateData.templateShow"
@setList="setList" @setList="setList"
@setClipImg="setClipImg" @setClipImg="setClipImg"
></editMenu> ></editMenu>
...@@ -684,7 +685,9 @@ export default { ...@@ -684,7 +685,9 @@ export default {
// window.sessionStorage.setItem("filmId"); // window.sessionStorage.setItem("filmId");
this.navToWx(filmId); this.navToWx(filmId);
// this.$router.back(); // this.$router.back();
}); }).catch(() => {
this.$toast.clear();
}) ;
} else { } else {
// "templateId": "string", // "templateId": "string",
// "resourceId": "string", // "resourceId": "string",
...@@ -703,7 +706,9 @@ export default { ...@@ -703,7 +706,9 @@ export default {
window.sessionStorage.setItem("filmId", res.data.data); window.sessionStorage.setItem("filmId", res.data.data);
this.templateData.filmId = res.data.data; this.templateData.filmId = res.data.data;
this.navToWx(res.data.data); this.navToWx(res.data.data);
}); }).catch(() => {
this.$toast.clear();
}) ;
} }
}, },
navToWx(fId) { navToWx(fId) {
......
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