index.vue

<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>