From 4b80c98ef5fda8d6358778f2efe8bb35cb20ccf9 Mon Sep 17 00:00:00 2001
From: queenwuli <942534046@qq.com>
Date: Fri, 15 Jan 2021 16:18:21 +0800
Subject: [PATCH] gx
---
hive-app/pages/workbench/orderList.vue | 263 +++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 198 insertions(+), 65 deletions(-)
diff --git a/hive-app/pages/workbench/orderList.vue b/hive-app/pages/workbench/orderList.vue
index bb1fb8d..d1c17a1 100644
--- a/hive-app/pages/workbench/orderList.vue
+++ b/hive-app/pages/workbench/orderList.vue
@@ -1,46 +1,57 @@
<template>
<!-- 订单列表 -->
<view>
- <!-- #ifndef H5 -->
- <view class="status_bar"></view>
- <!-- #endif -->
- <search-bar :placeholder=placeholder class="header-input"></search-bar>
+ <view class="header">
+ <search-bar @confirm="search" placeholder="输入会员姓名、手机号、订单号" class="mb-0"></search-bar>
+ </view>
<view>
<h-tabs
class="tab"
+ :activeIndex="orderStatus"
+ @tabClick="tabChange"
:tabData="tabs"
:config="{
color: '#abb1cc',
activeColor: '#518EFF',
underLineColor: '#518EFF',
underLineHeight: 4,
- fontSize: '30',
+ fontSize: '28',
underLineWidth: 60,
}"
/>
- <view class="order">
- <view class="flex justify-between order-number">
- <text class="font-14">订单号: N202012123556</text>
- <text class="font-14 blue">待付款</text>
- </view>
- <view class="flex justify-between order-content">
- <view class="flex flex-v">
- <text class="font-12">李某某</text>
- <text class="font-12 gray mt-10">2020-12-15 18:11:01</text>
- </view>
- <view class="flex flex-v">
- <text class="font-12">应付金额</text>
- <text class="font-12 mt-10">实付金额</text>
- <text class="font-12 mt-10">欠款总额</text>
- </view>
- <view class="flex flex-v">
- <text class="font-12">￥ 8000.00</text>
- <text class="font-12 mt-10">￥ 0.00</text>
- <text class="font-12 mt-10">￥ 8000.00</text>
+ <view class="list">
+ <view class="list-item" v-for="item in list">
+ <navigator :url="'./orderDetail?orderId='+item.orderId" hover-class="none">
+ <view class="list-header">
+ <text>订单号: {{item.orderNo}}</text>
+ <text :class="caculateColor(item.orderStatus)">{{item.orderStatus}}</text>
+ </view>
+ <view class="list-content">
+ <view class="flex flex-v flex-1">
+ <text class="font-bold font-15">{{item.vipName}}</text>
+ <text class="gray">{{item.orderTime}}</text>
+ </view>
+ <view class="flex justify-between flex-1">
+ <view>
+ <view>应付金额</view>
+ <view>实付金额</view>
+ <view>欠款总额</view>
+ </view>
+ <view class="right">
+ <view>￥ {{item.needPay | formatNum}}</view>
+ <view>￥ {{item.realPay | formatNum}}</view>
+ <view>￥ {{item.arrears | formatNum}}</view>
+ </view>
+ </view>
+ </view>
+ </navigator>
+ <view class="list-footer" v-if="item.orderStatus!=='已取消' && $utils.hasPermission('ddgl.cancel')">
+ <text class="blue-btn small-btn" @click="cancelOrder(item.orderId)">取消订单</text>
</view>
</view>
- <view class="flex justify-end">
- <button class="blue-btn small-btn">取消订单</button>
+ <no-record :isShow="!list.length" txt="暂无订单记录"></no-record>
+ <view v-if="list.length">
+ <uni-load-more :status="loadStatus" color="#a5abaf"></uni-load-more>
</view>
</view>
</view>
@@ -50,64 +61,186 @@
<script>
import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
import searchBar from '../../components/searchBar/index.vue';
+ import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
components: {
HTabs,
- searchBar
+ searchBar,
+ uniLoadMore
},
data() {
- return {
- placeholder:"输入会员姓名、手机号、编号查询",
- tabs:[
- {
- state: 1,
- name: '全部'
- },
- {
- state: 2,
- name: '代付款'
- },
- {
- state: 3,
- name: '已付款'
- },
- {
- state: 4,
- name: '欠款'
- },
- ],
- }
+ return {
+ queryKey: '',
+ orderStatus: 0,
+ tabs:[
+ {
+ state: 0,
+ name: '全部'
+ },
+ {
+ state: 1,
+ name: '待付款'
+ },
+ {
+ state: 2,
+ name: '已付款'
+ },
+ {
+ state: 3,
+ name: '欠款'
+ },
+ ],
+ list: [],
+ loadStatus: 'more',
+ pageNum: 1
+ }
+ },
+ onLoad(options) {
+ if(options.status){
+ this.orderStatus = Number(options.status);
+ }
+ if(options.queryKey){
+ this.queryKey = options.queryKey;
+ }
+ this.loadList()
+
+ // 判断权限
+ // #ifdef APP-PLUS
+ if(!this.$utils.hasPermission('ddgl.add')){
+ let webView = this.$mp.page.$getAppWebview();
+ webView.setTitleNViewButtonStyle(0, {
+ width: 0,
+ });
+ }
+ // #endif
+ },
+ onPullDownRefresh(){
+ this.reloadData();
+ let timer = setTimeout(function () {
+ uni.startPullDownRefresh();
+ clearTimeout(timer);
+ timer = null;
+ }, 800);
+ },
+ onReachBottom(){
+ this.loadList()
+ },
+ onNavigationBarButtonTap(Object){
+ if(Object.key === 'add'){
+ uni.navigateTo({
+ url: './selectCustomer'
+ })
+ }
+ },
+ methods:{
+ reloadData(){
+ this.list = [];
+ this.pageNum = 1;
+ this.loadStatus = 'more';
+ this.loadList();
+ },
+ loadList(){
+ if(this.loadStatus!=='more'){
+ return;
+ }
+ this.$httpUtils.request('/api/order/findOrderList', {
+ pageNum: this.pageNum,
+ pageSize: 10,
+ queryKey: this.queryKey,
+ orderStatus: this.orderStatus
+ }, 'POST').then((res) => {
+ if(res.status == 200){
+ let result = res.rows;
+ if(result.length < 10){
+ this.loadStatus = 'noMore';
+ } else {
+ this.pageNum ++ ;
+ this.loadStatus = 'more';
+ }
+ this.list = this.list.concat(result);
+ }
+ })
+ },
+ search(val){
+ this.queryKey = val;
+ this.reloadData();
+ },
+ tabChange(index){
+ if(this.orderStatus === index){
+ return;
+ }
+ this.orderStatus = index;
+ this.reloadData();
+ },
+ caculateColor(status){
+ if(status==='待付款'){
+ return 'blue'
+ } else if(status === '已付款'){
+ return 'blueness'
+ } else if(status === '欠款'){
+ return 'red'
+ } else {
+ return 'gray'
+ }
+ },
+ cancelOrder(id){
+ uni.showModal({
+ title: '提示',
+ content: '确定取消订单吗？',
+ success: (res) => {
+ if (res.confirm) {
+ this.$httpUtils.request('/api/order/cancelOrder/'+id).then((res) => {
+ if(res.status == 200){
+ this.reloadData()
+ }
+ this.$toast.info(res.info);
+ })
+ }
+ }
+ });
+ }
}
}
</script>
<style>
- .header-input{
- margin: 0 10px;
+ page{
+ background: #F6F6F8;
+ }
+ .header{
+ padding: 10px 10px 5px;
+ background: #FFFFFF;
}
.tab{
+ background: #FFFFFF;
border-bottom: 1px solid #EDEAF4;
- border-radius: 4px;
- box-shadow:0 6px 6px rgba(237,234,244,0.5);
}
- .order{
- border: 1px solid #EDEAF4;
+ .list-item{
+ background: #FFFFFF;
border-radius: 4px;
- box-shadow:0 6px 6px rgba(237,234,244,0.5);
margin: 10px;
- padding: 0 6px;
+ color: #3a3f3f;
+ border: 1px solid #EDEAF4;
+ padding: 0 10px;
}
- .order-number{
- padding: 10px 6px;
+ .list-header{
+ display: flex;
+ justify-content: space-between;
+ padding: 12px 0;
+ font-size: 15px;
border-bottom: 1px solid #EDEAF4;
}
- .order-content{
- padding: 15px 6px;
- border-bottom: 1px solid #EDEAF4;
+ .list-content{
+ display: flex;
+ justify-content: space-between;
+ padding: 12px 0;
+ font-size: 14px;
+ line-height: 28px;
}
- .small-btn{
- width: 100px;
- margin: 10px 0;
- line-height: 30px;
+ .list-footer{
+ display: flex;
+ justify-content: flex-end;
+ padding: 10px 0;
+ border-top: 1px solid #EDEAF4;
}
</style>
--
Gitblit v1.9.1