feat(room): 删除房间

component/partyItem/partyItem.wxss

@@ -3,8 +3,6 @@
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
-  padding: 20rpx 0;
-  border-bottom: 2rpx solid #EDEDED;
   background: #fff;
 }
 
@@ -12,8 +10,8 @@
 .tj_listItem .tj_listItemCover {
   /* width: 210rpx;
   height: 210rpx; */
-  width: 160rpx;
-  height: 160rpx;
+  width: 130rpx;
+  height: 130rpx;
   border-radius: 8px;
   overflow: hidden;
 }
@@ -21,8 +19,8 @@
 .tj_listItem .tj_listItemCover .coverImage {
   /* width: 210rpx;
   height: 210rpx; */
-  width: 160rpx;
-  height: 160rpx;
+  width: 130rpx;
+  height: 130rpx;
 }
 
 .tj_listItemMsg {
@@ -42,7 +40,7 @@
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
-  height: 100rpx
+  height: 75rpx
 }
 
 .tj_listItemMsg .tj_listItemTip {

component/slider-left/index.js

@@ -0,0 +1,104 @@
+/*
+ * @description: 小程序左划删除组件
+ * @Author: bigmeow (https://github.com/bigmeow/minapp-slider-left)
+ */
+
+'use strict'
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+exports.default = Component({
+
+  properties: {
+    // 组件的可视宽度设置(rpx)
+    width: {
+      type: Number,
+      value: 750,
+    },
+    // 阈值，往左移动超过则显示菜单项，否则隐藏（一般为菜单宽的40%）
+    moveThreshold: {
+      type: Number,
+      value: 30
+    },
+    // 可以往左拖动的最大距离,同时它也是组件的初始x坐标，此时菜单不可见
+    openWidth: {
+      type: Number,
+      value: 90
+    },
+    // 菜单是否打开了，true表示打开，false表示关闭
+    open: {
+      type: Boolean,
+      value: false,
+      observer: function (open) {
+        this.setData({
+          x: open ? 0 : this.data.openWidth
+        })
+
+        this.triggerEvent('change', {
+          open
+        })
+      }
+    }
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    x: 75, // 单位px
+
+    currentX: 75, // 当前记录组件被拖动时的x坐标
+    moveInstance: 0 // 记录往左移动的距离
+  },
+  attached: function () {
+    this.setData({
+      x: this.data.open ? 0 : this.data.openWidth
+    })
+  },
+  methods: {
+    handleChange: function (e) {
+      const x = e.detail.x
+      this.data.moveInstance = this.data.openWidth - x
+      this.data.currentX = x
+      // console.log(this.data.moveInstance)
+    },
+    handleTouchend: function () {
+      // 如果松开手指的时候，已经被拖拽到最左边或者最右边，则不处理
+      if (this.data.currentX === 0) {
+        this.setData({ open: true })
+        return
+      }
+      if (this.data.currentX === this.data.openWidth) {
+        this.setData({ open: false })
+        return
+      }
+      // 如果当前菜单是打开的，只要往右移动的距离大于0就马上关闭菜单
+      if (this.data.open && this.data.currentX > 0) {
+        this.setData({ open: false })
+        return
+      }
+
+      // 如果当前菜单是关着的，只要往左移动超过阀值就马上打开菜单
+      if (this.data.moveInstance < this.data.moveThreshold) {
+        this.setData({
+          open: false,
+          x: this.data.openWidth
+        })
+      } else {
+        this.setData({ open: true })
+      }
+    },
+    // 点击删除按钮触发的事件
+    handleDelete: function () {
+      this.setData({ open: false })
+      this.triggerEvent('delete')
+    },
+    // 开始左滑时触发（轻触摸的时候也会触发），主要用于显示当前删除按钮前先 隐藏掉其它项的删除按钮
+    handleTouchestart: function () {
+      if (!this.data.open) {
+        this.triggerEvent('sliderLeftStart')
+      }
+    }
+  }
+})

component/slider-left/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

component/slider-left/index.wxml

@@ -0,0 +1,21 @@
+<movable-area
+  class="slider-left-item"
+  style="width: calc({{ openWidth }}px + {{ width }}rpx);margin-left: -{{openWidth}}px;"
+>
+  <movable-view class="slider-left-content"
+    damping="100"
+    style="width: {{ width }}rpx"
+    x="{{ x }}"
+    direction="horizontal"
+    bind:touchstart="handleTouchestart"
+    bind:touchend="handleTouchend"
+    bind:change="handleChange">
+    <slot></slot>
+  </movable-view>
+  <view class='slider-left-handle'>
+    <view
+      bind:tap="handleDelete"
+      style="width:{{ openWidth }}px"
+      class='handle-delete'>关闭房间</view>
+  </view>
+</movable-area>

component/slider-left/index.wxss

@@ -0,0 +1,50 @@
+
+.slider-left-item {
+  overflow: hidden;
+  background-color: #fff;
+  /* movable-area重置默认高度 */
+  height: auto;
+}
+
+.slider-left-content {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  background: inherit;
+  color: inherit;
+  /* movable-view重置默认绝对定位 */
+  position: relative;
+  z-index: 1;
+}
+
+
+.slider-left-handle {
+  height: 100%;
+  display: flex;
+  justify-content: flex-end;
+  position:absolute;
+  top:0;
+  left:0;
+  right:0;
+  z-index: 0;
+}
+
+.handle-delete {
+  background-color: red;
+  width: 150rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #FFFFFF;
+  line-height: 20px;
+}
+
+
+
+
+
+

pages/roomManger/roomManger.js

@@ -35,6 +35,9 @@ Page({
       }
     })
   },
