wangmingchuan
/
yanzong_vue_store
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

细节

Browse Source
master
fanfan 8 months ago
parent 16e6a0238e
commit 03320e0b99
2 changed files with 154 additions and 171 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      src/api/user/order.js
  2. 315
      src/views/user/order/Index.vue

2
src/api/user/order.js
Unescape View File

@ -2,7 +2,7 @@ import { axios } from '@/utils/request'
// api接口列表 // api接口列表
const api = { const api = {
order: '/user.order/order' order: '/user.identity/identityOrderList'
} }
// 列表记录 // 列表记录

315
src/views/user/order/Index.vue
Unescape View File

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