商城订单

src/api/setting/gmall.js

@@ -5,9 +5,17 @@ const api = {
   list: '/retail/list',
   add: '/retail/add',
   edit: '/retail/edit',
-  delete: '/retail/delete'
+  delete: '/retail/delete',
+  orderList: '/retail/getRetailOrder'
+}
+// 订单列表
+export function orderList (params) {
+  return axios({
+    url: api.orderList,
+    method: 'get',
+    params
+  })
 }
-
 // 列表记录
 export function list (params) {
   return axios({

src/components/GlobalHeader/RightContent.vue

@@ -71,7 +71,6 @@ export default {
   },
   mounted() {
     this.storeInfo = JSON.parse(window.localStorage.getItem('storeInfo'))
-    console.log(this.storeInfo.effective_time)
   },
 }
 </script>

src/config/router.config.js

@@ -1133,6 +1133,12 @@ export const asyncRouterMap = [
             meta: { title: '开通商城', keepAlive: false, permission: ['/setting/gmall/index'] },
             moduleKey: 'setting-customer',
           },
+          {
+            path: '/setting/gmall/order',
+            component: () => import(/* webpackChunkName: "setting" */ '@/views/setting/gmall/order'),
+            meta: { title: '商城订单', keepAlive: false, permission: ['/setting/gmall/order'] },
+            moduleKey: 'setting-customer',
+          },
           // {
           //   path: '/setting/storage',
           //   component: () => import(/* webpackChunkName: "setting" */ '@/views/setting/Storage'),

src/views/setting/gmall/order.vue

@@ -0,0 +1,183 @@
+<template>
+	<a-card :bordered="false">
+		<div class="card-title">{{ $route.meta.title }}</div>
+		<div class="table-operator">
+			<!-- 搜索板块 -->
+			<a-row class="row-item-search">
+				<a-form class="search-form" :form="searchForm" layout="inline" @submit="handleSearch">
+					<a-form-item label="订单号">
+						<a-input v-decorator="['search']" placeholder="请输入订单号" />
+					</a-form-item>
+					<a-form-item label="支付状态">
+						<a-select v-decorator="['pay_status', { initialValue: 0 }]">
+							<a-select-option :value="0">全部</a-select-option>
+							<a-select-option :value="10">待支付</a-select-option>
+							<a-select-option :value="20">已支付</a-select-option>
+						</a-select>
+					</a-form-item>
+					<a-form-item label="订单类型">
+						<a-select v-decorator="['order_type', { initialValue: 0 }]">
+							<a-select-option :value="0">全部</a-select-option>
+							<a-select-option :value="10">会员</a-select-option>
+							<a-select-option :value="20">分销商 </a-select-option>
+						</a-select>
+					</a-form-item>
+					<a-form-item label="支付方式">
+						<a-select v-decorator="['pay_method', { initialValue: 0 }]">
+							<a-select-option :value="0">全部</a-select-option>
+							<a-select-option :value="'wechat'">微信支付</a-select-option>
+							<a-select-option :value="'balance'">余额支付 </a-select-option>
+						</a-select>
+					</a-form-item>
+					<a-form-item label="付款时间">
+						<a-range-picker format="YYYY-MM-DD" style="width:220px" v-decorator="['pay_time']" />
+					</a-form-item>
+					<a-form-item class="search-btn">
+						<a-button type="primary" icon="search" html-type="submit">搜索</a-button>
+					</a-form-item>
+				</a-form>
+			</a-row>
+		</div>
+		<s-table ref="table" rowKey="order_id" :loading="isLoading" :columns="columns" :data="loadData" :pagination="pagination">
+				 <!-- 充值方式 -->
+			<span slot="order_type" slot-scope="text">
+				<a-tag  v-if="text==10">会员</a-tag>
+				<a-tag  v-if="text==20">分销商</a-tag>
+			</span>
+            <!-- 时效 -->
+			<span slot="month" slot-scope="text">
+				<p class="twoline-hide">{{ text }}个月</p>
+			</span>
+			<!-- 支付方式  -->
+			<span slot="pay_method" slot-scope="text">
+				 <a-tag v-if="text">{{ text=='wechat'?'微信支付':'余额支付' }}</a-tag>
+			</span>
+			<!-- 状态 -->
+			<span slot="pay_status" slot-scope="text">
+				<a-tag :color="text == 20 ? 'green' : ''">{{ text == 20 ? '已支付' : '待支付' }}</a-tag>
+			</span>
+			<span slot="pay_time" slot-scope="text">
+				<span>{{ text | formatDate }}</span>
+			</span>
+		</s-table>
+	</a-card>
+</template>
+  
+  <script>
+import * as Api from '@/api/setting/gmall'
+import { STable, UserItem } from '@/components/Table'
+import PayStatusEnum from '@/common/enum/recharge/order/PayStatus'
+import moment from 'moment'
+export default {
+  name: 'Index',
+  components: {
+    STable,
+    UserItem,
+  },
+  filters: {
+    formatDate(value) {
+      return value ? moment(value * 1000).format('YYYY-MM-DD HH:mm:ss') : '-'
+    },
+  },
+  data() {
+    return {
+      // 枚举类
+      PayStatusEnum,
+      // 当前表单元素
+      searchForm: this.$form.createForm(this),
+      // 查询参数
+      queryParam: {},
+      // 正在加载
+      isLoading: false,
+      // 表头
+      // {
+      // 		title: '会员时效',
+      // 		dataIndex: 'month'
+      // 	},
+      columns: [
+        {
+          title: 'ID',
+          dataIndex: 'order_id',
+        },
+        {
+          title: '订单号',
+          dataIndex: 'order_no',
+        },
+		{
+          title: '订单类型',
+          dataIndex: 'order_type',
+		   scopedSlots: { customRender: 'order_type' }
+        },
+          {
+          title: '订单金额',
+          dataIndex: 'order_price',
+        },
+        {
+          title: '支付金额',
+          dataIndex: 'pay_price',
+        },
+        {
+          title: '支付方式',
+          dataIndex: 'pay_method',
+          scopedSlots: { customRender: 'pay_method' },
+        },
+        {
+          title: '支付状态',
+          dataIndex: 'pay_status',
+          scopedSlots: { customRender: 'pay_status' },
+        },
+        {
+          title: '支付时间',
+          dataIndex: 'pay_time',
+          scopedSlots: { customRender: 'pay_time' },
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'create_time',
+          scopedSlots: { customRender: 'create_time' },
+        },
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: (param) => {
+        return Api.orderList({ ...param, ...this.queryParam }).then((response) => {
+          return response.data.list
+        })
+      },
+    }
+  },
+  created() {},
+  methods: {
+    /**
+     * 刷新列表
+     * @param Boolean bool 强制刷新到第一页
+     */
+    handleRefresh(bool = false) {
+      this.$refs.table.refresh(bool)
+    },
+
+    // 确认搜索
+    handleSearch(e) {
+      e.preventDefault()
+      this.searchForm.validateFields((error, values) => {
+        if (!error) {
+          this.queryParam = { ...this.queryParam, ...values }
+          this.handleRefresh(true)
+        }
+      })
+    },
+  },
+}
+</script>
+  
+  <style lang="less" scoped>
+.ant-card-body {
+  padding: 22px 29px 25px;
+}
+/deep/.ant-table-tbody td {
+  text-align: center;
+}
+/deep/.ant-table-thead th {
+  text-align: center;
+}
+</style>
+