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

Conflicts:
	src/views/home/index.less
	src/views/vipLife/components/AccountInput.vue

src/style/index.less

@@ -104,7 +104,6 @@ strong {
 }
 .Vl__panel-tips {
   color: @text-grey;
-  min-height: 143px;
   p {
   .text-14();
   margin-bottom: @padding-xs;

src/style/var.less

@@ -62,9 +62,9 @@
 @padding-xl: @padding-unit * 8;
 
 // Font
-@font-size-list: 10,11, 12, 13, 14, 15, 16, 17, 18, 20, 24, 26, 28, 30, 52;
+@font-size-list: 10,11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28, 30, 52;
 
-.generate-text(14);
+.generate-text(15);
 .generate-text(@n, @i: 1) when (@i =< @n) {
   @font: extract(@font-size-list, @i);
   .text-@{font} {

src/views/vipLife/components/AccountInput.vue

@@ -56,6 +56,9 @@ export default {
     };
   },
   computed: {
+    maxLength() {
+      return this.info.type !== 101 ? 13 : 30;
+    },
     accountMask: {
       get() {
         return this.info.type !== 101 ? this.phoneFormat(this.value) : this.value;
@@ -81,6 +84,7 @@ export default {
 <style lang="less" scoped>
 .Vl {
   &__account {
+    padding: 0 @padding-lg;
     position: relative;
     @{deep} .cr-field {
       padding: @padding-xs + 2 0;

src/views/vipLife/components/SkuList.vue

@@ -13,8 +13,12 @@
         }"
         @click="item.hasStock && parent.handleSkuSelected(item, index)"
       >
-        <div v-font-resize class="Vl__sku-name">
-          {{ props.threeCol ? item.salePrice : item.skuName }}{{ props.showUnit ? '元' : '' }}
+        <div v-if="props.showUnit" class="Vl__sku-name unit">
+          {{ props.threeCol ? item.salePrice : item.skuName }}
+          <span>元</span>
+        </div>
+        <div v-else v-font-resize class="Vl__sku-name">
+          {{ props.threeCol ? item.salePrice : item.skuName }}
         </div>
         <div class="Vl__sku-price">售价{{ item.price }}元</div>
       </div>
@@ -95,7 +99,7 @@ export default {
         content: ' ';
         background: @gray-2;
         .text-10();
-        border-radius: 0 @border-radius-sm - 2 0 @border-radius-sm - 2;
+        border-radius: 0 @border-radius-sm - 4 0 @border-radius-sm - 2;
         padding: 0 @padding-unit;
         position: absolute;
         top: 0;
@@ -150,6 +154,12 @@ export default {
       -webkit-line-clamp: 1;
       flex-shrink: 0;
       overflow: hidden;
+      &.unit {
+        .text-22();
+      }
+      span {
+        .text-14();
+      }
     }
     &-price {
       color: @gray-5;

src/views/vipLife/components/SpuList.vue

@@ -170,6 +170,10 @@ export default {
       &_active {
         box-shadow: 0px 2px 12px 0px rgba(100, 101, 102, 0.12);
         transform: scale(1.03);
+        .Vl__spu-name {
+          font-weight: @font-weight-bold;
+          color: @text-color;
+        }
       }
     }
     &-name {

src/views/vipLife/index.less

+@import '../../style/mixins.less';
 @bottom-height: 60px;
+.vip-life {
+  overflow: hidden;
+}
 @{deep} .Vl {
+  &__tabs {
+    .cr-tabs__item--active {
+      .cr-tabs__text {
+        font-weight: bold;
+      }
+    }
+  }
   &__panel {
+    height: 100%;
     background-color: @white;
     border-radius: @border-radius-lx @border-radius-lx 0 0;
-    padding: @padding-lg @padding-lg @bottom-height;
-    min-height: 340px;
-    position: relative;
+    padding-top: @padding-lg;
     &-placeholder {
       margin-bottom: -@padding-lg;
     }
@@ -13,7 +23,18 @@
       color: @text-color;
       .text-16();
       font-weight: @font-weight-bold - 100;
-      margin: @padding-lg + @padding-unit 0 @padding-sm;
+      padding: @padding-lg + @padding-unit 0 @padding-sm;
+    }
+    &-content {
+      height: calc(100vh - @bottom-height - 121px - 44px - 48px);
+      padding: 0 @padding-lg;
+      overflow-y: scroll;
+      &::-webkit-scrollbar {
+        display:none;
+      }
+      &.has-input {
+        height: 47.6vh;
+      }
     }
     &-loading {
       position: absolute;
@@ -44,6 +65,13 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
+    .iphonex-fix-padding();
+    .cr-button {
+     font-size: 16px;
+     span {
+       font-weight: @font-weight-bold;
+     }
+    }
   }
 
 }
\ No newline at end of file

src/views/vipLife/index.vue

 <template>
-  <div class="page page__nopad">
-    <cr-tabs v-model="currentTab" @click="handleTabChange">
+  <div class="page page__nopad vip-life">
+    <cr-tabs v-model="currentTab" class="Vl__tabs" @click="handleTabChange">
       <cr-tab v-for="(item, index) in spuData" :key="index" :title="item.name" :name="+item.type" />
     </cr-tabs>
     <spu-list ref="spuList" :list="spuList" :info="spuInfo" @scroll="handleSpuScroll" />
@@ -9,18 +9,20 @@
         <account-input v-if="spuInfo.rechargeAccountType !== 2" v-model="account" :info="spuInfo" />
         <div v-else class="Vl__panel-placeholder" />
       </template>
-      <div class="Vl__panel-title">充值类型</div>
-      <sku-list :list="skuList" :info="skuInfo" :show-unit="false" />
-      <div v-show="showLoading" class="Vl__panel-loading">
-        <cr-loading color="#ec1500" />
-      </div>
-      <template v-if="tips">
-        <div class="Vl__panel-title">{{ tips.title }}</div>
-        <div class="Vl__panel-tips" v-html="tips.content" />
-      </template>
-      <div class="Vl__panel-title">温馨提示</div>
-      <div class="Vl__panel-tips">
-        <p>充值类商品售出后无法进行退换，非充值用户请谨慎购买。</p>
+      <div class="Vl__panel-content" :class="{ 'has-input': spuInfo.rechargeAccountType !== 2 }">
+        <div class="Vl__panel-title">充值类型</div>
+        <sku-list :list="skuList" :info="skuInfo" :show-unit="false" />
+        <div v-show="showLoading" class="Vl__panel-loading">
+          <cr-loading color="#ec1500" />
+        </div>
+        <template v-if="tips">
+          <div class="Vl__panel-title">{{ tips.title }}</div>
+          <div class="Vl__panel-tips" v-html="tips.content" />
+        </template>
+        <div class="Vl__panel-title">温馨提示</div>
+        <div class="Vl__panel-tips">
+          <p>充值类商品售出后无法进行退换，非充值用户请谨慎购买。</p>
+        </div>
       </div>
     </div>
     <div class="Vl__bottom">
@@ -40,6 +42,7 @@ import SpuList from './components/SpuList.vue';
 import SkuList from './components/SkuList.vue';
 import AccountInput from './components/AccountInput.vue';
 import { throttle } from '@/service/utils.service';
+import { isPhone } from '@/service/validation.service';
 import { ITEM_WIDTH } from './components/constant';
 export default {
   name: 'VipLife',
@@ -161,6 +164,9 @@ export default {
     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,