<template> <div class="sms"> <el-form ref="searchFrom" inline :model="searchFrom" label-width="100px"> <el-form-item label="交易订单号"> <el-input v-model="searchFrom.order_id"></el-input> </el-form-item> <el-form-item label="购买人"> <el-input v-model="searchFrom.nickname"></el-input> </el-form-item> <el-form-item label="购买人ID"> <el-input v-model="searchFrom.user_id"></el-input> </el-form-item> <el-form-item label="手机号"> <el-input v-model="searchFrom.mobile"></el-input> </el-form-item> <el-form-item label="绑定状态"> <el-select v-model="searchFrom.user_buy" placeholder="请选择" @change="getList" clearable> <el-option v-for="item in useTypeList" :key="item.user_buy" :label="item.value" :value="item.user_buy"> </el-option> </el-select> </el-form-item> <el-form-item label="商品名称"> <el-select v-model="searchFrom.goods_id" placeholder="请选择" @change="getList" 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="老师"> <el-select v-model="searchFrom.teacher_id" placeholder="请选择" @change="getList" clearable filterable> <el-option v-for="(data,index) in teacherList" :key="index" :label="data.name" :value="data.id"> </el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="getList">搜索</el-button> <el-button type="primary" plain @click="exportTable(list)">导出</el-button> <el-button type="success" plain @click="classListOption()">当前同步进度</el-button> </el-form-item> </el-form> <el-table :data="list" style="width: 100%"> <el-table-column prop="order_id" label="订单号"> </el-table-column> <el-table-column prop="nickname" label="购买人"> <template slot-scope="scope"> <div v-if='scope.row.user_id !== 0' style="display: flex"> <img class="avatar" :src="scope.row.avatar" /> <div>{{scope.row.nickname}}<br>(ID:{{scope.row.user_id}})</div> </div> <div v-if='scope.row.user_id === 0'> 暂未绑定用户 </div> </template> </el-table-column> <el-table-column prop="goods_name" label="商品名称"> </el-table-column> <el-table-column prop="receiver_name" label="姓名"> </el-table-column> <el-table-column prop="receiver_phone" label="手机号"> </el-table-column> <el-table-column label="收货地址"> <template slot-scope="scope"> {{scope.row.receiver_province}} {{scope.row.receiver_city}} {{scope.row.receiver_area}} {{scope.row.receiver_address}} </template> </el-table-column> <el-table-column prop="teacher_name" label="班级老师"> </el-table-column> <el-table-column prop="create_time" label="创建时间" sortable> </el-table-column> <el-table-column prop="pay_time" label="支付时间" sortable> </el-table-column> <el-table-column prop="desc" label="备注"> </el-table-column> <el-table-column label="操作" v-if="!$store.state.readonly" width="220"> <template slot-scope="scope"> <el-button @click="editNote(scope.row.id, scope.row.desc)" size="mini" plain type="primary">编辑备注</el-button> </template> </el-table-column> </el-table> <page :nowPage="nowPage" :total="total" @pageChange="onPageChange" @sizeChange="onSizeChange" /> <el-dialog :title="classObj.title" :visible.sync="classObj.show" center width="800px"> <div style="margin:10px;color: #888888"> 最新同步时间:{{last_pull_time}} </div> <el-table :data="classList" > <el-table-column prop="teacher_name" label="班级老师"> </el-table-column> <el-table-column prop="num" label="预计入班人数"> </el-table-column> </el-table> <span slot="footer" class="dialog-footer"> </span> </el-dialog> </div> </template> <script> import page from "../framework/page"; import { getyunjiApi, getGoodsListApi, exportExcelApi, getTeacherListApi, orderDescApi } from "../../service/api"; import { GOODSTYPE } from "../../util/wordbook"; export default { name: "smsRecord", components: { page, }, data() { return { nowPage: 1, total: 0, limit: 10, useTypeList: [ { user_buy: 0, value: "未绑定" }, { user_buy: 1, value: "已绑定" } ], searchFrom: { goods_id: "", mobile: "", order_id: "", teacher_id: "", user_id:"", nickname:"", }, list: [], teacherList: [], goodList: [], classObj:{ show: false, title: "当前同步进度", order_id: 0, teacher_id: 0 }, classList:[], last_pull_time:"无", }; }, filters: { filterStatus: function(value) { let msg = ""; if (value === 0) { msg = "未绑定"; } else { msg = "已绑定"; } return msg; }, filterGoods(val) { return ( "[" + GOODSTYPE[val.goods_type] + "]" + "[" + val.current_price / 100 + "元]" + val.name ); } }, mounted() { this.getList(); this.getGoodsOption(); this.getTeacherList(); }, methods: { onPageChange(val) { this.nowPage = val; this.getList(); }, getTeacherList() { let json = { page: 1, limit: 200 }; getTeacherListApi(json).then(res => { this.teacherList = res.list; }); }, onSizeChange(val) { this.nowPage = 1; this.limit = val; this.getList(); }, getList() { let json = { limit: this.limit, page: this.nowPage }; if (this.searchFrom.mobile) { json.mobile = this.searchFrom.mobile; } if (this.searchFrom.nickname) { json.nickname = this.searchFrom.nickname; } if (this.searchFrom.user_id) { json.user_id = this.searchFrom.user_id; } if (this.searchFrom.teacher_id) { json.teacher_id = this.searchFrom.teacher_id; } if (this.searchFrom.goods_name) { json.goods_name = this.searchFrom.goods_name; } if (this.searchFrom.user_buy || this.searchFrom.user_buy == 0) { json.user_buy = this.searchFrom.user_buy; } if (this.searchFrom.order_id) { json.order_id = this.searchFrom.order_id; } if (this.searchFrom.goods_id) { json.goods_id = this.searchFrom.goods_id; } getyunjiApi(json).then(res => { this.total = res.total; this.list = res.list ? res.list : []; }); }, getGoodsOption() { let json = { page: 1, limit: 100 }; getGoodsListApi(json).then(res => { this.goodList = res.list; }); }, editNote(id, desc) { this.$prompt("", "编辑备注", { confirmButtonText: "确定", cancelButtonText: "取消", inputType: "textarea", inputValue: desc || "" }).then(({ value }) => { this.$confirm("确定保存?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => { orderDescApi({ desc: value }, id).then(res => { this.$message({ type: "success", message: "编辑备注成功" }); this.getList(); }); }); }); }, exportTable(data) { if (data.length > 0) { let json = {}; if (this.searchFrom.order_id) { json.order_id = this.searchFrom.order_id; } if (this.searchFrom.user_buy || this.searchFrom.user_buy == 0) { json.user_buy = this.searchFrom.user_buy; } if (this.searchFrom.mobile) { json.mobile = this.searchFrom.mobile; } if (this.searchFrom.nickname) { json.nickname = this.searchFrom.nickname; } if (this.searchFrom.user_id) { json.user_id = this.searchFrom.user_id; } if (this.searchFrom.goods_id) { json.goods_id = this.searchFrom.goods_id; } if (this.searchFrom.teacher_id) { json.teacher_id = this.searchFrom.teacher_id; } exportExcelApi(`api/admin/yunji/order/export`, json); } }, classListOption() { this.classObj.show=true; getyunjiApi({ page: 1,limit: 200}).then(res => { this.classList=res.teacher; if(res.last_pull_time){ this.last_pull_time=res.last_pull_time; } }); } } }; </script> <style scoped> .sms { padding: 20px 0; } .avatar { width: 50px; min-width: 50px; margin-right: 10px; height: 50px; border-radius: 50%; } </style> <style> .userInfo > div { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; } </style>