uniapp实现订单列表以及scss样式布局
<template><view class="container"><view class="bg"><!-- 防止下面内容滚动遮盖不了内容 --><view class="tabs-bg"></view></view><view class="tabs"><my-t...
<template>
<view class="container">
<view class="bg">
<!-- 防止下面内容滚动遮盖不了内容 -->
<view class="tabs-bg"></view>
</view>
<view class="tabs">
<my-tabs :show-bar="true" :list="tabsList" :bar-width="barWidth" :bar-height="barHeight" :is-scroll="false"
:current="current" @change="tabsChange" font-size="32" :bg-color="bgColor" inactive-color="#666666"
active-color="#E1001A" height="118" :tabs-src="tabsSrc" custom-bottom="6"></my-tabs>
</view>
<!-- 主体 -->
<view>
<view class="empty" v-if="goodsList.length == 0" :style="{'min-height':listMinHeight + 'px'}">
<view class="empty-wrap">
<view class="empty-wrap-image">
<u-image width="356" height="356" duration="20" :src="emptyImage"></u-image>
</view>
<view class="empty-wrap-desc">
暂无订单
</view>
</view>
</view>
<view class="page" v-for="(item, index) in goodsList" :key="index">
<view class="deliver">{{item.orde.OrderStateName}}</view>
<view class="product u-flex " v-for="(srt, serts) in item.list" :key="serts" @click="orderDetail(item)">
<view class="product__left">
<u-image width="218" height="218" :src="srt.images"></u-image>
</view>
<view class="product__right">
<view class="product__right__top">
<view class="product__right__top__title u-line-2">{{srt.Name}}</view>
<view class="product__right__top__conten">数量 x{{srt.Num}}</view>
</view>
<view class="product__right__bottom u-flex">
<u-image width="34" height="34" :src="stare" v-if="srt.NuType=='1'"></u-image><text
v-else>￥</text><text class="product__right__bottom__tonben">{{srt.Price}}</text>
</view>
</view>
</view>
</view>
<!-- 没有跟多了 -->
<view class="list-nomore u-flex u-row-center" v-if="noMore && goodsList.length !== 0">
<view class="list-nomore-icon">
<image class="list-nomore-icon__image" :src="nomoreSrc" mode="scaleToFill"></image>
</view>
<view class="list-nomore-text">
没有更多啦...
</view>
</view>
<view class="safe-area-inset-bottom"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
noMore: false,
page: 1,
totalPages: 0,
nomoreSrc: 图片url,
barWidth: 34,
barHeight: 10,
current: 0,
orderstate: 0,
bgColor: '#FFF',
emptyImage: 图片url, //为空
tabsSrc: 图片url,
stare: 图片url, // 图标
num: 0,
tabsList: [{
name: '待发货',
}, {
name: '待收货',
}, {
name: '已完成',
}, ],
goodsList: [],
}
},
onLoad(options) {
this.current = options.flag - 0;
this.orderList();
},
onUnload() {
},
onReachBottom() {
if (this.page < this.totalPages) {
this.page++;
this.orderList();
}
},
components: {
},
methods: {
// tabs切换
tabsChange(int) {
if (this.current == int) return false;
this.current = int;
this.page = 1;
this.totalPages = 0;
this.noMore = false;
this.goodsList = [];
this.orderList();
},
// 获取订单信息
orderList() {
this.orderstate = this.current + 2;
uni.request({
url: "url",
data: {
memberid: 用户ID,
orderState: this.orderstate, // 订单状态
rows: 10,
page: this.page,
},
success: (commRes) => {
commRes.data.rows.forEach((resItem, resIndex) => {
//订单总数
resItem.orde.num = 0
resItem.orde.NuType = ''
resItem.orde.ordersID = ''
for (let j = 0; j < resItem.list.length; j++) {
resItem.orde.num += resItem.list[j].Num
resItem.orde.NuType = resItem.list[j].NuType
resItem.orde.ordersID = resItem.list[j].OrderID
}
// console.log("resItem.orde.num",resItem.orde.num)
// 订单标题
resItem.orde.OrderStateName = resItem.orde.OrderState == 2 && resItem.orde
.Self_Delivery == '2' ? '待发货' : resItem.orde.OrderState == 2 && resItem
.orde.Self_Delivery == '1' ? '待自提' : resItem.orde.OrderState == 3 ?
'订单已发出' : resItem.orde.OrderState == 4 ? '交易成功' : '未知';
// 判断图片后面是否带逗号，如果有就截取，没有就保留
resItem.list.forEach((listItem, listIndex) => {
if (listItem.ExImages.indexOf(",") == -1) {
listItem.images = listItem.ExImages
} else {
listItem.images = listItem.ExImages.split(
',', 1);
}
})
})
// 赋值
this.totalPages = commRes.data.total;
this.goodsList = [...this.goodsList, ...commRes.data.rows];
if (this.page >= this.totalPages || this.totalPages == 0) this.noMore = true;
if (this.totalPages == 0) this.noMore = false;
// this.goodsList = commRes.data.rows
},
fail: (commErr) => {
console.log('commErr', commErr);
}
})
},
// 待自提订单 确认核验
handleCheck(_checkItem){
uni.navigateTo({
url:' ' + _checkItem.orde.ID
})
},
// 修改订单状态
handleGather(_item) {
uni.request({
url: "url",
data: {
OrderID: _item.orde.ordersID, //订单ID
OrderState: '4', //订单状态
memberid: , //用户ID
},
success: (commRes) => {
console.log('commRes', commRes);
// 页面刷新
this.resetOrderList();
},
fail: (commErr) => {
console.log('commErr', commErr);
}
})
},
// 重置 订单列表
resetOrderList() {
this.page = 1;
this.goodsList = [];
this.totalPages = 0;
this.noMore = false;
this.orderList();
},
// 跳订单详情
orderDetail(_item) {
uni.navigateTo({
url: 'url?orderDetails=' + encodeURIComponent(JSON.stringify(_item))
})
},
}
}
</script>
<style lang="scss" scoped>
.container {
min-height: 100vh;
overflow: hidden;
background: #F5F6FA;
padding-top: 118rpx;
.bg {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 9;
.tabs-bg {
height: 118rpx;
background-color: #FFFFFF;
}
}
.tabs {
top: 0;
left: 0;
width: 100%;
position: fixed;
z-index: 10;
}
.empty {
margin: 0 24rpx;
border-radius: 16rpx;
// 空状态
.empty-wrap {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 120rpx;
.empty-wrap-image {
margin-bottom: 16rpx;
}
.empty-wrap-desc {
font: 28rpx "PingFangSC-Regular", "PingFang SC";
color: #CCCCCC;
}
}
}
.padd {
background-color: #007AFF;
}
.page {
background-color: #FFFFFF;
margin: 24rpx;
padding-bottom: 24rpx;
.deliver {
padding: 26rpx 0 24rpx 24rpx;
font: 26rpx "PingFangSC-Regular", "PingFang SC";
color: #333333;
}
.product {
margin: 24rpx 24rpx 0 24rpx;
&__left {}
&__right {
padding-left: 32rpx;
&__top {
height: 180rpx;
&__title {
font: 28rpx "PingFangSC-Regular", "PingFang SC";
color: #333333;
}
&__conten {
font: 24rpx "PingFangSC-Regular", "PingFang SC";
color: #999999;
padding-top: 12rpx;
}
}
&__bottom {
&__tonben {
margin-left: 6rpx;
}
}
}
}
// 待收货——快递单号
.orderNumber {
margin: 30rpx;
padding: 10rpx;
background: #FAFAFA;
&__left {
font: 500 26rpx "PingFangSC-Medium", "PingFang SC";
color: #999999;
}
&__right {
font-size: 26rpx "PingFangSC-Regular", "PingFang SC";
color: #E1001A;
}
}
.total {
padding: 28rpx 24rpx 0 0;
justify-content: flex-end;
font: 26rpx "PingFangSC-Regular", "PingFang SC";
color: #333333;
&__con {
font: 500 32rpx "PingFangSC-Medium", "PingFang SC";
margin-left: 6rpx;
}
}
// 待收货——确认收货按钮
.button {
margin: 36rpx 24rpx 0 520rpx;
justify-content: flex-end;
width: 150rpx;
height: 64rpx;
font: 26rpx/64rpx "PingFangSC-Regular", "PingFang SC";
color: #FFFFFF;
background: linear-gradient(90deg, rgba(225, 0, 26, 0.6) 0%, #E1001A 100%);
border-radius: 32rpx;
text-align: center;
}
}
.list-nomore {
padding: 40rpx 0 50rpx;
.list-nomore-icon {
width: 32rpx;
height: 32rpx;
margin-right: 16rpx;
&__image {
width: 32rpx;
height: 32rpx;
display: block;
}
}
.list-nomore-text {
font: 500 26rpx "PingFangSC-Medium", "PingFang SC";
color: #BCBCBC;
}
}
}
</style>
(注意：参考为主，可能无法运行)
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
1
0- 0
已为社区贡献6条内容
所有评论(0)