<template> <div class="order"> <el-form ref="searchFrom" :model="searchFrom" label-width="100px"> <el-row> <el-col :span="6"> <el-form-item label="用户ID"> <el-input v-model="searchFrom.user_id"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="用户昵称"> <el-input v-model="searchFrom.nickname"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="收件人手机号"> <el-input v-model="searchFrom.receive_mobile"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="商品名称"> <el-select v-model="searchFrom.goods_id" placeholder="请选择" clearable> <el-option v-for="(data,index) in goodList" :key="index" :label="data | filterGoods" :value="data.id"> </el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="来源" class="test"> <el-select v-model="searchFrom.invite_type" placeholder="来源类型" @change="onInviteTypeChange" @clear="searchFrom.invite_id=''" clearable> <el-option v-for="item in inviteTypeOption" :key="item.id" :label="item.value" :value="item.id"> </el-option> </el-select> <el-input v-if="parseInt(searchFrom.invite_type) >= 0" v-model="searchFrom.invite_id" :placeholder="inviteSearchPlaceholder"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="购买方式"> <el-select v-model="searchFrom.buy_type" placeholder="请选择" clearable> <el-option v-for="item in buyTypeOption" :key="item.id" :label="item.value" :value="item.id"> </el-option> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="订单状态"> <el-select v-model="searchFrom.status" placeholder="请选择" clearable> <el-option v-for="item in orderStatusOption" :key="item.id" :label="item.value" :value="item.id"> </el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="6"> <el-form-item label="交易订单号"> <el-input v-model="searchFrom.out_trade_no"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="购买时间"> <el-date-picker v-model="searchFrom.payTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00','23:59:59']"> </el-date-picker> </el-form-item> </el-col> <el-col :span="6"> <el-form-item style="float: right"> <el-button type="primary" plain @click="getOrderList">搜索</el-button> </el-form-item> </el-col> </el-row> </el-form> <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="out_trade_no" label="订单号" > </el-table-column> <el-table-column label="购买人" className="f-c" > <template slot-scope="scope"> <img class="avatar" :src="scope.row.user_avatar"/> {{scope.row.user_nickname}}(ID:{{scope.row.user_id}}) </template> </el-table-column> <el-table-column prop="goods_name" label="商品名称"> </el-table-column> <el-table-column label="付款状态" width="100"> <template slot-scope="scope"> {{scope.row.status|status}} </template> </el-table-column> <el-table-column label="实付金额" width="100"> <template slot-scope="scope"> {{scope.row.money|moneytFilter}} </template> </el-table-column> <el-table-column label="收货地址"> <template slot-scope="scope"> <div v-if="scope.row.user_address_id && scope.row.address_info"> {{scope.row.address_info.receive_name}}<br> {{scope.row.address_info.receive_mobile}}<br> {{scope.row.address_info.province_name}}{{scope.row.address_info.city}}{{scope.row.address_info.area}}{{scope.row.address_info.address}} </div> </template> </el-table-column> <el-table-column prop="desc" label="备注"> </el-table-column> <el-table-column label="操作" min-width="120" v-if="!$store.state.readonly" > <template slot-scope="scope"> <el-button v-if="scope.row.status == 1" @click="onRefund(scope.row.id, scope.row.money)" type="text" plain size="mini"> 退款 </el-button> <el-button @click="editComment(scope.row.id, scope.row.desc)" type="text" plain size="mini"> 编辑备注 </el-button> <el-button v-if="scope.row.user_address_id" @click="editAddress(scope.row)" plain type="text" size="mini"> 编辑收货地址 </el-button> <el-button @click="detail(scope.row)" type="text" plain size="mini"> 查看详情 </el-button> </template> </el-table-column> </el-table> <address-dialog v-if="dialogObj.show" :dialogObj="dialogObj" @reflash="onUpdateAddress"></address-dialog> <refund-dialog :dialogObj="refundDialogObj" @reflash="onAfterRefund" @changeShow="changeShow"></refund-dialog> <detail-dialog :dialogObj="dialogDetailObj" @changeShow="changeDetailShow"/> <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange"/> </div> </template> <script> import {getOrderListApi,editOrderDescApi,getGoodsListApi} from "../../service/api"; import page from '../framework/page' import addressDialog from './dialog' import refundDialog from './refundDialog' import detailDialog from './detail' import AddressArray from '../framework/address-picker/addr' import {INVITETYPE,ORDERSTATUS,BUYTYPE,BUYTYPEOPTION,ORDERSTATUSOPTION,INVITETYPEOPTION} from "../../util/wordbook"; import CommonJs from '../../util/common'; export default { name: 'index', data(){ return { nowPage: 1, total: 0, limit: 10, searchFrom: { nickname: '', user_id: '', invite_type: '', invite_id: '', buy_type: '', status: 1, goods_id: '', out_trade_no: '', payTime: [] }, tableData: [], dialogObj: { show: false }, refundDialogObj: { show: false, id: '', money: 0 }, dialogDetailObj: { show: false, detail: {} }, goodList: [], inviteTypeOption: INVITETYPEOPTION, orderStatusOption: ORDERSTATUSOPTION, buyTypeOption: BUYTYPEOPTION, inviteSearchPlaceholder: '', } }, methods: { getGoodsOption(){ let json = { page: 1, limit: 100 }; getGoodsListApi(json).then(res=>{ this.goodList = res.list; }) }, onInviteTypeChange(val){ if (val === 0) { this.inviteSearchPlaceholder = '用户ID' } else if (val === 1) { this.inviteSearchPlaceholder = '老师ID' } else if (val === 2) { this.inviteSearchPlaceholder = '推广人ID' } }, detail(row){ let _detail = row; this.dialogDetailObj = { show: true, detail: _detail } }, editComment(id, desc) { this.$prompt('', '编辑备注', { confirmButtonText: '确定', cancelButtonText: '取消', inputValue: desc }).then(({ value }) => { editOrderDescApi(id,'order',{desc: value}).then(res=>{ this.$message({ type: 'success', message: '编辑备注成功' }) this.getOrderList(); }); }) }, onPageChange(val){ this.nowPage = val this.getOrderList() }, getOrderList(){ let json = { limit: this.limit, page: this.nowPage }; if (this.searchFrom.nickname) { json.nickname = this.searchFrom.nickname } if (this.searchFrom.user_id) { json.user_id = this.searchFrom.user_id } if (this.searchFrom.invite_type) { json.invite_type = this.searchFrom.invite_type } if (this.searchFrom.invite_id) { json.invite_id = this.searchFrom.invite_id } if (this.searchFrom.buy_type) { json.buy_type = this.searchFrom.buy_type } if (this.searchFrom.status) { json.status = this.searchFrom.status } if (this.searchFrom.goods_id) { json.goods_id = this.searchFrom.goods_id } if (this.searchFrom.out_trade_no) { json.out_trade_no = this.searchFrom.out_trade_no } if (this.searchFrom.receive_mobile) { json.receive_mobile = this.searchFrom.receive_mobile } if(this.searchFrom.payTime && this.searchFrom.payTime.length > 0){ console.log('this.searchFrom.payTime') json.pay_start_at = CommonJs.dateFmt(this.searchFrom.payTime[0],"yyyy-MM-dd hh:mm:ss") json.pay_end_at = CommonJs.dateFmt(this.searchFrom.payTime[1],"yyyy-MM-dd hh:mm:ss") } getOrderListApi(json).then((res)=>{ this.tableData = res.list this.total = res.total }) }, changeDetailShow(data){ this.dialogDetailObj.show=data }, changeShow(data){ this.refundDialogObj.show=data }, onRefund(id, money){ console.log('onRefund', id, money); this.refundDialogObj.id= id; this.refundDialogObj.money= money; this.refundDialogObj.show = true; }, onAfterRefund(){ }, onUpdateAddress(){ this.dialogObj.show = false; this.getOrderList(); }, editAddress(row){ if( !row.address_info || !row.address_info.province_name ){ this.dialogObj.province = '' this.dialogObj.city = '' this.dialogObj.district = '' } else { let provinceObj = AddressArray.filter((item) => { return item.label === row.address_info.province_name }) if(provinceObj && provinceObj.length > 0){ this.dialogObj.province = row.address_info.province_id ? row.address_info.province_id : provinceObj[0].value if(!row.address_info.city){ this.dialogObj.city = '' } else { let cityObj = provinceObj[0].children.filter((city) => { return city.label === row.address_info.city }) this.dialogObj.city = row.address_info.city_id ? row.address_info.city_id : cityObj[0].value if(!row.address_info.area){ this.dialogObj.district = '' }else { let districtObj = cityObj[0].children.filter((district) => { return district.label === row.address_info.area }) this.dialogObj.district = row.address_info.area_id ? row.address_info.area_id : districtObj[0].value } } } else { this.dialogObj.province = ''; this.dialogObj.district = ''; this.dialogObj.city = '' } } this.dialogObj.detail = row.address_info ? row.address_info.address : ''; this.dialogObj.receive_mobile = row.address_info ? row.address_info.receive_mobile : ''; this.dialogObj.receive_name = row.address_info ? row.address_info.receive_name : ''; this.dialogObj.province_name = row.address_info ? row.address_info.province_name : ''; this.dialogObj.city_name = row.address_info ? row.address_info.city : ''; this.dialogObj.district_name = row.address_info ? row.address_info.area : ''; this.dialogObj.id = row.id; this.dialogObj.show=true; } }, components: { addressDialog, refundDialog, detailDialog, page }, mounted(){ this.getOrderList(); this.getGoodsOption(); }, filters:{ payMentFilter(val){ return val=='1'?'已付款':'未付款' }, courseTypeFilter(val){ return val.type=='1'?`正式课(${val.duration}个月)`:`试听课(${val.duration}天)` }, inviteType(value){ return INVITETYPE[value] }, status(value){ return ORDERSTATUS[value] }, buyType(value){ return BUYTYPE[value] }, moneytFilter(val){ return val = val / 100 + '元' }, filterGoods(val){ return val.name + '[' +val.current_price / 100 + '元]' } } } </script> <style scoped> .avatar{ width: 50px; margin-right: 5px; border-radius: 50%; } .order { padding: 20px 0; } </style> <style> .f-c > .cell { display: flex !important; flex-flow: row; justify-content: flex-start; align-items: center; } .test>div> .el-input { width: 30%; } </style>