+  handleDelete(e) {
+    console.log(e,'deleteItem')
+  },
   setActive(ev) {
     const that = this
     const {

pages/roomManger/roomManger.json

@@ -2,6 +2,7 @@
   "navigationBarTitleText": "我的房间",
   "enablePullDownRefresh": false,
   "usingComponents": {
-    "partyItem": "../../component/partyItem/partyItem"
+    "partyItem": "../../component/partyItem/partyItem",
+    "swider-left": "../../component/slider-left/index"
   }
 }

pages/roomManger/roomManger.wxml

@@ -27,8 +27,29 @@
   <view class="result" wx:if="{{roomList.length > 0}}">
 
     <view>
-      <view wx:for="{{roomList}}" wx:key class="house-list">
-        <partyItem room="{{item}}" index="{{index}}" bindgotoWV="gotoWV"></partyItem>
+      <view  class="house-list">
+        <!--<view class="list-item {{item.businessId == activeId?'list-item-touch-active':''}}" wx:for="{{roomList}}" wx:for-item="item" wx:for-index="index" wx:key="item.businessId" bindtouchstart="touchstart" bindtouchmove="touchmove" data-id="{{item.businessId}}">
+              <partyItem class="parent" room="{{item}}" index="{{index}}" bindgotoWV="gotoWV"></partyItem>
+              <view catchtap="deleteItem" class="item-delete">删除</view>
+        </view>
+        <view style="{{'width:'+parentW+'px;overflow-x:hidden;height:'+parentH+'px;overflow-y:hidden;'}}">
+          <movable-area class="moveArea" wx:for="{{roomList}}" wx:key bindtap="toPosiDetl" data-id="{{item.work.id}}">
+            <movable-view class="moveView" x="{{item.x}}" direction="horizontal" bindtouchend="touchEnd" bindtouchstart="touchStart" animation="{{true}}" data-id="{{item.id}}">
+              <partyItem class="parent" room="{{item}}" index="{{index}}" bindgotoWV="gotoWV"></partyItem>
+              <view class="delete" catchtap="delete" data-id="{{item.work.id}}">
+                <text>删除</text>
+              </view>
+            </movable-view>
+          </movable-area>
+        </view> <view class='slider-handle'>{{todoItem.text}}</view>-->
+        <swider-left class="swider-item moveView " wx:for="{{roomList}}" wx:for-item="item" wx:key="item.businessId"
+        open="{{item.isOpen}}"
+        data-id="{{item.businessId}}"
+        bind:sliderLeftStart="handleSliderLeftStart"
+        bind:change="handleChange"
+        bind:delete="handleDelete">
+        <partyItem class="parent" room="{{item}}" index="{{index}}" bindgotoWV="gotoWV"></partyItem>
+      </swider-left>
       </view>
     </view>
   </view>

pages/roomManger/roomManger.wxss

@@ -106,6 +106,7 @@
   line-height: 100rpx;
   font-size: 80rpx;
   color: #fff;
+  z-index:10;
 }
 
 .storeList {
@@ -143,4 +144,87 @@
   color: #666C7D;
   font-size: 30rpx;
   margin-top: 40rpx;
-}
+}
+
+.parent{
+  background:#fff;
+  padding-bottom:0;
+  width:100%;
+  box-sizing: border-box;
+  display: inline-block;
+  padding: 20rpx 0;
+  border-bottom: 2rpx solid #EDEDED;
+}
+
+.parent:first-child{
+  border-top: 2rpx solid #f0f0f0;
+}
+.moveArea{
+  height: 200rpx;
+  width: 100%;
+  margin-bottom:10rpx;
+}
+.moveView{
+  height: 200rpx;
+  width: 100%;
+}
+.list-item{
+  padding:20rpx 0;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 2rpx solid #f0f0f0;
+}
+
+.item-content{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 20rpx 0 20rpx;
+  -webkit-transition: all 0.4s;
+  transition: all 0.4s;
+  -webkit-transform: translateX(180rpx);
+  transform: translateX(180rpx); 
+  margin-left: -200rpx;
+}
+.content-info{
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  font-size: 32rpx;
+  color: #999
+}
+.content-name{
+  width: 100%;
+}
+.list-item-touch-active .item-content{
+  margin-left: -100rpx;
+}
+.list-item-touch-active .item-content, .list-item-touch-active .item-delete {
+  -webkit-transform: translateX(0) !important;
+  transform: translateX(0) !important;
+}
+.item-delete{
+  font-size: 24rpx;
+  color: #666;
+  width: 100rpx;
+  padding:5rpx 10rpx;
+  border:1rpx solid #ff5d5d;
+  border-radius:15rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background:#f9bfbf;
+  color: #ff5d5d;
+  font-size: 32rpx;
+  -webkit-transform: translateX(180rpx);
+  transform: translateX(180rpx);
+  -webkit-transition: all 0.4s;
+  transition: all 0.4s;
+}
+.swider-item{
+
+}

socket.js

@@ -876,7 +876,8 @@ export default {
     })
   },
   
-  openMic() {
+  openMic(data) {
+    debugger
     getApp().globalData.voiceProps.noMute = true
     this.socketSendMessage('changeVoiceStatus', {
       status: 2,