订单列表，优化时间筛选条件,增加支付状态筛选条件

src/views/order/list/index.vue

@@ -6,78 +6,89 @@
           <el-form size="small" label-width="100px">
             <el-form-item label="订单状态：">
               <el-radio-group v-model="tableFrom.status" type="button" @change="getList(1)">
-                <el-radio-button label>全部 {{ '(' +orderChartType.all?orderChartType.all:0 + ')' }}</el-radio-button>
+                <el-radio-button label>全部 {{
+                    '(' + orderChartType.all ? orderChartType.all : 0 + ')'
+                  }}
+                </el-radio-button>
                 <el-radio-button
-                  label="1"
-                >待付款 {{ '(' +orderChartType.unpaid?orderChartType.unpaid:0+ ')' }}</el-radio-button>
+                    label="1"
+                >待付款 {{ '(' + orderChartType.unpaid ? orderChartType.unpaid : 0 + ')' }}
+                </el-radio-button>
                 <el-radio-button
-                  label="2"
-                >待发货 {{ '(' +orderChartType.unshipped?orderChartType.unshipped:0+ ')' }}</el-radio-button>
+                    label="2"
+                >待发货 {{ '(' + orderChartType.unshipped ? orderChartType.unshipped : 0 + ')' }}
+                </el-radio-button>
                 <el-radio-button
-                  label="3"
-                >待收货 {{ '(' +orderChartType.untake?orderChartType.untake:0+ ')' }}</el-radio-button>
+                    label="3"
+                >待收货 {{ '(' + orderChartType.untake ? orderChartType.untake : 0 + ')' }}
+                </el-radio-button>
                 <el-radio-button
-                  label="4"
-                >待评价 {{ '(' +orderChartType.unevaluate?orderChartType.unevaluate:0+ ')' }}</el-radio-button>
+                    label="4"
+                >待评价 {{ '(' + orderChartType.unevaluate ? orderChartType.unevaluate : 0 + ')' }}
+                </el-radio-button>
                 <el-radio-button
-                  label="5"
-                >交易完成 {{ '(' +orderChartType.complete?orderChartType.complete:0+ ')' }}</el-radio-button>
+                    label="5"
+                >交易完成 {{ '(' + orderChartType.complete ? orderChartType.complete : 0 + ')' }}
+                </el-radio-button>
                 <el-radio-button
-                  label="6"
-                >已退款 {{ '(' +orderChartType.refund?orderChartType.refund:0+ ')' }}</el-radio-button>
+                    label="6"
+                >已退款 {{ '(' + orderChartType.refund ? orderChartType.refund : 0 + ')' }}
+                </el-radio-button>
                 <el-radio-button
-                  label="7"
-                >已删除 {{ '(' +orderChartType.del?orderChartType.del:0+ ')' }}</el-radio-button>
+                    label="7"
+                >已删除 {{ '(' + orderChartType.del ? orderChartType.del : 0 + ')' }}
+                </el-radio-button>
               </el-radio-group>
             </el-form-item>
             <el-form-item label="时间选择：" class="width100">
               <el-radio-group
-                v-model="tableFrom.date"
-                type="button"
-                class="mr20"
-                size="small"
-                @change="selectChange(tableFrom.date)"
+                  v-model="tableFrom.date"
+                  type="button"
+                  class="mr20"
+                  size="small"
+                  @change="selectChange(tableFrom.date)"
               >
                 <el-radio-button
-                  v-for="(item,i) in fromList.fromTxt"
-                  :key="i"
-                  :label="item.val"
-                >{{ item.text }}</el-radio-button>
+                    v-for="(item,i) in fromList.fromTxt"
+                    :key="i"
+                    :label="item.val"
+                >{{ item.text }}
+                </el-radio-button>
               </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: 250px;"
-                @change="onchangeTime"
+                  v-model="timeVal"
+                  value-format="yyyy/MM/dd HH:mm:ss"
+                  format="yyyy/MM/dd HH:mm:ss"
+                  size="small"
+                  type="datetimerange"
+                  placement="bottom-end"
+                  placeholder="自定义时间"
+                  style="width: 250px;"
+                  @change="onchangeTime"
               />
             </el-form-item>
             <el-form-item label="商户名称：">
               <el-select
-                v-model="tableFrom.mer_id"
-                clearable
-                filterable
-                placeholder="请选择"
-                class="selWidth"
-                @change="getList(1)"
+                  v-model="tableFrom.mer_id"
+                  clearable
+                  filterable
+                  placeholder="请选择"
+                  class="selWidth"
+                  @change="getList(1)"
               >
                 <el-option
-                  v-for="item in merSelect"
-                  :key="item.mer_id"
-                  :label="item.mer_name"
-                  :value="item.mer_id"
+                    v-for="item in merSelect"
+                    :key="item.mer_id"
+                    :label="item.mer_name"
+                    :value="item.mer_id"
                 />
               </el-select>
             </el-form-item>
