xcx

src/pages/system/dataStatistics/goodsOrderList/index.vue

@@ -1,16 +1,163 @@
 <template>
   <div class="subPage">
-    1
+    <div class="system-table-search">
+      <div class="flex-h">
+        <ul class="searchFilterLine" style="white-space: normal;">
+          <li>
+            <el-select v-model="CaseId" placeholder="请选择案场">
+              <el-option
+                v-for="item in cases"
+                :key="item.CaseId"
+                :label="item.CaseName"
+                :value="item.CaseId">
+              </el-option>
+            </el-select>
+          </li>
+          <li>
+            <el-select v-model="postData.type" placeholder="请选择下单用户类型">
+              <el-option
+                v-for="item in typeList"
+                :key="item.CaseId"
+                :label="item.CaseName"
+                :value="item.CaseId">
+              </el-option>
+            </el-select>
+          </li>
+          <li>
+            <el-select v-model="postData.status" placeholder="请选择订单状态">
+              <el-option
+                v-for="item in statusList"
+                :key="item.CaseId"
+                :label="item.CaseName"
+                :value="item.CaseId">
+              </el-option>
+            </el-select>
+          </li>
+          <li style="white-space: nowrap;">
+            <span>有下单时间：</span>
+            <el-date-picker
+              v-model="postData.startDate"
+              type="date"
+              placeholder="选择起始日期">
+            </el-date-picker>
+            <span>至</span>
+            <el-date-picker
+              v-model="postData.endDate"
+              type="date"
+              placeholder="选择截止日期">
+            </el-date-picker>
+          </li>
+        </ul>
+      </div>
+      <div class="flex-h">
+        <div class="flex-item flex-h"></div>
+        <el-button
+          size="mini"
+          type="primary" @click="search">搜索</el-button>
+        <el-button
+          size="mini"
+          type="success" @click="search">导出Excel</el-button>
+      </div>
+      <div class="moreFilter"></div>
+    </div>
+    <div class="system-table-box">
+      <el-table
+        :data="currentList"
+        stripe
+        style="width: 100%">
+        <el-table-column
+          prop="CaseName"
+          label="所属案场">
+        </el-table-column>
+        <el-table-column
+          prop="Name"
+          label="卡券名称">
+        </el-table-column>
+        <el-table-column
+          prop="GoodsList"
+          label="使用商品">
+        </el-table-column>
+        <el-table-column
+          prop="GetType"
+          label="获取方式">
+        </el-table-column>
+        <el-table-column
+          prop="NickName"
+          label="微信昵称">
+        </el-table-column>
+        <el-table-column
+          prop="Phone"
+          label="手机号">
+        </el-table-column>
+        <el-table-column
+          prop="SalerName"
+          label="销售">
+        </el-table-column>
+        <el-table-column
+          prop="EndDate"
+          label="有效期">
+        </el-table-column>
+        <el-table-column
+          prop="GetDate"
+          label="获取时间">
+        </el-table-column>
+        <el-table-column
+          prop="CheckDate"
+          label="核销时间">
+        </el-table-column>
+        <el-table-column
+          prop="Status"
+          label="状态">
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      @current-change="handleCurrentChange"
+      :current-page.sync="postData.page"
+      :page-size="postData.pagesize"
+      layout="prev, pager, next, jumper"
+      :total="total">
+    </el-pagination>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import tableSearch from '@/components/tableSearch/index'
 
 export default {
   name: '',
   data () {
     return {
+      total: 0,
+      postData: { // 表格搜索条件
+        phone: '', // 手机号
+        status: '', // 状态
+        caseid: '', // 案场id
+        type: '', // 获取方式
+        startDate: '', // 起始日期
+        endDate: '', // 截止日期
+        name: '', // 卡券名称
+        page: 1, // 当前页码
+        pagesize: 10, // 请求数据量
+      },
+      currentList: [],
+      typeList: [],
+      statusList: [],
+    }
+  },
+  computed: {
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default
+    }),
+    CaseId: {
+      get () {
+        return this.postData.caseid || this.defaultCaseId
+      },
+      set (val) {
+        this.postData.caseid = val
+      }
     }
   },
   components: {
@@ -21,6 +168,12 @@ export default {
     })
   },
   methods: {
+    search () { // 搜索
+      // 1
+    },
+    handleCurrentChange (val) { // 跳转到分页
+      // this.getList()
+    },
   }
 }
 </script>
@@ -28,4 +181,9 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
 @import "page.scss";
+.searchFilterLine{
+  >li{
+    margin-bottom: 20px;
+  }
+}
 </style>