Merge branch 'feat/group-buy' of git.quantgroup.cn:ui/group-buy-ui into feat/group-buy

src/components/swipeCustomerInfo.vue

@@ -23,7 +23,7 @@ export default {
     },
     name: {
       type: String,
-      default: '易烊千玺'
+      default: ''
     },
     color: {
       type: String,

src/service/pay.service.js

@@ -108,7 +108,9 @@ function payByALIH5(info) {
  */
 function payByThirdPartyCashier(info) {
   if (!info.url) return;
+  const orderNo = cookies.get('orderNo')?.orderNo;
   info.params.third = 1;
+  info.params.orderNo = orderNo;
   const currentPath = encodeURIComponent(
     window.location.origin +
     '/payWaiting' +

src/views/goodsDetail/smallPic.less

@@ -112,6 +112,13 @@
       margin-right: @padding-x;
       flex-shrink: 0;
       position: relative;
+      &-img-box{
+        width: 100%;
+        height: 100%;
+        /deep/ img {
+          border-radius: 6px;
+        }
+      }
     }
     &-desc{
       flex: 1;

src/views/goodsDetail/smallPic.vue

@@ -16,7 +16,12 @@
             class="goods-product-info-tag"
             >{{ detailInfo.groupBuyInfo.groupBuyLimitUserCount }}人团</span
           >
-          <cr-image width="108px" :src="detailInfo.thumbImageUrl" />
+          <cr-image
+            class="goods-product-info-img-img-box"
+            width=""
+            height=""
+            :src="detailInfo.thumbImageUrl"
+          />
         </div>
         <div class="goods-product-info-desc">
           <div class="goods-product-info-desc-part1">

src/views/pay/STATIC_DATA.js

@@ -36,10 +36,9 @@ const WECHAT_PAY = 2;
 const ALIPAY_PAY = 3;
 const CREDIT_AND_WECHAT_PAY = 4;
 const CREDIT_AND_ALIPAY_PAY = 5;
-const CASH_PAY = 6;
 
 // 三方支付
-const IS_THIRD_PAY = method => [WECHAT_PAY, ALIPAY_PAY, CASH_PAY].indexOf(method) > -1;
+const IS_THIRD_PAY = method => [WECHAT_PAY, ALIPAY_PAY].indexOf(method) > -1;
 //组合支付
 const IS_GROUP_PAY = method => [CREDIT_AND_WECHAT_PAY, CREDIT_AND_ALIPAY_PAY].indexOf(method) > -1;
 //信用支付
@@ -53,8 +52,6 @@ const FACE_VERIFICATION_CODE_PAY = 4; //人脸验证
 const PAY_SUCCESS = 3; // 支付成功
 const PAY_PAYING = 2; //支付中
 
-const CASH_PAY_SUCCESS = 1; // 现金券支付成功
-
 function isDetentionFn() {
   // 推荐开通享花卡
   if (this.creditPayInfo.accountStatus !== ACCOUNT_APPLY_SUCCESS) {
@@ -136,10 +133,19 @@ function filterAllPayList(type, data) {
   }
   return data;
 }
+
+const payTypeMap = {
+  '1': '信用支付',
+  '2': '微信支付',
+  '3': '支付宝支付',
+  '4': '信用支付_微信支付',
+  '5': '信用支付_支付宝支付',
+  '6': '虚拟支付0元付'
+};
+
 export {
   status,
   codeArr,
-  CASH_PAY,
   payTypeE,
   payStatus,
   PAY_PAYING,
@@ -157,7 +163,6 @@ export {
   filterAllPayList,
   ACCOUNT_NO_APPLY,
   PAYMENT_CODE_PAY,
-  CASH_PAY_SUCCESS,
   ACCOUNT_APPLY_FAIL,
   creditPayStatusType,
   CREDIT_AND_WECHAT_PAY,
@@ -166,5 +171,6 @@ export {
   ACCOUNT_APPLY_AUDITING,
   ACCOUNT_APPLY_AUDIT_FAIL,
   SMS_VERIFICATION_CODE_PAY,
-  FACE_VERIFICATION_CODE_PAY
+  FACE_VERIFICATION_CODE_PAY,
+  payTypeMap
 };

src/views/pay/components/CouponCard.vue

 <template>
-  <div class="coupon">
-    <p class="coupon-face">
-      <span class="coupon-amount">{{ value.faceValue }}</span>
-      <span class="coupon-name">{{ value.name }}</span>
-    </p>
-    <p class="coupon-content">
-      <span class="coupon-desc">{{ value.description }}</span>
-      <span class="coupon-time">{{ value.couponValidTime }}</span>
-    </p>
-    <p class="coupon-action">
-      <cr-button size="mini" type="primary" shape="circle" class="coupon-button" @click="goNavUrl"
-        >去使用</cr-button
-      >
-    </p>
+  <div class="pay-type-list">
+    <p class="type-title">{{ value.title }}</p>
+    <payGroupItem
+      v-if="value.isGroupPay"
+      v-model="payList"
+      :pay-type="payType"
+      :disabled="disabled"
+      :coupon-info="couponInfo"
+      :show-coupon="showCoupon"
+      :coupon-disabled="showCoupon && !payCouponCouldBeUsed"
+    />
+    <template v-else>
+      <template v-for="(item, key) of payList">
+        <payCardItem
+          v-if="item.show"
+          :key="key"
+          :pay-type="payType"
+          :value="item"
+          :disabled="disabled"
+          :coupon-info="couponInfo"
+          :show-coupon="showCoupon"
+          :coupon-disabled="showCoupon && !payCouponCouldBeUsed"
+        />
+      </template>
+    </template>
   </div>
 </template>
 <script>
+import payCardItem from './PayCardItem';
+import payGroupItem from './PayGroupCard.vue';
 export default {
+  name: 'PayCard',
+  components: {
+    payCardItem,
+    payGroupItem
+  },
+  provide() {
+    return {
+      payCard: this
+    };
+  },
   props: {
-    value: Object
+    value: Object,
+    payType: Number,
+    payText: String,
+    disabled: Boolean,
+    couponInfo: Object,
+    riskLimit: Boolean,
+    showCoupon: Boolean,
+    payCouponCouldBeUsed: Boolean,
+    single: { type: Boolean, default: false },
+    creditPay: { type: Boolean, default: false }
   },
-  methods: {
-    goNavUrl() {
-      this.$emit('click');
-    }
-  }
+  data() {
+    return {
+      payList: this?.value?.payList || {}
+    };
+  },
+  mounted() {},
+  methods: {}
 };
 </script>
-<style lang="less" scoped>
-.coupon {
-  width: 327px;
-  height: 97px;
-  background-size: 100%;
-  background-image: url('../../../assets/images/pay/couponCard.png');
-  margin-right: @padding-sm;
-  padding: @padding-unit;
-  box-sizing: border-box;
-  &-face {
-    width: 90px;
-    color: @red-light;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    span {
-      display: block;
-    }
-  }
-  &-amount {
-    .text-30;
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    word-break: break-all;
-    text-align: center;
-    font-family: PingFangSC-Medium;
-    &::before {
-      content: '¥';
-      .text-12;
-    }
-  }
-  &-name {
-    .text-12;
-  }
-  &-content {
-    width: 137px;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    span {
-      display: inline-block;
-      width: 100%;
-    }
-  }
-  &-desc {
-    .text-14;
-    color: @black;
-    overflow: hidden;
+<style lang="less">
+.pay-type-list {
+  background-color: #fff;
+  border-radius: @border-radius-sm;
+  margin-top: @padding-sm;
+  .type-title {
+    height: 48px;
+    .text-16;
     font-weight: bold;
-    display: -webkit-box !important;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    overflow: hidden;
-  }
-  &-time {
-    .text-12;
-    display: flex;
-    color: @gray-5;
-    word-break: break-all;
-    align-items: flex-start;
-  }
-  &-action {
-    width: 90px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-  }
-  &-button {
-    width: 64px;
+    padding-left: @padding-md;
+    position: relative;
+    line-height: 48px;
   }
 }
 </style>

src/views/pay/components/PayCardItem.vue

@@ -20,10 +20,10 @@
             <p>{{ value.accountStatusDesc }}</p>
           </div>
         </div>
-        <div v-if="showCoupon && value.payType === 1 && !value.riskLimitDesc" class="coupon">
+        <div v-if="showCoupon && value.payType === 1" class="coupon">
           <p class="couponDes" :class="{ disable: couponDisabled }" @click.stop="openCouponModal">
             <span v-if="couponInfo.pickupId">
-              {{ `满${couponInfo.limitAmount}减${couponInfo.faceValue}元` }}
+              {{ `满${couponInfo.limitAmountNew}减${couponInfo.faceValueNew}元` }}
             </span>
             <span v-else>
               未选择优惠券

src/views/pay/components/PayGroupCard.vue

@@ -14,7 +14,7 @@
       <div class="dashed">
         <p class="dashed-line" />
         <cr-image
-          src="../../../assets/images/pay/addicon.png"
+          src="@/assets/images/pay/addicon.png"
           width="24px"
           height="24px"
           class="dashed-icon"

src/views/pay/components/SmsModal.vue

@@ -83,8 +83,9 @@ export default {
       }
     },
     getPhone() {
-      const phone = localStorage.get('userInfo')?.phoneNumber;
-      return phone;
+      const phone = localStorage.get('phoneNo');
+      const phoneS = `${phone}`.replace(/(\d{3})\d*(\d{4})/, '+86 $1 **** $2');
+      return phoneS;
     },
     clearTimer() {
       clearInterval(this.timer);

src/views/pay/index.vue

@@ -54,7 +54,9 @@
       </cr-button>
     </p>
     <p v-if="overtime" class="btn">
-      <cr-button type="default" class="btn-default" @click="goOrderList">我的订单</cr-button>
+      <cr-button v-if="isOrder" type="default" class="btn-default" @click="goOrderList"
+        >我的订单</cr-button
+      >
       <cr-button type="primary" class="btn-primary" @click="goHome">返回商城</cr-button>
     </p>
     <p class="placeholder" />
@@ -103,7 +105,6 @@ import { goUrlExtends } from './extends';
 import cookies from '@/service/cookieStorage.service';
 import {
   codeArr,
-  CASH_PAY,
   CREDIT_PAY,
   PAY_SUCCESS,
   creditStatus,
@@ -113,8 +114,7 @@ import {
   isDetentionFn,
   havePayingOrder,
   filterAllPayList,
-  PAYMENT_CODE_PAY,
-  CASH_PAY_SUCCESS,
+  PAYMENT_CODE_PAY, // 支付密码
   ACCOUNT_APPLY_FAIL,
   creditPayStatusType,
   ACCOUNT_APPLY_SUCCESS,
@@ -125,13 +125,13 @@ import {
   pay,
   prepay,
   getCoupon,
+  h5AppyUrl,
   ocrFaceId,
   queryPayInfo,
   kaGetNextUrl,
   reissueContract
 } from '@/api/pay.api.js';
-import { saTrackEvent } from '@/service/sa.service';
-const VCC_CHANNEL = localStorage.get('vccChannel');
+const VCC_CHANNEL = localStorage.get('vccChannel') || '';
 let Current_Url = null;
 export default {
   components: {
@@ -147,6 +147,7 @@ export default {
   extends: goUrlExtends,
   data() {
     return {
+      isOrder: true,
       error: '',
       random: '',
       orderNo: '',
@@ -185,8 +186,7 @@ export default {
       payContractInfo: {},
       isCheckAgreement: false,
       mergePayPretreatmentInfo: {},
-      tradeType: isWechat ? 'JSAPI' : 'MWEB',
-      amountInfo: {}
+      tradeType: isWechat ? 'JSAPI' : 'MWEB'
     };
   },
   computed: {
@@ -194,9 +194,9 @@ export default {
       return this.isRiskLimit();
     },
     amount() {
-      return IS_THIRD_PAY(this.payType) || !this.selectedCoupon.faceValue
+      return IS_THIRD_PAY(this.payType) || !this.selectedCoupon.faceValueNew
         ? this.displayInfo.orderAmt
-        : (this.displayInfo.orderAmt - this.selectedCoupon.faceValue).toFixed(2);
+        : (this.displayInfo.orderAmt - this.selectedCoupon.faceValueNew).toFixed(2);
     },
     isShowProtocol() {
       return (
@@ -207,7 +207,7 @@ export default {
     },
     canUseAmount() {
       return (
-        ((this.selectedCoupon?.faceValue && +this.selectedCoupon.faceValue) || 0) +
+        ((this.selectedCoupon?.faceValueNew && +this.selectedCoupon.faceValueNew) || 0) +
         ((this.displayInfo?.creditPayInfo?.canAmt && +this.displayInfo.creditPayInfo.canAmt) || 0) -
         ((this.displayInfo?.orderAmt && +this.displayInfo.orderAmt) || 0)
       );
@@ -219,6 +219,8 @@ export default {
     }
   },
   mounted() {
+    this.getQuery();
+    this.setIsOrder();
     this.orderNo = this.$route.query.orderNo || cookies.get('orderNo')?.orderNo;
     cookies.set('orderNo', { orderNo: this.orderNo });
     if (this.$route?.query?.ocrflag) {
@@ -234,15 +236,23 @@ export default {
     this.getCouponList(this.orderNo);
   },
   methods: {
+    getQuery() {
+      this.returnUrl = cookies.get('returnUrl') || '';
+      if (localStorage.get('hideOrder')) {
+        this.isOrder = false;
+      }
+    },
+    setIsOrder() {
+      const { hideOrder } = this.$route.query || {};
+      if (hideOrder) {
+        localStorage.set('hideOrder', hideOrder);
+      }
+    },
     /* 查询支付信息 */
     async queryPayInfo() {
-      console.log({
-        orderNo: this.orderNo,
-        isUsedMergePayMethod: false
-      });
       const [data, error] = await queryPayInfo({
         orderNo: this.orderNo,
-        isUsedMergePayMethod: false
+        isUsedMergePayMethod: cookies.get('source') !== 'tob' // 是否需要组合支付，true需要。false不需要
       });
       if (error && codeArr.indexOf(error?.response?.businessCode) < 0) {
         this.payResult('Fail');
@@ -333,7 +343,7 @@ export default {
       const { accountStatus, riskManagementAmt } = this.creditPayInfo;
       const { orderAmt } = this.displayInfo;
       if (accountStatus === ACCOUNT_APPLY_SUCCESS) {
-        const coupon = +this.selectedCoupon.faceValue || 0;
+        const coupon = +this.selectedCoupon.faceValueNew || 0;
         return +riskManagementAmt + coupon < +orderAmt;
       } else {
         return false;
@@ -362,7 +372,7 @@ export default {
           };
         } else if (accountStatus === ACCOUNT_APPLY_SUCCESS) {
           const finalCount = this.showCoupon
-            ? (this.displayInfo.orderAmt - (this.selectedCoupon.faceValue || 0)).toFixed(2)
+            ? (this.displayInfo.orderAmt - (this.selectedCoupon.faceValueNew || 0)).toFixed(2)
             : this.displayInfo.orderAmt;
           const txt = `实际支付${finalCount || '0.00'}`;
           this.accountS = {
@@ -384,7 +394,6 @@ export default {
       this.payCouponList = [];
       if (data && data.coupons) {
         data.coupons.forEach(item => {
-          // 享花券
           if (item.couponCategory === 21) {
             this.payCouponList.push({
               ...item,
@@ -396,13 +405,6 @@ export default {
       }
     },
     nextAction: throttle(function() {
-      const trackParams = {
-        order_id: this.orderNo,
-        pay_method: this.payType,
-        vcc_state: !IS_THIRD_PAY(this.payType) ? this.creditPayInfo?.accountStatus : '',
-        buttons_name: this.accountS.text
-      };
-      cookies.set('payTrackInfo', trackParams);
       if (this.isShowProtocol) {
         if (!this.isCheckAgreement) {
           this.$toast('请仔细阅读并同意相关协议');
@@ -410,9 +412,6 @@ export default {
         }
         this.reissueContract();
       }
-      saTrackEvent('H5_CheckOutCounterConfirmPayBtnClick', {
-        order_type: '0元购'
-      });
       this.accountS.fn();
     }, 1000),
     /* 预支付 */
@@ -424,13 +423,7 @@ export default {
       }
       this.error = '';
       this.setAmount();
-      if (
-        !params &&
-        !this.isDetention &&
-        IS_THIRD_PAY(this.payType) &&
-        this.payType !== CASH_PAY &&
-        !isOcr
-      ) {
+      if (!params && !this.isDetention && IS_THIRD_PAY(this.payType) && !isOcr) {
         this.isDetention = true;
         isDetentionFn.call(this);
         return;
@@ -483,15 +476,7 @@ export default {
         this.pwdModal && this.retrieve();
         return;
       }
-      // TODO 此处在获取与支付信息后，，跳转前通过判断渠道号，来判断是否在app中的打开，来规避支付等待页中的schema跳转问题
-      if (localStorage.get('vccChannel')) localStorage.set('isAppInner', true);
-      const {
-        creditPayInfo = {},
-        wxPayInfo = {},
-        flowOrderNo,
-        aliPayInfo = {},
-        vmPayInfo = {}
-      } = data;
+      const { creditPayInfo = {}, wxPayInfo = {}, flowOrderNo, aliPayInfo = {} } = data;
       const creditPayStatus = creditPayInfo.creditPayStatus;
       this.flowOrderNo = flowOrderNo;
       if (wxPayInfo.mwebUrl) {
@@ -529,9 +514,6 @@ export default {
         });
         this.close();
         this.goOcr();
-      } else if (vmPayInfo?.vmPayStatus === CASH_PAY_SUCCESS) {
-        !params && this.pay({ flowOrderNo: this.flowOrderNo });
-        params && this.payResult('Success');
       }
     },
     payResult(type, error) {
@@ -541,18 +523,12 @@ export default {
         query: {
           reason: error,
           orderNo: this.orderNo,
-          payType: this.payType,
-          finalAmt: this.amountInfo.finalAmt || '',
-          freeAmount: this.amountInfo.freeAmount || ''
+          payType: this.payType
         }
       });
     },
     /* 选择支付方式 */
     changePayType(type, mergePayPretreatmentInfo) {
-      if (this.payType === CASH_PAY) {
-        this.$toast('请选择现金券支付！');
-        type = CASH_PAY;
-      }
       this.payType = type;
       this.isDetention = false;
       this.thirdPayList = filterAllPayList(type, this.thirdPayList);
@@ -566,6 +542,12 @@ export default {
     /* 选取优惠券 */
     handleSelectCoupon(id, selectedCoupon) {
       this.selectedCoupon = selectedCoupon || {};
+      if (!('faceValueNew' in this.selectedCoupon) && 'faceValue' in this.selectedCoupon) {
+        this.selectedCoupon.faceValueNew = this.selectedCoupon.faceValue;
+      }
+      if (!('limitAmountNew' in this.selectedCoupon) && 'limitAmount' in this.selectedCoupon) {
+        this.selectedCoupon.limitAmountNew = this.selectedCoupon.limitAmount;
+      }
       this.getBtnStatus(this.isRiskLimit());
       this.couponPopup = false;
     },
@@ -589,6 +571,15 @@ export default {
     },
     /* 进入h5授信流程 */
     async goApply() {
+      if (this.$route.query.ka) {
+        this.getKaGetNextUrl();
+        return;
+      }
+      const [{ url }] = await h5AppyUrl();
+      if (!url) return;
+      window.location.href = `${url}&returnUrl=${window.location.origin}/pay&from=pay`;
+    },
+    async getKaGetNextUrl() {
       const [{ nextUrl }] = await kaGetNextUrl();
       if (!nextUrl) return;
       window.location.href = `${nextUrl}&returnUrl=${window.location.origin}/pay&from=pay`;
@@ -611,7 +602,9 @@ export default {
     },
     /* 忘记密码 */
     retrieveLink() {
-      let url = `${this.creditPayInfo.forgetPwdJumpUrl}&vccChannel=${VCC_CHANNEL}&redirectUrl=${window.location.href}`;
+      const { orderNo, hideOrder, returnUrl } = this.$route.query || {};
+      const redirectUrl = `${window.location.origin}${window.location.pathname}?orderNo=${orderNo}&hideOrder=${hideOrder}&returnUrl=${returnUrl}`;
+      let url = `${this.creditPayInfo.forgetPwdJumpUrl}&vccChannel=${VCC_CHANNEL}&redirectUrl=${redirectUrl}`;
       url = url.replace('{token}', localStorage.get('vccToken'));
       window.location.href = url;
     },
@@ -619,7 +612,7 @@ export default {
       return Object.keys(obj);
     },
     setAmount() {
-      const faceValue = +this.selectedCoupon?.faceValue || 0;
+      const faceValue = +this.selectedCoupon?.faceValueNew || 0;
       const orderAmt = +this.displayInfo?.orderAmt || 0;
       const finalAmt =
         IS_THIRD_PAY(this.payType) || !this.showCoupon
@@ -627,7 +620,6 @@ export default {
           : (orderAmt - faceValue || 0).toFixed(2);
       const freeAmount =
         !IS_THIRD_PAY(this.payType) && this.showCoupon ? faceValue || '0.00' : '0.00';
-      this.amountInfo = { finalAmt, freeAmount };
       cookies.set('amount', { finalAmt, freeAmount });
     },
     async reissueContract() {
@@ -640,5 +632,5 @@ export default {
 </script>
 
 <style lang="less">
-@import './index';
+@import './index.less';
 </style>

src/views/pay/payWaiting.vue

@@ -5,7 +5,7 @@
         width="63px"
         height="63px"
         class="info__image"
-        src="../../assets/images/pay/paying.png"
+        src="@/assets/images/pay/paying.png"
       />
       <div v-if="init" class="info__desc">
         <p class="info__text">
@@ -16,16 +16,16 @@
     <p class="tips">
       努力返回支付结果中，请留心查看！
     </p>
-    <div class="actions">
+    <div :class="['actions', !isOrder && 'no-order']">
       <cr-button
         class="actions__back"
         :plain="true"
         type="primary"
         shape="circle"
         @click="goHome('正在支付')"
-        >返回首页</cr-button
+        >{{ returnUrl ? '返回秒杀' : '返回首页' }}</cr-button
       >
-      <cr-button shape="circle" type="primary" @click="goOrderDetail('正在支付')"
+      <cr-button v-if="isOrder" shape="circle" type="primary" @click="goOrderDetail('正在支付')"
         >查看订单</cr-button
       >
     </div>
@@ -34,9 +34,9 @@
 <script>
 import { queryPayStatus } from '@/api/pay.api';
 import cookies from '@/service/cookieStorage.service';
-import localStorage from '@/service/localStorage.service';
 import { goUrlExtends } from './extends';
-import { isIOS } from '@/service/validation.service';
+import { isApp } from '@/service/validation.service';
+import localStorage from '@/service/localStorage.service';
 export default {
   components: {},
   extends: goUrlExtends,
@@ -46,20 +46,20 @@ export default {
       timer: null,
       time: 10,
       init: false,
-      isWx: false
+      returnUrl: '',
+      isOrder: true
     };
   },
   created() {
     this.orderNo = this.$route.query.orderNo || cookies.get('orderNo')?.orderNo;
-    this.isWx = this.$route.query.isWx;
-    if (!localStorage.get('isAppInner')) {
-      const schema = isIOS ? 'xincheng://' : 'app://xincheng/splash';
+    if (!isApp) {
       setTimeout(() => {
-        window.location.href = schema;
+        window.location.href = 'xyqb://openApp';
       }, 2000);
     }
   },
   mounted() {
+    this.getQuery();
     this.$dialog({
       message: '请确认订单已完成支付',
       confirmButtonText: '已完成支付',
@@ -78,6 +78,12 @@ export default {
     clearInterval(this.timer);
   },
   methods: {
+    getQuery() {
+      this.returnUrl = cookies.get('returnUrl') || '';
+      if (localStorage.get('hideOrder')) {
+        this.isOrder = false;
+      }
+    },
     loop() {
       this.query();
       this.timer = setInterval(() => {
@@ -92,14 +98,10 @@ export default {
     },
     goSuccess() {
       // 支付成功
-      this.$router.push({ name: 'paySuccess' });
+      this.$router.replace({ name: 'paySuccess', query: { orderNo: this.orderNo } });
     },
     goPay() {
-      if (this.isWx) {
-        this.$router.go(-2);
-        return;
-      }
-      this.$router.go(-1);
+      this.$router.replace({ name: 'pay', query: { orderNo: this.orderNo } });
     },
     async query() {
       const [data, error] = await queryPayStatus({ orderNo: this.orderNo });
@@ -166,7 +168,9 @@ export default {
     flex-direction: row;
     margin-top: @padding-lg;
     justify-content: space-between;
-
+    &.no-order {
+      justify-content: center;
+    }
     &__back {
       color: @cherry-color-error;
       border: 1px solid @cherry-color-error;