jhsw_manage/src/views/manage/orderManage/userOrder.vue

<template>
  <div class="record-warp">
    <div class="record-main">
      <div class="search-head">
        <span class="margin_search">支付状态：</span>
        <el-select class="margin_search" v-model="payStatus" placeholder="请选择状态">
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="item in payList"
            :key="item.id"
          ></el-option> </el-select
        >&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="margin_search">渠道结清状态：</span>
        <el-select class="margin_search" v-model="status" placeholder="请选择结清状态">
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="item in statusList"
            :key="item.id"
          ></el-option> </el-select
        >&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="margin_search">渠道：</span>
        <el-select class="margin_search" v-model="channel" placeholder="请选择渠道">
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="item in channelList"
            :key="item.id"
          ></el-option> </el-select
        >&nbsp;&nbsp;&nbsp;&nbsp;
        <span class="margin_search">类型：</span>
        <el-select class="margin_search" v-model="orderType" placeholder="请选择类型">
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="item in orderList"
            :key="item.id"
          ></el-option> </el-select
        >&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button
          type="primary"
          class="margin_search"
          round
          icon="el-icon-search"
          @click="searchTarget"
          >搜索</el-button
        >
        <el-button
          type="info"
          class="margin_search"
          round
          icon="el-icon-delete-solid"
          @click="clearSearch"
          >清空</el-button
        >
        <!-- <el-button type="success" class="add_class" round icon="el-icon-plus" @click="addUser"
                >新增</el-button
              > -->
      </div>

      <div class="table-content">
        <el-table
          :data="tableData"
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '5px' }"
        >
          <!-- <el-table-column prop="channelName" label="渠道" align="center" width="">
                </el-table-column> -->
          <el-table-column prop="orderNo" label="订单号" align="center" width="">
          </el-table-column>
          <el-table-column prop="amount" label="金额" align="center" width="">
          </el-table-column>
          <el-table-column
            prop="payStatus"
            label="支付状态"
            align="center"
            width=""
            :formatter="formatterPay"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="渠道结清状态"
            align="center"
            width=""
            :formatter="formatterStatus"
          >
          </el-table-column>

          <el-table-column
            prop="type"
            label="类型"
            align="center"
            width=""
            :formatter="formatterType"
          >
          </el-table-column>
          <el-table-column
            prop="effectiveDate"
            label="订单起始日期"
            align="center"
            width=""
          >
          </el-table-column>
          <el-table-column
            prop="expirationDate"
            label="订单截至日期"
            align="center"
            width=""
          >
          </el-table-column>
          <!-- <el-table-column
                  prop="selfPage"
                  label="自定义首尾页"
                  align="center"
                  :formatter="formatterSelfPage"
                  width=""
                >
                </el-table-column> -->
          <!-- <el-table-column prop="isDelete" label="删除状态" align="center" :formatter="formatterDelete" width="">
                            </el-table-column> -->
          <el-table-column label="操作" width="200px" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button
                @click="viewUser(scope.row)"
                v-if="scope.row.state != 0"
                type="text"
                size="small"
                >查看</el-button
              >
              <!-- <el-button
                    type="text"
                    size="small"
                    v-if="scope.row.state != 0"
                    @click="editUser(scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    v-if="scope.row.state != 0"
                    @click="viewPoster(scope.row)"
                    >查看海报</el-button
                  > -->
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-pagination
        small
        background
        @current-change="handleCurrentChange"
        :current-page.sync="pageNum"
        layout="total, prev, pager, next"
        :page-size="pageSize"
        :total="total"
      >
      </el-pagination>
      <!-- <el-pagination small background layout="total prev, pager, next" :total="36">
                </el-pagination> -->
    </div>
    <ContractChannelRegister ref="register" @search="searchTarget" />
    <ContractPoster ref="poster" @search="searchTarget" />
    <ContractTopUp ref="topUp" @search="searchTarget" />

    <el-dialog title="查看" :visible.sync="centerDialogVisible" width="60%" center>
      <div>
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div class="user_out">
              <div class="user_out_sub">订单号</div>
              <div class="user_out_subNext">
                {{ detailObj.orderNo }}
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div class="user_out">
              <div class="user_out_sub">金额</div>
              <div class="user_out_subNext">
                {{ detailObj.amount }}
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div class="user_out">
              <div class="user_out_sub">支付状态</div>
              <div class="user_out_subNext">
                <span v-if="detailObj.payStatus == '0'"> 未支付 </span>
                <span v-else-if="(detailObj.payStatus = '1')"> 已支付 </span>
                <span v-else-if="(detailObj.payStatus = '2')"> 支付失败 </span>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div class="user_out">
              <div class="user_out_sub">渠道结清状态</div>
              <div class="user_out_subNext">
                <span v-if="detailObj.status == '1'"> 已结算 </span>
                <span v-else-if="detailObj.status == '0'"> 待结算 </span>

                <span> </span>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div class="user_out">
              <div class="user_out_sub">类型</div>
              <div class="user_out_subNext">
                <!-- {{ detailObj.type }} -->
                <span v-if="detailObj.type == '1'">
                    次卡支付
                </span>
                <span v-else-if="detailObj.type == '2'">
                    时效卡支付
                </span>
                <span v-else-if="detailObj.type == '3'">
                    渠道推荐支付
                </span>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div class="user_out">
              <div class="user_out_sub">下单时间</div>
              <div class="user_out_subNext">
                {{ detailObj.effectiveDate }}
              </div>
            </div>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div class="user_out">
              <div class="user_out_sub">支付时间</div>
              <div class="user_out_subNext">
                {{ detailObj.expirationDate}}
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { oSessionStorage } from "../../../utils/utils";
import contractChannelRegister from "../../../components/ContractChannelRegister.vue";

