heyujie
2022-07-15 a0b5604fcefa0c7900ecc50830b718f77bba8f39
src/views/productDetail/components/ConfirmOrder.vue
@@ -30,13 +30,13 @@
                    >{{ item + " " }}</span
                  >
                </p>
                <p>
                <p v-if="scope.row.ChCount">
                  通道数量:
                  <span>{{ scope.row.chCount || 0 }}</span>
                  <span>{{ scope.row.ChCount }}</span>
                </p>
                <p>
                <p v-if="scope.row.authCount">
                  授权数量:
                  <span>{{ scope.row.authCount || 0 }}</span>
                  <span>{{ scope.row.authCount }}</span>
                </p>
                <p v-if="scope.row.sdkNames.length > 0">
                  算法:
@@ -46,6 +46,7 @@
                    >{{ item + " " }}</span
                  >
                </p>
                <p>
                  服务时长:
                  <span>{{ scope.row.serveYear + "年" }}</span>
@@ -128,69 +129,40 @@
        <el-button type="primary" @click="assureOnlinePay">完成支付</el-button>
      </div>
    </el-dialog>
    <el-dialog
      class="offpay-instruct-dialog"
      :visible="offPayInstruVisible"
      :show-close="true"
      @close="offPayInstruVisible = false"
    >
      <div slot="title" class="dialog-title">线下汇款说明</div>
      <div class="offPay-instruct">
        <h5>请将款项汇入以下银行账户:</h5>
        <ul>
          <li><label>开户银行:</label>北京银行太阳宫支行</li>
          <li><label>账 号:</label>2000 0031 2025 0000 9136 746</li>
          <li><label>开户行行号:</label>313100001792</li>
          <li>
            <label>款项:</label>
            <span class="main-color">{{ sum }}元</span>
          </li>
        </ul>
        <div class="dash-line"></div>
        <ul class="userinfo">
          <li>
            <label>您的登录用户名:</label>
            {{ this.username }}
          </li>
          <li>
            <label>您的订单号:</label>
            {{ orderId }}
          </li>
        </ul>
        <div class="attentions">
          <p class="title">注意事项:</p>
          <p>1、请在转账时务必提供用户名和订单编号;</p>
          <p>
            2、转账后,请务必点击“支付完成/上传凭证”提交转账信息,以便财务确认,财务确认时间为提交后的1-3个工作日;
          </p>
          <p>3、您可以在“我的订单”点击【提交付款凭证】,查看本页中的内容</p>
        </div>
        <div class="btns text-center">
          <el-button
            class="btn-cancle"
            @click="offPayInstruVisible = false"
            style="margin-right: 20px"
            >取消</el-button
          >
          <router-link
            :to="`/Layout/ManageOrder?confirmOrder=offPay&orderId=${orderId}`"
          >
            <el-button class="btn-assure" type="primary"
              >支付完成/上传凭证</el-button
            >
          </router-link>
        </div>
      </div>
    </el-dialog>
    <div class="offerpay" v-if="showOffpayInstruct || showUploadBox">
      <OffpayInstruct
        v-if="showOffpayInstruct"
        @close="showOffpayInstruct = false"
        :offerData="{ username: username, sum: sum, orderId: orderId }"
        @confirm="confirmOrder"
      ></OffpayInstruct>
      <UploadBox
        :orderId="orderId"
        @close="showUploadBox = false"
        @back="back"
        v-if="showUploadBox"
      >
      </UploadBox>
    </div>
    <div class="mask" v-if="showOffpayInstruct || showUploadBox"></div>
  </div>
</template>
<script>
import { getOrderById } from "@/api/product";
import { resumePay } from "@/api/order";
import OffpayInstruct from "@/views/productDetail/components/OffpayInstruct";
import UploadBox from "@/views/productDetail/components/UploadBox";
export default {
  props: {
    orderId: {},
  },
  components: {
    OffpayInstruct,
    UploadBox,
  },
  data() {
    return {
@@ -202,6 +174,8 @@
      username: "",
      offPayInstruVisible: false,
      onlinePayVisible: false,
      showOffpayInstruct: false,
      showUploadBox: false,
    };
  },
  computed: {
@@ -232,13 +206,26 @@
      this.payWay = payway;
    },
    forPay() {
      if (!this.policyChecked) {
        this.$notify({
          type: "error",
          message: "请确认用户条款",
        });
        return;
      }
      let orderId = this.orderId;
      let payMethod = this.payWay;
      let _this = this;
      if (this.orderInfo.orderMoney == 0) {
        resumePay({ orderId, payMethod: 5 }).then((res) => {
          if (res.success) {
            this.$router.replace("/Layout/ManageOrder");
            this.$router.push("/trialCenter");
            this.$notify({
              type: "success",
              message: "成功试用",
              duration: 2500,
              offset: 57,
            });
          }
        });
        return;
@@ -255,7 +242,7 @@
        resumePay({ orderId, payMethod: 1 })
          .then((res) => {
            if (res.success) {
              this.offPayInstruVisible = true;
              this.showOffpayInstruct = true;
            }
          })
          .catch((e) => {
@@ -278,6 +265,14 @@
    },
    close() {
      this.$emit("close");
    },
    confirmOrder() {
      this.showOffpayInstruct = false;
      this.showUploadBox = true;
    },
    back() {
      this.showOffpayInstruct = true;
      this.showUploadBox = false;
    },
  },
};
@@ -399,6 +394,54 @@
      }
    }
  }
  .btns {
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: flex;
    justify-content: end;
    text-align: center;
    line-height: 40px;
    .confirm {
      margin-left: 10px;
      width: 104px;
      height: 40px;
      background: #0065ff;
      color: #fff;
    }
    .cancel {
      width: 104px;
      height: 40px;
      border: 1px solid #0065ff;
      color: #0065ff;
    }
  }
  .offerpay {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -331px;
    margin-left: -223px;
    width: 446px;
    height: 662px;
    background: #ffffff;
    z-index: 2;
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000;
    opacity: 0.2;
    z-index: 1;
  }
}
</style>