yovinchen/xlcs
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

修正项目

Browse Source
This commit is contained in:
yovinchen
2024-01-07 01:10:08 +08:00
parent 2f29241806
commit b22014e976
943 changed files with 27699 additions and 28227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

341
xlcs-user/pagesOrder/orderList/orderList.vue Normal file
View File

@@ -0,0 +1,341 @@
<template>
<view>
<view class="wrap">
<view class="u-tabs-box">
<u-tabs-swiper ref="tabs" :current="current" :is-scroll="false" :list="list" activeColor="#f29100"
swiperWidth="750" @change="change"></u-tabs-swiper>
</view>
<swiper :current="swiperCurrent" class="swiper-box">
<swiper-item v-for="idx in 5" :key="idx" class="swiper-item">
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
<view class="page-box">
<view v-for="(res, index) in orderList[idx]" :key="res.id" class="order">
<view class="top">
<view class="left">
[{{ index + 1 }}]
<u-icon :size="30" color="rgb(94,94,94)" name="clock"></u-icon>
<u-icon :size="26" color="rgb(203,203,203)" name="arrow-right"></u-icon>
<view class="store">{{ res.createTime }}</view>
</view>
<view class="right">{{ res.param.orderStatusName }}</view>
</view>
<view v-for="(item, index) in res.orderItemList" :key="index" class="item">
<view class="left">
<image :src="item.imgUrl" mode="aspectFill"></image>
</view>
<view class="content">
<view class="title u-line-2">{{ item.skuName }}</view>
<view class="type">活动金额：￥{{ item.splitActivityAmount }}</view>
<view class="type">优惠券金额：￥{{ item.splitCouponAmount }}</view>
</view>
<view class="right">
<view class="price">￥{{ item.skuPrice }}</view>
<view class="number">x{{ item.skuNum }}</view>
<view class="u-type-error">￥{{ item.splitTotalAmount }}</view>
</view>
</view>
<view class="total">
<text class="total-price">
<text class="decimal">现价：￥{{ res.totalAmount }} 原价：￥{{ res.originalTotalAmount }}</text>
</text>
</view>
<view class="bottom">
<view class="more">
<u-icon color="rgb(203,203,203)" name="more-dot-fill"></u-icon>
</view>
<view class="logistics btn">查看物流</view>
<view class="exchange btn">卖了换钱</view>
<view class="evaluate btn">评价</view>
</view>
</view>
<u-gap height="30"></u-gap>
<u-loadmore :status="loadStatus[idx]" bgColor="#f2f2f2"></u-loadmore>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 订单列表
orderList: [[], [], [], [], []],
// 订单类型、状态与数量
list: [
{
name: '待付款',
orderStatus: 'UNPAID',
count: 0
},
{
name: '待发货',
orderStatus: 'WAITING_DELEVER',
count: 0
},
{
name: '待收货',
orderStatus: 'WAITING_TAKE',
count: 0
},
{
name: '待评价',
orderStatus: 'WAITING_COMMON',
count: 0
},
{
name: '已完结',
orderStatus: 'FINISHED',
count: 0
}
],
// 当前选中的选项卡
current: 0,
// 当前的swiper
swiperCurrent: 0,
// 每个选项卡数据加载的状态
loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore', 'loadmore'],
// 每个选项卡初始页面
page: [1, 1, 1, 1, 1],
// 每个选项卡总页数
pages: [0, 0, 0, 0, 0],
// 每次列表请求的记录条数
limit: 5
};
},
async onLoad(options) {
// 请求不同状态的初始列表数据
await this.getOrderList(0, 'UNPAID');
await this.getOrderList(1, 'WAITING_DELEVER');
await this.getOrderList(2, 'WAITING_TAKE');
await this.getOrderList(3, 'WAITING_COMMON');
await this.getOrderList(4, 'FINISHED');
let current = +options.current;
if (current !== -1) {
this.change(current);
}
},
methods: {
// 触底加载
reachBottom() {
const orderStatus = this.list[this.current].orderStatus;
if (this.loadStatus[this.current] !== 'nomore') this.getOrderList(this.current, orderStatus);
},
// 页面数据
// idx是数组下标，orderStatus是订单状态的常量值，请求接口的时候需要使用
async getOrderList(idx, orderStatus) {
const result = await this.$u.api.getFindUserOrder({
page: this.page[idx],
limit: this.limit,
orderStatus
});
// 给每个选项卡存储总页数以及总记录数
this.pages[idx] = result.pages; // 设置总页数
this.list[idx].count = result.total; // 总记录数
// 对于每个选项卡
// 其中每一个如果总页数为0，则没有记录，loadmore组件状态为nomore
// 并且不需要执行后续操作内容
if (this.pages[idx] === 0) {
this.loadStatus.splice(idx, 1, 'nomore');
return;
}
// 如果每个选项卡的当前页值小于总页数值，
// 那么需要将请求后的数据与之前数据进行数据合并，
// 并且确认loadmore组件的状态为loadmore可加载更多
// 还需要将页码数进行+1操作
if (this.page[idx] <= this.pages[idx]) {
this.orderList[idx] = [...this.orderList[idx], ...result.records];
this.loadStatus.splice(idx, 1, 'loadmore');
this.page[idx] = this.page[idx] + 1;
} else {
this.loadStatus.splice(idx, 1, 'nomore');
}
},
// tab栏切换
change(index) {
this.swiperCurrent = index;
this.current = index;
const orderStatus = this.list[index].orderStatus;
this.getOrderList(index, orderStatus);
}
}
};
</script>
<style>
/* #ifndef H5 */
page {
height: 100%;
background-color: #f2f2f2;
}
/* #endif */
</style>
<style lang="scss" scoped>
.order {
width: 710rpx;
background-color: #ffffff;
margin: 20rpx auto;
border-radius: 20rpx;
box-sizing: border-box;
padding: 20rpx;
font-size: 28rpx;
.top {
display: flex;
justify-content: space-between;
.left {
display: flex;
align-items: center;
.store {
margin: 0 10rpx;
font-size: 32rpx;
font-weight: bold;
}
}
.right {
color: $u-type-warning-dark;
}
}
.item {
display: flex;
margin: 20rpx 0 0;
.left {
margin-right: 20rpx;
image {
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
}
}
.content {
flex: 1;
.title {
font-size: 28rpx;
line-height: 50rpx;
}
.type {
margin: 10rpx 0;
font-size: 24rpx;
color: $u-tips-color;
}
.delivery-time {
color: #e5d001;
font-size: 24rpx;
}
}
.right {
margin-left: 10rpx;
padding-top: 20rpx;
text-align: right;
.decimal {
font-size: 24rpx;
margin-top: 4rpx;
}
.number {
color: $u-tips-color;
font-size: 24rpx;
}
}
}
.total {
margin-top: 20rpx;
text-align: right;
font-size: 24rpx;
.total-price {
font-size: 32rpx;
}
}
.bottom {
display: flex;
margin-top: 40rpx;
padding: 0 10rpx;
justify-content: space-between;
align-items: center;
.btn {
line-height: 52rpx;
width: 160rpx;
border-radius: 26rpx;
border: 2rpx solid $u-border-color;
font-size: 26rpx;
text-align: center;
color: $u-type-info-dark;
}
.evaluate {
color: $u-type-warning-dark;
border-color: $u-type-warning-dark;
}
}
}
.centre {
text-align: center;
margin: 200rpx auto;
font-size: 32rpx;
image {
width: 164rpx;
height: 164rpx;
border-radius: 50%;
margin-bottom: 20rpx;
}
.tips {
font-size: 24rpx;
color: #999999;
margin-top: 20rpx;
}
.btn {
margin: 80rpx auto;
width: 200rpx;
border-radius: 32rpx;
line-height: 64rpx;
color: #ffffff;
font-size: 26rpx;
background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
}
}
.wrap {
display: flex;
flex-direction: column;
height: calc(100vh - var(--window-top));
width: 100%;
}
.swiper-box {
flex: 1;
}
.swiper-item {
height: 100%;
}
</style>