浏览代码

feat:分组页面选人弹窗

zhanghui 2 年之前
父节点
当前提交
cc309edd6f

+ 59 - 2
pages/addGroup/addGroup.vue

@@ -18,7 +18,7 @@
 					<u-form-item prop="userInfo.sex" borderBottom>
 						<view class="item">
 							<text class="key">负责人</text>
-							<view class="flex-row input">
+							<view class="flex-row input" @click="openSelectPerson">
 								<u--input disabled placeholder="请选择负责人" border="none"></u--input>
 								<u-icon name="arrow-right"></u-icon>
 							</view>
@@ -28,7 +28,7 @@
 					<u-form-item prop="userInfo.sex" borderBottom>
 						<view class="item">
 							<text class="key">分组成员</text>
-							<view class="flex-row input">
+							<view class="flex-row input" @click="openSelectMember">
 								<u--input disabled placeholder="请选择分组成员" border="none"></u--input>
 								<u-icon name="arrow-right"></u-icon>
 							</view>
@@ -59,6 +59,52 @@
 		<view class="addGroup">
 			<text>提交</text>
 		</view>
+
+		<uni-popup ref="selectMemberPopup" type="bottom">
+			<view class="selectMemberPopup">
+				<view class="flex-row justify-around popupTitle">
+					<text @click="closePopup('selectMemberPopup')">取消</text>
+					<text>选择分组负责人</text>
+					<text>确定</text>
+				</view>
+				<view class="scroll-y-view">
+					<scroll-view scroll-y class="scroll-y1" >
+						<view class="flex-row justify-between member" v-for="item in 10">
+							<view class="flex-row">
+								<text class="name">张三</text>
+								<text class="name">1736500000</text>
+							</view>
+							<u-icon name="checkbox-mark" color="#FFE05C" size="24"></u-icon>
+						</view>
+					</scroll-view>
+				</view>
+
+			</view>
+		</uni-popup>
+
+		<uni-popup ref="selectPersonPopup" type="bottom">
+			<view class="selectMemberPopup">
+				<view class="flex-row justify-around popupTitle">
+					<text @click="closePopup('selectPersonPopup')">取消</text>
+					<text>选择分组负责人</text>
+					<text>确定</text>
+				</view>
+				<view class="scroll-y-view">
+					<scroll-view scroll-y class="scroll-y1" >
+						<view class="flex-row justify-between member" v-for="item in 10">
+							<view class="flex-row">
+								<text class="name">张三</text>
+								<text class="name">1736500000</text>
+							</view>
+							<u-icon name="checkbox-mark" color="#FFE05C" size="24"></u-icon>
+						</view>
+					</scroll-view>
+				</view>
+
+			</view>
+		</uni-popup>
+
+
 	</view>
 </template>
 
@@ -87,6 +133,17 @@
 		},
 		methods: {
 
+			openSelectMember(){
+				this.$refs.selectMemberPopup.open()
+			},
+
+			openSelectPerson(){
+				this.$refs.selectPersonPopup.open()
+			},
+			closePopup(name){
+				this.$refs[name].close()
+			}
+
 		}
 	}
 </script>

+ 12 - 0
pages/addGroup/index.rpx.css

@@ -57,3 +57,15 @@
 	line-height: 40rpx;
 	margin-left: 20rpx;
 }
+.selectMemberPopup{
+	height: 800rpx;
+	background: #FFFFFF;
+	border-top-left-radius: 24rpx;
+	border-top-right-radius: 24rpx;
+}
+.popupTitle{
+	line-height: 100rpx;
+}
+.scroll-y1{
+	height: 650rpx;
+}

+ 6 - 0
uni_modules/uni-popup/changelog.md

@@ -1,3 +1,9 @@
+## 1.8.8(2024-02-20)
+- 修复 uni-popup 在微信小程序下出现文字向上闪动的bug
+## 1.8.7(2024-02-02)
+- 新增 uni-popup-dialog 新增属性focus:input模式下,是否自动自动聚焦
+## 1.8.6(2024-01-30)
+- 新增 uni-popup-dialog 新增属性maxLength:限制输入框字数
 ## 1.8.5(2024-01-26)
 - 新增 uni-popup-dialog 新增属性showClose:控制关闭按钮的显示
 ## 1.8.4(2023-11-15)

+ 33 - 19
uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue

@@ -10,7 +10,8 @@
 		</view>
 		<view v-else class="uni-dialog-content">
 			<slot>
-				<input class="uni-dialog-input" v-model="val" :type="inputType" :placeholder="placeholderText" :focus="focus" >
+				<input class="uni-dialog-input" :maxlength="maxlength" v-model="val" :type="inputType"
+					:placeholder="placeholderText" :focus="focus">
 			</slot>
 		</view>
 		<view class="uni-dialog-button-group">
