Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit 5665d306 by hank
Options

Merge branch 'develop' into test

parents adf3cf96 7ee23429
Showing with 1379 additions and 295 deletions
package.json
......@@ -25,8 +25,10 @@
"svg-sprite-loader": "^4.1.6",
"uglifyjs-webpack-plugin": "^2.1.3",
"vant": "^2.0.0",
"vconsole": "^3.3.4",
"vue": "^2.6.10",
"vue-awesome-swiper": "^3.1.3",
"vue-cropper": "^0.4.9",
"vue-router": "^3.0.3",
"vuedraggable": "^2.23.0",
"vuex": "^3.0.1"
......
public/index.html
......@@ -7,9 +7,9 @@
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/vue2-animate/dist/vue2-animate.min.css"/>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<!-- <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<title>Vmatrix</title>
<title>编辑作品</title>
<script>
window.jsbridge && window.jsbridge.init();
......
src/App.vue
......@@ -61,6 +61,7 @@ export default {
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
min-height: 100%;
}
#nav {
padding: 30px;
......@@ -74,9 +75,13 @@ export default {
}
.child-view {
transition: all 0.4s cubic-bezier(0.55, 0, 0.1, 1);
-webkit-overflow-scrolling: touch;
position: absolute;
// -webkit-overflow-scrolling: touch;
// position: absolute;
width: 100%;
min-height: 100vh;
}
html, body {
min-height: 100vh;
}
.slide-left-enter,
.slide-right-leave-active {
......
src/api/api.js
......@@ -7,7 +7,7 @@ export function getTempalteList (page = 1, size = 10 ) {
})
}
export function getTempalteFilmList (templateId, page = 1, size = 10 ) {
// 获取模板下视片列表
// 获取模板下作品列表
return get(`/template/get/film/list/${templateId}`, {
p: page,
c: size
......@@ -57,7 +57,7 @@ export function createTempalte(data) {
}
export function createFilm(data) {
/**
* 添加视片
* 添加作品
* {
"clientId": "string",
"clientSecret": "string",
......@@ -71,24 +71,24 @@ export function createFilm(data) {
return post('/template/add/film', data)
}
export function getFilmDetail(filmId) {
// 获取视片详情
// 获取作品详情
return get(`/template/get/film/info/${filmId}`)
}
export function getFilmList(page = 1, size = 10) {
console.log(page,' page')
// 获取所有视片
// 获取所有作品
return post(`/myfilm/get/list?p=${page}&c=${size}`, {
p: page,
c: size
})
}
export function getFilmDeviceIdList(filmId) {
// 获取视片下使用的所有设备id
// 获取作品下使用的所有设备id
return get(`/template/get/equipmentid/${filmId}`, {
})
}
export function getFilmDeviceList(filmId, page = 1, size = 10 ) {
// 获取视片下使用的所有设备
// 获取作品下使用的所有设备
return get(`/template/get/equipment/list/${filmId}`, {
p: page,
c: size
......@@ -96,14 +96,14 @@ export function getFilmDeviceList(filmId, page = 1, size = 10 ) {
}
export function bindDeviceToFilm(equipmentId, filmId) {
// 根据设备标识以及视片id设置默认视片
// 根据设备标识以及作品id设置默认作品
return post(`/template/update/equipment/binding/filmid`, {
equipmentId,
filmId
})
}
export function setDeviceDefaltFilm(clientId = 'maxrocky',clientSecret = 'maxrocky', filmId) {
// 根据设备标识以及视片id设置默认视片
// 根据设备标识以及作品id设置默认作品
return post(`/myequipment/update/film/def/version`, {
clientId,
clientSecret,
......@@ -111,7 +111,7 @@ export function setDeviceDefaltFilm(clientId = 'maxrocky',clientSecret = 'maxroc
})
}
export function updateFilmInfo(filmId, filmData, filmName, filmDescribe) {
// 更新视片信息
// 更新作品信息
return post('/template/update/film/info', {
filmId,
filmData,
......@@ -120,7 +120,7 @@ export function updateFilmInfo(filmId, filmData, filmName, filmDescribe) {
})
}
export function updateBaseFilmInfo(filmId, filmName, filmDescribe) {
// 更新视片基本信息
// 更新作品基本信息
return post('/template/update/film/base/info', {
filmId,
filmName,
......@@ -128,7 +128,7 @@ export function updateBaseFilmInfo(filmId, filmName, filmDescribe) {
})
}
export function deleteFilm(filmId) {
// 删除视片
// 删除作品
return get(`/template/del/film/info/${filmId}`)
}
......
src/assets/app.scss
......@@ -5,6 +5,14 @@
}
.bgeee {
width: 100%;
background: #EEE;
background: #eee;
height: 20px;
}
img {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
*{-webkit-touch-callout: none;}
\ No newline at end of file
src/main.js
......@@ -10,6 +10,9 @@ import '@/assets/app.scss'
Vue.config.productionTip = false
// import { Tabbar, TabbarItem } from 'vant';
import Vant from 'vant';
// import vconsole from 'vconsole'
// new vconsole()
console.log('hellow world')
Vue.use(Vant)
new Vue({
......
src/views/device/detail.vue
......@@ -29,7 +29,7 @@
</div>
<div class="view-film">
<div class="right-item-title">
<span>正在播放的视片：</span>
<span>正在播放的作品：</span>
<span>{{detail.filmName ? detail.filmName : '无'}}</span>
</div>
......
src/views/device/films.vue
<template>
<div class="film-container">
<div class="device-count">
<div class="count">已创建视片: {{list.length}}部</div>
<div class="count">已创建作品: {{list.length}}部</div>
</div>
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
......
src/views/device/index.vue
......@@ -2,7 +2,7 @@
<div class="device-container">
<!-- swipeable -->
<van-tabs v-model="active" sticky ellipsis color="#1989fa" @change="tabChange">
<van-tab title="我的视片">
<van-tab title="我的作品">
<films></films>
</van-tab>
<van-tab title="我的设备">
......
src/views/layout/index.vue
......@@ -18,7 +18,7 @@
<van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/device') }" replace :to="{
path: '/device',
exact: false
}" icon="setting-o">设备与视片</van-tabbar-item>
}" icon="setting-o">设备与作品</van-tabbar-item>
<van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/user') }" replace :to="{
path: '/user',
exact: false
......
src/views/tempaltes/detail.vue
......@@ -25,7 +25,7 @@
</div>
<div class="bgeee"></div>
<div class="myfilms">
<div class="title">我的视片 ({{list.length}})</div>
<div class="title">我的作品 ({{list.length}})</div>
<van-list v-model="loading" :finished="finished" finished-text @load="onLoad">
<div class="film-list">
<div class="film-item" @click="goFilm(item)" v-for="(item,index) in list" :key="index">
......@@ -37,17 +37,17 @@
</van-list>
</div>
</div>
<van-button type="info" class="createBtn" size="large" @click="showInput">创建视片</van-button>
<van-dialog :before-close="beforeClose" v-model="show" title="视片信息" show-cancel-button>
<van-button type="info" class="createBtn" size="large" @click="showInput">创建作品</van-button>
<van-dialog :before-close="beforeClose" v-model="show" title="作品信息" show-cancel-button>
<div class="tips">
*视片名称:
*作品名称:
</div>
<input placeholder="请输入视片名称" v-model="templateData.filmName" class="film-name" type="text" />
<input placeholder="请输入作品名称" v-model="templateData.filmName" class="film-name" type="text" />
<br />
<div class="tips">
视片描述:
作品描述:
</div>
<input placeholder="请输入视片描述" v-model="templateData.filmDescribe" class="film-name" type="text" />
<input placeholder="请输入作品描述" v-model="templateData.filmDescribe" class="film-name" type="text" />
</van-dialog>
</div>
</template>
......@@ -151,7 +151,7 @@ export default {
console.log(action);
if (action === "confirm") {
if (!this.templateData.filmName) {
this.$toast("请输入视片名称");
this.$toast("请输入作品名称");
done(false);
} else {
createFilm({
......@@ -166,13 +166,13 @@ export default {
}).then(res => {
done();
this.$toast.success("添加成功");
console.log(res, "创建视片成功");
console.log(res, "创建作品成功");
this.show = false;
this.goFilm({
filmId: res.data.data
})
// updateFilmInfo(res.data.filmId, "数据").then(res => {
// console.log(res, "更新视片成功");
// console.log(res, "更新作品成功");
// this.$router.back();
// });
// this.$router.back();
......
src/views/tempaltes/edit.vue
......@@ -249,7 +249,7 @@ export default {
},
getFilmDetail() {
getFilmDetail(this.$route.query.filmId).then(res => {
console.log(res.data, "视片详情");
console.log(res.data, "作品详情");
this.templateData.filmId = res.data.filmId;
this.name = res.data.filmName;
this.templateData.resourceUrl = res.data.resourceUrl;
......@@ -272,7 +272,7 @@ export default {
).then(res => {
this.show = false;
this.$toast.success("发布成功");
console.log(res, "更新视片成功");
console.log(res, "更新作品成功");
this.$router.back();
});
}
......@@ -287,10 +287,10 @@ export default {
filmName: this.name
}).then(res => {
this.$toast.success("发布成功");
console.log(res, "创建视片成功");
console.log(res, "创建作品成功");
this.show = false;
// updateFilmInfo(res.data.filmId, "数据").then(res => {
// console.log(res, "更新视片成功");
// console.log(res, "更新作品成功");
// this.$router.back();
// });
this.$router.back();
......
src/views/tempaltes/editMenu.vue
<template>
<div class="menu-container">
<van-collapse v-model="activeName" accordion>
<van-collapse-item
v-for="(item, index) in itemList"
:key="index"
:title="item.name"
:name="index"
>
<!-- <edit-menu v-if="item.type === 'group'" :itemList="item.itemList" :schemaData="schemaData">
</edit-menu>-->
<div>
<!-- <div>{{schemaData[item.dataKey]}} {{item.dataKey}}</div> -->
<video
......@@ -24,8 +14,8 @@
:src="getHostUrl(schemaData[item.dataKey].value)"
alt
/>
<div class="checkbox">
<label v-if="item.enableDisplay">
<div class="checkbox" v-if="item.enableDisplay">
<label>
<input
type="checkbox"
style="display: inline;"
......@@ -34,62 +24,103 @@
/>是否隐藏
</label>
</div>
<div>
<input
v-if="item.type === 'text'"
class="edit-input"
type="text"
@blur="onBlur"
@change="valueChange2()"
v-model="schemaData[item.dataKey].value"
@keyup="valueChange2()"
/>
<br />
<textarea
v-if="item.type === 'textarea'"
class="edit-input-area"
@blur="onBlur"
v-model="schemaData[item.dataKey].value"
@keyup="valueChange2()"
@input="valueChange2()"
cols="30"
rows="5"
></textarea>
</div>
<div v-if="item.type === 'group'">
<div v-for="(children, index) in item.itemList" :key="index">
<editMenu
:isIos="isIos"
:itemList="item.itemList"
:item="children"
:schemaData="schemaData"
:frameUrl="frameUrl"
@setList="setList"
></editMenu>
</div>
</div>
<div class="list-container" v-if="item.type === 'list'">
<div
class="list-item"
v-for="(item2, index2) in schemaData[item.dataKey]"
:key="index2"
class="create-btn-container"
v-if="!item.listLimit || (item.listLimit && schemaData[item.dataKey].length < !item.listLimit)"
>
<van-button class="create-btn" type="info" @click="addItem(item)">新增</van-button>
</div>
<div class="list-item" v-for="(item2, index2) in schemaData[item.dataKey]" :key="index2">
<div class="btn-con">
<span>序号{{index2}}</span>
<span class="del-btn" @click="deleteItem(index2, schemaData[item.dataKey])">删除</span>
<span class="index">序号{{index2}}</span>
</div>
<div class="list-item-list" v-for="(item3, index3) in item2" :key="index3">
<div class="list-item-list">
<div class="list-item-list-item" v-for="(item3, index3) in item2" :key="index3">
<div v-if="(index3 != 'schemaIndex' && index3 != 'index')">
<input
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'text'"
:placeholder="item.modelSchema[isSchemaIndex(item2)][index3].description"
class="edit-input"
class="edit-input edit-input-list-item"
type="text"
@blur="onBlur"
v-model="item2[index3]"
@keyup="valueChange2()"
/>
<textarea
cols="30"
rows="5"
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'textarea'"
:placeholder="item.modelSchema[isSchemaIndex(item2)][index3].description"
class="edit-input-area edit-input-list-item"
type="text"
@blur="onBlur"
v-model="item2[index3]"
@keyup="valueChange2()"
/>
<div>
<van-uploader
result-type="dataUrl"
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type == 'image' || item.modelSchema[isSchemaIndex(item2)][index3].type == 'video'"
:accept="item.modelSchema[isSchemaIndex(item2)][index3].type == 'image' ? 'image/*' : 'video/*'"
@click.native="uploadListItem(item.dataKey,index2, index3)"
:after-read="uploadAfter"
>
<!-- <van-button type="info">上传</van-button> -->
<img
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'image'"
:src="getHostUrl(item2[index3])"
class="edit-input"
class="edit-input edit-input-image"
/>
<video
class="edit-input-video"
:src="getHostUrl(item2[index3])"
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'video'"
></video>
<van-uploader
result-type="dataUrl"
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type == 'image' || item.modelSchema[isSchemaIndex(item2)][index3].type == 'video'"
:accept="item.modelSchema[isSchemaIndex(item2)][index3].type == 'image' ? 'image/*' : 'video/*'"
@click.native="uploadListItem(item.dataKey,index2, index3)"
:after-read="uploadAfter"
>
<van-button icon="photo" type="info">上传</van-button>
</van-uploader>
</div>
</div>
</div>
<div class="list-item-delete">
<span @click="deleteItem(index2, schemaData[item.dataKey])">
<img src="../../assets/img/delete-icon.png" class="list-item-delete-icon" alt />
<span class="del-btn">删除</span>
</span>
</div>
</div>
<div
class="create-btn-container"
v-if="!item.listLimit || (item.listLimit && schemaData[item.dataKey].length < !item.listLimit)"
>
<van-button class="create-btn" type="info" @click="addItem(item)">添加</van-button>
</div>
</div>
<van-uploader
......@@ -99,14 +130,38 @@
@click.native="uploadItem(item.dataKey)"
:after-read="uploadAfter"
>
<van-button icon="photo" type="info">上传</van-button>
<van-button type="info">上传</van-button>
<br />
</van-uploader>
<van-button type="info" v-if="item.selectList && item.type !== 'list'" @click="setSelectData(item, index)">选择默认数据</van-button>
<!-- <van-button
type="info"
@click="uploadFile(item.modelSchema[isSchemaIndex(item2)][index3].type)"
>上传</van-button>
<van-button
type="info"
v-if="item.selectList && item.type !== 'list'"
@click="setSelectData(item, index)"
>选择默认数据</van-button>-->
</div>
<selectDataCom
:selectList="selectData"
@changeSelcetData="changeSelcetData"
v-if="selectData.show"
></selectDataCom>
<div class="cropper-container" v-if="VueCropperOption.img">
<vueCropper
ref="cropper"
:img="VueCropperOption.img"
:canMove="false"
:autoCrop="VueCropperOption.autoCrop"
:outputType="VueCropperOption.outputType"
></vueCropper>
<div class="save-img-btn" @click="saveCropper">
<!-- <van-button @click="VueCropperOption.img = ''">取消</van-button> -->
确定
<!-- <van-button @click="saveCropper">确定</van-button> -->
</div>
</div>
</van-collapse-item>
</van-collapse>
<selectDataCom :selectList="selectData" @changeSelcetData="changeSelcetData" v-if="selectData.show"></selectDataCom>
</div>
</template>
......@@ -114,6 +169,8 @@
import { upload } from "@/api/api";
import { getHostUrl } from "@/utils/index";
import selectDataCom from "./selectData";
import { VueCropper } from "vue-cropper";
export default {
name: "editMenu",
props: {
......@@ -125,13 +182,22 @@ export default {
type: String,
default: ""
},
item: {
type: Object,
default: () => {}
},
isIos: {
type: Boolean,
default: true
},
schemaData: {
type: Object,
default: () => {}
}
},
components: {
selectDataCom
selectDataCom,
VueCropper
},
created() {
console.log(this.schemaData);
......@@ -144,12 +210,55 @@ export default {
itemKey: "",
selectData: {
show: false
},
VueCropperOption: {
img: "",
outputType: "png",
autoCrop: true,
preImg: ""
}
};
},
methods: {
uploadFile(data) {
this.$toast.loading({
mask: true,
duration: 0,
message: "上传中..."
});
upload(data)
.then(res => {
// this.schemaData[this.dataKey].value = res.data.data;
if (this.itemKey) {
this.setSchemaListData(res.data.data);
} else {
this.setSchemaData(res.data.data);
}
this.$toast.clear();
})
.catch(e => {
console.log(e);
this.$toast.clear();
this.$toast("上传失败");
});
},
onBlur() {
var top = window.scrollY
console.log(top)
window.scrollTo(0, 0);
var time = setTimeout(() => {
window.scrollTo(0, top);
clearTimeout(time)
}, 100)
},
valueChange2() {
console.log(this.schemaData);
console.log(this.schemaData)
setTimeout(() => {
this.$emit("setList", this.schemaData);
}, 100)
this.$emit("setList", this.schemaData);
},
setList() {
this.$emit("setList", this.schemaData);
},
uploadItem(key) {
......@@ -178,6 +287,7 @@ export default {
obj[item] = "";
});
this.schemaData[item.dataKey].push(obj);
console.log(obj);
} else {
alert("选择类型添加，敬请期待！");
}
......@@ -187,26 +297,13 @@ export default {
return getHostUrl(this.frameUrl, dataUrl);
},
uploadAfter(file) {
this.$toast.loading({
mask: true,
duration: 0,
message: "上传中..."
});
upload(file.file)
.then(res => {
// this.schemaData[this.dataKey].value = res.data.data;
if (this.itemKey) {
this.setSchemaListData(res.data.data);
// console.log(file);
if (String(file.file.type).indexOf("image") !== -1) {
this.$emit("setClipImg", true);
this.VueCropperOption.img = file.content;
} else {
this.setSchemaData(res.data.data);
this.uploadFile(file.file);
}
this.$toast.clear();
})
.catch(e => {
console.log(e);
this.$toast.clear();
this.$toast("上传失败");
});
},
checkboxChange(value) {
console.log(this.schemaData, value);
......@@ -224,8 +321,17 @@ export default {
arr.splice(index, 1);
this.$emit("setList", this.schemaData);
},
saveCropper() {
this.$emit("setClipImg", false);
this.VueCropperOption.img = "";
this.$refs.cropper.getCropBlob(data => {
console.log(data);
// do something
this.uploadFile(data);
});
},
setSelectData(item, index) {
const myItem = JSON.parse(JSON.stringify(item))
const myItem = JSON.parse(JSON.stringify(item));
this.selectData.show = true;
this.selectData.item = myItem;
......@@ -236,40 +342,122 @@ export default {
"http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg",
"http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg"
];
console.log(this.selectData)
console.log(this.selectData);
},
changeSelcetData(data) {
console.log(data);
this.dataKey = data.item.dataKey
this.setSchemaData(data.val)
this.selectData.show = false
this.dataKey = data.item.dataKey;
this.setSchemaData(data.val);
this.selectData.show = false;
}
}
};
</script>
<style lang="scss" scoped>
.image {
.menu-container {
// height: calc(100vh - 570px);
padding: 15px;
position: static;
box-sizing: border-box;
// overflow: scroll;
.cropper-container {
display: flex;
flex-direction: column;
background-color: #666;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100vw;
position: absolute;
height: 100vh;
// overflow: hidden;
z-index: 10000000;
.vue-cropper {
height: calc(100vh - 84px);
z-index: 100000000;
}
.save-img-btn {
width: 294px;
height: 44px;
line-height: 44px;
font-size: 18px;
margin: 20px auto;
margin-bottom: 20px;
background: linear-gradient(
266deg,
rgba(255, 171, 32, 1) 0%,
rgba(255, 114, 14, 1) 100%
);
box-shadow: 0px 2px 8px 0px rgba(255, 167, 31, 0.31);
border-radius: 30px;
text-align: center;
color: white;
z-index: 1000000;
}
}
.image {
height: 50px;
}
.list-container {
}
.van-uploader {
.van-button {
height: 0.8rem;
line-height: 0.8rem;
}
}
.list-container {
.list-item {
// padding:
position: relative;
.index {
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(0, 0, 0, 1);
// line-height: 18px;
}
.btn-con {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
}
.edit-input-list-item {
margin: 10px 0;
}
.edit-input-image {
width: auto;
height: 100px;
max-height: 100px;
max-width: 100%;
// display: block;
}
.list-item-delete {
text-align: right;
&-icon {
height: 14px;
width: 14px;
vertical-align: middle;
margin-right: 5px;
}
.del-btn {
font-size: 18px;
font-size: 14px;
color: rgba(250, 61, 34, 1);
vertical-align: middle;
}
padding: 5px;
margin-right: 10px;
}
.list-item-list {
padding: 10px;
border: 1px solid #dddddd;
box-sizing: border-box;
border-radius: 8px;
margin-bottom: 20px;
}
}
.btn-container {
}
}
.btn-container {
padding-left: 20px;
// line-height: 38px;
word-break: break-all;
......@@ -282,16 +470,16 @@ export default {
margin-bottom: 10px;
border-radius: 3px;
}
}
input {
margin-top: 17px;
}
input {
margin-top: 15px;
display: block;
width: 50vw;
height: 39px;
padding-left: 8px;
height: 42px;
padding-left: 10px;
border: none;
}
.checkbox {
}
.checkbox {
display: flex;
align-items: center;
height: 30px;
......@@ -305,11 +493,45 @@ input {
width: 20px;
}
}
}
.edit-input {
}
.create-btn-container {
margin-bottom: 25px;
.create-btn {
padding-left: 17px;
padding-right: 17px;
// width: 197px;
line-height: 34px;
box-sizing: border-box;
border: none;
font-size: 16px;
height: 34px;
background: linear-gradient(
266deg,
rgba(255, 171, 32, 1) 0%,
rgba(255, 114, 14, 1) 100%
);
box-shadow: 0px 2px 8px 0px rgba(255, 167, 31, 0.31);
border-radius: 22px;
}
}
.edit-input {
width: 97%;
border: 1px solid #d0d0d0;
color: #333333;
background: #f5f5f5;
border-radius: 6px;
font-size: 14px;
color: rgba(51, 51, 51, 1);
margin-top: 0;
}
.edit-input-area {
width: 97%;
background: #f5f5f5;
border-radius: 6px;
font-size: 14px;
color: rgba(51, 51, 51, 1);
margin-top: 0;
border: none;
outline: none;
}
}
</style>
src/views/tempaltes/editMenu_back.vue 0 → 100644
<template>
<div class="menu-container">
<van-collapse v-model="activeName" accordion>
<van-collapse-item
v-for="(item, index) in itemList"
:key="index"
:title="item.name"
:name="index"
>
<!-- <edit-menu v-if="item.type === 'group'" :itemList="item.itemList" :schemaData="schemaData">
</edit-menu>-->
<div>
<!-- <div>{{schemaData[item.dataKey]}} {{item.dataKey}}</div> -->
<video
v-if="item.type === 'video'"
class="image"
:src="getHostUrl(schemaData[item.dataKey].value)"
alt
/>
<img
v-if="item.type === 'image'"
class="image"
:src="getHostUrl(schemaData[item.dataKey].value)"
alt
/>
<div class="checkbox" v-if="item.enableDisplay">
<label>
<input
type="checkbox"
style="display: inline;"
v-model="schemaData[item.dataKey].visbility"
@change="checkboxChange"
/>是否隐藏
</label>
</div>
<div>
<input
v-if="item.type === 'text'"
class="edit-input"
type="text"
v-model="schemaData[item.dataKey].value"
@keyup="valueChange2()"
/>
</div>
<div class="list-container" v-if="item.type === 'list'">
<div
class="create-btn-container"
v-if="!item.listLimit || (item.listLimit && schemaData[item.dataKey].length < !item.listLimit)"
>
<van-button class="create-btn" type="info" @click="addItem(item)">新增</van-button>
</div>
<div
class="list-item"
v-for="(item2, index2) in schemaData[item.dataKey]"
:key="index2"
>
<div class="btn-con">
<span class="index">序号{{index2}}</span>
</div>
<div class="list-item-list" v-for="(item3, index3) in item2" :key="index3">
<div v-if="(index3 != 'schemaIndex' && index3 != 'index')">
<input
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'text'"
:placeholder="item.modelSchema[isSchemaIndex(item2)][index3].description"
class="edit-input edit-input-list-item"
type="text"
v-model="item2[index3]"
@keyup="valueChange2()"
/>
<div>
<van-uploader
result-type="dataUrl"
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type == 'image' || item.modelSchema[isSchemaIndex(item2)][index3].type == 'video'"
:accept="item.modelSchema[isSchemaIndex(item2)][index3].type == 'image' ? 'image/*' : 'video/*'"
@click.native="uploadListItem(item.dataKey,index2, index3)"
:after-read="uploadAfter"
>
<!-- <van-button type="info">上传</van-button> -->
<img
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'image'"
:src="getHostUrl(item2[index3])"
class="edit-input edit-input-image"
/>
<video
class="edit-input-video"
:src="getHostUrl(item2[index3])"
v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'video'"
></video>
</van-uploader>
</div>
</div>
</div>
<div class="list-item-delete">
<span @click="deleteItem(index2, schemaData[item.dataKey])">
<img src="../../assets/img/delete-icon.png" class="list-item-delete-icon" alt />
<span class="del-btn">删除</span>
</span>
</div>
</div>
</div>
<van-uploader
result-type="dataUrl"
v-if="item.type == 'image' || item.type == 'video'"
:accept="item.type == 'image' ? 'image/*' : 'video/*'"
@click.native="uploadItem(item.dataKey)"
:after-read="uploadAfter"
>
<van-button type="info">上传</van-button>
<br />
</van-uploader>
<van-button
type="info"
v-if="item.selectList && item.type !== 'list'"
@click="setSelectData(item, index)"
>选择默认数据</van-button>
</div>
</van-collapse-item>
</van-collapse>
<selectDataCom
:selectList="selectData"
@changeSelcetData="changeSelcetData"
v-if="selectData.show"
></selectDataCom>
</div>
</template>
<script>
import { upload } from "@/api/api";
import { getHostUrl } from "@/utils/index";
import selectDataCom from "./selectData";
export default {
name: "editMenu",
props: {
itemList: {
type: Array,
default: () => []
},
frameUrl: {
type: String,
default: ""
},
schemaData: {
type: Object,
default: () => {}
}
},
components: {
selectDataCom
},
created() {
console.log(this.schemaData);
},
data() {
return {
activeName: "",
dataKey: "",
listIndex: "",
itemKey: "",
selectData: {
show: false
}
};
},
methods: {
valueChange2() {
console.log(this.schemaData);
this.$emit("setList", this.schemaData);
},
uploadItem(key) {
// alert(key);
(this.itemKey = ""), (this.dataKey = key);
},
uploadListItem(key, index, itemKey) {
this.dataKey = key;
this.listIndex = index;
this.itemKey = itemKey;
console.log(key, index, itemKey, "dsadadsa");
},
isSchemaIndex(item) {
// console.log(item);
return item["schemaIndex"] ? item["schemaIndex"] : 0;
},
toObj(obj) {
console.log(obj);
return JSON.parse(JSON.stringify(obj));
},
addItem(item) {
if (item.modelSchema && item.modelSchema.length === 1) {
var keys = Object.keys(item.modelSchema[0]);
var obj = {};
keys.map(function(item) {
obj[item] = "";
});
this.schemaData[item.dataKey].push(obj);
} else {
alert("选择类型添加，敬请期待！");
}
console.log(item);
},
getHostUrl(dataUrl) {
return getHostUrl(this.frameUrl, dataUrl);
},
uploadAfter(file) {
this.$toast.loading({
mask: true,
duration: 0,
message: "上传中..."
});
upload(file.file)
.then(res => {
// this.schemaData[this.dataKey].value = res.data.data;
if (this.itemKey) {
this.setSchemaListData(res.data.data);
} else {
this.setSchemaData(res.data.data);
}
this.$toast.clear();
})
.catch(e => {
console.log(e);
this.$toast.clear();
this.$toast("上传失败");
});
},
checkboxChange(value) {
console.log(this.schemaData, value);
},
setSchemaData(value) {
this.schemaData[this.dataKey].value = value;
this.valueChange2();
},
setSchemaListData(value) {
this.schemaData[this.dataKey][this.listIndex][this.itemKey] = value;
this.valueChange2();
this.itemKey = "";
},
deleteItem(index, arr) {
arr.splice(index, 1);
this.$emit("setList", this.schemaData);
},
setSelectData(item, index) {
const myItem = JSON.parse(JSON.stringify(item));
this.selectData.show = true;
this.selectData.item = myItem;
this.selectData.index = index;
this.selectData.item.selectList = [
"http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg",
"http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg",
"http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg",
"http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg"
];
console.log(this.selectData);
},
changeSelcetData(data) {
console.log(data);
this.dataKey = data.item.dataKey;
this.setSchemaData(data.val);
this.selectData.show = false;
}
}
};
</script>
<style lang="scss" scoped>
.image {
height: 50px;
}
.van-uploader {
.van-button {
height: 0.8rem;
line-height: 0.8rem;
}
}
.list-container {
.list-item {
// padding:
position: relative;
.index {
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(0, 0, 0, 1);
// line-height: 18px;
}
.btn-con {
display: flex;
justify-content: space-between;
}
.edit-input-list-item {
margin: 10px 0;
}
.edit-input-image {
width: auto;
height: 100px;
max-height: 100px;
max-width: 100%;
// display: block;
}
.list-item-delete {
text-align: right;
&-icon {
height: 16px;
width: 16px;
vertical-align: middle;
margin-right: 5px;
}
.del-btn {
font-size: 14px;
color: rgba(250, 61, 34, 1);
vertical-align: middle;
}
}
padding: 10px;
margin-right: 10px;
border: 1px solid #dddddd;
box-sizing: border-box;
border-radius: 8px;
margin-bottom: 20px;
}
}
.btn-container {
padding-left: 20px;
// line-height: 38px;
word-break: break-all;
.editbtn {
display: inline-block;
background: white;
padding: 2px 5px;
border: 1px solid #333333;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 3px;
}
}
input {
margin-top: 15px;
display: block;
width: 50vw;
height: 42px;
padding-left: 10px;
border: none;
}
.checkbox {
display: flex;
align-items: center;
height: 30px;
label {
display: flex;
align-items: center;
height: 30px;
input {
margin: 0;
height: 20px;
width: 20px;
}
}
}
.create-btn-container {
margin-bottom: 25px;
.create-btn {
padding-left: 17px;
padding-right: 17px;
// width: 197px;
line-height: 34px;
box-sizing: border-box;
border: none;
font-size: 16px;
height: 34px;
background: linear-gradient(
266deg,
rgba(255, 171, 32, 1) 0%,
rgba(255, 114, 14, 1) 100%
);
box-shadow: 0px 2px 8px 0px rgba(255, 167, 31, 0.31);
border-radius: 22px;
}
}
.edit-input {
width: 97%;
background: #f5f5f5;
border-radius: 6px;
font-size: 14px;
color: rgba(51, 51, 51, 1);
margin-top: 0;
}
</style>
src/views/tempaltes/editMore.vue
<template>
<div class="edit-container">
<NavBar title="编辑视片" v-if="!is_mini_token" left-arrow>
<NavBar title="编辑作品" v-if="!is_mini_token" left-arrow>
<div @click="pageShow">页面管理</div>
</NavBar>
<div class="content">
<div class="content-left">
<svg
v-show="!gifloaded && !loaded && !iframeLoaded"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="margin:auto;background:#fff;display:block; margin-top: 30vh"
width="100px"
height="100px"
s
viewBox="0 0 100 100"
preserveAspectRatio="xMidYMid"
>
<g transform="translate(50,50)">
<circle
cx="0"
cy="0"
r="8.333333333333334"
fill="none"
stroke="#e15b64"
stroke-width="4"
stroke-dasharray="26.179938779914945 26.179938779914945"
transform="rotate(241.469)"
>
<animateTransform
attributeName="transform"
type="rotate"
values="0 0 0;360 0 0"
times="0;1"
dur="1s"
calcMode="spline"
keySplines="0.2 0 0.8 1"
begin="0"
repeatCount="indefinite"
/>
</circle>
<circle
cx="0"
cy="0"
r="16.666666666666668"
fill="none"
stroke="#f47e60"
stroke-width="4"
stroke-dasharray="52.35987755982989 52.35987755982989"
transform="rotate(322.365)"
>
<animateTransform
attributeName="transform"
type="rotate"
values="0 0 0;360 0 0"
times="0;1"
dur="1s"
calcMode="spline"
keySplines="0.2 0 0.8 1"
begin="-0.2"
repeatCount="indefinite"
/>
</circle>
<circle
cx="0"
cy="0"
r="25"
fill="none"
stroke="#f8b26a"
stroke-width="4"
stroke-dasharray="78.53981633974483 78.53981633974483"
transform="rotate(3.35861)"
>
<animateTransform
attributeName="transform"
type="rotate"
values="0 0 0;360 0 0"
times="0;1"
dur="1s"
calcMode="spline"
keySplines="0.2 0 0.8 1"
begin="-0.4"
repeatCount="indefinite"
/>
</circle>
<circle
cx="0"
cy="0"
r="33.333333333333336"
fill="none"
stroke="#abbd81"
stroke-width="4"
stroke-dasharray="104.71975511965978 104.71975511965978"
transform="rotate(66.1951)"
>
<animateTransform
attributeName="transform"
type="rotate"
values="0 0 0;360 0 0"
times="0;1"
dur="1s"
calcMode="spline"
keySplines="0.2 0 0.8 1"
begin="-0.6"
repeatCount="indefinite"
/>
</circle>
<circle
cx="0"
cy="0"
r="41.666666666666664"
fill="none"
stroke="#849b87"
stroke-width="4"
stroke-dasharray="130.89969389957471 130.89969389957471"
transform="rotate(152.08)"
>
<animateTransform
attributeName="transform"
type="rotate"
values="0 0 0;360 0 0"
times="0;1"
dur="1s"
calcMode="spline"
keySplines="0.2 0 0.8 1"
begin="-0.8"
repeatCount="indefinite"
/>
</circle>
</g>
</svg>
<div class="content" v-show="gifloaded && iframeLoaded">
<div
class="content-left"
v-show="!clipImg"
:class="{'content-left-v': templateData.templateShow === 'VERTICAL' }"
>
<div class="content-left-top">
<!-- <div class="top-right">
<span class="im">*</span>
视片名称：
<input type="text" v-model="templateData.filmName" />
<div style>
视片描述：
<input type="text" v-model="templateData.filmDescribe" />
<div class="page-manager" @click="showSheet = true">
<img src="../../assets/img//manager.png" alt />
页面管理
</div>
</div>-->
<div class="page-count">
<div class="count">{{ currentPage + 1 + '/' + templateData.listData.length}}</div>
</div>
<div class="page-preview" @click="preview">
预览
<img src="../../assets/img/right-arrow.png" alt />
</div>
<!-- <van-button size="mini" @click="createPage(currentPage)">新增此页</van-button>
<van-button size="mini" @click="deletePage(currentPage)">删除此页</van-button>-->
<!-- <van-button size="mini" @click="pageShow">页面排序</van-button> -->
<!-- <van-button size="mini" @click="preview">预览</van-button> -->
</div>
<iframe
style="height: 0px;width: 100%;"
v-if="isIos"
v-show="false"
@load="iframetestLoad"
scrolling="no"
:src="templateData.frameUrl+'?isEdit=1'"
frameborder="0"
></iframe>
<div
class="iframe-container"
:style="!isIos ? 'width: 100vw' : ''"
:class="{'iframe-container2': templateData.templateShow === 'VERTICAL', isIos: isIos }"
>
<iframe
class="iframe"
name="tiframe"
v-if="loaded"
@touchmove.prevent
@click.prevent
scrolling="no"
style="height:70vw;width: 100vw;"
:style="
templateData.templateShow === 'VERTICAL' ? 'height:130vw;' : 'height:70vw;'
"
:class="{'viframe': templateData.templateShow === 'VERTICAL' }"
v-show="!isPreview"
@load="setList"
:src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId + '&now=' + date"
@load="iframeLoad"
:src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId + '#' + time"
frameborder="0"
></iframe>
</div>
<!--
:src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId + '&now=' + time"
https://visual-clouds.bdideal.com/html/test2.html
: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"-->
</div>
<div class="content-menu">
<div class="content-menu" v-show="!clipImg">
<slider :list="templateData.listData">
<div
class="menu-item"
......@@ -45,116 +193,71 @@
@click="goPage(scope.index)"
>
<img :src="scope.slider.thumb" alt />
<div class="page-name">{{scope.slider.name}}</div>
</div>
</slider>
<div class="page-manage-right">
<div>共{{templateData.listData.length}}页</div>
<div class="page-manage">
<span @click="pageShow">去管理</span>
</div>
</div>
<div class="group-menu" v-if="templateData.listData[currentPage]" v-show="!clipImg">
<slider :list="templateData.listData[currentPage].itemList">
<div
class="group-menu-item"
:class="itemListIndex===scope.index? 'group-menu-item-active': ''"
@click="setItemListIndex(scope.index)"
slot-scope="scope"
>{{scope.slider.name}}</div>
</slider>
</div>
<div class="content-right">
<div class="title">编辑栏</div>
<div class="edit-area">
<!-- <div class="title">编辑栏</div> -->
<div class="edit-area" :class="{'fixed-edit-area': clipImg}">
<div v-if="templateData.listData[currentPage]">
<editMenu
v-if="loaded "
:isIos="this.isIos"
:itemList="templateData.listData[currentPage].itemList"
:item="templateData.listData[currentPage].itemList[itemListIndex]"
:schemaData="templateData.listData[currentPage].schemaData"
:frameUrl="templateData.frameUrl"
@setList="setList"
@setClipImg="setClipImg"
></editMenu>
</div>
</div>
</div>
</div>
<div class="createBtn">
<van-button type="info" @click="preview">预览视片</van-button>
<van-button type="info" @click="enterSubmit">更新并同步到设备</van-button>
</div>
<van-popup v-model="show" position="bottom">
<div class="pub-container">
<div class="top">
<van-icon name="arrow-left" @click="closeEdit"></van-icon>
</div>
<div class="edit-input">
<div>{{editObj.name}}:</div>
<input
type="text"
:disabled="editObj.type !== 'text'"
v-model="editObj.value"
@keyup="valueChange"
@change="valueChange"
/>
<br />
<div class="upload-btn">
<van-uploader
result-type="dataUrl"
v-if="editObj.type == 'image'"
:after-read="uploadAfter"
>
<van-button icon="photo" type="info">上传图片</van-button>
</van-uploader>
</div>
<!-- <button @click="cancel">取消编辑</button> -->
<div class="createBtn" v-show="gifloaded && loaded && iframeLoaded ">
<van-button type="info" @click="enterSubmit" style="width: 100%">发布</van-button>
</div>
</div>
</van-popup>
<van-action-sheet v-model="showSheet" :round="true" :actions="actions" @select="onSheetSelect" />
<van-popup v-model="isPreview" style="width:100%">
<preview v-if="isPreview" :myonClickLeft="colsePreview"></preview>
</van-popup>
<van-popup v-model="pageViews" style="width:100%" position="right">
<div class="page-container">
<!-- <div class="top">
<span @click="pageViews=false">关闭</span>
</div>-->
<van-nav-bar title="页面管理">
<div slot="right">
<span @click="pageViews=false">关闭</span>
</div>
</van-nav-bar>
<div class="page-default-list">
<div class="tips">选择页面并拖拽至下方：</div>
<div class="list-over">
<draggable
class="list-group"
:scroll="true"
:delay="3"
:group="{ name: 'listData', pull: 'clone', put: false }"
@change="dragChange"
:list="templateData.defaultData"
>
<div
class="page-item list-group-item"
v-for="(item, index) in templateData.defaultData"
:key="index"
>
<img :src="item.thumb" alt />
<div class="name">{{item.name}}</div>
</div>
</draggable>
</div>
</div>
<div class="page-count">视片页面，共{{templateData.listData.length}}页：</div>
<div class="page-content-tips">备注：长按移动模板顺序</div>
<div class="page-list">
<draggable
class="page-list-container"
:scroll="true"
:delay="3"
:delay="0"
draggable=".page-item"
group="listData"
@change="dragChange"
:list="templateData.listData"
>
<div class="page-item" v-for="(item, index) in templateData.listData" :key="index">
<van-icon name="clear" class="delete-page" @click="deletePage(index)"></van-icon>
<img :src="item.thumb" alt />
<div name="clear" class="delete-page" @click="deletePage(index)"></div>
<div
:src="item.thumb"
class="img"
:style="{'background': `url(${item.thumb}) no-repeat center` }"
alt
:class="{'page-item-thumb': templateData.templateShow !== 'HORIZONTAL'}"
></div>
<div class="name">{{item.name}}</div>
</div>
</draggable>
</div>
<div class="page-enter" @click="pageViews=false">确定</div>
</div>
</van-popup>
</div>
......@@ -174,13 +277,22 @@ import {
import axios from "axios";
import draggable from "vuedraggable";
import editMenu from "./editMenu";
import { setTimeout } from "timers";
export default {
data() {
return {
activeName: "0",
canvasImg: "",
gifloaded: false,
is_mini_token: false,
time: new Date().getTime(),
showSheet: false,
actions: [
{ name: "新增此页", action: "createPage" },
{ name: "删除此页", action: "deletePage" },
{ name: "页面排序", action: "pageShow" }
],
templateData: {
height: 450,
width: 800,
......@@ -195,16 +307,20 @@ export default {
defaultData: [],
templateInfo: {}
},
clipImg: false,
editObj: {},
editIndex: "",
editPage: "",
isEdited: false,
mode: "",
loaded: false,
iframeLoaded: false,
show: false,
isIos: true,
pageViews: false,
isPreview: false,
currentPage: 0,
itemListIndex: 0,
deviceList: [
{
clientId: "maxrocky",
......@@ -224,6 +340,13 @@ export default {
}
},
created() {
let ua = window.navigator.userAgent;
//$alert('浏览器版本: ' + app + '\n' + '用户代理: ' + ua);
if (ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
this.isIos = true;
} else {
this.isIos = false;
}
window.onunload = function() {
window.wx.miniProgram.navigateBack({});
};
......@@ -254,6 +377,10 @@ export default {
vm.templateData.listData = e.data.pages;
// console.log("12121321321");
}
if (typeof e.data === "object" && e.data["type"] == "slideChange") {
vm.currentPage = e.data.page;
// console.log("12121321321");
}
// var color = e.data;
// document.getElementById("color").style.backgroundColor = color;
},
......@@ -261,6 +388,7 @@ export default {
);
if (this.$route.query.filmId) {
this.mode = "film";
this.templateData.filmId = this.$route.query.filmId;
this.getFilmDetail();
}
if (this.$route.query.templateId) {
......@@ -280,12 +408,20 @@ export default {
}
},
mounted() {
document.title = "编辑视片";
document.title = "编辑作品";
// var timer = setTimeout(() => {
// this.gifloaded = true;
// clearTimeout(timer);
// }, 1000);
},
methods: {
message(data) {
window.frames[0].postMessage(data, "https://visual-clouds.bdideal.com");
// window.frames[0].postMessage(data, "https://localhost:8082");
window.frames["tiframe"].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")
},
htmltoImg() {
window
......@@ -304,6 +440,20 @@ export default {
document.body.appendChild(newImg);
});
},
setItemListIndex(index) {
this.itemListIndex = index;
},
onSheetSelect(item) {
this.showSheet = false;
if (item.action === "createPage") {
this.createPage(this.currentPage);
} else if (item.action === "deletePage") {
this.deletePage(this.currentPage);
} else if (item.action === "pageShow") {
this.pageShow();
}
console.log(item);
},
dragChange(value) {
console.log("dragChange", value);
this.message({
......@@ -317,6 +467,9 @@ export default {
pages: this.templateData.listData
});
},
setClipImg(show) {
this.clipImg = show
},
goPage(index) {
this.currentPage = index;
console.log(index);
......@@ -347,6 +500,10 @@ export default {
this.pageViews = false;
},
deletePage(index) {
if (this.templateData.listData.length < 2) {
this.$toast.fail("至少存留一页");
return false;
}
this.$toast.loading({
mask: true,
message: "删除中..."
......@@ -361,6 +518,9 @@ export default {
pages: this.templateData.listData
});
this.$toast.success("删除成功");
if (this.templateData.listData.length <= this.currentPage) {
this.goPage(this.templateData.listData.length - 1);
}
}, 1000);
},
valueChange() {
......@@ -403,6 +563,14 @@ export default {
type: "cancelEdit"
});
},
iframetestLoad() {
this.loaded = true;
},
iframeLoad() {
this.gifloaded = true
this.iframeLoaded = true
this.setList();
},
pageShow() {
this.message({
type: "getList"
......@@ -422,7 +590,7 @@ export default {
getFilmDetail() {
if (this.$route.query.filmId) {
getFilmDetail(this.$route.query.filmId).then(res => {
console.log(res.data, "视片详情");
console.log(res.data, "作品详情");
this.templateData.filmId = res.data.filmId;
this.templateData.filmName = res.data.filmName;
this.templateData.resourceUrl = res.data.resourceUrl;
......@@ -433,6 +601,7 @@ export default {
this.templateData.templateInfo = JSON.parse(
res.data.filmData
).templateInfo;
this.templateData = JSON.parse(JSON.stringify(this.templateData));
// this.setList()
axios
.get(
......@@ -446,23 +615,13 @@ export default {
var pagesData = res.data.pageList;
this.templateData.defaultData = pagesData;
});
if (!this.isIos) {
this.loaded = true;
}
// this.$toast("数据加载完成");
setTimeout(() => {
document.querySelector(".iframe").addEventListener(
"touchmove",
function(e) {
e.preventDefault();
},
false
);
document.querySelector(".iframe").addEventListener(
"click",
function(e) {
e.preventDefault();
},
false
);
}, 300);
window.frames["tiframe"].location.reload();
}, 500);
// console.log()
// this.setList()
});
......@@ -477,6 +636,14 @@ export default {
this.templateData.frameUrl = res.data.frameUrl;
this.templateData.filmDescribe = res.data.templateDescribe;
this.templateData.templateShow = res.data.templateShow;
if (!this.isIos) {
this.loaded = true;
}
// this.$toast("数据加载完成");
setTimeout(() => {
window.frames["tiframe"].location.reload();
console.log("reload");
}, 500);
axios
.get(
res.data.resourceUrl.replace(
......@@ -493,7 +660,6 @@ export default {
this.templateData.defaultData = pagesData;
this.setList();
});
this.loaded = true;
});
},
publish() {
......@@ -502,7 +668,8 @@ export default {
return;
}
if (this.mode === "film" || window.sessionStorage.getItem("filmId")) {
const filmId = this.$route.query.filmId || window.sessionStorage.getItem("filmId")
const filmId =
this.$route.query.filmId || window.sessionStorage.getItem("filmId");
updateFilmInfo(
filmId,
JSON.stringify({
......@@ -515,7 +682,7 @@ export default {
this.show = false;
this.$toast.success("更新成功");
// window.sessionStorage.setItem("filmId");
this.navToWx(filmId)
this.navToWx(filmId);
// this.$router.back();
});
} else {
......@@ -534,16 +701,33 @@ export default {
filmDescribe: this.templateData.filmDescribe
}).then(res => {
window.sessionStorage.setItem("filmId", res.data.data);
this.templateData.filmId = res.data.data;
this.navToWx(res.data.data);
});
}
},
navToWx(filmId) {
navToWx(fId) {
const filmId =
this.$route.query.filmId ||
window.sessionStorage.getItem("filmId") ||
fId;
window.wx.miniProgram.navigateTo({
url: `/pages/home/film/schedule_add/components/device/index?fId=${filmId}`
});
this.$toast.clear();
},
getFilmId() {
const filmId =
this.$route.query.filmId || window.sessionStorage.getItem("filmId");
return filmId;
},
enterSubmit() {
this.$toast.loading({
overlay: true,
message: "加载中...",
forbidClick: true,
duration: 0
});
this.message({
type: "getList"
});
......@@ -607,15 +791,34 @@ export default {
<style lang="scss" scoped>
.edit-container {
overflow-x: hidden;
min-height: 100%;
min-height: 100vh;
box-sizing: border-box;
padding-bottom: 80px;
position: relative;
z-index: 1;
.page-content-tips {
text-align: center;
font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 145, 16, 1);
line-height: 18.5px;
letter-spacing: 6.5px;
padding-bottom: 5px;
padding-top: 10px;
}
.content {
// display: flex;
justify-content: space-between;
// justify-content: space-between;
.content-menu {
display: flex;
// height: calc(100vh - 96px);
background: #ddd;
padding: 20px;
padding-right: 0;
background: #fff;
padding: 10px;
padding-right: 10px;
width: 100%;
box-sizing: border-box;
overflow: auto;
......@@ -635,16 +838,56 @@ export default {
text-decoration: underline;
}
}
.swiper-container {
width: calc(100% - 60px);
}
.swiper-slide {
width: auto;
}
.menu-item {
position: relative;
width: 80px;
min-height: 70px;
min-height: 50px;
img {
border: 1px dashed #666;
width: 100%;
box-sizing: border-box;
}
// line-height: 65px;
margin: 0 20px;
font-size: 15px;
.close {
position: absolute;
top: 0;
right: 0;
}
}
.activePage {
img {
border: 2px solid red;
}
}
.sortable-chosen {
background: lightblue;
}
}
.group-menu {
// box-shadow:0px -1px 0px 0px rgba(0,0,0,0.1);
border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
display: flex;
// height: calc(100vh - 96px);
background: #fff;
padding: 0px 10px;
padding-right: 10px;
width: 100%;
box-sizing: border-box;
overflow: auto;
.swiper-slide {
width: auto;
}
.group-menu-item {
position: relative;
// width: 80px;
height: 40px;
line-height: 40px;
img {
border: 1px dashed #666;
width: 100%;
......@@ -653,15 +896,32 @@ export default {
// line-height: 65px;
margin: 0 20px;
font-size: 15px;
color: rgba(153, 153, 153, 1);
.close {
position: absolute;
top: 0;
right: 0;
}
}
.group-menu-item-active {
color: rgba(255, 145, 16, 1);
font-size: 16px;
position: relative;
&::after {
content: "";
position: absolute;
width: 19px;
height: 4px;
background: rgba(255, 145, 16, 1);
box-shadow: 0px 1px 4px 1px rgba(233, 145, 42, 0.43);
border-radius: 2px;
left: calc(50% - 9.5px);
bottom: 0;
}
}
.activePage {
img {
border: 1px solid red;
border: 2px solid red;
}
}
.sortable-chosen {
......@@ -669,18 +929,72 @@ export default {
}
}
.content-left {
padding-top: 20px;
// padding-top: 10px;
flex: 1;
// padding: 40px 40px 0 30px;
background: #eeeeee;
background: #f5f5f5;
// height: calc(100vh - 96px);
box-sizing: border-box;
text-align: left;
padding-bottom: 25px;
.content-left-top {
// background-color: #fff;
display: flex;
font-size: 21px;
color: #333333;
justify-content: space-between;
align-items: center;
padding: 20px 16px;
font-size: 14px;
.page-manager {
display: flex;
flex: 1;
align-items: center;
img {
width: 16px;
height: 15px;
margin-right: 7px;
}
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
color: rgba(0, 0, 0, 1);
}
.page-count {
.count {
font-size: 12px;
background: rgba(216, 216, 216, 1);
color: rgba(0, 0, 0, 1);
border-radius: 8px;
padding: 2px 10px;
display: inline-block;
}
flex: 1;
text-align: center;
}
.page-preview {
flex: 1;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
color: rgba(255, 145, 16, 1);
text-align: right;
display: flex;
align-items: center;
justify-content: flex-end;
img {
margin-left: 5px;
width: 7px;
height: 10px;
}
}
.van-button {
margin: 0 15px;
background-color: #ff9110;
color: white;
width: 80px;
height: 30px;
border-radius: 22px;
}
.top-left {
display: flex;
.left-item {
......@@ -715,25 +1029,81 @@ export default {
}
}
}
.iframe-container {
box-sizing: border-box;
// display: flex;
// justify-content: center;
position: relative;
width: 344px;
margin: 0 auto;
}
.iframe-container2 {
box-sizing: border-box;
// display: flex;
// justify-content: center;
width: 194px;
margin: 0 auto;
}
.isIos .iframe {
box-shadow: 0px 14px 27px 0px rgba(0, 0, 0, 0.16);
}
.iframe {
width: 10rem !important;
height: 70vw;
width: 100%;
margin: 0 auto;
// margin-left: 16px;
height: 194px;
display: block;
// box-shadow: 0px 14px 27px 0px rgba(0, 0, 0, 0.16);
// position: absolute;
overflow: hidden;
background-color: transparent;
transform: translate3d(0, 0, 0);
}
.viframe {
overflow: hidden;
// position: absolute;
width: 100% !important;
// margin-left: 91px;
height: 344px;
}
}
.content-left-v {
padding-bottom: 13px;
.content-left-top {
padding: 15px;
}
}
.content-right {
// position: relative;
// z-index: 10;
// width: 300px;
text-align: left;
font-size: 20px;
background: #d0d0d0;
font-size: 18px;
background: #fff;
// height: calc(100vh - 96px);
box-sizing: border-box;
overflow: auto;
.title {
padding: 17px 0 0 20px;
padding: 0px 0 8px 20px;
margin-bottom: 10px;
border-bottom: 1px solid #dddddd;
}
// .fixed-edit-area {
// position: fixed;
// top: 0;
// right: 0;
// left: 0;
// bottom: 0;
// z-index: 1000;
// height: 100vh;
// .menu-container {
// height: 100vh !important;
// }
// }
.edit-area {
padding-top: 20px;
padding-top: 10px;
padding-bottom: 20px;
.image {
height: 50px;
......@@ -801,7 +1171,7 @@ export default {
input {
margin-top: 20px;
width: 80vw;
border-top: 1px solid;
background: #f5f5f5;
font-size: 17px;
}
.upload-btn {
......@@ -813,6 +1183,11 @@ export default {
height: 100vh;
width: 100vw;
text-align: left;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.top {
padding-right: 5px;
line-height: 40px;
......@@ -844,6 +1219,15 @@ export default {
img {
width: 100%;
height: auto;
position: relative;
&::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
}
margin-right: 20px;
}
......@@ -859,29 +1243,71 @@ export default {
font-size: 20px;
text-align: left;
}
.page-list-container {
display: flex;
flex-wrap: wrap;
}
.page-list {
padding: 20px 20px;
padding: 15px 0px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.sortable-chosen {
background: lightblue;
}
.page-item {
display: flex;
// display: flex;
position: relative;
align-items: center;
margin-bottom: 20px;
img {
width: 160px;
height: 90px;
margin: 20px 10px;
.img {
width: 159px;
height: 89.5px;
box-sizing: border-box;
border-radius: 6px;
position: relative;
background-size: 100% 100% !important;
&::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
}
.page-item-thumb {
width: 103px;
height: 183.5px;
}
.name {
font-size: 15px;
padding-left: 20px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.delete-page {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
top: 0;
right: 0;
width: 15.5px;
height: 15.5px;
background: url(http://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/close.png)
no-repeat center;
background-size: cover;
color: white;
top: 5px;
right: 3px;
font-size: 17px;
z-index: 3;
}
}
}
......@@ -893,20 +1319,46 @@ export default {
line-height: 60px;
}
}
padding-bottom: 70px;
.page-enter {
width: 294px;
height: 44px;
line-height: 44px;
background: linear-gradient(
180deg,
rgba(255, 145, 16, 1) 0%,
rgba(255, 114, 14, 1) 100%
);
border-radius: 30px;
margin: 0 auto;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
letter-spacing: 2px;
text-align: center;
}
.createBtn {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 10px 40px;
padding-bottom: 10px;
display: flex;
z-index: 100;
z-index: 1000;
justify-content: space-between;
background: white;
box-sizing: border-box;
padding: 0 5%;
.van-button {
width: 45%;
width: 50%;
border: none;
outline: none;
background-color: #ff9110;
border-radius: 30px;
font-size: 18px;
letter-spacing: 1px;
font-family: PingFangSC-Medium, PingFang;
font-weight: 500;
}
}
}
......
src/views/tempaltes/filmDetail.vue
......@@ -57,16 +57,16 @@
</div>-->
</div>
<div class="createBtn">
<van-button type="info" style="width:45%" @click="goEdit">修改视片</van-button>
<van-button type="info" style="width:45%" @click="goEdit">修改作品</van-button>
<van-button type="info" @click="goDevices" style="width:45%">更新绑定设备</van-button>
</div>
<van-dialog :before-close="beforeClose" v-model="show" title="视片信息" show-cancel-button>
<div class="tips">*视片名称:</div>
<input placeholder="请输入视片名称" v-model="templateData.filmName" class="film-name" type="text" />
<van-dialog :before-close="beforeClose" v-model="show" title="作品信息" show-cancel-button>
<div class="tips">*作品名称:</div>
<input placeholder="请输入作品名称" v-model="templateData.filmName" class="film-name" type="text" />
<br />
<div class="tips">视片描述:</div>
<div class="tips">作品描述:</div>
<input
placeholder="请输入视片描述"
placeholder="请输入作品描述"
v-model="templateData.filmDescribe"
class="film-name"
type="text"
......@@ -87,7 +87,7 @@ export default {
data() {
return {
show: false,
title: "视片详情",
title: "作品详情",
current: 0,
page: 1,
list: [],
......@@ -130,7 +130,7 @@ export default {
}
},
mounted() {
document.title = "视片详情";
document.title = "作品详情";
window.addEventListener("popstate", () => {
window.wx.miniProgram.navigateBack();
console.log('wx.miniProgram.navigateBack()')
......@@ -153,7 +153,7 @@ export default {
},
getFilmDetail() {
getFilmDetail(this.$route.query.filmId).then(res => {
console.log(res.data, "视片详情");
console.log(res.data, "作品详情");
this.templateData.filmId = res.data.filmId;
this.templateData.templateUrl = res.data.templateUrl.split(",");
this.templateData.filmName = res.data.filmName;
......@@ -182,7 +182,7 @@ export default {
console.log(action);
if (action === "confirm") {
if (!this.templateData.filmName) {
this.$toast("请输入视片名称");
this.$toast("请输入作品名称");
done(false);
} else {
updateBaseFilmInfo(
......@@ -194,7 +194,7 @@ export default {
this.$toast.success("更新成功");
this.show = false;
// updateFilmInfo(res.data.filmId, "数据").then(res => {
// console.log(res, "更新视片成功");
// console.log(res, "更新作品成功");
// this.$router.back();
// });
// this.$router.back();
......
src/views/tempaltes/filmDevice.vue
<template>
<div class="edit-container">
<NavBar title="视片设备列表" v-if="!is_mini_token" left-arrow></NavBar>
<NavBar title="作品设备列表" v-if="!is_mini_token" left-arrow></NavBar>
<div class="content">
<div class="myfilms">
<div class="title">
......@@ -135,7 +135,7 @@ export default {
}
},
mounted() {
document.title = "视片设备列表";
document.title = "作品设备列表";
},
methods: {
getScheduleDetail() {
......
src/views/tempaltes/preview.vue
......@@ -5,7 +5,7 @@
<div class="content-left">
<iframe
@load="getData"
class="iframe"
class="iframe preview-iframe"
v-show="loaded"
scrolling="no"
:src="templateData.frameUrl+'?isPreview=1'"
......@@ -62,7 +62,7 @@ export default {
},
methods: {
message(data) {
window.frames[1].postMessage(data, "https://visual-clouds.bdideal.com");
window.frames[2].postMessage(data, "https://visual-clouds.bdideal.com");
// window.frames[1].postMessage(data, "https://localhost:8082");
},
getData() {
......
src/views/user/films.vue
<template>
<div>
<NavBar title="我的视片" left-arrow></NavBar>
<NavBar title="我的作品" left-arrow></NavBar>
<film></film>
</div>
</template>
......
src/views/user/index.vue
......@@ -8,7 +8,7 @@
<!-- <div class="user-name"></div> -->
</div>
<div class="eee-bg"></div>
<van-cell title="我的视片" icon="shop-o" is-link :to="{
<van-cell title="我的作品" icon="shop-o" is-link :to="{
path: '/user/films'
}"></van-cell>
<van-cell title="我的设备" icon="shop-o" is-link :to="{
......
src/views_pad/layout/index.vue
......@@ -18,7 +18,7 @@
<van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/device') }" replace :to="{
path: '/device',
exact: false
}" icon="setting-o">设备与视片</van-tabbar-item>
}" icon="setting-o">设备与作品</van-tabbar-item>
<van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/user') }" replace :to="{
path: '/user',
exact: false
......
src/views_pad/tempaltes/detail.vue
......@@ -83,7 +83,7 @@ export default {
},
getFilmDetail() {
getFilmDetail(this.$route.query.filmId).then(res => {
console.log(res.data, "视片详情");
console.log(res.data, "作品详情");
this.templateData.filmId = res.data.filmId;
this.name = res.data.filmName
this.templateData.resourceUrl = res.data.resourceUrl;
......@@ -99,7 +99,7 @@ export default {
JSON.stringify(this.templateData.listData)
).then(res => {
this.show = false;
console.log(res, "更新视片成功");
console.log(res, "更新作品成功");
this.$router.back();
});
}
......@@ -115,10 +115,10 @@ export default {
filmName: ''
}).then(res => {
this.$toast.success('添加成功');
console.log(res, "创建视片成功");
console.log(res, "创建作品成功");
this.show = false;
// updateFilmInfo(res.data.filmId, "数据").then(res => {
// console.log(res, "更新视片成功");
// console.log(res, "更新作品成功");
// this.$router.back();
// });
// this.$router.back();
......
src/views_pad/tempaltes/edit.vue
......@@ -249,7 +249,7 @@ export default {
},
getFilmDetail() {
getFilmDetail(this.$route.query.filmId).then(res => {
console.log(res.data, "视片详情");
console.log(res.data, "作品详情");
this.templateData.filmId = res.data.filmId;
this.name = res.data.filmName;
this.templateData.resourceUrl = res.data.resourceUrl;
......@@ -272,7 +272,7 @@ export default {
).then(res => {
this.show = false;
this.$toast.success("发布成功");
console.log(res, "更新视片成功");
console.log(res, "更新作品成功");
this.$router.back();
});
}
......@@ -287,10 +287,10 @@ export default {
filmName: this.name
}).then(res => {
this.$toast.success("发布成功");
console.log(res, "创建视片成功");
console.log(res, "创建作品成功");
this.show = false;
// updateFilmInfo(res.data.filmId, "数据").then(res => {
// console.log(res, "更新视片成功");
// console.log(res, "更新作品成功");
// this.$router.back();
// });
this.$router.back();
......
src/views_pad/tempaltes/editMore.vue
......@@ -384,7 +384,7 @@ export default {
},
getFilmDetail() {
getFilmDetail(this.$route.query.filmId).then(res => {
console.log(res.data, "视片详情");
console.log(res.data, "作品详情");
this.templateData.filmId = res.data.filmId;
this.name = res.data.filmName;
this.templateData.resourceUrl = res.data.resourceUrl;
......@@ -407,7 +407,7 @@ export default {
).then(res => {
this.show = false;
this.$toast.success("发布成功");
console.log(res, "更新视片成功");
console.log(res, "更新作品成功");
this.$router.back();
});
}
......@@ -422,10 +422,10 @@ export default {
filmName: this.name
}).then(res => {
this.$toast.success("发布成功");
console.log(res, "创建视片成功");
console.log(res, "创建作品成功");
this.show = false;
// updateFilmInfo(res.data.filmId, "数据").then(res => {
// console.log(res, "更新视片成功");
// console.log(res, "更新作品成功");
// this.$router.back();
// });
this.$router.back();
......
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