confirm.wxml代码如下
<template name="wxConfirm">
<view class='confirm' wx:if="{{showConfirm}}">
<view class='confirm-content'>
<view class='confirm-top'>
<text>抹零</text>
</view>
<view class='confirm-input'>
<input type='digit' placeholder='请输入抹零金额' ></input>
</view>
<view class='confirm-bottom'>
<text catchtap='closeconfirm'>取消</text>
<text>确定</text>
</view>
</view>
</view>
</template>
.confirm{
background: rgba(0,0,0,.5);
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index:2;
}
.confirm-content{
width: 640rpx;
margin-left: -320rpx;
background-color: #fff;
position: absolute;
top:30%;
left:50%;
border-radius: 10rpx;
}
.confirm-top{
padding: 30rpx 10rpx;
}
.confirm-top text{
padding: 0 20rpx;
}
.confirm-input{
padding: 30rpx 10rpx;
}
.confirm-input input{
border:1px solid #F0F4F5;
padding: 20rpx 10rpx;
}
.confirm-bottom{
width: 100%;
display: flex;
}
.confirm-bottom text{
width: 50%;
padding: 40rpx;
text-align: center;
}
在sale.wxml引入confirm.wxml
sale.wxml代码如下
<import src="../../components/confirm/confirm.wxml"/>
<template is="wxConfirm" data="{{showConfirm:showConfirm}}"></template>
<view>
<text class='discounts-txt' bindtap='setzero'>-抹零</text>
</view>
Page({
data: {
showConfirm:false
},
/**这是sale的点击事件*/
setzero(){
let that=this;
that.setData({
showConfirm: !that.data.showConfirm
})
},
/**这是template那个取消按钮的点击事件*/
closeconfirm() {
let that = this;
that.setData({
showConfirm: !that.data.showConfirm
})
}
})