-            <el-form-item label="支付类型：" class="check-status" >
+            <el-form-item label="支付类型：" class="check-status">
               <el-select v-model="tableFrom.pay_type" placeholder="全部" class="filter-item" @change="getList(1)">
-                <el-option label="全部"  value="" />
-                <el-option label="微信" :value="1" />
-                <el-option label="支付宝" :value="4" />
+                <el-option label="全部" value=""/>
+                <el-option label="微信" :value="1"/>
+                <el-option label="支付宝" :value="4"/>
                 <!-- <el-option label="虚拟支付" :value="0" /> -->
 
                 <!-- <el-option label="红积分兑换" :value="6" /> -->
@@ -86,38 +97,48 @@
 
             <el-form-item label="关键字：" class="width100">
               <el-input
-                v-model="tableFrom.keywords"
-                placeholder="请输入订单号/收货人/联系方式"
-                class="selWidth"
-                size="small"
+                  v-model="tableFrom.keywords"
+                  placeholder="请输入订单号/收货人/联系方式"
+                  class="selWidth"
+                  size="small"
               >
-                <el-button slot="append" icon="el-icon-search" size="small" @click="getList(1)" />
+                <el-button slot="append" icon="el-icon-search" size="small" @click="getList(1)"/>
               </el-input>
             </el-form-item>
             <el-form-item label="用户信息：" class="width100">
               <el-input
-                v-model="tableFrom.username"
-                placeholder="请输入用户昵称/手机号"
-                class="selWidth"
-                size="small"
+                  v-model="tableFrom.username"
+                  placeholder="请输入用户昵称/手机号"
+                  class="selWidth"
+                  size="small"
               >
-                <el-button slot="append" icon="el-icon-search" size="small" @click="getList(1)" />
+                <el-button slot="append" icon="el-icon-search" size="small" @click="getList(1)"/>
               </el-input>
             </el-form-item>
+            <el-form-item label="支付状态：" class="check-status">
+              <el-select v-model="tableFrom.paid" placeholder="全部" class="filter-item" @change="getList(1)">
+                <el-option label="全部" value=""/>
+                <el-option label="已支付" :value="1"/>
+                <el-option label="未支付" :value="0"/>
+                <!-- <el-option label="虚拟支付" :value="0" /> -->
+
+                <!-- <el-option label="红积分兑换" :value="6" /> -->
+              </el-select>
+            </el-form-item>
           </el-form>
         </div>
         <!-- <cards-data :card-lists="cardLists" /> -->
-        <redCards-data :card-lists="cardLists" class="orderCount-box" />
+        <redCards-data :card-lists="cardLists" class="orderCount-box"/>
         <!-- <otherCards-data :card-lists="cardLists" class="orderCount-box"/> -->
       </div>
       <el-table
-        v-loading="listLoading"
-        :data="tableData.data"
-        style="width: 100%"
-        size="mini"
-        class="table"
-        highlight-current-row
-        :cell-class-name="addTdClass"
+          v-loading="listLoading"
+          :data="tableData.data"
+          style="width: 100%"
+          size="mini"
+          class="table"
+          highlight-current-row
+          :cell-class-name="addTdClass"
       >
         <el-table-column type="expand">
           <template slot-scope="props">
@@ -139,7 +160,7 @@
         </el-table-column>
         <el-table-column label="订单编号" min-width="170">
           <template slot-scope="scope">
-            <span style="display: block;" v-text="scope.row.order_sn" />
+            <span style="display: block;" v-text="scope.row.order_sn"/>
             <span v-show="scope.row.is_del > 0" style="color: #ED4014;display: block;">用户已删除</span>
           </template>
         </el-table-column>
@@ -149,7 +170,7 @@
           </template>
         </el-table-column>
 
-        <el-table-column prop="user_info" label="用户信息" min-width="130" >
+        <el-table-column prop="user_info" label="用户信息" min-width="130">
           <template slot-scope="scope">
             <div class="tabBox acea-row row-middle">
               <span>{{ scope.row.user.nickname ? scope.row.user.nickname : '' }}</span>
@@ -160,39 +181,39 @@
           </template>
         </el-table-column>
 
-        <el-table-column prop="real_name" label="收货人" min-width="130" />
+        <el-table-column prop="real_name" label="收货人" min-width="130"/>
         <el-table-column label="商户名称" min-width="150">
           <template slot-scope="scope">
-            <span>{{ scope.row.merchant ? scope.row.merchant.mer_name :'' }}</span>
+            <span>{{ scope.row.merchant ? scope.row.merchant.mer_name : '' }}</span>
           </template>
         </el-table-column>
         <el-table-column label="商品信息" min-width="330">
           <template slot-scope="scope">
             <div
