修改页面邮费规则

自定义弹框

<!-- 点击事件显示弹框 --><text class="flex-five position-re" wx:if="{{brand==1}}"  bindtap="toDetail">精选自营运费<text class="postage" bindtap="toDetail">i</text><text class="mar-left">:</text></text><text class="flex-five position-re" wx:elif="{{brand==2}}"  bindtap="toDetail">品牌专区运费<text class="postage" bindtap="toDetail">i</text><text class="mar-left">:</text></text><text class="flex-five  position-re" wx:else="{{brand==3}}" bindtap="toDetail"> 运费 <text class="postage" bindtap="toDetail">i</text><text class="mar-left">:</text></text>
<!-- 运费弹框 -->
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{dialogShow}}"></view>
<view class="modal-dialog" wx:if="{{dialogShow}}"><view class="modal-content"><view class="modal-title">运费规则</view>
<view>1.精选自营商品免运费。</view>
<view>2.品牌专区商品订单总支付金额低于69元收取15元运费；订单总支付金额高于等于69元且低于109元，收取10元运费；订单总支付金额高于等于109元，免运费。</view>
<view>3.精选自营商品和品牌专区商品合并订单支付的运费规则依据第2条。</view></view><view class="modal-footer"><view class="btn-confirm" bindtap="handleDialogTap">知道了</view></view>
</view>


/* 运费弹框 */
.modal-mask {width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000;opacity: 0.5;overflow: hidden;z-index: 9000;color: #fff;
}
.modal-dialog {width: 540rpx;overflow: hidden;position: fixed;top: 50%;left: 50%;z-index: 9999;background: #f9f9f9;transform: translate(-50%, -70%);border-radius: 20rpx;
}
.modal-title {font-size: 32rpx;line-height: 50rpx;color: #030303;text-align: center;width: 100%;font-weight: 600;margin-bottom: 10rpx;
}
.modal-content {padding: 40rpx 30rpx;text-align: left;color: #333333;font-size: 24rpx;
}.modal-footer {display: flex;flex-direction: row;height: 86rpx;border-top: 1px solid #dedede;font-size: 30rpx;line-height: 86rpx;
}.btn-confirm {width: 100%;color: #6AC8D6;text-align: center;
}

  // 运费弹出框 解释运费详情toDetail() {// console.log(111);this.setData({dialogShow: true})},hideModal(){this.setData({dialogShow: false})},handleDialogTap(e) {this.setData({dialogShow: false})},

订单详情的金额合计需要修改(后端没改，之后再改)

自定义微信小程序弹框相关推荐

微信小程序弹框禁止下面的页面滚动
一句话搞定: catchtouchmove="true" <view class="mark" wx:if='{{show}}' catchtouchmo ...
微信小程序弹框组件封装
popup组件,居中和底部弹起 1.popup.wxml <view class="popup-common fade-in-linear-enter-active {{ flag ? ...
微信小程序提示框提示
微信小程序提示框很常见,有的项目弹出提示选择关闭的时候需要不再弹出,清理缓存的时候才弹出. var s = wx.getStorageSync('sh')if (s == '') {// s= tru ...
微信小程序-气泡框 Popover
写在前面记录基于微信小程序-气泡框实现中产生的问题及思考问题截图问题描述模拟器显示正常,但在真机上点击后,气泡框的箭头并没有消失,且点击同一级别区域,能利用覆盖消除箭头.[是不是一个很可爱的b ...
微信小程序选择框问题小程序picker点击显示object range-key=这里写要显示的字段
微信小程序选择框问题小程序picker点击显示object range-key="这里写要显示的字段" <picker bindchange="bindClass ...
微信小程序input框中加入小图标的实现方法
最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: ...
mpvue自定义微信小程序indicator（指示点）样式
mpvue自定义微信小程序indicator(指示点)样式效果图 HTML <template><div class="container"><sw ...
html打开微信搜索页,微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)...
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面搜索 .search{ width: 80%; } .search_arr { border: 1px solid # ...
封装微信小程序提示框
下面是封装好的封装微信小程序提示框,以便在开发过程中能快速使用,并且可以减少代码量. var showBusy = function(o) { return wx.showToast({ ...
微信小程序提示框使用，wx.showToast
微信小程序提示框使用 1.wx.showToast在官方文档的位置 2.使用代码模板 wx.showToast({title: '价格不能等于0',icon: 'success',duration: ...

自定义微信小程序弹框

文章目录

修改页面邮费规则

自定义弹框

订单详情的金额合计需要修改(后端没改，之后再改)

自定义微信小程序弹框相关推荐

最新文章

热门文章