新增订单页面
This commit is contained in:
yulixing
parent
0610576ad6
commit
5a1bdc9c5d
19
src/api/order.js
Normal file
19
src/api/order.js
Normal file
@ -0,0 +1,19 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getOrders(params) {
|
||||
return request({
|
||||
url: '/games/order',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function updateOrder(data) {
|
||||
return request({
|
||||
url: '/games/order',
|
||||
method: 'patch',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -167,6 +167,12 @@ const gamesRouter = {
|
||||
name: 'GameDetailsGift',
|
||||
meta: {title: '兑换'},
|
||||
},
|
||||
{
|
||||
path: 'order',
|
||||
component: () => import('@/views/games/details/order'),
|
||||
name: 'GameDetailsOrder',
|
||||
meta: {title: '订单'},
|
||||
},
|
||||
{
|
||||
path: 'mp/edit',
|
||||
component: () => import('@/views/games/details/mp/edit'),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/* 面板 */
|
||||
#app {
|
||||
min-width: 1440px;
|
||||
min-width: 1800px;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
|
||||
@ -60,6 +60,10 @@
|
||||
v-if="uid !== 'new'"
|
||||
:index="`/games/details/${uid}/gift`"
|
||||
>兑换</el-menu-item>
|
||||
<el-menu-item
|
||||
v-if="uid !== 'new'"
|
||||
:index="`/games/details/${uid}/order`"
|
||||
>订单</el-menu-item>
|
||||
</el-menu>
|
||||
<router-view />
|
||||
</div>
|
||||
|
||||
524
src/views/games/details/order.vue
Normal file
524
src/views/games/details/order.vue
Normal file
@ -0,0 +1,524 @@
|
||||
<template>
|
||||
<div class="main-content">
|
||||
<!-- filter -->
|
||||
<el-form
|
||||
ref="filterForm"
|
||||
:inline="true"
|
||||
:model="filterForm"
|
||||
class="filter"
|
||||
>
|
||||
<el-form-item
|
||||
label="平台"
|
||||
prop="platform_id"
|
||||
>
|
||||
<el-select
|
||||
v-model="filterForm.platform_id"
|
||||
placeholder="请选择平台"
|
||||
style="width: 160px;"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in platformsArr"
|
||||
:key="item.platform.platform_id"
|
||||
:label="item.platform.name"
|
||||
:value="item.platform.platform_id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="订单ID"
|
||||
prop="orderid"
|
||||
>
|
||||
<el-input
|
||||
v-model="filterForm.orderid"
|
||||
style="width: 160px;"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="账号ID"
|
||||
prop="accountid"
|
||||
>
|
||||
<el-input
|
||||
v-model="filterForm.accountid"
|
||||
style="width: 160px;"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="道具ID"
|
||||
prop="itemid"
|
||||
>
|
||||
<el-input
|
||||
v-model="filterForm.itemid"
|
||||
style="width: 160px;"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="平台订单ID"
|
||||
prop="sp_orderid"
|
||||
>
|
||||
<el-input
|
||||
v-model="filterForm.sp_orderid"
|
||||
style="width: 160px;"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="search"
|
||||
>查询</el-button>
|
||||
<el-button @click="reset('filterForm')">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- toolbar -->
|
||||
<div class="toolbar clearfix">
|
||||
<div class="l fl">
|
||||
|
||||
</div>
|
||||
<div class="r fr">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="refreshData"
|
||||
>刷新</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
v-loading="isLoaded"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
class="table mgt-20 mgb-20"
|
||||
@row-click="rowClick"
|
||||
>
|
||||
<el-table-column
|
||||
prop="idx"
|
||||
label="序号"
|
||||
show-overflow-tooltip
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="gameid"
|
||||
label="游戏ID"
|
||||
show-overflow-tooltip
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="orderid"
|
||||
label="订单ID"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
prop="accountid"
|
||||
label="账号ID"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
prop="itemid"
|
||||
label="道具ID"
|
||||
show-overflow-tooltip
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="price"
|
||||
label="价格"
|
||||
show-overflow-tooltip
|
||||
width="100"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="状态"
|
||||
show-overflow-tooltip
|
||||
:formatter="formStatus"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="createtime"
|
||||
label="创建时间"
|
||||
show-overflow-tooltip
|
||||
:formatter="formCreateTime"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="sp_confirm_time"
|
||||
label="平台确认时间"
|
||||
show-overflow-tooltip
|
||||
:formatter="formSpConfirmTime"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="sp_orderid"
|
||||
label="平台订单号"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
prop="sp_pay_result"
|
||||
label="平台支付结果"
|
||||
show-overflow-tooltip
|
||||
:formatter="formSpPayResult"
|
||||
/>
|
||||
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="操作"
|
||||
fixed="right"
|
||||
width="126"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="permView"
|
||||
type="text"
|
||||
size="small"
|
||||
@click.stop="viewData(scope.row)"
|
||||
>详情</el-button>
|
||||
<el-button
|
||||
v-if="permView && scope.row.status === 1"
|
||||
type="text"
|
||||
size="small"
|
||||
@click.stop="updateOrder(scope.row)"
|
||||
>补单</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- pagination -->
|
||||
<el-pagination
|
||||
class="al-r"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:hide-on-single-page="true"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
@size-change="sizeChange"
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
|
||||
<!-- modal -->
|
||||
<!-- Modal1 -->
|
||||
<el-dialog
|
||||
title="订单详情"
|
||||
:visible.sync="modalVisible"
|
||||
:before-close="closeModal"
|
||||
width="700px"
|
||||
top="5vh"
|
||||
>
|
||||
|
||||
<ul class="order-list">
|
||||
<li class="order-item">
|
||||
<span class="order-label">序号</span>
|
||||
<span class="order-value">{{modalData.idx}}</span>
|
||||
</li>
|
||||
<li class="order-item">
|
||||
<span class="order-label">支付小程序AppID</span>
|
||||
<span class="order-value">{{modalData.minigame_appid}}</span>
|
||||
</li>
|
||||
<li class="order-item">
|
||||
<span class="order-label">支付小程序账号ID</span>
|
||||
<span class="order-value">{{modalData.minigame_accountid}}</span>
|
||||
</li>
|
||||
<li class="order-item">
|
||||
<span class="order-label">订单ID</span>
|
||||
<span class="order-value">{{modalData.orderid}}</span>
|
||||
</li>
|
||||
<li class="order-item">
|
||||
<span class="order-label">账号ID</span>
|
||||
<span class="order-value">{{modalData.accountid}}</span>
|
||||
</li>
|
||||
<li class="order-item">
|
||||
<span class="order-label">游戏ID</span>
|
||||
<span class="order-value">{{modalData.gameid}}</span>
|
||||
</li>
|
||||
<li class="order-item">
|
||||
<span class="order-label">平台ID</span>
|
||||
<span class="order-value">{{modalData.channel}}</span>
|
||||
</li>
|
||||
<li class="order-item">
|
||||
<span class="order-label">平台openID</span>
|
||||
<span class="order-value">{{modalData.openid}}</span>
|
||||
</li>
|
||||
<li class="order-item">
|
||||
<span class="order-label">道具ID</span>
|
||||
<span class="order-value">{{modalData.itemid}}</span>
|
||||
</li>
|
||||
<li class="order-item">
|
||||
<span class="order-label">价格</span>
|
||||
<span class="order-value">{{modalData.price}}</span>
|
||||
</li>
|
||||
<li class="order-item">
|
||||
<span class="order-label">IPV4</span>
|
||||
<span class="order-value">{{modalData.ipv4}}</span>
|
||||
</li>
|
||||
<li class="order-item">
|
||||
<span class="order-label">订单状态</span>
|
||||
<span class="order-value">{{modalData.status}}</span>
|
||||
</li>
|
||||
<li class="order-item">
|
||||
<span class="order-label">确认时间</span>
|
||||
<span class="order-value">{{modalData.confirmtime}}</span>
|
||||
</li>
|
||||
<li class="order-item">
|
||||
<span class="order-label">创建时间</span>
|
||||
<span class="order-value">{{modalData.createtime}}</span>
|
||||
</li>
|
||||
<li class="order-item">
|
||||
<span class="order-label">平台订单ID</span>
|
||||
<span class="order-value">{{modalData.sp_orderid}}</span>
|
||||
</li>
|
||||
<li class="order-item">
|
||||
<span class="order-label">平台金额</span>
|
||||
<span class="order-value">{{modalData.sp_amount}}</span>
|
||||
</li>
|
||||
<li class="order-item">
|
||||
<span class="order-label">平台确认时间</span>
|
||||
<span class="order-value">{{modalData.sp_confirm_time}}</span>
|
||||
</li>
|
||||
<li class="order-item">
|
||||
<span class="order-label">平台支付结果</span>
|
||||
<span class="order-value">{{modalData.sp_pay_result}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div slot="footer">
|
||||
<el-button @click="closeModal">关 闭</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getOrders, updateOrder} from '@/api/order'
|
||||
import {getGame} from '@/api/games'
|
||||
import {mapGetters} from 'vuex'
|
||||
import getPageTitle from '@/utils/get-page-title'
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
name: 'GameDetailsOrder',
|
||||
data() {
|
||||
return {
|
||||
// common
|
||||
uid: '',
|
||||
permView: false,
|
||||
permEdit: false,
|
||||
permPublish: false,
|
||||
gameInfo: {},
|
||||
platformsArr: [],
|
||||
// filter
|
||||
filterForm: {
|
||||
platform_id: '',
|
||||
orderid: '',
|
||||
accountid: '',
|
||||
itemid: '',
|
||||
sp_orderid: '',
|
||||
},
|
||||
// table
|
||||
tableData: [],
|
||||
isLoaded: false,
|
||||
// pagination
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
// modal
|
||||
modalVisible: false,
|
||||
modalData: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userInfo']),
|
||||
},
|
||||
mounted() {
|
||||
this.uid = this.$route.params.uid
|
||||
if (!this.uid || this.uid === 'new') {
|
||||
this.$router.push('/games/details/new/info')
|
||||
} else {
|
||||
this.getGameInfo(this.getData)
|
||||
}
|
||||
this.permEdit =
|
||||
this.userInfo.permissions.includes(`${this.uid}-edit`) ||
|
||||
this.userInfo.permissions.includes(`${this.uid}-publish`) ||
|
||||
this.userInfo.permissions.includes(`games-writeable`)
|
||||
this.permView =
|
||||
this.userInfo.permissions.includes(`${this.uid}-readable`) ||
|
||||
this.userInfo.permissions.includes(`${this.uid}-edit`) ||
|
||||
this.userInfo.permissions.includes(`${this.uid}-publish`) ||
|
||||
this.userInfo.permissions.includes(`games-writeable`)
|
||||
this.permPublish =
|
||||
this.userInfo.permissions.includes(`${this.uid}-publish`) ||
|
||||
this.userInfo.permissions.includes(`games-writeable`)
|
||||
},
|
||||
methods: {
|
||||
// common
|
||||
getGameInfo(cb) {
|
||||
getGame({uid: this.uid})
|
||||
.then(res => {
|
||||
const {data} = res
|
||||
if (data.errcode === 0) {
|
||||
this.gameInfo = data.gameInfo
|
||||
this.platformsArr = data.gameInfo.platforms
|
||||
this.$route.meta.title = this.gameInfo.game_name
|
||||
document.title = getPageTitle(this.gameInfo.game_name)
|
||||
this.filterForm.platform_id = this.platformsArr[0]
|
||||
? this.platformsArr[0].platform.platform_id
|
||||
: ''
|
||||
if (cb && cb instanceof Function) cb()
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
// filter
|
||||
|
||||
search() {
|
||||
this.currentPage = 1
|
||||
this.getData()
|
||||
},
|
||||
reset(formName) {
|
||||
this.$refs[formName].resetFields()
|
||||
},
|
||||
// toolbar
|
||||
refreshData() {
|
||||
this.currentPage = 1
|
||||
this.getData()
|
||||
},
|
||||
|
||||
// table
|
||||
getData() {
|
||||
this.isLoaded = true
|
||||
getOrders({
|
||||
uid: this.uid,
|
||||
game_id: this.gameInfo.game_id,
|
||||
platform_id: this.filterForm.platform_id,
|
||||
pageSize: this.pageSize,
|
||||
currentPage: this.currentPage,
|
||||
orderid: this.filterForm.orderid,
|
||||
accountid: this.filterForm.accountid,
|
||||
itemid: this.filterForm.itemid,
|
||||
sp_orderid: this.filterForm.sp_orderid,
|
||||
})
|
||||
.then(res => {
|
||||
const data = res.data
|
||||
if (data.errcode === 0) {
|
||||
this.tableData = data.result
|
||||
this.total = data.total
|
||||
this.isLoaded = false
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
formStatus(row, column, cellValue, index) {
|
||||
return cellValue === 0 ? '新添加订单' : '已完成订单'
|
||||
},
|
||||
formCreateTime(row, column, cellValue, index) {
|
||||
return moment(cellValue * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
formSpConfirmTime(row, column, cellValue, index) {
|
||||
return moment(cellValue * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
formSpPayResult(row, column, cellValue, index) {
|
||||
let text = ''
|
||||
switch (cellValue) {
|
||||
case 0:
|
||||
text = '未确认'
|
||||
break
|
||||
case 1:
|
||||
text = '支付成功'
|
||||
break
|
||||
case -1:
|
||||
text = '支付失败'
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
return text
|
||||
},
|
||||
rowClick(row, column, event) {
|
||||
this.viewData(row)
|
||||
},
|
||||
viewData(row) {
|
||||
this.modalData = JSON.parse(JSON.stringify(row))
|
||||
// 数据格式化
|
||||
this.modalData.status =
|
||||
this.modalData.status === 0 ? '新添加订单' : '已完成订单'
|
||||
if (this.modalData.sp_pay_result === 0) {
|
||||
this.modalData.sp_pay_result = '未确认'
|
||||
} else if (this.modalData.sp_pay_result === 1) {
|
||||
this.modalData.sp_pay_result = '支付成功'
|
||||
} else if (this.modalData.sp_pay_result === -1) {
|
||||
this.modalData.sp_pay_result = '支付失败'
|
||||
}
|
||||
this.modalData.sp_confirm_time = moment(
|
||||
this.modalData.sp_confirm_time * 1000
|
||||
).format('YYYY-MM-DD HH:mm:ss')
|
||||
this.modalData.createtime = moment(
|
||||
this.modalData.createtime * 1000
|
||||
).format('YYYY-MM-DD HH:mm:ss')
|
||||
this.modalData.confirmtime = moment(
|
||||
this.modalData.confirmtime * 1000
|
||||
).format('YYYY-MM-DD HH:mm:ss')
|
||||
|
||||
this.openModal()
|
||||
},
|
||||
updateOrder(row) {
|
||||
this.$confirm('是否确认进行补单操作?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
updateOrder({
|
||||
uid: this.uid,
|
||||
game_id: row.gameid,
|
||||
platform_id: row.channel,
|
||||
idx: row.idx,
|
||||
status: 0,
|
||||
})
|
||||
.then(res => {
|
||||
const data = res.data
|
||||
if (data.errcode === 0) {
|
||||
this.$message.success('操作成功！')
|
||||
this.refreshData()
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.info('已取消操作！')
|
||||
})
|
||||
},
|
||||
// pagination
|
||||
sizeChange(val) {
|
||||
this.pageSize = val
|
||||
this.getData()
|
||||
},
|
||||
pageChange(val) {
|
||||
this.currentPage = val
|
||||
this.getData()
|
||||
},
|
||||
// modal
|
||||
openModal() {
|
||||
this.modalVisible = true
|
||||
},
|
||||
closeModal() {
|
||||
this.modalVisible = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order-list {
|
||||
.order-item {
|
||||
line-height: 32px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
.order-label,
|
||||
.order-value {
|
||||
display: inline-block;
|
||||
}
|
||||
.order-label {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
>
|
||||
<el-select
|
||||
v-model="filterForm.platform_id"
|
||||
placeholder="请选择分享类型"
|
||||
placeholder="请选择平台"
|
||||
>
|
||||
<el-option
|
||||
label="所有"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user