You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
408 lines
9.4 KiB
408 lines
9.4 KiB
<template>
|
|
<view class="page_box">
|
|
<view class="head_box">
|
|
<!-- tab -->
|
|
<view class="order-nav u-flex">
|
|
<view class="nav-item u-flex-col u-flex-1 u-col-center" v-for="nav in orderState" :key="nav.id"
|
|
@tap="onNav(nav.type)">
|
|
<view class="item-title">{{ nav.title }}</view>
|
|
<text class="nav-line" :class="{ 'line-active': orderType === nav.type }"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="content_box">
|
|
<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
|
|
<!-- 订单列表 -->
|
|
<view class="order-list" v-for="(order, orderIndex) in orderList" :key="order.id"
|
|
@tap.stop="jump('/pages/order/detail', { id: order.id })">
|
|
<view class="order-head u-flex u-row-between">
|
|
<text class="no">订单编号：{{ order.order_sn }}</text>
|
|
<text class="state">{{ order.status_name }}</text>
|
|
</view>
|
|
<view class="goods-order" v-for="goods in order.item" :key="goods.id">
|
|
<view class="order-content">
|
|
<shopro-mini-card :title="goods.goods_title" :image="goods.goods_image">
|
|
<template #describe>
|
|
<view class="order-sku u-ellipsis-1">
|
|
<text class="order-num">数量:{{ goods.goods_num || 0 }};</text>
|
|
{{ goods.goods_sku_text ? goods.goods_sku_text : '' }}
|
|
</view>
|
|
</template>
|
|
<template #cardBottom>
|
|
<view class="order-price-box u-flex ">
|
|
<text class="order-price font-OPPOSANS">￥{{ goods.goods_price || 0 }}</text>
|
|
<button class="u-reset-button status-btn"
|
|
v-if="goods.status_name">{{ goods.status_name }}</button>
|
|
</view>
|
|
</template>
|
|
</shopro-mini-card>
|
|
</view>
|
|
</view>
|
|
<view class="order-bottom">
|
|
<view class="all-msg u-flex font-OPPOSANS">
|
|
优惠：
|
|
<text class="all-unit">￥</text>
|
|
{{ order.discount_fee }} ，运费：
|
|
<text class="all-unit">￥</text>
|
|
{{ order.dispatch_amount }} ，{{ order.status <= 0 ? '需付款' : '实付款' }}：
|
|
<view class="all-money font-OPPOSANS">{{ order.total_fee }}</view>
|
|
</view>
|
|
|
|
<!-- 按钮 -->
|
|
<view class="btn-box u-flex" v-if="order.btns.length">
|
|
<block v-for="orderBtn in order.btns" :key="orderBtn">
|
|
<button v-if="orderBtn === 'cancel'" @tap.stop="onCancel(order.id, orderIndex)"
|
|
class="u-reset-button obtn1">取消订单</button>
|
|
<button v-if="orderBtn === 'pay'" @tap.stop="onPay(order.id)"
|
|
class="u-reset-button obtn2">立即支付</button>
|
|
<button v-if="orderBtn === 'groupon'"
|
|
@tap.stop="jump('/pages/activity/groupon/detail', { id: order.ext_arr.groupon_id })"
|
|
class="u-reset-button obtn2">
|
|
拼团详情
|
|
</button>
|
|
<button v-if="orderBtn === 'delete'" @tap.stop="onDelete(order.id, orderIndex)"
|
|
class="u-reset-button obtn3">删除</button>
|
|
<button v-if="orderBtn === 'express'" @tap.stop="onExpress(order.id, orderIndex)"
|
|
class="u-reset-button obtn1">查看物流</button>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空白页 -->
|
|
<shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_groupon.png'"
|
|
tipText="暂无商品，还有更多好货等着你噢~"></shopro-empty>
|
|
<!-- 更多 -->
|
|
<u-loadmore v-show="orderList.length" height="80rpx" :status="loadStatus" icon-type="flower"
|
|
color="#ccc" />
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
isEmpty: false,
|
|
loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
|
|
currentPage: 1,
|
|
lastPage: 1,
|
|
orderType: 'all',
|
|
orderList: [],
|
|
orderState: [{
|
|
id: 0,
|
|
title: '全部',
|
|
type: 'all'
|
|
},
|
|
{
|
|
id: 1,
|
|
title: '待付款',
|
|
type: 'nopay'
|
|
},
|
|
{
|
|
id: 2,
|
|
title: '待发货',
|
|
type: 'nosend'
|
|
},
|
|
{
|
|
id: 3,
|
|
title: '待收货',
|
|
type: 'noget'
|
|
},
|
|
{
|
|
id: 4,
|
|
title: '待评价',
|
|
type: 'nocomment'
|
|
}
|
|
]
|
|
};
|
|
},
|
|
onShow() {
|
|
if (this.$Route.query.type) {
|
|
this.orderType = this.$Route.query.type;
|
|
}
|
|
this.orderList = [];
|
|
this.currentPage = 1;
|
|
this.lastPage = 1;
|
|
this.getOrderList();
|
|
},
|
|
methods: {
|
|
jump(path, parmas) {
|
|
this.$Router.push({
|
|
path: path,
|
|
query: parmas
|
|
});
|
|
},
|
|
|
|
// tab切换
|
|
onNav(id) {
|
|
if (this.orderType !== id) {
|
|
this.orderType = id;
|
|
this.orderList = [];
|
|
this.currentPage = 1;
|
|
this.lastPage = 1;
|
|
this.getOrderList();
|
|
}
|
|
},
|
|
|
|
// 订单列表
|
|
getOrderList() {
|
|
let that = this;
|
|
that.loadStatus = 'loading';
|
|
that.$http('order.index', {
|
|
type: that.orderType,
|
|
page: that.currentPage
|
|
}, '加载中...').then(res => {
|
|
if (res.code === 1) {
|
|
that.orderList = [...that.orderList, ...res.data.data];
|
|
that.isEmpty = !that.orderList.length;
|
|
that.lastPage = res.data.last_page;
|
|
that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
|
|
}
|
|
});
|
|
},
|
|
|
|
// 加载更多
|
|
loadMore() {
|
|
if (this.currentPage < this.lastPage) {
|
|
this.currentPage += 1;
|
|
this.getOrderList();
|
|
}
|
|
},
|
|
|
|
// 删除订单
|
|
onDelete(orderId, orderIndex) {
|
|
let that = this;
|
|
uni.showModal({
|
|
title: '删除订单',
|
|
content: '确定要删除这个订单么？',
|
|
cancelText: '取消',
|
|
confirmText: '删除',
|
|
success: res => {
|
|
if (res.confirm) {
|
|
that.$http('order.deleteOrder', {
|
|
id: orderId
|
|
},
|
|
'删除中...'
|
|
).then(res => {
|
|
if (res.code === 1) {
|
|
that.$u.toast(res.msg);
|
|
that.orderList.splice(orderIndex, 1);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
// 取消订单
|
|
onCancel(id, orderIndex) {
|
|
let that = this;
|
|
that.$http('order.cancel', {
|
|
id: id
|
|
},
|
|
'取消中...'
|
|
).then(res => {
|
|
if (res.code === 1) {
|
|
that.$u.toast(res.msg);
|
|
this.orderList.splice(orderIndex, 1);
|
|
}
|
|
});
|
|
},
|
|
|
|
// 立即购买
|
|
onPay(id) {
|
|
uni.navigateTo({
|
|
url: `/pages/order/payment/method?orderId=${id}&orderType=goods`
|
|
});
|
|
},
|
|
|
|
// 查看物流
|
|
onExpress(orderId) {
|
|
let that = this;
|
|
that.$http('order.expressList', {
|
|
order_id: orderId
|
|
}).then(res => {
|
|
if (res.code === 1) {
|
|
if (res.data.length == 1) {
|
|
this.jump('/pages/order/express/express-detail', { orderId: orderId, expressId: res
|
|
.data[0].id });
|
|
} else if (res.data.length > 1) {
|
|
this.jump('/pages/order/express/express-list', { orderId: orderId });
|
|
} else {
|
|
that.$u.toast('暂无包裹~');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.order-nav {
|
|
background: #fff;
|
|
height: 80rpx;
|
|
|
|
.nav-item {
|
|
flex: 1;
|
|
|
|
.item-title {
|
|
font-size: 30rpx;
|
|
|
|
font-weight: 400;
|
|
color: rgba(51, 51, 51, 1);
|
|
line-height: 76rpx;
|
|
}
|
|
|
|
.nav-line {
|
|
width: 100rpx;
|
|
height: 4rpx;
|
|
background: #fff;
|
|
}
|
|
|
|
.line-active {
|
|
// background: rgba(230, 184, 115, 1);
|
|
background: #F45F77;
|
|
}
|
|
}
|
|
}
|
|
|
|
.order-list {
|
|
background: #fff;
|
|
margin: 20rpx 0;
|
|
|
|
.order-bottom {
|
|
padding-bottom: 20rpx;
|
|
|
|
.btn-box {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.all-msg {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
justify-content: flex-end;
|
|
margin-bottom: 10rpx;
|
|
padding: 0 30rpx;
|
|
|
|
.all-unit {
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
.all-money {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
|
|
&::before {
|
|
content: '￥';
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.obtn1 {
|
|
width: 160rpx;
|
|
line-height: 60rpx;
|
|
background: rgba(238, 238, 238, 1);
|
|
border-radius: 30rpx;
|
|
font-size: 26rpx;
|
|
|
|
font-weight: 400;
|
|
color: rgba(51, 51, 51, 1);
|
|
margin-right: 20rpx;
|
|
padding: 0;
|
|
}
|
|
|
|
.obtn2 {
|
|
width: 160rpx;
|
|
line-height: 60rpx;
|
|
background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
|
|
box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
|
|
border-radius: 30rpx;
|
|
margin-right: 20rpx;
|
|
font-size: 26rpx;
|
|
|
|
font-weight: 400;
|
|
color: #fff;
|
|
padding: 0;
|
|
}
|
|
|
|
.obtn3 {
|
|
background: #ffeeee;
|
|
color: #e50808;
|
|
width: 160rpx;
|
|
line-height: 60rpx;
|
|
border-radius: 30rpx;
|
|
margin-right: 20rpx;
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.order-head {
|
|
padding: 0 25rpx;
|
|
height: 77rpx;
|
|
border-bottom: 1rpx solid #dfdfdf;
|
|
|
|
.no {
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.state {
|
|
font-size: 26rpx;
|
|
color: #F45F77;
|
|
}
|
|
}
|
|
|
|
.goods-order {
|
|
border-bottom: 1px solid rgba(223, 223, 223, 0.5);
|
|
padding: 20rpx 20rpx 0;
|
|
margin-bottom: 20rpx;
|
|
|
|
.order-content {
|
|
padding-bottom: 20rpx;
|
|
|
|
.order-sku {
|
|
font-size: 24rpx;
|
|
|
|
font-weight: 400;
|
|
color: rgba(153, 153, 153, 1);
|
|
width: 450rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.order-num {
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
|
|
.order-price-box {
|
|
.status-btn {
|
|
height: 32rpx;
|
|
border: 1rpx solid rgba(207, 169, 114, 1);
|
|
border-radius: 15rpx;
|
|
font-size: 20rpx;
|
|
font-weight: 400;
|
|
color: rgba(168, 112, 13, 1);
|
|
padding: 0 10rpx;
|
|
margin-left: 20rpx;
|
|
background: rgba(233, 183, 102, 0.16);
|
|
}
|
|
|
|
.order-price {
|
|
font-size: 26rpx;
|
|
|
|
font-weight: 600;
|
|
color: rgba(51, 51, 51, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|