uniapp弹出输入对话框（选择框和加减框）
展示图例：上述功能弹出框是以组件的开发方式，引入到父页面的。在弹出框进行操作后，回调父组件的方法进行动作操作。一、父页面代码<template><view class="content"><view class="box"><view class="display-flex-row-centerrelative-navigation"></vi
·
展示图例：
上述功能弹出框是以组件的开发方式，引入到父页面的。在弹出框进行操作后，回调父组件的方法进行动作操作。
一、父页面代码
<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
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
7
0- 0
已为社区贡献6条内容
所有评论(0)