From c187bf9f4eb1eeeccb1dcb035da39b4fcc621a81 Mon Sep 17 00:00:00 2001
From: "Mr.jiang" <714156421@qq.com>
Date: Thu, 15 Aug 2024 16:24:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=80=E5=B8=88=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/therapist/therapist.vue                 | 150 ++++++++++++--
 uni_modules/uni-drawer/changelog.md           |  13 ++
 .../components/uni-drawer/keypress.js         |  45 +++++
 .../components/uni-drawer/uni-drawer.vue      | 183 ++++++++++++++++++
 uni_modules/uni-drawer/package.json           |  87 +++++++++
 uni_modules/uni-drawer/readme.md              |  10 +
 6 files changed, 474 insertions(+), 14 deletions(-)
 create mode 100644 uni_modules/uni-drawer/changelog.md
 create mode 100644 uni_modules/uni-drawer/components/uni-drawer/keypress.js
 create mode 100644 uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue
 create mode 100644 uni_modules/uni-drawer/package.json
 create mode 100644 uni_modules/uni-drawer/readme.md

diff --git a/pages/therapist/therapist.vue b/pages/therapist/therapist.vue
index c216e70..660ff02 100644
--- a/pages/therapist/therapist.vue
+++ b/pages/therapist/therapist.vue
@@ -7,18 +7,21 @@
 					<image src="../../static/liliao-1.png" class="dingwei-img"></image>
 					<view class="localName" style="margin-right: 30rpx;">{{ cityname }}</view>
 				</view>
-				<u-search class="flex-sub" placeholder="请输入技师名字" :focus="false" shape="square" v-model="artificerName"
-					:show-action="true" :animation="true" bg-color="#fff" color="#019c88" @search="onSearch()"
-					action-text="搜索" @custom="onSearch()">
-				</u-search>
+				
 				<view class="flex align-center justify-between" style="margin-left: 8rpx;">
 					<selectSwitchDitu :key="componentKey" @change="switch1Change" :switchList="switchList"/>
 				</view>
 			</view>
 			<view class="fenlei">
 				<image class="fenlei-img" src="../../static/excel1.png"></image>
-				<z-tabs class="z-tabs-fenlei" :list="tabList" @change="tabChange" @changeClick="changeClick"/>
+				<u-search class="flex-sub" placeholder="请输入技师名字" :focus="false" shape="square" v-model="artificerName"
+					:show-action="true" :animation="true" bg-color="#fff" color="#019c88" @search="onSearch()"
+					action-text="搜索" @custom="onSearch()">
+				</u-search>
+				<span @click="toggle">筛选</span>
+				<!-- <z-tabs class="z-tabs-fenlei" :list="tabList" @change="tabChange" @changeClick="changeClick"/> -->
 			</view>
+			
 		</view>
 		
 		<view class="liebiao" v-show="current === 0">
@@ -220,7 +223,24 @@
 			</view>
 		</view>
 		<!-- 经验筛选 -->
-		<u-select v-model="Cityshow" :list="cityList" @confirm="getCity"></u-select>
+		<u-popup v-model="showpay" mode="top" :closeable="closeable">
+			<view class="popup_pay">
+				<view style="background-color: #fff;">
+					<view style="padding: 0 20upx;margin-top: 60rpx;margin-bottom: 20rpx;">
+						<view class="popup-top">
+							<view class="popup-top-one">技师等级</view>
+							<z-tabs class="z-tabs-fenlei" :list="tabList" @change="tabChange" @changeClick="changeClick"/>
+						</view>
+						<view class="popup-top">
+							<view class="popup-top-one">技师类型</view>
+							<uni-data-checkbox selectedColor="#019c88" multiple v-model="selectedValues" :localdata="tabListSon" @change="changeClickSon"></uni-data-checkbox>
+						</view>
+					</view>
+				</view>
+				<view class="pay_btn" @click="quding">确认</view>
+			</view>
+		</u-popup>
+		<u-select v-model="Cityshow" :list="selectedValues" @confirm="getCity"></u-select>
 	</view>
 </template>
 <script>
@@ -231,7 +251,7 @@
 	import commonConfig from 'common/config.js';
 
 	import * as webMap from 'utils/webMap.js';
