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"