全新UI视觉体验，移动端API优化降低重复调用，提高并发6倍，修复N多Bug

admin/src/views/order/index.vue

@@ -31,8 +31,18 @@
               </el-radio-group>
               <el-date-picker v-model="timeVal" value-format="yyyy-MM-dd" format="yyyy-MM-dd" size="small" type="daterange" placement="bottom-end" placeholder="自定义时间" style="width: 220px;" @change="onchangeTime" />
             </el-form-item>
+            <el-form-item label="订单类型：" class="width100">
+              <el-select v-model="tableFrom.type" placeholder="请选择" class="selWidth" @change="seachList">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
             <el-form-item label="订单号：" class="width100">
-              <el-input v-model="tableFrom.orderId" placeholder="请输入订单号" class="selWidth" size="small" clearable>
+              <el-input v-model="tableFrom.orderNo" placeholder="请输入订单号" class="selWidth" size="small" clearable>
                 <el-button slot="append" icon="el-icon-search" size="small" @click="seachList" />
               </el-input>
             </el-form-item>
@@ -49,27 +59,27 @@
         highlight-current-row
         @selection-change="handleSelectionChange"
       >
-        <el-table-column type="expand">
-          <template slot-scope="props">
-            <el-form label-position="left" inline class="demo-table-expand">
-              <el-form-item label="商品总价：">
-                <span>{{ props.row.totalPrice }}</span>
-              </el-form-item>
-              <el-form-item label="推广人：">
-                <span>{{ props.row.spreadInfo.id + ' / ' + props.row.spreadInfo.name }}</span>
-              </el-form-item>
-              <el-form-item label="用户备注：">
-                <span>{{ props.row.mark }}</span>
-              </el-form-item>
-              <el-form-item label="商家备注：">
-                <span>{{ props.row.remark }}</span>
-              </el-form-item>
-              <el-form-item label="核销码：" v-if="props.row.shippingType === 2">
-                <span>{{ props.row.verifyCode }}</span>
-              </el-form-item>
-            </el-form>
-          </template>
-        </el-table-column>
+        <!--<el-table-column type="expand">-->
+          <!--<template slot-scope="props">-->
+            <!--<el-form label-position="left" inline class="demo-table-expand">-->
+              <!--<el-form-item label="商品总价：">-->
+                <!--<span>{{ props.row.totalPrice | filterEmpty }}</span>-->
+              <!--</el-form-item>-->
+              <!--<el-form-item label="推广人：">-->
+                <!--<span>{{ props.row.spreadInfo.id + ' / ' + props.row.spreadInfo.name }}</span>-->
+              <!--</el-form-item>-->
+              <!--<el-form-item label="用户备注：">-->
+                <!--<span>{{ props.row.mark | filterEmpty }}</span>-->
+              <!--</el-form-item>-->
+              <!--<el-form-item label="商家备注：">-->
+                <!--<span>{{ props.row.remark | filterEmpty }}</span>-->
+              <!--</el-form-item>-->
+              <!--<el-form-item label="核销码：" v-if="props.row.verifyCode">-->
+                <!--<span>{{ props.row.verifyCode }}</span>-->
+              <!--</el-form-item>-->
+            <!--</el-form>-->
+          <!--</template>-->
+        <!--</el-table-column>-->
         <el-table-column
           type="selection"
           width="55"
@@ -102,13 +112,13 @@
               <div v-for="(val, i ) in scope.row.productList" :key="i" class="tabBox acea-row row-middle" style="flex-wrap: inherit;">
                 <div class="demo-image__preview mr10">
                   <el-image
-                    :src="val.info.productInfo.image"
-                    :preview-src-list="[val.info.productInfo.image]"
+                    :src="val.info.image"
+                    :preview-src-list="[val.info.image]"
                   />
                 </div>
                 <div>
-                  <span class="tabBox_tit mr10">{{ val.info.productInfo.storeName + ' | ' }}{{ val.info.productInfo.attrInfo.suk ? val.info.productInfo.attrInfo.suk:'-' }}</span>
-                  <span class="tabBox_pice">{{ '￥'+ val.info.productInfo.attrInfo.price ? val.info.productInfo.attrInfo.price + ' x '+ val.info.cartNum : '-' }}</span>
+                  <span class="tabBox_tit mr10">{{ val.info.productName + ' | ' }}{{ val.info.sku ? val.info.sku:'-' }}</span>
+                  <span class="tabBox_pice">{{ '￥'+ val.info.price ? val.info.price + ' x '+ val.info.payNum : '-' }}</span>
                 </div>
               </div>
             </div>
