pad_spa/src/pages/customerMan/myOrder/index.vue

<template>
  <div class="order">
    <div class="warp">
      <el-tabs type="border-card" @tab-click="changeTab" v-model="activeName">
        <el-tab-pane label="项目订单" name="first">
          <div class="user-list">
            <el-table
              ref="multipleTable"
              :data="projectData"
              tooltip-effect="dark"
              height="354"
              style="width: 100%; border-radius: 8px"
              @row-click="handleSelectionChange"
            >
              <el-table-column prop="goods" label="项目名称" width="200">
                <template slot-scope="scope">
                  <div v-for="(val, index) in scope.row.goods" :key="index">
                    <div>{{ val.name }}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="goods" label="数量" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div>{{ scope.row.goods.length }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="price"
                label="总价格"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="order_time"
                label="预约时间"
                width="180"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="store_name"
                label="预约店铺"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column prop="status" label="状态" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div :class="'color' + scope.row.status">
                    {{
                      scope.row.status != 5
                        ? statusStr[scope.row.status]
                        : statusStr[statusStr.length - 1]
                    }}
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <div class="pagin">
              <el-pagination
                background
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage1"
                :total="total"
              ></el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="次卡订单" name="second">
          <div class="user-list">
            <el-table
              ref="multipleTable"
              :data="cardListData"
              tooltip-effect="dark"
              height="354"
              @row-click="openDetail"
              style="width: 100%; border-radius: 8px"
            >
              <el-table-column prop="card_name" label="卡券名称" width="200">
                <template slot-scope="scope">
                  <div>{{ scope.row.card_name | ellipsis(8) }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="total_num"
                label="总次数"
                show-overflow-tooltip
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="num"
                label="剩余次数"
                show-overflow-tooltip
                align="center"
              ></el-table-column>
              <el-table-column
                prop="used_num"
                label="已用次数"
                width="180"
                show-overflow-tooltip
                align="center"
              ></el-table-column>
              <el-table-column
                prop="expir_time"
                label="过期时间"
                width="180"
                show-overflow-tooltip
              >
                <template slot-scope="{ row }">
                  <div class="expir_time" @click.stop="amendCardTime(row)">
                    {{ row.expir_time }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="create_time"
                label="创建时间"
                width="180"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column prop="status" label="状态" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div :class="'color' + scope.row.status">
                    {{
                      scope.row.status == -1
                        ? "已过期"
                        : scope.row.status == -0
                        ? "已使用"
                        : "待使用"
                    }}
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <div class="pagin">
              <el-pagination
                background
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage1"
                :total="total"
              ></el-pagination>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="商品订单" name="third">
          <div class="user-list">
            <el-table
              ref="multipleTable"
              :data="goodData"
              tooltip-effect="dark"
              height="354"
              style="width: 100%; border-radius: 8px"
            >
              <!-- create_time: "2022-03-19 22:53:40"
goods: [{order_id: 47, name: "润百颜玻尿酸屏障调理面膜", num: 1}]
id: 47
price: "0.01"
status: 5 -->

              <el-table-column prop="goods" label="商品名称" width="200">
                <template slot-scope="scope">
                  <div v-for="(val, index) in scope.row.goods" :key="index">
                    <div>{{ val.name }}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="goods" label="数量" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div>{{ scope.row.goods.length }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="price"
                label="实付款"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="create_time"
                label="下单时间"
                width="180"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column prop="status" label="状态" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div :class="'classShow' + scope.$index">
                    <!-- {{
                      scope.row.status == 1 || scope.row.status == 2
                        ? goodStatus[scope.row.status]
                        : goodStatus[goodStatus.length - 1]
                    }} -->
                    {{
                      scope.row.status == 2 || scope.row.status == 3
                        ? "已取货"
                        : scope.row.status == 0
                        ? "未支付"
                        : scope.row.status == 1
                        ? "待取货"
                        : "已取消"
                    }}
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <div class="pagin">
              <el-pagination
                background
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage1"
                :total="total"
              ></el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="优惠券" name="fourth">
          <div class="user-list">
            <el-table
              ref="multipleTable"
              :data="couponData"
              tooltip-effect="dark"
              height="354"
              style="width: 100%; border-radius: 8px"
            >
              <!-- create_time: "2022-03-10 10:39:19"
ex_time: "2022.03.17 23:59"
id: 2517
name: "新人体验券"
status: 2
type: "全额券" -->

              <el-table-column
                prop="name"
                label="卡卷名称"
                width="200"
              ></el-table-column>
              <el-table-column
                prop="type"
                label="卡卷类型"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="price"
                label="总价格"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="ex_time"
                label="到期时间"
                width="180"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="create_time"
                label="创建时间"
                width="180"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column prop="status" label="状态" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div :class="'color' + scope.row.status">
                    {{ couponStatus[scope.row.status] }}
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <div class="pagin">
              <el-pagination
                background
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage1"
                :total="total"
              ></el-pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 次卡详情 -->
    <mine-pupop :show="isPore">
      <div class="pore-block">
        <div class="delete-pupop" @click="isPore = false">
          <img
            src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
            alt
          />
        </div>
        <div class="pore-content">
          <div class="card-title">订单详情</div>
          <div class="project">
            <div class="project-title">项目名称：</div>
            <div class="project-list">
              <div
                class="project-info"
                v-for="(item, index) in cardInfo.project_list"
                :key="index"
              >
                <div class="name-text">{{ item.project_name }}</div>
                <div class="change-num">
                  <div class="num-content">
                    <div class="content-left" @click="reduce(index)">-</div>
                    <div class="content-num">{{ item.num || 0 }}</div>
                    <div class="content-right" @click="item.num++">+</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="common">
            <span class="common-title">支付方式：</span
            ><span>{{ cardInfo.pay_way }}</span>
          </div>
          <div class="common">
            <span class="common-title">有效期限：</span
            ><span>{{ cardInfo.ex_time }}</span>
          </div>
          <div class="common">
            <span class="common-title">实付金额：</span
            ><span>￥{{ cardInfo.price }}</span>
          </div>
          <div class="consume-list">
            <div class="consume-title">消耗信息：</div>
            <div
              class="consume-info min-size"
              v-for="(item, index) in cardLogList"
              :key="index"
            >
              <div class="shop">{{ item.store_name }}</div>
              <div class="project-tips">{{ item.remark }}</div>
              <div class="project-ts">{{ item.create_time }}</div>
            </div>
          </div>
        </div>
        <div class="confirm" @click="confirm">确定</div>
      </div>
    </mine-pupop>
    <!-- 修改次卡时间 -->
    <mine-pupop :show="isAmend">
      <div class="amendTime">
        <div class="image">
          <img
            src="https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/icon/slices/delete.png"
            alt
            @click="closeAmend"
          />
        </div>
        <div class="admendTime-content">
          <div class="oldTime">
            次卡过期时间 :<span> {{ amendCardInfo.expir_time }}</span>
          </div>
          <div class="newTime">
            选择更改日期:
            <el-date-picker
              class="date"
              v-model="cardTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              @focus="forbid"
            >
            </el-date-picker>
          </div>
          <div class="radio">
            <button class="cancelBtn" @click="cancel">取消</button>
            <button class="affirmBtn" @click="affirm">确定</button>
          </div>
        </div>
      </div>
    </mine-pupop>
  </div>
</template>

<script>
import api from "../../../server/home";
import minePupop from "../../../components/minePupop/index.vue";

export default {
  components: {
    minePupop,
  },
  data() {
    return {
      couponList: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
      ],
      tableData: [
        {
          date: "2022.04.25  14:30",
          name: "滴滴滴",
          headImg:
            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png",
          phone: "13346783645",
          numberList: 2,
          price: 100,
          shop: "运用店",
          status: 2,
        },
        {
          date: "2022.04.25  14:30",
          name: "滴滴滴",
          headImg:
            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png",
          phone: "13346783645",
          numberList: 5,
          price: 800,
          shop: "武昌店",
          status: 1,
        },
      ],
      statusStr: ["未支付", "待使用", "正在使用", "已结算", "已取消"],
      couponStatus: ["待使用", "已使用", "已过期"],
      goodStatus: ["未支付", "已支付", "已取货"],
      activeName: "first",
      currentPage1: 1,
      couponData: [],
      goodData: [],
      projectData: [],
      cardOrderData: [],
      total: 100,
      limit: 10,
      isPore: false,
      cardInfo: {}, //订单详情
      cardLogList: [], //次卡消耗记录
      cardListData: [], //用户次卡列表
      isAmend: false, //修改次卡时间弹窗
      amendCardInfo: "", // 要修改次卡的信息
      cardTime: "", //次卡修改时间(年月日)
    };
  },
  computed: {},
  watch: {},

  methods: {
    // 阻止修改次卡时间时键盘弹出
    forbid() {
      //禁止软键盘弹出
      document.activeElement.blur();
    },
    // 修改次卡时间取消
    cancel() {
      this.isAmend = false;
      this.cardTime = "";
    },
    // 修改次卡时间确定
    affirm() {
      this.amendCardTimeApi();
    },
    // 修改次卡时间
    amendCardTime(e) {
      this.isAmend = true;
      this.amendCardInfo = e;
      console.log(e);
    },
    // 关闭修改次卡时间弹窗
    closeAmend() {
      this.isAmend = false;
      this.cardTime = "";
    },
    // 发起修改次卡订单请求
    amendCardTimeApi() {
      api
        .amendCardTime({
          id: this.amendCardInfo.id,
          expire_date: this.cardTime,
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.isAmend = false;
            // 更新次卡列表
            this.getCardList();
          }
        });
    },
    // 获取优惠券订单
    getUserCoupon() {
      let params = {
        page: this.currentPage1,
        limit: this.limit,
        id: this.id,
      };
      api.getUserCoupon(params).then((res) => {
        this.couponData = res.data.list;
        this.total = res.data.total;
      });
    },
    reduce(index) {
      this.cardInfo.project_list[index].num--;
      if (this.cardInfo.project_list[index].num < 0) {
        this.cardInfo.project_list[index].num = 0;
      }
    },
    //次卡订单详情
    openDetail(row, column, event) {
      this.isPore = true;
      api.cardInfo({ id: row.id }).then((res) => {
        if (res.code == 200) {
          this.cardInfo = res.data;
        }
      });
      api.cardLog({ id: row.id }).then((res) => {
        if (res.code == 200) {
          this.cardLogList = res.data.list;
        }
      });
    },
    confirm() {
      // 项目ID，json字符，格式如：[{"project_id":"10","num":5}]，project_id：适用项目ID，num：剩余次数
      let project_data = [],
        project_info = {};
      this.cardInfo.project_list.forEach((res) => {
        project_info = {
          project_id: res.id,
          num: res.num,
        };
        project_data.push(project_info);
      });
      api
        .cardUpdate({
          id: this.cardInfo.id,
          project_data: JSON.stringify(project_data),
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("更改成功！");
            this.isPore = false;
          }
        });
    },

    // 获取商品订单
    getUserGoods() {
      let params = {
        page: this.currentPage1,
        limit: this.limit,
        id: this.id,
      };
      api.getUserGoods(params).then((res) => {
        this.goodData = res.data.list;
        this.total = res.data.total;
      });
    },

    // 获取获取项目订单
    getUserProject() {
      let params = {
        page: this.currentPage1,
        limit: this.limit,
        id: this.id,
      };
      api.getUserProject(params).then((res) => {
        this.projectData = res.data.list;
        this.total = res.data.total;
      });
    },

    // 获取卡券订单
    // async getCardOrders() {
    //   let params = {
    //     page: this.currentPage1,
    //     limit: this.limit,
    //     id: this.id,
    //   };
    //   let resp = await api.getCardOrders(params);
    //   if (resp.code === 200) {
    //     console.log(resp, "adadasdasdadsadsadasd");
    //     this.cardOrderData = resp.data.list;
    //     this.total = resp.data.total;
    //   }
    // },
    //获取用户次卡列表
    async getCardList() {
      let params = {
        page: this.currentPage1,
        limit: this.limit,
        id: this.id,
      };
      let resp = await api.getCardList(params);
      if (resp.code === 200) {
        console.log(resp, "asdasdasd");
        this.cardListData = resp.data.list;
        this.total = resp.data.total;
      }
    },
    handleCurrentChange(val) {
      this.currentPage1 = val;
      if (this.activeName == "first") {
        this.getUserProject();
      } else if (this.activeName == "second") {
        // this.getCardOrders();
        this.getCardList();
      } else if (this.activeName == "third") {
        this.getUserGoods();
      } else if (this.activeName == "fourth") {
        this.getUserCoupon();
      }
    },
    handleSelectionChange(row, column, event) {
      this.$router.push({
        path: "/historicalOrder/details",
        query: {
          id: row.id,
        },
      });
    },
    onSubmit() {},
    submitFrequency() {},
    changeTab(e) {
      this.currentPage1 = 1;
      if (e.index == 0) {
        this.getUserProject();
      } else if (e.index == 1) {
        // this.getCardOrders();
        this.getCardList();
      } else if (e.index == 2) {
        this.getUserGoods();
      } else if (e.index == 3) {
        this.getUserCoupon();
      }
    },
  },

  created() {
    let id = this.$route.query.id;
    let activeName = this.$route.query.activeName;
    this.activeName = activeName;
    this.id = id;
    if (this.activeName == "first") {
      this.getUserProject();
    } else if (this.activeName == "second") {
      // this.getCardOrders();
      this.getCardList();
    } else if (this.activeName == "third") {
      this.getUserGoods();
    } else if (this.activeName == "fourth") {
      this.getUserCoupon();
    }
  },

  mounted() {},
};
</script>

<style lang='less' scoped>
.order {
  height: 100%;
  width: 100%;
  .pagin {
    padding: 20px 0;
    .el-pagination {
      text-align: center;
    }
  }
  .colorList {
    color: green;
  }
}
.color0 {
  color: #fc3019;
}
.color1 {
  color: #3ef3ed;
}
.color2 {
  color: #00eeee;
}
.color3 {
  color: #61d09d;
}
.color4 {
  color: #3115cc;
}
.color5 {
  color: #fc3019;
}
.color6 {
  color: #a999ea;
}

.priceColor {
  color: #ff3007;
}
.pore-block {
  width: 540px;
  height: 400px;
  background: #ffffff;
  border-radius: 8px;
  position: relative;
  padding: 26px 72px 80px 30px;
  .delete-pupop {
    width: 32px;
    position: absolute;
    right: 5px;
    top: 5px;
    img {
      width: 100%;
    }
  }
  .pore-content {
    overflow: scroll;
    height: 310px;
    .card-title {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 20px;
      text-align: center;
    }
    .project {
      display: flex;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 18px;
      .project-title {
        color: #999999;
      }
      .project-list {
        flex: 1;
        .project-info {
          flex: 1;
          .change-num {
            margin-top: 6px;
            width: 100%;
            display: flex;
            justify-content: end;
            .num-content {
              width: 104px;
              height: 28px;
              background: #ffffff;
              border-radius: 2px;
              border: 1px solid #fa7d22;
              display: flex;
              align-items: center;

              .content-left,
              .content-right {
                width: 28px;
                height: 100%;
                background: #fa7d22;
                font-size: 20px;
                line-height: 24px;
                color: #ffffff;
                text-align: center;
              }
              .content-num {
                flex: 1;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.65);
                text-align: center;
              }
            }
          }
        }
      }
    }
    .common {
      margin-top: 6px;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 18px;
      .common-title {
        color: #999999;
      }
    }
    .consume-list {
      margin-top: 6px;
      .consume-title {
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 18px;
      }
      .consume-info {
        margin-top: 6px;
        font-size: 10px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 14px;
        display: flex;
        justify-content: space-between;
        .shop {
        }
        .project-tips {
          flex: 1;
          margin: 0 10px;
        }
        .project-ts {
        }
      }
    }
  }
  .confirm {
    background: #fa7d22;
    border-radius: 14px;
    position: absolute;
    bottom: 42px;
    left: 50%;
    transform: translateX(-50%);
    width: 176px;
    height: 28px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 28px;
    text-align: center;
  }
}
// 修改次卡时间
.amendTime {
  width: 440px;
  height: 300px;
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
  .image {
    height: 30px;
    width: 30px;
    img {
      width: 100%;
    }
  }
  .oldTime {
    color: #333;
    margin-left: 20px;
    margin-top: 30px;
    span {
      margin-left: 20px;
    }
  }
  .newTime {
    margin-left: 20px;
    margin-top: 10px;
    .time {
      margin-top: 20px;
      margin-left: 110px;
    }
    .date {
      margin-top: 20px;
      margin-left: 20px;
    }
  }
  .radio {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    button {
      width: 176px;
      height: 28px;
      border-radius: 14px;
      background-color: #fff;
      border: none;
      margin-top: 90px;
    }
    .cancelBtn {
      border: 1px solid #fa7d22;
      color: #fa7d22;
    }
    .affirmBtn {
      background-color: #fa7d22;
      color: #fff;
      margin-left: 15px;
    }
  }
}
.expir_time {
  color: #3115cc;
}
</style>