前端

uni_applet/pageA/login/index.vue

@@ -4,20 +4,19 @@
 			<u--image width='80' height='80' src="/static/logo.png" radius='10' shape="square"></u--image>
 		</view>
 		<view style='width:80%;margin:0 auto;'>
-			<u-button v-if='!value' :customStyle="customStyleOk"> 微信用户一键登录</u-button>
+			<u-button v-if='!value' @click='custom' :customStyle="customStyleOk"> 微信用户一键登录</u-button>
 			<u-button v-else :customStyle="customStyleOk" open-type="getPhoneNumber"
 				@getphonenumber="getPhoneNumber"> 微信用户一键登录</u-button>
 		</view>
 		<!-- <view><u-button :customStyle="customStyleUnOk" @click="showAuthorizePhone=false" :plain="true">
 		 					拒绝</u-button></view> -->
 		<view style='margin:40rpx 0;'>
-			<view style='width: 77%;margin: 0 auto;' class='flex'>
+			<view style='width: 77%;margin: 0 auto;' class='flex align-item-center'>
 				<view style='margin-right:5rpx;'>
-					<zb-tooltip :content="content" placement="top" ref="tooltip2"  :visible.sync="isShow" >
-						<view >
-							<u--image @click='value= !value' width='16' height='16' :src="value?'/static/image/login/checked.png':'/static/image/login/no-checked.png'" radius='10' shape="square"></u--image>
-						</view>
-					</zb-tooltip>
+					<view >
+						<u--image @click='value= !value' width='16' height='16' :src="value?'/static/image/login/checked.png':'/static/image/login/no-checked.png'" radius='10' shape="square"></u--image>
+					</view>
+					
 				</view>
 				登录代表您已同意<navigator
 							url="/pageA/webview?can_share=false&url=liangxin.zthymaoyi.com/youyuquan.html"
