小程序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 ...
随机推荐
- Java基础语法--IDEA快捷键
Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Shift+Click,可以关闭文件Ctrl+[ ...
- jquery导航栏高亮（二级菜单点击一级保持高亮）
<script type="text/javascript"> var urlstr = location.href; var urlstatus=false; $(& ...
- 1000行MySQL学习笔记
/* 启动MySQL */ net start mysql /* 连接与断开服务器 */ mysql -h 地址 -P 端口 -u 用户名 -p 密码 /* 跳过权限验证登录MySQL */ mysq ...
- 权限控制（vue）
权限控制(vue) 经常会遇到,角色权限控制问题,若是页面控制,倒好说,可如果是当前页面部分可见不可见,这就有些麻烦,如果加上条件就更加苛刻.之前只是简单的v-if进行控制,如今想试试指令(网上一直有 ...
- 虚拟机的linux（CentOS）系统安装
一.安装虚拟机:VirtualBox 1.软件下载:https://www.virtualbox.org/ 2.一路点击下一步完成安装 二.安装linux:CentOS6.8 1.官方网站:ht ...
- js函数调用的几种方法
js的函数调用会免费奉送两个而外的参数就是 this 和 arguments .arguments是参数组,他并不是一个真实的数组,但是可以使用.length方法获得长度. 书上有说4中调用方式: 方 ...
- Sql中使用With创建多张临时表
CREATE PROC [dbo].[sp_VisitCount] ( @count INT ) AS BEGIN DECLARE @current DATETIME SET @current=GET ...
- EFL - Championship
Swansea City Charlton AthleticBristol CityLeeds UnitedPreston North EndWest Bromwich AlbionQue ...
- 通过关键字Event定义用户自己的事件
Event 语句 定义用户自定义的事件. 语法[Public] Event procedurename [(arglist)] Event 语句包含下面部分: 部分 描述 Public 可选的.指定该 ...
- 合肥学院ACM集训队第一届暑假友谊赛 B FYZ的求婚之旅 D 计算机科学家 F 智慧码 题解
比赛网址:https://ac.nowcoder.com/acm/contest/994#question B FYZ的求婚之旅 思路: 然后用快速幂即可. 细节见代码: #include <i ...