<template>
<div class="order">
<el-form ref="searchFrom" :model="searchFrom" label-width="100px" inline size="small">
<el-form-item label="用户ID">
<el-input v-model="searchFrom.user_id" style="width: 80px"></el-input>
</el-form-item>
<el-form-item label="用户昵称">
<el-input v-model="searchFrom.nickname" style="width: 110px"></el-input>
</el-form-item>
<el-form-item label="收件人手机号">
<el-input v-model="searchFrom.receive_mobile" style="width: 120px"></el-input>
</el-form-item>
<el-form-item label="商品名称">
<el-select v-model="searchFrom.goods_id" filterable placeholder="请选择" style="width: 150px;" @change="getOrderList" 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-form-item label="来源" class="test">
<el-input v-model="searchFrom.invite_type " style="width: 150px" :placeholder="inviteSearchPlaceholder">
<template slot="prepend">CC -</template>
</el-input>
</el-form-item>
<el-form-item label="推广人ID">
<el-input v-model="searchFrom.invite_id" style="width: 80px" :placeholder="inviteSearchPlaceholder"></el-input>
</el-form-item>
<el-form-item label="团ID">
<el-input v-model="searchFrom.order_group_id" style="width: 80px"></el-input>
</el-form-item>
<el-form-item label="是否团长">
<el-select v-model="searchFrom.is_captain" style="width: 100px" placeholder="请选择" @change="getOrderList" clearable>
<el-option v-for="item in isLeaderOption" :key="item.id" :label="item.value" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="购买方式">
<el-select v-model="searchFrom.buy_type" placeholder="请选择" style="width: 100px" @change="getOrderList" 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-form-item label="订单状态">
<el-select multiple v-model="searchFrom.status" placeholder="请选择" @change="getOrderList" 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-form-item label="是否入课">
<el-select v-model="searchFrom.wait_into_course" placeholder="请选择" @change="getOrderList" clearable style="width: 120px">
<el-option
label="已入课"
value="0">
</el-option>
<el-option
label="未入课"
value="1">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="交易订单号">
<el-input v-model="searchFrom.out_trade_no"></el-input>
</el-form-item>
<el-form-item label="购买时间">
<el-date-picker
v-model="searchFrom.payTime"
type="datetimerange"
range-separator="至"
value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="{shortcuts:[today,yesterday,last7Day,last30Day]}"
:default-time="['00:00:00','23:59:59']"
@change="getOrderList">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" plain @click="getOrderList">搜索</el-button>
<el-button type="primary" plain @click="exportTable" v-if="$store.state.export">导出</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" size="small" @expand-change="changeRow" style="width: 100%" fixed>
<el-table-column prop="out_trade_no" label="订单号" width="120">
</el-table-column>
<el-table-column label="购买人" className="f-c" width="150">
<template slot-scope="scope">
<img class="avatar" :src="scope.row.user_avatar"/> {{scope.row.user_nickname}}<br>(ID:{{scope.row.user_id}})<br>手机：{{scope.row.user_mobile}}
</template>
</el-table-column>
<!--<el-table-column prop="periods_title" label="期数名称"></el-table-column><!––>-->
<el-table-column prop="periods_title" label="期数名称" width="150px">
<template slot-scope="scope">
<div v-html="periodName(scope.row)"></div>
<!--{{periodName(scope.row)}}-->
</template>
</el-table-column>
<el-table-column prop="goods_name" label="商品名称" width="160">
</el-table-column>
<el-table-column width="250" prop="invite_id" className="f-c" label="来源">
<template slot-scope="scope">
<div @click="showSource(scope.row)" v-if="scope.row.invite_earnings > 0 && scope.row.invite_id !== 0" style="width:100%;display: flex;color: #409eff;cursor: pointer">
<img :src="scope.row.invite_avatar" class="avatar"/> 类型：{{scope.row.invite_type}} ({{scope.row.invite_name}})
<br> 收益：{{scope.row.invite_earnings / 100}}
<br> 用户ID:{{scope.row.invite_id}}
<br> 昵称：{{scope.row.invite_nickname}}
<br> 手机：{{scope.row.invite_mobile}}
</div>
<div v-if="scope.row.invite_earnings === 0 && scope.row.invite_id !== 0" style="display: flex;">
<img :src="scope.row.invite_avatar" class="avatar"/> 类型：{{scope.row.invite_type}} ({{scope.row.invite_name}})
<br> 收益：{{scope.row.invite_earnings / 100}}
<br> 用户ID:{{scope.row.invite_id}}
<br> 昵称：{{scope.row.invite_nickname}}
<br> 手机：{{scope.row.invite_mobile}}
</div>
<div v-if="scope.row.invite_id === 0">
无
</div>
</template>
</el-table-column>
<el-table-column prop="order_group_id" label="团ID" width="80">
</el-table-column>
<el-table-column label="是否团长" width="80">
<template slot-scope="scope">
{{scope.row.is_captain | isLeader}}
</template>
</el-table-column>
<el-table-column label="优惠活动">
<template slot-scope="scope">
<span v-if="scope.row.order_coupon_id === 0">
无
</span>
<el-button type="text" v-if="scope.row.order_coupon_id !== 0" @click="showCoupon(scope.row)">
优惠券
</el-button>
</template>
</el-table-column>
<el-table-column label="付款状态" width="80">
<template slot-scope="scope">
<el-button type="text" v-if="scope.row.status === 5 || scope.row.status === 3" @click="showRef(scope.row)">{{scope.row.status|status}}</el-button>
<div v-if="scope.row.status !== 5 && scope.row.status !== 3">{{scope.row.status|status}}</div>
</template>
</el-table-column>
<el-table-column label="实付金额" width="80">
<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="created_at" label="时间" width="280">
<template slot-scope="scope">
下单时间：{{scope.row.created_at}}<br>
购买时间：{{scope.row.pay_at}}<br>
<div v-if="scope.row.buy_type != 1">
成团时间：{{scope.row.group_success_time}}<br>
截止时间：{{scope.row.deadline}}
</div>
</template>
</el-table-column>
<el-table-column prop="desc" label="备注">
</el-table-column>
<el-table-column width="50" label="操作" v-if="!$store.state.readonly" fixed="right">
<template slot-scope="scope">
<el-popover placement="top" width="400">
<div style="text-align: center">
<!--v-if="(scope.row.status == 1 || scope.row.status == 4|| scope.row.status == 5) && $store.state.orderRefund"-->
<el-button @click="onRefund(scope.row.id, scope.row.money)" v-if="(scope.row.status == 1 || scope.row.status == 4|| scope.row.status == 5) && $store.state.orderRefund" type="warning" plain size="mini">
退款
</el-button>
<el-button @click="editComment(scope.row.id, scope.row.desc)" type="info" plain size="mini">
编辑备注
</el-button>
<el-button @click="editAddress(scope.row)" plain type="info" size="mini">
编辑收货地址
</el-button>
<el-button @click="updateTeacher(scope.row)" v-if="$store.state.promoter" type="warning" plain size="mini">
编辑推广人
</el-button>
</div>
<el-button slot="reference" size="mini" type="text">操作</el-button>
</el-popover>
</template>
</el-table-column>
</el-table>
<address-dialog :dialogObj="dialogObj" @reflash="onUpdateAddress"></address-dialog>
<refund-dialog :dialogObj="refundDialogObj" @reflash="onAfterRefund" @changeShow="changeShow"></refund-dialog>
<detail-dialog :dialogObj="dialogDetailObj" @changeShow="changeDetailShow"/>
<source-dialog :dialogObj="sourceDialog"/>
<refund-detail :dialogObj="refundDetail"/>
<coupon-dialog :dialogObj="couponDetail"/>
<el-dialog title="修改推广人" center append-to-body :visible.sync="promoterDialog.show" width="600">
<el-form ref="form" label-width="120px">
<el-form-item label="老师">
<el-select v-model="promoterDialog.teacher_id" filterable remote clearable placeholder="请输入名称" :remote-method="remoteMethod" :loading="loading">
<el-option v-for="item in teacherList" :key="item.id" :label="item.name" :value="item.user_id">
</el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="promoterDialog.show = false">取 消</el-button>
<el-button type="primary" @click="saveTeacher">确 定</el-button>
</span>
</el-dialog>
<page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
</div>
</template>
<script>
import {
getOrderListApi,
editOrderDescApi,
getGoodsListApi,
getRefundListApi,
exportExcelApi,
getTeacherListApi,
updateOrderTeacherApi,
setOrderApi
} from "../../service/api";
import page from "../framework/page";
import addressDialog from "./dialog";
import sourceDialog from "./sourceDialog";
import refundDialog from "./refundDialog";
import couponDialog from "./couponDialog";
import detailDialog from "./detail";
import refundDetail from "./refundDetail";
import AddressArray from "../framework/address-picker/addr";
import {
INVITETYPE,
ORDERSTATUS,
BUYTYPE,
BUYTYPEOPTION,
ORDERSTATUSOPTION,
INVITETYPEOPTION,
GOODSTYPE,
ISLEADER,
ISLEADEROPTION
} from "../../util/wordbook";
import CommonJs from "../../util/common";
export default {
name: "index",
data() {
return {
nowPage: 1,
total: 0,
today: {
text: '今天',
onClick: () => {
this.searchFrom.payTime = [this.formatTime(new Date()) + ' 00:00:00', this.formatTime(new Date()) + ' 23:59:59'];
}
},
yesterday: {
text: '昨天',
onClick: () => {
let preDate = this.formatTime(new Date(new Date().getTime() - 24 * 60 * 60 * 1000));
this.searchFrom.payTime = [preDate + ' 00:00:00', preDate + ' 23:59:59'];
}
},
last30Day: {
text: '过去30天',
onClick: () => {
let preDate = this.formatTime(new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000));
this.searchFrom.payTime = [preDate + ' 00:00:00', this.formatTime(new Date()) + ' 23:59:59'];
}
},
last7Day: {
text: '过去7天',
onClick: () => {
let preDate = this.formatTime(new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000));
this.searchFrom.payTime = [preDate + ' 00:00:00', this.formatTime(new Date()) + ' 23:59:59'];
}
},
sourceDialog: {
show: false,
out_trade_no: ""
},
couponDetail: {
show: false,
order_coupon_id: ""
},
refundDetail: {
show: false,
out_trade_no: ""
},
limit: 10,
searchFrom: {
nickname: "",
wait_into_course: '',
user_id: "",
invite_type: "",
invite_id: "",
buy_type: "",
status: [1, 4, 5],
goods_id: "",
out_trade_no: "",
payTime: [],
order_group_id: "",
is_captain: "",
},
tableData: [],
dialogObj: {
show: false
},
refundDialogObj: {
show: false,
id: "",
money: 0
},
dialogDetailObj: {
show: false,
detail: {}
},
goodList: [],
inviteTypeOption: INVITETYPEOPTION,
orderStatusOption: ORDERSTATUSOPTION,
buyTypeOption: BUYTYPEOPTION,
inviteSearchPlaceholder: "",
rules: {
value: [{required: true, message: "请输入备注", trigger: "change"}]
},
promoterDialog: {
show: false,
nowPage: 1,
total: 0,
limit: 500,
teacher_id: ""
},
teacherList: [],
loading: false,
isLeaderOption: ISLEADEROPTION,
};
},
methods: {
periodName(val) {
let str = '';
if (!val.periods_title) {
str = '-'
} else {
if (val.goods_id) {
str += `【${val.goods_id}】`
}
if (val.periods_title) {
str += `${val.periods_title}<br>`
}
if (val.watch_num) {
str += `${val.watch_num}课时`
}
if (val.start_at) {
str += `（${val.start_at.slice(5).replace('-', '')}）`
}
if (val.has_watch_num || val.has_watch_num == 0) {
str += `-d${val.has_watch_num}`
}
}
return str
},
formatTime(date) {
let year = date.getFullYear();
let Month = date.getMonth() + 1;
if (Month < 10) {
Month = `0${Month}`
}
let Day = date.getDate();
if (Day < 10) Day = `0${Day}`;
return `${year}-${Month}-${Day}`;
},
showRef(data) {
this.refundDetail.show = true;
this.refundDetail.out_trade_no = data.out_trade_no;
},
showCoupon(data) {
this.couponDetail.show = true;
this.couponDetail.order_coupon_id = data.order_coupon_id;
},
showSource(data) {
this.sourceDialog.show = true;
this.sourceDialog.out_trade_no = data.out_trade_no;
},
changeRow(data, b) {
if (b.indexOf(data) > -1) {
getRefundListApi({out_trade_no: data.out_trade_no}).then(res => {
data.refundList = res.list;
});
}
},
exportTable() {
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.order_group_id) {
json.order_group_id = this.searchFrom.order_group_id;
}
if (this.searchFrom.buy_type) {
json.buy_type = this.searchFrom.buy_type;
}
if (this.searchFrom.status) {
json.status = this.searchFrom.status.toString();
}
if (this.searchFrom.goods_id) {
json.goods_id = this.searchFrom.goods_id;
}
if (this.searchFrom.is_captain || this.searchFrom.is_captain == 0) {
json.is_captain = this.searchFrom.is_captain;
}
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) {
json.pay_start_at = this.searchFrom.payTime[0]
json.pay_end_at = this.searchFrom.payTime[1]
}
if (this.searchFrom.wait_into_course) {
json.wait_into_course = this.searchFrom.wait_into_course
}
json.course_type = 1; //日课
exportExcelApi("/api/admin/order/export", json, '日课订单列表');
},
getGoodsOption() {
let json = {
page: 1,
limit: 100,
course_type: 1,
status: "1,2"
};
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";
}
this.getOrderList();
},
detail(row) {
let _detail = row;
this.dialogDetailObj = {
show: true,
detail: _detail
};
},
editComment(id, desc) {
this.$prompt("", "编辑备注", {
confirmButtonText: "确定",
cancelButtonText: "取消",
inputType: "textarea",
inputValue: desc || ""
}).then(({value}) => {
this.$confirm("确定保存?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
editOrderDescApi(id, "order", {desc: value}).then(res => {
this.$message({
type: "success",
message: "编辑备注成功"
});
this.getOrderList();
});
});
});
},
onPageChange(val) {
this.nowPage = val;
this.getOrderList();
},
onSizeChange(val) {
this.limit = val;
this.nowPage = 1;
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.order_group_id) {
json.order_group_id = this.searchFrom.order_group_id;
}
if (this.searchFrom.buy_type) {
json.buy_type = this.searchFrom.buy_type;
}
if (this.searchFrom.status) {
json.status = this.searchFrom.status.toString();
}
if (this.searchFrom.goods_id) {
json.goods_id = this.searchFrom.goods_id;
}
if (this.searchFrom.is_captain || this.searchFrom.is_captain == 0) {
json.is_captain = this.searchFrom.is_captain;
}
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) {
json.pay_start_at = this.searchFrom.payTime[0]
json.pay_end_at = this.searchFrom.payTime[1]
}
if (this.searchFrom.wait_into_course) {
json.wait_into_course = this.searchFrom.wait_into_course
}
json.course_type = 1; //日课
getOrderListApi(json).then(res => {
res.list.forEach(i => {
i.refundList = [];
});
this.tableData = res.list;
this.total = res.total;
});
},
changeDetailShow(data) {
this.dialogDetailObj.show = data;
},
changeShow(data) {
this.refundDialogObj.show = data;
},
onRefund(id, money) {
this.refundDialogObj.id = id;
this.refundDialogObj.money = money;
this.refundDialogObj.show = true;
},
onAfterRefund() {
this.refundDialogObj.show = false;
this.getOrderList();
},
onUpdateAddress() {
this.dialogObj.show = false;
this.getOrderList();
},
editAddress(row) {
console.log(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;
},
getTeacherList(name) {
this.loading = true;
let json = {
limit: this.promoterDialog.limit,
page: this.promoterDialog.nowPage
};
if (name) {
json.name = name;
}
getTeacherListApi(json).then(res => {
this.teacherList = res.list;
this.loading = false;
});
},
handleCurrentTeacherChange(val) {
console.log("handleCurrentTeacherChange", val);
},
updateTeacher(val) {
this.promoterDialog.show = true;
this.promoterDialog.id = val.id;
this.promoterDialog.teacher_id = val.invite_id;
this.getTeacherList();
},
remoteMethod(query) {
if (query !== "") {
this.getTeacherList(query);
} else {
this.getTeacherList();
}
},
saveTeacher() {
this.$confirm("此操作将修改推广人?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
console.log("this.promoterDialog.teacher_id", this.promoterDialog);
updateOrderTeacherApi(
this.promoterDialog.id,
this.promoterDialog.teacher_id
).then(res => {
this.promoterDialog.id = "";
this.promoterDialog.teacher_id = "";
this.promoterDialog.show = false;
this.$message({
type: "success",
message: "修改成功!"
});
this.getOrderList();
});
});
},
},
components: {
addressDialog,
refundDialog,
detailDialog,
refundDetail,
sourceDialog,
couponDialog,
page
},
mounted() {
if (this.$route.query.code) {
this.searchFrom.invite_type = this.$route.query.code;
}
this.getOrderList();
this.getGoodsOption();
},
watch: {},
filters: {
isLeader(value) {
return ISLEADER[value]
},
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.id +
"]" +
"[" +
GOODSTYPE[val.goods_type] +
"]" +
"[" +
val.current_price / 100 +
"元]" +
val.name
);
}
}
};
</script>
<style scoped>
.avatar {
width: 50px;
min-width: 50px;
height: 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;
}
</style>