uniapp弹出输入对话框（选择框和加减框）

展示图例：

上述功能弹出框是以组件的开发方式，引入到父页面的。在弹出框进行操作后，回调父组件的方法进行动作操作。

一、父页面代码

<template>
	<view class="content">
		<view class="box">
			<view class="display-flex-row-center  relative-navigation"></view>
			<table stripe emptyText="暂无更多数据" class="table-style" :dateShowStatus="dateShowStatus"  :buttonSendParam="buttonSendParam">
				<!-- 表头行 -->
				<tr>
					<th v-for="(headline,index) in this.thead" align="center" :style="(headline.fieldname=='完整住宅地址'?'width: 28%;':'width: auto	;')" >
						<view align="left" class="title-style">{{headline.fieldname}}</view>
					</th>
				</tr>
				<!-- 表格数据行 -->

				<tr v-for="(dataList,index) in this.dataLists">
					<td align="center" >
						<a href="javascript:void(0)" @click="localCust(dataList)">{{ dataList.name?dataList.name:dataList.custname  }}</a>
					</td>
					<td align="center" class="ell">{{dataList.mobile}}</uni-td>
					<td v-if="dataList.last_STOP_REPORTING_DATE" align="center" >
						<view @click="onClickShow(dataList)">{{dataList.last_STOP_REPORTING_DATE}}</view>
					</td>
					<td v-if="dataList.fees" align="center">{{dataList.fees}}</uni-td>
					<td v-if="dataList.whladdr && dateShowStatus.WHLADDR " align="center" class="ell">
						{{dataList.whladdr}}
					</td>

					<td align="center">
						<!-- 这里到时需要获取数据的状态根据状态更改icon图标的相关路径   点击图标触发弹出框事件 -->
						<image v-if="dataList.status =='0' || dataList.status == '1' " @click="onClickShow(dataList)"
							class="img-stytle" src="/static/icon_warning_wait.png" />
						<image v-if="dataList.status =='2'" @click="onClickShow(dataList)" class="img-stytle"
							src="/static/icon_warning_finish.png" />
					</td>
					<td>
						<view class="query-btn" @click="buttonPush(dataList,buttonSendParam)">{{ '推送' }}</view>
					</td>
				</tr>

			</table>
		</view>

		<!-- 弹出框模块 -->
		<treatmentState ref='customModal' :dataLineDetail="dataLineDetail" :modalTitle="modalTitle"
			@onClickConfirm="onClickConfirm"></treatmentState>


	</view>
</template>

<script>
	import uniPopup from 'components/uni-popup/uni-popup.vue';
	import uniPopupDialog from 'components/uni-popup/uni-popup-dialog.vue';

	// 引入自定义弹出框组件
	import treatmentState from './treatmentState.vue';
	
	export default {
		data() {
			return {
			};
		},
		onLoad(parms) {
			this.openPageParameter = parms;
			// 动态更改标题
			uni.setNavigationBarTitle({
				title: this.openPageParameter.showTitle != null ? this.openPageParameter.showTitle : '更多'
			});
			
		},
		components: {
			uniPopup,
			uniPopupDialog,
			treatmentState,  // 引入相关自定义弹出框组件
		},
		beforeCreate() {},
		created() {
			this.initData();
		},//标题栏点击
		onNavigationBarButtonTap: function(obj) {
			if (obj.index == 0 && window.baseAppJs) {
				window.baseAppJs.back();
			}
		},
		methods: {

			// 根据自己项目，在某个事件触发弹框弹出,注意！！！$refs后面直接跟[],不需要.
			onClickShow(data) {
				this.dataLineDetail = data;
				// this.$refs['showWeight'].open()
				// 调用弹出框组件里的显示方法
				this.$refs['customModal'].showModal();
			},
			// 点击确定按钮，弹出框隐藏 
			onClickConfirm(data) {
				let stateData = JSON.parse(data)
				let conditionsParameter = this.openPageParameter.conditions;
				console.log("stateData==="+JSON.stringify(this.openPageParameter))
				// 调用更新状态的接口
				this.$http.post(this.$apis.changeEarlyWarnLos, {
					tableName: '',
					custid: stateData.custid, // 获取客户id
					areaid: '',
					remark: stateData.remark, // 获取备注
					phoneNums: stateData.phoneNums, // 打电话次数
					status: stateData.status, // 更新状态
				}).then(resp => {
					let code = resp.returnInfo.code;
					console.log(resp.responseBody)
				}).catch(error => {
					this.$util.feeback.showToast({
						title: '更新业务状态失败！'
					});
				});
				// 回调组件里的隐藏方法
				this.$refs['customModal'].hideModal();
			},
		}
	}
