智能咨询拖动

pages/index/index.js

@@ -7,8 +7,12 @@ import {
     xcxsmbd,
     xcxsy
 } from "../../apis/index.js"
-Page({
 
+// 屏幕信息
+let screenInfo = null
+let movableInfo = null
+
+Page({
     /**
      * 页面的初始数据
      */
@@ -32,7 +36,9 @@ Page({
             //     url: 'https://smzc-1253299035.cos.ap-nanjing.myqcloud.com/pdjh/miniProgrameYyQh/indexLb2.png'
             // }
         ],
-        lbIndex: 0
+        lbIndex: 0,
+        znzxX: 0,
+        znzxY: '500rpx'
     },
 
     /**
@@ -40,10 +46,20 @@ Page({
      */
     onLoad(options) {
         let that = this
+        that.init()
         that.getNavigationBar()
         that.getIndexInfos()
     },
 
+    init() {
+        let that = this
+        let device = wx.getSystemInfoSync()
+        screenInfo = device.screenWidth - 50
+        that.setData({
+            znzxX: screenInfo
+        })
+    },
+
     getNavigationBar() {
         let that = this
         const res = wx.getMenuButtonBoundingClientRect()
@@ -528,9 +544,35 @@ Page({
         that.closeVoice()
     },
 
+    movableEnd() {
+        let that = this
+        if (movableInfo) {
+            that.setData({
+                znzxX: movableInfo.x,
+                znzxY: movableInfo.y
+            })
+            movableInfo = null
+        }
+    },
+
+    movable(e) {
+        let that = this
+        let now = e.detail
+        let x = 0
+        if (now.x > screenInfo / 2) {
+            x = screenInfo
+        } else {
+            x = 0
+        }
+        movableInfo = {
+            x: x,
+            y: now.y
+        }
+    },
+
     toZnzx() {
         wx.navigateTo({
-          url: '../other/znzx/znzx',
+            url: '../other/znzx/znzx',
         })
     },
 

pages/index/index.wxml

@@ -19,121 +19,125 @@
             <image src="../../images/index/search-voice.png" mode="widthFix" />
         </view>
     </view>
-    <view class="icon icon-special" bind:tap="toZnzx">
+    <!-- <view class="icon icon-special" bind:tap="toZnzx">
         <image src="https://smzc-1253299035.cos.ap-nanjing.myqcloud.com/pdjh/miniProgrameYyQh/indexSearchA.png" mode="widthFix" />
-        <!-- <view class="jiaobiao">1</view> -->
-    </view>
+    </view> -->
 </view>
 
-<scroll-view class="other-container" scroll-y="{{true}}" style="height: calc(100vh - 150rpx - {{navigation.height}} - {{navigation.paddingTop}})" enhanced="{{true}}" show-scrollbar="{{false}}">
-    <view class="info-card">
-        <image class="bg" src="https://smzc-1253299035.cos.ap-nanjing.myqcloud.com/pdjh/miniProgrameYyQh/indexCardInfoBg.png" mode="widthFix" />
-        <view class="shiming" wx:if="{{userInfo.phone && userInfo.phone.length>1}}">
-            <view class="shiming-icon">
-                <image src="../../images/index/shiming.png" mode="widthFix" />
-            </view>
-            <view class="shiming-name">已实名</view>
-        </view>
-        <view class="info-card-container" catch:tap="{{userInfo.phone.length>0 ?'':'startSmrz'}}">
-            <view class="info-card-list1" hover-class="buttonActive" catch:tap="{{userInfo.phone.length>0 ?'changeType':'startSmrz'}}">
-                <span class="list1-name">Hi，{{userInfo.name || "请点击这里进行实名认证"}}</span>
-                <span wx:if="{{userInfo.name}}" class="list1-type">{{userInfo.nsrmc && userInfo.nsrmc.length>1?'企业身份':'个人身份'}}</span>
-                <span wx:if="{{userInfo.name}}" class="list1-icon">
-                    <image src="../../images/index/chage.png" mode="widthFix" />
-                </span>
+
+<movable-area class="movable" style="height: calc(100vh - 150rpx - {{navigation.height}} - {{navigation.paddingTop}})">
+    <movable-view class="movable-view" x="{{znzxX}}" y="{{znzxY}}" direction="all" damping="{{100}}" bindchange="movable">
+        <image class="znzx-image" catch:tap="toZnzx" src="https://smzc-1253299035.cos.ap-nanjing.myqcloud.com/pdjh/miniProgrameYyQh/znzx.png" mode="widthFix" bind:touchend="movableEnd" />
+    </movable-view>
+    <scroll-view class="other-container" scroll-y enhanced show-scrollbar="{{false}}">
+        <view class="info-card">
+            <image class="bg" src="https://smzc-1253299035.cos.ap-nanjing.myqcloud.com/pdjh/miniProgrameYyQh/indexCardInfoBg.png" mode="widthFix" />
+            <view class="shiming" wx:if="{{userInfo.phone && userInfo.phone.length>1}}">
+                <view class="shiming-icon">
+                    <image src="../../images/index/shiming.png" mode="widthFix" />
+                </view>
+                <view class="shiming-name">已实名</view>
             </view>
-            <!-- <view class="info-card-list1">
+            <view class="info-card-container" catch:tap="{{userInfo.phone.length>0 ?'':'startSmrz'}}">
+                <view class="info-card-list1" hover-class="buttonActive" catch:tap="{{userInfo.phone.length>0 ?'changeType':'startSmrz'}}">
+                    <span class="list1-name">Hi，{{userInfo.name || "请点击这里进行实名认证"}}</span>
+                    <span wx:if="{{userInfo.name}}" class="list1-type">{{userInfo.nsrmc && userInfo.nsrmc.length>1?'企业身份':'个人身份'}}</span>
+                    <span wx:if="{{userInfo.name}}" class="list1-icon">
+                        <image src="../../images/index/chage.png" mode="widthFix" />
+                    </span>
+                </view>
+                <!-- <view class="info-card-list1">
                 <span class="list1-name">Hi，{{userInfo.name || "请点击这里进行实名认证后开始办理预约取号业务"}}</span>
             </view> -->
-            <view class="list2">{{tools.phone(userInfo.phone)}}</view>
-            <view class="list3">{{tools.idcard(userInfo.idcard)}}</view>
-            <view wx:if="{{userInfo.nsrmc && userInfo.nsrmc.length>1}}" class="list4" hover-class="buttonActive" bind:tap="changeEnterprice">{{userInfo.nsrmc}}
-                <image src="../../images/index/down.png" mode="widthFix" />
+                <view class="list2">{{tools.phone(userInfo.phone)}}</view>
+                <view class="list3">{{tools.idcard(userInfo.idcard)}}</view>
+                <view wx:if="{{userInfo.nsrmc && userInfo.nsrmc.length>1}}" class="list4" hover-class="buttonActive" bind:tap="changeEnterprice">{{userInfo.nsrmc}}
+                    <image src="../../images/index/down.png" mode="widthFix" />
+                </view>
             </view>
         </view>
-    </view>
-    <view class="hall">
-        <view class="hall-other-box" wx:if="{{hall.ssswjgDm == '16101980000'}}">
-            <image class="hall-other-box-image" src="https://smzc-1253299035.cos.ap-nanjing.myqcloud.com/pdjh/miniProgrameYyQh/indexHallLogo.png" mode="heightFix" />
-        </view>
-        <view class="hall-info-box">
-            <view class="hall-map">
-                <map enable-scroll="{{false}}" enable-zoom="{{false}}" longitude="{{hall.longitude}}" latitude="{{hall.latitude}}" markers="{{markers}}" scale="15" />
+        <view class="hall">
+            <view class="hall-other-box" wx:if="{{hall.ssswjgDm == '16101980000'}}">
+                <image class="hall-other-box-image" src="https://smzc-1253299035.cos.ap-nanjing.myqcloud.com/pdjh/miniProgrameYyQh/indexHallLogo.png" mode="heightFix" />
             </view>
-            <view class="hall-info">
-                <view class="hall-info-list1">
-                    <view>我的办税厅</view>
-                    <view hover-class="buttonActive" data-type="0" bind:tap="selectHall">
-                        <span>
-                            <image src="../../images/index/chage1.png" mode="widthFix" />
-                        </span>
-                        <span>切换办税厅</span>
+            <view class="hall-info-box">
+                <view class="hall-map">
+                    <map enable-scroll="{{false}}" enable-zoom="{{false}}" longitude="{{hall.longitude}}" latitude="{{hall.latitude}}" markers="{{markers}}" scale="15" />
+                </view>
+                <view class="hall-info">
+                    <view class="hall-info-list1">
+                        <view>我的办税厅</view>
+                        <view hover-class="buttonActive" data-type="0" bind:tap="selectHall">
+                            <span>
+                                <image src="../../images/index/chage1.png" mode="widthFix" />
+                            </span>
+                            <span>切换办税厅</span>
+                        </view>
                     </view>
+                    <view class="hall-info-list2">{{hall.bsfwtmc}}</view>
+                    <view class="hall-info-list3">距您 {{tools.juli(hall.zxjl)}}</view>
                 </view>
-                <view class="hall-info-list2">{{hall.bsfwtmc}}</view>
-                <view class="hall-info-list3">距您 {{tools.juli(hall.zxjl)}}</view>
             </view>
         </view>
-    </view>
 
-    <view class="menu-cards">
-        <view class="menu-card">
-            <image class="bg" src="https://smzc-1253299035.cos.ap-nanjing.myqcloud.com/pdjh/miniProgrameYyQh/indexYyqh2.png" mode="widthFix" />
-            <view class="content yyqh" hover-class="buttonActive" data-type="1" bind:tap="start">
-                <view class="title">预约取号</view>
-                <view class="introduce">提前预约，优先办理</view>
+        <view class="menu-cards">
+            <view class="menu-card">
+                <image class="bg" src="https://smzc-1253299035.cos.ap-nanjing.myqcloud.com/pdjh/miniProgrameYyQh/indexYyqh2.png" mode="widthFix" />
+                <view class="content yyqh" hover-class="buttonActive" data-type="1" bind:tap="start">
+                    <view class="title">预约取号</view>
+                    <view class="introduce">提前预约，优先办理</view>
+                </view>
             </view>
-        </view>
-        <view class="menu-card">
-            <image class="bg" src="https://smzc-1253299035.cos.ap-nanjing.myqcloud.com/pdjh/miniProgrameYyQh/indexWdyy2.png" mode="widthFix" />
-            <view class="content wdyy" hover-class="buttonActive" data-item="{{myYy}}" bind:tap="{{myYy.yybsrq?'toYyDetail':''}}">
-                <view class="wdyyTitle">
-                    <view>
-                        <image src="../../images/index/wdyy-icon.png" mode="widthFix" />
+            <view class="menu-card">
+                <image class="bg" src="https://smzc-1253299035.cos.ap-nanjing.myqcloud.com/pdjh/miniProgrameYyQh/indexWdyy2.png" mode="widthFix" />
+                <view class="content wdyy" hover-class="buttonActive" data-item="{{myYy}}" bind:tap="{{myYy.yybsrq?'toYyDetail':''}}">
+                    <view class="wdyyTitle">
+                        <view>
+                            <image src="../../images/index/wdyy-icon.png" mode="widthFix" />
+                        </view>
+                        <view>我的预约</view>
                     </view>
-                    <view>我的预约</view>
-                </view>
-                <view class="wdyyIntroduce">
-                    <view wx:if="{{!myYy.yybsrq}}" class="wdyyNone">暂无预约</view>
-                    <view wx:else class="wdyyInfo">
-                        <view class="wdyyDate">{{myYy.yybsrq}}</view>
-                        <view class="wdyyHall">{{myYy.bsfwtmc}}</view>
+                    <view class="wdyyIntroduce">
+                        <view wx:if="{{!myYy.yybsrq}}" class="wdyyNone">暂无预约</view>
+                        <view wx:else class="wdyyInfo">
+                            <view class="wdyyDate">{{myYy.yybsrq}}</view>
+                            <view class="wdyyHall">{{myYy.bsfwtmc}}</view>
+                        </view>
                     </view>
                 </view>
             </view>
-        </view>
-        <view class="menu-card">
-            <image class="bg" src="https://smzc-1253299035.cos.ap-nanjing.myqcloud.com/pdjh/miniProgrameYyQh/indexSsqh2.png" mode="widthFix" />
-            <view class="content ssqh" hover-class="buttonActive" data-type="2" bind:tap="start">
-                <view class="title">手机取号</view>
-                <view class="introduce"><text>手机端叫号取号\n同步大厅</text></view>
+            <view class="menu-card">
+                <image class="bg" src="https://smzc-1253299035.cos.ap-nanjing.myqcloud.com/pdjh/miniProgrameYyQh/indexSsqh2.png" mode="widthFix" />
+                <view class="content ssqh" hover-class="buttonActive" data-type="2" bind:tap="start">
+                    <view class="title">手机取号</view>
+                    <view class="introduce"><text>手机端叫号取号\n同步大厅</text></view>
+                </view>
             </view>
-        </view>
-        <view class="menu-card">
-            <image class="bg" src="https://smzc-1253299035.cos.ap-nanjing.myqcloud.com/pdjh/miniProgrameYyQh/indexJdck2.png" mode="widthFix" />
-            <view class="content jdck" hover-class="buttonActive" bind:tap="toLookSsqh">
-                <view class="title">进度查看</view>
-                <view class="introduce">预约记录/取号记录</view>
+            <view class="menu-card">
+                <image class="bg" src="https://smzc-1253299035.cos.ap-nanjing.myqcloud.com/pdjh/miniProgrameYyQh/indexJdck2.png" mode="widthFix" />
+                <view class="content jdck" hover-class="buttonActive" bind:tap="toLookSsqh">
+                    <view class="title">进度查看</view>
+                    <view class="introduce">预约记录/取号记录</view>
+                </view>
             </view>
         </view>
-    </view>
 
-    <view class="carousel-box" style="{{lbList.length>1?'height: 125rpx;':'height: 165rpx;'}}">
-        <swiper class="swiper" autoplay current="{{lbIndex}}" circular previous-margin="{{lbList.length>1?'150rpx':'0'}}" bindanimationfinish="lbChage" duration="350">
-            <block class="swiper" wx:for="{{lbList}}" wx:key="*this">
-                <swiper-item class="swiper-item" data-item="{{item}}" bind:tap="swiperTap">
-                    <view class="swiper-image" style="{{lbList.length>1?'margin-left: 25rpx;width: calc(100% - 25rpx);':'width: 100%;'}}">
-                        <image class="lbImg" src="{{item.url}}" mode="widthFix" />
-                    </view>
-                </swiper-item>
-            </block>
-        </swiper>
-    </view>
-    <view class="carousel-docs">
-        <view class="carousel-doc {{index == lbIndex?'carousel-doc-active':''}}" wx:for="{{lbList}}" wx:key="index"></view>
-    </view>
+        <view class="carousel-box" style="{{lbList.length>1?'height: 125rpx;':'height: 165rpx;'}}">
+            <swiper class="swiper" autoplay current="{{lbIndex}}" circular previous-margin="{{lbList.length>1?'150rpx':'0'}}" bindanimationfinish="lbChage" duration="350">
+                <block class="swiper" wx:for="{{lbList}}" wx:key="*this">
+                    <swiper-item class="swiper-item" data-item="{{item}}" bind:tap="swiperTap">
+                        <view class="swiper-image" style="{{lbList.length>1?'margin-left: 25rpx;width: calc(100% - 25rpx);':'width: 100%;'}}">
+                            <image class="lbImg" src="{{item.url}}" mode="widthFix" />
+                        </view>
+                    </swiper-item>
+                </block>
+            </swiper>
+        </view>
+        <view class="carousel-docs">
+            <view class="carousel-doc {{index == lbIndex?'carousel-doc-active':''}}" wx:for="{{lbList}}" wx:key="index"></view>
+        </view>
 
-    <!-- <view class="ywList" wx:for="{{2}}" wx:key="index">
+        <!-- <view class="ywList" wx:for="{{2}}" wx:key="index">
         <view class="list-top">
             <view class="lt-border"></view>
             <view class="lt-name">综合服务（一）</view>
@@ -155,7 +159,8 @@
     </view> -->
 
 
-</scroll-view>
+    </scroll-view>
+</movable-area>
 
 
 

pages/index/index.wxss

@@ -122,9 +122,26 @@ page {
     font-size: 24rpx;
 }
 
+.movable {
+    width: 100%;
+}
+
+.movable-view {
+    position: absolute;
+    z-index: 99;
+    width: 100rpx;
+    height: fit-content;
+}
+
+.znzx-image {
+    width: 100%;
+    height: auto;
+}
+
 .other-container {
     padding-bottom: 20rpx;
     width: 100%;
+    height: 100%;
     box-sizing: border-box;
 }