这个组件真好用!!!
原先是参考swiper组件实现tab选择操作,但是bug频发,所以,就想着找一个轮子, 经过测试, 轮子真香!!!
使用例子
<template>
<view class="container">
<!-- 核心是这里 -->
<view class="state-area dflex navbar-area bg-main">
<view class="nav-item dflex-c pos-r fs h-full">
<lgd-tab :tabValue="states" :tabIndex="tabCurrentIndex" @getIndex="getIndex" underlineColor="#91a6c2" />
</view>
</view>
<!-- 滚动区 -->
<scroll-view class="h-full" scroll-y>
<!-- 空白页 -->
<use-empty v-if="orderlist.length === 0" e-style="round" e-type="cart" tip="订单数据为空" height="93vh"></use-empty>
<!-- 订单列表区 -->
<view
class="padding-lr margin-bottom-sm padding-top-sm"
:class="tabIndex === 0 ? 'padding-top-sm' : ''"
v-for="(tabItem, tabIndex) in orderlist"
:key="tabIndex"
>
<!-- 订单项 -->
<view class="order-item padding bg-main border-radius">
<view @click="todetail(item)">
<!-- 订单商品明细 -->
<view class="goods-area margin-top">
<image :src="tabItem.goodsEntity.goodsBigLogo" mode="aspectFill"></image>
<view class="right flex1">
<text class="clamp-2">{{ tabItem.goodsEntity.goodsName }}</text>
<view class="ft-dark fs-xs padding-top-xs">
<text class="margin-right">{{ tabItem.consigneeAddr }}</text>
</view>
<view class="margin-top-sm">
<text class="price ft-main fs-sm">{{ tabItem.goodsEntity.goodsPrice }}</text>
</view>
</view>
</view>
<!-- 实付款 -->
<view class="dflex-e">
<text class="fs-xs margin-right-xs">实付款</text>
<text class="price ft-main">{{ tabItem.orderPrice }}</text>
</view>
</view>
<!-- 订单操作区 -->
<view class="dflex-b margin-top-sm">
<view>
<!-- 当前状态 -->
<text class="ft-dark" v-if="tabItem.payStatus == '处理中'">退款处理中</text>
<text class="ft-dark" v-else-if="tabItem.payStatus">{{ tabItem.payStatus }}</text>
<text class="ft-dark" v-else-if="tabItem.payStatus == '待评价'">已发货</text>
<text class="ft-dark" v-else>{{ tabItem.payStatus }}</text>
</view>
<view class="dflex-e">
<view class="dflex" v-if="tabItem.payStatus == '待付款'">
<button class="action-btn border-radius-big bg-main" @click="cancelOrder(tabItem)">取消订单</button>
<button v-if="tabItem.payStatus == '待付款'" class="action-btn border-radius-big bg-main main-btn" @click="payment(tabItem)">
立即支付
</button>
<button v-if="tabItem.payStatus == '待核实'" class="action-btn border-radius-big bg-main main-btn" @click="payment(tabItem)">待核实</button>
</view>
<view class="dflex" v-if="tabItem.payStatus == '待收货'">
<button v-if="tabItem.payStatus" class="action-btn border-radius-big bg-main main-btn" @click="torefund(tabItem)">申请退款</button>
<button v-if="tabItem.payStatus" class="action-btn border-radius-big bg-main main-btn" @click="toreceipt(tabItem)">确认收货</button>
</view>
<view class="dflex" v-if="['已取消', '已完成', '已收货', '已退款'].includes(tabItem.payStatus)">
<button class="action-btn border-radius-big bg-main main-btn" @click="delOrder(tabItem)">删除订单</button>
</view>
</view>
</view>
</view>
</view>
<!-- 上拉加载更多 -->
<use-loadmore v-if="orderList.length > 0"></use-loadmore>
</scroll-view>
<!-- #endif -->
</view>
</template>
<script>
const _order = 'usemall-order';
export default {
data() {
return {
neworderlist: [],
orderlist: [],
states: ['全部', '待付款', '待收货', '已退款'],
tabCurrentIndex: 0,
reqdata: {
page: 1,
rows: 10
},
scrollLeft: 0,
title: '全部'
};
},
onShow(options) {
this.loadData();
},
onLoad(options) {
if (options.tabCurrentIndex != 0) {
this.tabCurrentIndex = options.tabCurrentIndex;
}
},
// 下拉刷新
onPullDownRefresh() {
this.loadData('refresh');
},
// 上拉加载更多
onReachBottom() {
this.loadData();
},
methods: {
getIndex(tabIndex){
this.tabCurrentIndex = tabIndex
this.loadData();
},
async loadData() {
const { data: res } = await uni.$http.get('/admin/order/list/order');
if (res.code !== 0) return uni.$showMsg();
this.neworderlist = res.page;
this.orderlist = this.neworderlist;
let cur_nav = this.states[this.tabCurrentIndex] || '全部';
if (cur_nav == '全部') {
this.orderlist = this.neworderlist;
} else {
this.orderlist = this.neworderlist.filter(x => x.payStatus == cur_nav);
}
this.reqdata.state = cur_nav;
},
// 立即支付
payment(tabItem) {
let _this = this;
console.log(tabItem);
if (tabItem.payStatus == '待付款') {
uni.showModal({
title: '支付',
content: '确认支付',
success: function(res) {
if (res.confirm) {
let tabItem1 = tabItem;
tabItem1.payStatus = '待收货';
tabItem1.goodsEntity = null;
uni.$http.post('/admin/order/update', tabItem1);
console.log(tabItem);
_this.loadData();
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
return;
}
console.log(tabItem);
},
// 删除订单
delOrder(tabItem) {
let _this = this;
uni.showModal({
title: '提示',
content: '删除订单',
success: function(res) {
if (res.confirm) {
uni.showLoading({
title: '请稍后'
});
let tabItem1 = tabItem;
tabItem1.payStatus = '已删除';
tabItem1.goodsEntity = null;
uni.$http.delete('/admin/order/delete', [tabItem1.orderId]);
console.log(tabItem);
_this.loadData();
} else if (res.cancel) {
console.log('点击取消');
}
},
complete() {
uni.hideLoading();
}
});
},
// 取消订单
cancelOrder(tabItem) {
let _this = this;
uni.showModal({
title: '提示',
content: '取消订单',
success: function(res) {
if (res.confirm) {
uni.showLoading({
title: '请稍后'
});
let tabItem1 = tabItem;
tabItem1.payStatus = '已取消';
tabItem1.goodsEntity = null;
uni.$http.post('/admin/order/update', tabItem1);
console.log(tabItem);
_this.loadData();
} else if (res.cancel) {
console.log('用户点击取消');
}
},
complete() {
uni.hideLoading();
}
});
},
// 查看物流
toexpress(item) {
// this.$api.msg('查看物流开发中');
uni.navigateTo({
url: `/pages/user/order/order-express?order_id=${item.order.order_id}`
});
},
// 已发货
toreceipt(tabItem) {
let _this = this;
uni.showModal({
title: '提示',
content: '确认收货',
success: function(res) {
if (res.confirm) {
uni.showLoading({
title: '请稍后'
});
let tabItem1 = tabItem;
tabItem1.payStatus = '已收货';
tabItem1.goodsEntity = null;
uni.$http.post('/admin/order/update', tabItem1);
console.log(tabItem);
_this.loadData();
} else if (res.cancel) {
console.log('用户点击取消');
}
},
complete() {
uni.hideLoading();
}
});
},
// 申请退款
torefund(tabItem) {
let _this = this;
uni.showModal({
title: '提示',
content: '确认退款',
success: function(res) {
if (res.confirm) {
uni.showLoading({
title: '请稍后'
});
let tabItem1 = tabItem;
tabItem1.payStatus = '已退款';
tabItem1.goodsEntity = null;
uni.$http.post('/admin/order/update', tabItem1);
console.log(tabItem);
_this.loadData();
} else if (res.cancel) {
console.log('用户点击取消');
}
},
complete() {
uni.hideLoading();
}
});
},
// 评价
toevaluate(item) {
uni.navigateTo({
url: `/pages/user/order/order-evaluate?id=${item.order.order_id}`
});
}
}
};
</script>
<style lang="scss">
page,
.container {
min-height: 100%;
background: #f2f2f2;
}
/* 订单状态区 */
.navbar-area {
white-space: nowrap;
}
.state-area {
height: 7vh;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
z-index: 10;
top: 0;
}
.nav-item {
flex: 1;
&.active {
&:after {
content: '';
position: absolute;
left: 50%;
transform: translate(-50%);
bottom: 0;
width: 44px;
height: 0;
border-bottom: 2px solid #ee2734;
}
}
}
/* 订单轮播区 */
.swiper-area {
height: 93vh;
}
/* 订单区 */
.order-area {
}
/* 订单项 */
.order-item {
/* 订单商品明细区 */
.goods-area {
display: flex;
image {
width: 180rpx;
height: 180rpx;
}
.right {
padding: 0 30upx 0 24upx;
overflow: hidden;
.attr-box {
font-size: 32rpx;
color: #626262;
padding: 10upx 12upx;
}
}
}
/* 操作按钮 */
.action-btn {
width: 156rpx;
height: inherit;
line-height: inherit;
margin: 0;
margin-left: 20rpx;
padding: 12rpx 0;
font-size: 26rpx;
color: #333;
/* #ifdef MP-QQ || MP-ALIPAY */
border: 1px solid;
/* #endif */
&:after {
border-radius: 100px;
}
&.main-btn {
background: #fff9f9;
color: #ff6a6c;
&:after {
border-color: #f7bcc8;
}
}
}
}
</style>
版权声明：本文为lv1399447原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。