Bladeren bron

订单列表更多按钮样式错乱处理

@dongkboy 1 maand geleden
bovenliggende
commit
1292b33043
3 gewijzigde bestanden met toevoegingen van 176 en 160 verwijderingen
  1. 166 153
      components/uni-Popup/uni-Popup.vue
  2. 7 4
      components/uni-cloudPopup/uni-cloudPopup.vue
  3. 3 3
      config/baseUrl.js

+ 166 - 153
components/uni-Popup/uni-Popup.vue

@@ -1,23 +1,23 @@
 <template>
 	<view class='uni-page'>
 		<u-popup :show="modelshow" @close="close" :closeable="closeable" round="20rpx" :bgColor="bgColor" :mode="mode"
-			:closeOnClickOverlay="closeOnClickOverlay" :customStyle="{width:width}">
+			:closeOnClickOverlay="closeOnClickOverlay" :customStyle="{ width: width }">
 			<view class="">
-				<view class="header header-padding dis a-c j-c" v-if="!headerSlot" :class="{borderBottom:border}"
+				<view class="header header-padding dis a-c j-c" v-if="!headerSlot" :class="{ borderBottom: border }"
 					:style="headerStyle">
-					<text>{{headerTitle}}</text>
+					<text>{{ headerTitle }}</text>
 				</view>
-				<view v-else class="header-padding " :class="{borderBottom:border}">
+				<view v-else class="header-padding " :class="{ borderBottom: border }">
 					<slot name="header"></slot>
 				</view>
-				<view class="content" :style="{overflow:overflow,maxHeight:maxHeight}">
-					<slot name="content" v-if="contentType!='status'">
+				<view class="content" :style="{ overflow: overflow, maxHeight: maxHeight }">
+					<slot name="content" v-if="contentType != 'status'">
 					</slot>
 					<view class="quickOptions dis f-c" v-else>
 						<view class=" dis a-c j-s f-wrap">
-							<view class="tab dis  a-c j-c " :class="{tabactive:OptionsTabIndex==item.value}"
-								v-for="(item,index) in statusList" :key="index" @click="OptionsTabSelect(item,index)">
-								<text>{{item.label }}</text>
+							<view class="tab dis  a-c j-c " :class="{ tabactive: OptionsTabIndex == item.value }"
+								v-for="(item, index) in statusList" :key="index" @click="OptionsTabSelect(item, index)">
+								<text>{{ item.label }}</text>
 							</view>
 						</view>
 						<view class="custom-footer 	dis j-s a-c ">
@@ -31,170 +31,183 @@
 	</view>
 </template>
 <script>