@@ -28,16 +29,19 @@
 <script>
 	import popup from '../uni-popup/popup.js'
 	import {
-	initVueI18n
+		initVueI18n
 	} from '@dcloudio/uni-i18n'
 	import messages from '../uni-popup/i18n/index.js'
-	const {	t } = initVueI18n(messages)
+	const {
+		t
+	} = initVueI18n(messages)
 	/**
 	 * PopUp 弹出层-对话框样式
 	 * @description 弹出层-对话框样式
 	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
 	 * @property {String} value input 模式下的默认值
 	 * @property {String} placeholder input 模式下输入提示
+	 * @property {Boolean} focus input模式下是否自动聚焦,默认为true
 	 * @property {String} type = [success|warning|info|error] 主题样式
 	 *  @value success 成功
 	 * 	@value warning 提示
@@ -49,6 +53,7 @@
 	 * @showClose {Boolean} 是否显示关闭按钮
 	 * @property {String} content 对话框内容
 	 * @property {Boolean} beforeClose 是否拦截取消事件
+	 * @property {Number} maxlength 输入
 	 * @event {Function} confirm 点击确认按钮触发
 	 * @event {Function} close 点击取消按钮触发
 	 */
@@ -56,13 +61,13 @@
 	export default {
 		name: "uniPopupDialog",
 		mixins: [popup],
-		emits:['confirm','close'],
+		emits: ['confirm', 'close'],
 		props: {
-			inputType:{
+			inputType: {
 				type: String,
 				default: 'text'
 			},
-			showClose:{
+			showClose: {
 				type: Boolean,
 				default: true
 			},
@@ -94,19 +99,26 @@
 				type: Boolean,
 				default: false
 			},
-			cancelText:{
+			cancelText: {
 				type: String,
 				default: ''
 			},
-			confirmText:{
+			confirmText: {
 				type: String,
 				default: ''
+			},
+			maxlength: {
+				type: Number,
+				default: -1,
+			},
+			focus:{
+				type: Boolean,
+				default: true,
 			}
 		},
 		data() {
 			return {
 				dialogType: 'error',
-				focus: false,
 				val: ""
 			}
 		},
@@ -134,7 +146,11 @@
 				}
 			},
 			value(val) {
-				this.val = val
+				if (this.maxlength != -1 && this.mode === 'input') {
+					this.val = val.slice(0, this.maxlength);
+				} else {
+					this.val = val
+				}
 			}
 		},
 		created() {
@@ -148,20 +164,18 @@
 				this.dialogType = this.type
 			}
 		},
-		mounted() {
-			this.focus = true
-		},
 		methods: {
 			/**
 			 * 点击确认按钮
 			 */
 			onOk() {
-				if (this.mode === 'input'){
+				if (this.mode === 'input') {
 					this.$emit('confirm', this.val)
-				}else{
+				} else {
 					this.$emit('confirm')
 				}
-				if(this.beforeClose) return
+				this.$emit("input",this.val);
+				if (this.beforeClose) return
 				this.popup.close()
 			},
 			/**
@@ -169,17 +183,17 @@
 			 */
 			closeDialog() {
 				this.$emit('close')
-				if(this.beforeClose) return
+				if (this.beforeClose) return
 				this.popup.close()
 			},
-			close(){
+			close() {
 				this.popup.close()
 			}
 		}
 	}
 </script>
 
-<style lang="scss" >
+<style lang="scss">
 	.uni-popup-dialog {
 		width: 300px;
 		border-radius: 11px;

+ 1 - 1
uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue

@@ -47,7 +47,7 @@
 					{
 						text: '支付宝',
 						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
-						name: 'wx'
+						name: 'ali'
 					},
 					{
 						text: 'QQ',

+ 7 - 1
uni_modules/uni-popup/components/uni-popup/uni-popup.vue

@@ -359,7 +359,13 @@
 			 */
 			center(type) {
 				this.popupstyle = 'center'
-				this.ani = ['zoom-out', 'fade']
+				//微信小程序下,组合动画会出现文字向上闪动问题,再此做特殊处理
+				// #ifdef MP-WEIXIN
+					this.ani = ['fade']
+				// #endif
+				// #ifndef MP-WEIXIN
+					this.ani = ['zoom-out', 'fade']
+				// #endif
 				this.transClass = {
 					position: 'fixed',
 					/* #ifndef APP-NVUE */

+ 1 - 1
uni_modules/uni-popup/package.json

@@ -1,7 +1,7 @@
 {
 	"id": "uni-popup",
 	"displayName": "uni-popup 弹出层",
-	"version": "1.8.5",
+	"version": "1.8.8",
 	"description": " Popup 组件,提供常用的弹层",
 	"keywords": [
         "uni-ui",