import contractPoster from "../../../components/ContractPoster.vue";
import contractTopUp from "../../../components/ContractTopUp.vue";
export default {
  name: "channelManagement",
  components: {
    ContractChannelRegister: contractChannelRegister,
    ContractPoster: contractPoster,
  },
  data() {
    return {
      centerDialogVisible: false,
      editUserFlag: false,
      startTime: "",
      endTime: "",
      value1: null,
      total: 0,
      pageSize: 10,
      pageNum: 1,
      keyword: "",
      tableData: [],
      userInfo: {}, //用户信息
      userId: "", //用户id
      name: "", //根据名称搜索
      userName: "", //根据昵称搜索
      hospitalOrDepartment: "", //医院科室

      invitationCode: "",
      roleType: "0",
      type: 0,
      view: {
        name: "",
        userName: "",
        channelId: "",
        role: "",
      },
      detailObj: {},
      channel: "",
      channelList: [{ name: "渠道天成", id: "1" }],
      payStatus: "",
      payList: [
        { name: "未支付", id: "0" },
        { name: "已支付", id: "1" },
        { name: "支付失败", id: "-1" },
      ],
      status: "",
      statusList: [
        { name: "已结算", id: "1" },
        { name: "待结算", id: "0" },
      ],
      orderType: "",
      orderList: [
        { name: "次卡支付", id: "0" },
        { name: "时效卡支付", id: "1" },
        { name: "渠道推荐支付", id: "2" },
      ],
    };
  },
  created() {},
  mounted() {
    this.userInfo = JSON.parse(oSessionStorage.getItem("userInfo"));

    // if (this.userInfo.type == "1") {
    //   this.channel = "";
    // } else if (this.userInfo.type == "0") {
    //   this.channel = this.userInfo.channelId;
    // }
    // this.invitationCode = this.userInfo.invitationCode;
    this.getChannel();

    if (!this.userInfo) {
      //如果用户信息不存在跳转登陆页
      this.$router.push({ path: "/" });
    }
    this.searchTarget();
  },
  methods: {
    //格式化类型
    formatterType(row) {
      if (row.type == "1") {
        return "次卡支付";
      } else if (row.type == "2") {
        return "时效卡";
      } else if (row.type == "3") {
        return "渠道推荐支付";
      }
    },
    //格式化支付
    formatterPay(row) {
      if (row.payStatus == "0") {
        return "未支付";
      } else if (row.payStatus == "1") {
        return "已支付";
      } else if (row.payStatus == "-1") {
        return "支付失败";
      }
    },
    //渠道发生变化
    // changeChannel() {
    //   debugger;
    //   this.getUserInfo();
    //   this.searchTarget();
    // },
    //查看记录
    viewRecord(row) {
      this.$router.push({ path: "/manage/recordList", query: { id: row.id } });
    },
    //充值次数
    topUpCount(row) {
      // console.log(this.$refs.topUp)
      this.$refs.topUp.open(row.id);
    },
    //查看海报
    viewPoster(row) {
      this.$refs.poster.open(row);
    },
    //格式化自定义首尾页
    formatterSelfPage(row) {
      if (row.selfPage == "0") {
        return "否";
      } else {
        return "是";
      }
    },
    //获取员工信息
    getUserInfo() {
      this.$http.get(`/staff/find/${this.channel}`, {}, (res) => {
        //  this.$toast.success({message:'成功'});
        if (res && res.code == 200) {
          debugger;
          //将值赋值给list
          this.userList = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //获取渠道信息
    getChannel() {
      this.$http.get(`/channel/findAll`, {}, (res) => {
        //  this.$toast.success({message:'成功'});
        if (res && res.code == 200) {
          //将值赋值给list
          this.channelList = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //员工管理
    userManage(row) {
      this.$router.push({ path: "/manage/staff", query: { channelId: row.id } });
    },
    //格式化状态
    formatterStatus(row) {
      if (row.status == "1") {
        return "已结算";
      } else if (row.status == "0") {
        return "待结算";
      } else {
        return "";
      }
    },
    formatterDelete(row) {
      if (row.isDelete == 0) {
        return "正常";
      } else {
        return "已删除";
      }
    },
    resetUser(index, val) {
      this.$http.get(`/user/reset/${val.id}`, {}, (res) => {
        //  this.$toast.success({message:'成功'});
        if (res && res.code == 200) {
          this.$message.success("重置成功");
          this.searchTarget();
        } else {
          this.$message.error(res.msg);
        }
      });
      //重置密码
    },
    editUser(row) {
      this.editRegisterUser(row);
    },
    viewUser(row) {
      this.detailObj = row;
      this.centerDialogVisible = true;
    },
    addUser() {
      this.addRegisterUser(true);
    },
    clearSearch() {
      this.channel = "";
      this.status = "";
      this.payStatus = "";
      this.orderType = "";
      this.searchTarget();
    },
    formatterRole(val) {
      if (val.type == "1") {
        return "超级管理员";
      } else {
        return "渠道用户";
      }
    },

    forma(val) {
      if (val.gender == "0") {
        return "男";
      } else {
        return "女";
      }
    },
    addRegisterUser(val) {
      this.$refs.register.open(val);
    },
    editRegisterUser(val) {
      this.$refs.register.edit(val);
    },
    deleteChannel(index, row) {
      this.$http.delete(`/sign/delete/${row.id}`, {}, (res) => {
        //  this.$toast.success({message:'成功'});
        if (res && res.code == 200) {
          this.$message.success("删除成功");
          this.searchTarget();
        } else {
          this.$message.error("删除失败");
        }
      });
    },

    handleCurrentChange(val) {
      this.pageNum = val;
      this.searchList();
    },
    //根据现有情况进行搜索
    searchList() {
      //  let url =``
      let data = {};
      //   this.channel = "";
      //   this.status = "";
      //   this.payStatus = '';
      data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        channelId: this.channel,
        status: this.status,
        payStatus: this.payStatus,
        type: this.orderType,
      };

      this.$http.post(`/order/find`, data, (res) => {
        // console.log(res,'用户测试记录')
        if (res && res.code == 200) {
          this.tableData = res.data.data;
          this.total = res.data.totalElements;
        } else {
          // this.$toast.fail(res.msg);
          this.$message.error(res.msg);
        }
      });
    },
    searchTarget() {
      this.pageNum = 1;
      this.searchList();
    },
    //跳转首页
    goHome() {
      this.$router.push({ path: "/home" });
    },
    //跳转记录页
    goRecord() {
      this.$router.push({ path: "/record" });
    },
    //退出登陆
    logout() {
      oSessionStorage.removeItem("userInfo");
      oSessionStorage.removeItem("token");
      this.$router.push({ path: "/" });
    },
    //点击日历获取日期
    getDate(param) {
      // console.log(param,"日期。。。")
      this.userRecord(param.dateStr);
    },
    //点击获取月出勤次数
    getTimes(param) {
      this.monthTimes = param;
    },
    // 用户测试记录显示
    userRecord(date) {
      this.$http.get(
        `gameRecord/findListByUserIdAndDate/${this.userId}/${date}`,
        {},
        (res) => {
          // console.log(res,'用户测试记录')
          if (res && res.code == 200) {
            this.listData = res.data;
          } else {
            this.$toast.fail(res.msg);
          }
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../../styles/theme.less";

.record-warp {
  width: 100%;
  height: 80vh;
  //background: url(../../assets/img/index/19.png) no-repeat center;
  //background-size: 100% 100%;
  position: relative;

  .record-main {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;

    .search-head {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      align-content: space-between;
      .margin_search {
        margin-bottom: 10px;
      }
      .zc-title {
        color: #606266;
        font-size: 14px;
      }
    }

    .table-content {
      margin: 10px 0;
    }
  }
}

.add_user_class {
  margin-top: 10px;
}

.user_out {
  display: flex;
  width: 100%;
  align-items: center;
  border: 1px solid #eeeeef;
  line-height: 50px;
  margin-top: 10px;
}

.user_out_sub {
  flex: 1;
  background-color: #fafafa;
  text-align: center;
  // color:#ffffff
}

.user_out_subNext {
  padding-left: 10px;
  flex: 3;
}
</style>