驼驼-商城

htmldev/loan/src/views/loan/calculator/index.vue

@@ -1,13 +1,441 @@
 <template>
-  <div>calculator</div>
+  <div class="ttyf-wrapper">
+    <!--信息编辑-->
+    <van-form @submit="onSubmit"
+              ref="myVanform">
+      <!--标题：妥妥计算器-->
+      <img class="title" src="" alt="">
+      <van-field
+        readonly
+        clickable
+        name="CompanyNature"
+        :value="CompanyNature"
+        :border="false"
+        :right-icon="iconOfarrow"
+        placeholder="请选择贷款类型"
+        class="ttyf-van-cell"
+        @click="showPicker0 = true">
+        <template #label>
+          <p>
+              <span v-for="(str, index) in '贷款类型'"
+                    :key="index">{{ str }}</span>
+          </p>
+        </template>
+      </van-field>
+      <van-field
+        v-model="Cellphone"
+        type="tel"
+        name="Cellphone"
+        :border="false"
+        placeholder="请输入金额"
+        class="ttyf-van-cell ttyf-no-arrow"
+        @input="Cellphone = Cellphone.replace(/^[0]|[^\d]/, '')">
+        <template #label>
+          <p>
+            <span v-for="(str, index) in '公积金贷款金额(万)'"
+                  :key="index">{{ str }}</span>
+          </p>
+        </template>
+      </van-field>
+      <van-field
+        readonly
+        clickable
+        name="CompanyNature"
+        :value="CompanyNature"
+        :border="false"
+        :right-icon="iconOfarrow"
+        placeholder="请选择贷款年限"
+        class="ttyf-van-cell"
+        @click="showPicker0 = true">
+        <template #label>
+          <p>
+              <span v-for="(str, index) in '贷款年限'"
+                    :key="index">{{ str }}</span>
+          </p>
+        </template>
+      </van-field>
+      <van-field
+        readonly
+        clickable
+        name="CompanyNature"
+        :value="CompanyNature"
+        :border="false"
+        :right-icon="iconOfarrow"
+        placeholder="请选择利率"
+        class="ttyf-van-cell"
+        @click="showPicker0 = true">
+        <template #label>
+          <p>
+              <span v-for="(str, index) in '公积金贷款利率(%)'"
+                    :key="index">{{ str }}</span>
+          </p>
+        </template>
+      </van-field>
+      <van-field
+        v-model="Cellphone"
+        type="tel"
+        name="Cellphone"
+        :border="false"
+        placeholder="请输入您的商贷金额"
+        class="ttyf-van-cell ttyf-no-arrow"
+        @input="Cellphone = Cellphone.replace(/^[0]|[^\d]/, '')">
+        <template #label>
+          <p>
+            <span v-for="(str, index) in '商贷金额(万)'"
+                  :key="index">{{ str }}</span>
+          </p>
+        </template>
+      </van-field>
+      <van-field
+        readonly
+        clickable
+        name="CompanyNature"
+        :value="CompanyNature"
+        :border="false"
+        :right-icon="iconOfarrow"
+        placeholder="请选择贷款年限"
+        class="ttyf-van-cell"
+        @click="showPicker0 = true">
+        <template #label>
+          <p>
+              <span v-for="(str, index) in '贷款年限'"
+                    :key="index">{{ str }}</span>
+          </p>
+        </template>
+      </van-field>
+      <van-field
+        readonly
+        clickable
+        name="CompanyNature"
+        :value="CompanyNature"
+        :border="false"
+        :right-icon="iconOfarrow"
+        placeholder="请选择利率"
+        class="ttyf-van-cell"
+        @click="showPicker0 = true">
+        <template #label>
+          <p>
+              <span v-for="(str, index) in '商贷利率(%)'"
+                    :key="index">{{ str }}</span>
+          </p>
+        </template>
+      </van-field>
+      <van-field
+        readonly
+        clickable
+        name="CompanyNature"
+        :value="CompanyNature"
+        :border="false"
+        :right-icon="iconOfarrow"
+        placeholder="请选择还款方式"
+        class="ttyf-van-cell"
+        @click="showPicker0 = true">
+        <template #label>
+          <p>
+              <span v-for="(str, index) in '还款方式'"
+                    :key="index">{{ str }}</span>
+          </p>
+        </template>
+      </van-field>
+      <van-field
+        readonly
+        clickable
+        name="CompanyNature"
+        :value="CompanyNature"
+        :border="false"
+        placeholder=""
+        class="ttyf-van-cell"
+        @click="showPicker0 = true">
+        <template #label>
+          <p>
+              <span v-for="(str, index) in '每月还款(元)'"
+                    :key="index">{{ str }}</span>
+          </p>
+        </template>
+      </van-field>
+      <van-field
+        readonly
+        clickable
+        name="CompanyNature"
+        :value="CompanyNature"
+        :border="false"
+        placeholder=""
+        class="ttyf-van-cell"
+        @click="showPicker0 = true">
+        <template #label>
+          <p>
+              <span v-for="(str, index) in '总共支付利息(元)'"
+                    :key="index">{{ str }}</span>
+          </p>
+        </template>
+      </van-field>
+      <div class="footer">
+        <p>
+          <span>妥妥可帮您节省利息</span>
+          <span>23,847.84</span>
+          <span>元</span>
+        </p>
+        <a href="javascript:;">点击查看详情></a>
+      </div>
+    </van-form>
+    <!--企业性质选择-->
+    <van-popup v-model="showPicker0"
+               :close-on-click-overlay="false"
+               @click-overlay="onCancel0"
+               position="bottom">
+      <van-picker
+        show-toolbar
+        :columns="columns0"
+        :default-index="defaultIndex0"
+        @confirm="onConfirm0"
+        @cancel="onCancel0"
+        ref="myPicker0"
+      />
+    </van-popup>
+    <!--企业规模选择-->
+    <van-popup v-model="showPicker1"
+               :close-on-click-overlay="false"
+               @click-overlay="onCancel1"
+               position="bottom">
+      <van-picker
+        show-toolbar
+        :columns="columns1"
+        :default-index="defaultIndex1"
+        @confirm="onConfirm1"
+        @cancel="onCancel1"
+        ref="myPicker1"
+      />
+    </van-popup>
+  </div>
 </template>
 
 <script>
