|
|
@@ -7,7 +7,7 @@
|
|
|
<el-image class="coin coin4" :src="require('../../assets/grid/coin4.png')" fit="cover"></el-image>
|
|
|
</div>
|
|
|
<div class="grid_member">
|
|
|
- <div class="member_imgbox">
|
|
|
+ <!-- <div class="member_imgbox">
|
|
|
<el-image
|
|
|
v-for="item in 4"
|
|
|
:key="item"
|
|
|
@@ -15,9 +15,9 @@
|
|
|
:src="require('../../assets/grid/portal.png')"
|
|
|
fit="cover"
|
|
|
></el-image>
|
|
|
- </div>
|
|
|
+ </div>-->
|
|
|
<el-button type="text" @click="dialogVisible2 = true">邀请成员</el-button>
|
|
|
- <el-button type="text">成员</el-button>
|
|
|
+ <!-- <el-button type="text">成员</el-button> -->
|
|
|
<el-button type="text" v-if="RoomInfo.userid == userid" @click="dismiss">解散房间</el-button>
|
|
|
</div>
|
|
|
<draggable
|
|
|
@@ -27,66 +27,72 @@
|
|
|
@change="handleDraggableFormItemChange"
|
|
|
@end="dragEnd"
|
|
|
:move="checkMove"
|
|
|
- >
|
|
|
- <div
|
|
|
- v-for="(item,index) in data"
|
|
|
- :key="index"
|
|
|
- class="g_box"
|
|
|
- @mouseover="pIndex = index"
|
|
|
- @mouseleave="pIndex = ''"
|
|
|
- @dragstart="handleDragStart($event, index)"
|
|
|
- @dragover.prevent="handleDragOver($event, index)"
|
|
|
- @dragenter="handleDragEnter($event, index)"
|
|
|
- @dragend="handleDragEnd($event, index)"
|
|
|
>
|
|
|
<div
|
|
|
- :class="{'left-popover':index<3,'right-popover':index==3,'top-popover':index>3,'visibleO':pIndex === index && item && (item.video || item.photo)}"
|
|
|
+ v-for="(item,index) in data"
|
|
|
+ :key="index"
|
|
|
+ class="g_box"
|
|
|
+ @mouseover="pIndex = index"
|
|
|
+ @mouseleave="pIndex = ''"
|
|
|
+ @dragstart="handleDragStart($event, index)"
|
|
|
+ @dragover.prevent="handleDragOver($event, index)"
|
|
|
+ @dragenter="handleDragEnter($event, index)"
|
|
|
+ @dragend="handleDragEnd($event, index)"
|
|
|
>
|
|
|
- <div class="pChild" @click="check(index)">
|
|
|
- <el-image :src="require('../../assets/grid/upload.png')" fit="cover"></el-image>
|
|
|
- <span>修改</span>
|
|
|
- </div>
|
|
|
- <div class="pChild" @click="deleteGrid(index)">
|
|
|
- <el-image :src="require('../../assets/grid/deleteT.png')" fit="cover"></el-image>
|
|
|
- <span>删除</span>
|
|
|
- </div>
|
|
|
- <div class="pChild" @click="check(index,2)">
|
|
|
- <el-image :src="require('../../assets/grid/edit.png')" fit="cover"></el-image>
|
|
|
- <span>添加备注</span>
|
|
|
+ <div
|
|
|
+ :class="{'left-popover':index<3,'right-popover':index==3,'top-popover':index>3,'visibleO':pIndex === index && item && (item.video || item.photo)}"
|
|
|
+ >
|
|
|
+ <div class="pChild" @click="check(index)">
|
|
|
+ <el-image :src="require('../../assets/grid/upload.png')" fit="cover"></el-image>
|
|
|
+ <span>修改</span>
|
|
|
+ </div>
|
|
|
+ <div class="pChild" @click="deleteGrid(index)">
|
|
|
+ <el-image :src="require('../../assets/grid/deleteT.png')" fit="cover"></el-image>
|
|
|
+ <span>删除</span>
|
|
|
+ </div>
|
|
|
+ <div class="pChild" @click="check(index,2)">
|
|
|
+ <el-image :src="require('../../assets/grid/edit.png')" fit="cover"></el-image>
|
|
|
+ <span>添加备注</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- v-if="item && item.remarks"
|
|
|
- :class="{'remark-right-popover':index>11 && index!=15,'remark-left-popover':index==15,'remark-bottom-popover':index<12,'visibleO':pIndex === index && item && item.remarks}"
|
|
|
- >
|
|
|
- <div class="Rbox" v-for="(x,y) in item.remarks" :key="y">
|
|
|
- <div v-if="x.remarks!=''" style="display:flex">
|
|
|
- <el-image class="Rportal" :src="require('../../assets/grid/portal.png')" fit="cover"></el-image>
|
|
|
- <div class="RContent">
|
|
|
- <div>{{x.username}}</div>
|
|
|
- <div>{{x.remarks}}</div>
|
|
|
+ <div
|
|
|
+ v-if="item && item.remarks"
|
|
|
+ :class="{'remark-right-popover':index>11 && index!=15,'remark-left-popover':index==15,'remark-bottom-popover':index<12,'visibleO':pIndex === index && item && item.remarks}"
|
|
|
+ >
|
|
|
+ <div class="Rbox" v-for="(x,y) in item.remarks" :key="y">
|
|
|
+ <div v-if="x.remarks!=''" style="display:flex">
|
|
|
+ <el-image class="Rportal" :src="require('../../assets/grid/portal.png')" fit="cover"></el-image>
|
|
|
+ <div class="RContent">
|
|
|
+ <div>{{x.username}}</div>
|
|
|
+ <div>{{x.remarks}}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div v-else-if="x.remarks==''&& y==0">{{x.username}}暂无备注</div>
|
|
|
</div>
|
|
|
- <div v-else-if="x.remarks==''&& y==0">{{x.username}}暂无备注</div>
|
|
|
</div>
|
|
|
+ <el-image
|
|
|
+ v-if="item && item.photo"
|
|
|
+ v-viewer
|
|
|
+ class="photo_img"
|
|
|
+ :src="item.photo"
|
|
|
+ fit="cover"
|
|
|
+ ></el-image>
|
|
|
+ <video-player
|
|
|
+ v-else-if="item && item.video"
|
|
|
+ class="video-player vjs-custom-skin"
|
|
|
+ ref="videoPlayer"
|
|
|
+ :playsinline="true"
|
|
|
+ :options="item.video"
|
|
|
+ style="width: 85%;"
|
|
|
+ ></video-player>
|
|
|
+ <el-image
|
|
|
+ v-else
|
|
|
+ class="add_img"
|
|
|
+ :src="require('../../assets/grid/add.png')"
|
|
|
+ fit="cover"
|
|
|
+ @click="check(index,3)"
|
|
|
+ ></el-image>
|
|
|
</div>
|
|
|
- <el-image v-if="item && item.photo" v-viewer class="photo_img" :src="item.photo" fit="cover"></el-image>
|
|
|
- <video-player
|
|
|
- v-else-if="item && item.video"
|
|
|
- class="video-player vjs-custom-skin"
|
|
|
- ref="videoPlayer"
|
|
|
- :playsinline="true"
|
|
|
- :options="item.video"
|
|
|
- style="width: 85%;"
|
|
|
- ></video-player>
|
|
|
- <el-image
|
|
|
- v-else
|
|
|
- class="add_img"
|
|
|
- :src="require('../../assets/grid/add.png')"
|
|
|
- fit="cover"
|
|
|
- @click="check(index,3)"
|
|
|
- ></el-image>
|
|
|
- </div>
|
|
|
</draggable>
|
|
|
<el-dialog
|
|
|
title="上传文件"
|
|
|
@@ -302,34 +308,34 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
playerO: {},
|
|
|
- dragging:null,
|
|
|
- draggingE:null,
|
|
|
+ dragging: null,
|
|
|
+ draggingE: null,
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
handleDragStart(e, items) {
|
|
|
this.dragging = items; //开始拖动时，暂时保存当前拖动的数据。
|
|
|
- if(!this.data[items]){
|
|
|
+ if (!this.data[items]) {
|
|
|
return;
|
|
|
}
|
|
|
},
|
|
|
handleDragEnd(e, items) {
|
|
|
- if(!this.data[this.dragging]){
|
|
|
+ if (!this.data[this.dragging]) {
|
|
|
return;
|
|
|
}
|
|
|
- e.dataTransfer.effectAllowed = "move"; //为需要移动的元素设置dragstart事件
|
|
|
+ e.dataTransfer.effectAllowed = "move"; //为需要移动的元素设置dragstart事件
|
|
|
if (this.draggingE == this.dragging) return;
|
|
|
var newItems = [...JSON.parse(JSON.stringify(this.data))]; //拷贝一份数据进行交换操作。
|
|
|
-
|
|
|
+
|
|
|
var src = newItems[this.dragging]; //获取数组下标
|
|
|
var dst = newItems[this.draggingE];
|
|
|
- newItems[this.dragging] = dst
|
|
|
- newItems[this.draggingE] = src
|
|
|
+ newItems[this.dragging] = dst;
|
|
|
+ newItems[this.draggingE] = src;
|
|
|
// newItems2.splice(dst, 0, ...newItems.splice(src, 1)); //交换位置
|
|
|
this.data = newItems;
|
|
|
this.updateRoomData();
|
|
|
this.dragging = null; //拖动结束后，清除数据
|
|
|
- this.draggingE=null;
|
|
|
+ this.draggingE = null;
|
|
|
},
|
|
|
handleDragOver(e) {
|
|
|
e.dataTransfer.dropEffect = "move"; //在dragenter中针对放置目标来设置!
|
|
|
@@ -792,9 +798,9 @@ export default {
|
|
|
for (var i = 0; i < 16; i++) {
|
|
|
this.data.push("");
|
|
|
}
|
|
|
- this.data.push("")
|
|
|
+ this.data.push("");
|
|
|
this.getUser();
|
|
|
- this.selectRoom(this.userid);
|
|
|
+ // this.selectRoom(this.userid);
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -934,10 +940,10 @@ export default {
|
|
|
background: #fff;
|
|
|
right: 70px;
|
|
|
top: 18px;
|
|
|
- min-width: 320px;
|
|
|
+ /* min-width: 320px; */
|
|
|
height: 50px;
|
|
|
border-radius: 5px;
|
|
|
- padding-right: 10px;
|
|
|
+ padding: 0 10px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
z-index: 1;
|
