微信小程序订餐类红色订单支付页面样式模板制作设计下载 立即下载
首页 > 小程序教程 > 微信小程序订餐类红色订单支付页面样式模板制作设计下载

微信小程序订餐类红色订单支付页面样式模板制作设计下载

上一篇 下一篇
制作好以后效果图如下：
一、wxml页面代码如下：
<view class="nopay_header">
    <view class="mb30 flex orderInfo">
        <view>订单:<text class="ml10">80225155656</text></view>
        <view>金额:<text class="color_red ml10">201.00元</text></view>
    </view>
    <view>
        <view class="">倒计时:<text class="ml10" id="timeCounter">00:30:00</text></view>
    </view>
</view>

<view class="ma_beizhu cl">
	<text class="z">备注：</text>
    <input class="ma_beizhu_txt z" type="text" placeholder="请输入你对菜品的要求" />
</view>

<scroll-view class="cart-list ma_pay_list" scroll-y="true" scroll-x="false">
    <view class="sub-cart-list">
        <view class="sub-cart-img">
            <view class="sub-cart-img-inner">
                <image src="/images/food.jpg"></image>
            </view>
        </view>
        <view class="sub-cart-middle w4">
            <view class="sub-cart-title">
                <view>挪威深海三文鱼</view>
                <view class="fs20 tr">x1</view>
                <view class="tr fs20">￥181.00</view>
            </view>
        </view>
    </view>
    <view class="sub-cart-list">
        <view class="sub-cart-img">
            <view class="sub-cart-img-inner">
                <image src="/images/food.jpg"></image>
            </view>
        </view>
        <view class="sub-cart-middle w4">
            <view class="sub-cart-title">
                <view>挪威深海三文鱼</view>
                <view class="fs20 tr">x1</view>
                <view class="tr fs20">￥181.00</view>
            </view>
        </view>
    </view>
    <view class="sub-cart-list">
        <view class="sub-cart-img">
            <view class="sub-cart-img-inner">
                <image src="/images/food.jpg"></image>
            </view>
        </view>
        <view class="sub-cart-middle w4">
            <view class="sub-cart-title">
                <view>挪威深海三文鱼</view>
                <view class="fs20 tr">x1</view>
                <view class="tr fs20">￥181.00</view>
            </view>
        </view>
    </view>
    <view class="sub-cart-list">
        <view class="sub-cart-img">
            <view class="sub-cart-img-inner">
                <image src="/images/food.jpg"></image>
            </view>
        </view>
        <view class="sub-cart-middle w4">
            <view class="sub-cart-title">
                <view>挪威深海三文鱼</view>
                <view class="fs20 tr">x1</view>
                <view class="tr fs20">￥181.00</view>
            </view>
        </view>
    </view>
    <view class="sub-cart-list">
        <view class="sub-cart-img">
            <view class="sub-cart-img-inner">
                <image src="/images/food.jpg"></image>
            </view>
        </view>
        <view class="sub-cart-middle w4">
            <view class="sub-cart-title">
                <view>挪威深海三文鱼</view>
                <view class="fs20 tr">x1</view>
                <view class="tr fs20">￥181.00</view>
            </view>
        </view>
    </view>
    <view class="sub-cart-list">
        <view class="sub-cart-img">
            <view class="sub-cart-img-inner">
                <image src="/images/food.jpg"></image>
            </view>
        </view>
        <view class="sub-cart-middle w4">
            <view class="sub-cart-title">
                <view>挪威深海三文鱼</view>
                <view class="fs20 tr">x1</view>
                <view class="tr fs20">￥181.00</view>
            </view>
        </view>
    </view>
</scroll-view>

<view class="ma_pay_btn">
	<button type="default">微信支付</button>
</view>
 
二、wxss样式文件代码如下：
.sub-cart-list {
  height: 190rpx;
  width: 100%;
  position: relative;
  border-bottom: 1px solid #9aa6c3;
  overflow: hidden;
}

.sub-cart-img {
  float: left;
  margin-left: 60rpx;
}

.sub-cart-middle {
  float: left;
  width: 400rpx;
}

.sub-cart-title {
  margin: 40rpx 0 40rpx 25rpx;
  color: #2f3649;
}

.sub-cart-title span {
  font-size: 28rpx;
  font-weight: bold;
  margin-right: 26rpx;
}

.sub-cart-num {
  margin-left: 25rpx;
  display: flex;
  flex-direction: row;
  height: 50rpx;
  line-height: 50rpx;
  width: 340rpx;
}

.num {
  width: 92rpx;
  display: inline-block;
  text-align: center;
}

