只是静态页面数据，还没有和后端进行数据对接，如图所示：
微信小程序开发者工具预览：
字节小程序开发者工具预览：
点击选项卡，进行切换，如图所示：
页面代码中会用到自己封装的公共样式public.css
小程序公共样式我放在了common目录下面public.css
在main.js中全局引用：
import 'common/public.css'; /*引入公共样式*/ public.css内容如下：
page {
font-family: 'Helvetica Neue', Roboto, 'microsoft yahei' !important;
background: #F5F5F5;
font-size: 28upx;
word-break: break-all;
word-wrap: break-word;
color: #1a1a1a;
}
.back-white {
background: #fff;
}
.size-20 {
font-size: 20upx;
}
.size-22 {
font-size: 22upx;
}
.size-24 {
font-size: 24upx;
}
.size-26 {
font-size: 26upx;
}
.size-28 {
font-size: 28upx;
}
.size-30 {
font-size: 30upx;
}
.size-32 {
font-size: 32upx;
}
.size-34 {
font-size: 34upx;
}
.size-36 {
font-size: 36upx;
}
.size-40 {
font-size: 40upx;
}
/* margin padding */
.mt-1 {
margin-top: 10upx;
}
.ml-1 {
margin-left: 10upx;
}
.mb-1 {
margin-bottom: 10upx;
}
.mr-1 {
margin-right: 10upx;
}
.mt-2 {
margin-top: 20upx;
}
.mr-2 {
margin-right: 20upx;
}
.ml-2 {
margin-left: 20upx;
}
.mb-2 {
margin-bottom: 20upx;
}
.mt-3 {
margin-top: 30upx;
}
.mr-3 {
margin-right: 30upx;
}
.ml-3 {
margin-left: 30upx;
}
.mb-3 {
margin-bottom: 30upx;
}
.p-1 {
padding: 10upx;
}
.p-2 {
padding: 20upx;
}
.p-3 {
padding: 30upx;
}
.p-0 {
padding: 0;
}
.pt-1 {
padding-top: 10upx;
}
.pb-1 {
padding-bottom: 10upx;
}
.pl-1 {
padding-left: 10upx;
}
.pr-1 {
padding-right: 10upx;
}
.pt-2 {
padding-top: 20upx;
}
.pb-2 {
padding-bottom: 20upx;
}
.pl-2 {
padding-left: 20upx;
}
.pr-2 {
padding-right: 20upx;
}
.pl-3 {
padding-left: 30upx;
}
.pr-3 {
padding-right: 30upx;
}
.pt-3 {
padding-top: 30upx;
}
.pb-3 {
padding-bottom: 30upx;
}
/* flex布局 */
.d-flex {
display: -ms-flexbox;
display: flex;
}
.d-iflex {
display: inline-flex;
}
.flex-wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-1 {
-webkit-flex: 1;
/* Chrome */
flex: 1;
min-width: 0;
}
.align-items-start {
-ms-flex-align: start;
align-items: flex-start
}
.align-items-end {
-ms-flex-align: end;
align-items: flex-end;
}
.align-items-center {
-ms-flex-align: center;
align-items: center;
}
.justify-content-start {
-ms-flex-pack: start;
justify-content: flex-start;
}
.justify-content-end {
-ms-flex-pack: end;
justify-content: flex-end;
}
.justify-content-center {
-ms-flex-pack: center;
justify-content: center;
}
.space-between {
justify-content: space-between;
}
/* 文本 */
.text-justify {
text-align: justify;
}
.text-nowrap {
white-space: nowrap;
}
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-truncate_one {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.text-truncate_two {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.text-truncate_three {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.text-weight {
font-weight: bold;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-danger {
color: #FE433F;
}
.text-success {
color: #1AAD19;
}
.text-primary {
color: #0FAFFF;
}
.text-muted {
color: #999;
}
.text-white {
color: white;
}
.text-decoration {
text-decoration: line-through;
}
/* position */
.position-relative {
position: relative;
z-index: 2;
}
.position-absolute {
position: absolute;
z-index: 1;
}
.position-fixed {
position: fixed;
z-index: 3;
}
.fixed-bottom {
bottom: 0;
width: 100%;
z-index: 3;
}
/* 右箭头 */
.arrow {
width: 16upx;
height: 16upx;
border-top: 4upx solid #dadada;
border-right: 4upx solid #dadada;
position: absolute;
transform: rotate(45deg);
}
.border-left {
border-left: 1px solid #e5e5e5;
}
.border-right {
border-right: 1px solid #e5e5e5;
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
安装如下插件
进入正题，关于订单列表页面代码如下：
订单页面代码如下：
<template>
<view>
<view class="inv-h-w">
<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="changeTab(0)">全部</view>
<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="changeTab(1)">待付款</view>
<view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="changeTab(2)">待发货</view>
<view :class="['inv-h',Inv==3?'inv-h-se':'']" @click="changeTab(3)">待收货</view>
<view :class="['inv-h',Inv==4?'inv-h-se':'']" @click="changeTab(4)">已完成</view>
</view>
<!-- 内容 -->
<view class="swiper-content">
<view v-if="Inv==Inv" class="content style-default">
<goods-order :list="tlist" :types="Inv" class="item"></goods-order>
</view>
</view>
</view>
</template>
<script>
import goodsOrder from "components/goods-order.vue"
export default {
components: {
goodsOrder
},
data() {
return {
Inv: 0,
list: [], //真正的列表数据
tlist:[]//处理的页面展示数据
}
},
onShow() {
// 模拟从后台拿到的数据
var list = [{
id: '0',
name: '好吃的虾好吃的虾好吃的虾好吃的虾好吃的虾',
price: 10,
count: 1,
size: '大份',
img: 'http://47.92.83.204:8080/zhangying/img/cart/xia1.jpg',
types: 9
},
{
id: '1',
name: '很好吃的虾',
price: 15,
count: 1,
size: '大份',
img: 'http://47.92.83.204:8080/zhangying/img/cart/xia2.jpg',
types: 1
},
{
id: '2',
name: '可乐鸡翅',
price: 12,
count: 1,
size: '大份',
img: 'http://47.92.83.204:8080/zhangying/img/cart/jichi.jpg',
types: 2
}, {
id: '3',
name: '傻逼火锅',
price: 30,
count: 1,
size: '大份',
img: 'http://47.92.83.204:8080/zhangying/img/cart/huoguo.jpg',
types: 4
}, {
id: '4',
name: '傻逼火锅',
price: 30,
count: 1,
size: '大份',
img: 'http://47.92.83.204:8080/zhangying/img/cart/huoguo.jpg',
types: 3
},
{
id: '5',
name: '可乐鸡翅',
price: 12,
count: 1,
size: '大份',
img: 'http://47.92.83.204:8080/zhangying/img/cart/jichi.jpg',
types: 9
}
]
// list数组中为每一项添加双向绑定的属性---这个属性要在页面显示(onShow)添加
list.forEach(el => el.isChecked = false);
this.list = list;
this.tlist = list;//真实数据赋值给页面数据
},
methods: {
changeTab(Inv) {
var that = this;
that.Inv = Inv;
var arr = [];
that.list.map(item => {//遍历真实数据，拿到所需要的数据放在页面数据tlist中，展示在页面上
if(item.types == Inv){
arr.push(item);
}
})
that.tlist = arr;
if(Inv == 0){//获取全部数据
that.tlist = that.list;
}
//滚动到顶部
uni.pageScrollTo({
duration: 0, //过渡时间必须为0，否则运行到手机会报错
scrollTop: 0 //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离（如res.top - data.top）
})
},
}
}
</script>
<style lang="scss">
.inv-h-w {
background-color: #FFFFFF;
height: 100upx;
display: flex;
position: fixed;
top: 0;
width: 100%;
}
.inv-h {
font-size: 30upx;
flex: 1;
text-align: center;
height: 100upx;
line-height: 100upx;
}
.inv-h-se {
color: #FF9014;
font-weight: bold;
border-bottom: 6rpx solid #FF9014;
}
.swiper-content {
margin-top: 130rpx;
.content {
width: 670rpx;
margin: 0 auto 60rpx;
}
}
</style>
组件内容：先创建一个components目录，在文件下创建goods-order.vue
引用组件
import goodsOrder from "components/goods-order.vue"传值子组件
<goods-order :list="tlist" :types="Inv" class="item"></goods-order>子组件代码内容：
<template name="goods-order">
<view>
<view class="list" v-for="item in list" :key='item.id'>
<view class="left">
<image :src="item.img" class="img"></image>
</view>
<view class="center flex-1 ml-3 ">
<view class="name">
<view class="text-truncate">{{item.name}}</view>
<view class="size">尺寸：{{item.size}}</view>
</view>
<view class="price">
￥{{item.price}}
</view>
</view>
<view class="right mr-2">
<view
v-if="types==0"
:class="['types d-flex align-items-center justify-content-center',item.types==1||item.types==2||item.types==3?'types_dfk':item.types==4?'types_ywc':item.types==9?'types_yqx':'']">
{{item.types==1?"待付款":item.types==2?"待发货":item.types==3?"待收货":item.types==4?"已完成":item.types==9?"已取消":"无"}}
</view>
<view v-if="types==1" class="types types_dfk d-flex align-items-center justify-content-center">
待付款
</view>
<view v-if="types==2" class="types types_dfk d-flex align-items-center justify-content-center">
待发货
</view>
<view v-if="types==3" class="types types_dfk d-flex align-items-center justify-content-center">
待收货
</view>
<view v-if="types==4" class="types types_ywc d-flex align-items-center justify-content-center">
已完成
</view>
<view v-if="types==9" class="types types_yqx d-flex align-items-center justify-content-center">
已取消
</view>
<view class="count">
x{{item.count}}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "goods-order",
data() {
return {
};
},
// 此处定义传入的数据,属性
props: {
list: {
type: Array,
value: null
},
types: {
type: Number,
value: null
}
},
//组件生命周期
created: function(e) {
},
methods:{
}
}
</script>
<style lang="scss">
.list {
width: 672rpx;
height: 208rpx;
background: #fff;
box-shadow: 0 8rpx 16rpx 0 rgba(83, 66, 49, 0.08);
border-radius: 24rpx;
margin-top: 32rpx;
display: flex;
justify-content: space-around;
align-items: center;
.left {
display: flex;
.img {
width: 136rpx;
height: 136rpx;
margin-left: 10rpx;
border-radius: 8%;
}
}
.center {
width: 170rpx;
display: flex;
height: 136rpx;
flex-direction: column;
justify-content: space-between;
.name {
font-size: 26rpx;
color: #3E3E3E;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.size {
font-size: 22rpx;
color: #8D8D8D;
}
.price {
color: #DD6C26;
font-weight: bold;
}
}
.right {
display: flex;
height: 136rpx;
flex-direction: column;
justify-content: space-between;
align-items: center;
.count {
font-size: 22rpx;
color: #8D8D8D;
}
.types {
width: 120rpx;
height: 50rpx;
color: #FFFFFF;
}
.types_dfk,
.types_dfh,
.types_dsh,
{
background-color: #2994FA;
}
.types_ywc {
background-color: #0BC261;
}
.types_yqx {
background-color: #FF976A;
}
}
}
</style>
完成
5059
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
