<view class="top-nav"> <view class="top-nav-bar"> <view class="{{current == 0 ? 'active' : ''}}" catchtap="switchSlider" data-index="0">全部</view> <view class="{{current == 1 ? 'active' : ''}}" catchtap="switchSlider" data-index="1">待付款</view> <view class="{{current == 2 ? 'active' : ''}}" catchtap="switchSlider" data-index="2">待发货</view> <view class="{{current == 3 ? 'active' : ''}}" catchtap="switchSlider" data-index="3">待收货</view> <view class="{{current == 4 ? 'active' : ''}}" catchtap="switchSlider" data-index="4">待评价</view> </view> </view> <view class="container" class="ma-top-120"> <view class="carts"> <view class="weui-pull"> <view class="weui-pull__tips"> <icon type="loading" class="weui-pull__loading"></icon> <!--<text>下拉刷新</text>--> </view> <view class=" weui-panel__access" bindchange="changeSlider" style="display:{{current == 0 ? 'block' : 'none'}}"> <view class="weui-panel__bd"> <!--<view class="padding-wrap" wx:for="{{orderlist}}"> <view class="weui-media-box weui-media-box_appmsg content-color"> <view class="weui-media-box__hd_in-appmsg " > <block wx:for="{{item.goods}}" wx:for-item="itemlist"> <image src="{{itemlist.spec_key}}" alt class="weui-media-box__thumb carts-image"></image> <text class="weui-media-box__desc">{{itemlist.goods_name}}</text> </block> </view> <view class="weui-media-box__bd_in-appmsg" > <view class=""> <text class="carts-price origin">123</text> <text class="carts-price total">{{item.goods_price}}</text> </view> <view class="operate"> <text class="operate-item pay">立即支付</text> <text class="operate-item cancel">取消订单</text> </view> </view> </view> </view>--> <view class="padding-wrap" wx:for="{{orderlist}}"> <view class="weui-media-box weui-media-box_appmsg content-color" wx:for="{{item.goods}}" wx:for-item="itemlist" > <view class="weui-media-box__hd_in-appmsg"> <image src="{{itemlist.spec_key}}" alt class="weui-media-box__thumb carts-image"></image> </view> <view class="weui-media-box__bd_in-appmsg"> <text class="weui-media-box__desc">{{itemlist.goods_name}}</text> <view class=""> <text class="carts-price origin">{{itemlist.goods_num}}*{{itemlist.goods_price}}</text> <text class="carts-price total">¥{{itemlist.goods_num*itemlist.goods_price}}</text> </view> </view> </view> <view class="operate"> <text class="all-total">总价:¥{{item.goods_price}}</text> <text class="operate-item pay" bindtap="payorder" data-id="{{item.order_sn}}">立即支付</text> <text class="operate-item cancel" bindtap="delorder" data-id="{{item.id}}">取消订单</text> </view> </view> </view> </view> </view> </view> <view style="display:{{current == 1 ? 'block' : 'none'}}"> <view>这里是待付款</view> </view> <view style="display:{{current == 2 ? 'block' : 'none'}}"> <view>这里是待发货</view> </view> <view style="display:{{current == 3 ? 'block' : 'none'}}"> <view>这里是待收货</view> </view> <view style="display:{{current == 4 ? 'block' : 'none'}}"> <view>这里是待评价</view> </view> </view> |
page { background: #f6f6f6; } .weui-pull { transition: all 0.3s; transform: translate3d(0px, -40px, 0px); } .weui-pull__tips { text-align: center; font-size: 12px; padding: 10px; color: #888; } .weui-pull_loading { width: 16px; height: 16px; display: inline-block; vertical-align: -4px; -webkit-animation: loadingAnimation 1s steps(12) infinite; animation: loadingAnimation 1s steps(12) infinite; background: transparent url() no-repeat; background-size: 100%; } .weui-tab__panel { padding-top: 0; padding-bottom: 50px; } .bg_color { background-color: #f0eff5; } .padding-wrap { padding: 10px 15px; background: #fff; margin-bottom: 20rpx; } .items-container { border: 1px solid #ccc; border-radius: 5px; } .weui-media-box:before { border-top: 0; } .wx-checkbox-input { border-radius: 50% !important; } .content-color{ background-color: #fff; } /*左部图片*/ .carts-image { width: 120rpx; height: 120rpx; display: block; /*border-radius: 5px;*/ margin-right: 10px; } /*右上部分标题*/ .carts-title { margin: 10rpx; font-size: 30rpx; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /*价格*/ .carts-price { display: inline-block; width: 50%; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } /* 单价 */ .origin{ font-size: 14px; } /*总价*/ .total { color: #6cf; text-align: right; } /*顶部导航栏*/ .top-nav { width: 750rpx; position: fixed; top: 0; z-index: 1; } .top-nav-bar { display: flex; justify-content: space-around; font-size: 13px; padding: 10px 0; background-color: #fff; border-top: 1px solid #e5e5e5; } .top-nav-bar .active { /*border-bottom: 2px solid #09bb07;*/ border-bottom: 2px solid #b6aaec; } .ma-top-120 { margin-top: 120rpx; } .operate { text-align: right; border-top: 1px solid #f0f0f0; padding-top: 10rpx; } .operate .operate-item { font-size: 12px; color: #fff; padding: 14rpx 18rpx; background-color: #b6aaec; border-radius: 5px; } .operate .pay { margin-right: 30rpx; } .order_img{ display: flex; flex-direction: column } .total{ color: red; } .all-total{ font-size: 14px; color: red; margin-right:100rpx; } |
//获取应用实例 var uctooPay = require('../../utils/uctoo-pay.js') var app = getApp() Page({ data: { current: 0, orderlist:[] }, onLoad:function(){ var that=this var login=wx.getStorageSync('login') wx.request({ url: `${app.globalData.API_URL}`+'/order', data: { id:login.mid }, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT // header: {}, // 设置请求的 header success: function(res){ // success console.log(res) that.setData({ orderlist:res.data }) }, fail: function() { // fail }, complete: function() { // complete } }) }, payorder:function(e){ var orderid=e.target.dataset.id; wx.setStorageSync('orderid', orderid) uctooPay.generateOrder(); }, switchSlider: function (e) { this.setData({ current: e.target.dataset.index }) }, changeSlider: function (e) { this.setData({ current: e.detail.current }) }, delorder:function(e){ wx.showToast({ title: '正在取消订单,请稍候...', icon: 'loading', duration: 10000 }) var that=this console.log(e.target.dataset.id) wx.request({ url: `${app.globalData.API_URL}`+'/order/'+e.target.dataset.id, method: 'DELETE', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT // header: {}, // 设置请求的 header success: function(res){ if(res.data==1){ that.onLoad() wx.hideToast() } }, fail: function() { // fail }, complete: function() { // complete } }) } }) |
模板简介:该模板名称为【微信小程序我的订单详细列表样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。