微信小程式上拉載入分頁資料---包括tab選項卡切換（優化方案）
阿新 • • 發佈：2020-08-07
<template>
<view class="container prohibition">
<view class="demo" :style="'height:' + demo.height + 'px;' + 'padding-top:' + demo.top + 'px;padding-bottom:10rpx'">
<view class="left" :style="'top:' + demo.top + 'px'">
<view class="iconfont icon-zuo
、 // 資料載入完後停止資料請求
if (this.status != 'more') {
return false;
}
if (this.tabIndex == 0) {
var status = '';
this.getOrderList(status);
} else if (this.tabIndex == 1) {
var status = 2;
this.statusText = "待付款";
this.getOrderList(status);
} else if (this.tabIndex == 2) {
var status = 5; // 已完成
this.statusText = "已完成";
this.getOrderList(status);
}
},
methods: {
backleft(e) {
uni.navigateBack();
},
changeFn(index) {
this.add_class = index;
if (this.add_class == 1) {
var status = '';
this.getOrderList(status);
} else if (this.add_class == 0) {
uni.switchTab({
url:"../../pages/worker/worker"
})
}
},
async callKehu() {
const res = await this.$myRequset({
url: "/api",
data: {
operate: "index.store_phone",
token: this.token
}
});
let phone_number = res.data.data.phone;
if (res.data.code == 1) {
uni.makePhoneCall({
phoneNumber: phone_number
});
}
},
order_detail(index) {
uni.setStorageSync('order_no', this.queryList[index]);
uni.navigateTo({
url: '../../pages/orderDetail/orderDetail'
})
},
evaluateFn(index) {
this.newIdx = index;
this.evaluate = !this.evaluate;
this.order_no = this.queryList[index].order_no;
},
changeStarts(num) {
this.stars = num.value;
},
errImg() {
this.queryList.forEach((val) => {
if (val.goods_logo.length == 29) { // 圖片不完整路徑
val.goods_logo = 'https://test134.vrapp.chot.cn/mini/picture/orderImg.png';
}
if (val.number_goods == null || val.goods_title == null || val.price_real == null) {
val.number_goods = 1;
val.price_real = 0;
val.goods_title = '居家生活料理套餐'
}
});
},
navsHandleClick(i) {
this.current = i;
},
intervalChange(e) {
this.current = e.detail.current;
},
//切換選項卡
toggleTab(index) {
this.tabIndex = index;
this.page = 1; // tab切換時page是1哦
this.isEmpty = false;
this.status = 'loading';
switch (this.tabIndex) {
case 1:
var status = 2 // 待付款
this.statusText = "待付款";
this.queryList = []; // tab選項卡切換時需要將原來已經獲取的資料清空，否則就還會顯示原來的資料
let len = this.getOrderList(status);
break;
case 2:
var status = 5 // 已完成
this.statusText = "已完成";
this.queryList = [];
this.getOrderList(status);
break;
default:
var status = '' // 預設顯示全部列表
this.queryList = [];
this.getOrderList(status);
break;
}
},
//滑動切換swiper
tabChange(e) {
this.tabIndex = e.detail.current;
},
// 再次購買
buyAgin(index) {
let goods_id = this.queryList[index].goods_id;
uni.navigateTo({
url: "../../pages/detail/detail?id=" + goods_id
})
},
//獲取訂單資訊
async getOrderList(status) {
let data = {
operate: 'Order.index',
token: this.token,
page: this.page,
status: status
}
const res = await this.$myRequset({
url: '/api',
method: "POST",
data: data
})
for (var i = 0; i < res.data.data.list.list.length; i++) {
this.queryList.push(res.data.data.list.list[i]); // 載入的資料追加在上一頁後面（每次都迴圈列表長度追加即可，使用concat會new新陣列，使用者體驗不好）
}
this.queryList.forEach((item, index) => {
if (item.status == 0) {
item.status = "已取消";
} else if (item.status == 1) {
item.status = "待付款";
} else if (item.status == 2) {
item.status = "待付款";
} else if (item.status == 3) {
item.status = "待發貨";
} else if (item.status == 4) {
item.status = "待收貨";
} else if (item.status == 5) {
item.status = "已完成";
}
});
this.list_count = res.data.data.list.count;
if (this.list_count !== 0) {
this.status = "more";
this.isEmpty = false;
this.contentText.contentnomore = "沒有更多資料啦"
} else {
this.status = "nomore";
this.isEmpty = true;
this.contentText.contentnomore = "您暫時沒有相關訂單哦"
}
let pages = Math.ceil(this.list_count / this.pageSize);
if (this.page == pages) {// 說明分頁資料已載入完畢
this.status = "nomore";
}
uni.clearStorageSync();
}// 支付訂單
async pay_order(index) {
let order_no = this.queryList[index].order_no;
const res = await this.$myRequset({
url: "/api",
method: "POST",
data: {
token: this.token,
operate: "member.pay.wx_jsapi",
order_no: order_no
},
header: {
'content-type': 'application/form',
}
});
if (res.data.code == 1) {
let param = res.data.data;
uni.requestPayment({
provider: 'wxpay',
timeStamp: param.timeStamp,
nonceStr: param.nonceStr,
package: param.package,
signType: param.signType,
paySign: param.paySign,
success: function(res) {
console.log('success:' + JSON.stringify(res));
uni.showToast({
title: "支付成功",
icon: "loading"
});
uni.redirectTo({
url: "../order/order"
});
},
fail: function(err) {
console.log('fail:' + JSON.stringify(err));
uni.showToast({
title: "取消支付",
icon: "loading"
});
}
});
}
}
}
}
</script>
<style>
page {
background-color: #fff;
}
</style>
<style scoped lang="scss">
.box_fixed {
position: fixed;
width: 100%;
z-index: 1;
height: 116rpx;
background-color: #fff;
}
.content {
background: #fefefe;
padding: 20rpx 0;
.item {
width: 86%;
margin: 26rpx auto;
background: #fff;
box-shadow: 0rpx 0rpx 6rpx 6rpx #f4f4f4;
border-radius: 20rpx;
padding: 27rpx;
}
.statusText {
position: absolute;
top: 0rpx;
right: -34rpx;
display: inline-block;
width: 122rpx;
height: 40rpx;
z-index: 0;
line-height: 40rpx;
color: #fff;
text-align: center;
}
.order_img {
display: flex;
align-items: center;
justify-content: center;
image {
width: 150rpx;
height: 150rpx;
padding: 80rpx 80rpx 20rpx;
}
}
.orderid {
position: relative;
padding-bottom: 27rpx;
border-bottom: 1px solid #f4f4f4;
.title {
font-size: 26rpx;
color: #28292c;
}
.sucessImg {
width: 135rpx;
height: 57rpx;
position: absolute;
top: 0;
right: -34rpx;
}
}
.infor {
padding-top: 25rpx;
.orderPrdImg {
width: 252rpx;
height: 146rpx !important;
}
.infordt {
padding-left: 27rpx;
flex: 2;
.title {
font-size: 24rpx;
color: #28292c;
}
.price {
font-size: 28rpx;
color: #fa1c39;
}
.date {
font-size: 24rpx;
color: #a8a8a8;
}
.num {
font-size: 24rpx;
color: #a8a8a8;
float: right;
}
}
}
.pay {
font-size: 28rpx;
color: #28292c;
text-align: right;
margin-bottom: 27rpx;
font-weight: bold;
border-bottom: 1px solid #f4f4f4;
}
.btn {
text-align: right;
display: flex;
.right {
display: flex;
margin-left: auto;
button {
display: inline-block;
margin-right: 20rpx;
background: #fff;
color: #5b5a5a;
font-size: 24rpx;
border: 2px solid #f4f4f4;
border-radius: 40rpx;
align-self: center;
justify-content: flex-end;
flex-direction: row-reverse;
}
button:after {
border: none;
}
.active {
border-color: #d8d8d8;
color: #000;
}
.kehu {
display: inline-block;
width: 50rpx;
height: 50rpx;
margin-right: 20rpx;
line-height: 50rpx;
align-self: center;
flex-direction: row-reverse;
}
}
}
}
.horizonal-tab {
background: #fff;
}
.horizonal-tab .active {
color: #23c0ba;
}
.scroll-tab {
white-space: nowrap;
/* 必要，導航欄才能橫向*/
border-bottom: 1rpx solid #eee;
text-align: center;
left: 0;
top: 150rpx;
background-color: #fff;
}
.scroll-tab-item {
display: inline-block;
/* 必要，導航欄才能橫向*/
width: 25%;
text-align: center;
padding-top: 20rpx;
}
.active .scroll-tab-line {
background: #23c0ba;
width: 90rpx;
height: 5rpx;
margin: 0 auto;
}
.demo {
display: flex;
align-items: center;
justify-content: center;
background: #23c0ba;
font-size: 26rpx;
width: 100%;
text-align: center;
position: fixed;
top: 0;
z-index: 999;
.left {
float: left;
position: absolute;
width: max-content;
height: max-content;
top: 0;
bottom: 0;
left: 20rpx;
margin: auto;
}
.clr_fff {
color: #fff;
font-size: 35rpx;
}
}
.pd_t123 {
padding-top: 123rpx;
}
.kehu {
width: 50rpx;
height: 50rpx;
margin-right: 6rpx;
line-height: 50rpx;
vertical-align: middle // margin-bottom: 10rpx;
}
uni-rate {
padding-top: 20rpx;
}
.assess {
border-top: 20rpx solid #fafafa;
background: #fefefe;
padding: 20rpx 0;
.assess_item {
padding: 20rpx;
margin: 0 auto;
border-radius: 20rpx;
}
.border-textarea {
border: 1px solid #d2d2d2;
border-radius: 10rpx;
}
.uni-rate-title {
font-size: 26rpx;
color: #4f4f4f;
}
.pd_b20 {
padding-bottom: 20rpx;
}
.confirm {
padding-top: 20rpx;
text-align: right;
.confirm_btn {
background: linear-gradient(to right, #63c8e8, #64d3e6);
border: none;
color: #fff;
font-size: 26rpx;
width: 146rpx;
height: 47rpx;
line-height: 47rpx;
padding: 0;
display: inline-block;
}
}
}
.content_change {
width: 100%;
padding: 20rpx 0 0;
.operate_box {
width: 80%;
margin: 0 auto;
// padding-top: 120rpx;
.operate_btn {
width: 50%;
height: 70rpx;
line-height: 70rpx;
font-size: 30rpx;
display: inline-block;
text-align: center;
color: #23c0ba;
border: 2px solid #23c0ba;
&::after {
border: none;
}
&:first-child {
border-right: 0;
border-radius: 10rpx 0 0 10rpx;
}
&:last-child {
border-radius: 0 10rpx 10rpx 0;
}
&.active {
background-color: #23c0ba;
color: #fff;
}
}
}
}
</style>