欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序商品订单支付页样式模板制作设计下载

    2018-06-17 09:39 来源/作者:懒人模板 分类:小程序教程  « »
    制作好以后效果图如下:
    一、wxml页面代码如下:
    <import src="../../templates/default-address/default-address.wxml"></import>
    <import src="../../templates/item-cell/item-cell.wxml"></import>
    
    <scroll-view scroll-y="true" class="order-detail">
      <template is="default-address" data="{{...address}}"></template>
      <view class="item-list">
        <block wx:for="{{goods}}">
          <template is="item-cell" data="{{...item}}"></template>
        </block>
      </view>
    
      <view class="item-amount">
        <view>商品总额<text>¥{{order.order_amount}}</text></view>
        <view class="colora0">+运费<text>¥{{order.shipping_price}}</text></view>
        <view>实付款(含运费)<text style="color: #ff2d4b;font-size: 35.15rpx;">¥{{order.total_amount}}</text></view>
        <view class="last-child colora0"><text>订单编号:{{order.order_sn}}</text><text>创建时间:{{order.created_at}}</text></view>
      </view>
    
      <view class="btn-line" wx:if="{{order.order_status != '订单取消'}}">
        <button hover-class="none" class="btn-solid-red btn-size" catchtap="payOrder">去支付</button>
        <button hover-class="none" class="btn-hollow-gray btn-size" catchtap="cancleOrder">取消订单</button>
      </view>
    </scroll-view>
    

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议