TBtools-订单管理

htmldev/TBTools/src/views/modules/mine/order/order-check-order.vue

@@ -1,13 +1,190 @@
 <template>
-  <div>check</div>
+  <div class="mod-log">
+    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form-item prop="time">
+        <el-date-picker
+          v-model="dataForm.time"
+          type="datetimerange"
+          :picker-options="pickerOptions"
+          :default-value="computedDatePickerDefaultValue()"
+          format="yyyy-MM-dd HH:mm:ss"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          range-separator="至"
+          start-placeholder="创建时间开始时间"
+          end-placeholder="创建时间结束时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item prop="region">
+        <el-select v-model="dataForm.region" placeholder="平台来源">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="orderId">
+        <el-input v-model="dataForm.orderId" placeholder="订单编号" clearable></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getDataList()">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      :data="dataList"
+      border
+      v-loading="dataListLoading"
+      style="width: 100%">
+      <el-table-column
+        prop="id"
+        header-align="center"
+        align="center"
+        width="80"
+        label="订单编号">
+      </el-table-column>
+      <el-table-column
+        prop="username"
+        header-align="center"
+        align="center"
+        label="礼品信息">
+      </el-table-column>
+      <el-table-column
+        prop="operation"
+        header-align="center"
+        align="center"
+        label="包裹数">
+      </el-table-column>
+      <el-table-column
+        prop="method"
+        header-align="center"
+        align="center"
+        width="150"
+        :show-overflow-tooltip="true"
+        label="平台来源">
+      </el-table-column>
+      <el-table-column
+        prop="params"
+        header-align="center"
+        align="center"
+        width="150"
+        :show-overflow-tooltip="true"
+        label="发货仓库">
+      </el-table-column>
+      <el-table-column
+        prop="time"
+        header-align="center"
+        align="center"
+        label="财务备注">
+      </el-table-column>
+      <el-table-column
+        prop="ip"
+        header-align="center"
+        align="center"
+        width="150"
+        label="消费点券">
+      </el-table-column>
+      <el-table-column
+        prop="createDate"
+        header-align="center"
+        align="center"
+        width="180"
+        label="支付时间">
+      </el-table-column>
+      <el-table-column
+        fixed="right"
+        label="操作"
+        width="100">
+        <template slot-scope="scope">
+          <el-button @click="handleClick(scope.row)" type="text" size="small">查看包裹</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper">
+    </el-pagination>
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'order-check-order'
+  name: 'order-check-order',
+  data () {
+    return {
+      dataForm: {
+        time: '',
+        region: '',
+        orderId: ''
+      },
+      pickerOptions: {
+        disabledDate (time) {
+          return time.getTime() > Date.now()
+        }
+      },
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      selectionDataList: []
+    }
+  },
+  created () {
+    // this.getDataList()
+  },
+  methods: {
+    // 设置data-picker默认值
+    computedDatePickerDefaultValue () {
+      // 当前时间
+      const nowTime = new Date()
+      const year = nowTime.getFullYear()
+      const month = nowTime.getMonth() + 1
+      const day = nowTime.getDate()
+      let preYear = year
+      let preMonth = month - 1
+      if (preMonth === 0) {
+        preYear = preYear - 1
+        preMonth = 12
+      }
+      let preDays = new Date(preYear, preMonth, 1)
+      return [`${preYear}-${preMonth}-${preDays.getDate()} 00:00:00`, `${year}-${month}-${day} 00:00:00`]
+    },
+    handleClick () {},
+    // 获取数据列表
+    getDataList () {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/sys/log/list'),
+        method: 'get',
+        params: this.$http.adornParams({
+          'page': this.pageIndex,
+          'limit': this.pageSize,
+          'key': this.dataForm.key
+        })
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.page.list
+          this.totalPage = data.page.totalCount
+        } else {
+          this.dataList = []
+          this.totalPage = 0
+        }
+        this.dataListLoading = false
+      })
+    },
+    // 每页数
+    sizeChangeHandle (val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getDataList()
+    },
+    // 当前页
+    currentChangeHandle (val) {
+      this.pageIndex = val
+      this.getDataList()
+    }
+  }
 }
 </script>
-
-<style lang="scss" scoped>
-
-</style>

htmldev/TBTools/src/views/modules/mine/order/order-check-package.vue

@@ -1,13 +1,235 @@
 <template>
