Skip to content

Commit f734d7d

Browse files
YunaiVYunaiV
committed
增加接入示例的查询
1 parent 83573b3 commit f734d7d

File tree

2 files changed

+229
-0
lines changed

2 files changed

+229
-0
lines changed

‎src/api/pay/demo.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import request from '@/utils/request'
2+
3+
// 创建示例订单
4+
export function createDemoOrder(data) {
5+
return request({
6+
url: '/pay/demo-order/create',
7+
method: 'post',
8+
data: data
9+
})
10+
}
11+
12+
// 获得示例订单
13+
export function getDemoOrder(id) {
14+
return request({
15+
url: '/pay/demo-order/get?id=' + id,
16+
method: 'get'
17+
})
18+
}
19+
20+
// 获得示例订单分页
21+
export function getDemoOrderPage(query) {
22+
return request({
23+
url: '/pay/demo-order/page',
24+
method: 'get',
25+
params: query
26+
})
27+
}

‎src/views/pay/demo/index.vue

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
<template>
2+
<div class="app-container">
3+
<!-- 操作工具栏 -->
4+
<el-row :gutter="10" class="mb8">
5+
<el-col :span="1.5">
6+
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">发起订单</el-button>
7+
</el-col>
8+
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
9+
</el-row>
10+
11+
<!-- 列表 -->
12+
<el-table v-loading="loading" :data="list">
13+
<el-table-column label="订单编号" align="center" prop="id" />
14+
<el-table-column label="用户编号" align="center" prop="userId" />
15+
<el-table-column label="商品名字" align="center" prop="spuName" />
16+
<el-table-column label="支付价格" align="center" prop="price">
17+
<template v-slot="scope">
18+
<span>￥{{ (scope.row.price / 100.0).toFixed(2) }}</span>
19+
</template>
20+
</el-table-column>
21+
<el-table-column label="退款金额" align="center" prop="refundPrice">
22+
<template v-slot="scope">
23+
<span>￥{{ (scope.row.refundPrice / 100.0).toFixed(2) }}</span>
24+
</template>
25+
</el-table-column>
26+
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
27+
<template v-slot="scope">
28+
<span>{{ parseTime(scope.row.createTime) }}</span>
29+
</template>
30+
</el-table-column>
31+
<el-table-column label="支付单号" align="center" prop="payOrderId" />
32+
<el-table-column label="是否支付" align="center" prop="payed">
33+
<template v-slot="scope">
34+
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.payed" />
35+
</template>
36+
</el-table-column>
37+
<el-table-column label="支付时间" align="center" prop="payTime" width="180">
38+
<template v-slot="scope">
39+
<span>{{ parseTime(scope.row.payTime) }}</span>
40+
</template>
41+
</el-table-column>
42+
<el-table-column label="退款时间" align="center" prop="refundTime" width="180">
43+
<template v-slot="scope">
44+
<span>{{ parseTime(scope.row.refundTime) }}</span>
45+
</template>
46+
</el-table-column>
47+
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
48+
<template v-slot="scope">
49+
<el-button size="mini" type="text" icon="el-icon-edit" @click="handlePay(scope.row)"
50+
v-if="!scope.row.payed">支付</el-button>
51+
</template>
52+
</el-table-column>
53+
</el-table>
54+
<!-- 分页组件 -->
55+
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
56+
@pagination="getList"/>
57+
58+
<!-- 对话框(添加 / 修改) -->
59+
<el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
60+
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
61+
<el-form-item label="商品" prop="spuId">
62+
<el-select v-model="form.spuId" placeholder="请输入下单商品" clearable size="small" style="width: 380px" >
63+
<el-option v-for="item in spus" :key="item.id" :label="item.name" :value="item.id">
64+
<span style="float: left">{{ item.name}}</span>
65+
<span style="float: right; color: #8492a6; font-size: 13px">￥{{ (item.price / 100.0).toFixed(2) }}</span>
66+
</el-option>
67+
</el-select>
68+
</el-form-item>
69+
</el-form>
70+
<div slot="footer" class="dialog-footer">
71+
<el-button type="primary" @click="submitForm">确 定</el-button>
72+
<el-button @click="cancel">取 消</el-button>
73+
</div>
74+
</el-dialog>
75+
</div>
76+
</template>
77+
78+
<script>
79+
import { createDemoOrder, getDemoOrderPage } from "@/api/pay/demo";
80+
81+
export default {
82+
name: "PayDemoOrder",
83+
components: {
84+
},
85+
data() {
86+
return {
87+
// 遮罩层
88+
loading: true,
89+
// 显示搜索条件
90+
showSearch: true,
91+
// 总条数
92+
total: 0,
93+
// 示例订单列表
94+
list: [],
95+
// 弹出层标题
96+
title: "",
97+
// 是否显示弹出层
98+
open: false,
99+
// 查询参数
100+
queryParams: {
101+
pageNo: 1,
102+
pageSize: 10,
103+
},
104+
// 表单参数
105+
form: {},
106+
// 表单校验
107+
rules: {
108+
spuId: [{ required: true, message: "商品编号不能为空", trigger: "blur" }],
109+
},
110+
// 商品数组
111+
spus: [{
112+
id: 1,
113+
name: '华为手机',
114+
price: 1,
115+
}, {
116+
id: 2,
117+
name: '小米电视',
118+
price: 10,
119+
}, {
120+
id: 3,
121+
name: '苹果手表',
122+
price: 100,
123+
}, {
124+
id: 4,
125+
name: '华硕笔记本',
126+
price: 200,
127+
}, {
128+
id: 5,
129+
name: '蔚来汽车',
130+
price: 300,
131+
}]
132+
};
133+
},
134+
created() {
135+
this.getList();
136+
},
137+
methods: {
138+
/** 查询列表 */
139+
getList() {
140+
this.loading = true;
141+
// 执行查询
142+
getDemoOrderPage(this.queryParams).then(response => {
143+
this.list = response.data.list;
144+
this.total = response.data.total;
145+
this.loading = false;
146+
});
147+
},
148+
/** 取消按钮 */
149+
cancel() {
150+
this.open = false;
151+
this.reset();
152+
},
153+
/** 表单重置 */
154+
reset() {
155+
this.form = {
156+
spuId: undefined,
157+
};
158+
this.resetForm("form");
159+
},
160+
/** 搜索按钮操作 */
161+
handleQuery() {
162+
this.queryParams.pageNo = 1;
163+
this.getList();
164+
},
165+
/** 重置按钮操作 */
166+
resetQuery() {
167+
this.resetForm("queryForm");
168+
this.handleQuery();
169+
},
170+
/** 新增按钮操作 */
171+
handleAdd() {
172+
this.reset();
173+
this.open = true;
174+
this.title = "发起订单";
175+
},
176+
/** 提交按钮 */
177+
submitForm() {
178+
this.$refs["form"].validate(valid => {
179+
if (!valid) {
180+
return;
181+
}
182+
// 添加的提交
183+
createDemoOrder(this.form).then(response => {
184+
this.$modal.msgSuccess("新增成功");
185+
this.open = false;
186+
this.getList();
187+
});
188+
});
189+
},
190+
/** 删除按钮操作 */
191+
handleDelete(row) {
192+
const id = row.id;
193+
this.$modal.confirm('是否确认删除示例订单编号为"' + id + '"的数据项?').then(function() {
194+
return deleteDemoOrder(id);
195+
}).then(() => {
196+
this.getList();
197+
this.$modal.msgSuccess("删除成功");
198+
}).catch(() => {});
199+
}
200+
}
201+
};
202+
</script>

0 commit comments

Comments
 (0)