-import permision from "@/components/permission.js";
+ import permision from "@/components/permission.js";
 	// 调用手机系统权限
 	// #ifdef APP-PLUS
 	// import permision from "@/components/permission.js";
@@ -245,6 +265,10 @@ import permision from "@/components/permission.js";
 		},
 		data() {
 			return {
+				closeable: true,
+				showpay: false,
+				selectedValues: [], // 存储选中的值
+				tabListSon:[],
 				tabList:[
 					{
 						id: 3,
@@ -328,7 +352,8 @@ import permision from "@/components/permission.js";
 				Key2:'ad684a15ebbb6f5d12c407a3d593c949',
 				latadd:'',
 				componentKey:0,
-				cityname:''
+				cityname:'',
+				classifyId:''
 			}
 		},
 
@@ -367,7 +392,7 @@ import permision from "@/components/permission.js";
 					// #endif
 				}
 			})
-
+			that.tabNavSon()
 			// 获取邀请码保存到本地
 			if (e.invitation) {
 				that.$queue.setData('inviterCode', e.invitation);
@@ -419,6 +444,7 @@ import permision from "@/components/permission.js";
 					that.page = 1
 					// that.selectCity(that.latitude,that.longitude)
 					that.getlist()
+					that.tabNavSon()
 				} else {
 					uni.getLocation({
 						type: 'gcj02',
@@ -430,10 +456,11 @@ import permision from "@/components/permission.js";
 							that.longitude = res.longitude
 							that.page = 1
 							that.getTypeList();
-							// that.getlist()
+							that.selectCity(that.longitude,that.latitude)
 						},
 						fail: function() {
 							that.getlist()
+							that.tabNavSon()
 							console.log('获取地址失败2')
 						}
 					})