@@ -162,15 +172,15 @@
         <el-table-column label="操作" min-width="150" fixed="right" align="center">
           <template slot-scope="scope">
             <el-button v-if="scope.row.paid === false" type="text" size="small" @click="edit(scope.row)" class="mr10">编辑</el-button>
-            <el-button v-if="scope.row.statusStr.key === 'notShipped' && scope.row.shippingType === 1 && scope.row.refundStatus !==2" type="text" size="small" class="mr10" @click="sendOrder(scope.row)">发送货</el-button>
-            <el-button v-if="scope.row.shippingType === 2 && scope.row.statusStr.key === 'toBeWrittenOff'  && scope.row.paid == true && scope.row.refundStatus === 0 " type="text" size="small" class="mr10" @click="onWriteOff(scope.row)">立即核销</el-button>
+            <el-button v-if="scope.row.statusStr.key === 'notShipped' && scope.row.refundStatus ===0" type="text" size="small" class="mr10" @click="sendOrder(scope.row)">发送货</el-button>
+            <el-button v-if=" scope.row.statusStr.key === 'toBeWrittenOff'  && scope.row.paid == true && scope.row.refundStatus === 0 " type="text" size="small" class="mr10" @click="onWriteOff(scope.row)">立即核销</el-button>
             <el-dropdown trigger="click">
               <span class="el-dropdown-link">
                 更多<i class="el-icon-arrow-down el-icon--right" />
               </span>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item @click.native="onOrderDetails(scope.row.id)">订单详情</el-dropdown-item>
-                <el-dropdown-item @click.native="onOrderLog(scope.row.id)">订单记录</el-dropdown-item>
+                <el-dropdown-item @click.native="onOrderDetails(scope.row.orderId)">订单详情</el-dropdown-item>
+                <el-dropdown-item @click.native="onOrderLog(scope.row.orderId)">订单记录</el-dropdown-item>
                 <el-dropdown-item @click.native="onOrderMark(scope.row)">订单备注</el-dropdown-item>
                 <el-dropdown-item v-show="scope.row.refundStatus === 1" @click.native="onOrderRefuse(scope.row)">拒绝退款</el-dropdown-item>
                 <!--v-show="((scope.row.statusStr.key !== 'refunded' && scope.row.statusStr.key !== 'unPaid') && (parseFloat(scope.row.payPrice) >= parseFloat(scope.row.refundPrice))) || (scope.row.payPrice == 0 && [0,1].indexOf(scope.row.refundStatus) !== -1)"-->
@@ -259,6 +269,9 @@
     <!-- 发送货 -->
     <order-send ref="send" :orderId="orderId" @submitFail="getList"></order-send>
 
+    <!-- 发送货视频号商品 -->
+    <order-video-send ref="videoSend" :orderId="orderId" @submitFail="getList"></order-video-send>
+
     <!--拒绝退款-->
     <el-dialog
       title="拒绝退款原因"
@@ -274,7 +287,7 @@
       />
     </el-dialog>
 
-    <!--立即拒绝-->
+    <!--立即退款-->
     <el-dialog
       title="退款处理"
       :visible.sync="refundVisible"
@@ -293,11 +306,12 @@
 </template>
 
 <script>
-  import { writeUpdateApi, orderListApi, orderUpdateApi, orderLogApi, orderMarkApi, orderDeleteApi, orderRefuseApi, orderRefundApi } from '@/api/order'
+  import { orderListDataApi, orderStatusNumApi, writeUpdateApi, orderListApi, orderUpdateApi, orderLogApi, orderMarkApi, orderDeleteApi, orderRefuseApi, orderRefundApi } from '@/api/order'
   import cardsData from '@/components/cards/index'
   import zbParser from '@/components/FormGenerator/components/parser/ZBParser'
   import detailsFrom from './orderDetail'
   import orderSend from './orderSend'
+  import orderVideoSend from './orderVideoSend'
   import { storeStaffListApi } from '@/api/storePoint'
   import Cookies from 'js-cookie'
   import { isWriteOff } from "@/utils";
@@ -307,13 +321,21 @@
       cardsData,
       zbParser,
       detailsFrom,