-              v-for="(val, i ) in scope.row.orderProduct"
-              :key="i"
-              class="tabBox acea-row row-middle"
+                v-for="(val, i ) in scope.row.orderProduct"
+                :key="i"
+                class="tabBox acea-row row-middle"
             >
               <div class="demo-image__preview">
-                <el-image referrerpolicy='no-referrer' 
-                  :src="val.cart_info.product.image"
-                  :preview-src-list="[val.cart_info.product.image]"
+                <el-image referrerpolicy='no-referrer'
+                          :src="val.cart_info.product.image"
+                          :preview-src-list="[val.cart_info.product.image]"
                 />
               </div>
               <span
-                class="tabBox_tit"
+                  class="tabBox_tit"
               >{{ val.cart_info.product.store_name + ' | ' }}{{ val.cart_info.productAttr.sku }}</span>
               <span class="tabBox_pice">
-                {{ '￥'+ val.cart_info.productAttr.price + ' x '+ val.product_num }}
+                {{ '￥' + val.cart_info.productAttr.price + ' x ' + val.product_num }}
                 <em
-                  v-if="val.refund_num < val.product_num && val.refund_num  > 0"
-                  style="color: red;font-style: normal;"
+                    v-if="val.refund_num < val.product_num && val.refund_num  > 0"
+                    style="color: red;font-style: normal;"
                 >(-{{ val.product_num - val.refund_num }})</em>
               </span>
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="pay_price" label="订单金额" min-width="100" />
+        <el-table-column prop="pay_price" label="订单金额" min-width="100"/>
         <!-- <el-table-column label="支付类型" min-width="80">
           <template slot-scope="scope">
              <span v-if="scope.row.paid == 1">{{scope.row.pay_type == 0 ? "虚拟支付" :scope.row.pay_type == 1 ? "微信支付" : scope.row.pay_type == 2 ? '小程序支付' :scope.row.pay_type == 4 ? '支付宝支付' :scope.row.pay_type == 5 ? '积分' : '' }}</span>
@@ -203,10 +224,11 @@
           <template slot-scope="scope">
              <span v-if="scope.row.paid == 1">
               <div class="tabBox acea-row row-middle">
-                {{checkPayString(scope.row.fzone_paytype, scope.row.pay_type)}}
+                {{ checkPayString(scope.row.fzone_paytype, scope.row.pay_type) }}
               </div>
               <div class="tabBox acea-row row-middle">
-                {{scope.row.fzone_paytype.price}}  <span v-if="scope.row.fzone_paytype.other">+{{scope.row.fzone_paytype.other}}</span>
+                {{ scope.row.fzone_paytype.price }}  <span
+                  v-if="scope.row.fzone_paytype.other">+{{ scope.row.fzone_paytype.other }}</span>
               </div>
              </span>
             <span v-else>--</span>
@@ -220,7 +242,9 @@
         <el-table-column label="订单状态" min-width="100">
           <template slot-scope="scope">
             <span v-if="scope.row.is_del == 0">
-              <span >{{ scope.row.status == 5? '待付款' : scope.row.status ==0? '待发货':scope.row.status==1? '待收货' : scope.row.status == 2 ? '待评价' : scope.row.status ==3 ? '已完成' : scope.row.status == 4 ? '已申请退款' : scope.row.status== -1 ? '已退款' : scope.row.status == 6 ? '已取消' :''  }}</span>
+              <span>{{
+                  scope.row.status == 5 ? '待付款' : scope.row.status == 0 ? '待发货' : scope.row.status == 1 ? '待收货' : scope.row.status == 2 ? '待评价' : scope.row.status == 3 ? '已完成' : scope.row.status == 4 ? '已申请退款' : scope.row.status == -1 ? '已退款' : scope.row.status == 6 ? '已取消' : ''
+                }}</span>
 
             </span>
             <span v-else>已删除</span>
@@ -235,10 +259,10 @@
           <template slot-scope="scope">
             <span v-for="(val, i ) in scope.row.orderProduct" :key="i">
               <el-button
-                v-if="orderFilter(scope.row)"
-                type="text"
-                size="small"
-                @click="onRefundDetail(scope.row.order_sn)"
+                  v-if="orderFilter(scope.row)"
+                  type="text"
+                  size="small"
+                  @click="onRefundDetail(scope.row.order_sn)"
               >查看退款单</el-button>
             </span>
             <el-button type="text" size="small" @click="onOrderDetails(scope.row.order_id)">详情</el-button>
@@ -247,29 +271,30 @@
       </el-table>
       <div class="block">
         <el-pagination
