From b43f9a8acb903365020f9821f40f99b83461f50c Mon Sep 17 00:00:00 2001
From: youmengting <2080639302@qq.com>
Date: Mon, 3 Jul 2023 16:17:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=95=86=E6=88=B7=E5=9C=B0?=
 =?UTF-8?q?=E5=9B=BE=E5=B1=95=E7=A4=BA=E7=9A=84=E4=B8=8A=E6=8B=89=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=EF=BC=8C=E4=BB=A5=E5=8F=8A=E5=9B=BE=E6=A0=87=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/touchbox/readme.md      |  41 +++
 components/touchbox/touchbox.vue   | 244 +++++++++++++++++
 pages/tabBar/category/category.vue | 408 ++++++++++++-----------------
 3 files changed, 457 insertions(+), 236 deletions(-)
 create mode 100644 components/touchbox/readme.md
 create mode 100644 components/touchbox/touchbox.vue

diff --git a/components/touchbox/readme.md b/components/touchbox/readme.md
new file mode 100644
index 0000000..161135b
--- /dev/null
+++ b/components/touchbox/readme.md
@@ -0,0 +1,41 @@
+# you-touchbox
+
+对nvue做了些兼容处理，但还不成熟，nvue下transition失效的问题无法解决，请大佬指点（现阶段不建议在nvue中使用本插件，问题多多，nvue中遇到问题可以反馈，我尽力实现需求）
+
+***所有像素值参数都不要传单位**
+
+***一切计算以`可使用窗口高度`为基准**，即`uni.getSystemInfoSync().windowHeight`
+
+***上拉框盒子高度默认为`可使用窗口高度`**，可以通过`customStyle`属性设置
+
+**属性**
+
+| 参数           | 说明                     | 类型                               | 默认值                                                       |
+| -------------- | :----------------------- | ---------------------------------- | ------------------------------------------------------------ |
+| customStyle    | 自定义样式               | String\|Object                     | -<br />border-radius若要兼容nvue请使用<br />border-top-left-radius，border-top-right-radius分开写 |
+| initTop        | 初始top值                | Number\|String\|<br />'min'\|'max' | 默认值为'min'，<br />initTop为首次加载时，上拉框显示的高度，<br />所以一般设置为与maxTop或minTop一致，<br />参数可传百分比，像素值，字符串'min''max'<br />max为与maxTop一致，<br />min为与minTop一致<br />0~1为百分比，大于1为像素值，<br />百分比以可使用窗口高度计算，<br />像素值为可使用窗口的顶部位置往下偏移 |
+| maxTop         | 最高top值                | Numbe\|String                      | 默认为可使用窗口的顶部位置，<br />参数可传百分比和像素值，<br />0~1为百分比，大于1为像素值，<br />百分比以可使用窗口高度计算，<br />像素值为可使用窗口的顶部位置往下偏移 |
+| minTop         | 最低top值                | Number\|String                     | 默认为可用区域50%，<br />参数可传百分比和像素值，<br />0~1为百分比，大于1为像素值，<br />百分比以可使用窗口高度计算，<br />像素值为可使用窗口的底部位置往上的偏移 |
+| auto           | 是否开启自动复位         | Boolean                            | true，开启时松手会自动复位到最高最低状态                     |
+| limit          | 是否开启滑动范围限制     | Boolean                            | true，开启时滑动范围不可超过maxTop和minTop                   |
+| customSafeArea | 自定义navbar、tabbar高度 | Object                             | 如果使用了自定义navbar和tabbar，可以手动设置安全区域         |
+| h5Top          | customSafeArea的属性     | Number                             | -<br />H5的自定义navbar高度                                  |
+| mpTop          | customSafeArea的属性     | Number\|'menuBtn'                  | -<br />小程序的自定义navbar高度<br />特殊值字符串menuBtn的效果为微信小程序原生navbar的高度<br /> |
+| bottom         | customSafeArea的属性     | Number                             | -<br />自定义tabbar高度<br />因为H5和小程序的navbar高度不一致才需要分开配置，而tabbar一般是一致的，所以不区分 |
+| zIndex         | 上拉框z-index            | Number\|String                     | 100                                                          |
+| disable        | 禁用滑动                 | Boolean                            | false                                                        |
+
+**事件**
+
+| 事件名         | 说明                                                         | 参数                             |
+| -------------- | ------------------------------------------------------------ | -------------------------------- |
+| get-end-detail | 获取滑动结束时top信息对象<br />maxTop：最大高度top<br />minTop：最小高度top<br />curTop：当前高度top | Function({maxTop,minTop,curTop}) |
+
+**方法**
+
+此方法要通过ref手动改调用
+
+| 方法名    | 说明                                                         | 参数              |
+| --------- | ------------------------------------------------------------ | ----------------- |
+| setBottom | 手动设置上拉框高度，参数值传百分比和像素值（不带单位），<br />百分比以可使用窗口高度计算，<br />像素值为可使用窗口的底部位置往上的偏移 | Function（value） |
+
diff --git a/components/touchbox/touchbox.vue b/components/touchbox/touchbox.vue
new file mode 100644
index 0000000..11cb69a
--- /dev/null
+++ b/components/touchbox/touchbox.vue
@@ -0,0 +1,244 @@
+<template>
+  <view class="you-touchbox" :class="{touchend:isTouchEnd}" @touchstart="onTouchStart"
+    @touchmove.stop.prevent="onTouchmove" @touchend="onTouchend"
+    :style="{top: top + distance + 'px',zIndex,height:maxTop*windowHeight+'px'}">
+    <view class="you-touchbox-content" :style="customStyle" @click.stop.prevent>
+      <view class="touch-line-box">
+        <view class="touch-line"></view>
+      </view>
+	  	<slot></slot>
+      
+    </view>
+  </view>
+</template>
+
+<script>
+  
+  export default {
+    name: "touchbox",
+    props: {
+      // 禁用滑动
+      disable: {
+        type: Boolean,
+        default: false
+      },
+      zIndex: {
+        type: [Number, String],
+        default: 100
+      },
+      // 自定义样式
+      customStyle: [String, Object],
+      // 自定义安全区域
+      customSafeArea: {
+        type: Object,
+        default () {
+          return {
+            h5Top: null,
+            wxTop: null,
+            bottom: null
+          }
+        }
+      },
+      // 最高top
+      maxTop: {
+        type: [Number, String],
+        default: 1
+      },
+      // 最低top
+      minTop: {
+        type: [Number, String],
+        default: 0.5
+      },
+      // 初始top
+      initTop: {
+        type: [Number, String],
+        default: 'min'
+      },
+      // 自动复位
+      auto: {
+        type: Boolean,
+        default: true
+      },
+      // 最高最低限制
+      limit: {
+        type: Boolean,
+        default: true
+      }
+    },
+    data() {
+      return {
+        windowHeight: null, // 可使用区域高度
+        windowTop: null,
+        touchStartY: null, // 开始滑动时的Y轴坐标
+        top: null, // 上拉框top
+        max: null, // maxTop
+        min: null, // minTop
+        distance: 0, // 滑动距离
+        isTouchEnd: false, // 是否滑动结束Flag
+        boundary: null, // 规定盒子复位为最大或最小状态的分界线，默认为最大最小状态的中间
+        startTime: null, // 开始滑动时间
+      };
+    },
+    mounted() {
+      let {
+        windowHeight, // 可使用窗口高度
+        windowTop // 可使用窗口的顶部位置
+      } = uni.getSystemInfoSync()
+      this.windowHeight = windowHeight
+      this.windowTop = windowTop
+      let {
+        h5Top,
+        wxTop,
+        bottom
+      } = this.customSafeArea
+      // H5自定义安全区域
+      // #ifndef MP
+      if (h5Top) {
+        this.windowHeight -= h5Top
+        windowTop += h5Top
+      }
+      // #endif
+      if (bottom) this.windowHeight -= bottom
+      // 上拉框最大高度top
+      if (this.maxTop <= 1) this.max = this.windowHeight * (1 - +this.maxTop)
+      else this.max = +this.maxTop
+      // 上拉框最小高度top
+      if (this.minTop <= 1) this.min = this.windowHeight * (1 - +this.minTop)
+      else this.min = this.windowHeight - (+this.minTop)
+      // 初始的上拉框top
+      if (['min', 'max'].includes(this.initTop)) this.top = this.initTop === 'min' ? this.min : this.max
+      else if (this.initTop <= 1) this.top = this.windowHeight * (1 - +this.initTop)
+      else this.top = +this.initTop
+      // 微信自定义安全区域
+      // #ifdef MP
+      if (wxTop) {
+        this.max += wxTop === 'menuBtn' ? uni.getMenuButtonBoundingClientRect().bottom + 10 : wxTop
+        this.top += wxTop
+      }
+      // #endif
+      // H5自定义安全区域
+      // #ifndef MP
+      this.max += windowTop
+      this.min += windowTop
+      this.top += windowTop
+      // #endif
+      this.boundary = (this.max + this.min) / 2 // 规定盒子复位为最大或最小状态的分界线，默认为最大最小状态的中间
+    },
+    methods: {
+      setBottom(value) {
+        if (this.auto) this.isTouchEnd = true
+        if (value <= 1) this.top = this.windowHeight * (1 - +value)
+        else this.top = (this.windowHeight - +value)
+        // #ifndef MP
+        this.top += this.windowTop
+        // #endif
+      },
+      onTouchStart(e) {
+        if (this.disable) return
+        this.isTouchEnd = false // 关闭滑动结束Flag，作用为是否开启上拉框的过渡效果
+        // #ifndef APP-NVUE
+        this.top = e.currentTarget.offsetTop // 手指触碰到上拉框时，将上拉框top设置为上拉框当前的top
+        // #endif
+        // #ifdef APP-NVUE
+        this.touchStartY = e.touches[0].screenY // 此次滑动开始时的Y轴坐标
+        // #endif
+        // #ifndef APP-NVUE
+        this.touchStartY = e.touches[0].clientY // 此次滑动开始时的Y轴坐标
+        // #endif
+        this.startTime = Date.now() // 设置滑动开始时间
+      },
+      onTouchmove(e) {
+        if (this.disable) return
+        // #ifdef APP-NVUE
+        let distance = e.touches[0].screenY - this.touchStartY // 滑动的距离 
+        // #endif
+        // #ifndef APP-NVUE
+        let distance = e.touches[0].clientY - this.touchStartY // 滑动的距离 
+        // #endif
+        if (this.limit) { // 是否开启高度限制
+          let nowTop = this.top + distance // 此次滑动的上拉框top值
+          if (nowTop < this.max || nowTop > this.min) {
+            // 如果滑动时上拉框top小于最大高度top就让上拉框top等于最大高度top
+            // 如果滑动时上拉框top大于最小高度top就让上拉框top等于最小高度top
+            this.top = nowTop < this.max ? this.max : this.min
+            this.distance = 0 // 滑动距离归零
+            // #ifdef APP-NVUE
+            this.touchStartY = e.touches[0].screenY // 此次滑动开始时的Y轴坐标
+            // #endif
+            // #ifndef APP-NVUE
+            this.touchStartY = e.touches[0].clientY // 此次滑动开始时的Y轴坐标
+            // #endif
+            return
+          }
+        }
+        this.distance = distance // 更新滑动距离
+      },
+      onTouchend(e) {
+        if (this.disable) return
+        this.top = this.top + this.distance // 更新上拉框top
+        if (this.auto) { // 是否开启自动复位
+          this.isTouchEnd = true // 开启滑动结束Flag
+          let time = (Date.now() - this.startTime) / 1000 // 滑动时间为 滑动结束时间 - 滑动开始时间
+          let speed = Math.abs(this.distance) / time // 滑动速度为 滑动距离/滑动时间
+          if (speed > 800) { // 如果速度大于800px/秒
+            this.top = this.distance > 0 ? this.min : this.max // 根据滑动方向设置top的值
+            // return this.distance = 0 // 滑动距离归零
+          } else {
+
+            if (this.top < this.boundary) this.top = this.max // 如果上拉框top小于分界线就让上拉框top等于最大高度top
+            else this.top = this.min // 如果上拉框top大于分界线就让上拉框top等于最小高度top
+          }
+        }
+        // 滑动结束时top信息
+        this.$emit('get-end-detail', {
+          minTop: this.min,
+          maxTop: this.max,
+          curTop: this.top
+        })
+        this.distance = 0 // 滑动距离归零
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .you-touchbox {
+    position: fixed;
+    left: 0;
+    right: 0;
+	bottom: 0;
+  }
+
+  .touchend {
+    transition-property: top;
+    transition-duration: .6s;
+  }
+
+  .you-touchbox-content {
+    /* #ifdef APP-NVUE */
+    flex: 1;
+    /* #endif */
+    /* #ifndef APP-NVUE */
+    height: 100%;
+    /* #endif */
+    background-color: #fff;
+  }
+
+
+  .touch-line-box {
+    padding: 5px 0 10px;
+    /* #ifdef APP-NVUE */
+    align-items: center;
+    /* #endif */
+  }
+
+  .touch-line {
+    /* #ifndef APP-NVUE */
+    margin: 0 auto;
+    /* #endif */
+    width: 45px;
+    height: 5px;
+    border-radius: 25px;
+    background: rgba(51, 51, 51, 0.2);
+  }
+</style>
diff --git a/pages/tabBar/category/category.vue b/pages/tabBar/category/category.vue
index 58c1cc8..e4d6b96 100644
--- a/pages/tabBar/category/category.vue
+++ b/pages/tabBar/category/category.vue
@@ -1,218 +1,113 @@
 <template>
-	<view class="map-container">
-		<!-- #ifdef H5 -->
-		<map id="myMap" style="width: 100%; height: 10vh;" :style="{height:mapheight}" :latitude="latitude"
-			:longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'>
-			<cover-view class="cover-view-loca" :style='{bottom:coverbottom}' @click="onControltap">
-				<cover-image class="cover-image" src="../../../static/img/dispos.png"></cover-image>
-			</cover-view>
-			<!-- 一级分类 -->
-			<cover-view class="width100 cover-views  mart15">
-				<scroll-view class="width90 cover-view-cont" scroll-x="true">
-					<cover-view class="cover-view-head font14" :class="[typeid == item.id ? 'onclick' : '']"
-						v-for="(item,index) in goodsFirstClassList" :key="index" @click="changeType(item)">{{item.name}}
-					</cover-view>
-				</scroll-view>
-				<!-- 二级分类 -->
-				<cover-view class="width100 mart15 backcorfff cover-viewchage alijus fotct"
-					style="border-radius: 22px;">
-					<!-- :class="[selectFirst == 1? 'onchange' : '']" -->
-					<cover-view class="font14 width30w fotct onchange text1"
-						@click="changeChilerType()">{{selectFirstName}}
-						<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image>
-					</cover-view>
-					<cover-view class="font14 width30w onchange" @click="changeChilerdistance()">{{distanceName}}
-						<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image>
-					</cover-view>
-					<cover-view class="font14 width30w">
-						<!-- 全部
-						<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image> -->
-					</cover-view>
-				</cover-view>
-			</cover-view>
-			<!-- //模态框 -->
-			<cover-view class="change-cont" v-if="selectChiler == 1 || selectChilerdistance == 1">
-				<cover-view class="width100 backcorfff"></cover-view>
-			</cover-view>
-			<!-- //显示内容 -->
-			<cover-view class="change-optiac paddbotm20" v-if="selectChiler == 1">
-				<scroll-view scroll-y="true" class="width100 height260">
-					<cover-view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"
-						v-for="(item,index) in goodsSendotClassList" :key="item.id" @click="changeFirstcont(item)">
-						<cover-view class="width90w font14"
-							:class="[selectFirst == item.id? 'onchange' : '']">{{item.name}}</cover-view>
-						<image class="icon20" src="../../../static/img/changed.png" mode="widthFix"
-							v-if="selectFirst == item.id"></image>
-					</cover-view>
-				</scroll-view>
-			</cover-view>
-			<!-- 二级距离 -->
-			<cover-view class="change-optiac paddbotm20" v-if="selectChilerdistance == 1">
-				<scroll-view scroll-y="true" class="width100 height260">
-					<cover-view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"
-						v-for="(item,index) in distanceList" :key="index" @click="changeDistance(item)">
-						<cover-view class="width90w font14"
-							:class="[ distance== item.id? 'onchange' : '']">{{item.title}}</cover-view>
-						<image class="icon20" src="../../../static/img/changed.png" mode="widthFix"
-							v-if="distance == item.id"></image>
-					</cover-view>
-				</scroll-view>
-			</cover-view>
+	<view class="map-container"  :style="{height:mapheight+'px'}">
 
-			<!-- 未打开筛选前 -->
-			<cover-view class="cover-view-foot" v-if="isSelected == 1">
-				<cover-view class="line-view" @click="updateSelected(2)"></cover-view>
-				<cover-view class="paddtop10 fcor666 font13 width100" @click="updateSelected(2)">点击发现更多商户</cover-view>
-				<cover-view class="input-box">
-					<input placeholder="搜索商品" v-model="searchName" placeholder-style="color:#c0c0c0;"
-						@click="updateSelected(2)" />
-				</cover-view>
-			</cover-view>
-
-			<!-- 打开筛选后 -->
-			<cover-view class="cover-view-foot-behind" v-if="isSelected == 2">
-				<cover-view class="line-view" @click="updateSelected(1)"></cover-view>
-				<cover-view class="paddtop10 fcor666 font13 width100" @click="updateSelected(1)">点击发现更多商户</cover-view>
-				<cover-view class="input-box">
-					<input placeholder="搜索商品" v-model="searchName" placeholder-style="color:#c0c0c0;"
-						@input="getMapStore()" />
-				</cover-view>
-				<scroll-view class="scoroll-cont width94 mart10" scroll-y="true">
-					<cover-view v-if="marker.length == 0 " class="mart30 fotct font14 fcor666 fotct width100">
-						<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres3"></image>
-					</cover-view>
-					<cover-view class="width96 height80 bor-botm1 alijusstart" v-for="(box,i) in marker" :key="i"
-						@click="seeloaction(box)">
-						<template v-if="box.id != 0">
-						<image mode="widthFix" :src="box.logo" class="recontleft flleft border-r" 
-						@error="imgerror($event, i )"	style="width: 50px;flex-shrink: 0;">
-						</image>
-						<cover-view class="fotlt paddleft5 flex-1">
-							<cover-view class="text2 width100 font16 fontwig6">
-								{{box.callout.content}}
-							</cover-view>
-							<cover-view class="height22">
-								<cover-view class="width70 flleft text1 font13 fcor999">
-									{{box.callout.address}}
-								</cover-view>
-								<cover-view class="width30 flright font13 fcor666 fotrt">
-									<image mode="aspectFit" :src="imagewxUrl+imgadres4" class="marglerig" style="width: 10px;height:10px"></image>
-									{{box.distance}}km
-								</cover-view>
-							</cover-view>
-						</cover-view>
-						</template>
-					</cover-view>
-				</scroll-view>
-			</cover-view>
-		</map>
-		<!-- #endif -->
-
-		<!-- #ifdef MP -->
-		<map id="myMap" style="width: 100%; height: 10vh;" :style="{height:mapheight}" :latitude="latitude"
+		<map id="myMap" style="width: 100%; height: 10vh;" :style="{height:mapheight+'px'}" :latitude="latitude"
 			:longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'>
-			<cover-view class="cover-view-loca" :style='{bottom:coverbottom}' @click="onControltap">
-				<cover-image class="cover-image" src="../../../static/img/dispos.png"></cover-image>
-			</cover-view>
-			<!-- 一级分类 -->
-			<view class="width100 cover-views  mart15">
-				<scroll-view class="width90 cover-view-cont" scroll-x="true">
-					<view class="cover-view-head font14" :class="[typeid == item.id ? 'onclick' : '']"
-						v-for="(item,index) in goodsFirstClassList" :key="index" @click="changeType(item)">{{item.name}}
-					</view>
-				</scroll-view>
-				<!-- 二级分类 -->
-				<view class="width100 mart15 backcorfff cover-viewchage alijus fotct" style="border-radius: 22px;">
-					<!-- :class="[selectFirst == 1? 'onchange' : '']" -->
-					<view class="font14 width30w fotct onchange text1" @click="changeChilerType()">{{selectFirstName}}
-						<image mode="aspectFit" class="margle" style="width: 8px;height:8px;" :src="imagewxUrl+imgadres2"></image>
-					</view>
-					<view class="font14 width30w onchange" @click="changeChilerdistance()">{{distanceName}}
-						<image mode="aspectFit" class="margle" style="width: 8px;height:8px;" :src="imagewxUrl+imgadres2"></image>
-					</view>
-					<view class="font14 width30w">
-						<!-- 全部
-						<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image> -->
-					</view>
+		</map>
+		
+		<!-- :style='{bottom:coverbottom}' -->
+		<view class="cover-view-loca"  @click="onControl">
+			<image class="cover-image" src="../../../static/img/dispos.png"></image>
+		</view>
+		<!-- 一级分类 -->
+		<view class="width100 classify-one  ">
+			<scroll-view class="width90 view-cont" scroll-x="true">
+				<view class="view-head font14" :class="[typeid == item.id ? 'onclick' : '']"
+					v-for="(item,index) in goodsFirstClassList" :key="index" @click="changeType(item)">{{item.name}}
+				</view>
+			</scroll-view>
+			<!-- 二级分类 -->
+			<view class="width100 mart15 backcorfff cover-viewchage alijus fotct" style="border-radius: 22px;">
+				<!-- :class="[selectFirst == 1? 'onchange' : '']" -->
+				<view class="font14 width30w fotct onchange text1" @click="changeChilerType()">{{selectFirstName}}
+					<text :class="' margle ic-drec '+(selectChiler == 1?'icon-ymt to-blod-up':'icon-ymt to-blod-down')"></text>
+					<!-- <image mode="aspectFit" class="margle" style="width: 8px;height:8px;" :src="imagewxUrl+imgadres2"></image> -->
+				</view>
+				<view class="font14 width30w onchange" @click="changeChilerdistance()">{{distanceName}}
+					<text :class="' margle ic-drec '+(selectChilerdistance == 1?'icon-ymt to-blod-up':'icon-ymt to-blod-down')"></text>
+					<!-- <image mode="aspectFit" class="margle" style="width: 8px;height:8px;" :src="imagewxUrl+imgadres2"></image> -->
+				</view>
+				<view class="font14 width30w">
+					<!-- 全部
+					<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image> -->
 				</view>
 			</view>
-			<!-- //模态框 -->
-			<view class="change-cont" v-if="selectChiler == 1 || selectChilerdistance == 1">
-				<view class="width100 backcorfff"></view>
-			</view>
-			<!-- //显示内容 -->
-			<view class="change-optiac paddbotm20" v-if="selectChiler == 1">
-				<scroll-view scroll-y="true" class="width100 height260">
-					<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"
-						v-for="(item,index) in goodsSendotClassList" :key="item.id" @click="changeFirstcont(item)">
-						<view class="width90w font14" :class="[selectFirst == item.id? 'onchange' : '']">{{item.name}}
-						</view>
-						<image class="icon20" src="../../../static/img/changed.png" mode="widthFix"
-							v-if="selectFirst == item.id"></image>
+			
+			
+			
+		</view>
+		<!-- //显示内容 -->
+		<view class="change-optiac paddbotm20" v-if="selectChiler == 1">
+			<scroll-view scroll-y="true" class="width100 height260">
+				<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"
+					v-for="(item,index) in goodsSendotClassList" :key="item.id" @click="changeFirstcont(item)">
+					<view class="width90w font14" :class="[selectFirst == item.id? 'onchange' : '']">{{item.name}}
 					</view>
-				</scroll-view>
-			</view>
-			<!-- 二级距离 -->
-			<view class="change-optiac paddbotm20" v-if="selectChilerdistance == 1">
-				<scroll-view scroll-y="true" class="width100 height260">
-					<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"
-						v-for="(item,index) in distanceList" :key="index" @click="changeDistance(item)">
-						<view class="width90w font14" :class="[ distance== item.id? 'onchange' : '']">{{item.title}}
-						</view>
-						<image class="icon20" src="../../../static/img/changed.png" mode="widthFix"
-							v-if="distance == item.id"></image>
+					<image class="icon20" src="../../../static/img/changed.png" mode="widthFix"
+						v-if="selectFirst == item.id"></image>
+				</view>
+			</scroll-view>
+		</view>
+		<!-- 二级距离 -->
+		<view class="change-optiac paddbotm20" v-if="selectChilerdistance == 1">
+			<scroll-view scroll-y="true" class="width100 height260">
+				<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"
+					v-for="(item,index) in distanceList" :key="index" @click="changeDistance(item)">
+					<view class="width90w font14" :class="[ distance== item.id? 'onchange' : '']">{{item.title}}
 					</view>
-				</scroll-view>
-			</view>
-
-			<!-- 未打开筛选前 -->
-			<view class="cover-view-foot" v-if="isSelected == 1">
-				<view class="line-view" @click="updateSelected(2)"></view>
-				<view class="paddtop10 fcor666 font13 width100" @click="updateSelected(2)">点击发现更多商户</view>
-				<view class="input-box">
-					<input placeholder="搜索商品" v-model="searchName" placeholder-style="color:#c0c0c0;"
-						@click="updateSelected(2)" />
+					<image class="icon20" src="../../../static/img/changed.png" mode="widthFix"
+						v-if="distance == item.id"></image>
 				</view>
-			</view>
-
-			<!-- 打开筛选后 -->
-			<view class="cover-view-foot-behind" v-if="isSelected == 2">
-				<view class="line-view" @click="updateSelected(1)"></view>
-				<view class="paddtop10 fcor666 font13 width100" @click="updateSelected(1)">点击发现更多商户</view>
+			</scroll-view>
+		</view>
+		<!-- //模态框 -->
+		<view class="change-cont" v-if="selectChiler == 1 || selectChilerdistance == 1">
+			<view class="width100 backcorfff"></view>
+		</view>
+		
+		
+		<touchbox ref="touchBox" :maxTop="maxTop" minTop="0.2" :auto="true" customStyle="border-radius:25px;"
+			:disable="isTouchDisable" @get-end-detail="getEndDetail">
+
+			<view class="cover-view-foot-behind" >
+				<view class="paddtop10 fcor666 font13 width100">点击发现更多商户</view>
 				<view class="input-box">
 					<input placeholder="搜索商品" v-model="searchName" placeholder-style="color:#c0c0c0;"
 						@input="getMapStore()" />
 				</view>
-				<scroll-view class="scoroll-cont width94 mart10" scroll-y="true">
+				<scroll-view class="scoroll-cont width94 mart10" :scroll-y="isScrollY">
 					<view v-if="marker.length == 0 " class="mart30 fotct font14 fcor666 fotct width100">
 						<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres3"></image>
 					</view>
-					<view class="width96 height80 bor-botm1 alijusstart" v-for="(box,i) in marker" :key="i"
-						@click="seeloaction(box)">
-						<template v-if="box.id != 0">
-						<image mode="widthFix" :src="box.logo" class="recontleft flleft border-r"
-						@error="imgerror($event, i )"	style="width: 50px;flex-shrink: 0;">
-						</image>
-						<view class="fotlt paddleft5 flex-1">
-							<view class="text2 width100 font16 fontwig6">
-								{{box.callout.content}}
-							</view>
-							<view class="height22">
-								<view class="width70 flleft text1 font13 fcor999">
-									{{box.callout.address}}
+					
+					<view class="" v-for="(box,i) in marker" :key="i"
+							@click="seeloaction(box)">
+						<view v-if="box.id != 0" class="width96 height80 bor-botm1 alijusstart" >
+							<image mode="widthFix" :src="box.logo" class="recontleft flleft border-r"
+							@error="imgerror($event, i )"	style="width: 50px;flex-shrink: 0;">
+							</image>
+							<view class="fotlt paddleft5 flex-1">
+								<view class="text2 width100 font16 fontwig6">
+									{{box.callout.content}}
 								</view>
-								<view class="width30 flright font13 fcor666 fotrt">
-									<image mode="aspectFit" :src="imagewxUrl+imgadres4" class="marglerig" style="width: 10px;height: 10px;"></image>
-									{{box.distance}}km
+								<view class="height22">
+									<view class="width70 flleft text1 font13 fcor999">
+										{{box.callout.address}}
+									</view>
+									<view class="width30 flright font13 fcor666 fotrt">
+										<image mode="aspectFit" :src="imagewxUrl+imgadres4" class="marglerig" style="width: 10px;height: 10px;"></image>
+										{{box.distance}}km
+									</view>
 								</view>
 							</view>
+							
 						</view>
-						</template>
 					</view>
+					
 				</scroll-view>
 			</view>
-		</map>
-		<!-- #endif -->
+		</touchbox>
+		
 	</view>
 </template>
 <script>
@@ -220,10 +115,12 @@
 		getIndustry,
 		getMapStore
 	} from '../../../Utils/Api.js';
+	import touchbox from '@/components/touchbox/touchbox.vue'
 	let app = getApp();
 	export default {
 		data() {
 			return {
+				mapheight:null,
 				latitude: '', //纬度
 				longitude: '', //经度
 				mapContext: null,
@@ -284,35 +181,44 @@
 				distance: '3',
 				distanceName: '3km',
 				searchName: '', //搜索名称
-				typeplat: 1 //手机类型
+				typeplat: 1, //手机类型
+				
+				maxTop: 0.7,
+				isTouchDisable: false, // 是否禁用滑动
+				isScrollY:false,
 			}
 		},
 		onLoad() {
 			this.onControltap();
 		},
-		onReady() {
-				this.mapContext = uni.createMapContext('myMap');
-				console.log(this.mapContext)
-		},
 		onShow() {
 			// this.latitude = app.globalData.latitude;
 			// this.longitude = app.globalData.longitude;
 			/* this.onControltap(); */
 		},
+		components:{
+			touchbox,
+		},
+		onReady() {
+			this.mapContext = uni.createMapContext('myMap');
+			this.mapheight = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().windowTop - uni
+				.getSystemInfoSync().windowBottom
+			// console.log(uni.getSystemInfoSync())
+		},
 		computed: {
-			mapheight() {
-				let data = ''
-				if (this.bottomData) {
-					if (this.upTop) {
-						data = '50px'
-					} else {
-						data = '200px'
-					}
-				} else {
-					data = '100vh'
-				}
-				return data
-			},
+			// mapheight() {
+			// 	let data = ''
+			// 	if (this.bottomData) {
+			// 		if (this.upTop) {
+			// 			data = '50px'
+			// 		} else {
+			// 			data = '200px'
+			// 		}
+			// 	} else {
+			// 		data = '100vh'
+			// 	}
+			// 	return data
+			// },
 			coverbottom() {
 				let data = ''
 				if (this.bottomData) {
@@ -325,6 +231,15 @@
 		},
 
 		methods: {
+			getEndDetail({
+				minTop,
+				maxTop,
+				curTop
+			}) {
+				// console.log(minTop, maxTop, curTop);
+				if (curTop == maxTop) this.isScrollY = true
+				else this.isScrollY = false
+			},
 			//查询商户列表
 			getIndustry() {
 				getIndustry().then(res => {
@@ -553,6 +468,23 @@
 				})
 			},
 			// 定位点击事件
+			onControl(){
+				if(this.mapContext&&this.latitude&&this.longitude){
+					let that = this;
+					this.mapContext.moveToLocation({
+						latitude: that.latitude,
+						longitude: that.longitude,
+						success(res){
+							// console.log(res,"成功")
+						}
+					})
+					
+					
+				}else{
+					// console.log(this.mapContext,this.latitude,this.longitude)
+					this.onControltap();
+				}
+			},
 			onControltap() {
 				uni.showLoading({
 					title: '定位中'
@@ -567,16 +499,16 @@
 						this.latitude = res.latitude;
 						
 						if(this.mapContext){
-						this.mapContext.moveToLocation({
-							latitude: this.latitude,
-							longitude: this.longitude,
-							success(res){
-								// console.log(res,"成功")
-							}
-						})
+							this.mapContext.moveToLocation({
+								latitude: this.latitude,
+								longitude: this.longitude,
+								success(res){
+									// console.log(res,"成功")
+								}
+							})
 						}
 
-						console.log(this.longitude, this.latitude, "this.longitude,this.latitude")
+						// console.log(this.longitude, this.latitude, "this.longitude,this.latitude")
 						this.getIndustry();
 					},
 					fail() {
@@ -668,27 +600,35 @@
 		}
 	}
 </script>
-<style lang='less' scoped>
+<style lang='scss' scoped>
 	
 	image{will-change: transform}
 	
+	.ic-drec{
+		font-size: 24rpx !important;
+		width: 10px;
+		height: 10px;
+		line-height: 10px;
+		color: #333;
+	}
 	.map-container {
 		position: relative;
 		overflow: hidden;
-
-		.cover-views {
+		
+		.classify-one{
 			position: absolute;
-			z-index: 99999;
+			top:15px;
 		}
+		
 
-		.cover-view-cont {
+		.view-cont {
 			display: flex;
 			flex-direction: row;
 			flex-wrap: nowrap;
 			white-space: nowrap;
 		}
 
-		.cover-view-head {
+		.view-head {
 			height: 35px;
 			line-height: 35px;
 			background-color: #fff;
@@ -727,7 +667,7 @@
 			background-size: 60px 60px;
 			background-position: center center;
 			position: absolute;
-			bottom: 100px;
+			bottom: 20%;
 			right: 16px;
 		}
 
@@ -749,7 +689,7 @@
 
 		.change-cont {
 			position: absolute;
-			z-index: 99999999;
+			z-index:999;
 			top: 100px;
 			background-color: #333;
 			width: 100%;
@@ -759,8 +699,8 @@
 
 		.change-optiac {
 			position: absolute;
-			z-index: 99999999;
-			top: 100px;
+			z-index: 9999;
+			top: 99px;
 			width: 100%;
 			background-color: #fff;
 			height: 260px;
@@ -768,18 +708,14 @@
 
 		.cover-view-foot-behind {
 			text-align: center;
-			height: calc(100% - 110px);
+			height: calc(100% - 20px);
 			background-color: #fff;
-			position: absolute;
-			z-index: 999999;
-			bottom: 0px;
 			width: 100%;
-			border-radius: 18px 18px 0 0;
 		}
 	}
 
 	.scoroll-cont {
-		height: calc(100% - 80px);
+		height: calc(100% - 73px);
 	}
 
 	.line-view {
@@ -796,7 +732,7 @@
 		margin-left: 5%;
 		margin-top: 5px;
 		text-align: left;
-		height: 70rpx;
+		height: 35px;
 		background-color: #f0f0f0;
 		border-radius: 22px;
 		position: relative;