小程序swiper实现订单页面
小程序swiper实现订单页面
myOrder.wxml
<!--pages/myorder/myorder.wxml--><view class="swiper-tab">
<block wx:for="{{swipertab}}" wx:key="sptab">
<view class="swiper-tab-list {{currtab == item.index ? 'on' : ''}}"
data-current="{{item.index}}"
bindtap="tabSwitch">{{item.name}}</view>
</block>
</view> <swiper current="{{currtab}}" style="height:{{deviceH-31}}px" bindchange="onTabChange">
<swiper-item>
<scroll-view class="hot-box" scroll-y="true" style="height: 100%;">
<view class="container-0">
<view class="order" wx:for="{{allOrderS}}" wx:key="{{item.orderid}}" wx:for-item="order">
<view class="orderNumber">订单编号：{{order.orderid}}</view>
<view class="orderStatus">{{order.status}}</view>
<view class="orderList" wx:for="{{order.goods}}" wx:key="item.index" bindtap="orderDetailShow" data-orderid="{{order.orderid}}">
<image src='{{item.image}}'></image>
<view class='orderDetail'>
<view class='orderTitle'>{{item.title}}</view>
<view class='orderStyle'>
<view class="orderColor">{{item.properties}}</view>
<!-- <view class="orderSize">{{item.size}},</view>
<view class="orderUnit">{{item.unit}}</view> -->
</view>
</view>
<view class='orderInfor'>
<view class='orderPrice'>{{item.price}}</view>
<view class='orderNum'>{{item.number}}</view>
</view>
</view>
<view class='orderSumPri'>
共{{order.totalNumber}}件商品 合计：
<view class='orderPri'>{{order.totalPrice}}元</view>
</view>
<view class="orderHander">
<view class="orderCancel" bindtap="orderHandleOne" hidden="{{order.ifhiddenone}}">{{order.orderHandleOne}}</view>
<view class="orderConfirm" bindtap="orderHandleTwo" hidden="{{order.ifhiddentwo}}">{{order.orderHandleTwo}}</view>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view class="hot-box" scroll-y="true" style="height: 100%;">
<view class="container-1">
<view class="order" wx:for="{{waitPayOrder}}" wx:key="{{item.orderid}}" wx:for-item="order">
<view class="orderNumber">{{order.orderid}}</view>
<view class="orderStatus">{{order.status}}</view>
<view class="orderList" wx:for="{{order.goods}}" wx:key="item.index" bindtap="orderDetailShow">
<image src='{{item.image}}'></image>
<view class='orderDetail'>
<view class='orderTitle'>{{item.title}}</view>
<view class='orderStyle'>
<view class="orderColor">{{item.properties}}</view>
<!-- <view class="orderColor">{{item.color}}</view>
<view class="orderSize">{{item.size}}</view>
<view class="orderUnit">{{item.unit}}</view> -->
</view>
</view>
<view class='orderInfor'>
<view class='orderPrice'>{{item.price}}</view>
<view class='orderNum'>{{item.number}}</view>
</view>
</view>
<view class='orderSumPri'>
共{{order.totalNumber}}件商品 合计：
<view class='orderPri'>{{order.totalPrice}}元</view>
</view>
<view class="orderHander">
<view class="orderCancel" bindtap="orderHandleOne" hidden="{{order.ifhiddenone}}">{{order.orderHandleOne}}</view>
<view class="orderConfirm" bindtap="orderHandleTwo" hidden="{{order.ifhiddentwo}}">{{order.orderHandleTwo}}</view>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view class="hot-box" scroll-y="true" style="height: 100%;">
<view class="container-2">
<view class="order" wx:for="{{waitSentOrder}}" wx:key="{{item.orderid}}" wx:for-item="order">
<view class="orderNumber">{{order.orderid}}</view>
<view class="orderStatus">{{order.status}}</view>
<view class="orderList" wx:for="{{order.goods}}" wx:key="item.index" bindtap="orderDetailShow">
<image src='{{item.image}}'></image>
<view class='orderDetail'>
<view class='orderTitle'>{{item.title}}</view>
<view class='orderStyle'>
<view class="orderColor">{{item.properties}}</view>
<!-- <view class="orderColor">{{item.color}}</view>
<view class="orderSize">{{item.size}}</view>
<view class="orderUnit">{{item.unit}}</view> -->
</view>
</view>
<view class='orderInfor'>
<view class='orderPrice'>{{item.price}}</view>
<view class='orderNum'>{{item.number}}</view>
</view>
</view>
<view class='orderSumPri'>
共{{order.totalNumber}}件商品 合计：
<view class='orderPri'>{{order.totalPrice}}元</view>
</view>
<view class="orderHander">
<view class="orderCancel" bindtap="orderHandleOne" hidden="{{order.ifhiddenone}}">{{order.orderHandleOne}}</view>
<view class="orderConfirm" bindtap="orderHandleTwo" hidden="{{order.ifhiddentwo}}">{{order.orderHandleTwo}}</view>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view class="hot-box" scroll-y="true" style="height: 100%;">
<view class="container-3">
<view class="order" wx:for="{{waitReceivedOrder}}" wx:key="{{item.orderid}}" wx:for-item="order">
<view class="orderNumber">{{order.orderid}}</view>
<view class="orderStatus">{{order.status}}</view>
<view class="orderList" wx:for="{{order.goods}}" wx:key="item.index" bindtap="orderDetailShow">
<image src='{{item.image}}'></image>
<view class='orderDetail'>
<view class='orderTitle'>{{item.title}}</view>
<view class='orderStyle'>
<view class="orderColor">{{item.properties}}</view>
</view>
</view>
<view class='orderInfor'>
<view class='orderPrice'>{{item.price}}</view>
<view class='orderNum'>{{item.number}}</view>
</view>
</view>
<view class='orderSumPri'>
共{{order.totalNumber}}件商品 合计：
<view class='orderPri'>{{order.totalPrice}}元</view>
</view>
<view class="orderHander">
<view class="orderCancel" bindtap="orderHandleOne" hidden="{{order.ifhiddenone}}">{{order.orderHandleOne}}</view>
<view class="orderConfirm" bindtap="orderHandleTwo" hidden="{{order.ifhiddentwo}}">{{order.orderHandleTwo}}</view>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view class="hot-box" scroll-y="true" style="height: 100%;">
<view class="container-4">
<view class="order" wx:for="{{completeOrder}}" wx:key="{{item.orderid}}" wx:for-item="order">
<view class="orderNumber">{{order.orderid}}</view>
<view class="orderStatus">{{order.status}}</view>
<view class="orderList" wx:for="{{order.goods}}" wx:key="item.index" bindtap="orderDetailShow" data->
<image src='{{item.image}}'></image>
<view class='orderDetail'>
<view class='orderTitle'>{{item.title}}</view>
<view class='orderStyle'>
<view class="orderColor">{{item.properties}}</view>
<!-- <view class="orderColor">{{item.color}}</view>
<view class="orderSize">{{item.size}}</view>
<view class="orderUnit">{{item.unit}}</view> -->
</view>
</view>
<view class='orderInfor'>
<view class='orderPrice'>{{item.price}}</view>
<view class='orderNum'>{{item.number}}</view>
</view>
</view>
<view class='orderSumPri'>
共{{order.totalNumber}}件商品 合计：
<view class='orderPri'>{{order.totalPrice}}元</view>
</view>
<view class="orderHander">
<view class="orderCancel" bindtap="orderHandleOne" hidden="{{order.ifhiddenone}}">{{order.orderHandleOne}}</view>
<view class="orderConfirm" bindtap="orderHandleTwo" hidden="{{order.ifhiddentwo}}">{{order.orderHandleTwo}}</view>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
myOrder.js
// pages/myOrder/myOrder.js import {
ApiUrl
} from '../../utils/apiurl.js';
import {
httpReq
} from '../../utils/http.js';
Page({
/**
* 页面的初始数据
*/
data: {
currtab: 0,//当前滑块的index
swipertab: [{ name: '全部', index: 0 }, { name: '待付款', index: 1 }, { name: '待发货', index: 2 }, { name: '待收货', index: 3 }, { name: '已完成', index: 4 }],
height: 0,
allOrderS: [],//全部订单
waitPayOrder: [],//待付款订单
waitSentOrder: [],//待发货订单
waitReceivedOrder: [],//待收货订单
completeOrder: [],//已完成订单
token: '',//app.js里面拿token
vipid: '',//会员号
ifhiddenone: true,//按钮隐藏
ifhiddentwo: false //按钮隐藏
},
/**
* 请求数据
*/
getGoods: function () {
let that = this
httpReq({
header: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
//获取数据的接口，
url: ApiUrl.phplist + 'order/getorder?token=' + this.data.token + '&member_id=' + this.data.vipid,
}).then((res) => {
let lists = res.data.lists
//数据重组
let orders = []
let waitPayOrder = []
let waitSentOrder = []
let waitReceivedOrder = []
let completeOrder = []
for (let m in lists) {
let ss = {}
let goods = []
ss.orderid = lists[m].order_sn
ss.totalNumber = Number(lists[m].pay_num)
ss.totalPrice = Number(lists[m].order_amount)
if (lists[m].pay_status == '0') {
ss.status = "待付款"
ss.orderHandleOne = '取消订单'
ss.orderHandleTwo = '确认付款'
}
else if (lists[m].pay_status == '1') {
ss.status = "已取消"
ss.ifhiddenone = true,
ss.ifhiddentwo = true
}
else if (lists[m].pay_status == '2') {
ss.status = "待发货"
ss.orderHandleOne = '催TA发货'
ss.orderHandleTwo = '申请退款'
}
else if (lists[m].pay_status == '3') {
ss.status = "待收货"
ss.orderHandleOne = '申请退款'
ss.orderHandleTwo = '确认收货'
}
else {
ss.status = "已完成"
ss.orderHandleTwo = '删除订单'
ss.ifhiddenone = true
}
for (let n in lists[m].goods) {
let mm = {}
// console.log(lists[m].goods[n])
if (lists[m].goods[n].hasOwnProperty('goods_logo')) {
mm.image = lists[m].goods[n].goods_logo
}
if (lists[m].goods[n].hasOwnProperty('goods_name')) {
mm.title = lists[m].goods[n].goods_name
}
if (lists[m].goods[n].hasOwnProperty('goods_price')) {
mm.price = lists[m].goods[n].goods_price
}
if (lists[m].goods[n].hasOwnProperty('number')) {
mm.number = lists[m].goods[n].number
}
goods.push(mm)
ss.goods = goods
}
if (ss.status == "待付款") {
waitPayOrder.push(ss)
}
if (ss.status == "待发货") {
waitSentOrder.push(ss)
}
if (ss.status == "待收货") {
waitReceivedOrder.push(ss)
}
if (ss.status == "已完成") {
completeOrder.push(ss)
}
completeOrder
orders.push(ss)
}
// console.log(orders)
// console.log(that)
that.setData({
allOrderS: orders,
waitPayOrder: waitPayOrder,
waitSentOrder: waitSentOrder,
waitReceivedOrder: waitReceivedOrder,
completeOrder: completeOrder
})
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (option) {
let token = wx.getStorageSync('token')//缓存中获取数据
let vipid = wx.getStorageSync('vipid')//缓存中获取vipid
this.setData({
token: token,
vipid: vipid
})
//拿后台数据
this.getGoods()
//外部进入时默认选swiper的index为currtab,如果获取失败就默认设置为0.
if (option.currtab == null || option.currtab == '') {
option.currtab = 0
} else {
let tab = option.currtab
this.setData({
currtab: tab
})
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.getDeviceInfo()
},
/*
* 设置swiper高度，swiper本身高度限制必须重写否则里面内容过多不显示，这是swiper本身的坑。
*/
getDeviceInfo: function () {
let that = this
wx.getSystemInfo({
success: function (res) {
that.setData({
deviceW: res.windowWidth,
deviceH: res.windowHeight
})
}
})
},
/**
* @Explain：选项卡点击切换
*/
tabSwitch: function (e) {
var that = this
let tab = e.target.dataset.current
if (this.data.currtab === tab) {
return false
} else {
that.setData({
currtab: tab
})
}
},
/**
* 选项卡滑动切换页面
*/
onTabChange: function (e) {
var that = this
let tab = e.detail.current
that.setData({
currtab: tab
})
},
/**
* 点击订单进入订单详情
*/
orderDetailShow: function(e) {
// console.log(e.currentTarget.dataset.orderid)
let orderid = e.currentTarget.dataset.orderid
wx.navigateTo({
//订单详情接口
url: '../orderDetail/orderDetail?orderid=' + orderid
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
myOrder.wxss
/* pages/myorder/myorder.wxss */
.on {
color: red;
border-bottom:2px solid red;
} swiper {
height: auto;
} .swiper-tab {
width: 750rpx;
height: 80rpx;
background: #f5f7f9;
display: flex;
justify-content: space-around;
margin-top: 18rpx;
margin-bottom: 36rpx;
} .swiper-tab view {
width: 90rpx;
height: 80rpx;
font: 30rpx/76rpx "";
color: #333;
text-align: center;
} .container-0 {
box-sizing: border-box; } .container-1 {
box-sizing: border-box;
} .container-2 {
box-sizing: border-box;
}
.container-3 {
box-sizing: border-box;
} .container-4 {
box-sizing: border-box;
} .orderNumber {
float: left;
font-size: 24rpx;
padding-left: 20rpx;
padding-top: 10rpx; } .orderStatus {
float: right;
font-size: 28rpx;
padding-left: 20rpx;
padding-top: 10rpx;
padding-right: 19rpx;
color: orangered;
} .order {
box-sizing: border-box;
width: 678rpx;
background: #e6e6e6;
margin: 0 auto;
border-radius: 20rpx;
padding-bottom: 32rpx;
margin-bottom: 20rpx;
} image {
width: 150rpx;
height: 150rpx;
} .order .orderList {
clear: both;
display: flex;
flex-direction: row;
padding-top: 32rpx;
padding-left: 20rpx;
} .orderDetail {
margin-left: 21rpx;
} .orderDetail .orderTitle {
width: 260rpx;
height: 62rpx;
font: 28rpx/28rpx "";
color: #333;
} .orderDetail .orderStyle {
width: 103rpx;
height: 24rpx;
font: 24rpx/24rpx '';
color: #999;
margin-top: 17rpx;
display: flex;
flex-direction: row; } .orderInfor {
margin-left: 116rpx;
} .orderInfor .orderPrice {
width: 98rpx;
height: 19rpx;
font-size: 24rpx;
} .orderInfor .orderNum {
width: 30rpx;
height: 19rpx;
font-size: 24rpx;
color: #999;
margin-top: 26rpx;
} .orderSumPri {
width: 286rpx;
height: 20rpx;
font: 22rpx/24rpx '';
color: #999;
display: flex;
flex-direction: row;
margin-left: 385rpx;
margin-top: 10rpx;
} .orderHander {
box-sizing: border-box;
width: 100%;
display: flex;
flex-direction: row;
padding-left: 379rpx;
padding-top: 10rpx;
} .kk {
margin-left: 510rpx;
}
.orderCancel, .applyrefund{
width: 130rpx;
height: 35rpx;
font: 19rpx/35rpx "";
color: #333;
background: #fff;
text-align: center;
margin-right: 19rpx;
border-radius: 26rpx;
border: 1rpx solid #333;
}
.orderConfirm, .urgeSent, .confirmReceipt {
width: 130rpx;
height: 35rpx;
font: 19rpx/35rpx "";
color: #333;
background: #fff;
text-align: center;
border-radius: 20rpx;
border: 1rpx solid #333;
}
.order .mou{
color: #FF9130;
} myOrder.json {
"usingComponents": {}
}
效果类似于如下图，
小程序swiper实现订单页面的更多相关文章
- 微信小程序swiper实现 句子控app首页滑动卡片
微信小程序swiper实现 句子控app首页滑动卡片 引言:最近看到句子控APP首页的效果很清新,可是发现他的微信小程序端没有实现这个功能,我看了一下难度不大,于是尝试着去实现. 实现效果如下: 1. ...
- 微信小程序swiper高度自适应，swiper的子元素高度不固定
小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动 ...
- 微信小程序左右滑动切换页面示例代码--转载
微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...
- 小程序webview跳转页面后没有返回按钮完美解决方案
随着小程序越来越火爆,使一个产品如果只有公众号H5页面和APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很.在此驱动下,我所在公司也决定赶紧上车. 但是,如果要按照小程序 ...
- 小程序-web-view嵌入H5页面遇到的bug
遇到的问题1:ios页面中,内容过多时有下滑真是功能,但是下滑的时候回看到底部的微信自带的灰色背景及H5的域名(ios的webview中上/下拉露出黑灰色背景问题) 解决办法:给body添加样式--- ...
- 小程序内嵌H5页面判断微信及小程序环境
判断微信及小程序环境 1.H5页面引入jweixin-1.3.2.js 2. var ua = window.navigator.userAgent.toLowerCase(); if(ua.matc ...
- 微信小程序生命周期、页面生命周期、组件生命周期
1. 生命周期 App(全局) 位置:项目根目录app.js文件 App({ onLaunch (options) { // console.log('小程序初始化') }, onShow(optio ...
- 基于angular实现模拟微信小程序swiper组件
这段时间的主业是完成一个家政类小程序,终于是过审核发布了.不得不说微信的这个小程序生态还是颇有想法的,抛开他现有的一些问题不说,其提供的组件系统乍一看还是蛮酷的.比如其提供的一个叫swiper的视图组 ...
- 微信小程序swiper制作内容高度不定的tab选项卡
微信小程序利用swiper制作内容高度不定的tab选项卡,不使用absolute定位,不定高度,由内容自由撑开主要思路是获取内容区的高度来给swiper动态设置值 .wxml <view cla ...
随机推荐
- abstract关键字及static关键字
抽象关键字abstract 抽象类 在类前加上关键字abstract可以将此类变成抽象类.抽象类不允许通过new关键字实例化,但是可一通过其子类向上转型为其创建实例. 抽象类可以有抽象方法,也可以没有 ...
- java基础笔记（10）
Html:载体 CSS:样式 JavaScript:特效 html: 1. <html></html>称为根标签,所有的网页标签都在<html>< ...
- ubuntu 配置 tftp 服务器
一. 安装 tftp 1.1. 安装 tftp 所需的软件. a. 安装 tftp-hpa,tftpd-hpa,前者是客户端,后者是服务程序, 在终端下输入 sudo apt-get install ...
- Vim实用技巧(一）
vim 命令按键规定 标记 含义 x 按一次 x dw 按一次 d, w dap 按一次 d, a, p 同时按 和 n g<C-]> 按 g, 然后同时按 和 ] <C-=> ...
- 题解 CF978C 【Letters】
此题评测机出了点问题,数据全部AC,却显示UKE 下面是数据全部AC,却显示UKE的代码 思路:b[i]减去每个宿舍的房间总数,如果b[i]小于了某个宿舍的房间总数则为答案. #include< ...
- Javascript的是三种字符串连接方式
第一种:用连接符“+”连接字符串 str="a"; str+="b"; 这种方法相对以下两种,最便捷快速.建议100字符以下的连接使用这种连接方式. 第二种:以 ...
- 02.AutoMapper 之扁平化(Flattening)
https://www.jianshu.com/p/65099590c930 扁平化(Flattening) 对象映射器的常见用法是将一个复杂对象模型扁平化为一个简单模型.例如您有一个以下复杂模型 ...
- UITableViewCell选中后子View背景色被Clear
在TableView中,当cell 处于Hightlighted(高亮)或者Selected(选中)状态下,Cell上的子控件的背景颜色会被 Clear. 解决方法:(4种) 1. 直接设置子控件的 ...
- GROUP BY关键字优化
1.group by实质是先排序后进行分组,遵照索引建的最佳左前缀 2.当无法使用索引列,增大max_length_for_sort_data参数的设置+增大sort_buffer_size参数的设置 ...
- IDEA显示Run Dashboard窗口
接下来在workspace.xml RunDashBoard节点中添加如下内容:<component name="RunDashboard"> 在代码中加入 <o ...