gaoyixia-pc/src/views/activity/activity-order-detail.vue

<template>
  <div class="wrap">
    <div class="wrap-content">
      <div class="back" @click="$router.back()">
        <img src="@/assets/icon/back.png" /><span>返回</span>
      </div>
      <div class="header card" v-if="order_type.value">
        <div class="left">
          <div class="type">
            <img
              class="icon"
              :src="require(`@/assets/icon/activity_${order_type.icon}.png`)"
              alt=""
            />
            <span>{{ order_type.value }}</span>
          </div>
          <div class="time" v-if="order_type.value == '待付款'">
            剩余付款时间：{{ leave_time }}
          </div>
        </div>
        <div class="btn-list">
          <div
            class="btn"
            v-for="btn in order_type.btn_list"
            :class="[btn_list_all.find((item) => item.label == btn).type]"
            @click.stop="btn_list_all.find((item) => item.label == btn).click()"
          >
            {{ btn }}
          </div>
        </div>
      </div>
      <div class="ticket-info card">
        <div class="ticket-title">门票信息</div>
        <div class="ticket-list">
          <div class="ticket-item" v-for="item in info.item_list">
            <div class="title">
              {{ item.ladder_title }} 第{{ item.code }}张参会信息
            </div>
            <div class="line"></div>
            <div class="name">
              <span>{{ item.name }}</span>
              <span
                class="mark"
                v-if="order_type.value == '已支付'"
                :style="{
                  background: mark_list.find((i) => i.value == item.sh_status)
                    .color,
                }"
                >{{
                  mark_list.find((i) => i.value == item.sh_status).label
                }}</span
              >
            </div>
            <div class="phone">
              手机号：+{{ item.phone_pre }} {{ item.phone }}
            </div>
            <div class="email">邮箱：{{ item.email }}</div>
          </div>
        </div>
      </div>
      <div class="position-right">
        <div class="activity-info card" @click="jumpActivityDetail">
          <div class="card-title">活动信息</div>
          <div class="activity-title">{{ info.title }}</div>
          <div class="activity-time">
            时间：{{ info.start_time }}-{{ info.end_time }}
          </div>
          <div class="activity-place">
            地址：{{ info.province }}{{ info.city }}{{ info.county
            }}{{ info.address }}
          </div>
          <div class="activity-price">
            <div class="label">订单总额</div>
            <div class="price">¥{{ info.money }}</div>
          </div>
        </div>
        <div class="order-info card">
          <div class="card-title">订单信息</div>
          <div class="order-item">
            <div class="label">订单编号</div>
            <div class="value">
              <span>{{ info.order_no }}</span>
              <img
                class="icon"
                src="@/assets/icon/copy.png"
                @click="handleCopy(info.order_no)"
              />
            </div>
          </div>
          <div class="order-item">
            <div class="label">下单时间</div>
            <div class="value">{{ info.create_at }}</div>
          </div>
        </div>
      </div>
      <PaymentWindowWX
        ref="PaymentWindowWX"
        :default_time="300"
        :price="info.money"
        :wx_code_url="wx_code_url"
        @close="wxClose"
      />
      <div class="select-pay-type">
        <el-dialog
          width="450px"
          top="35vh"
          v-if="pay_select_visible"
          :visible.sync="pay_select_visible"
        >
          <div class="pay-method">
            <div class="pay-title">选择支付方式</div>
            <div class="check">
              <div
                class="item"
                :class="{ select: pay_params.pay_type == 7 }"
                @click="pay_params.pay_type = 7"
              >
                <img src="@/assets/icon/pay-ZFB.png" alt="" />
                <span>支付宝</span>
                <div class="mark">
                  <i class="el-icon-check"></i>
                </div>
              </div>
              <div
                class="item"
                :class="{ select: pay_params.pay_type == 6 }"
                @click="pay_params.pay_type = 6"
              >
                <img src="@/assets/icon/pay-WX.png" alt="" />
                <span>微信支付</span>
                <div class="mark">
                  <i class="el-icon-check"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="pay-btn" @click="payOrder">去付款</div>
        </el-dialog>
      </div>
      <div class="pay-info">
        <el-dialog
          width="450px"
          top="35vh"
          v-if="pay_info_visible"
          :visible.sync="pay_info_visible"
        >
          <div class="info-item">
            <div class="label">支付户名</div>
            <div class="value" @click="handleCopy(info.offline_user)">
              {{ info.offline_user }}
            </div>
          </div>
          <div class="info-item">
            <div class="label">支付开户行</div>
            <div class="value" @click="handleCopy(info.offline_bank)">
              {{ info.offline_bank }}
            </div>
          </div>
          <div class="info-item">
            <div class="label">支付账号</div>
            <div class="value" @click="handleCopy(info.offline_card)">
              {{ info.offline_card }}
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import PaymentWindowWX from "@/components/module/payment-window-wx.vue";
import { ActivityService } from "@/common/service";
import { copy } from "@/common/util";
export default {
  components: { PaymentWindowWX },
  data() {
    return {
      info: {},
      time: 0,
      mark_list: [
        {
          value: 0,
          label: "待审核",
          color: "#FFAE18",
        },
        {
          value: 1,
          label: "审核成功",
          color: "#34C759",
        },
        {
          value: 2,
          label: "审核失败",
          color: "#FF5143",
        },
      ],
      wx_code_url: "", // 微信支付二维码
      orderWatch: () => {}, // 订单监听
      pay_select_visible: false, // 支付弹窗
      pay_params: {
        // 支付参数
        pay_type: 7, // 6 微信pc 7 pc支付宝
        order_id: 0,
      },
      pay_info_visible: false, // 查看支付信息
    };
  },
  computed: {
    order_type() {
      const label = {
        value: "",
        icon: "",
        btn_list: [],
      };
      let type = 0;
      if (this.info.money && !Number(this.info.money)) {
        type = 3; // 免费订单
      } else {
        if (this.info.pay_type < 8 && this.info.pay_type > 0) {
          type = 1; // 线上订单
        } else if (this.info.pay_type == 9) {
          type = 2; // 线下订单
        }
      }

      if (type == 1) {
        if (this.info.pay_state == 0 && this.info.cancel_state == 0) {
          label.value = "待支付";
          label.icon = "time";
          label.btn_list = [
            this.info.bill_info ? "查看发票" : "",
            "取消订单",
            "立即支付",
          ].filter((item) => item);
        } else if (
          this.info.pay_state == 1 &&
          this.info.cancel_state == 0 &&
          this.info.refund_state == 0
        ) {
          label.value = "已支付";
          label.icon = "success";
          label.btn_list = [
            this.info.bill_info ? "查看发票" : "申请开票",
            "申请退款",
          ];
        } else if (
          /* this.info.pay_type == 1 && */ this.info.refund_state > 0 &&
          this.info.cancel_state == 0
        ) {
          switch (this.info.refund_state) {
            case 0:
              break;
            case 1:
            case 2:
              label.value = "退款中";
              label.icon = "more";
              label.btn_list = [];
              break;
            case 3:
              break;
            case 4:
              break;
            case 5:
              label.value = "已退款";
              label.icon = "success";
              label.btn_list = ["删除订单"];
              break;

            default:
              break;
          }
        } else if (this.info.cancel_state == 1) {
          label.value = "已取消";
          label.icon = "info";
          label.btn_list = ["删除订单"];
        }
      } else if (type == 2) {
        if (this.info.pay_state == 0 && this.info.cancel_state == 0) {
          label.value = "等待付款";
          label.icon = "time";
          label.btn_list = [
            this.info.bill_info ? "查看发票" : "",
            "取消订单",
            "查看支付信息",
          ].filter((item) => item);
        } else if (
          this.info.pay_state == 1 &&
          this.info.cancel_state == 0 &&
          this.info.refund_state == 0
        ) {
          label.value = "已支付";
          label.icon = "success";
          label.btn_list = [
            this.info.bill_info ? "查看发票" : "申请开票",
            "申请退款",
          ];
        } else if (
          /*this.info.pay_type == 1 &&*/ this.info.refund_state > 0 &&
          this.info.cancel_state == 0
        ) {
          switch (this.info.refund_state) {
            case 0:
              break;
            case 1:
            case 2:
              label.value = "退款中";
              label.icon = "more";
              label.btn_list = [];
              break;
            case 3:
              break;
            case 4:
              break;
            case 5:
              label.value = "已退款";
              label.icon = "success";
              label.btn_list = ["删除订单"];
              break;
            default:
              break;
          }
        } else if (this.info.cancel_state == 1) {
          label.value = "已取消";
          label.icon = "info";
          label.btn_list = ["删除订单"];
        }
      } else if (type == 3) {
        label.value = "已报名";
        label.icon = "success";
        label.btn_list = [];
      }
      return label;
    },
    btn_list_all() {
      const that = this;
      return [
        {
          label: "立即支付",
          type: "confirm_fill",
          click() {
            that.handlePay();
          },
        },
        {
          label: "查看支付信息",
          type: "confirm_fill",
          click() {
            that.handleViewPayInfo();
          },
        },
        {
          label: "申请退款",
          type: "confirm",
          click() {
            that.handleRefund();
          },
        },
        {
          label: "申请开票",
          type: "cancel",
          click() {
            that.handleApplyInvoice();
          },
        },
        {
          label: "查看发票",
          type: "cancel",
          click() {
            that.handleInvoiceDetail();
          },
        },
        {
          label: "删除订单",
          type: "cancel",
          click() {
            that.handleDelete();
          },
        },
        {
          label: "取消订单",
          type: "cancel",
          click() {
            that.handleCancel();
          },
        },
      ];
    },

    leave_time() {
      return this.time > 1000
        ? `${((Math.floor(this.time / 1000 / 60 / 60) % 24) + "").padStart(
            2,
            "0"
          )}:${(Math.floor((this.time / 1000 / 60) % 60) + "").padStart(
            2,
            "0"
          )}:${(Math.floor((this.time / 1000) % 60) + "").padStart(2, "0")}`
        : "00:00:00";
    },
  },
  mounted() {
    const query = this.$route.query;
    this.info.id = query.id;
    query.id ? this.getOrderDetail() : "";
  },
  methods: {
    // 获取订单详情
    getOrderDetail() {
      ActivityService.getApplyInfo({ id: this.info.id }).then(({ data }) => {
        this.info = data.detail;
        this.time =
          new Date(this.info.create_at).getTime() +
          60000 * 5 /* 五分钟 */ -
          new Date().getTime();
        this.setTime();
      });
    },
    //跳转活动详情
    jumpActivityDetail() {
      this.$router.push({
        path: "/activity-detail",
        query: { id: this.info.act_id },
      });
    },
    // 设置剩余时间
    setTime() {
      setTimeout(() => {
        if (this.time > 1000) {
          this.time -= 1000;
          this.setTime();
        } else {
          this.time = 0;
        }
      }, 1000);
    },
    // 复制订单号
    handleCopy(value) {
      copy(value);
      this.$message.success("复制成功");
    },
    // 监听订单状态
    watchOrderState(order_id) {
      this.getOrderState(order_id).then(({ data }) => {
        if (!data.detail.pay_state) {
          this.orderWatch = setTimeout(
            (_) => this.watchOrderState(order_id),
            3000
          );
        } else {
          this.$message.success("支付成功！");
          setTimeout((_) => {
            this.$refs.PaymentWindowWX.hide();
          }, 1000);
        }
      });
    },
    // 关闭微信弹窗
    wxClose() {
      clearTimeout(this.orderWatch);
    },
    // 获取订单状态
    async getOrderState(id) {
      return await ActivityService.getApplyInfo({ id });
    },
    // 支付
    payOrder() {
      ActivityService.payApplyOrder(this.pay_params).then(({ data }) => {
        this.pay_select_visible = false;
        if (this.pay_params.pay_type == 7) {
          const div = document.createElement("div"); // 创建div
          div.innerHTML = data.ali_url; // 将返回的form 放入div
          document.body.appendChild(div);
          div.children.alipaysubmit.submit();
        }
        if (this.pay_params.pay_type == 6) {
          this.wx_code_url = data.code_url;
          this.watchOrderState(this.pay_params.order_id);
          this.$refs.PaymentWindowWX.show();
        }
      });
    },
    // 立即支付
    handlePay() {
      this.pay_params.order_id = this.info.id;
      this.pay_select_visible = true;
    },
    // 查看支付信息
    handleViewPayInfo() {
      this.pay_info_visible = true;
    },
    // 申请开票
    handleApplyInvoice() {
      this.$router.push({
        path: "/activity-invoice-apply",
        query: {
          order_id: this.info.id,
        },
      });
    },
    // 发票详情
    handleInvoiceDetail() {
      this.$router.push({
        path: "/activity-invoice-detail",
        query: {
          order_id: this.info.bill_info.id,
        },
      });
    },
    // 取消订单
    handleCancel() {
      this.showConfirmPopup("该订单下所有门票将要被取消", {
        confirmText: "确定取消",
      })
        .then(() => {
          ActivityService.cancelApplyOrder({ order_id: this.info.id }).then(
            ({ msg }) => {
              that.$message.success(msg);
              this.info.cancel_state = 1;
            }
          );
        })
        .catch((_) => {});
    },
    // 申请退款
    handleRefund() {
      let that = this;
      this.showConfirmPopup("该订单下所有门票将要退款", {
        confirmText: "确定退款",
      })
        .then(() => {
          ActivityService.delApplyOrder({ order_id: this.info.id }).then(
            ({ msg }) => {
              that.$message.success(msg);
              that.info.refund_state = 1;
            }
          );
        })
        .catch((_) => {});
    },
    // 删除订单
    handleDelete() {
      let that = this;
      this.showConfirmPopup("确定要删除该信息？")
        .then(() => {
          ActivityService.delApplyOrder({ order_id: this.info.id }).then(
            ({ msg }) => {
              that.$message.success(msg);
              this.$router.back();
            }
          );
        })
        .catch((_) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  width: calc((100% - 240px));
  // min-width: 1130px;
  .wrap-content {
    width: 70%;
    margin: 0 auto;
    // min-width: 800px;
    .card {
      background-color: white;
      padding: 20px;
      box-sizing: border-box;
      .card-title {
        font-size: 22px;
        font-weight: 500;
        color: #131415;
        padding-bottom: 20px;
        border-bottom: 1px solid #e4e4e4;
      }
    }
    .back {
      width: 90px;
      height: 40px;
      line-height: 50px;
      font-size: 16px;
      font-weight: 400;
      color: #222222;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: white;
      border-radius: 4px;
      cursor: pointer;
      img {
        width: 10px;
        height: 16px;
        margin-right: 5px;
      }
    }
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
      .left {
        .type {
          font-size: 30px;
          font-weight: 500;
          color: #2a63f3;
          display: flex;
          align-items: center;
          .icon {
            width: 34px;
            height: 34px;
            margin-right: 5px;
          }
        }
        .time {
          font-size: 18px;
          font-weight: 500;
          color: #2a63f3;
        }
      }
      .btn-list {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .btn {
          padding: 0 30px;
          height: 54px;
          border-radius: 7px;
          text-align: center;
          line-height: 54px;
          margin-left: 10px;
          font-size: 17px;
          font-weight: 400;
          box-sizing: border-box;
          cursor: pointer;
        }
        .cancel {
          border: 1px solid #979797;
          color: #131415;
        }
        .confirm {
          border: 1px solid #2a63f3;
          color: #2a63f3;
        }
        .confirm_fill {
          background: #2a63f3;
          color: #ffffff;
        }
      }
    }
    .ticket-info {
      margin-top: 20px;
      .ticket-title {
        font-size: 24px;
        font-weight: 500;
        color: #131415;
      }
      .ticket-list {
        padding: 0 15px;
        .ticket-item {
          margin-top: 30px;
          user-select: none;
          .title {
            font-size: 20px;
            font-weight: 500;
            color: #222222;
          }
          .line {
            width: 100%;
            height: 1px;
            background: #cccccc;
            margin: 20px 0 15px;
          }
          .name {
            font-size: 16px;
            font-weight: 500;
            color: #222222;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .mark {
              border-radius: 2px;
              padding: 7px 10px;
              font-size: 10px;
              font-weight: 500;
              color: #ffffff;
            }
          }
          .phone {
            font-size: 13px;
            font-weight: 400;
            color: #222222;
            margin-top: 5px;
          }
          .email {
            font-size: 13px;
            font-weight: 400;
            color: #222222;
            margin-top: 5px;
          }
        }
      }
    }
  }
  .position-right {
    position: fixed;
    top: 150px;
    right: calc((100% - #{$navbarWidth} - 240px) * 0.15 + 240px - 20px - 350px);
    width: 18%;
    .activity-info {
      width: 100%;
      .activity-title {
        font-size: 16px;
        font-weight: 500;
        color: #222222;
        margin-top: 10px;
      }
      .activity-time {
        font-size: 14px;
        font-weight: 400;
        color: #777777;
        margin-top: 5px;
      }
      .activity-place {
        font-size: 14px;
        font-weight: 400;
        color: #777777;
        margin-top: 5px;
      }
      .activity-price {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        .label {
          font-size: 16px;
          font-weight: 500;
          color: #333333;
        }
        .price {
          font-size: 20px;
          font-weight: 400;
          color: #ff3535;
        }
      }
    }
    .order-info {
      width: 100%;
      margin-top: 20px;
      .order-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
        .label {
          font-size: 14px;
          font-weight: 400;
          color: #666666;
        }
        .value {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #222222;
          .icon {
            width: 15px;
            height: 15px;
            margin-left: 5px;
            cursor: pointer;
          }
        }
      }
    }
  }

  @media (max-width: 100rem) {
    .position-right {
      position: absolute;
      top: calc(var(--scrollTop) + 150px);
      left: 1210px;
    }
  }

  .select-pay-type {
    /deep/ .el-dialog__header {
      display: none;
    }
    /deep/ .el-dialog__body {
      padding: 20px 30px;
    }
    .pay-method {
      width: 100%;
      box-sizing: border-box;
      background-color: white;
      .pay-title {
        font-size: 20px;
        font-weight: 500;
        color: #030303;
      }
      .check {
        display: flex;
        align-items: center;
        margin-top: 20px;
        .item {
          width: 150px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #e9e9e9;
          margin-right: 20px;
          cursor: pointer;
          img {
            width: 28px;
            height: 28px;
          }
          span {
            font-size: 18px;
            font-weight: 500;
            color: #333333;
          }
          .mark {
            position: absolute;
            opacity: 0;
          }
        }
        .select {
          border: 1px solid #ff7938;
          position: relative;
          .mark {
            transition: all 0.1s;
            opacity: 1;
            position: absolute;
            bottom: 0;
            right: 0;
            border-top: 12px solid transparent;
            border-left: 12px solid transparent;
            border-right: 12px solid #2a63f3;
            border-bottom: 12px solid #2a63f3;
            i {
              position: absolute;
              color: white;
              font-size: 12px;
              right: -11px;
              bottom: -11px;
            }
          }
        }
      }
    }
    .pay-btn {
      width: 100px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      background: #2a63f3;
      border-radius: 6px;
      font-size: 16px;
      font-weight: 400;
      color: #ffffff;
      margin-top: 20px;
      margin-left: calc(100% - 100px);
      user-select: none;
      cursor: pointer;
    }
  }
  .pay-info {
    /deep/ .el-dialog__header {
      display: none;
    }
    /deep/ .el-dialog__body {
      padding: 20px 30px;
    }
    .info-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10px 0;
      .label {
        font-size: 16px;
        color: black;
        font-weight: 500;
      }
      .value {
        font-size: 16px;
        color: #999999;
        font-weight: 500;
        cursor: pointer;
      }
    }
  }
}
</style>