</script>




<style>

	.title-style {
		font-size: 28rpx;
		color: #989EA4;
	}
	.content {
		border-radius: 20rpx;
		width: 94vw;
		margin: 0 auto;
		background-color: #FFFFFF;
	}

	.relative-navigation {
		margin: 20rpx;
		font-weight: bold;
		position: relative;
		padding-top: 10rpx;
	}

	.img-stytle {
		padding-right: 10rpx;
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	} 

	
	
	table {
		table-layout: fixed !important;
		width: 100% !important;
		border-collapse: collapse;
		border: none;
		font-size: 0.23rem;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}
	
	td,
	th {
		width: 1px;
		white-space: nowrap;
		/* 自适应宽度*/
		word-break: keep-all;
		/* 避免长单词截断，保持全部 */
		/* border:solid #676767 1px; */
		text-align: center;
		white-space: pre-line;
		word-break: break-all !important;
		word-wrap: break-word !important;
		display: table-cell;
		vertical-align: middle !important;
		white-space: normal !important;
		height: auto;
		vertical-align: text-top;
		/* padding: 2px 2px 0 2px; */
		display: table-cell;
	}
	
	.title-style {
		font-size: 30rpx;
		color: #989EA4;
		text-align: center;
		margin: 18rpx 0rpx;
	}
	
	
	.box {
		border-radius: 20rpx;
		width: 94vw;
		margin: 30rpx auto;
		/* background-color: #FFFFFF; */
	
	}
	
	
	
	.user-headline {
		position: relative;
		height: 50rpx;
		padding-bottom: 10rpx;
	}
	
	.userName {
		position: absolute;
		right: 10rpx;
		color: #3688FF;
		margin-left: 20rpx;
	}
	
	.navigation-row-colour {
		height: 0.5rpx;
		background-color: #ebeef5;
		border: solid #ebeef5 0.5rpx;
	}
	
	.ell{
		text-align: left;
	}
	
	.content {
		border-radius: 20rpx;
		width: 94vw;
		margin: 0 auto;
		background-color: #FFFFFF;
	}
	
	.title-row-colour {
		background-color: #FFFFFF;
	}
	
	tr:nth-child(odd) {
		background: #FFFFFF;
	}
	
	tr:nth-child(even) {
		background: #F6F6F6;
	}
	
	.query-btn{
		/* padding: 10rpx 20rpx; */
		background: #0084FF;
		border-radius: 10rpx;
		color: #FFFFFF;
		margin: 0px 10px;
	}
</style>

二、子组件弹出框页面代码（treatmentState.Vue）

