|
|
<template>
<view id="order-index"> <view class="order-search"> <!-- #ifdef H5 --> <view class="search-box" @tap="jumpSearch"> <i class="iconfont icon-sousuo"></i> <p>商品名称，商品编号，订单编号</p> </view> <!-- #endif --> <!-- #ifdef MP-WEIXIN --> <view class="search-box" @tap="jumpSearch"> <i class="iconfont icon-sousuo"></i> <p>商品名称，商品编号，订单编号</p> </view> <!-- #endif --> <!-- #ifdef APP-PLUS --> <view class="search-box" @tap="jumpSearch"> <i class="iconfont icon-sousuo"></i> <p>商品名称，商品编号，订单编号</p> </view> <!-- #endif --> </view> <view class="navbar mx-1px-bottom"> <block v-for="(item, index) in tabList" :key="index" > <view :id="index" class="navbar-item activity" :hidden="activeIndex != index" :style="'color: ' + config.mainColor" @tap="tabClick"> <view class="navbar-title">{{item.title}}</view> </view>
<view :id="index" :hidden="activeIndex == index" class="navbar-item" @tap="tabClick"> <view class="navbar-title">{{item.title}}</view> </view> </block> <view class="navbar-slider" :style="'width: ' + width + 'px; transform: translateX(' + sliderOffset + 'px); -webkit-transform: translateX(' + sliderOffset + 'px); background: ' + config.mainColor"></view> <!-- <view class="tab-switch" @tap="tabSwitch"> <i class="iconfont icon-qiehuan"></i> </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][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_no" v-for="(order, index) in dataList[status[activeIndex]][0][idx]" :key="index" @tap="jump"> <view class="item-top"> <view class="indent mx-1px-bottom"> <view class="order-num"> <span>{{order.from}}</span> | 订单编号：{{order.order_no}} </view> <view class="order-type"> {{typeList[order.status]}} </view> </view> </view> <view class="item-middle"> <view class="middle-item mx-1px-bottom" v-for="(good, index) in 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 class="order-types" v-if="order.type == 10"> 拼团 </view> </view> <view class="money-box"> <view> {{good.quantity}}件 </view> <view> ￥{{good.total_yuan}} </view> </view> </view> </view> <view class="closeTime mx-1px-bottom" v-if="order.status===1"> <i class="iconfont icon-shijian"></i> <span>剩余付款时间：</span> <countdown :value="order.will_closed_at"></countdown> </view> <view class="item-bottom"> <view class="all-money" v-if="order.type == 5"> {{order.count}}件, 共计 {{order.redeem_point}} 积分 </view> <view class="all-money" v-else> {{order.count}}件, 共计 ￥{{order.total_yuan}} </view> <view class="button-box" v-if="order.status === 1" :data-no="order.order_no" @tap.stop="pay"> 立即付款 </view> <view class="button-box" v-if="order.status === 3" :data-no="order.order_no" @tap.stop="submit"> 确认收货 </view> <view class="button-box" v-if="order.status === 6" :data-no="order.order_no" @tap.stop="deleteF"> 删除订单 </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][0] == '' && tabList[activeIndex].init"> 暂无数据 </view> <view v-for="(item, idx) in dataList[status[activeIndex]][1]" :key="idx" > <view class="order-item" :data-no="order.order_no" v-for="(order, index) in dataList[status[activeIndex]][1][idx]" :key="index" @tap="jump"> <view class="item-top"> <view class="indent mx-1px-bottom"> <view class="order-num"> <span>{{order.from}}</span> | 订单编号：{{order.order_no}} </view> <view class="order-type"> {{typeList[order.status]}} </view> </view> </view> <view class="item-middle"> <view class="middle-item mx-1px-bottom" v-for="(good, index) in 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 class="order-types" v-if="order.type == 10"> 拼团 </view> </view> <view class="money-box"> <view> {{good.quantity}}件 </view> <view> ￥{{good.total_yuan}} </view> </view> </view> </view> <view class="closeTime mx-1px-bottom" v-if="order.status===1"> <i class="iconfont icon-shijian"></i> <span>剩余付款时间：</span><countdown :value="order.will_closed_at"></countdown> </view> <view class="item-bottom"> <view class="all-money" v-if="order.type == 5"> {{order.count}}件, 共计 {{order.redeem_point}} 积分 </view> <view class="all-money" v-else> {{order.count}}件, 共计 ￥{{order.total_yuan}} </view> <view class="button-box" v-if="order.status === 1" :data-no="order.order_no" @tap.stop="pay"> 立即付款 </view> <view class="button-box" v-if="order.status === 3" :data-no="order.order_no" @tap.stop="submit"> 确认收货 </view> <view class="button-box" v-if="order.status === 6" :data-no="order.order_no" @tap.stop="deleteF"> 删除订单 </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][0] == '' && tabList[activeIndex].init"> 暂无数据 </view> <view v-for="(item, idx) in dataList[status[activeIndex]][2]" :key="idx"> <view class="order-item" :data-no="order.order_no" v-for="(order, index) in dataList[status[activeIndex]][2][idx]" :key="index" @tap="jump"> <view class="item-top"> <view class="indent mx-1px-bottom"> <view class="order-num"> <span>{{order.from}}</span> | 订单编号：{{order.order_no}} </view> <view class="order-type"> {{typeList[order.status]}} </view> </view> </view> <view class="item-middle"> <view class="middle-item mx-1px-bottom" v-for="(good, index) in 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 class="order-types" v-if="order.type == 10"> 拼团 </view> </view> <view class="money-box"> <view> {{good.quantity}}件 </view> <view> ￥{{good.total_yuan}} </view> </view> </view> </view> <view class="item-bottom"> <view class="all-money" v-if="order.type == 5"> {{order.count}}件, 共计 {{order.redeem_point}} 积分 </view> <view class="all-money" v-else> {{order.count}}件, 共计 ￥{{order.total_yuan}} </view> <view class="button-box" v-if="order.status === 1" :data-no="order.order_no" @tap.stop="pay"> 立即付款 </view> <view class="button-box" v-if="order.status === 3" :data-no="order.order_no" @tap.stop="submit"> 确认收货 </view> <view class="button-box" v-if="order.status === 6" :data-no="order.order_no" @tap.stop="deleteF"> 删除订单 </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][0] == '' && tabList[activeIndex].init"> 暂无数据 </view> <view v-for="(item, idx) in dataList[status[activeIndex]][3]" :key="idx" > <view class="order-item" :data-no="order.order_no" v-for="(order, index) in dataList[status[activeIndex]][3][idx]" :key="index" @tap="jump"> <view class="item-top"> <view class="indent mx-1px-bottom"> <view class="order-num"> <span>{{order.from}}</span> | 订单编号：{{order.order_no}} </view> <view class="order-type"> {{typeList[order.status]}} </view> </view> </view> <view class="item-middle"> <view class="middle-item mx-1px-bottom" v-for="(good, index) in 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 class="order-types" v-if="order.type == 10"> 拼团 </view> </view> <view class="money-box"> <view> {{good.quantity}}件 </view> <view> ￥{{good.total_yuan}} </view> </view> </view> </view> <view class="item-bottom"> <view class="all-money" v-if="order.type == 5"> {{order.count}}件, 共计 {{order.redeem_point}} 积分 </view> <view class="all-money" v-else> {{order.count}}件, 共计 ￥{{order.total_yuan}} </view> <view class="button-box" v-if="order.status === 1" :data-no="order.order_no" @tap.stop="pay"> 立即付款 </view> <view class="button-box" v-if="order.status === 3" :data-no="order.order_no" @tap.stop="submit"> 确认收货 </view> <view class="button-box" v-if="order.status === 6" :data-no="order.order_no" @tap.stop="deleteF"> 删除订单 </view> </view> </view> </view> <view class="loadingbox" :hidden="!tabList[3].show"> {{showText}} </view> </view> </view> </view></view>
</template><script>import {pageLogin, getUrl,config,is} from '@/common/js/utils.js';import countdown from '@/components/Countdown/Countdown';
export default { data() { return { status: { 0: 0, 1: 0, 2: 0, 3: 0 }, activeIndex: 0, sliderOffset: 0, sliderLeft: 0, width: 0, tabList: [{ title: "全部", init: false, line: false, statusNum: { 0: { page: 0, more: true }, 1: { page: 0, more: true } }, show: false }, { title: "待付款", init: false, line: false, statusNum: { 0: { page: 0, more: true }, 1: { page: 0, more: true } }, show: false }, { title: "待发货", init: false, line: false, statusNum: { 0: { page: 0, more: true }, 1: { page: 0, more: true } }, show: false }, { title: "待收货", init: false, line: false, statusNum: { 0: { page: 0, more: true }, 1: { page: 0, more: true } }, show: false }], dataList: { 0: { 0: [], 1: [], 2: [], 3: [] }, 1: { 0: [], 1: [], 2: [], 3: [] } }, typeList: { 0: '临时订单', 1: '待付款', 2: '付款成功', 3: '已发货', 4: '已完成', 5: '已完成', 6: '已取消', 7: '已退款', 8: '已作废', 9: '已删除', 31: '部分已发货' }, showText: '正在加载下一页数据', config: '' }; },
//注册组件
components: { countdown },
onReachBottom(e) { 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.tabList[status].show = true this.orderList(0, status, page); } 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 - 15, sliderOffset: res.windowWidth / this.tabList.length * this.activeIndex }); } }); var tabStatus = this.status[this.activeIndex]; this.orderList(tabStatus, this.activeIndex); },
onLoad(e) { // 第三方平台配置颜色
var gbConfig = this.$cookieStorage.get('globalConfig') || ''; this.setData({ config: gbConfig }); pageLogin(getUrl());
if (e.type) { this.setData({ activeIndex: e.type }); } }, methods: { jump(e) { wx.navigateTo({ url: '/pages/order/detail/detail?no=' + e.currentTarget.dataset.no }); },
jumpSearch() { wx.navigateTo({ url: '/pages/order/search/search' }); },
tabClick(e) { var status = e.currentTarget.id; this.setData({ sliderOffset: e.currentTarget.offsetLeft, activeIndex: status });
if (!this.tabList[status].init) { wx.showLoading({ title: "加载中", mask: true }); this.orderList(0, status); } },
tabSwitch() { var status = this.activeIndex; var tabList = `tabList[${status}]`; var tabStatus = this.status[this.activeIndex]; console.log(status);
if (tabStatus == 0) { // this.setData({
// [`status.${status}`]: 1
// });
//
this.status[status]=1; } else if (tabStatus == 1) { // this.setData({
// [`status.${status}`]: 0
// });
this.status[status]=0; } console.log(this.tabList[status].line);
if (!this.tabList[status].line) { wx.showLoading({ title: "加载中", mask: true }); this.orderList(1, status); // this.setData({
// [`status.${status}`]: 1
// });
//
this.status[status]=1; }
// this.setData({
// [`${tabList}.line`]: true
// });
//
this.tabList[status].line=true; },
pay(e) { var order_no = e.currentTarget.dataset.no; wx.navigateTo({ url: '/pages/store/payment/payment?order_no=' + order_no }); },
deleteF(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(shop = 0, status = 0, page = 1, type = 0) { var token = this.$cookieStorage.get('user_token'); var params = status ? { status } : {}; params.page = page; params.type = type; params.channel = shop ? 'shop' : ''; this.$http.get({ api: 'api/order/list', header: { Authorization: token }, data: params }).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]; // 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.dataList[dataStatus][status][page - 1]=res.data;
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; } else { wx.showToast({ title: res.message, image: '../../../static/error.png' }); } } else { wx.showModal({ title: '', content: '请求失败', showCancel: false }); }
wx.hideLoading(); }).catch(rej => { console.log(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 => { res = res.data; wx.showModal({ title: '', content: res.message || '确认收货成功', showCancel: false, success: res => { if (res.confirm) { this.orderList(0, this.activeIndex); } } }); }).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 "index";</style>
|
