小程序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 ...
随机推荐
- [Web 前端] 030 ajax 是什么
AJAX 是什么 1. AJAX 是一种"艺术" 简单地说 AJAX 是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的艺术 网上是这样说的 AJAX 指异步 Java ...
- [Git] 018 冲突在所难免，需要巧妙化解
0. 回顾 [Git] 005 初识 Git 与 GitHub 之分支 中"4.2 情形二"的 9 提及了"解决冲突" 当时没有展开,这回详谈 我这回反其道而行 ...
- Linux常用命令基础
linux 常用指令 基础命令 宿主目录 目录结构 文件管理 目录管理 用户管理 别名管理 压缩包管理 网络设置 shell技巧 帮助方法 /表示根目录 ~表示家目录 软件的安装(光盘中的软件呢): ...
- 数据库 三范式 BCFN
# 三范式 范式 设计关系数据库时,遵从不同的规范要求,设计出合理的关系型数据库,这些不同的规范要求被称为不同的范式,各种范式呈递次规范,越高的范式数据库冗余越小. 目前关系数据库有六种范式:第一 ...
- C#WebApi自动生成文档
1.效果图 2.在webApi项目,打开Nuget,搜索WebApiTestClient,安装WebApiTestClient,注意是给HelpPage的 3.打开引入WebApiTestClient ...
- catch that cow POJ 3278 搜索
catch that cow POJ 3278 搜索 题意 原题链接 john想要抓到那只牛,John和牛的位置在数轴上表示为n和k,john有三种移动方式:1. 向前移动一个单位,2. 向后移动一个 ...
- Intellij IDEA奇巧妙计(不停更新)
1,在pom.xml文件中,Ctrl+Shift+Alt+U打开Manven依赖视图 2,Alt+7 查看类里面方法,变量等结构 3, Shift+Esc 收缩编译提示框 4, ctrl+r 替换本页 ...
- Python 入门之 闭包
Python 入门之 闭包 1.闭包 (1)在嵌套函数内使用(非本层变量)和非全局变量就是闭包 (2)_ closure _ 判断是不是闭包 def func(): a = 1 def foo(): ...
- 理解 JavaScript 闭包
这是本系列的第 4 篇文章. 作为 JS 初学者,第一次接触闭包的概念是因为写出了类似下面的代码: for (var i = 0; i < helpText.length; i++) { var ...
- i3wm 配置刷新生效 和 使用mod快捷打开 ranger 小贴士
在某处学习到了如何配置i3wm后,对其极感兴趣. 学习到的经验总结: Linux中的各种命令操作其实都要首先查阅 man command 或者 command -h 或者 command -- ...