首页 > 小程序教程 > 微信小程序肯德基送餐时间选择页面设计制作开发教程

微信小程序肯德基送餐时间选择页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序肯德基送餐时间选择页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<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>
 
二、wxss样式文件代码如下:
.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;
}
三、js页面代码如下:
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('用户点击确定')
          }
        }
      });
    }

  }
});

模板简介:该模板名称为【微信小程序肯德基送餐时间选择页面设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 21,198次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 08-02
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信图片 微信模板 微信文章 微信公众平台 html5 响应式 单页式简历模板 企业网站 自适应 微信素材
您可能会喜欢的其他模板