uniapp 微信小程序 自定义弹框+picker下拉选择列表+输入表单:拒绝-选择理由弹窗

效果:


1、template

bash 复制代码
<!-- 拒绝-选择理由弹窗-->
<view class="reason-popover" v-if="showReasonDialog">
	<view class="reason-modal">
		<view class="reason-title">
			<text>请选择拒绝理由</text>
		</view>
		<view class="reason-bd">
			<view class="select-picker">
				<picker @change="bindPickerChangeReason" :value="itemIndex" :range="listArray"
					range-key="dictLabel">
					<input class="select-input" type="text" placeholder="请选择" disabled="disabled"
						v-if="itemIndex == -1"></input>
					<view class="select-input" v-else :value="listArray[itemIndex].dictLabel">
						{{listArray[itemIndex].dictLabel}}
					</view>
				</picker>
			</view>
			<textarea placeholder="请填写理由" v-model="otherReason" class="other-reason"
				v-if="showOther"></textarea>
			<text class="tips">每月可拒绝3次,超过将进行监管</text>
		</view>
		<view class="reason-bottom-btn">
			<view class="common-btn" @click="closeReasonDialog">取消</view>
			<view class="common-btn confirm-btn" @click="toConfirm">确定</view>
		</view>
	</view>
</view>

2、data:

bash 复制代码
data() {
	return {
		// 拒绝理由
		itemIndex: -1,
		listArray: [],
		reasonName:'',//理由文本
		showReasonDialog: false, //是否显示拒绝弹框
		otherReason: '', //输入的理由
		showOther: false, //是否显示输入文本框
	}
}

3、methods:

bash 复制代码
// 点击拒绝-请求拒绝理由列表接口
toCancel: function() {
	uni.showLoading();
	var params = {
		url: "/***/***",
		method: "GET",
		data: {},
		callBack: res => {
			uni.hideLoading()
			this.listArray = res.data
			this.showReasonDialog = true //显示拒绝弹框
		}
	};
	http.request(params);
},
// 理由下拉列表
bindPickerChangeReason: function(e) {
	this.itemIndex = e.detail.value
	this.reasonIds = this.listArray[this.itemIndex].dictValue
	this.reasonName = this.listArray[this.itemIndex].dictLabel
	//当选择其他时,文本输入框显示,当选择非其他时输入框隐藏
	if (this.reasonName == "其他") {
		this.showOther = true
	}else{
		this.showOther = false 
	}
},
// 拒绝点击确定
toConfirm: function() {
	if (this.reasonName.length == 0) {
		uni.showToast({
			icon: 'none',
			title: "请选择拒绝理由",
		})
		return
	}
	//当选择其他时,如果未输入文本,则理由默认传"其他",否则就传输入的文本值
	if (this.reasonName == "其他") {
		if(!this.otherReason){
			this.reasonName = "其他"
		}else{
			this.reasonName = this.otherReason
		}
	}
	
	uni.showLoading();
	var params = {
		url: "/****/****",
		method: "PUT",
		data: {
			orderId: this.orderId,
			driverRefuseReason: this.reasonName
		},
		callBack: res => {
			uni.hideLoading()
			this.showReasonDialog = false
			uni.showModal({
				title: "拒绝成功",
				content: "",
				confirmText: "确定",
				showCancel: false,
				success: (res) => {
					if (res.confirm) {
						//拒绝成功跳转订单列表页
						uni.reLaunch({
							url: '/pages/order/order'
						})
					}
				}
			})
		}
	};
	http.request(params);
},
// 关闭弹框
closeReasonDialog() {
	this.showReasonDialog = false
},

4、style

bash 复制代码
.reason-popover {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.5);
}

.reason-popover .reason-modal {
	position: relative;
	width: 640rpx;
	/* height: 575rpx; */
	border-radius: 16rpx;
	background: #fff;
	margin: 0 auto;
	padding: 64rpx 48rpx 112rpx 48rpx;
	box-sizing: border-box;
}

.reason-popover .reason-title {
	/* width: 313rpx;
	height: 90rpx; */
	margin: 0 auto;
	font-size: 32rpx;
	/* line-height: 45rpx; */
	text-align: center;
	color: #000;
	margin-bottom: 32rpx;
}

/* .close-img {
	position: absolute;
	top: 12rpx;
	right: 12rpx;
	width: 44rpx;
	height: 44rpx;
}

.close-img image {
	width: 100%;
	height: 100%;
} */
.reason-bd{
	/* width: 420rpx; */
	width: 100%;
	/* height: 640rpx; */
	margin: 0 auto;
	margin-bottom: 64rpx;
	
	/* line-height: 36rpx; */
	
}
.reason-bd .bd-title{
	color: #3DB86D;
}
.tips{
	margin: 0 auto;
	font-size: 36rpx;
	color: #3D3D3D;
	margin-top: 64rpx;
}
.reason-bd text{
	display: block;
}
.reason-bottom-btn{
	width: 100%;
	border-top:1rpx solid #E7E7E7;
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	justify-content: space-around;
	height: 112rpx;
	line-height: 112rpx;
	text-align: center;
}
.common-btn{
	width:320rpx;
	
}
.confirm-btn {
	border-left: 1rpx solid #E7E7E7;
	color: #5b6987;
	box-sizing: border-box;
}
.other-reason{
	width: 100%;
	height: 147rpx;
	border-radius: 8rpx;
	background: #F3F3F3;
	padding: 24rpx 24rpx 27rpx 24rpx;
	box-sizing: border-box;
	color: #3D3D3D;
	font-size: 32rpx;
	margin-top:20rpx;
}
.select-input{
	width:100%;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 10rpx;
	border: 1rpx solid #BDBDBD;
	padding-left: 22rpx;
	box-sizing:border-box;
}
.select-picker{
	border: 1rpx solid #BDBDBD;
}
.select-picker .select-input{
	border:none !important
}
相关推荐
丁总学Java2 小时前
页面、组件、应用、生命周期(微信小程序)
微信小程序·小程序·生命周期
耶啵奶膘3 小时前
uniapp-是否删除
linux·前端·uni-app
断墨先生9 小时前
uniapp—android原生插件开发(3Android真机调试)
android·uni-app
guai_guai_guai11 小时前
uniapp
前端·javascript·vue.js·uni-app
李少兄12 小时前
Notepad++ 更改字体大小和颜色
notepad++·技巧
阿伟来咯~16 小时前
一些 uniapp相关bug
uni-app·bug
丁总学Java19 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
瑶琴AI前端20 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
mosen86820 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq229511650221 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车