-  <div>order-check-package</div>
+  <div class="mod-log">
+    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form-item label="创建时间：" prop="time">
+        <el-date-picker
+          v-model="dataForm.time"
+          type="datetimerange"
+          :picker-options="pickerOptions"
+          :default-value="computedDatePickerDefaultValue()"
+          format="yyyy-MM-dd HH:mm:ss"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          range-separator="至"
+          start-placeholder="创建时间开始时间"
+          end-placeholder="创建时间结束时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="包裹状态：" prop="status">
+        <el-select v-model="dataForm.status" placeholder="平台来源">
+          <el-option :label="item.label" :value="item.value" v-for="(item, index) in optionOfPackageStatus"
+                     :key="index"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="手机号：" prop="phone">
+        <el-input type="tel" v-model="dataForm.phone" placeholder="手机号" clearable></el-input>
+      </el-form-item>
+      <el-form-item label="平台订单号：" prop="orderId">
+        <el-input v-model="dataForm.orderId" placeholder="平台订单号" clearable></el-input>
+      </el-form-item>
+      <el-form-item label="快递单号：" prop="expressId">
+        <el-input v-model="dataForm.expressId" placeholder="快递单号" clearable></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getDataList()">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      :data="dataList"
+      border
+      v-loading="dataListLoading"
+      style="width: 100%">
+      <el-table-column
+        prop="id"
+        header-align="center"
+        align="center"
+        width="80"
+        label="包裹编号">
+      </el-table-column>
+      <el-table-column
+        prop="id"
+        header-align="center"
+        align="center"
+        width="80"
+        label="订单编号">
+      </el-table-column>
+      <el-table-column
+        prop="username"
+        header-align="center"
+        align="center"
+        label="收货人姓名">
+      </el-table-column>
+      <el-table-column
+        prop="operation"
+        header-align="center"
+        align="center"
+        label="收货人手机">
+      </el-table-column>
+      <el-table-column
+        prop="method"
+        header-align="center"
+        align="center"
+        width="150"
+        :show-overflow-tooltip="true"
+        label="商品费用">
+      </el-table-column>
+      <el-table-column
+        prop="params"
+        header-align="center"
+        align="center"
+        width="150"
+        :show-overflow-tooltip="true"
+        label="运输费用">
+      </el-table-column>
+      <el-table-column
+        prop="time"
+        header-align="center"
+        align="center"
+        label="创建时间">
+      </el-table-column>
+      <el-table-column
+        prop="ip"
+        header-align="center"
+        align="center"
+        width="150"
+        label="快递单号">
+      </el-table-column>
+      <el-table-column
+        prop="createDate"
+        header-align="center"
+        align="center"
+        width="180"
+        label="快递公司">
+      </el-table-column>
+      <el-table-column
+        prop="createDate"
+        header-align="center"
+        align="center"
+        width="180"
+        label="包裹状态">
+      </el-table-column>
+      <el-table-column
+        fixed="right"
+        label="操作"
+        width="100">
+        <template slot-scope="scope">
+          <el-button @click="handleClick(scope.row)" type="text" size="small">查看包裹</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper">
+    </el-pagination>
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'order-check-package'
+  name: 'order-check-package',
+  data () {
+    return {
+      dataForm: {
+        time: '',
+        status: 0,
+        phone: '',
+        region: '',
+        orderId: '',
+        expressId: ''
+      },
+      pickerOptions: {
+        disabledDate (time) {
+          return time.getTime() > Date.now()
+        }
+      },
+      optionOfPackageStatus: [
+        {
+          label: '全部',
+          value: 0
+        },
+        {
+          label: '未发货',
+          value: 1
+        },
+        {
+          label: '已发货',
+          value: 2
+        },
+        {
+          label: '已取消',
+          value: 3
+        },
+        {
+          label: '待支付',
+          value: 4
+        }
+      ],
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      selectionDataList: []
+    }
+  },
+  created () {
+    // this.getDataList()
+  },
+  methods: {
+    // 设置data-picker默认值
+    computedDatePickerDefaultValue () {
+      // 当前时间
+      const nowTime = new Date()
+      const year = nowTime.getFullYear()
+      const month = nowTime.getMonth() + 1
+      const day = nowTime.getDate()
+      let preYear = year
+      let preMonth = month - 1
+      if (preMonth === 0) {
+        preYear = preYear - 1
+        preMonth = 12
+      }
+      let preDays = new Date(preYear, preMonth, 1)
+      return [`${preYear}-${preMonth}-${preDays.getDate()} 00:00:00`, `${year}-${month}-${day} 00:00:00`]
+    },
+    handleClick () {},
+    // 获取数据列表
+    getDataList () {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/sys/log/list'),
+        method: 'get',
+        params: this.$http.adornParams({
+          'page': this.pageIndex,
+          'limit': this.pageSize,
+          'key': this.dataForm.key
+        })
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.page.list
+          this.totalPage = data.page.totalCount
+        } else {
+          this.dataList = []
+          this.totalPage = 0
+        }
+        this.dataListLoading = false
+      })
+    },
+    // 每页数
+    sizeChangeHandle (val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getDataList()
+    },
+    // 当前页
+    currentChangeHandle (val) {
+      this.pageIndex = val
+      this.getDataList()
+    }
+  }
 }
 </script>
-
-<style lang="scss" scoped>
-
-</style>