<template>
	<uni-popup ref="customModal" type="center">
		<view class="model-wraper">
			<view class="modal-title" v-if="modalTitle !== ''">
				{{modalTitle}}
			</view>
			<view class=" relative-navigation">
				<view class="left-title style-font">处理状态</view>
				<view class="right-title" @click="disposeDet(dataLineDetail)">处理详细></view>
			</view>
			<view class="statu-frame">
				<view v-bind:class='{selectColor:1==isactive}' @click='selectStatus(1)'>
					<!-- <icon class="img-stytle" size="15" :type="iconType[0]" /> -->
					<image class="img-stytle" src="/static/zhuhaiIcon/icon_warning_wait.png" />
					待处理
				</view>
				<view v-bind:class='{selectColor:2==isactive}' @click='selectStatus(2)'>
					<!-- <icon class="img-stytle" size="15" :type="iconType[1]" /> -->
					<image class="img-stytle" src="/static/zhuhaiIcon/icon_warning_finish.png" />
					已完成
				</view>
				<view v-bind:class='{selectColor:0==isactive}' @click='selectStatus(0)'>
					<!-- <icon class="img-stytle" size="15" :type="iconType[2]" /> -->
					<image class="img-stytle" src="/static/zhuhaiIcon/icon_warning_undisposed.png" />
					未处理
				</view>
			</view>

			<view class="phone-line">
				<view class="phone-title style-font">打电话次数</view>
				<view class="numberBtn">
					<view @click="reduce" class="countBtn reduceBtn"> － </view>
					<!-- <view>
						<input type="number" v-model="total" @input="countVal" />
					</view> -->
					<view type="number" v-model="total" class="sumTotal">{{total}}</view>
					<view @click="add" class="countBtn addBtn"> + </view>
				</view>
			</view>
			<view class="modal-body">
				<view class="style-font">备注内容</view>
				<!-- <input v-model="inputSerialNum" class="uni-input input-style" focus placeholder="请输入备注" /> -->
				<textarea rows="4" v-model="inputRemark" class=" input-style" placeholder="请输入备注"></textarea>
			</view>

			<view>
				<view class="btn cancel" :style="{'color': cancelTextColor}" @click="handleCancel">{{cancelText}}</view>
				<view class="btn confirm" :style="{'color': confirmTextColor}" @click="handleConfirm">{{confirmText}}
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {

		props: {
			// 获取行数据
			dataLineDetail:{
				type: Object,
				default: ''
			},
			// 蒙层背景色
			bgColor: {
				type: String,
				default: 'rgba(0,0,0,.6)'
			},
			// 模态框标题
			modalTitle: {
				type: String,
				default: ''
			},
			// 取消按钮文字
			cancelText: {
				type: String,
				default: '取消'
			},
			// 确定按钮文字
			confirmText: {
				type: String,
				default: '确定'
			},
			// 取消按钮文字颜色
			cancelTextColor: {
				type: String,
				default: '#666'
			},
			// 确定按钮文字颜色
			confirmTextColor: {
				type: String,
				default: '#5999FF'
			}
		},
		data() {
			return {
				isShowModal: false,
				inputRemark: null,
				isactive: 0,
				total: 0,
				iconType: ['waiting', 'success', 'cancel'],
				
			}
		},
		methods: {
			// 跳转到处理明细表
			disposeDet(val){
				console.log("获取到打电话="+val.mobile)
				this.$rauter.navigateTo({
					url:'disposeDetail',
					data:{
						'disposeDetail':JSON.stringify(val)
					}
				});
			},
			// 减
			reduce() {
				if (this.total <= 0) {
					uni.showToast({
						title: '打电话次数不能小于0',
						icon: 'none'
					})
					return;
				}
				this.total = this.total - 1;
			},
			// 加
			add() {
				console.log(this.total)
				this.total = this.total + 1;
			},
			// 数值检测
			/* countVal(e){
				this.total = e.detail.value;
				if(this.total == 0){
					this.total == 1;
				}
			}, */
			// 选择更新的状态
			selectStatus(data) {
				//状态  0未处理 1待处理 2已完成  3全部
				
				this.isactive = data;
				console.log(this.isactive+"打印选择的状态=" + data)
			},
			hideModal() {
				// this.isShowModal = true
				this.$refs['customModal'].close();
			},
			showModal() {
				// this.isShowModal = true
				this.$refs['customModal'].open();
			},
			handleCancel() {
				// this.isShowModal = false
				this.$refs['customModal'].close();
				this.$emit('onClickCancel', 'cancel')
			},
			getTime() {
			
				var date = new Date(),
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '' + month + '' + day ;
				return timer;
			},
			handleConfirm() {
				
				this.$set(this.dataLineDetail,'remark',this.inputRemark);
				this.$set(this.dataLineDetail,'status',this.isactive );
				this.$set(this.dataLineDetail,'phoneNums',this.total);
				this.$set(this.dataLineDetail,'time',this.getTime());
				
				// this.isShowModal = false
				this.$emit('onClickConfirm',JSON.stringify(this.dataLineDetail))
				//this.$refs['customModal'].close();
			}
		}
	}
