微信小程序悬浮客服

1.html:

    

        

            

                

                

                    

                        HI\n

                        我是您的顾问，有任何问题\n随时都可以联系我。

                    

                

                

                    

                        HI，{{user.nickname}}\n

                        我是您的顾问，有任何问题\n随时都可以联系我。

                    

                

                

            

        

    

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,

      });

    }

  }

})