@@ -459,18 +486,53 @@ import permision from "@/components/permission.js";
 			//this.closeSocket();
 		},
 		methods: {
+			quding(){
+				this.getlist()
+				this.showpay = false;
+			},
+			toggle() {
+				this.showpay = true;
+			},
+			tabNavSon(){
+				let data = {
+						  type: "服务类型",
+						}
+				this.$Request.get('/app/dict/list', data).then(res => {
+					if (res.code == 0) {
+						var list=[];
+						for(var i=0;i<res.data.length;i++){
+							list.push({
+								text:res.data[i].value,
+								value:res.data[i].id
+							})
+						}
+						this.tabListSon=list;
+						this.classifyId=res.data[0].id;
+						this.page = 1;
+					}
+				})
+			},
+			changeClickSon(item){
+				console.log("item",item)
+				var index = []
+				for(var i=0;i<item.detail.data.length;i++){
+					index.push(item.detail.data[i].value)
+				}
+			   this.classifyId = index.join(",")
+			   this.artificerName='';
+			   this.page=1;
+			},
 			changeClick(index,item){
 				this.artificerName='';
 				this.technicianType=item.id;
 				this.page=1;
-				this.getlist()
 			},
 			getlist() {
 				var that=this;
 				let index = 2
 				let data = {
 					artificerName: that.artificerName,
-					classifyId: that.tabIndex,
+					classifyId: that.classifyId,
 					page: that.page,
 					limit: that.limit,
 					technicianType:that.technicianType,
@@ -1226,11 +1288,71 @@ import permision from "@/components/permission.js";
 </script>
 
 <style lang="scss" scoped>
+	/deep/.z-tabs-bottom{
+		display:none;
+	}
+	.popup-top-one{
+		width: 100%;
+		text-align: left;
+		font-size: 14px;
+		font-weight: bold;
+		margin-bottom: 10px;
+	}
+	.popup-top{
+		display: flex;
+		align-items: center;
+		// padding: 20upx 0;
+		justify-content: center;
+		flex-direction: column;
+	}
+	.popup_pay {
+		width: 100%;
+		position: relative;
+		padding-bottom: 45rpx;
+		/* height: 160px; */
+		/* #ifndef MP-WEIXIN */
+		/* height: 130px; */
+		/* #endif */
+	
+	}
+	
+	.pay_btn {
+		width: 90%;
+		margin: 0 auto;
+		text-align: center;
+		background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
+		height:80rpx;
+		border-radius: 80rpx;
+		color: #ffffff;
+		line-height: 80rpx;
+		font-size: 32rpx;
+	}
+	/deep/.checklist-box{
+		margin: 11px 0 !important;
+		margin-right: 0px !important;
+		width: 33%;
+	}
+	/deep/.checklist-group{
+		overflow-x: scroll;
+	}
+	/deep/.checklist-text{
+		white-space: nowrap;
+	}
+	/deep/.checkbox__inner{
+		display:none;
+	}
+	/deep/.checklist-group{
+	    display: flex;
+	    flex-direction: row;
+	    justify-content: start;
+	    margin: 0 auto;
+	    // margin-left: 35px;
+	}
 	/deep/.u-close--top-right{
 		margin-top:-8px;
 	}
 	.localName{
-	    width: 100px;
+	    width: 220px;
 	    margin-left: 4rpx;
 	    font-weight: bold;
 		font-size: 30rpx;
@@ -1289,7 +1411,7 @@ import permision from "@/components/permission.js";
 	}
 	.liebiao{
 		//height: 100vh;
-		margin-top: 90px;
+		margin-top: 85px;
 		display: flex;
 		flex-direction: column;
 	}
diff --git a/uni_modules/uni-drawer/changelog.md b/uni_modules/uni-drawer/changelog.md
new file mode 100644
index 0000000..6d2488c
--- /dev/null
+++ b/uni_modules/uni-drawer/changelog.md
@@ -0,0 +1,13 @@
+## 1.2.1（2021-11-22）
+- 修复 vue3中个别scss变量无法找到的问题
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-drawer](https://uniapp.dcloud.io/component/uniui/uni-drawer)
+## 1.1.1（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 1.1.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.7（2021-05-12）
+- 新增 组件示例地址
+## 1.0.6（2021-02-04）
+- 调整为uni_modules目录规范
diff --git a/uni_modules/uni-drawer/components/uni-drawer/keypress.js b/uni_modules/uni-drawer/components/uni-drawer/keypress.js
new file mode 100644
index 0000000..62dda46
--- /dev/null
+++ b/uni_modules/uni-drawer/components/uni-drawer/keypress.js
@@ -0,0 +1,45 @@
+// #ifdef H5
+export default {
+  name: 'Keypress',
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    const keyNames = {
+      esc: ['Esc', 'Escape'],
+      tab: 'Tab',
+      enter: 'Enter',
+      space: [' ', 'Spacebar'],
+      up: ['Up', 'ArrowUp'],
+      left: ['Left', 'ArrowLeft'],
+      right: ['Right', 'ArrowRight'],
+      down: ['Down', 'ArrowDown'],
+      delete: ['Backspace', 'Delete', 'Del']
+    }
+    const listener = ($event) => {
+      if (this.disable) {
+        return
+      }
+      const keyName = Object.keys(keyNames).find(key => {
+        const keyName = $event.key
+        const value = keyNames[key]
+        return value === keyName || (Array.isArray(value) && value.includes(keyName))
+      })
+      if (keyName) {
+        // 避免和其他按键事件冲突
+        setTimeout(() => {
+          this.$emit(keyName, {})
+        }, 0)
+      }
+    }
+    document.addEventListener('keyup', listener)
+    // this.$once('hook:beforeDestroy', () => {
+    //   document.removeEventListener('keyup', listener)
+    // })
+  },
+	render: () => {}
+}
+// #endif
diff --git a/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue b/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue
new file mode 100644
index 0000000..2471521
--- /dev/null
+++ b/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue
@@ -0,0 +1,183 @@
+<template>
+	<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
+		<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
+		<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">
+			<slot />
+		</view>
+		<!-- #ifdef H5 -->
+		<keypress @esc="close('mask')" />
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	// #ifdef H5
+	import keypress from './keypress.js'
+	// #endif
+	/**
+	 * Drawer 抽屉
+	 * @description 抽屉侧滑菜单
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=26
+	 * @property {Boolean} mask = [true | false] 是否显示遮罩
+	 * @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
+	 * @property {Boolean} mode = [left | right] Drawer 滑出位置
+	 * 	@value left 从左侧滑出
+	 * 	@value right 从右侧侧滑出
+	 * @property {Number} width 抽屉的宽度 ，仅 vue 页面生效
+	 * @event {Function} close 组件关闭时触发事件
+	 */
+	export default {
+		name: 'UniDrawer',
+		components: {
+			// #ifdef H5
+			keypress
+			// #endif
+		},
+		emits:['change'],
+		props: {
+			/**
+			 * 显示模式（左、右），只在初始化生效
+			 */
+			mode: {
+				type: String,
+				default: ''
+			},
+			/**
+			 * 蒙层显示状态
+			 */
+			mask: {
+				type: Boolean,
+				default: true
+			},
+			/**
+			 * 遮罩是否可点击关闭
+			 */
+			maskClick:{
+				type: Boolean,
+				default: true
+			},
+			/**
+			 * 抽屉宽度
+			 */
+			width: {
+				type: Number,
+				default: 220
+			}
+		},
+		data() {
+			return {
+				visibleSync: false,
+				showDrawer: false,
+				rightMode: false,
+				watchTimer: null,
+				drawerWidth: 220
+			}
+		},
+		created() {
+			// #ifndef APP-NVUE
+			this.drawerWidth = this.width
+			// #endif
+			this.rightMode = this.mode === 'right'
+		},
+		methods: {
+			clear(){},
+			close(type) {
+				// fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
+				if((type === 'mask' && !this.maskClick) || !this.visibleSync) return
+				this._change('showDrawer', 'visibleSync', false)
+			},
+			open() {
+				// fixed by mehaotian 处理重复点击打开的事件
+				if(this.visibleSync) return
+				this._change('visibleSync', 'showDrawer', true)
+			},
+			_change(param1, param2, status) {
+				this[param1] = status
+				if (this.watchTimer) {
+					clearTimeout(this.watchTimer)
+				}
+				this.watchTimer = setTimeout(() => {
+					this[param2] = status
+					this.$emit('change',status)
+				}, status ? 50 : 300)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	$uni-mask: rgba($color: #000000, $alpha: 0.4) ;
+	// 抽屉宽度
+	$drawer-width: 220px;
+
+	.uni-drawer {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		overflow: hidden;
+		z-index: 999;
+	}
+
+	.uni-drawer__content {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: absolute;
+		top: 0;
+		width: $drawer-width;
+		bottom: 0;
+		background-color: $uni-bg-color;
+		transition: transform 0.3s ease;
+	}
+
+	.uni-drawer--left {
+		left: 0;
+		/* #ifdef APP-NVUE */
+		transform: translateX(-$drawer-width);
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		transform: translateX(-100%);
+		/* #endif */
+	}
+
+	.uni-drawer--right {
+		right: 0;
+		/* #ifdef APP-NVUE */
+		transform: translateX($drawer-width);
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		transform: translateX(100%);
+		/* #endif */
+	}
+
+	.uni-drawer__content--visible {
+		transform: translateX(0px);
+	}
+
+
+	.uni-drawer__mask {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		opacity: 0;
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		background-color: $uni-mask;
+		transition: opacity 0.3s;
+	}
+
+	.uni-drawer__mask--visible {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		opacity: 1;
+	}
+</style>
diff --git a/uni_modules/uni-drawer/package.json b/uni_modules/uni-drawer/package.json
new file mode 100644
index 0000000..dd056e4
--- /dev/null
+++ b/uni_modules/uni-drawer/package.json
@@ -0,0 +1,87 @@
+{
+  "id": "uni-drawer",
+  "displayName": "uni-drawer 抽屉",
+  "version": "1.2.1",
+  "description": "抽屉式导航，用于展示侧滑菜单，侧滑导航。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "drawer",
+    "抽屉",
+    "侧滑导航"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-drawer/readme.md b/uni_modules/uni-drawer/readme.md
new file mode 100644
index 0000000..dcf6e6b
--- /dev/null
+++ b/uni_modules/uni-drawer/readme.md
@@ -0,0 +1,10 @@
+
+
+## Drawer 抽屉
+> **组件名：uni-drawer**
+> 代码块： `uDrawer`
+
+抽屉侧滑菜单。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-drawer)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file