123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467 |
- <template>
- <div class="container">
- <el-card class="box-card">
- <div class="filter-container">
- <el-date-picker
- v-model="timeValue"
- type="datetimerange"
- value-format="yyyy-MM-dd HH:mm:ss"
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- :picker-options="pickerOptions"
- ></el-date-picker>
- <el-button
- style="margin-left: 10px"
- :loading="exportLoading"
- type="primary"
- @click="exportBtn"
- >导出</el-button
- >
- <el-button
- style="margin-left: 10px"
- :loading="exportLoading1"
- type="primary"
- @click="exportBtn1"
- >商品统计</el-button
- >
- </div>
- <!-- show-overflow-tooltip -->
- <el-table
- :data="tableData"
- v-loading="listLoading"
- highlight-current-row
- fit
- class="table-list"
- :cell-style="{ padding: '6px 0' }"
- >
- <el-table-column prop="id" label="ID"></el-table-column>
- <el-table-column
- prop="status"
- label="订单状态"
- width="90"
- show-overflow-tooltip
- ></el-table-column>
- <el-table-column prop="type" label="订单类型">
- <template slot-scope="{ row }">
- <span>{{ row.type | setType }}</span>
- </template>
- </el-table-column>
- <el-table-column
- prop="deliverypro"
- label="配送方式"
- show-overflow-tooltip
- >
- <template slot-scope="{ row }">
- <span>{{ row.deliverypro | setDeliverypro }}</span>
- </template>
- </el-table-column>
- <el-table-column
- prop="outtradeno"
- label="订单号"
- width="130"
- ></el-table-column>
- <el-table-column prop="createtime" label="下单时间" width="140">
- <template slot-scope="{ row }">
- <span>{{ row.createtime | parseTime }}</span>
- </template>
- </el-table-column>
- <el-table-column
- prop="products"
- label="商品"
- width="90"
- show-overflow-tooltip
- ></el-table-column>
- <el-table-column prop="productfee" label="商品价格"></el-table-column>
- <el-table-column prop="totalfee" label="总价">
- <template slot-scope="{ row }">
- <span>{{ row.totalfee | filterFee }}</span>
- </template>
- </el-table-column>
- <el-table-column
- prop="shippingaddr"
- label="下单地址"
- show-overflow-tooltip
- ></el-table-column>
- <el-table-column
- prop="shopname"
- label="门店"
- width="200"
- show-overflow-tooltip
- ></el-table-column>
- <el-table-column
- prop="notes"
- show-overflow-tooltip
- label="订单备注"
- ></el-table-column>
- <el-table-column
- prop="courier"
- label="骑手"
- width="140"
- show-overflow-tooltip
- ></el-table-column>
- <el-table-column prop="stars" label="评星"></el-table-column>
- <el-table-column
- prop="comment"
- label="订单评价"
- width="180"
- show-overflow-tooltip
- ></el-table-column>
- <el-table-column
- prop="peisong_id"
- label="peisong_id"
- show-overflow-tooltip
- ></el-table-column>
- <el-table-column
- prop="useropenid"
- label="useropenid"
- show-overflow-tooltip
- ></el-table-column>
- <el-table-column prop="useticket" label="useticket"></el-table-column>
- <el-table-column prop="wxverified" label="wxverified"></el-table-column>
- <el-table-column fixed="right" label="操作" width="100">
- <template slot-scope="scope">
- <el-button @click="handleClick(scope.row)" type="text" size="small"
- >查看</el-button
- >
- </template>
- </el-table-column>
- </el-table>
- <div class="pd-30">
- <el-pagination
- v-show="total > 0"
- background
- layout="prev, pager, next"
- :total="total"
- @current-change="handleCurrentChange"
- :current-page.sync="listQuery.page"
- :page-size="listQuery.limit"
- ></el-pagination>
- </div>
- </el-card>
- <!-- 弹窗 -->
- <el-dialog
- title="详情"
- :visible.sync="dialogVisible"
- :before-close="handleClose"
- >
- <el-form :inline="true" :model="formInline" label-width="100px">
- <el-row :gutter="24">
- <el-col :span="12">
- <el-form-item label="id">
- <el-input v-model="formInline.id" readonly autosize></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="骑手">
- <el-input v-model="formInline.courier" readonly></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="24">
- <el-col :span="12">
- <el-form-item label="下单时间">
- <el-input v-model="formInline.createtime" readonly></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="配送方式">
- <el-input v-model="formInline.deliverypro" readonly></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="24">
- <el-col :span="12">
- <el-form-item label="订单备注">
- <el-input
- type="textarea"
- v-model="formInline.notes"
- readonly
- ></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="订单号">
- <el-input v-model="formInline.outtradeno" readonly></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="24">
- <el-col :span="12">
- <el-form-item label="productfee">
- <el-input v-model="formInline.productfee" readonly></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="products">
- <el-input
- type="textarea"
- v-model="formInline.products"
- readonly
- ></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="24">
- <el-col :span="12">
- <el-form-item label="peisong_id">
- <el-input v-model="formInline.peisong_id" readonly></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="shippingaddr">
- <el-input
- type="textarea"
- v-model="formInline.shippingaddr"
- readonly
- ></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="24">
- <el-col :span="12">
- <el-form-item label="门店名称">
- <el-input v-model="formInline.shopname" readonly></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="订单状态">
- <el-input v-model="formInline.status" readonly></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="24">
- <el-col :span="12">
- <el-form-item label="totalfee">
- <el-input v-model="formInline.totalfee" readonly></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="订单类型">
- <el-input v-model="formInline.type" readonly></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="24">
- <el-col :span="12">
- <el-form-item label="useropenid">
- <el-input v-model="formInline.useropenid" readonly></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="useticket">
- <el-input v-model="formInline.useticket" readonly></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="24">
- <el-col :span="12">
- <el-form-item label="wxverified">
- <el-input :value="formInline.wxverified" readonly></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="shopid">
- <el-input v-model="formInline.shopid" readonly></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- </el-dialog>
- </div>
- </template>
- <script>
- import {
- getOrderList,
- export_order,
- export_goods,
- orderWxverify
- } from "@/api/order";
- export default {
- name: "List",
- filters: {
- formatVerified(value) {
- console.log(value);
- if (value == 1) return "已付款";
- if (value == 0) return "未付款";
- },
- setType(type) {
- if (type == "takeaway") {
- return "外卖";
- }
- if (type == "pickup") {
- return "堂食";
- }
- },
- setDeliverypro(data) {
- if (data == "hb") {
- return "蜂鸟";
- }
- if (data == "mt") {
- return "美团";
- }
- return "";
- },
- parseTime(datetime) {
- var date = new Date(datetime); //时间戳为10位需*1000,时间戳为13位的话不需乘1000
- var year = date.getFullYear(),
- month = ("0" + (date.getMonth() + 1)).slice(-2),
- sdate = ("0" + date.getDate()).slice(-2),
- hour = ("0" + date.getHours()).slice(-2),
- minute = ("0" + date.getMinutes()).slice(-2),
- second = ("0" + date.getSeconds()).slice(-2);
- // 拼接
- var result =
- year +
- "-" +
- month +
- "-" +
- sdate +
- " " +
- hour +
- ":" +
- minute +
- ":" +
- second;
- // 返回
- return result;
- },
- filterFee(fee) {
- return fee / 100;
- }
- },
- data() {
- return {
- pickerOptions: {
- disabledDate(time) {
- return time.getTime() > Date.now();
- }
- },
- exportLoading: false,
- exportLoading1: false,
- timeValue: "",
- total: 0,
- listLoading: true,
- searchLoading: false,
- listQuery: {
- page: 1,
- limit: 100
- },
- tableData: [],
- dialogVisible: false,
- formInline: {}
- };
- },
- created() {
- this.getList();
- },
- methods: {
- handleClose() {
- this.dialogVisible = false;
- },
- async handleClick(row) {
- this.formInline = row;
- if (!row.wxverified) {
- let res = await orderWxverify({
- outtradeno: row.outtradeno
- });
- this.formInline.wxverified = res;
- }
- // orderWxverify
- this.dialogVisible = true;
- },
- exportBtn() {
- if (!this.timeValue.length) {
- return this.$message.error("请选择日期范围");
- }
- this.exportLoading = true;
- export_order({
- starttime: this.timeValue[0],
- endtime: this.timeValue[1]
- })
- .then(res => {
- let blob = new Blob([res], { type: "application/x-xls" });
- let link = document.createElement("a");
- link.href = window.URL.createObjectURL(blob);
- link.download = "订单.xlsx";
- link.click();
- this.exportLoading = false;
- })
- .catch(err => {
- this.exportLoading = false;
- this.$message.error("导出失败,请稍后重试!");
- });
- },
- exportBtn1() {
- if (!this.timeValue.length) {
- return this.$message.error("请选择日期范围");
- }
- this.exportLoading1 = true;
- export_goods({
- starttime: this.timeValue[0],
- endtime: this.timeValue[1]
- })
- .then(res => {
- let blob = new Blob([res], { type: "application/x-xls" });
- let link = document.createElement("a");
- link.href = window.URL.createObjectURL(blob);
- link.download = "商品统计.xlsx";
- link.click();
- this.exportLoading1 = false;
- })
- .catch(err => {
- this.exportLoading1 = false;
- this.$message.error("导出失败,请稍后重试!");
- });
- },
- getList() {
- this.listLoading = true;
- getOrderList({
- page: this.listQuery.page
- }).then(res => {
- this.tableData = res.orders;
- this.total = res.total;
- this.listLoading = false;
- });
- },
- handleCurrentChange(val) {
- this.listQuery.page = val;
- this.getList();
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- .box-card {
- overflow: hidden;
- }
- .container {
- padding: 20px;
- }
- .pd-30 {
- padding: 30px 0;
- }
- .filter-container {
- overflow: hidden;
- padding: 10px 0;
- }
- .table-list {
- font-size: 12px;
- }
- </style>
|