xmf_saas_web/src/views/Shop/OrderManage/index.vue

<template>
	<div>
		<div class="cardTitle">订单列表</div>
		<div class="search-box">
			<a-row>
				<a-col :span="20">
				<a-space size="large">
					<a-input style="width: 200px" v-model="searchForm.code" placeholder="请输入订单号" />
					<a-input style="width: 200px" v-model="searchForm.jcookCode" placeholder="请输入jcook订单号" />
					<a-select style="width: 200px" v-model="searchForm.tradeStatus" placeholder="请选择交易状态" ></a-select>
					<a-button type="primary" @click='getData'>查 询</a-button>
					<a-button>重 置</a-button>
				</a-space>
				</a-col>
				<a-col :span="4">
				<!-- <a-button class="add-btn" @click="">添加</a-button> -->
				</a-col>
			</a-row>
		</div>
		<a-table :columns="columns" :data-source="tableData" :rowKey="record=>record.id" tableLayout='auto' :pagination="pagination">
			<div slot="expandedRowRender" slot-scope="record" style="margin: 0">
				<a-descriptions title="订单信息">
					<!-- 商品图片 -->
					<!-- <template>
						<img :src="ImgUrl(record)" class='order-pic' alt="">
					</template> -->
					<a-descriptions-item label="订单状态">
						{{record.tradeStatus | tradeStatus}}
					</a-descriptions-item>
					<a-descriptions-item label="支付人">
						{{record.payName + record.payTel}}
					</a-descriptions-item>
					<a-descriptions-item label="付款金额">
						{{record.payPrice}}
					</a-descriptions-item>
					<a-descriptions-item label="运费">
						{{record.freightFee}}
					</a-descriptions-item>
					<a-descriptions-item label="收货人">
						{{record.receiverName + record.receiverTel}}
					</a-descriptions-item>
					<a-descriptions-item label="地址">
						{{record.locationName + record.addressDetail}}
					</a-descriptions-item>
					<a-descriptions-item label="备注">
						{{record.remake||'无'}}
					</a-descriptions-item>
					<a-descriptions-item label="创建人">
						{{record.createName}}
					</a-descriptions-item>
					<a-descriptions-item label="创建时间">
						{{record.createDate}}
					</a-descriptions-item>
				</a-descriptions>
			</div>
			<span slot="action" slot-scope="text, record">
				<a-space>
					<a @click='detail(record)'>查看详情</a>
					<a @click='cancelOrder(record)'>取消订单</a>
				</a-space>
			</span>
		</a-table>
	</div>
</template>
<script>
import { orderList, shopOrderCancel, orderInfo } from  '@/api/shop/order'
import { columns,pagination,searchForm } from './depend/config'
export default {
	data() {
		return {
			tableData:[],
			columns,
			pagination,
			searchForm
		};
	},
	filters: {
		tradeStatus: function (value) {
			switch (value) {
			// 交易状态(0.交易创建并等待买家付款,1.未付款交易超时关闭或支付完成后全额退款,
			// 2.交易支付成功（待发货）,3.交易结束并不可退款，4.出库（待收货）,5.订单完成,
			// 6.申请取消,7.申请拒收，8.取消订单失败9.取消订单成功10.发生拆单,11.售后换新)
			case 0:
				return '交易创建并等待买家付款'
			case 1:
				return '交易关闭'
			case 2:
				return '待发货'
			case 3:
				return '交易结束'
			case 4:
				return '待收货'
			case 5:
				return '订单完成'
			case 6:
				return '申请取消'
			case 7:
				return '申请拒收'
			case 8:
				return '取消订单失败'
			case 9:
				return '取消订单成功'
			case 10:
				return '发生拆单'
			case 11:
				return '售后换新'
			default:
				break;
			}
		}
	},
	mounted() {
		// this.getData()
		this.tableData =[{
			"id":1,
			"code":"123456",
			"jcookCode":"123131241",
			"tradeNo":"12123",
			"tradeStatus":1,
			"payName":"张三",
			"payTel":"13738611460",
			"payType":1,
			"payPrice":13,
			"freightFee":4,
			"receiverName":"王五",
			"receiverTel":"13738611465",
			"locationName":"宁波镇海",
			"addressDetail":"深蓝大厦",
			"remake":null,
			"createName":"张三",
			"createDate":'2022-2-2'
		},{
			"id":2,
			"code":"123456",
			"jcookCode":"123131241",
			"tradeNo":"12123",
			"tradeStatus":1,
			"payName":"张三",
			"payTel":"13738611460",
			"payType":1,
			"payPrice":13,
			"freightFee":4,
			"receiverName":"王五",
			"receiverTel":"13738611465",
			"locationName":"宁波镇海",
			"addressDetail":"深蓝大厦",
			"remake":null,
			"createName":"张三",
			"createDate":'2022-2-2'
		},{
			"id":3,
			"code":"123456",
			"jcookCode":"123131241",
			"tradeNo":"12123",
			"tradeStatus":1,
			"payName":"张三",
			"payTel":"13738611460",
			"payType":1,
			"payPrice":13,
			"freightFee":4,
			"receiverName":"王五",
			"receiverTel":"13738611465",
			"locationName":"宁波镇海",
			"addressDetail":"深蓝大厦",
			"remake":null,
			"createName":"张三",
			"createDate":'2022-2-2'
		},
		]
	},
	methods: {
		async getData(){
			const res  = await orderList({
				pageNum: this.pagination.current,
				size: this.pagination.pageSize,
				...this.searchForm
			})
			this.tableData = res.data.rows
			this.pagination.total = res.data.total
		},
		reset(){
			this.searchForm = {
				code: "",
				jcookCode: '',
				tradeStatus:undefined
			}
			this.getData()
		},
		cancelOrder(data){},
		detail(data){
			this.$router.push({name:'OrderDetail',params:{id:data.id}})
		}
	}
};
</script>
<style lang="less" scoped>
</style>