|
@@ -1,130 +1,137 @@
|
|
|
<template>
|
|
|
- <view class="order-list">
|
|
|
- <tui-skeleton v-if="isRequest" loadingType="2"></tui-skeleton>
|
|
|
-
|
|
|
- <cm-header-nav @leftClick="handleLeftClick" @rightClick="handleRightClick"></cm-header-nav>
|
|
|
-
|
|
|
- <!-- 滑块 tabs -->
|
|
|
- <view class="tabs">
|
|
|
- <tui-tabs
|
|
|
- :tabs="tabs"
|
|
|
- :currentTab="currentTab"
|
|
|
- @change="tabChange"
|
|
|
- :sliderWidth="48"
|
|
|
- color="#333333"
|
|
|
- selectedColor="#FF457B"
|
|
|
- sliderBgColor="#FF457B"
|
|
|
- ></tui-tabs>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 协销筛选订单 -->
|
|
|
- <cm-order-filter-control
|
|
|
- @click="handleFilter"
|
|
|
- :buttonGroup="screenTabBar"
|
|
|
- v-if="isDealer"
|
|
|
- ></cm-order-filter-control>
|
|
|
-
|
|
|
- <swiper
|
|
|
- :indicator-dots="false"
|
|
|
- :autoplay="false"
|
|
|
- class="swiper"
|
|
|
- :class="!isDealer ? 'swiper-hegiht1' : 'swiper-hegiht2'"
|
|
|
- :current="currentTab"
|
|
|
- @change="swiperChange"
|
|
|
- >
|
|
|
- <swiper-item v-for="tab in tabs" :key="tab.state">
|
|
|
- <!-- tab.orderList.length === 0 -->
|
|
|
- <view class="order-empty" v-if="tab.orderList.length === 0">
|
|
|
- <cm-empty :image="emptyInfo.image" :message="emptyInfo.message" :offset="100"></cm-empty>
|
|
|
- </view>
|
|
|
- <scroll-view scroll-y="true" v-else class="scroll-box" @scrolltolower="scrollBottom">
|
|
|
- <template v-for="(orderInfo, orderIndex) in tab.orderList">
|
|
|
- <view class="grid" :key="orderIndex"></view>
|
|
|
- <view class="order-section" :key="orderIndex" @click="handleToDetail(orderInfo)">
|
|
|
- <!-- 订单信息 -->
|
|
|
- <view class="order-info">
|
|
|
- <view class="order-num">
|
|
|
- <text class="label">订单编号:</text> <text>{{ orderInfo.orderNo }}</text>
|
|
|
- </view>
|
|
|
- <view class="order-time">
|
|
|
- <text class="label">下单时间:</text> <text>{{ orderInfo.orderTime }}</text>
|
|
|
- </view>
|
|
|
- <view class="status">{{ stateExpFormat(orderInfo.status) }}</view>
|
|
|
- </view>
|
|
|
- <view class="line"></view>
|
|
|
- <view
|
|
|
- class="shop-order"
|
|
|
- v-for="(shopOrder, shopOrderIndex) in orderInfo.shopOrderList"
|
|
|
- :key="shopOrderIndex"
|
|
|
- >
|
|
|
- <!-- 供应商 -->
|
|
|
- <view class="origin">
|
|
|
- <image class="cover" :src="shopOrder.shopLogo"></image>
|
|
|
- <view class="name">{{ shopOrder.shopName }}</view>
|
|
|
- </view>
|
|
|
- <!-- 商品列表 -->
|
|
|
- <view class="goods-list">
|
|
|
- <!-- 商品信息 -->
|
|
|
- <view
|
|
|
- class="order-goods"
|
|
|
- v-for="goods in shopOrder.orderProductList"
|
|
|
- :key="goods.productId"
|
|
|
- >
|
|
|
- <cm-order-prodcut :goods-data="goods"></cm-order-prodcut>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 统计 -->
|
|
|
- <view class="total">
|
|
|
- <view class="count">共{{ orderInfo.productCount }}件商品</view>
|
|
|
- <view class="status">
|
|
|
- <template v-if="['31', '32', '33'].includes(orderInfo.status)">
|
|
|
- <text class="label">已支付:</text>
|
|
|
- <text>¥{{ orderInfo.receiptAmount | formatPrice }}</text>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <text class="label">待付总额:</text>
|
|
|
- <text>¥{{ orderInfo.pendingPayments | formatPrice }}</text>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 操作 -->
|
|
|
- <cm-order-control-nav
|
|
|
- v-if="orderInfo.userId == userId"
|
|
|
- :orderInfo="orderInfo"
|
|
|
- @confirm="handleConfirmClick"
|
|
|
- ></cm-order-control-nav>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <!-- loading -->
|
|
|
- <view class="loading-more">
|
|
|
- <tui-loadmore :index="3" :visible="loadmore"></tui-loadmore>
|
|
|
- <tui-nomore :text="loadMoreText" :visible="!loadmore" backgroundColor="#f7f7f7"></tui-nomore>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
-
|
|
|
- <!-- 操作弹窗 -->
|
|
|
- <tui-modal
|
|
|
- :show="modal"
|
|
|
- :content="modalText"
|
|
|
- :size="32"
|
|
|
- :maskClosable="false"
|
|
|
- color="#333"
|
|
|
- shape="circle"
|
|
|
- @click="handleModalConfirm"
|
|
|
- ></tui-modal>
|
|
|
- <!-- 加载框 -->
|
|
|
- <cm-loading :visible="isSubLoading" :text="loadingText"></cm-loading>
|
|
|
- <!-- 失效商品列表 -->
|
|
|
- <cm-order-invalid-modal
|
|
|
- :goodsList="invalidList"
|
|
|
- :visible="buyAgainModal"
|
|
|
- @confirm="buyAgainModalClick"
|
|
|
- @cancel="buyAgainModalHide"
|
|
|
- ></cm-order-invalid-modal>
|
|
|
- </view>
|
|
|
+ <view class="order-list">
|
|
|
+ <tui-skeleton v-if="isRequest" loadingType="2"></tui-skeleton>
|
|
|
+ <cm-header-nav
|
|
|
+ @leftClick="handleLeftClick"
|
|
|
+ @rightClick="handleRightClick"
|
|
|
+ @init="headerNavInit"
|
|
|
+ :leftButtonGroup="leftButtonGroup"
|
|
|
+ title="订单列表"
|
|
|
+ ></cm-header-nav>
|
|
|
+
|
|
|
+ <!-- 滑块 tabs -->
|
|
|
+ <view class="tabs">
|
|
|
+ <tui-tabs
|
|
|
+ :tabs="tabs"
|
|
|
+ :currentTab="currentTab"
|
|
|
+ @change="tabChange"
|
|
|
+ :sliderWidth="48"
|
|
|
+ color="#333333"
|
|
|
+ selectedColor="#FF457B"
|
|
|
+ sliderBgColor="#FF457B"
|
|
|
+ ></tui-tabs>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 协销筛选订单 -->
|
|
|
+ <cm-order-filter-control
|
|
|
+ @click="handleFilter"
|
|
|
+ :buttonGroup="screenTabBar"
|
|
|
+ v-if="isDealer"
|
|
|
+ ></cm-order-filter-control>
|
|
|
+
|
|
|
+ <swiper
|
|
|
+ :indicator-dots="false"
|
|
|
+ :autoplay="false"
|
|
|
+ class="swiper"
|
|
|
+ :style="[swiperHeight]"
|
|
|
+ :current="currentTab"
|
|
|
+ @change="swiperChange"
|
|
|
+ >
|
|
|
+ <swiper-item v-for="tab in tabs" :key="tab.state">
|
|
|
+ <!-- tab.orderList.length === 0 -->
|
|
|
+ <view class="order-empty" v-if="tab.orderList.length === 0">
|
|
|
+ <cm-empty :image="emptyInfo.image" :message="emptyInfo.message" :offset="100"></cm-empty>
|
|
|
+ </view>
|
|
|
+ <scroll-view scroll-y="true" v-else class="scroll-box" @scrolltolower="scrollBottom">
|
|
|
+ <template v-for="(orderInfo, orderIndex) in tab.orderList">
|
|
|
+ <view class="grid" :key="orderIndex"></view>
|
|
|
+ <view class="order-section" :key="orderIndex" @click="handleToDetail(orderInfo)">
|
|
|
+ <!-- 订单信息 -->
|
|
|
+ <view class="order-info">
|
|
|
+ <view class="order-num">
|
|
|
+ <text class="label">订单编号:</text>
|
|
|
+ <text>{{ orderInfo.orderNo }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="order-time">
|
|
|
+ <text class="label">下单时间:</text>
|
|
|
+ <text>{{ orderInfo.orderTime }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="status">{{ stateExpFormat(orderInfo.status) }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="line"></view>
|
|
|
+ <view
|
|
|
+ class="shop-order"
|
|
|
+ v-for="(shopOrder, shopOrderIndex) in orderInfo.shopOrderList"
|
|
|
+ :key="shopOrderIndex"
|
|
|
+ >
|
|
|
+ <!-- 供应商 -->
|
|
|
+ <view class="origin">
|
|
|
+ <image class="cover" :src="shopOrder.shopLogo"></image>
|
|
|
+ <view class="name">{{ shopOrder.shopName }}</view>
|
|
|
+ </view>
|
|
|
+ <!-- 商品列表 -->
|
|
|
+ <view class="goods-list">
|
|
|
+ <!-- 商品信息 -->
|
|
|
+ <view
|
|
|
+ class="order-goods"
|
|
|
+ v-for="goods in shopOrder.orderProductList"
|
|
|
+ :key="goods.productId"
|
|
|
+ >
|
|
|
+ <cm-order-prodcut :goods-data="goods"></cm-order-prodcut>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 统计 -->
|
|
|
+ <view class="total">
|
|
|
+ <view class="count">共{{ orderInfo.productCount }}件商品</view>
|
|
|
+ <view class="status">
|
|
|
+ <template v-if="['31', '32', '33'].includes(orderInfo.status)">
|
|
|
+ <text class="label">已支付:</text>
|
|
|
+ <text>¥{{ orderInfo.receiptAmount | formatPrice }}</text>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <text class="label">待付总额:</text>
|
|
|
+ <text>¥{{ orderInfo.pendingPayments | formatPrice }}</text>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 操作 -->
|
|
|
+ <cm-order-control-nav
|
|
|
+ v-if="orderInfo.userId == userId"
|
|
|
+ :orderInfo="orderInfo"
|
|
|
+ @confirm="handleConfirmClick"
|
|
|
+ ></cm-order-control-nav>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <!-- loading -->
|
|
|
+ <view class="loading-more">
|
|
|
+ <tui-loadmore :index="3" :visible="loadmore"></tui-loadmore>
|
|
|
+ <tui-nomore :text="loadMoreText" :visible="!loadmore" backgroundColor="#f7f7f7"></tui-nomore>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+
|
|
|
+ <!-- 操作弹窗 -->
|
|
|
+ <tui-modal
|
|
|
+ :show="modal"
|
|
|
+ :content="modalText"
|
|
|
+ :size="32"
|
|
|
+ :maskClosable="false"
|
|
|
+ color="#333"
|
|
|
+ shape="circle"
|
|
|
+ @click="handleModalConfirm"
|
|
|
+ ></tui-modal>
|
|
|
+ <!-- 加载框 -->
|
|
|
+ <cm-loading :visible="isSubLoading" :text="loadingText"></cm-loading>
|
|
|
+ <!-- 失效商品列表 -->
|
|
|
+ <cm-order-invalid-modal
|
|
|
+ :goodsList="invalidList"
|
|
|
+ :visible="buyAgainModal"
|
|
|
+ @confirm="buyAgainModalClick"
|
|
|
+ @cancel="buyAgainModalHide"
|
|
|
+ ></cm-order-invalid-modal>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
@@ -140,335 +147,361 @@ import orderList from './mixins/orderList.js'
|
|
|
import wechatPay from './mixins/wechatPay.js'
|
|
|
import { mapGetters } from 'vuex'
|
|
|
export default {
|
|
|
- mixins: [wechatPay, orderList],
|
|
|
- components: {
|
|
|
- CmOrderProdcut,
|
|
|
- CmOrderControlNav,
|
|
|
- CmOrderInvalidModal,
|
|
|
- CmOrderFilterControl,
|
|
|
- CmLoading,
|
|
|
- CmEmpty,
|
|
|
- CmHeaderNav
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tabs: [
|
|
|
- {
|
|
|
- name: '全部',
|
|
|
- state: 0,
|
|
|
- pageNum: 1,
|
|
|
- orderList: []
|
|
|
- },
|
|
|
- {
|
|
|
- name: '待付款',
|
|
|
- state: 1,
|
|
|
- pageNum: 1,
|
|
|
- orderList: []
|
|
|
- },
|
|
|
- {
|
|
|
- name: '待发货',
|
|
|
- state: 2,
|
|
|
- pageNum: 1,
|
|
|
- orderList: []
|
|
|
- },
|
|
|
- {
|
|
|
- name: '已发货',
|
|
|
- state: 3,
|
|
|
- pageNum: 1,
|
|
|
- orderList: []
|
|
|
- },
|
|
|
- {
|
|
|
- name: '退货/款',
|
|
|
- state: 4,
|
|
|
- pageNum: 1,
|
|
|
- orderList: []
|
|
|
- }
|
|
|
- ],
|
|
|
- currentTab: 0,
|
|
|
- screenTabBar: [{ id: 0, name: '全部订单' }, { id: 1, name: '用户订单' }, { id: 2, name: '自身订单' }],
|
|
|
- screenTab: 0,
|
|
|
- refresh: false,
|
|
|
- loadmore: false, // 正在加载更多
|
|
|
- isRequest: true
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters(['userId', 'userIdentity']),
|
|
|
- // 当前用户是否为协销
|
|
|
- isDealer() {
|
|
|
- return this.userIdentity === 2
|
|
|
- },
|
|
|
- tabInfo() {
|
|
|
- return this.tabs[this.currentTab]
|
|
|
- },
|
|
|
- loadMoreText() {
|
|
|
- if (this.tabInfo.orderList.length === 0) return '没有更多了'
|
|
|
- return this.tabInfo.hasMore ? '上拉加载更多' : '没有更多了'
|
|
|
- },
|
|
|
- emptyInfo() {
|
|
|
- const info = {}
|
|
|
- info.image = `${this.$Static}icon-empty-address.png`
|
|
|
-
|
|
|
- if (this.tabInfo.state === 0) {
|
|
|
- info.message = '您还没有任何的订单哟~_~'
|
|
|
- } else {
|
|
|
- info.message = '您还没有相关的订单哟~_~'
|
|
|
- }
|
|
|
-
|
|
|
- return info
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(options) {
|
|
|
- this.currentTab = options.state
|
|
|
- this.fetchOrderData()
|
|
|
- },
|
|
|
- // 下拉刷新
|
|
|
- onPullDownRefresh() {
|
|
|
- this.resetOrderList()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 导航栏点击事件
|
|
|
- handleLeftClick(e) {
|
|
|
- if (e.index) {
|
|
|
- uni.switchTab({ url: '/pages/tabBar/index/index' })
|
|
|
- } else {
|
|
|
- uni.navigateBack({ delta: 1 })
|
|
|
- }
|
|
|
- },
|
|
|
- handleRightClick() {
|
|
|
- console.log('search')
|
|
|
- },
|
|
|
-
|
|
|
- // 重置订单列表
|
|
|
- resetOrderList() {
|
|
|
- this.refresh = true
|
|
|
- this.tabInfo.pageNum = 1
|
|
|
- this.fetchOrderData()
|
|
|
- },
|
|
|
-
|
|
|
- // 更新订单列表
|
|
|
- updateOrderList(response) {
|
|
|
- const { name, state, pageNum } = this.tabInfo
|
|
|
- this.$set(this.tabs, this.currentTab, {
|
|
|
- name,
|
|
|
- state,
|
|
|
- pageNum: pageNum + 1,
|
|
|
- orderList: this.tabInfo.orderList.concat(response.data.list),
|
|
|
- hasMore: response.data.hasNextPage
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 获取订单列表 使用防抖函数封装
|
|
|
- fetchOrderData: debounce(function() {
|
|
|
- this.loadmore = true
|
|
|
-
|
|
|
- const params = {
|
|
|
- orderState: this.currentTab,
|
|
|
- userId: this.userId,
|
|
|
- orderType: this.screenTab,
|
|
|
- pageNum: this.tabInfo.pageNum,
|
|
|
- pageSize: 10
|
|
|
- }
|
|
|
-
|
|
|
- if (this.isDealer) {
|
|
|
- this.queryOrderDealerList(params)
|
|
|
- } else {
|
|
|
- this.queryOrderList(params)
|
|
|
- }
|
|
|
- }, 500),
|
|
|
-
|
|
|
- // 普通用户获取订单列表
|
|
|
- queryOrderList(params) {
|
|
|
- this.OrderService.QueryOrderList(params)
|
|
|
- .then(res => {
|
|
|
- if (this.refresh) this.tabInfo.orderList = []
|
|
|
- this.updateOrderList(res)
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- console.log(err)
|
|
|
- })
|
|
|
- .finally(() => {
|
|
|
- uni.stopPullDownRefresh()
|
|
|
- this.refresh = false
|
|
|
- this.loadmore = false
|
|
|
- this.isRequest = false
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 分销者获取订单列表
|
|
|
- queryOrderDealerList(params) {
|
|
|
- console.log(params)
|
|
|
- this.OrderService.QueryOrderDealerList(params)
|
|
|
- .then(res => {
|
|
|
- if (this.refresh) this.tabInfo.orderList = []
|
|
|
- this.updateOrderList(res)
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- console.log(err)
|
|
|
- })
|
|
|
- .finally(() => {
|
|
|
- uni.stopPullDownRefresh()
|
|
|
- this.refresh = false
|
|
|
- this.loadmore = false
|
|
|
- this.isRequest = false
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 筛选订单
|
|
|
- handleFilter(e) {
|
|
|
- console.log(e.index)
|
|
|
- this.screenTab = e.index
|
|
|
- this.resetOrderList()
|
|
|
- this.fetchOrderData()
|
|
|
- },
|
|
|
-
|
|
|
- // 跳转详情
|
|
|
- handleToDetail(orderInfo) {
|
|
|
- this.$api.navigateTo('/pages/order/order-detail?orderId=' + orderInfo.orderId)
|
|
|
- },
|
|
|
-
|
|
|
- // 滚动到底部
|
|
|
- scrollBottom() {
|
|
|
- if (!this.tabInfo.hasMore) return
|
|
|
- this.fetchOrderData()
|
|
|
- },
|
|
|
-
|
|
|
- // tab切换
|
|
|
- tabChange(e) {
|
|
|
- this.currentTab = e.index
|
|
|
- },
|
|
|
-
|
|
|
- // 轮播切换
|
|
|
- swiperChange(e) {
|
|
|
- this.currentTab = e.detail.current
|
|
|
- if (this.tabInfo.pageNum !== 1) return
|
|
|
- this.isRequest = true
|
|
|
- this.fetchOrderData()
|
|
|
- }
|
|
|
- }
|
|
|
+ mixins: [wechatPay, orderList],
|
|
|
+ components: {
|
|
|
+ CmOrderProdcut,
|
|
|
+ CmOrderControlNav,
|
|
|
+ CmOrderInvalidModal,
|
|
|
+ CmOrderFilterControl,
|
|
|
+ CmLoading,
|
|
|
+ CmEmpty,
|
|
|
+ CmHeaderNav
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tabs: [
|
|
|
+ {
|
|
|
+ name: '全部',
|
|
|
+ state: 0,
|
|
|
+ pageNum: 1,
|
|
|
+ orderList: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '待付款',
|
|
|
+ state: 1,
|
|
|
+ pageNum: 1,
|
|
|
+ orderList: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '待发货',
|
|
|
+ state: 2,
|
|
|
+ pageNum: 1,
|
|
|
+ orderList: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '已发货',
|
|
|
+ state: 3,
|
|
|
+ pageNum: 1,
|
|
|
+ orderList: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '退货/款',
|
|
|
+ state: 4,
|
|
|
+ pageNum: 1,
|
|
|
+ orderList: []
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ currentTab: 0,
|
|
|
+ screenTabBar: [{ id: 0, name: '全部订单' }, { id: 1, name: '用户订单' }, { id: 2, name: '自身订单' }],
|
|
|
+ screenTab: 0,
|
|
|
+ refresh: false,
|
|
|
+ loadmore: false, // 正在加载更多
|
|
|
+ isRequest: true,
|
|
|
+ leftButtonGroup: [
|
|
|
+ {
|
|
|
+ icon: 'icon-daohangfanhui',
|
|
|
+ color: '#333'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ headerNavHeight: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['userId', 'userIdentity']),
|
|
|
+ // 当前用户是否为协销
|
|
|
+ isDealer() {
|
|
|
+ return this.userIdentity === 2
|
|
|
+ },
|
|
|
+ tabInfo() {
|
|
|
+ return this.tabs[this.currentTab]
|
|
|
+ },
|
|
|
+ loadMoreText() {
|
|
|
+ if (this.tabInfo.orderList.length === 0) return '没有更多了'
|
|
|
+ return this.tabInfo.hasMore ? '上拉加载更多' : '没有更多了'
|
|
|
+ },
|
|
|
+ emptyInfo() {
|
|
|
+ const info = {}
|
|
|
+ info.image = `${this.$Static}icon-empty-address.png`
|
|
|
+
|
|
|
+ if (this.tabInfo.state === 0) {
|
|
|
+ info.message = '您还没有任何的订单哟~_~'
|
|
|
+ } else {
|
|
|
+ info.message = '您还没有相关的订单哟~_~'
|
|
|
+ }
|
|
|
+
|
|
|
+ return info
|
|
|
+ },
|
|
|
+ swiperHeight(){
|
|
|
+ let offset = 44
|
|
|
+ if(this.isDealer){
|
|
|
+ offset = 84
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ height: `calc(100vh - ${offset}px - ${this.headerNavHeight}px);`
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.currentTab = options.state
|
|
|
+ this.fetchOrderData()
|
|
|
+ this.$on('orderAction', () => {
|
|
|
+ this.resetOrderList()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 下拉刷新
|
|
|
+ onPullDownRefresh() {
|
|
|
+ this.resetOrderList()
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ this.$off('orderAction')
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 导航栏初始化
|
|
|
+ headerNavInit(info){
|
|
|
+ this.headerNavHeight = info.height
|
|
|
+ },
|
|
|
+ // 导航栏点击事件
|
|
|
+ handleLeftClick(e) {
|
|
|
+ if (e.index) {
|
|
|
+ uni.switchTab({ url: '/pages/tabBar/index/index' })
|
|
|
+ } else {
|
|
|
+ uni.navigateBack({ delta: 1 })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleRightClick() {
|
|
|
+ uni.navigateTo({ url: '/pages/order/order-search' })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 重置订单列表
|
|
|
+ resetOrderList() {
|
|
|
+ this.refresh = true
|
|
|
+ this.tabInfo.pageNum = 1
|
|
|
+ this.fetchOrderData()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 更新订单列表
|
|
|
+ updateOrderList(response) {
|
|
|
+ const { name, state, pageNum } = this.tabInfo
|
|
|
+ this.$set(this.tabs, this.currentTab, {
|
|
|
+ name,
|
|
|
+ state,
|
|
|
+ pageNum: pageNum + 1,
|
|
|
+ orderList: this.tabInfo.orderList.concat(response.data.list),
|
|
|
+ hasMore: response.data.hasNextPage
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取订单列表 使用防抖函数封装
|
|
|
+ fetchOrderData: debounce(function() {
|
|
|
+ this.loadmore = true
|
|
|
+
|
|
|
+ const params = {
|
|
|
+ orderState: this.currentTab,
|
|
|
+ userId: this.userId,
|
|
|
+ orderType: this.screenTab,
|
|
|
+ pageNum: this.tabInfo.pageNum,
|
|
|
+ pageSize: 10
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.isDealer) {
|
|
|
+ this.queryOrderDealerList(params)
|
|
|
+ } else {
|
|
|
+ this.queryOrderList(params)
|
|
|
+ }
|
|
|
+ }, 500),
|
|
|
+
|
|
|
+ // 普通用户获取订单列表
|
|
|
+ queryOrderList(params) {
|
|
|
+ this.OrderService.QueryOrderList(params)
|
|
|
+ .then(res => {
|
|
|
+ if (this.refresh) this.tabInfo.orderList = []
|
|
|
+ this.updateOrderList(res)
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ this.refresh = false
|
|
|
+ this.loadmore = false
|
|
|
+ this.isRequest = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 分销者获取订单列表
|
|
|
+ queryOrderDealerList(params) {
|
|
|
+ console.log(params)
|
|
|
+ this.OrderService.QueryOrderDealerList(params)
|
|
|
+ .then(res => {
|
|
|
+ if (this.refresh) this.tabInfo.orderList = []
|
|
|
+ this.updateOrderList(res)
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ this.refresh = false
|
|
|
+ this.loadmore = false
|
|
|
+ this.isRequest = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 筛选订单
|
|
|
+ handleFilter(e) {
|
|
|
+ console.log(e.index)
|
|
|
+ this.screenTab = e.index
|
|
|
+ this.resetOrderList()
|
|
|
+ this.fetchOrderData()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 跳转详情
|
|
|
+ handleToDetail(orderInfo) {
|
|
|
+ this.$api.navigateTo('/pages/order/order-detail?orderId=' + orderInfo.orderId)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 滚动到底部
|
|
|
+ scrollBottom() {
|
|
|
+ if (!this.tabInfo.hasMore) return
|
|
|
+ this.fetchOrderData()
|
|
|
+ },
|
|
|
+
|
|
|
+ // tab切换
|
|
|
+ tabChange(e) {
|
|
|
+ this.currentTab = e.index
|
|
|
+ },
|
|
|
+
|
|
|
+ // 轮播切换
|
|
|
+ swiperChange(e) {
|
|
|
+ this.currentTab = e.detail.current
|
|
|
+ if (this.tabInfo.pageNum !== 1) return
|
|
|
+ this.isRequest = true
|
|
|
+ this.fetchOrderData()
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.order-list {
|
|
|
- min-height: 100vh;
|
|
|
- background: #f7f7f7;
|
|
|
-
|
|
|
- .tabs {
|
|
|
- position: relative;
|
|
|
- z-index: 100000;
|
|
|
- }
|
|
|
-
|
|
|
- .swiper {
|
|
|
- &.swiper-hegiht1 {
|
|
|
- height: calc(100vh - 44px);
|
|
|
- }
|
|
|
-
|
|
|
- &.swiper-hegiht2 {
|
|
|
- height: calc(100vh - 84px);
|
|
|
- }
|
|
|
-
|
|
|
- .scroll-box {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .grid {
|
|
|
- height: 20rpx;
|
|
|
- background: #f7f7f7;
|
|
|
- }
|
|
|
-
|
|
|
- .order-section {
|
|
|
- padding: 38rpx 0;
|
|
|
- background-color: #fff;
|
|
|
-
|
|
|
- .line {
|
|
|
- width: 702rpx;
|
|
|
- height: 1px;
|
|
|
- background: #f7f7f7;
|
|
|
- }
|
|
|
-
|
|
|
- .order-info {
|
|
|
- position: relative;
|
|
|
- padding: 0 24rpx;
|
|
|
- margin-bottom: 32rpx;
|
|
|
- line-height: 1.6;
|
|
|
-
|
|
|
- .order-num,
|
|
|
- .order-time {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333333;
|
|
|
-
|
|
|
- .label {
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .status {
|
|
|
- position: absolute;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #ff457b;
|
|
|
- right: 24rpx;
|
|
|
- bottom: 0;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .origin {
|
|
|
- padding: 0 24rpx;
|
|
|
- margin-top: 24rpx;
|
|
|
- margin-bottom: 16rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .cover {
|
|
|
- width: 56rpx;
|
|
|
- height: 56rpx;
|
|
|
- border-radius: 4rpx;
|
|
|
- border: 1px solid #f7f7f7;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- margin-left: 16rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #333333;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .goods-list {
|
|
|
- .order-goods {
|
|
|
- padding-top: 32rpx;
|
|
|
- &:first-child {
|
|
|
- padding-top: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .total {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- padding: 0 24rpx;
|
|
|
- margin: 32rpx 0;
|
|
|
-
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333333;
|
|
|
-
|
|
|
- .count {
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .status {
|
|
|
- color: #ff457b;
|
|
|
-
|
|
|
- .label {
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #f7f7f7;
|
|
|
+
|
|
|
+ .tabs {
|
|
|
+ position: relative;
|
|
|
+ z-index: 100000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper {
|
|
|
+ &.swiper-hegiht1 {
|
|
|
+ height: calc(100vh - 44px);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.swiper-hegiht2 {
|
|
|
+ height: calc(100vh - 84px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-box {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid {
|
|
|
+ height: 20rpx;
|
|
|
+ background: #f7f7f7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-section {
|
|
|
+ padding: 38rpx 0;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .line {
|
|
|
+ width: 702rpx;
|
|
|
+ height: 1px;
|
|
|
+ background: #f7f7f7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-info {
|
|
|
+ position: relative;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ line-height: 1.6;
|
|
|
+
|
|
|
+ .order-num,
|
|
|
+ .order-time {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333333;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .status {
|
|
|
+ position: absolute;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #ff457b;
|
|
|
+ right: 24rpx;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .origin {
|
|
|
+ padding: 0 24rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .cover {
|
|
|
+ width: 56rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ border: 1px solid #f7f7f7;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ margin-left: 16rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-list {
|
|
|
+ .order-goods {
|
|
|
+ padding-top: 32rpx;
|
|
|
+ &:first-child {
|
|
|
+ padding-top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .total {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ padding: 0 24rpx;
|
|
|
+ margin: 32rpx 0;
|
|
|
+
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333333;
|
|
|
+
|
|
|
+ .count {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status {
|
|
|
+ color: #ff457b;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|