+import { Form, Field, Popup, Picker } from 'vant'
+
+const COLUMNS0 = ['民营', '国营', '个体工商户', '其它']
+const COLUMNS1 = ['0~20人', '20人-99人', '99人~200人', '200人~500人', '500人以上']
 export default {
-  name: 'index'
+  name: 'index',
+  components: {
+    'van-form': Form,
+    'van-field': Field,
+    'van-popup': Popup,
+    'van-picker': Picker
+  },
+  props: {
+    role: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+  data () {
+    return {
+      Cellphone: '', // 联系人手机号
+      CompanyNature: '', // 企业性质
+      showPicker0: false,
+      columns0: COLUMNS0,
+      defaultIndex0: 0,
+      showPicker1: false,
+      columns1: COLUMNS1,
+      defaultIndex1: 0
+    }
+  },
+  computed: {
+    iconOfarrow () {
+      return require('./image/btn_next@2x.png')
+    },
+    verify () {
+      const errorList = []
+
+      if (!/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(this.Cellphone)) {
+        errorList.push('请输入您的手机号')
+      }
+
+      return errorList
+    }
+  },
+  activated () {
+    if (!this.$route.meta.isUseCache) {
+      this.Cellphone = ''
+      this.CompanyNature = ''
+      this.showPicker0 = false
+      this.columns0 = COLUMNS0
+      this.defaultIndex0 = 0
+      this.showPicker1 = false
+      this.columns1 = COLUMNS1
+      this.defaultIndex1 = 0
+    }
+    this.$route.meta.isUseCache = false
+  },
+  methods: {
+    onConfirm0 (value, index) {
+      this.CompanyNature = value
+      this.showPicker0 = false
+    },
+    onCancel0 () {
+      const index = this.columns0.findIndex(item => item === this.CompanyNature)
+      if (index > -1) {
+        this.$refs.myPicker0.setIndexes([index])
+      }
+      this.showPicker0 = false
+    },
+    onConfirm1 (value, index) {
+      this.CompanySize = value
+      this.showPicker1 = false
+    },
+    onCancel1 () {
+      const index = this.columns1.findIndex(item => item === this.CompanySize)
+      if (index > -1) {
+        this.$refs.myPicker1.setIndexes([index])
+      }
+      this.showPicker1 = false
+    },
+    onSubmit (values = {}) {
+    }
+  },
+  beforeDestroy () {
+    this.Compressor = null
+  },
+  beforeRouteLeave (to, from, next) {
+    if (['agreement'].findIndex(item => item === to.name) > -1) {
+      this.$route.meta.isUseCache = true
+    }
+    next()
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+.ttyf-wrapper {
+  padding-top: 12px;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 356px;
+  border-radius: 16px;
+  padding: 4px 0 11px;
+  margin: 0 auto;
+  background: #fff;
+
+  img.title {
+    width: 349px;
+    height: 56px;
+    margin-bottom: 16px;
+  }
+}
+
+.ttyf-van-cell {
+  width: 327px;
+  padding: 13px 0;
+  margin-bottom: 1px;
+  border-radius: 4px;
+  border: 1px solid #E8E8E8;
+
+  &.ttyf-no-arrow {
+    ::v-deep .van-cell__value {
+      padding: 0 32px 0 0;
+    }
+  }
+
+  ::v-deep .van-field__label {
+    position: relative;
+    left: 0;
+    top: 0;
+    flex: 1;
+    padding: 0 0 0 12px;
+    margin-right: 0;
+
+    p {
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+    }
+
+    span {
+      font-size: 16px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333333;
+      line-height: 22px;
+    }
+  }
 
+  ::v-deep .van-cell__value {
+    padding: 0 10px 0 0;
+
+    input {
+      height: 22px;
+      font-size: 14px;
+      color: #333;
+      -webkit-text-fill-color: #333;
+      opacity: 1;
+      background: transparent;
+      text-align: right;
+
+      &::-webkit-input-placeholder {
+        -webkit-text-fill-color: #ccc;
+        opacity: 1;
+        color: #ccc;
+      }
+    }
+
+    .van-field__right-icon {
+      margin: 0;
+      padding: 0;
+
+      .van-icon {
+        font-size: 0;
+      }
+
+      .van-icon__image {
+        display: block;
+        width: 22px;
+        height: 22px;
+      }
+    }
+  }
+}
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  width: 327px;
+  height: 65px;
+  background: #FEF0E7;
+  border-radius: 4px;
+  padding-right: 15px;
+  margin-top: 13px;
+  text-align: right;
+
+  p {
+    display: flex;
+    align-items: center;
+
+    span:nth-of-type(1),
+    span:nth-of-type(3) {
+      font-size: 12px;
+      color: #FA5151;
+      line-height: 17px;
+    }
+
+    span:nth-of-type(2) {
+      font-size: 18px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #FF655E;
+      line-height: 25px;
+    }
+  }
+
+  a {
+    font-size: 12px;
+    color: #FA5151;
+    line-height: 17px;
+  }
+}
 </style>