.cart-del {
  position: absolute;
  top: 50%;
  right: 28rpx;
  margin-top: -31rpx;
}

.sub-cart-img image {
  width: 226rpx;
  height: 152rpx;
  vertical-align: middle;
}

.sub-cart-img-inner {
  height: 190rpx;
  width: 226rpx;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.cart-del image {
  width: 62rpx;
  height: 62rpx;
}

.plus, .add {
  display: inline-block;
  width: 48rpx;
  height: 48rpx;
}

.plus image, .add image {
  width: 44rpx;
  height: 44rpx;
  vertical-align: top;
}

.fs20 {
  font-size: 26rpx;
}

.cart_total {
  background: rgba(53, 59, 76, 0.8);
  width: 100%;
  height: 170rpx;
  position: fixed;
  left: 0;
  bottom: 97rpx;
}

.total {
  color: #fff;
  font-size: 30rpx;
}

.ml10 {
  margin-left: 10rpx;
}

.settle {
  width: 180rpx;
  height: 50rpx;
  text-align: center;
  color: #fff;
  font-weight: bold;
  border-radius: 40rpx;
  -webkit-border-radius: 40rpx;
  float: right;
  background-color: #de3120;
  font-size: 30rpx;
  line-height: 50rpx;
}

.cart_total_inner {
  width: 90%;
  margin: 50rpx auto 0;
}

.cart-num {
  display: inline-block;
  width: 44rpx;
  height: 44rpx;
  color: #000;
  text-align: center;
  line-height: 44rpx;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  font-size: 24rpx;
  background-color: #fff;
  position: absolute;
  top: -10rpx;
  right: -10rpx;
}

.z {
  float: left;
}

.y {
  float: right;
}

.tr {
  text-align: right;
}

.psr {
  position: relative;
}

.nopay_header {
  padding: 27rpx 50rpx;
  border-bottom: 10rpx solid #edeff1;
  font-size: 36rpx;
}

.mb30 {
  margin-bottom: 30rpx;
}

.nopay_header .mb30 {
  margin-bottom: 17rpx;
}

.orderInfo {
  flex-direction: row;
  justify-content: space-between;
}

.color_red {
  color: #de3120;
}

.ma_beizhu {
  font-size: 30rpx;
  height: 80rpx;
  border-bottom: 10rpx solid #edeff1;
}

.ma_beizhu text {
  width: 98rpx;
  padding-left: 50rpx;
  line-height: 87rpx;
}

.ma_beizhu_txt {
  width: 602rpx;
  height: 47rpx;
  border: 0;
  background: #fff;
  font-size: 30rpx;
  line-height: 47rpx;
  position: relative;
  top: 20rpx;
}

.ma_pay_btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 149rpx;
  padding: 31rpx 71rpx 0 71rpx;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}

.ma_pay_btn button {
  display: block;
  width: 100%;
  height: 86rpx;
  line-height: 86rpx;
  background: #de3120;
  border: 0;
  font-size: 30rpx;
  color: #fff;
  border-radius: 86rpx;
}

.ma_pay_list {
  height: 800rpx;
  width: 100%;
}
三、js页面代码如下：
// pages/nopay/nopay.js
Page({
  data:{},
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

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

相关搜索
立即下载
  • 下载密码 lanrenmb
  • 下载次数 20,943次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 05-31
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信素材 html5 响应式 微信图片 微信文章 自适应 微信模板 微信公众平台 企业网站 单页式简历模板
您可能会喜欢的其他模板
我如何删除一个特定的项目从一个数组?
我如何删除一个特定的项目从一个数组?
01-18 651
立即下载
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
为什么随机字符串在 HTML 中作为背景颜色输入时会产生颜色
01-10 741
立即下载
微信小程序新湘会会员问题发布页面设计制作开发教程
微信小程序新湘会会员问题发布页面设计制作开发教程
08-02 11,978
立即下载
微信小程序金忠食品个人页面设计制作开发教程
微信小程序金忠食品个人页面设计制作开发教程
08-02 10,331
立即下载
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
微信小程序PEM心理健康管理测试结果页面设计制作开发教程
09-02 16,818
立即下载
微信小程序购物会场个人中心页面设计制作开发教程
微信小程序购物会场个人中心页面设计制作开发教程
09-02 24,560
立即下载
懒人模板 关于我们| 在线投稿| 广告合作| 免责声明| 联系我们
备案号：鄂ICP备19006660号-6 鄂公网安备42011302000988号 懒人模板-Copyright © 2023 版权所有