</script>

<style scoped>
	.model-wraper {
		width: 600rpx;
		background-color: #fff;
		border-radius: 16rpx;
		position: absolute;
		z-index: 1000;
		top: 50%;
		left: 50%;
		margin-top: -300rpx;
		margin-left: -300rpx;
		box-shadow: #dcdcdc 0px 0px 20rpx;
	}

	.modal-title {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		color: #666;
	}

	.modal-body {
		/* padding: 30rpx 30rpx 80rpx 30rpx; */
		margin:10rpx 30rpx;
	}

	.btn {
		width: 300rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		float: left;
		border-top: 1rpx solid #ddd;
	}

	.btn.cancel {
		width: 299rpx;
		border-right: 1rpx solid #dcdcdc;
	}


	/* -----自定义----- */
	.relative-navigation {
		margin:0rpx 30rpx ;
		/* font-weight: bold; */
		position: relative;
		/* padding-top: 10rpx; */
		height: 50rpx;
	}

	.left-title {
		position: absolute;
		/* left: 10rpx; */
	}

	.right-title {
		position: absolute;
		right: 5%;
		color: #10AEFF;
	}

	.statu-frame {
		border: 1rpx solid #ddd;
		margin: 0rpx 30rpx;
		border-radius: 10rpx;

	}

	.statu-frame view {
		width: 100%;
		text-align: center;
		/* display: flex;
		justify-content: center */
			/* display: block; */
	}

	.selectColor {
		background-color: #4C91F0;
		color: #ffffff;
	}

	.input-style {
		border: 1rpx solid #ddd;
		border-radius: 10rpx;
		/* height: 100rpx; */
		height: 200rpx;
		padding: 10rpx;
		font-size: 30rpx;
		width: auto;
	}

	.phone-line {
		/* border: 1rpx solid #ddd;
		border-radius: 10rpx; */
		margin: 20rpx 30rpx;
		height: 60rpx;
		line-height: 90rpx;
		width: auto;
		text-align: center;
		font-size: 32rpx;
		color: #666;
		position: relative;
	}

	.phone-title {
		position: absolute;
		/* left: 10rpx; */
	}

	.numberBtn {
		position: absolute;
		right: 25%;
		width: auto;
		/* border: 1rpx solid #ddd; */
		/* border-radius: 20rpx; */
	}

	.numberBtn  view {
		/* border: 1rpx solid #ddd; */
		float: left;
		/* width: 80rpx; */
	}

	.countBtn {
		color: #10AEFF;
		
		
	}

	.reduceBtn {
		border-radius: 10rpx 0rpx 0rpx 10rpx;
		width: 60rpx;
		border: 1rpx solid #ddd;
		border-right: none;
	}

	.addBtn {
		border-radius: 0rpx 10rpx 10rpx 0rpx;
		width: 60rpx;
		border: 1rpx solid #ddd;
		border-left: none;
	}
	.sumTotal{
		border: 1rpx solid #ddd;
		width: 100rpx;
	}

	

	.style-font {
		color: #A1AAA9;
		font-size: 28rpx;
	}
	
	.img-stytle {
		padding-right: 10rpx;
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}
</style>

可参考描述：https://blog.csdn.net/qq_25430563/article/details/108382901?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link