@@ -125,22 +124,19 @@
 			this.showAuthorizePhone=true
 		  },
 		  async getPhoneNumber(e) {
-			  if(this.value){
-				  console.log(0)
+				console.log(0)
 				that.userInfo = await this.$request.wxlogin()
 				console.log(that.userInfo,1111)
 				that.userInfo.phone = await this.$request.getPhone(e, that.userInfo)
 				console.log(that.userInfo,2222)
 				this.showAuthorizeUser = true
-			  }else{
-				uni.showToast({
+		  },
+		  custom(){
+			  uni.showToast({
 					icon: "none",
 					title: '请阅读并勾选用户协议和隐私政策',
 					duration: 3000
 				});
-			  }
-		  	
-		  
 		  },
 		  async authUser(type) {
 		  	//同步信息，没有头像和昵称自动生成
@@ -243,4 +239,7 @@
 	/deep/.u-button--normal{
 		padding: 0 5px;
 	}
+	/deep/.u-input{
+		padding:0 !important;
+	}
 </style>

uni_applet/uni_modules/zb-tooltip/changelog.md

@@ -0,0 +1,24 @@
+## 1.0.11（2023-01-29）
+优化点击，加入点击自己再次点击也会关闭
+## 1.0.10（2023-01-17）
+优化
+## 1.0.9（2023-01-17）
+增加注释
+## 1.0.8（2022-08-18）
+优化细节
+## 1.0.67（2022-05-09）
+修复安卓报错
+## 1.0.6（2022-05-07）
+修改默认展示
+## 1.0.5（2022-04-28）
+进行优化
+## 1.0.4（2022-04-27）
+进行优化
+## 1.0.3（2022-04-25）
+去掉多余得注释
+## 1.0.2（2022-04-25）
+增加自定义主题颜色
+## 1.0.1（2022-04-25）
+进行优化显示
+## 1.0.0（2022-04-24）
+初始化

uni_applet/uni_modules/zb-tooltip/components/zb-tooltip/zb-tooltip.vue

@@ -0,0 +1,291 @@
+<template>
+	<view class="zb-tooltip" :style="{
+		'--theme-bg-color':color
+	}">
+		<view  class="zb_tooltip_content" @click.stop="handleClick">
+			<slot></slot>
+			<view class="zb_tooltip__popper"
+        @click.stop="()=>{}"
+        :style="[style,{
+				visibility:isShow?'visible':'hidden',
+				color:color==='white'?'':'#fff',
+				boxShadow: color==='white'?'0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d':''
+			}]" >
+				<slot name="content">{{content}}</slot>
+				<view class="zb_popper__icon"  :style="[arrowStyle]" :class="[{
+					'zb_popper__up':placement.indexOf('bottom')===0,
+					'zb_popper__arrow':placement.indexOf('top')===0,
+					'zb_popper__right':placement.indexOf('right')===0,
+					'zb_popper__left':placement.indexOf('left')===0,
+				}]">
+				</view>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		props:{
+			visible:Boolean,
+			color:{
+				type:String,
+				default:'#303133',
+			},
+			placement:{
+				type:String,
+				default:'top',
+			},
+			content:{
+				type:String,
+				default:''
+			},
+			show:{
+				type:Boolean,
+				default:false,
+			}
+		},
+
+		data() {
+			return {
+				isShow :this.visible,
+				title: 'Hello',
+				arrowLeft:0,
+				query:null,
+				style:{
+
+				},
+				arrowStyle:{}
+			}
+		},
+		onLoad() {
+
+		},
+		watch:{
+			isShow:{
+				handler(val){
+					this.$emit('update:visible', val)
+				},
+				immediate:true,
+			},
+			visible:{
+				 handler(val){
+					 if(val){
+						 this.$nextTick(()=>{
+							 this.getPosition()
+						 })
+					 }
+           this.isShow = val
+				 },
+				 immediate:true,
+			}
+		},
+		mounted(){
+			// #ifdef H5
+			window.addEventListener('click',()=>{
+				this.isShow = false
+			})
+			// #endif
+      this.getPosition()
+		},
+		methods: {
+			close(){
+				this.isShow = false
+			},
+			fixedWrap(){
+				this.isShow = false
+			},
+      async handleClick(){
+			  if(this.isShow){
+          return this.isShow = false
+        }
+        await this.getPosition()
+        this.isShow = true
+      },
+			getPosition(){
+			  return new Promise((resolve) => {
+          uni.createSelectorQuery().in(this).selectAll('.zb_tooltip_content,.zb_tooltip__popper').boundingClientRect(async (data)=>{
+            let {left,bottom,right,top,width,height} = data[0]
+            let obj1 = data[1]
+            let objStyle = {}
+            let objStyle1 = {}
+            switch(this.placement){
+              case 'top':
+                if(obj1.width > width){
+                  objStyle.left = `-${(obj1.width - width)/2}px`
+                }else{
+                  objStyle.left = `${Math.abs(obj1.width - width)/2}px`
+                }
+
+                objStyle.bottom =`${height+8}px`
+                objStyle1.left = (obj1.width/2-6)+'px'
+                break;
+              case 'top-start':
+                objStyle.left = `0px`
+                objStyle.bottom =`${height+8}px`
+                break;
+              case 'top-end':
+                objStyle.right = `0px`
+                objStyle.bottom =`${height+8}px`
+                objStyle1.right=`8px`
+                break;
+              case 'bottom':
+                if(obj1.width>width){
+                  objStyle.left = `-${(obj1.width - width)/2}px`
+                }else{
+                  objStyle.left = `${Math.abs(obj1.width - width)/2}px`
+                }
+                objStyle.top =`${height+8}px`
+                objStyle1.left = (obj1.width/2-6)+'px'
+                break;
+              case 'bottom-start':
+                objStyle.left = `0px`
+                objStyle.top =`${height+8}px`
+                objStyle1.left = `8px`
+                break;
+
+              case 'bottom-end':
+                objStyle.right = `0px`
+                objStyle.top =`${height+8}px`
+                objStyle1.right = `8px`
+                break;
+
+              case 'right':
+                objStyle.left = `${width+8}px`
+                if(obj1.height>height){
+                  objStyle.top =`-${(obj1.height - height)/2}px`
+                }else{
+                  objStyle.top =`${Math.abs((obj1.height - height)/2)}px`
+                }
+
+                objStyle1.top = `${obj1.height/2-6}px`
+                break;
+              case 'right-start':
+                objStyle.left = `${width+8}px`
+                objStyle.top =`0px`
+                objStyle1.top = `8px`
+                break;
+
+              case 'right-end':
+                objStyle.left = `${width+8}px`
+                objStyle.bottom =`0px`
+                objStyle1.bottom = `8px`
+                break;
+
+              case 'left':
+                objStyle.right = `${width+8}px`
+
+                if(obj1.height>height){
+                  objStyle.top =`-${(obj1.height - height)/2}px`
+                }else{
+                  objStyle.top =`${Math.abs((obj1.height - height)/2)}px`
+                }
+
+                objStyle1.top = `${obj1.height/2-6}px`
+                break;
+
+              case 'left-start':
+                objStyle.right = `${width+8}px`
+                objStyle.top =`0px`
+                objStyle1.top = `8px`
+                break;
+
+              case 'left-end':
+                objStyle.right = `${width+8}px`
+                objStyle.bottom =`0px`
+                objStyle1.bottom = `8px`
+                break;
+            }
+            this.style = objStyle
+            // 三角形箭头
+            this.arrowStyle = objStyle1
+            resolve()
+          }).exec()
+        })
+
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	$theme-bg-color: var(--theme-bg-color);
+
+	.zb-tooltip{
+		position: relative;
+
+	}
+	.zb_tooltip_content{
+		height: 100%;
+		/* float: left; */
+		position: relative;
+		display: inline-block;
+
+		// display: flex;
+		// flex-direction: row;
+		// align-items: center;
+		/* overflow: hidden; */
+	}
+	.zb_tooltip__popper{
+		/* transform-origin: center top; */
+		background: $theme-bg-color;
+
+		visibility: hidden;
+		// color:'#fff';
+		position: absolute;
+		    border-radius: 4px;
+			font-size: 12px;
+			padding: 10px;
+			min-width: 10px;
+			word-wrap: break-word;
+			display: inline-block;
+			white-space: nowrap;
+			z-index:9;
+	}
+	.zb_popper__icon{
+		width: 0;
+		height: 0;
+		z-index:9;
+		position: absolute;
+	}
+	.zb_popper__arrow{
+		bottom: -5px;
+		left:2px;
+		/* transform-origin: center top; */
+		border-left: 6px solid transparent;
+		    border-right: 6px solid transparent;
+		    border-top: 6px solid $theme-bg-color;
+
+	}
+	.zb_popper__right{
+		border-top: 6px solid transparent;
+		    border-bottom: 6px solid transparent;
+		    border-right: 6px solid $theme-bg-color;
+			left:-5px;
+	}
+
+	.zb_popper__left{
+		border-top: 6px solid transparent;
+		border-bottom: 6px solid transparent;
+		border-left: 6px solid $theme-bg-color;
+		right:-5px;
+	}
+
+	.zb_popper__up{
+		border-left: 6px solid transparent;
+		    border-right: 6px solid transparent;
+		    border-bottom: 6px solid $theme-bg-color;
+			top:-5px;
+	}
+	.fixed{
+		position: absolute;width: 100vw;
+		height:  100vh;
+		position: fixed;
+		left: 0;
+		top: 0;
+	pointer-events: auto;
+		background: red;
+		z-index:-1;
+	}
+</style>

uni_applet/uni_modules/zb-tooltip/readme.md

@@ -0,0 +1,30 @@
+## 介绍
+基于uni-app开发的一个普通的提示组件，功能点击提示
+
+
+## 友情链接
+#### vue-admin-perfect —— [企业级、通用型中后台前端解决方案 预览地址](http://182.61.5.190:8889/)
+#### vue-admin-perfect —— [企业级、通用型中后台前端解决方案（基于vue3.0+TS+Element-Plus  最新版，同时支持电脑，手机，平板)](https://github.com/zouzhibin/vue-admin-perfect)
+
+
+## Tooltip 属性
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------ | ------ | ------ | ------ | ------ |
+| visible | 是否显示 tooltip，支持 .sync 修饰符 | Boolean |visible.sync | false |
+| content | 显示的内容，也可以通过 slot#content | String |-- | ' ' |
+| color | 自定义主题颜色| String |'#303133' | '#303133' |
+| placement | Tooltip 的出现位置 | String |top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | top |
+
+
+## Slot 插槽
+| 参数 | 说明 |
+| ------ | ------ |
+| content | 显示提示框得内容 |
+
+
+```
+因为uniapp 中小程序中没有window对象，需手动调用 关闭
+ 第一种办法关闭：this.$refs.tooltip.close()
+ 第二种办法关闭：visible.sync = false
+
+```