程序地带

uniapp 上拉加载 下拉刷新 订单


uniapp 上拉加载 下拉刷新 订单
<template>
<view class="">
<view>
<view class="tab">
<view class="tab-l">
<view class="items" :class="current === index ? 'ac' : ''" v-for="(items, index) in en" :key="index" @tap="chose(index)">
{{ items.title}}
<view class="en_border" v-show="current == index"></view>
</view>
</view>
<view class="tab-r" v-for="(item,index) of order_list" :key="index">
<view class="order">
<view class="top">
<view class="">订单:{{item.order_no}}</view>
<view class="">
<view v-if="item.status==2">
待付款
</view>
<view v-if="item.status==3">
已支付
</view>
<view v-if="item.status==4">
已发货
</view>
<view v-if="item.status==5">
已成功
</view>
</view>
</view>
<view class="middle" v-for="(value,index) of item.goods">
<image :src="value.goods_logo" mode=""></image>
<view class="middle_left">
<view class="title">{{value.goods_title}}</view>
<!-- <view class="weight"></view> -->
<view class="specs">{{value.goods_spec}}</view>
<view class="price">
<view class="price_left">价格:<text>¥{{value.price_selling}}</text></view>
<view class="price_right">x{{value.number_goods}}</view>
</view>
</view>
</view>
<view class="freight">
<view class="">运费:<text>免运费</text></view>
<view class="">实付款:<text class="money">{{item.price_total}}</text></view>
</view>
<view class="bom" v-if="item.status==0 || item.status == 2">
<view class="cancel" @click="cancel(item.order_no)">取消订单</view>
<view class="payment" @click="pay(item.order_no)">支付订单</view>
</view>
<view class="bom" v-if="item.status == 3">
<view class="payment">
已付款
</view>
</view>
<view class="bom" v-if="item.status==4">
<view class="payment" @click="comfirm(item.order_no)">
确认收货
</view>
</view>
<view class="bom" v-if="item.status==5">
<view class="payment">
订单完成
</view>
</view>
</view>
</view>
</view>
<view v-show="isLoadMore" class="aa">
人家也是有底线的!
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
en: [{
title: '全部'
},
{
title: '待支付'
},
{
title: '已支付'
},
{
title: '已发货'
},
{
title: '已完成'
},
],
current: 0,
id: '',
status: 0,
page: 1,
isLoadMore: false, //是否加载中
order_list: [],
pagesize:'',
}
},
onLoad() {
this.user = uni.getStorageSync('user');
this.id = this.user.id;
this.allOrder();
},
onShow() {
this.allOrder();
},
// 下拉刷新
async onPullDownRefresh() {
console.log("onPullDownRefresh");
await this.allOrder();
uni.stopPullDownRefresh();
},
//上拉加载
onReachBottom() { //上拉触底函数
if (!this.isLoadMore) { //此处判断,上锁,防止重复请求
this.isLoadMore = true
this.page += 1
this.allOrder()
}
},
methods: {
//tab切换
chose(index, e) {
this.current = index;
if (this.current == 0) {
this.status = 0;
this.page = 1;
this.allOrder()
}
if (this.current == 1) {
this.status = 2;
this.page = 1;
this.allOrder()
}
if (this.current == 2) {
this.status = 3;
this.page = 1;
this.allOrder()
}
if (this.current == 3) {
this.status = 4;
this.page = 1;
this.allOrder()
}
if (this.current == 4) {
this.status = 5;
this.page = 1;
this.allOrder()
}
},
//加载数据
allOrder() {
if (this.page == 1) {
this.order_list = [];
}
this.request.order_list({
id: this.id,
status: this.status,
page: this.page
}).then(res => {
console.log(JSON.parse(res))
if (JSON.parse(res).code == 1) {
if (JSON.parse(res).data.data) {
this.order_list = this.order_list.concat(JSON.parse(res).data.data);
this.pagesize = JSON.parse(res).data.per_page;
if ( JSON.parse(res).data.data.length < this.pagesize) { //判断接口返回数据量小于请求数据量,则表示此为最后一页
this.isLoadMore = true
} else {
this.isLoadMore = false
}
} else {
uni.showToast({title:res.data.info,icon:'none'})
this.isLoadMore = true
}
}
})
},
// 支付订单
pay(e) {
this.request.pay_order({
id: this.id,
order_no: e
}).then(res => {
console.log(JSON.parse(res))
if (JSON.parse(res).code == 1) {
uni.showToast({
title: JSON.parse(res).info,
icon: 'none'
})
this.allOrder();
return;
} else {
uni.showToast({
title: JSON.parse(res).info,
icon: 'none'
})
return;
}
})
},
// 取消订单
cancel(e) {
this.request.order_del({
id: this.id,
order_no: e
}).then(res => {
console.log(JSON.parse(res))
if (JSON.parse(res).code == 1) {
uni.showToast({
title: JSON.parse(res).info,
icon: 'none'
})
this.allOrder();
return;
} else {
uni.showToast({
title: JSON.parse(res).info,
icon: 'none'
})
return;
}
})
},
// 确认订单
comfirm(e) {
this.request.order_comfirm({
id: this.id,
order_no: e
}).then(res => {
console.log(JSON.parse(res))
if (JSON.parse(res).code == 1) {
uni.showToast({
title: JSON.parse(res).info,
icon: 'none'
})
this.allOrder();
return;
} else {
uni.showToast({
title: JSON.parse(res).info,
icon: 'none'
})
return;
}
})
},
}
}
</script>
<style lang="scss">
page {
background-color: #FAFAFA;
}
.aa {
width: 100%;
text-align: center;
padding: 20rpx 0;
}
.tab {
display: flex;
flex-direction: column;
width: 100%;
box-sizing: border-box;
.tab-l {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
height: 88rpx;
padding: 0 30rpx;
background-color: #fff;
.items {
width: 20%;
text-align: center;
height: 88rpx;
line-height: 88rpx;
font-size: 28rpx;
color: #999;
.en_border {
margin: -10rpx auto 0;
width: 30rpx;
height: 8rpx;
background-color: #FF950B;
border-radius: 4rpx;
}
}
}
.tab-r {
width: 100%;
padding: 10rpx 30rpx 0;
box-sizing: border-box;
.order {
width: 690rpx;
height: 466rpx;
background: #FFFFFF;
box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0, 0, 0, 0.1);
border-radius: 8rpx;
padding: 20rpx 20rpx 30rpx;
box-sizing: border-box;
color: #333333;
margin-top: 20rpx;
.top {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
}
.middle {
margin-top: 40rpx;
display: flex;
width: 100%;
image {
width: 240rpx;
height: 210rpx;
border-radius: 8rpx;
}
.middle_left {
width: 410rpx;
padding-left: 20rpx;
.title {
font-size: 30rpx;
line-height: 42rpx;
}
.weight {
font-size: 30rpx;
line-height: 42rpx;
}
.specs {
font-size: 24rpx;
color: #999999;
padding-top: 16rpx;
}
.price {
padding-top: 50rpx;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
view {
text {
color: #FF0000;
}
}
}
}
}
// 运费 and 实付款
.freight {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 30rpx;
font-size: 24rpx;
view {
text {
color: #999;
}
}
}
// 按钮
.bom {
padding-top: 20rpx;
display: flex;
flex-direction: row-reverse;
view {
width: 150rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
font-size: 28rpx;
border-radius: 25rpx;
margin-left: 20rpx;
}
.cancel {
background-color: #CCCCCC;
color: #666666;
}
.payment {
background-color: #FF950B;
color: #FFFFFF;
}
}
}
}
}
.ac {
color: #333333 !important;
transition: all 0.3s ease;
}
</style>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_46011950/article/details/111246157