-          :page-sizes="[20, 40, 60, 80]"
-          :page-size="tableFrom.limit"
-          :current-page="tableFrom.page"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="tableData.total"
-          @size-change="handleSizeChange"
-          @current-change="pageChange"
+            :page-sizes="[20, 40, 60, 80]"
+            :page-size="tableFrom.limit"
+            :current-page="tableFrom.page"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="tableData.total"
+            @size-change="handleSizeChange"
+            @current-change="pageChange"
         />
       </div>
     </el-card>
     <!--详情-->
-    <details-from ref="orderDetail" />
+    <details-from ref="orderDetail"/>
   </div>
 </template>
 
 <script>
-import { orderListApi, chartApi } from "@/api/order";
-import { merSelectApi } from "@/api/product";
+import {orderListApi, chartApi} from "@/api/order";
+import {merSelectApi} from "@/api/product";
 import detailsFrom from "./orderDetail";
 // import cardsData from "@/components/cards/index";
 // import otherCardsData from "@/components/cards/other";
 import redCardsData from "@/components/cards/redPoint";
-import { fromList } from "@/libs/constants.js";
+import {fromList} from "@/libs/constants.js";
+
 export default {
   components: {
     redCardsData,
@@ -293,6 +318,7 @@ export default {
         date: "",
         mer_id: "",
         pay_type: "",
+        paid: "",
         order_ids: "",
         page: 1,
         limit: 20,
@@ -320,13 +346,13 @@ export default {
   mounted() {
     if (this.$route.query.hasOwnProperty("order_sn")) {
       // this.tableFrom.order_sn = this.$route.query.order_sn;
-      this.tableFrom.keywords=this.$route.query.order_sn;
+      this.tableFrom.keywords = this.$route.query.order_sn;
     } else {
       this.tableFrom.order_sn = "";
     }
     this.headerList();
     this.getMerSelect();
-    if(this.$route.query.hasOwnProperty("order_ids")){
+    if (this.$route.query.hasOwnProperty("order_ids")) {
       this.tableFrom.order_ids = this.$route.query.order_ids;
     } else {
       this.tableFrom.order_ids = "";
@@ -359,11 +385,11 @@ export default {
       const characterToCheck = '现金'; // 你想检查的字符
       if (fzone_paytype && fzone_paytype.note.includes(characterToCheck)) {
         return pay_type_name + "  " + fzone_paytype.note;
-      }else{
-        if (fzone_paytype && fzone_paytype.note){
-           return fzone_paytype.note
-        }else{
-           return ''
+      } else {
+        if (fzone_paytype && fzone_paytype.note) {
+          return fzone_paytype.note
+        } else {
+          return ''
         }
       }
     },
@@ -402,12 +428,12 @@ export default {
     // 商户列表；
     getMerSelect() {
       merSelectApi()
-        .then((res) => {
-          this.merSelect = res.data;
-        })
-        .catch((res) => {
-          this.$message.error(res.message);
-        });
+          .then((res) => {
+            this.merSelect = res.data;
+          })
+          .catch((res) => {
+            this.$message.error(res.message);
+          });
     },
     // 详情
     onOrderDetails(id) {
@@ -442,16 +468,16 @@ export default {
       this.listLoading = true;
       this.tableFrom.page = num ? num : this.tableFrom.page;
       orderListApi(this.tableFrom)
-        .then((res) => {
-          this.tableData.data = res.data.list;
-          this.tableData.total = res.data.count;
-          this.cardLists = res.data.stat;
-          this.listLoading = false;
-        })
-        .catch((res) => {
-          this.$message.error(res.message);
-          this.listLoading = false;
-        });
+          .then((res) => {
+            this.tableData.data = res.data.list;
+            this.tableData.total = res.data.count;
+            this.cardLists = res.data.stat;
+            this.listLoading = false;
+          })
+          .catch((res) => {
+            this.$message.error(res.message);
+            this.listLoading = false;
+          });
       this.headerList();
     },
     pageChange(page) {
@@ -464,12 +490,12 @@ export default {
     },
     headerList() {
       chartApi(this.tableFrom)
-        .then((res) => {
-          this.orderChartType = res.data;
-        })
-        .catch((res) => {
-          this.$message.error(res.message);
-        });
+          .then((res) => {
+            this.orderChartType = res.data;
+          })
+          .catch((res) => {
+            this.$message.error(res.message);
+          });
     },
   },
 };
@@ -477,21 +503,25 @@ export default {
 
 <style lang="scss" scoped>
 .demo-table-expand {
-  ::v-deep  label {
+  ::v-deep label {
     width: 83px !important;
   }
 }
+
 .selWidth {
   width: 300px;
 }
+
 .el-dropdown-link {
   cursor: pointer;
   color: #409eff;
   font-size: 12px;
 }
+
 .el-icon-arrow-down {
   font-size: 12px;
 }
+
 .tabBox_tit {
   width: 60%;
   font-size: 12px !important;