微信小程序弹框

最新推荐文章于 2024-08-15 23:03:45 发布

不承认自己菜的菜鸡前端

最新推荐文章于 2024-08-15 23:03:45 发布

阅读量199

点赞数 1

分类专栏：组件文章标签：小程序

本文链接：https://blog.csdn.net/qq_44144735/article/details/105640779

版权

组件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

微信小程序弹框

结合了部分业务需求，需要进行修改

wxml

<!-- 底部弹框外壳 -->
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>

<!-- 弹出框内容 -->
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
    <view class="cancel_title" hover-class="none" hover-stop-propagation="false">
        <view class="cancel" selectable="false" space="false" decode="false" bindtap="hideModal">
            取消
        </view>
        <view class="title" selectable="false" space="false" decode="false">取消原因</view>
        <view class="ok" selectable="false" space="false" decode="false" bindtap="confirmCancel">确定</view>
    </view>
    <view class="content" hover-class="none" hover-stop-propagation="false">
        <view class="intro" wx:if="{{payFlag}}">取消订单后将关闭订单并与三个工作日内退回订单金额（优惠券和积分支付部分不退还）
			<text wx:if="{{videoCancel}}">一个月可取消预约5次，超过5次，当月将不能进行视频问诊。</text>
		</view>
        <view class="section section_gap">
            <radio-group class="radio-group" bindchange="radioChange">
                <radio class="radio" color="#3885FF" wx:for-items="{{cancelItems}}" wx:key="name" value="{{item.value}}" checked="{{item.checked}}">
                    <text>{{item.name}}</text>
                </radio>
            </radio-group>
        </view>
        <view class="section">
            <textarea placeholder="请输入其他原因" placeholder-style="color:#BBBBBB;font-size:28rpx" style="font-size:28rpx;height:240rpx;border:1px solid #ddd;width:90%;border-radius:10rpx;padding:30rpx" value="{{areaText}}" bindinput="bindKeyInput" />
        </view>
    </view>
</view>

css

.commodity_screen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.2;
    overflow: hidden;
    z-index: 1000;
    color: #fff;
}
/*对话框 */
.commodity_attr_box {
    height: 88%;
    width: 100%;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2000;
    background: #fff;
    border-radius:30rpx 30rpx 0rpx 0rpx;
    .cancel_title{
        display: flex;
        font-size: 28rpx;
        height: 88rpx;
        justify-content: space-between;
        align-items: center;
        background: #F5F5F5;
        padding: 0 30rpx;
        .cancel{
            color: #8E8E8E;
        }
        .ok{
            color: #3885FF;
        }
        .cancel_title{
            color: #333333;
            font-weight: bold;
        }
    }
    .content{
        padding: 30rpx;
        .intro{
            color: #8E8E8E;
            font-size: 26rpx;
        }
        .radio{
            display: block;
            padding: 20rpx 0;
            font-size:28rpx;
            color: #333;
        }
    }
}

js

点击取消订单时触发cancel函数

cancel: function(e: any) {
		const index = e.currentTarget.dataset.index;
		const me: any = this;
		// 显示遮罩层
		var animation = wx.createAnimation({
			duration: 200,
			timingFunction: "linear",
			delay: 0
		})
		me.animation = animation;
		animation.translateY(800).step({});
		this.setData!({
			showCancel: true,
			currIndex: index,
			animationData: animation.export(),
			showModalStatus: true,
			payFlag:me.data.list[index].inquiryPrice>0 && me.data.list[index].status!=0
		});
		setTimeout(function () {
			animation.translateY(0).step({})
			me.setData!({
				animationData: animation.export()
			})
		}.bind(me), 200)
		if (me.data.list[me.data.currIndex].inquiryId == 2) {
			me.setData({ videoCancel: true });
		} else {
			me.setData({ videoCancel: false });
		}
	},
	```