319 lines
12 KiB
Vue
319 lines
12 KiB
Vue
<template>
|
||
<view class="">
|
||
<!-- Header -->
|
||
<view class="header bg-white">
|
||
<u-search placeholder="请输入商品名称" :show-action="false" @change="change(current)" v-model="keyword"></u-search>
|
||
</view>
|
||
|
||
<!-- Nav -->
|
||
<view class="nav bg-white">
|
||
<u-tabs name="name" :show-bar="false" :list="list" :is-scroll="true" :current="current" @change="change"
|
||
active-color="#40AFFA" />
|
||
</view>
|
||
<!-- Section -->
|
||
<view class="section" :style="{'height': height}">
|
||
<swiper :duration="400" style="height: 100%; overflow: hidden;" @change="change" :current="current">
|
||
<swiper-item v-for="(items, index) in list" :key="index">
|
||
<view v-show="index == current">
|
||
<mescroll-uni bottom="220rpx" ref="mescrollRef" top="0rpx" height="100%" @init="mescrollInit"
|
||
@up="upCallback" :up="upOption" @down="downCallback">
|
||
<view class="title muted sm">
|
||
共{{count}}笔订单
|
||
</view>
|
||
|
||
<block v-for="(items2, index2) in items.lists" :key="index2">
|
||
<order-card :data="items2">
|
||
|
||
<template v-if="items2.edit_address_btn">
|
||
<router-link :to="'/pages/address_edit/address_edit?id='+items2.id">
|
||
<button class="btn hollow br60 flex row-center normal">修改地址</button>
|
||
</router-link>
|
||
</template>
|
||
<template v-if="items2.content_btn">
|
||
<router-link :to="'/pages/order_detail/order_detail?id='+items2.id">
|
||
<button class="btn solid br60 flex row-center normal">查看内容</button>
|
||
</router-link>
|
||
</template>
|
||
<template v-if="items2.shop_cancel_btn">
|
||
<button class="btn solid br60 flex row-center normal"
|
||
@click="openFunc(items2, 'close')">取消订单</button>
|
||
</template>
|
||
<template v-if="items2.to_ship_btn">
|
||
<router-link :to="'/bundle/pages/deliver_goods/deliver_goods?id='+items2.id">
|
||
<button class="btn solid br60 flex row-center normal">去发货</button>
|
||
</router-link>
|
||
</template>
|
||
<template v-if="items2.take_btn">
|
||
<button class="btn solid br60 flex row-center normal"
|
||
@click="openFunc(items2, 'confirm')">确认收货</button>
|
||
</template>
|
||
<template v-if="items2.delivery_btn">
|
||
<button class="btn hollow br60 flex row-center normal"
|
||
@click="openFunc(items2, 'recycle')">查看物流</button>
|
||
</template>
|
||
<template v-if="items2.del_btn">
|
||
<button class="btn hollow br60 flex row-center normal"
|
||
@click="openFunc(items2, 'del')">删除</button>
|
||
</template>
|
||
</order-card>
|
||
</block>
|
||
|
||
</mescroll-uni>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<modal height="200rpx" v-model="close" @confirm="orderSetting">
|
||
<view class="black n" style="height: 200rpx;">
|
||
确认取消该订单吗?
|
||
</view>
|
||
</modal>
|
||
|
||
<modal height="200rpx" v-model="del" @confirm="orderSetting">
|
||
<view class="black nr" style="height: 200rpx;">
|
||
确认删除该订单吗?
|
||
</view>
|
||
</modal>
|
||
|
||
<modal height="200rpx" v-model="confirm" @confirm="orderSetting">
|
||
<view class="black nr" style="height: 200rpx;">
|
||
确认用户已收到货？请谨慎处理！
|
||
</view>
|
||
</modal>
|
||
|
||
<modal height="200rpx" :cancelShow="false" v-model="recycle">
|
||
<view class="black nr" style="height: 200rpx;">
|
||
<view class="m-t-40">快递公司： {{logistics.shipping_name}}</view>
|
||
<view class="m-t-20">快递公司： {{logistics.invoice_no}} <text class="copy" @click="copy(logistics.invoice_no)">复制</text></view>
|
||
</view>
|
||
</modal>
|
||
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||
import {
|
||
apiOrderList,
|
||
apiOrderClose,
|
||
apiOrderConfirm,
|
||
apiOrderLogistics,
|
||
apiOrderDelete
|
||
} from '@/api/order'
|
||
import {
|
||
debounce,
|
||
copy
|
||
} from "@/utils/tools.js"
|
||
export default {
|
||
mixins: [MescrollMixin],
|
||
data() {
|
||
return {
|
||
height: '100%',
|
||
|
||
keyword: '',
|
||
list: [{
|
||
name: '全部',
|
||
type: 'all',
|
||
lists: []
|
||
},
|
||
{
|
||
name: '待付款',
|
||
type: 'pay',
|
||
lists: []
|
||
},
|
||
{
|
||
name: '待发货',
|
||
type: 'delivery',
|
||
lists: []
|
||
},
|
||
{
|
||
name: '待收货',
|
||
type: 'receiving',
|
||
lists: []
|
||
},
|
||
{
|
||
name: '已完成',
|
||
type: 'finish',
|
||
lists: []
|
||
},
|
||
{
|
||
name: '已取消',
|
||
type: 'close',
|
||
lists: []
|
||
}
|
||
],
|
||
current: 0,
|
||
count: 0,
|
||
|
||
action: '',
|
||
|
||
close: false,
|
||
del: false,
|
||
confirm: false,
|
||
recycle: false,
|
||
|
||
// 物流
|
||
logistics: {
|
||
shipping_name: '-',
|
||
invoice_no: ''
|
||
},
|
||
|
||
upOption: {
|
||
empty: {
|
||
icon: '/static/images/empty/order.png',
|
||
tip: '暂无相关订单！', // 提示
|
||
fixed: true,
|
||
top: "200rpx",
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
updated() {
|
||
|
||
},
|
||
|
||
methods: {
|
||
change(event) {
|
||
let index;
|
||
event.detail ? index = event.detail.current : index = event
|
||
this.current = Number(index)
|
||
this.$refs.mescrollRef[this.current].mescroll.resetUpScroll()
|
||
},
|
||
|
||
upCallback(page) {
|
||
const index = this.current;
|
||
const pageNum = page.num
|
||
const pageSize = page.size
|
||
|
||
apiOrderList({
|
||
goods_name: this.keyword,
|
||
type: this.list[index].type,
|
||
page_no: pageNum,
|
||
page_size: pageSize,
|
||
}).then(({
|
||
list,
|
||
size,
|
||
more,
|
||
count,
|
||
}) => {
|
||
// 如果是第一页或是搜索时需手动置空列表
|
||
if (pageNum == 1 || this.keyword) this.list[index].lists = []
|
||
const hasNext = !!more;
|
||
// 重置列表数据
|
||
this.count = count
|
||
this.list[index].lists = [...this.list[index].lists, ...list]
|
||
this.$refs.mescrollRef[index].mescroll.endSuccess(list.length, hasNext);
|
||
}).catch((err) => {
|
||
console.log(err)
|
||
this.mescroll.endErr()
|
||
})
|
||
},
|
||
|
||
copy(content) {
|
||
copy(content)
|
||
},
|
||
|
||
async openFunc(item, action) {
|
||
if(action == 'recycle') {
|
||
const res = await apiOrderLogistics({id: item.id})
|
||
this.logistics = res;
|
||
}
|
||
|
||
this.curData = item;
|
||
this.action = action;
|
||
this[action] = true;
|
||
},
|
||
|
||
// 操作订单
|
||
async orderSetting() {
|
||
let id = this.curData.id,
|
||
action = this.action
|
||
|
||
if (action == 'close') {
|
||
await apiOrderClose({id})
|
||
} else if (action == 'del') {
|
||
await apiOrderDelete({id})
|
||
} else if (action == 'confirm') {
|
||
await apiOrderConfirm({id})
|
||
}
|
||
|
||
this.$refs.mescrollRef[this.current].mescroll.resetUpScroll()
|
||
this.$refs.uToast.show({
|
||
title: '操作成功',
|
||
type: 'success'
|
||
})
|
||
}
|
||
},
|
||
|
||
onShow() {
|
||
// 使用防抖是为了防止v-show的时候出发多条数据，所以使用防抖触发多次的时候可以只成为触发一次，优化性能请求
|
||
this.upCallback = debounce(this.upCallback, 200, this)
|
||
this.$nextTick(() => {
|
||
this.$refs.mescrollRef[this.current].mescroll.resetUpScroll()
|
||
})
|
||
|
||
uni.getSystemInfo({
|
||
success: (res) => {
|
||
this.height = res.windowHeight - 107 + 'px';
|
||
}
|
||
});
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss">
|
||
/*根元素需要有固定的高度*/
|
||
page {
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
|
||
.header {
|
||
padding: 16rpx 30rpx;
|
||
}
|
||
|
||
.nav {
|
||
padding: 15rpx 0;
|
||
}
|
||
|
||
.section {
|
||
overflow: hidden;
|
||
.title {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.btn {
|
||
margin-top: 20rpx;
|
||
margin-left: 20rpx;
|
||
width: 180rpx;
|
||
height: 64rpx;
|
||
font-size: $-font-size-sm;
|
||
}
|
||
|
||
.solid {
|
||
color: $-color-white;
|
||
background-color: $-color-primary;
|
||
}
|
||
|
||
.hollow {
|
||
color: $-color-lighter;
|
||
border: 1px solid #DBDBDB;
|
||
}
|
||
|
||
|
||
}
|
||
.copy {
|
||
font-size: $-font-size-xs;
|
||
margin-left: 20rpx;
|
||
padding: 4rpx 10rpx;
|
||
border-radius: 4rpx;
|
||
color: $-color-primary;
|
||
background-color: rgba(64, 175, 250, .1);
|
||
}
|
||
}
|
||
</style>
|