253 lines
7.7 KiB
Vue
253 lines
7.7 KiB
Vue
<template>
|
|
<ai-list isTabs class="GoodsList">
|
|
<template slot="content">
|
|
<ai-search-bar>
|
|
<template slot="left">
|
|
<ai-select
|
|
v-model="search.goodsType"
|
|
@change="(search.current = 1), getList()"
|
|
placeholder="请选择商品类型"
|
|
:selectList="dict.getDict('integralSGType')">
|
|
</ai-select>
|
|
<ai-select
|
|
v-model="search.status"
|
|
@change="(search.current = 1), getList()"
|
|
placeholder="请选择订单状态"
|
|
:selectList="dict.getDict('integralSGOStatus')">
|
|
</ai-select>
|
|
<el-date-picker
|
|
v-model="search.startTime"
|
|
type="date"
|
|
size="small"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="选择订单开始日期"
|
|
@change="search.current = 1, getList()">
|
|
</el-date-picker>
|
|
<el-date-picker
|
|
v-model="search.endTime"
|
|
type="date"
|
|
size="small"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="选择订单结束日期"
|
|
@change="search.current = 1, getList()">
|
|
</el-date-picker>
|
|
<ai-download
|
|
v-if="permissions('app_appintegralsupermarketorder_export')"
|
|
:instance="instance"
|
|
url="/app/appintegralsupermarketorder/export"
|
|
:params="search"
|
|
fileName="订单列表"
|
|
:disabled="tableData.length == 0">
|
|
</ai-download>
|
|
</template>
|
|
<template slot="right">
|
|
<el-input
|
|
v-model="search.goodsTitle"
|
|
class="search-input"
|
|
size="small"
|
|
v-throttle="() => {search.current = 1, getList()}"
|
|
placeholder="请输入商品名称、兑换人"
|
|
clearable
|
|
@clear="search.current = 1, search.goodsTitle = '', getList()"
|
|
suffix-icon="iconfont iconSearch">
|
|
</el-input>
|
|
</template>
|
|
</ai-search-bar>
|
|
<ai-table
|
|
style="margin-top: 8px;"
|
|
:tableData="tableData"
|
|
:col-configs="colConfigs"
|
|
:total="total"
|
|
:current.sync="search.current"
|
|
:size.sync="search.size"
|
|
@getList="getList">
|
|
<el-table-column
|
|
label="商品"
|
|
slot="goods"
|
|
align="left"
|
|
width="350">
|
|
<template v-slot="{ row }">
|
|
<div class="goods">
|
|
<div class="img-content">
|
|
<img :src="row.goodsPicUrl" alt="" v-viewer>
|
|
|
|
<!-- <span class="type type0" v-if="row.goodsType === '0'">积分兑换</span>
|
|
<span class="type type1" v-else>京东低价商品</span> -->
|
|
<span class="type" :class="`type${row.typeText}`">{{dict.getLabel('integralSGTypeText', row.typeText)}}</span>
|
|
</div>
|
|
<p>{{ row.goodsTitle }}</p>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" slot="options" align="center" width="210" fixed="right">
|
|
<template v-slot="{ row }">
|
|
<div class="table-options">
|
|
<el-button type="text" title="取消订单" v-if="row.status === '0' || row.status === '1'" @click="cancel(row.id)">取消订单</el-button>
|
|
<el-button type="text" title="订单核销" v-if="row.status === '0'" @click="id = row.id, isShow = true">订单核销</el-button>
|
|
<el-button type="text" title="详情" @click="toDetail(row.id)">详情</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</ai-table>
|
|
<ai-dialog
|
|
title="订单核销"
|
|
:visible.sync="isShow"
|
|
:destroyOnClose="true"
|
|
width="650px"
|
|
@onConfirm="onConfirm"
|
|
@close="form.verificationCode = '', id = ''">
|
|
<el-form style="height: 200px" class="ai-form" ref="form" :model="form" label-width="120px">
|
|
<el-form-item label="核销码" style="width: 100%" prop="verificationCode" :rules="[{required: true, message: '请输入核销码', trigger: 'blur'}]">
|
|
<el-input v-model="form.verificationCode" placeholder="请输入核销码" size="small"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</ai-dialog>
|
|
</template>
|
|
</ai-list>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'GirdList',
|
|
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
permissions: Function
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
search: {
|
|
goodsType: '',
|
|
goodsTitle: '',
|
|
current: 1,
|
|
status: '',
|
|
size: 10,
|
|
startTime: '',
|
|
endTime: '',
|
|
type: 0
|
|
},
|
|
isShow: false,
|
|
form: {
|
|
verificationCode: ''
|
|
},
|
|
id: '',
|
|
total: 0,
|
|
tableData: [],
|
|
colConfigs: [
|
|
{ prop: 'goodsSerialNumber', label: '商品ID', align: 'left' },
|
|
{ slot: 'goods', align: 'center' },
|
|
{ prop: 'goodsType', label: '商品类型', align: 'center', format: v => this.dict.getLabel('integralSGType', v) },
|
|
{ prop: 'quantity', label: '数量', align: 'center', format: v => `${v}` },
|
|
{ prop: 'usedIntegral', label: '消耗积分', align: 'center' },
|
|
{ prop: 'payMoney', label: '兑换后再付', align: 'center' },
|
|
{ prop: 'integralUserName', label: '兑换人', align: 'center' },
|
|
{ prop: 'createTime', width: 150, label: '创建时间', align: 'center' },
|
|
{ prop: 'status', label: '状态', align: 'center', format: v => this.dict.getLabel('integralSGOStatus', v) }
|
|
]
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
},
|
|
|
|
created () {
|
|
this.dict.load('integralSGType', 'integralSGOStatus', 'integralSGTypeText').then(() => {
|
|
this.getList()
|
|
})
|
|
},
|
|
|
|
methods: {
|
|
getList () {
|
|
this.instance.post(`/app/appintegralsupermarketorder/list`, null, {
|
|
params: {
|
|
...this.search
|
|
}
|
|
}).then((res) => {
|
|
if (res.code == 0) {
|
|
res.data.records.map((item) => {
|
|
item.typeText = item.goodsType == 0 ? 0 : 1
|
|
})
|
|
this.tableData = res.data.records
|
|
this.total = res.data.total
|
|
}
|
|
})
|
|
},
|
|
|
|
onConfirm () {
|
|
this.$refs.form.validate((valid)=> {
|
|
if(valid) {
|
|
this.instance.post(`/app/appintegralsupermarketorder/examine`, null, {
|
|
params: {
|
|
...this.form,
|
|
id: this.id
|
|
}
|
|
}).then(res => {
|
|
if(res.code == 0) {
|
|
this.isShow = false
|
|
this.getList()
|
|
this.$message.success('核销成功')
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
toDetail (id) {
|
|
this.$emit('change', {
|
|
type: 'GirdDetail',
|
|
params: {
|
|
id
|
|
}
|
|
})
|
|
},
|
|
|
|
cancel (id) {
|
|
this.$confirm('确定取消该订单吗？').then(() => {
|
|
this.instance.post(`/app/appintegralsupermarketorder/cancel?id=${id}`).then(res => {
|
|
if (res.code == 0) {
|
|
this.$message.success('取消成功！')
|
|
this.getList()
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.GoodsList {
|
|
.goods {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.img-content {
|
|
position: relative;
|
|
margin-right: 8px;
|
|
img {
|
|
width: 120px;
|
|
height: 120px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.type {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
font-size: 12px;
|
|
width: 120px;
|
|
text-align: center;
|
|
color: #fff;
|
|
z-index: 999;
|
|
}
|
|
.type1 {
|
|
background-color: #E64E39;
|
|
}
|
|
.type0 {
|
|
background-color: #FF6900;
|
|
}
|
|
}
|
|
</style>
|