页面优化

mallApp/src/pages/order/detail.vue

@@ -218,7 +218,7 @@ export default {
 
 <style lang="scss" scoped>
 .app-content {
-  padding-bottom: 80upx;
+  padding-bottom:30upx;
 }
 .page-top {
   position: relative;
@@ -278,7 +278,7 @@ export default {
 }
 // 底部按钮
 .page-btn {
-  width: calc(100% - 60upx);
+  width: 100%;
   @include disFlex(center, space-between);
   padding: 0 30upx;
   .app-price {

mallApp/src/pages/order/list.vue

@@ -1,141 +1,249 @@
 <template>
-  <div class="app-content">
-    <block v-if="!$util.isEmpty(list.data)">
-      <div class="list-wrap" v-for="(item, index) in list.data" :key="index" @click="pageTo({ url: '/pages/order/detail', query: { id: item.id } })" >
-        <div class="list-top flex-center-between">
-          <div class="app-color-3">编号：<text style="color:black;font-size:28upx;">{{ item.sendNum }}</text></div>
-          <div class="app-price" style="color:black;">{{ item.status | constantfilter('ORDER_STATUS') }}</div>
-        </div>
-        <div class="list-bottom flex-center-between">
-          <div>
-            <span class="app-color-3">日期：</span>
-            <span class="app-size-30">{{ item.addTime ? item.addTime.substring(5,16) : '' }}</span>
-          </div>
-        </div>
-        <div class="list-bottom flex-center-between">
-          <div>
-            <span class="app-color-3">单号：</span>
-            <span class="app-size-30">{{ item.orderSn }}</span>
-          </div>
-        </div>
-        <div class="list-bottom flex-center-between">
-          <div>
-            <span class="app-color-3">金额：</span>
-            <span class="app-size-30">¥{{ item.orderPrice ? parseFloat(item.orderPrice) : 0 }}</span>
-          </div>
-          <block v-if="item.status == 1">
-            <button class="button-com red" @click.stop="pageTo({ url: '/pages/callback/index', query: { pageStatus: 1, orderSn: item.orderSn, totalPrice: item.orderPrice, couponId: item.couponId } })" >立即支付</button>
-          </block>
-        </div>
+  <view class="order-page">
+    <app-tabs :tabs="tabs" :isFixed="true" :currentTab="tabIndex" @change="change" itemWidth="20%"/>
 
-        <div class="list-bottom flex-center-between" v-if="Number(item.remainDebtPrice)>0">
-          <div>
-            <span class="app-color-3">待结：</span>
-            <span class="app-size-30" style="color:red;font-weight:bold;">¥{{ item.remainDebtPrice ? parseFloat(item.remainDebtPrice) : 0 }}</span>
-          </div>
-        </div>
+			<view style="margin-left:60upx;margin-top:110upx;padding-bottom:30upx;position: relative;">
+				<DateSelect @selectDateFn="selectDateFn" defaultShowName='时间' />
+        <button class="admin-button-com mini-btn blue" style="position: absolute;right:300upx;top:-8upx;" @click="selGhs()">{{ ghsName==''?'选花店':ghsName }}</button>
+        <button class="admin-button-com mini-btn blue" style="position: absolute;right:80upx;top:-8upx;" @click="resetSearch()">重置搜索</button>
+			</view>
 
-      </div>
+    <block v-if="!$util.isEmpty(list.data)">
+    <view class="pay_list">
+        <OrderItem v-for="(item, index) in list.data" :key="index" :info="item" @click="goToDetail"></OrderItem>
+    </view>
     </block>
     <block v-else>
-      <app-wrapper-empty title="暂无记录" :is-empty="$util.isEmpty(list.data)" />
+    <view>
+      <AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)"/>
+    </view>
     </block>
-		<wangCg :loginStyle.sync="globalLoginStyle" @goToLogin="loginTo()"></wangCg>
-  </div>
+
+  </view>
 </template>
 <script>
-import { mapGetters } from 'vuex'
-import ListModule from "@/components/module/app-order-list";
-import AppWrapperEmpty from "@/components/app-wrapper-empty";
+import AppTabs from "@/components/plugin/tabs";
+import OrderItem from "./orderItem";
 import { list } from "@/mixins";
+import AppWrapperEmpty from "@/components/app-wrapper-empty";
 import { getList } from "@/api/order";
-import wangCg from "@/components/wangCg";
+import DateSelect from "@/components/module/dateSelect";
 export default {
-  name: "order-list",
   components: {
-    ListModule,
-    wangCg,
-    AppWrapperEmpty
+    AppWrapperEmpty,
+    OrderItem,
+    AppTabs,
+    DateSelect
   },
   mixins: [list],
-  data() {
+  data () {
     return {
-      loginComeBack:0
-    };
-  },
-  onPullDownRefresh() {
-    this.resetList();
-    this.getOrderList().then(res => {
-      uni.stopPullDownRefresh();
-    });
+       tabs: [
+        {
+          name: "全部",
+          value: 0,
+          key: '0'
+        },
+        {
+          name: "待付款",
+          value: 0,
+          key: '1'
+        },
+        {
+          name: "待发货",
+          value: 0,
+          key: '2'
+        },
+        {
+          name: "待收货",
+          value: 0,
+          key: '3'
+        },
+        {
+          name: "已完成",
+          value: 0,
+          key: '4'
+        }
+      ],
+      list: {
+        data: []
+      },
+      supplierList: [],
+      tabIndex: 0,
+      status: '0',
+      refreshPage:0,
+			searchContent:'',			
+			searchTime:'',
+			startTime:'',
+      ghsId:0,
+      ghsName:''
+    }
   },
-  // 加载更多
-  onReachBottom() {
-    if (this.list.moreData == 1) {
-      this.getOrderList().then(res => {
-        uni.stopPullDownRefresh();
+  onReachBottom () {
+    if (!this.list.finished) {
+      this.getMyBuy().then(res => {
+        uni.stopPullDownRefresh()
       });
     } else {
-      uni.stopPullDownRefresh();
+      uni.stopPullDownRefresh()
     }
   },
-	computed: {
-    	...mapGetters({ loginInfo:"getLoginInfo" })
-	},
-	watch: {
-		loginInfo: {
-			deep: true,
-			handler: function(newVal) {
-				if(!this.$util.isEmpty(newVal)){
-					this.globalLoginStyle = 1
-				}else{
-					this.globalLoginStyle = 0
-				}
-			},
-			immediate:true
-		}
-	},
-  onLoad: function() {
-
+  onPullDownRefresh () {
+    this.resetList();
+    this.getMyBuy().then(res => {
+      uni.stopPullDownRefresh()
+    })
   },
   onShow(){
-    if(this.loginComeBack == 1){
-      this.init()
-      this.loginComeBack = 0
+    if(this.refreshPage == 1){
+      this.resetList()
+      this.getMyBuy()
+      this.refreshPage = 0
     }
   },
   methods: {
-    async init() {
-      this.getOrderList();
+    selGhs(){
+      this.$util.pageTo({ url: "/pagesPurchase/selectGhs"})
     },
-		loginTo() {
-			this.$util.pageTo({url:"/pages/login/index?needBack=1"})
-		},
-    getOrderList() {
-      return getList({ status: this.tabIndex }).then(res => {
-        this.completes(res);
-      });
+    resetSearch(){
+      this.ghsId = 0
+      this.ghsName=''
+      this.searchTime = ''
+      this.startTime = ''
+      this.endTime = ''
+      this.resetList()
+      this.getMyBuy()      
+    },
+		selectDateFn(val) {
+			this.searchTime = val.searchTime
+			this.startTime = val.startTime
+			this.endTime = val.endTime
+      this.resetList()
+      this.getMyBuy()
+		},	
+    change(e) {
+      if (this.tabIndex != e.index) {
+        uni.pageScrollTo({
+          scrollTop: 0,
+          duration: 0
+        });
+        this.resetList();
+        this.list.finished = true;
+        this.tabIndex = e.index;
+        this.status = e.item.key;
+        this.getMyBuy().then(() => {
+          this.list.finished = false;
+        });
+      }
+    },
+    init() {
+      if(this.option.ghsId){
+        this.ghsId = this.option.ghsId?this.option.ghsId:0
+        this.ghsName = this.option.ghsName?this.option.ghsName:''
+      }
+      this.getMyBuy()
+    },
+    getMyBuy () {
+      return getList({ status: this.status,page: this.list.page,searchTime: this.searchTime,startTime: this.startTime,endTime: this.endTime,ghsId:this.ghsId}).then(res => {
+        this.completes(res)
+        if (this.$util.isEmpty(res.data)){
+          return false
+        }
+      })
+    },
+    goToDetail (val) {
+      uni.navigateTo({ url: '/pages/order/detail?id=' + val.id })
     }
   }
-};
+}
 </script>
+
 <style lang="scss" scoped>
-.app-content {
-  padding-top: 20upx;
-  padding-bottom: 1upx;
-  .list-wrap {
-    padding: 0 30upx;
-    background-color: #fff;
-    margin-bottom: 20upx;
-    .list-top,
-    .list-bottom {
-      padding: 20upx 0;
-      border-bottom: 1upx solid $borderColor;
-      .button-com {
-        padding-top: 15upx;
-        padding-bottom: 15upx;
+.order-page {
+  .tabs {
+    height: 80upx;
+    line-height: 80upx;
+    & > view {
+      // padding: 0 80upx;
+      width: 50%;
+      text-align: center;
+      font-size: 28upx;
+      color: #666;
+      display: inline-block;
+    }
+    & > .active {
+      position: relative;
+      color: #3385ff;
+      font-weight: 700;
+    }
+    & > .active::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 70upx;
+      height: 6upx;
+      background: #3385ff;
+    }
+  }
+  .order_list {
+    // height: 200upx;
+    height: 100%;
+    background: #f0f2f6;
+    padding: 0 0 20upx;
+    .list_item {
+      margin: 20upx 0 0;
+      // padding-left: 20upx;
+      position: relative;
+      height: 180upx;
+      width: 100vw;
+      background: #fff;
+      display: flex;
+      align-items: center;
+      & > image {
+        margin-left: 30upx;
+        width: 120upx;
+        height: 120upx;
+        border-radius: 60upx;
+      }
+      & > .store_name {
+        margin-left: 30upx;
+        & > .store_title {
+          margin-bottom: 30upx;
+          font-size: 32upx;
+          font-weight: 700;
+          color: #333;
+        }
+        & > .accumulative {
+          font-size: 26upx;
+          color: #999;
+        }
+      }
+      & > .store_btn {
+        position: absolute;
+        right: 30upx;
+        // padding-right: 30upx;
+        & > .btn_entrance {
+          display: inline-block;
+          font-size: 26upx;
+          color: #3385ff;
+          border: 1px solid #3385ff;
+          border-radius: 8upx;
+          padding: 15upx 30upx;
+          margin-left: 30upx;
+        }
+        & > .btn_forbid {
+          border: 1px solid #999;
+          color: #999;
+        }
       }
     }
   }
+  .pay_list {
+    padding-top:20upx;
+    padding-bottom: 100upx;
+    background-color: #f0f2f6;
+  }
 }
 </style>

mallApp/src/pages/order/orderItem.vue

@@ -0,0 +1,175 @@
+<template>
+  <view class="order-item-view" @click="clickItemEvent">
+    <view class="item-header">
+      <view class="title">
+        <image class="icon" :src="info.smallHdAvatar" alt="" />
+        <text class="name">
+          <text v-if="info.status == 3" style="color:green;font-weight:bold;">{{ info.hdName}}</text>
+          <text v-else>{{ info.hdName}}</text>
+        </text>
+      </view>
+      <view v-if="info.refund == 2" class="status" style="color:red;border:1px solid red;border-radius:20upx;font-size:20upx;padding:5upx 12upx;margin-right:40upx;">有退款</view>
+      <view v-if="info.debt == 1" class="status" style="color:red;border:1px solid red;border-radius:20upx;font-size:20upx;padding:5upx 12upx;margin-right:40upx;">赊账</view>
+      <text v-if="info.book == 1" class="status"  style="color:white;border:1px solid #657cac;border-radius:20upx;font-size:20upx;padding:5upx 12upx;margin-right:40upx;background:#657cac;">预订单</text>
+      <view class="status" v-if="info.status == 3" style="color:green;font-weight:bold;">{{ getStatusName }} </view>
+      <view class="status" v-else-if="info.status == 5" style="color:red;font-weight:bold;font-size:30upx;">{{ getStatusName }} </view>
+      <view class="status" v-else>{{ getStatusName }} </view>
+    </view>
+    <view class="item-main" >
+      <view class="item-info">
+
+        <view class="info-row">
+          <text class="info-label"> 创建：</text>
+          <text class="info-value">{{ info.addTime ? info.addTime.substring(5, 16) : '' }}</text>
+        </view>
+
+        <view class="info-row" v-if="info.payTime!='0000-00-00 00:00:00'">
+          <text class="info-label"> 确认：</text>
+          <text class="info-value">{{ info.payTime ? info.payTime.substring(5, 16) : '' }}</text>
+        </view>
+
+        <view class="info-row">
+          <text class="info-label"> 单号：</text>
+          <text class="info-value">{{ info.orderSn }} </text>
+        </view>
+        <view class="info-row">
+          <text class="info-label"> 采购：</text>
+          <text class="info-value">{{ info.shopAdminName }} </text>
+        </view>
+        <view class="info-row">
+          <text class="info-label"> 数量：</text>
+          <text v-if="info.smallNum > 0" class="info-value">{{ info.bigNum }}/{{info.smallNum}}</text>
+          <text class="info-value">{{info.bigNum}}</text>
+        </view>
+      </view>
+      <view class="item-price">
+        
+            <view v-if="info.orderPrice == info.actPrice">¥{{ info.orderPrice ? parseFloat(info.orderPrice):0 }}</view>
+            <view v-else>
+              <text style="text-decoration: line-through;color:#847676;">¥{{ info.orderPrice ? parseFloat(info.orderPrice):0 }}</text>
+              <text style="margin-left:10upx;">¥{{ info.actPrice ? parseFloat(info.actPrice):0 }}</text>
+            </view>
+
+        <text class="iconfont iconxiangyou"></text>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import { PURCHASE_ORDER_STATUS } from "@/utils/declare";
+export default {
+  props: {
+    info: {
+      required: true
+    }
+  },
+  data () {
+    return {
+      PURCHASE_ORDER_STATUS
+    };
+  },
+  computed: {
+    getStatusName () {
+      let statusName = "";
+
+      switch (this.info.status) {
+        case '1':
+          statusName = "待付款";
+          break;
+        case '2':
+          statusName = "待发货";
+          break;
+        case '3':
+          statusName = "待收货";
+          break;
+        case '4':
+          statusName = "已完成";
+          break;
+        case '5':
+          statusName = "已取消";
+          break;
+        default:
+          break;
+      }
+      return statusName;
+    }
+  },
+  methods: {
+    clickItemEvent () {
+      this.$emit("click", this.info);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.order-item-view {
+  padding: 30upx 0;
+  margin-bottom: 20upx;
+  width: 100%;
+  background-color: #fff;
+  .item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20upx;
+    .title {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      .icon {
+        margin: 0 20upx;
+        width: 50upx;
+        height: 50upx;
+        border-radius: 25upx;
+        border-radius: 50%;
+      }
+      .name {
+        font-size: 32upx;
+        font-weight: 600;
+        color: #333333;
+      }
+    }
+    .status {
+      flex-shrink: 0;
+      margin-right: 20upx;
+      color: $mainColor;
+    }
+  }
+  .item-main {
+    display: flex;
+    padding: 0 20upx;
+    box-sizing: border-box;
+    align-items: flex-end;
+    .item-info {
+      flex: 1;
+      font-size: 26upx;
+      .info-row {
+        margin-top: 12upx;
+        display: flex;
+        align-items: center;
+      }
+      .info-label {
+        font-weight: 400;
+        color: #999999;
+      }
+      .info-value {
+        font-weight: 400;
+        color: #333333;
+      }
+    }
+    .item-price {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      font-size: 30upx;
+      font-weight: 600;
+      color: #333333;
+      .iconfont {
+        font-size: 28upx;
+        color: #999999;
+        margin-left: 10upx;
+      }
+    }
+  }
+}
+</style>