Merge branch 'master' of http://git.quantgroup.cn/ui/cauchy-ui

package-lock.json

@@ -1133,9 +1133,9 @@
       "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
     },
     "@qg/cherry-ui": {
-      "version": "2.21.3",
-      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.21.3.tgz",
-      "integrity": "sha512-Ft46F+cT/eGD8q3Uc0DgaP2eQlEivEezIEIZlm4usKGLzh7yt11YHvc7FDBJbZcwgX1pQRZI0JTspBgtO1EMag==",
+      "version": "2.21.7",
+      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.21.7.tgz",
+      "integrity": "sha512-kFt8N5aQpTeAKNRldxIJyDIVJ8PSKawv+vLHTJhlZRJfW1d7UepkXdnA0sZwXJsSE/ID6DyUhUessIoKS0a6xA==",
       "requires": {
         "@popperjs/core": "^2.5.4",
         "vue-lazyload": "^1.3.3",

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@better-scroll/core": "^2.0.0-beta.6",
-    "@qg/cherry-ui": "^2.21.3",
+    "@qg/cherry-ui": "^2.21.7",
     "@qg/js-bridge": "^1.1.9",
     "@qg/qg-scroll": "^1.4.2",
     "@qg/ui-request": "0.0.20",

src/App.vue

@@ -53,7 +53,7 @@ export default {
 };
 </script>
 <style lang="less">
-@import './style/var.less';
+@import './style/index.less';
 .app {
   user-select: none;
   height: 100%;

src/api/pay.api.js

@@ -67,6 +67,10 @@ const kaGetNextUrl = function() {
   return request.get(`${talosHost}/api/kdsp/ka/process/get-next-url`);
 };
 
+const reissueContract = function(params) {
+  return request.post(`${talosHost}/open/checkout/payReissueContract`, params);
+};
+
 export {
   pay,
   prepay,
@@ -78,5 +82,6 @@ export {
   queryPayInfo,
   getGoodsList,
   kaGetNextUrl,
-  queryPayStatus
+  queryPayStatus,
+  reissueContract
 };

src/service/init.service.js

@@ -12,7 +12,7 @@ const localStorageParams = [
   'sonVccChannel',
   'formXcxPage'
 ];
-const cookiesParams = ['h', 'returnUrl'];
+const cookiesParams = ['h', 'returnUrl', 'source'];
 const sessionStorageParams = [];
 
 export default {

src/style/var.less

@@ -88,4 +88,4 @@
 @ios-bottom-height: 60px;
 
 // 页面顶部header高度
-@nav-bar-height: 48px;
\ No newline at end of file
+@nav-bar-height: 48px;

src/views/home/components/RechargeInput.vue

@@ -75,12 +75,6 @@ export default {
       setTimeout(() => {
         this.inputBlur = false;
       }, 500);
-
-      if (this.phoneNo && !checkPhoneFormat(this.phoneNo)) {
-        this.$toast.fail('请您输入正确的手机号');
-        this.input();
-        return;
-      }
       !this.phoneHome && this.queryhome();
       this.input();
     },
@@ -111,6 +105,10 @@ export default {
     position: relative;
     z-index: 9;
     border-bottom: @border-width-base solid @gray-2;
+    font-size: 24px;
+    input::placeholder {
+      font-size: 20px;
+    }
     .cr-field:not(:last-child)::after {
       display: none;
     }

src/views/home/components/RechargeList.vue

@@ -34,7 +34,8 @@ export default {
       rechargeType: 'recharge',
       tabItemStyle: {
         width: '75px',
-        flex: 'none'
+        flex: 'none',
+        fontWeight: 'bold'
       },
       selectedRechargeInfo: {},
       rechargeList: {
@@ -77,5 +78,10 @@ export default {
   height: 282px;
   margin-top: @padding-xs;
   margin-bottom: @padding-xs;
+  .cr-tabs__item--active {
+    .cr-tabs__text {
+      font-weight: bold;
+    }
+  }
 }
 </style>

src/views/home/components/RechargeTop.vue

@@ -8,7 +8,9 @@
       >
         充值订单
       </a>
-      <a href="" class="top-link-title" @click="goOrderListTrack('联系客服', 'cs')">联系客服</a>
+      <a href="javascript:;" class="top-link-title" @click="goOrderListTrack('联系客服', 'cs')"
+        >联系客服</a
+      >
     </div>
     <div class="top-tabs">
       <p class="top-tabs-title">娱乐生活</p>
@@ -88,8 +90,9 @@ export default {
   padding: 10px;
   background-size: 100%;
   box-sizing: border-box;
-  background-repeat: no-repeat;
   background: url('~@/assets/images/ellipse.png');
+  background-size: 100%;
+  background-repeat: no-repeat;
 
   .recharge {
     width: 55px;
@@ -105,11 +108,24 @@ export default {
     text-align: right;
     &-title {
       .text-14();
-      width: 64px;
+      display: inline-block;
       color: @white;
+      box-sizing: border-box;
       padding: 0 @padding-xs;
+      text-align: center;
       &-first {
-        border-right: 1px solid @white;
+        position: relative;
+      }
+      &-first::after {
+        position: absolute;
+        content: '';
+        display: inline-block;
+        right: 0;
+        width: 1px;
+        height: 10px;
+        background: @white;
+        top: 50%;
+        transform: translateY(-50%);
       }
     }
   }

src/views/home/index.less

@@ -21,6 +21,9 @@
       z-index: 9;
       .button{
         .text-16();
+        span{
+          font-weight: bold;
+        }
       }
     }
   }

src/views/home/index.vue

@@ -20,7 +20,7 @@
           :disabled="!disabled"
           @click="goOrder"
         >
-          {{ selectedRechargeInfo.salePrice ? `¥${selectedRechargeInfo.salePrice}` : '' }}立即充值
+          {{ selectedRechargeInfo.price ? `¥${selectedRechargeInfo.price}` : '' }} 立即充值
         </cr-button>
       </div>
     </div>
@@ -33,7 +33,7 @@ import RechargeTop from './components/RechargeTop.vue';
 import RechargeList from './components/RechargeList.vue';
 import RechargeInput from './components/RechargeInput.vue';
 import localStorage from '@/service/localStorage.service';
-import { throttle } from '@/service/utils.service';
+import { throttle, checkPhoneFormat } from '@/service/utils.service';
 const { getSpuList } = api;
 export default {
   components: {
@@ -54,7 +54,11 @@ export default {
   },
   computed: {
     disabled: function() {
-      return this.rechargePhoneInfo.phoneNo && this.selectedRechargeInfo.salePrice;
+      return (
+        this.rechargePhoneInfo.phoneNo &&
+        checkPhoneFormat(this.rechargePhoneInfo.phoneNo) &&
+        this.selectedRechargeInfo.salePrice
+      );
     }
   },
   created() {
@@ -77,13 +81,13 @@ export default {
       this.selectedRechargeInfo = rechargeInfo;
     },
     async goOrderApi() {
-      const { skuNo, salePrice } = this.selectedRechargeInfo;
+      const { skuNo, price } = this.selectedRechargeInfo;
       this.$track.registeredEvents('h5_RechargeCenterPagePhoneBillClick', {
         recharge_type: this.phoneRecharge[`${this.rechargeType}Type`] === 601 ? '快充' : '慢充',
-        cost_value: salePrice
+        cost_value: price
       });
       const [res, error] = await orderApi.orderCreate({
-        totalFee: salePrice,
+        totalFee: price,
         terminal: 'H5',
         account: this.rechargePhoneInfo?.phoneNo,
         registrationLocation: this.rechargePhoneInfo?.phoneNoHome,

src/views/pay/STATIC_DATA.js

@@ -114,6 +114,15 @@ function isDetentionFn() {
     });
   }
 }
+function havePayingOrder() {
+  /* 有享花卡未支付的订单 */
+  this.$dialog({
+    message: '您的享花卡额度被其他订单占用，暂时不可使用享花卡支付哦！',
+    confirmButtonText: '重新选择',
+    showCancelButton: false,
+    confirmButtonColor: '#EC1500'
+  });
+}
 function filterAllPayList(type, data) {
   for (let item in data.payList) {
     if (data.payList[item].payType === type) {
@@ -140,6 +149,7 @@ export {
   IS_GROUP_PAY,
   IS_CREDIT_PAY,
   isDetentionFn,
+  havePayingOrder,
   filterAllPayList,
   ACCOUNT_NO_APPLY,
   PAYMENT_CODE_PAY,

src/views/pay/components/PayCard.vue

 <template>
   <div class="pay-type-list">
-    <p class="type-title b-b">{{ value.title }}</p>
+    <p class="type-title">{{ value.title }}</p>
     <payGroupItem
       v-if="value.isGroupPay"
       v-model="payList"
@@ -8,7 +8,6 @@
       :disabled="disabled"
       :coupon-info="couponInfo"
       :show-coupon="showCoupon"
-      :risk-limit="riskLimit"
       :coupon-disabled="showCoupon && !payCouponCouldBeUsed"
     />
     <template v-else>
@@ -21,7 +20,6 @@
           :disabled="disabled"
           :coupon-info="couponInfo"
           :show-coupon="showCoupon"
-          :risk-limit="riskLimit"
           :coupon-disabled="showCoupon && !payCouponCouldBeUsed"
         />
       </template>
@@ -71,6 +69,7 @@ export default {
   .type-title {
     height: 48px;
     .text-16;
+    font-weight: bold;
     padding-left: @padding-md;
     position: relative;
     line-height: 48px;

src/views/pay/components/PayCardItem.vue

 <template>
   <div class="payCardItem">
-    <div :class="['type-item', { 'b-t': !isGroupPay }]" @click="changePayType(value)">
+    <div
+      :class="['type-item', { 'b-t': !isGroupPay || value.payType === 1 }]"
+      @click="changePayType(value)"
+    >
       <div class="type-item-content">
         <div class="type-item-content-info">
           <cr-image :src="value.icon" class="icon" mode="aspectFit" width="39" height="39" />
@@ -17,20 +20,20 @@
             <p>{{ value.accountStatusDesc }}</p>
           </div>
         </div>
-        <div
-          v-if="showCoupon && value.payType === 1"
-          class="couponDes"
-          :class="{ disable: couponDisabled }"
-          @click.stop="openCouponModal"
-        >
-          <span v-if="couponInfo.pickupId">
-            {{ `满${couponInfo.limitAmount}减${couponInfo.faceValue}元` }}
-          </span>
-          <span v-else>
-            未选择优惠券
-          </span>
-          <cr-icon type="arrow" class="selectArrow" size="15px" />
+        <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}元` }}
+            </span>
+            <span v-else>
+              未选择优惠券
+            </span>
+            <cr-icon type="arrow" class="selectArrow" size="15px" />
+          </p>
         </div>
+        <p v-if="value.riskLimitDesc" class="limitDes">
+          {{ value.riskLimitDesc }}
+        </p>
       </div>
       <cr-checkbox
         v-if="!isGroupPay"
@@ -42,18 +45,9 @@
         @click.native="changePayType(value)"
       />
     </div>
-    <p v-if="riskLimit && value.riskManagementDesc && !disabled" class="limitDes">
-      {{ value.riskManagementDesc }}
-    </p>
   </div>
 </template>
 <script>
-// import { registeredEvents } from '@/utils/sa';
-// const payTypeE = [
-//   'PD_YXMMAEC_UserClickCashierSelectXiangHuaCardPay',
-//   'PD_YXMMAEC_UserClickCashierSelectWechatPay'
-// ];
-// const payTypeMiniAppE = ['c_cashierselectxianghuacardpay', 'c_cashierselectwechatpay'];
 export default {
   name: 'PayCardItem',
   inject: ['payCard', 'pay'],
@@ -90,8 +84,13 @@ export default {
   width: 100%;
   padding-bottom: 2px;
 }
+.coupon {
+  margin-top: 4px;
+  height: 20px;
+  padding-left: 51px;
+  display: flex;
+}
 .couponDes {
-  margin-left: 50px;
   display: inline-block;
   color: @text-color-red;
   .text-12;
@@ -113,9 +112,9 @@ export default {
 .limitDes {
   color: #ed6a0c;
   background: #fffbe8;
-  .text-12;
-  padding: 10px 8px;
-  margin: 8px;
+  .text-11;
+  padding: 4px 8px;
+  margin: 8px 8px 8px 4px;
   border-radius: 3px;
 }
 .type-item {
@@ -184,5 +183,6 @@ export default {
 }
 .selectArrow {
   vertical-align: text-top;
+  margin-left: -2px;
 }
 </style>

src/views/pay/components/PayGroupCard.vue

@@ -13,6 +13,12 @@
       </div>
       <div class="dashed">
         <p class="dashed-line" />
+        <cr-image
+          src="../../../assets//images/addicon.png"
+          width="24px"
+          height="24px"
+          class="dashed-icon"
+        />
         <cr-checkbox
           v-model="thirdPayInfo.isCheck"
           shape="round"
@@ -42,7 +48,6 @@
   </div>
 </template>
 <script>
-// import { registeredEvents } from '@/utils/sa';
 import PayCardItem from './PayCardItem.vue';
 export default {
   name: 'PayGroupCard',
@@ -128,6 +133,7 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  position: relative;
   &-line {
     width: 310px;
     border-bottom: 1px dashed #dcdcdc;
@@ -135,6 +141,11 @@ export default {
   &-checkbox {
     width: 18px;
   }
+  &-icon {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 }
 
 .more-title {

src/views/pay/components/SmsModal.vue

@@ -7,13 +7,13 @@
         <p class="sms-des">为保证您账户安全，此笔交易需要短信验证</p>
         <p class="phone">已发送至 {{ getPhone() }}</p>
         <cr-authcode-field
-          span-size="20px"
+          span-size="24px"
           type="number"
           border-type="bottom"
           :number="6"
           height="40px"
-          span-color="#000"
-          input-color="#000"
+          span-color="#666"
+          input-color="#666"
           input-size="20px"
           class="sms-input"
           :success="success"
@@ -29,7 +29,6 @@
 </template>
 
 <script>
-// import { registeredEvents } from '@/utils/sa';
 import localStorage from '@/service/localStorage.service';
 import { sendSms as sendSmsApi } from '@/api/pay.api';
 export default {
@@ -69,12 +68,9 @@ export default {
     success(smsCode) {
       this.$emit('submit', smsCode);
     },
-    async sendSms(val) {
+    async sendSms() {
       // 页面摧毁清掉定时器
       if (this.send) return;
-      if (!val) {
-        // registeredEvents('PD_YXMMACP_UserClickResendCaptcha');
-      }
       const [, error] = await sendSmsApi({ orderNo: this.orderNo, flowOrderNo: this.flowOrderNo });
       if (!error) {
         this.send = true;
@@ -91,12 +87,6 @@ export default {
       const phoneS = `${phone}`.replace(/(\d{3})\d*(\d{4})/, '+86 $1 **** $2');
       return phoneS;
     },
-    sendSa() {
-      // if (!this.numberArr.length && !this.isDel) {
-      //   registeredEvents('PD_YXMMACP_UserClickAgainVerificationCodeInputbox');
-      //   wx.reportAnalytics('c_againverificationcodeinputbox', {});
-      // }
-    },
     clearTimer() {
       clearInterval(this.timer);
       this.send = false;
@@ -113,7 +103,7 @@ export default {
   left: 50%;
   top: 26%;
   margin-left: -150px;
-  padding: 12px 12px 24px;
+  padding: 12px 18px 24px;
   width: 300px;
   border-radius: 16px;
   background: #fff;
@@ -129,9 +119,10 @@ export default {
     text-align: center;
     width: 100%;
     font-size: 16px;
+    font-weight: bold;
   }
   &-des {
-    padding: 17px 0 0 8px;
+    padding: 18px 0 0 8px;
     display: flex;
     justify-content: flex-start;
     font-size: 12px;

src/views/pay/extends.js

@@ -10,11 +10,13 @@ export const goUrlExtends = {
         });
       }
       const returnUrl = this.getReturnUrl();
-      if (returnUrl) {
-        window.location.replace(`${returnUrl}`);
-        return;
-      }
-      this.$router.replace({ name: 'home' });
+      setTimeout(() => {
+        if (returnUrl) {
+          window.location.replace(`${returnUrl}`);
+          return;
+        }
+        this.$router.replace({ name: 'home' });
+      }, 500);
     },
     goOrderList(payStatus) {
       if (payStatus) {
@@ -24,11 +26,13 @@ export const goUrlExtends = {
         });
       }
       const returnUrl = this.getReturnUrl();
-      if (returnUrl) {
-        window.location.replace(`${returnUrl}/orderList`);
-        return;
-      }
-      this.$router.replace({ name: 'orderList' });
+      setTimeout(() => {
+        if (returnUrl) {
+          window.location.replace(`${returnUrl}/orderList`);
+          return;
+        }
+        this.$router.replace({ name: 'orderList' });
+      }, 500);
     },
     goOrderDetail() {
       const returnUrl = this.getReturnUrl();

src/views/pay/index.less

+@import url('../../style/mixins');
 .pay {
-  // width: 100%;
   padding: @padding-xs;
 }
 .price-box {
@@ -16,6 +16,7 @@
   .price{
     .text-30;
     color: @font-color-red;
+    font-weight: bold;
     margin-top: @padding-xs;
     &:before{
       content: '￥';
@@ -38,11 +39,16 @@
   bottom: 0;
   left:0;
   background-color:@white;
+  .iphonex-fix-margin;
   button{
+    .text-16;
     width: 100%;
     color: @white;
     font-size: @line-height-sm;
     border-radius: @border-radius-lx;
+    span{
+      font-weight: bold;
+    }
   }
   button[disabled] {
     color: rgba(255,255,255,.6);

src/views/pay/index.vue

@@ -20,7 +20,9 @@
       :show-coupon="showCoupon"
       :coupon-info="selectedCoupon"
       :has-pwd="creditPayInfo.hasPwd"
-      :pay-coupon-could-be-used="displayInfo.payCouponInfo.payCouponCouldBeUsed"
+      :pay-coupon-could-be-used="
+        displayInfo.payCouponInfo && displayInfo.payCouponInfo.payCouponCouldBeUsed
+      "
       @changePayType="changePayType"
     />
 
@@ -30,11 +32,12 @@
       v-model="thirdPayList"
       :pay-type="payType"
       :disabled="overtime"
-      :risk-limit="riskLimit"
       :show-coupon="showCoupon"
       :coupon-info="selectedCoupon"
       :has-pwd="creditPayInfo.hasPwd"
-      :pay-coupon-could-be-used="displayInfo.payCouponInfo.payCouponCouldBeUsed"
+      :pay-coupon-could-be-used="
+        displayInfo && displayInfo.payCouponInfo && displayInfo.payCouponInfo.payCouponCouldBeUsed
+      "
       @changePayType="changePayType"
     />
 
@@ -99,7 +102,6 @@ import localStorage from '@/service/localStorage.service';
 import { throttle } from '@/service/utils.service';
 import { goUrlExtends } from './extends';
 import cookies from '@/service/cookieStorage.service';
-import { getTokenFromNative } from '@/service/utils.service';
 import {
   codeArr,
   payTypeE,
@@ -110,6 +112,7 @@ import {
   IS_GROUP_PAY,
   IS_CREDIT_PAY,
   isDetentionFn,
+  havePayingOrder,
   filterAllPayList,
   PAYMENT_CODE_PAY, // 支付密码
   ACCOUNT_APPLY_FAIL,
@@ -125,7 +128,8 @@ import {
   h5AppyUrl,
   ocrFaceId,
   queryPayInfo,
-  kaGetNextUrl
+  kaGetNextUrl,
+  reissueContract
 } from '@/api/pay.api.js';
 const VCC_CHANNEL = localStorage.get('vccChannel');
 let Current_Url = null;
@@ -232,13 +236,16 @@ export default {
   methods: {
     /* 查询支付信息 */
     async queryPayInfo() {
-      const [data, error] = await queryPayInfo({ orderNo: this.orderNo });
+      const [data, error] = await queryPayInfo({
+        orderNo: this.orderNo,
+        isUsedMergePayMethod: cookies.get('source') !== 'tob'
+      });
       if (error && codeArr.indexOf(error?.response?.businessCode) < 0) {
         this.payResult('Fail');
         return;
       }
       this.isReady = true;
-      const { displayInfo = {}, payMethods } = data || {};
+      const { displayInfo = {}, payMethods, creditQuotaInfo } = data || {};
       this.overtime = displayInfo.periodSeconds <= 0;
       this.success = true;
       if (this.overtime) {
@@ -318,6 +325,9 @@ export default {
         this.isShowProtocol && (this.isCheckAgreement = true);
         this.setAmount();
       }
+      if (creditQuotaInfo?.isFreezeCreditInOtherOrder && !this.payInfo?.payType) {
+        havePayingOrder.call(this);
+      }
     },
     isRiskLimit() {
       const { accountStatus, riskManagementAmt } = this.creditPayInfo;
@@ -392,6 +402,13 @@ export default {
         vcc_state: !IS_THIRD_PAY(this.payType) ? this.creditPayInfo?.accountStatus : '',
         buttons_name: this.accountS.text
       });
+      if (this.isShowProtocol) {
+        if (!this.isCheckAgreement) {
+          this.$toast('请仔细阅读并同意相关协议');
+          return;
+        }
+        this.reissueContract();
+      }
       this.accountS.fn();
     }, 1000),
     /* 预支付 */
@@ -402,10 +419,6 @@ export default {
         return;
       }
       this.error = '';
-      if (this.isShowProtocol && !this.isCheckAgreement) {
-        this.$toast('请仔细阅读并同意相关协议');
-        return;
-      }
       this.setAmount();
       if (!params && !this.isDetention && IS_THIRD_PAY(this.payType) && !isOcr) {
         this.isDetention = true;
@@ -448,12 +461,7 @@ export default {
       if (error) {
         if (error?.response?.businessCode === '3001') {
           /* 有享花卡未支付的订单 */
-          this.$dialog({
-            message: '您的享花卡额度被其他订单占用，暂时不可使用享花卡支付哦！',
-            confirmButtonText: '重新选择',
-            showCancelButton: false,
-            confirmButtonColor: '#EC1500'
-          });
+          havePayingOrder.call(this);
           return;
         }
         if (codeArr.indexOf(error?.response?.businessCode) < 0) {
@@ -607,6 +615,11 @@ export default {
           ? this.selectedCoupon?.faceValue || '0.00'
           : '0.00';
       cookies.set('amount', { finalAmt, freeAmount });
+    },
+    async reissueContract() {
+      await reissueContract({
+        templateIdList: this.payContractInfo.contractInfos.map(item => item.contractId)
+      });
     }
   }
 };

src/views/vipLife/components/AccountInput.vue

@@ -3,8 +3,10 @@
     <cr-field
       v-model="accountMask"
       :placeholder="`请输入${info.name || ''}账号`"
-      :max-length="maxLength"
       clearable
+      class="Vl__account__field"
+      :type="info.type === 101 ? 'text' : 'number'"
+      @input="checkPhone"
     >
       <template #button>
         <cr-image
@@ -16,23 +18,11 @@
         />
       </template>
     </cr-field>
-    <!-- <div class="Vl__list" :class="{ show: !inputBlur }">
-      <div
-        v-for="(item, index) in list"
-        :key="index"
-        class="Vl__list-item"
-        @click="handleSelectPhone(item)"
-      >
-        <span class="phone">{{ phoneFormat(item.phone) }}</span>
-        <span class="phone-home">{{ item.home }}</span>
-        <span v-if="index === 0" class="current">上次充值</span>
-      </div>
-    </div> -->
   </div>
 </template>
 <script>
 import rechargeApi from '@/api/recharge.api';
-import { phoneFormat } from '@/service/utils.service';
+import { phoneFormat, phoneTrim } from '@/service/utils.service';
 export default {
   name: 'AccountInput',
   props: {
@@ -44,28 +34,20 @@ export default {
   },
   data: function() {
     return {
-      // inputBlur: true
-      // showList: false
-      // list: [
-      //   {
-      //     phone: '17165445433',
-      //     home: '北京 移动'
-      //   }
-      // ]
+      accountMask: ''
     };
   },
   computed: {
     maxLength() {
       return this.info.type !== 101 ? 13 : 30;
     },
-    accountMask: {
-      get() {
-        return this.info.type !== 101 ? this.phoneFormat(this.value) : this.value;
-      },
-      set(val) {
-        this.$emit('input', val.replace(/\s/g, ''));
-        // this.getPhoneHome();
-      }
+    phoneNo() {
+      return phoneTrim(this.accountMask);
+    }
+  },
+  watch: {
+    info: function() {
+      this.checkPhone();
     }
   },
   methods: {
@@ -76,6 +58,14 @@ export default {
     async getPhoneHome() {
       const [res] = await rechargeApi({ phoneNo: this.value });
       this.phoneHome = res.phoneHome;
+    },
+    checkPhone() {
+      if (this.info.type !== 101) {
+        this.accountMask = this.phoneFormat(this.accountMask);
+      } else {
+        this.accountMask = this.phoneNo;
+      }
+      this.$emit('input', this.phoneNo);
     }
   }
 };
@@ -87,6 +77,9 @@ export default {
     position: relative;
     @{deep} .cr-field {
       padding: @padding-xs + 2 0;
+      input::placeholder {
+        font-size: 20px !important;
+      }
       &--control-in {
         .text-24();
       }

src/views/vipLife/components/SpuList.vue

@@ -143,17 +143,6 @@ export default {
     display: flex;
     align-items: center;
     position: relative;
-    // &::before,
-    // &::after {
-    //   content: ' ';
-    //   flex-shrink: 0;
-    //   display: block;
-    //   width: @padding-sm;
-    //   height: 97px;
-    // }
-    // &::after {
-    //   width: @padding-unit;
-    // }
     &-item {
       height: 97px;
       width: 95px;

src/views/vipLife/index.vue

@@ -67,7 +67,8 @@ export default {
   computed: {
     disabled() {
       return (
-        (this.spuInfo.rechargeAccountType !== 2 && !this.account) ||
+        (this.spuInfo.rechargeAccountType !== 2 &&
+          (!this.account || (this.spuInfo.type !== 101 && !isPhone(this.account)))) ||
         !this.skuList.length ||
         !this.skuInfo.hasStock
       );
@@ -162,11 +163,6 @@ export default {
       this.showLoading = false;
     },
     goOrder: throttle(async function() {
-      if (!this.account && this.spuInfo.rechargeAccountType !== 2)
-        return this.$toast.fail('请填写账号！');
-      if (this.spuInfo.type !== 101 && !isPhone(this.account)) {
-        return this.$toast.fail('请填写正确的手机号！');
-      }
       if (!this.skuInfo.skuNo) return this.$toast.fail('请选择类型！');
       this.$track.registeredEvents('h5_OtherRechargePageRechargeNowClick', {
         classify_name: this.spuData[this.currentTab - 1].name,