saas_pc/src/pages/person-center/handle-order/order/step-2/index.vue

<template>
  <div id="">
    <el-main v-loading="loading" style="padding:0px 14px;">
      <h2>
        <span style="font-size:16px;">订单详情</span>
        <el-button type="text" @click="orderSee">查看</el-button>
      </h2>
      <ul class="ul_">
        <li>
          商品类型：<span>{{
            orderInfo.goodsType == 1
              ? "课程"
              : orderInfo.goodsType == 2
              ? "题库"
              : ""
          }}</span>
        </li>
        <li>
          教育类型：<span>{{ orderInfo.educationName }}</span
          >项目类型：<span
            >{{ orderInfo.projectName }}-{{ orderInfo.businessName }}</span
          >
          订购人数：<span>{{ orderInfo.userNum || 0 }}位</span>
          <!-- 订购数量：<span
            >{{ orderInfo.goodsNum || 0 }}个</span
          > -->
        </li>
        <li>
          订购金额：<span style="color:red;"
            >￥{{ orderInfo.orderPrice | formatPrice }}</span
          >
        </li>
      </ul>
    </el-main>
    <el-divider></el-divider>
    <el-main style="padding:0px 14px;">
      <h2 style="margin-bottom:14px;">
        <span style="font-size:16px;">支付方式</span
        ><span style="font-size:14px;color:#7f7f7f;font-weight:400;"
          >（订单在<el-statistic
            v-if="orderInfo.overTime"
            @finish="orderHilarity"
            format="DD天HH小时mm分ss秒"
            :value="orderInfo.overTime * 1000"
            time-indices
          >
          </el-statistic
          >后将自动关闭，请尽快完成支付）</span
        >
      </h2>
      <div class="pay_box">
        <div class="li li_l">
          <img
            v-if="!imgData.urlBase64"
            src="@/assets/qrcode.png"
            alt=""
            @click="updateImg"
          />
          <img v-else :src="imgData.urlBase64" alt="" />
          <div class="p_r">
            <div style="color:#333;font-weight:bold;font-size:16px;">
              在线支付<el-tag
                type="warning"
                effect="dark"
                size="mini"
                style="margin-left:6px;"
              >
                推荐
              </el-tag>
            </div>
            <div class="wx_a">
              <img src="@/assets/wxpay.png" alt="" />
            </div>
            <div>
              <span style="font-size:16px;">应付金额：</span
              ><span style="color:red;font-size:20px;font-weight:bold;">
                <span style="font-size:14px;">￥</span
                >{{ orderInfo.payPrice | formatPrice }}</span
              >
            </div>
            <div style="font-size:16px;">
              支付码有效时间<el-statistic
                v-if="imgData.overTime"
                @finish="hilarity"
                format="mm分ss秒"
                :value="imgData.overTime * 1000"
                time-indices
              >
              </el-statistic>
            </div>
          </div>
        </div>
        <div class="fgx"></div>
        <div class="li li_2">
          <div class="li_2_s">
            <div class="top_zz">
              <img src="@/assets/dgzz.png" alt="" />
              <div class="zz_r">
                <h2>对公转账</h2>
                <p>
                  请在订单关闭前，完成对公转账并且提交公司信
                  息及付款回执。(到账后 1 个工作日内开通)
                </p>
              </div>
            </div>
            <el-button @click="publictransferFunc">选择对公转账</el-button>
          </div>
        </div>
      </div>
    </el-main>
    <public-transfer ref="publicTransfer" @backFunc="backFuncTransfer" />
    <order-detail ref="orderDetail" />
  </div>
</template>

<script>
import orderDetail from "../../orderDetail.vue";
import publicTransfer from "./publicTransfer.vue";
export default {
  components: { publicTransfer,orderDetail },
  data() {
    return {
      orderInfo: {},
      imgData: {},
      loading: false,
      handleOrderSn: "",
      updateWxImg: null
    };
  },
  mounted() {},
  methods: {
    orderSee() {
      this.$refs.orderDetail.openBoxs(this.handleOrderSn);
    },
    //订单过期
    orderHilarity() {
      //1过期2已支付
      this.$emit("backFunc", 1);
    },
    //更新wx二维码
    updateImg() {
      this.getWxPayData();
    },
    //wx过期
    hilarity() {
      this.imgData.urlBase64 = "";
    },
    backFuncTransfer() {
      this.getOrderData();
    },
    publictransferFunc() {
      this.$refs.publicTransfer.openBoxs(this.handleOrderSn);
    },
    comeFunc(data) {
      this.handleOrderSn = data;
      this.getOrderData();
    },
    getOrderData(status) {
      this.loading = status ? false : true;
      this.$request
        .orderhandledetail({ handleOrderSn: this.handleOrderSn })
        .then(res => {
          this.orderInfo = res.data;
          if (res.data.payStatus == 0) {
            if (status) return;
            this.getWxPayData();
            this.updateWxImg = setInterval(() => {
              this.getOrderData(true);
            }, 1500);
          } else {
            clearInterval(this.updateWxImg);
            this.$emit("backFunc", 3, res.data.payStatus);
            this.$refs.publicTransfer.visible = false;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getWxPayData() {
      this.$request
        .orderhandleresumePay({
          payType: 1,
          handleOrderSn: this.handleOrderSn
        })
        .then(res => {
          this.imgData = res.data || {};
        })
        .catch(() => {
          this.imgData = {};
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.ul_ {
  background-color: #f9fafb;
  padding: 20px;
  li {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0px;
    }
    span {
      color: #000;
      margin-right: 20px;
    }
  }
}
.pay_box {
  display: flex;
  .li {
    flex: 1;
    display: flex;
    &:first-child {
      display: flex;
      & > img {
        width: 145px;
        height: 145px;
        padding: 4px;
        border: 1px solid #eee;
        border-radius: 8px;
        margin-right: 20px;
      }
      & > .p_r {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
  }
  .li_2 {
    justify-content: center;
  }
  .li_2_s {
    width: 366px;
    & > .top_zz {
      display: flex;
      margin-bottom: 30px;
      & > img {
        margin-right: 10px;
        width: 52px;
        height: 52px;
        background-color: #eee;
      }
      & > .zz_r {
        flex: 1;
        & > h2 {
          font-size: 16px;
          color: #333;
          margin-bottom: 4px;
        }
        & > p {
          line-height: 24px;
        }
      }
    }
    & > .el-button {
      width: 100%;
    }
  }
  .fgx {
    margin: 0px 20px;
    width: 1px;
    background-color: #eee;
  }
}
.wx_a {
  & > img {
    width: 113.4px;
    height: 36px;
  }
}
/deep/ .el-statistic {
  width: auto;
  display: inline-block;
  .con {
    & > .number {
      font-size: 14px;
      color: #007aff;
    }
  }
}
</style>