-      orderSend
+      orderSend,
+      orderVideoSend
     },
     data() {
         return {
+          options: [{
+            value: 0,
+            label: '商城订单'
+          }, {
+            value: 1,
+            label: '视频号订单'
+          }],
           RefuseVisible: false,
           RefuseData:{},
-          orderId: 0,
+          orderId: '',
           refundVisible: false,
           refundData: {},
           dialogVisibleJI: false,
@@ -324,7 +346,7 @@
           tableFromLog: {
             page: 1,
             limit: 10,
-            oid: null
+            orderNo: 0
           },
           LogLoading: false,
           isCreate: 1,
@@ -338,9 +360,10 @@
           tableFrom: {
             status: 'all',
             dateLimit: '',
-            orderId: '',
+            orderNo: '',
             page: 1,
-            limit: 20
+            limit: 20,
+            type: ''
           },
           orderChartType: {},
           timeVal: [],
@@ -349,11 +372,14 @@
           ids: '',
           orderids: '',
           cardLists: [],
-          isWriteOff: isWriteOff()
+          isWriteOff: isWriteOff(),
+          proType: 0
         }
       },
     mounted() {
-      this.getList()
+      this.getList();
+      this.getOrderStatusNum();
+      this.getOrderListData();
     },
     methods: {
       resetFormRefundhandler(){
@@ -384,7 +410,7 @@
         this.RefuseVisible = false
       },
       onOrderRefuse(row) {
-        this.orderids = row.id
+        this.orderids = row.orderId
         this.RefuseData = {
           orderId: row.orderId,
           reason: ''
@@ -392,7 +418,7 @@
         this.RefuseVisible = true
       },
       RefusehandlerSubmit(formValue) {
-        orderRefuseApi({ id: this.orderids, reason: formValue.reason}).then(data => {
+        orderRefuseApi({ orderNo: this.orderids, reason: formValue.reason}).then(data => {
           this.$message.success('操作成功')
           this.RefuseVisible = false
           this.getList()
@@ -408,11 +434,11 @@
           amount: row.payPrice,
           type: ''
         }
-        this.orderids = row.id
+        this.orderids = row.orderId
         this.refundVisible = true
       },
       refundhandlerSubmit(formValue) {
-        orderRefundApi({ amount: formValue.amount, orderId: this.orderids, type: formValue.type}).then(data => {
+        orderRefundApi({ amount: formValue.amount, orderNo: this.orderids}).then(data => {
           this.$message.success('操作成功')
           this.refundVisible = false
           this.getList()
@@ -420,16 +446,21 @@
       },
       // 发送
       sendOrder(row) {
-        this.$refs.send.modals = true;
-        this.$refs.send.getList();
-        this.$refs.send.sheetInfo();
-        this.orderId = row.id;
+        if(row.type===0){
+          this.$refs.send.modals = true;
+          this.$refs.send.getList();
+          this.$refs.send.sheetInfo();
+        }else{
+          this.$refs.videoSend.modals = true;
+          if(!JSON.parse(sessionStorage.getItem('videoExpress'))) this.$refs.videoSend.companyGetList();
+        }
+        this.orderId = row.orderId;
       },
       // 订单删除
       handleDelete(row, idx) {
         if (row.isDel) {
           this.$modalSure().then(() => {
-            orderDeleteApi({ id: row.id }).then(() => {
+            orderDeleteApi({ orderNo: row.orderId }).then(() => {
               this.$message.success('删除成功')
               this.tableData.data.splice(idx, 1)
             })
@@ -451,7 +482,7 @@
       onOrderLog(id) {
         this.dialogVisibleJI = true
         this.LogLoading = true
-        this.tableFromLog.oid = id
+        this.tableFromLog.orderNo = id
         orderLogApi( this.tableFromLog ).then(res => {
           this.tableDataLog.data = res.list
           this.tableDataLog.total = res.total
@@ -462,11 +493,11 @@
       },
       pageChangeLog(page) {
         this.tableFromLog.page = page
-        this.getList()
+        this.onOrderLog()
       },
       handleSizeChangeLog(val) {
         this.tableFromLog.limit = val
-        this.getList()
+        this.onOrderLog()
       },
       handleClose() {
         this.dialogVisible = false
@@ -482,7 +513,7 @@
           inputPlaceholder: '请输入订单备注',
           inputValidator: (value) => { if(!value) return '输入不能为空'}
         }).then(({value}) => {
-          orderMarkApi({ mark : value, id: row.id}).then(() => {
+          orderMarkApi({ mark : value, orderNo: row.orderId}).then(() => {
             this.$message.success('操作成功')
             this.getList();
           })
@@ -503,6 +534,8 @@
         this.timeVal = [];
         this.tableFrom.page = 1
         this.getList();
+        this.getOrderStatusNum();
+        this.getOrderListData();
       },
       // 具体日期
       onchangeTime (e) {
@@ -510,6 +543,8 @@
         this.tableFrom.dateLimit = e ? this.timeVal.join(',') : ''
         this.tableFrom.page = 1
         this.getList();
+        this.getOrderStatusNum();
+        this.getOrderListData();
       },
       // 编辑
       edit(row) {
@@ -535,21 +570,30 @@
       getList() {
         this.listLoading = true
         orderListApi(this.tableFrom).then(res => {
-          this.tableData.data = res.list.list || []
-          this.tableData.total = res.list.total
-          this.orderChartType = res.status
-          const stat = res.top
-          this.cardLists = [
-            { name: '订单数量', count: stat.count },
-            { name: '订单金额', count: stat.amount },
-            { name: '微信支付金额', count: stat.weChatAmount },
-            { name: '余额支付金额', count: stat.yueAmount }
-          ]
+          this.tableData.data = res.list || [];
+          this.tableData.total = res.total;
           this.listLoading = false
         }).catch(() => {
           this.listLoading = false
         })
       },
+      // 数据统计
+      getOrderListData() {
+        orderListDataApi({dateLimit:this.tableFrom.dateLimit}).then(res => {
+          this.cardLists = [
+            { name: '订单数量', count: res.count },
+            { name: '订单金额', count: res.amount },
+            { name: '微信支付金额', count: res.weChatAmount },
+            { name: '余额支付金额', count: res.yueAmount }
+          ]
+        });
+      },
+      // 获取各状态数量
+      getOrderStatusNum() {
+        orderStatusNumApi({dateLimit:this.tableFrom.dateLimit}).then(res => {
+          this.orderChartType = res;
+        });
+      },
       pageChange(page) {
         this.tableFrom.page = page
         this.getList()

admin/src/views/order/orderDetail.vue

@@ -9,8 +9,8 @@
       <div class="description" v-loading="loading">
         <div class="title">用户信息</div>
         <div class="acea-row">
-          <div class="description-term">用户昵称：{{orderDatalist.user?orderDatalist.user.nickname:orderDatalist.realName}}</div>
-          <div class="description-term">绑定电话：{{orderDatalist.user.phone ? orderDatalist.user.phone : '无'}}</div>
+          <div class="description-term">用户昵称：{{orderDatalist.realName}}</div>
+          <div class="description-term">绑定电话：{{orderDatalist.phone ? orderDatalist.phone : '无'}}</div>
         </div>
         <el-divider></el-divider>
         <div class="title">{{orderDatalist.statusStr.key === 'toBeWrittenOff'?'提货信息': '收货信息'}}</div>
@@ -25,8 +25,8 @@
           <div class="description-term">订单编号：{{orderDatalist.orderId}}</div>
           <div class="description-term" style="color: red">订单状态：{{orderDatalist.statusStr.value}}</div>
           <div class="description-term">商品总数：{{orderDatalist.totalNum}}</div>
-          <div class="description-term">商品总价：{{orderDatalist.totalPrice}}</div>
-          <div class="description-term">交付邮费：{{orderDatalist.payPostage}}</div>
+          <div class="description-term">商品总价：{{orderDatalist.proTotalPrice}}</div>
+          <div class="description-term">支付邮费：{{orderDatalist.payPostage}}</div>
           <div class="description-term">优惠券金额：{{orderDatalist.couponPrice}}</div>
           <div class="description-term">实际支付：{{orderDatalist.payPrice}}</div>
           <div class="description-term fontColor3" v-if="orderDatalist.refundPrice">退款金额：{{orderDatalist.refundPrice}}</div>
@@ -34,7 +34,7 @@
           <div class="description-term" v-if="orderDatalist.backIntegral">退回积分：{{orderDatalist.backIntegral}}</div>
           <div class="description-term">创建时间：{{orderDatalist.createTime}}</div>
           <div class="description-term">支付方式：{{orderDatalist.payTypeStr}}</div>
-          <div class="description-term">推广人：{{orderDatalist.spreadInfo.id + ' / ' +orderDatalist.spreadInfo.name}}</div>
+          <div class="description-term">推广人：{{orderDatalist.spreadName | filterEmpty}}</div>
           <div class="description-term" v-if="orderDatalist.shippingType === 2 && orderDatalist.statusStr.key === 'notShipped'">门店名称：{{orderDatalist.storeName}}</div>
           <div class="description-term" v-if="orderDatalist.shippingType === 2 && orderDatalist.statusStr.key === 'notShipped'">核销码：{{orderDatalist.user_phone}}</div>
           <div class="description-term">商家备注：{{orderDatalist.remark}}</div>
@@ -106,7 +106,7 @@ export default {
   name: 'OrderDetail',
   props: {
     orderId: {
-      type: Number,
+      type: String,
       default: 0
     }
   },
@@ -129,13 +129,13 @@ export default {
     },
     // 获取订单物流信息
     getOrderData () {
-      getLogisticsInfoApi({id:this.orderId}).then(async res => {
+      getLogisticsInfoApi({orderNo:this.orderId}).then(async res => {
         this.result = res.list;
       })
     },
     getDetail(id) {
       this.loading = true
-      orderDetailApi({id: id}).then(res => {
+      orderDetailApi({orderNo: id}).then(res => {
         this.orderDatalist = res
         this.loading = false
       }).catch(() => {

admin/src/views/order/orderSend.vue

@@ -91,7 +91,7 @@
   export default {
     name: 'orderSend',
     props: {
-      orderId: Number
+      orderId: String
     },
     data() {
       return {
@@ -100,7 +100,6 @@
           expressRecordType: '1',
           expressId: '',
           expressCode: '',
-          id: '',
           deliveryName: '',
           deliveryTel: '',
           // expressName: '',
@@ -109,6 +108,7 @@
           toAddr: '',
           toName: '',
           toTel: '',
+          orderNo: ''
         },
         modals: false,
         express: [],
@@ -192,7 +192,7 @@
       },
       // 提交
       putSend(name) {
-        this.formItem.id = this.orderId
+        this.formItem.orderNo = this.orderId;
         this.$refs[name].validate((valid) => {
           if (valid) {
             orderSendApi(this.formItem).then(async => {

admin/src/views/order/orderVideoSend.vue

@@ -0,0 +1,120 @@
+<template>
+  <el-dialog :visible.sync="modals" title="发送货" class="order_box" :before-close="handleClose" width="600px">
+    <el-form ref="formItem" :model="formItem" label-width="110px" @submit.native.prevent :rules="rules">
+      <el-form-item label="快递公司：" prop="expressCode">
+        <el-select v-model="formItem.deliveryId" filterable style="width:80%;">
+          <el-option v-for="(item,i) in express" :value="item.deliveryId" :key="i" :label="item.deliveryName"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="快递单号：" prop="waybillId">
+        <el-input v-model="formItem.waybillId" placeholder="请输入快递单号" style="width:80%;"></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button size="mini" type="primary" @click="putSend('formItem')">提交</el-button>
+      <el-button size="mini" @click="cancel('formItem')">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import {videoSendApi, sheetInfoApi, companyGetListApi} from '@/api/order'
+  const validatePhone = (rule, value, callback) => {
+    if (!value) {
+      return callback(new Error('请填写手机号'));
+    } else if (!/^1[3456789]\d{9}$/.test(value)) {
+      callback(new Error('手机号格式不正确!'));
+    } else {
+      callback();
+    }
+  };
+  export default {
+    name: 'orderSend',
+    props: {
+      orderId: String
+    },
+    data() {
+      return {
+        formItem: {
+          deliveryId: '',
+          orderNo: '',
+          waybillId: ''
+        },
+        modals: false,
+        express: [],
+        exportTempList: [],
+        tempImg: '',
+        rules: {
+          deliveryId: [
+            {required: true, message: '请选择快递公司', trigger: 'change'}
+          ],
+          waybillId: [
+            {required: true, message: '请输入快递单号', trigger: 'blur'}
+          ]
+        },
+        expressType: 'normal'
+      }
+    },
+    mounted() {
+      this.express = JSON.parse(sessionStorage.getItem('videoExpress'));
+    },
+    methods: {
+      // 视频号快递公司
+      companyGetList() {
+        companyGetListApi().then(async res => {
+          this.express = res;
+          sessionStorage.setItem('videoExpress', JSON.stringify(res))
+        })
+      },
+      // 提交
+      putSend(name) {
+        this.formItem.orderNo = this.orderId;
+        this.$refs[name].validate((valid) => {
+          if (valid) {
+            videoSendApi(this.formItem).then(async => {
+              this.$message.success('发送货成功');
+              this.modals = false;
+              this.$refs[name].resetFields();
+              this.$emit('submitFail')
+            })
+          } else {
+            this.$message.error('请填写信息');
+          }
+        })
+      },
+      handleClose() {
+        this.cancel('formItem');
+      },
+      cancel(name) {
+        this.modals = false;
+        this.$refs[name].resetFields();
+        this.formItem.type = '1';
+        this.formItem.expressRecordType = '1';
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .width8 {
+    width: 80%;
+  }
+
+  .width9 {
+    width: 70%;
+  }
+
+  .tempImgList {
+    // opacity: 1;
+    width: 38px !important;
+    height: 30px !important;
+    // margin-top: -30px;
+    cursor: pointer;
+    position: absolute;
+    z-index: 11;
+    img {
+      width: 38px !important;
+      height: 30px !important;
+    }
+  }
+</style>