随机推荐

后台返回map类型ajax如何接收_AJAX

后台返回map类型ajax如何接收_AJAX

学习主题:AJAX学习目标:1掌握AJAX的get和post请求2掌握AJAX返回json数据js处理json数据3掌握Jquery中的AJAX1.ajax之响应状态码(1...

weixin_39537977 阅读(470)

sql 取客户端机器名不是服务器名_sql入门

sql 取客户端机器名不是服务器名_sql入门

练习:数据库安装问题问题一:如何验证mysql数据库安装成功?1.按照下图的操作从开始菜单里打开刚刚安装的mysql命令行客户端2.输入密码如果能显示出下面红...

weixin_39896617 阅读(704)

sql 取重复key中的第一条_SQL每日一题

sql 取重复key中的第一条_SQL每日一题

写在前面SQL每日一题是用牛客网的sqlite库的题目进行深度讲解(感觉进度慢的小伙伴可以自行前往刷题),这个系列要开启日更计划,每日一题,一起进步学习。题目...

weixin_39977276 阅读(597)

docker pull拉取镜像_Docker镜像细节

docker pull拉取镜像_Docker镜像细节

前言只有光头才能变强。文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y回顾前面:为什么...

andrew shen 阅读(738)

CSS样式

CSS样式简介CSS:级联样式表单,cascadesytlesheetsCSS指层叠样式表(CascadingStyleSheets)样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到HT...

/▼)守望巅峰(′~‵) 阅读(537)