-	export default {
-		props: {
-			// 状态数据
-			statusList: {
-				type: Array,
-				default: () => []
-			},
-			// 当前激活标签
-			show: {
-				type: Boolean,
-				default: false
-			},
-			//头部插槽
-			headerSlot: {
-				type: Boolean,
-				default: false,
-			},
-			headerTitle: {
-				//头部标题
-				type: String,
-				default: '请选择',
-			},
-			bgColor: {
-				type: String,
-				default: '#FFF'
-			},
-			overflow: {
-				//是否局部滚动
-				type: String,
-				default: '',
-			},
-			//最大高度
-			maxHeight: {
-				type: String,
-				default: ''
-			},
-			border: {
-				//是否边框
-				type: Boolean,
-				default: true,
-			},
-			headerStyle: Object,
-			closeable: {
-				//是否显示右上角叉号
-				type: Boolean,
-				default: true,
-			},
-			//弹出方向
-			mode: {
-				type: String,
-				default: 'bottom' //top / right / bottom / center
-			},
-			//弹窗宽度
-			width: {
-				type: String,
-				default: '100%'
-			},
-			//插槽内容类型
-			contentType: {
-				type: String,
-				default: 'list' //list :列表选择 / custom :自定义 / status :状态筛选 /
-			},
-			//点击遮罩是否关闭弹窗 
-			closeOnClickOverlay: {
-				type: Boolean,
-				default: true,
-			}
+export default {
+	props: {
+		// 状态数据
+		statusList: {
+			type: Array,
+			default: () => []
 		},
-		data() {
-			return {
-				modelshow: this.show,
-				OptionsTabIndex: null, //切换下标
-			}
+		// 当前激活标签
+		show: {
+			type: Boolean,
+			default: false
 		},
-		onShow() {
-
+		//头部插槽
+		headerSlot: {
+			type: Boolean,
+			default: false,
+		},
+		headerTitle: {
+			//头部标题
+			type: String,
+			default: '请选择',
+		},
+		bgColor: {
+			type: String,
+			default: '#FFF'
+		},
+		overflow: {
+			//是否局部滚动
+			type: String,
+			default: '',
+		},
+		//最大高度
+		maxHeight: {
+			type: String,
+			default: ''
+		},
+		border: {
+			//是否边框
+			type: Boolean,
+			default: true,
+		},
+		headerStyle: Object,
+		closeable: {
+			//是否显示右上角叉号
+			type: Boolean,
+			default: true,
+		},
+		//弹出方向
+		mode: {
+			type: String,
+			default: 'bottom' //top / right / bottom / center
 		},
-		onLoad() {
+		//弹窗宽度
+		width: {
+			type: String,
+			default: '100%'
+		},
+		//插槽内容类型
+		contentType: {
+			type: String,
+			default: 'list' //list :列表选择 / custom :自定义 / status :状态筛选 /
+		},
+		//点击遮罩是否关闭弹窗 
+		closeOnClickOverlay: {
+			type: Boolean,
+			default: true,
+		}
+	},
+	data() {
+		return {
+			modelshow: this.show,
+			OptionsTabIndex: null, //切换下标
+		}
+	},
+	onShow() {
 
+	},
+	onLoad() {
+
+	},
+	watch: {
+		show(newVal) {
+			this.modelshow = newVal
+		}
+	},
+	methods: {
+		//状态切换回调
+		statusConfirm() {
+			this.$emit('statusConfirm', this.OptionsTabIndex)
 		},
-		watch: {
-			show(newVal) {
-				this.modelshow = newVal
-			}
+		//状态切换
+		OptionsTabSelect(item, index) {
+			console.log(item);
+			this.OptionsTabIndex = item.value;
 		},
-		methods: {
-			//状态切换回调
-			statusConfirm() {
-				this.$emit('statusConfirm', this.OptionsTabIndex)
-			},
-			//状态切换
-			OptionsTabSelect(item, index) {
-				console.log(item);
-				this.OptionsTabIndex = item.value;
-			},
-			//关闭事件
-			close() {
-				this.$emit('close')
-			}
+		//关闭事件
+		close() {
+			this.$emit('close')
 		}
 	}
+}
 </script>
 <style lang='scss' scoped>
-	.header {
-		color: #333;
-		font-size: 32rpx;
-		font-weight: bold;
-	}
+.header {
+	color: #333;
+	font-size: 32rpx;
+	font-weight: bold;
+}
 
-	.header-padding {
-		padding: 27rpx 30rpx;
-	}
+.header-padding {
+	padding: 27rpx 30rpx;
+}
 
-	.borderBottom {
-		border-bottom: 1px solid #EEEEEE;
-	}
+.borderBottom {
+	border-bottom: 1px solid #EEEEEE;
+}
 
-	.quickOptions {
-		padding: 42rpx 42rpx 0;
-		box-sizing: border-box;
-		margin-bottom: 20rpx;
+.quickOptions {
+	padding: 42rpx 42rpx 0;
+	box-sizing: border-box;
+	margin-bottom: 20rpx;
 
 
-		.tab {
-			width: 180rpx;
-			padding: 9rpx 24rpx;
-			box-sizing: border-box;
-			font-size: 30rpx;
-			color: #666;
-			border-radius: 4rpx 4rpx 4rpx 4rpx;
-			border: 1rpx solid #EEEEEE;
-			margin-right: 30rpx;
-			margin-bottom: 30rpx;
-		}
+	.tab {
+		width: 180rpx;
+		padding: 9rpx 24rpx;
+		box-sizing: border-box;
+		font-size: 30rpx;
+		color: #666;
+		border-radius: 4rpx 4rpx 4rpx 4rpx;
+		border: 1rpx solid #EEEEEE;
+		margin-right: 30rpx;
+		margin-bottom: 30rpx;
+	}
 
-		.tabactive {
-			background: #FDE935;
-			color: #333;
-			border: 1rpx solid #FDE935;
-		}
+	.tabactive {
+		background: #FDE935;
+		color: #333;
+		border: 1rpx solid #FDE935;
 	}
+}
 
-	.custom-footer {
-		padding: 40rpx 0 0;
-		box-sizing: border-box;
+.custom-footer {
+	padding: 40rpx 0 0;
+	box-sizing: border-box;
 
-		view {
-			font-size: 30rpx;
-			padding: 20rpx;
-			flex: 1;
-		}
+	view {
+		font-size: 30rpx;
+		padding: 20rpx;
+		flex: 1;
+	}
 
-		view:first-child {
-			color: #333;
-			background: transparent;
-			border-radius: 50rpx;
-			border: 1rpx solid #FDE935;
-			margin-right: 28rpx;
-		}
+	view:first-child {
+		color: #333;
+		background: transparent;
+		border-radius: 50rpx;
+		border: 1rpx solid #FDE935;
+		margin-right: 28rpx;
+	}
 
-		view:last-child {
-			background: #FDE935;
-			border-radius: 50rpx;
-			color: #1F1F1F;
-		}
+	view:last-child {
+		background: #FDE935;
+		border-radius: 50rpx;
+		color: #1F1F1F;
 	}
+}
+
+::v-deep .u-transition.u-fade-enter-to,
+::v-deep .u-transition.u-fade-enter-active,
+::v-deep .u-transition.u-fade-leave-to,
+::v-deep .u-transition.u-fade-leave-active {
+  z-index: 99999 !important;
+}
+::v-deep .u-transition {
+  z-index: 99999 !important;
+}
+::v-deep .u-popup {
+  z-index: 100000 !important;
+}
 </style>

+ 7 - 4
components/uni-cloudPopup/uni-cloudPopup.vue

@@ -26,10 +26,9 @@
 					</view>
 					<view class="u-tooltip__wrapper__popup__list">
 						<block v-for="(item , index) in buttons" :key="index">
-							<view class="u-tooltip__wrapper__popup__list__btn"
+							<view class="u-tooltip__wrapper__popup__list__btn" @tap.stop="btnClickHandler(item)"
 								hover-class="u-tooltip__wrapper__popup__list__btn--hover">
-								<text class="u-tooltip__wrapper__popup__list__btn__text"
-									@tap.stop="btnClickHandler(item)">{{ item }}</text>
+								<text class="u-tooltip__wrapper__popup__list__btn__text">{{ item }}</text>
 							</view>
 						</block>
 					</view>
@@ -77,7 +76,7 @@
 				textId: uni.$u.guid(),
 				tooltipId: uni.$u.guid(),
 				// 初始时甚至为很大的值,让其移到屏幕外面,为了计算元素的尺寸
-				tooltipTop: -10000,
+				tooltipTop: 0,
 				// 气泡的位置信息
 				tooltipInfo: {
 					width: 0,
@@ -208,6 +207,10 @@
 </script>
 
 <style lang="scss" scoped>
+	uni-text {
+		white-space: unset;
+	}
+
 	.u-tooltip {
 		position: relative;
 		@include flex;

+ 3 - 3
config/baseUrl.js

@@ -12,18 +12,18 @@ if (process.env.NODE_ENV === 'development') {
 	h5BaseUrl = "https://tennat.baoxianzhanggui.com/test_h5";
 	// baseUrl = "https://pre.baoxianzhanggui.com/web-api"; //预生产
 	// h5BaseUrl = "https://pre.baoxianzhanggui.com/h5";
-	// baseUrl = "https://tennat.baoxianzhanggui.com/api/"; //生产
+	// baseUrl = "https://tennat.baoxianzhanggui.com/api"; //生产
 	// h5BaseUrl = "https://sxzgkj.baoxianzhanggui.com/h5";//生产
 	// socketUrl = "wss://sxzgkj.baoxianzhanggui.com/web-api/websocket";
 	// socketUrl = "ws://192.168.0.52:8080/websocket";
 	TIANDITU_KEY = '136ae3986cd93fd603e0daef17911014';
 } else if (process.env.NODE_ENV === 'production') {
 	// 生产环境
-	baseUrl = "https://tennat.baoxianzhanggui.com/test_api"; //测试
+	// baseUrl = "https://tennat.baoxianzhanggui.com/test_api"; //测试
 	h5BaseUrl = "https://tennat.baoxianzhanggui.com/test_h5";
 	// baseUrl = "https://pre.baoxianzhanggui.com/web-api"; //预生产
 	// h5BaseUrl = "https://pre.baoxianzhanggui.com/h5";
-	// baseUrl = "https://sxzgkj.baoxianzhanggui.com/web-api"; //生产
+	baseUrl = "https://tennat.baoxianzhanggui.com/api"; //生产
 	// h5BaseUrl = "https://sxzgkj.baoxianzhanggui.com/h5";
 	// socketUrl = "wss://sxzgkj.baoxianzhanggui.com/web-api/websocket";
 	TIANDITU_KEY = '136ae3986cd93fd603e0daef17911014';