cv弹窗,退款确认弹窗

效果

复制代码

<!-- 退款 -->
		<uni-popup ref="popup2" type="center" border-radius="24rpx">
			<view class="modalDialog">
                <view class="miniTitle">退款申请</view>
                <view class="miniWhether">
					<view class="miniWhether-box">
						
						<view class="miniWhether-box-lss">
							<view class="content-inp-text">备注</view>
							<input class="content-inp-input" type="text"
							 v-model="refundInfo.refundReason" placeholder="请填写退款原因" />
						</view>
					</view>
				</view>
                <!-- 取消确定按钮 -->
                <view class="miniBtn">
                    <button class="cancel" @tap="close">取消</button>
                    <button class="confirm" @tap="approveRefund">提交</button>
                </view>
            </view>
		 </uni-popup>

css

复制代码

.modalDialog {
    width: 80%;
    position: fixed;
    top: 22%;
    left: 50%;
    z-index: 9;
    margin-left: -40%;
    background: #f9f9f9;
    border-radius: 20rpx;
	// transform: translateY(-48rpx);
}
 
.miniTitle {
    font-size: 32rpx;
    font-weight: 600;
    color: #252525;
    padding: 24rpx 0rpx;
    border-bottom: 2rpx solid #EEEEEE;
    display: flex;
    justify-content: center;
}
 
.miniBtn {
    display: flex;
    justify-content: center;
    padding: 10px 0rpx 30rpx 0rpx;
}
.miniWhether {
		// height: 260rpx;
		height: 160rpx;
		font-size: 28rpx;
		color: #252525;
		// background-color: #096;
		 padding: 24rpx;
		.miniWhether-box {
			// margin-top: 30rpx;
			height: 92rpx;
			// line-height: 80rpx;
			border: 1rpx solid #ffffff;

			.miniWhether-box-l {
				box-sizing: border-box;
				// background-color: #555;
				line-height: 80rpx;
				padding-top: 12rpx;
				// border-bottom: 1rpx solid #ffffff;
				margin-left: 12rpx;
			}
		}

	}
	.miniWhether-box-lss{
		height: 92rpx;
		line-height: 92rpx;
		padding-top: 8rpx;
		padding-left: 10rpx;
		// line-height: 80rpx;
		border-radius: 24rpx;
		// background-color: #096;
		border: 1rpx solid #ffffff;
	}
	.content-inp-text {
		display: inline-block;
		width: 120rpx;
		height: 34rpx;
		vertical-align: 8rpx;
		margin-right: -20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		// background-color: #0000FF;
	}
	.content-inp-input {
		display: inline-block;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #ADB1BB;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;

	}
.miniBtn button {
    padding: 0rpx 100rpx;
    border-radius: 36rpx;
    font-size: 28rpx;
}
 
.miniBtn button:first-child {
    border: 2rpx solid #979797;
    color: #5e5e5e;
}
 
.miniBtn button:last-child {
    background: #FED10A;
}

打开弹窗

this.$refs.popup2.open("center");

关闭弹窗

this.$refs.popup.close()

绑定事件，监听关闭打开

@change="fun"