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>
|