• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序悬浮客服

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1.html:

<movable-area class="movableArea">
    <movable-view class="movableView" direction="all" inertia x="{{x}}" y="{{y}}" bindchange="touchChange" bindtouchend="touchEnd">
        <view class="dock-service-wrap {{pin?\'active\':\'\'}} {{isTouch?\'round\':\'\'}}">
            <view class="mi-flex mi-align-items-center">
                <mi-icon src="/images/kefu.png" width="90rpx" bindtap="handlePin" />
                <navigator wx:if="{{!user.id}}" url="/pages/login/login">
                    <view class="dock-service-tips">
                        <text>HI\n</text>
                        <text>我是您的顾问,有任何问题\n随时都可以联系我。</text>
                    </view>
                </navigator>
                <button wx:else class="btn-contact" session-from="sobot|{{user.nickname}}|{{user.avatar_url}}||transfer_action={{transferAction}}" open-type="contact">
                    <view class="dock-service-tips">
                        <text>HI,{{user.nickname}}\n</text>
                        <text>我是您的顾问,有任何问题\n随时都可以联系我。</text>
                    </view>
                </button>
                <mi-icon class="dock-service-dock" src="/images/[email protected]" width="28rpx" bindtap="handleDock" />
            </view>
        </view>
    </movable-view>
</movable-area>
2.css:
.movableArea {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 100;
}

.movableView {
  pointer-events: auto;
  width: 120rpx;
  height: 120rpx;
}

.dock-service-wrap {
  padding: 15rpx;
  width: 132rpx;
  max-height: 148rpx;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 150rpx 0 0 150rpx;
  overflow: hidden;
  transition: border-radius 100ms ease-in-out;
}

.dock-service-wrap.active {
  width: 480rpx;
}

.dock-service-wrap.round {
  width: 120rpx;
  border-radius: 150rpx
}

.dock-service-wrap.active .dock-service-tips {
  display: block;
}

.dock-service-wrap.active .dock-service-dock {
  display: block;
}

.dock-service-tips {
  display: none;
  margin-left: 16rpx;
  color: #fff;
  font-size: 24rpx;
  line-height: 30rpx;
  text-align: left;
}

.dock-service-dock {
  margin-left: 16rpx;
  display: none;
}
 
3.js:
import {
  getUser
} from "./../../core/user.js";
Component({
  options: {
    styleIsolation: "apply-shared"
  },
  /**
   * 组件的属性列表
   */
  properties: {
    y: {
      type: Number,
      value: 0,
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    user: {},
    transferAction: "[{\'actionType\':\'to_group\',\'deciId\':\'b3d80dcbba164dffa8edf2a95feb9bf2\',\'optionId\':\'4\'}]",
    initX: wx.getSystemInfoSync().safeArea.width,
    x: wx.getSystemInfoSync().safeArea.width,
    pin: false,
    isTouch: false,
  },

  lifetimes: {
    attached: function () {
      this.setData({
        user: getUser(),
      });
    },
    ready: function () {
      this.createSelectorQuery().select(".dock-service-wrap").fields({
        size: true
      }, res => {
        this.setData({
          initX: wx.getSystemInfoSync().safeArea.width - res.width,
          x: wx.getSystemInfoSync().safeArea.width - res.width
        });
      }).exec();
    }
  },

  pageLifetimes: {
    show: function () {
      this.setData({
        user: getUser(),
      });
      // console.log(this.data.user);
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    touchChange(event) {
      let {
        x,
        y,
        source
      } = event.detail;
      if (source === "touch") {
        this.setData({
          isTouch: true,
          pin: false
        });
      } else if (x === this.data.initX) {
        this.setData({
          pin: false,
          isTouch: false
        });
      }
    },
    touchEnd(event) {
      // 只有拖动的时候才会去改变y坐标
      // 其它因素触发该事件不会改变y坐标
      if (this.data.isTouch === false) {
        return;
      }
      let y = event.changedTouches[0].clientY;
      this.setData({
        x: this.data.initX,
        y: y,
      });
    },
    handlePin() {
      // 如果拖动还未结束,点击无效
      if (this.data.isTouch === true) {
        return;
      }
      if (this.data.pin === false) {
        this.setData({
          pin: true,
        });
        this.createSelectorQuery().select(".dock-service-wrap").fields({
          size: true
        }, res => {
          this.setData({
            x: wx.getSystemInfoSync().safeArea.width - res.width
          });
        }).exec();
      } else {
        this.handleDock();
      }
    },
    handleDock() {
      this.setData({
        x: this.data.initX,
      });
    }
  }
})

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap