|
|
<template>
<view id="order-index"> <view class="navbar mx-1px-bottom"> <block v-for="(item, index) in tabList" :key="index" > <view :id="index" class="navbar-item" :class="activeIndex == index ? 'activity' : ''" @tap="tabClick"> <view class="navbar-title">{{item.title}} <span class="triangle" v-if="index == 0 && activeIndex == 0"></span> </view> </view> </block> <view class="navbar-slider" :style="'width: ' + width + 'px; transform: translateX(' + sliderOffset + 'px); -webkit-transform: translateX(' + sliderOffset + 'px);'"></view> <!-- <view class="tab-switch" @tap="tabSwitch"> <i class="iconfont icon-qiehuan"></i> </view> --> <view class="select-list" v-if="isShow"> <view class="item mx-1px-bottom" :class="activeType == 'all' ? 'activeItem' : ''" @tap="changeType" data-type="all"> <span>全部会员</span> <span class="iconfont icon-Group96"></span> </view> <view class="item mx-1px-bottom" :class="activeType == 'level1' ? 'activeItem' : ''" @tap="changeType" data-type="level1"> <span>一级会员</span> <span class="iconfont icon-Group96"></span> </view> <view class="item mx-1px-bottom" :class="activeType == 'level2' ? 'activeItem' : ''" @tap="changeType" data-type="level2"> <span>二级会员</span> <span class="iconfont icon-Group96"></span> </view> </view> </view> <view class="tab-panel"> <view class="tab-content" :hidden="activeIndex != 0"> <view class="order-box"> <view class="order-item__none" v-if="dataList[status[activeIndex]][0] == '' && tabList[activeIndex].init"> 暂无数据 </view> <view v-for="(item,idx) in dataList[status[activeIndex]][0]" :key="idx"> <view class="order-item" :data-no="order.order.order_no" v-for="(order, index) in dataList[status[activeIndex]][0][idx]" :key="index" @tap="jump"> <view class="item-add mx-1px-bottom"> <view class="left-info"> 分销佣金：<span>¥ {{order.commission}}</span> </view> <view class="right-info" v-if="order.status == 0">待结算</view> <view class="right-info" v-if="order.status == 1">已入账</view> <view class="right-info" v-if="order.status == 2">已失效</view> </view> <view class="item-top"> <view class="indent mx-1px-bottom"> <view class="order-num"> 订单编号：{{order.agent_order_no}} </view> <view class="order-type"> <block v-if="!order.has_refund"> {{typeList[order.order.status]}} </block> <block v-else> 售后中 </block> </view> </view> </view> <view class="item-middle"> <view class="middle-item mx-1px-bottom" v-for="(good, index) in order.order.items" :key="index" > <image :src="good.item_meta.image"></image> <view class="text"> <view class="names"> {{good.item_name}} </view> <view class="model"> {{good.item_meta.specs_text}} </view> </view> <view class="money-box"> <view> {{good.quantity}}件 </view> <view> ￥{{good.total_yuan}} </view> </view> </view> </view> </view> </view> <view class="loadingbox" :hidden="!tabList[0].show"> {{showText}} </view> </view> </view> <view class="tab-content" :hidden="activeIndex != 1"> <view class="order-box"> <view class="order-item__none" v-if="dataList[status[activeIndex]][1] == '' && tabList[activeIndex].init"> 暂无数据 </view> <view v-for="(item, idx) in dataList[status[activeIndex]][1]" :key="idx" > <view class="order-item" :data-no="order.order.order_no" v-for="(order, index) in dataList[status[activeIndex]][1][idx]" :key="index" @tap="jump"> <view class="item-add mx-1px-bottom"> <view class="left-info"> 分销佣金：<span>¥ {{order.commission}}</span> </view> <view class="right-info">待结算</view> </view> <view class="item-top"> <view class="indent mx-1px-bottom"> <view class="order-num"> 订单编号：{{order.agent_order_no}} </view> <view class="order-type"> <block v-if="!order.has_refund"> {{typeList[order.order.status]}} </block> <block v-else> 售后中 </block> </view> </view> </view> <view class="item-middle"> <view class="middle-item mx-1px-bottom" v-for="(good, index) in order.order.items" :key="index" > <image :src="good.item_meta.image"></image> <view class="text"> <view class="names"> {{good.item_name}} </view> <view class="model"> {{good.item_meta.specs_text}} </view> </view> <view class="money-box"> <view> {{good.quantity}}件 </view> <view> ￥{{good.total_yuan}} </view> </view> </view> </view> </view> </view> <view class="loadingbox" :hidden="!tabList[1].show"> {{showText}} </view> </view> </view> <view class="tab-content" :hidden="activeIndex != 2"> <view class="order-box"> <view class="order-item__none" v-if="dataList[status[activeIndex]][2] == '' && tabList[activeIndex].init"> 暂无数据 </view> <view v-for="(item, idx) in dataList[status[activeIndex]][2]" :key="idx" > <view class="order-item" :data-no="order.order.order_no" v-for="(order, index) in dataList[status[activeIndex]][2][idx]" :key="index" @tap="jump"> <view class="item-add mx-1px-bottom"> <view class="left-info"> 分销佣金：<span>¥{{order.commission}}</span> </view> <view class="right-info">已入账</view> </view> <view class="item-top"> <view class="indent mx-1px-bottom"> <view class="order-num"> 订单编号：{{order.agent_order_no}} </view> <view class="order-type"> <block v-if="!order.has_refund"> {{typeList[order.order.status]}} </block> <block v-else> 售后中 </block> </view> </view> </view> <view class="item-middle"> <view class="middle-item mx-1px-bottom" v-for="(good, index) in order.order.items" :key="index" > <image :src="good.item_meta.image"></image> <view class="text"> <view class="names"> {{good.item_name}} </view> <view class="model"> {{good.item_meta.specs_text}} </view> </view> <view class="money-box"> <view> {{good.quantity}}件 </view> <view> ￥{{good.total_yuan}} </view> </view> </view> </view> </view> </view> <view class="loadingbox" :hidden="!tabList[2].show"> {{showText}} </view> </view> </view> <view class="tab-content" :hidden="activeIndex != 3"> <view class="order-box"> <view class="order-item__none" v-if="dataList[status[activeIndex]][3] == '' && tabList[activeIndex].init"> 暂无数据 </view> <view v-for="(item, idx) in dataList[status[activeIndex]][3]" :key="idx"> <view class="order-item" :data-no="order.order.order_no" v-for="(order, index) in dataList[status[activeIndex]][3][idx]" :key="index" @tap="jump"> <view class="item-add mx-1px-bottom"> <view class="left-info"> 分销佣金：<span>¥ {{order.commission}}</span> </view> <view class="right-info">已失效</view> </view> <view class="item-top"> <view class="indent mx-1px-bottom"> <view class="order-num"> 订单编号：{{order.agent_order_no}} </view> <view class="order-type"> <block v-if="!order.has_refund"> {{typeList[order.order.status]}} </block> <block v-else> 售后中 </block> </view> </view> </view> <view class="item-middle"> <view class="middle-item mx-1px-bottom" v-for="(good, index) in order.order.items" :key="index" > <image :src="good.item_meta.image"></image> <view class="text"> <view class="names"> {{good.item_name}} </view> <view class="model"> {{good.item_meta.specs_text}} </view> </view> <view class="money-box"> <view> {{good.quantity}}件 </view> <view> ￥{{good.total_yuan}} </view> </view> </view> </view> </view> </view> <view class="loadingbox" :hidden="!tabList[3].show"> {{showText}} </view> </view> </view> </view> <view class="mask" v-if="isShow" @tap="closeType"></view></view></template><script>import {pageLogin, getUrl,config,is} from '@/common/js/utils.js';
export default { data() { return { status: { 0: 0, 1: 0, 2: 0, 3: 0, 4: 0 }, activeType: 'all', isShow: false, activeIndex: 0, sliderOffset: 0, sliderLeft: 0, width: 0, dataList: { //0 是线上 ， 1 是线下
0: { 0: [], 1: [], 2: [], 3: [], 4: [] }, 1: { 0: [], 1: [], 2: [], 3: [], 4: [] } }, tabList: [{ title: "全部会员", init: false, statusNum: { 0: { page: 0, more: true }, 1: { page: 0, more: true } }, show: false }, { title: "待结算", init: false, statusNum: { 0: { page: 0, more: true }, 1: { page: 0, more: true } }, show: false }, { title: "已入账", init: false, statusNum: { 0: { page: 0, more: true }, 1: { page: 0, more: true } }, show: false }, { title: "已失效", init: false, statusNum: { 0: { page: 0, more: true }, 1: { page: 0, more: true } }, show: false }], typeList: { 0: '临时订单', 1: '待付款', 2: '付款成功', 3: '已发货', 4: '已完成', 5: '已完成', 6: '已取消', 7: '已退款', 8: '已作废', 9: '已删除', 31: '部分已发货' }, showText: '正在加载下一页数据' }; },
onReachBottom(e) { // debugger
var status = this.activeIndex; var statusPage = this.status[status]; var page = this.tabList[status].statusNum[statusPage].page + 1; var tabList = `tabList[${status}]`;
if (this.tabList[status].statusNum[statusPage].more) { this.setData({ [`${tabList}.show`]: true }); this.orderList(status, page, this.activeType); } else { wx.showToast({ image: '../../../static/error.png', title: '再拉也没有啦' }); } },
onShow(e) { wx.showLoading({ title: "加载中", mask: true }); wx.getSystemInfo({ success: res => { this.setData({ width: res.windowWidth / this.tabList.length, sliderOffset: res.windowWidth / this.tabList.length * this.activeIndex }); } }); var tabStatus = this.status[this.activeIndex]; // 都是0，线上
this.orderList(tabStatus, 1, this.activeType); },
onLoad(e) { pageLogin(getUrl());
if (e.type) { this.setData({ activeIndex: e.type }); } }, methods: { jump(e) { wx.navigateTo({ url: '/pages/distribution/pusherOrder/pusherOrder?order_no=' + e.currentTarget.dataset.no }); },
jumpSearch() { wx.navigateTo({ url: '/pages/order/search/search' }); },
closeType() { this.setData({ isShow: false }); },
//切换一级会员，二级会员
changeType(e) { var type = e.currentTarget.dataset.type; var txt = '';
if (type == 'all') { txt = "全部会员"; } else if (type == 'level1') { txt = "一级会员"; } else { txt = "二级会员"; }
this.tabList.forEach(val => { val.init = false; }); // 重新赋值
var newDataLsit = { 0: { 0: [], 1: [], 2: [], 3: [], 4: [] }, 1: { 0: [], 1: [], 2: [], 3: [], 4: [] } }; this.tabList[0].title = txt; this.setData({ activeType: type, tabList: this.tabList, isShow: false, dataList: newDataLsit }); this.orderList(0, 1, this.activeType); },
tabClick(e) { var status = e.currentTarget.id; // 0,1,2,3
if (status == 0) { this.setData({ isShow: !this.isShow, sliderOffset: e.currentTarget.offsetLeft, activeIndex: status }); }
if (!this.isShow) { this.setData({ sliderOffset: e.currentTarget.offsetLeft, activeIndex: status }); }
if (!this.tabList[status].init) { if (!this.isShow) { wx.showLoading({ title: "加载中", mask: true }); this.orderList(status, 1, this.activeType); } } },
pay(e) { var order_no = e.currentTarget.dataset.no; wx.navigateTo({ url: '/pages/store/payment/payment?order_no=' + order_no }); },
delete(e) { wx.showModal({ title: '', content: '是否删除该订单', success: res => { if (res.confirm) { this.deleteOrder(e.currentTarget.dataset.no); } } }); },
submit(e) { wx.showModal({ title: '', content: '是否确认收货', success: res => { if (res.confirm) { this.receiveOrder(e.currentTarget.dataset.no); } } }); },
// 获取订单列表
orderList(status, page, type) { var token = this.$cookieStorage.get('user_token'); var newstatus = '';
if (status == 0) { newstatus = ''; } else if (status == 1) { newstatus = "wait"; } else if (status == 2) { newstatus = "close"; } else if (status == 3) { newstatus = "lose"; }
this.$http.get({ api: 'api/distribution/order/list', header: { Authorization: token }, data: { status: newstatus, type: type, page: page } }).then(res => { if (res.statusCode == 200) { res = res.data;
if (res.status) { var pages = res.meta.pagination; var current_page = pages.current_page; var total_pages = pages.total_pages; var tabList = `tabList[${status}]`; var statusPage = `status[${status}]`; var dataStatus = this.status[this.activeIndex]; //0 线上
// this.setData({
// [`dataList.${dataStatus}[${status}][${page - 1}]`]: res.data,
// [`${tabList}.init`]: true,
// [`${tabList}.statusNum.${dataStatus}.page`]: current_page,
// [`${tabList}.statusNum.${dataStatus}.more`]: current_page < total_pages,
// [`${tabList}.show`]: false
// });
this.$set(this.dataList[dataStatus][status], page -1, res.data); this.tabList[status].init=true; this.tabList[status].statusNum[dataStatus].page=current_page; this.tabList[status].statusNum[dataStatus].more=current_page < total_pages; this.tabList[status].show=false; /*console.log(this.tabList[status].statusNum[dataStatus]);*/ } else { wx.showToast({ title: res.message, image: '../../../static/error.png' }); } } else { wx.showModal({ title: '', content: '请求失败', showCancel: false }); }
wx.hideLoading(); }).catch(rej => { wx.showToast({ title: "请求失败", image: '../../../static/error.png' }); wx.hideLoading(); }); },
// 确认收货
receiveOrder(orderNo) { var token = this.$cookieStorage.get('user_token'); this.$http.post({ api: 'api/shopping/order/received', header: { Authorization: token }, data: { order_no: orderNo } }).then(res => { if (res.statusCode == 200) { res = res.data; wx.showModal({ title: '', content: res.message, showCancel: false, success: res => { if (res.confirm) { this.orderList(0, this.activeIndex); } } }); } else { wx.showModal({ title: '', content: '取消订单失败, 请检查您的网络状态', showCancel: false }); } }).catch(rej => { wx.showModal({ title: '', content: '取消订单失败, 请检查您的网络状态', showCancel: false }); }); },
// 删除订单
deleteOrder(orderNo) { var token = this.$cookieStorage.get('user_token'); this.$http.post({ api: 'api/shopping/order/delete', header: { Authorization: token }, data: { 'order_no': orderNo } }).then(res => { if (res.statusCode == 200) { wx.showToast({ title: res.data.message }); this.orderList(0, this.activeIndex); } else { wx.showModal({ title: '', content: '删除订单失败, 请检查您的网络状态', showCancel: false }); } }).catch(rej => { wx.showModal({ title: '', content: '删除订单失败, 请检查您的网络状态', showCancel: false }); }); },
setData: function (obj) { let that = this; let keys = []; let val, data; Object.keys(obj).forEach(function (key) { keys = key.split('.'); val = obj[key]; data = that.$data; keys.forEach(function (key2, index) { if (index + 1 == keys.length) { that.$set(data, key2, val); } else { if (!data[key2]) { that.$set(data, key2, {}); } }
data = data[key2]; }); }); } }, computed: {}, watch: {}};</script><style rel="stylesheet/less" lang="less"> @import "order";</style>
|
