<view class="container"> <view class="weui-cells__title header">欢迎订餐<text>{{userName}}</text><text wx:if="{{userSex==1}}" style="margin-left: 0px">先生</text><text style="margin-left: 0px" wx:if="{{userSex==2}}">女士</text></view> <view class="weui-cells weui-cells_after-title add__message"> <view class="weui-cell"> <view class="weui-cell__bd">送餐地址与时间</view> <view class="weui-cell__ft" catchtap="toMap">更改</view> </view> </view> <view class="weui-cells weui-cells_after-title"> <view class="weui-cell" bindtap="addressCheck"> <view class="weui-cell__bd f14" style="font-size: 14px;padding-right: 5px;">{{address[0]}}</view> <view class="weui-cell__ft" checked="{{item.checked}}"> <icon class="weui-icon-checkbox_circle" type="circle" size="23" hidden="{{isConfirm}}"></icon> <image src="../../../image/confirm.png" style="height: 26px; width: 26px; vertical-align: middle;" hidden="{{!isConfirm}}"></image> </view> </view> </view> <view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">错误提示</view> <view class="weui-cells__title">选择送餐时间</view> <view class="weui-cells weui-cells_after-title"> <radio-group bindchange="radioChange"> <label class="weui-cell weui-check__label" wx:for="{{radioItems}}" wx:key="value"> <radio class="weui-check" value="{{item.value}}" checked="{{item.checked}}"/> <view class="weui-cell__ft weui-cell__ft_in-radio" > <icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{{!item.checked}}"></icon> <image src="../../../image/confirm.png" style="height: 26px; width: 26px; vertical-align: middle; margin-right: 10px" wx:if="{{item.checked}}"></image> </view> <view class="weui-cell__bd" style="font-size: 14px">{{item.name}}</view> </label> </radio-group> <button class="weui-btn" type="primary" catchtap="toMenu"> 进入菜单 </button> <view class="tips"> <text class="title">提示:</text> <text class="desc" wx:if="{{checkedNum==0}}">无法取消订单的噢~</text> <text class="desc" wx:if="{{checkedNum==1}}">根据当天实际时间完成的支付时间,您指定的订单可能顺延,下单后无法取消</text> <text class="desc" wx:if="{{checkedNum==2}}">隔天价格可能会随价格、特价活动浮动</text> </view> </view> </view> |
.header { margin: 0; padding: 10px; background-color: #f2f2f2; font-size: 12px; } .header text { margin-left: 10px; } .f14 { font-style: 14px; opacity: .7; } .container .add__message::after { display: none; } button[type="primary"] { width: 90%; background-color: #ba3337; } button[type="primary"]:hover { background-color: #ba3337; } .add__message .weui-cell { font-size: 14px; } .add__message .weui-cell .weui-cell__ft { font-weight: 450; color: #ba3337; } .add__message .weui-cell .weui-cell__bd { font-size: 16px; font-weight: 350; color: #999999; } .tips { display: flex; flex-direction: row; padding: 10px; } .tips .title { flex: 1; font-size: 14px; color: #ba3337; margin-right: 5px; } .tips .desc { padding-left: 5px; flex: 9; color: #999999; font-size: 10px; } .weui-check__label:before { display: none; } |
Page({ data: { radioItems: [ { name: '成功提交订单后40分钟送达', value: '0', checked: true }, { name: '预约当天时间稍晚送餐', value: '1' }, { name: '隔天送餐', value: '2' } ], address: [], isConfirm: true, checkedNum: 0, userName: '', userSex: '' }, onReady: function (e) { let that = this; wx.getStorage({ key: 'OrderAddress', success: function (res) { console.log(res.data); that.setData({ address: res.data.address }) } }); }, onLoad: function (e) { let that = this wx.getUserInfo({ success: function (res) { let userInfo = res.userInfo let nickName = userInfo.nickName let avatarUrl = userInfo.avatarUrl let gender = userInfo.gender //性别 0:未知、1:男、2:女 let province = userInfo.province let city = userInfo.city let country = userInfo.country // console.log(nickName) that.setData({ userName: nickName, userSex: gender }) } }) }, radioChange: function (e) { console.log('radio发生change事件,携带value值为:', e.detail.value); var radioItems = this.data.radioItems; for (var i = 0, len = radioItems.length; i < len; ++i) { radioItems[i].checked = radioItems[i].value == e.detail.value; } this.setData({ checkedNum: e.detail.value, radioItems: radioItems }); }, checkboxChange: function (e) { console.log('checkbox发生change事件,携带value值为:', e.detail.value); var checkboxItems = this.data.checkboxItems, values = e.detail.value; for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) { checkboxItems[i].checked = false; for (var j = 0, lenJ = values.length; j < lenJ; ++j) { if (checkboxItems[i].value == values[j]) { checkboxItems[i].checked = true; break; } } } this.setData({ checkboxItems: checkboxItems }); }, addressCheck: function () { let is_confirm = !this.data.isConfirm; this.setData({ isConfirm: is_confirm }) }, toMap: function () { wx.navigateBack() }, toMenu: function () { let orderway = this.data.radioItems[this.data.checkedNum].name wx.setStorage({ key: "OrderWay", data: orderway }); if (this.data.isConfirm) { wx.navigateTo({ url: '/pages/menu/menu' }) } else { // wx.showModal({ content: '地址还没填写噢', showCancel: false, success: function (res) { if (res.confirm) { console.log('用户点击确定') } } }); } } }); |
模板简介:该模板名称为【微信小程序肯德基送餐时间选择页面设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。