shouye update

src/views/login/index.vue

@@ -369,7 +369,6 @@ export default {
       window.open('https://beian.mps.gov.cn/#/query/webSearch?code=61019102000586')
     },
     toPage(val) {
-      console.log(val)
       if (val === '1') {
         window.open('https://changyin.tech/', '_blank')
       }

src/views/login/mobileComponents/TradeSince.vue

@@ -156,7 +156,7 @@
     </div>
     <h3 style="margin: 7.5vw 0 5.5vw;">服务流程</h3>
     <div class="service-list">
-      <div v-for="item in liuchengList1" :key="item.name" class="service-item" :style="{backgroundImage: `url(${item.imgUrl})`}">
+      <div v-for="item in liuchengList1" :key="item.name" class="service-item" :class="item.name === '贸易订单' ? 'bigger-bac' : ''" :style="{backgroundImage: `url(${item.imgUrl})`}">
         {{ item.name }}
       </div>
     </div>
@@ -310,7 +310,7 @@ export default {
         },
         {
           name: '贸易订单',
-          imgUrl: require('@/assets/login/kua-pro-3.svg')
+          imgUrl: require('@/assets/login/kua-pro-8.svg')
         },
         {
           name: '物流出运',
@@ -320,11 +320,11 @@ export default {
       liuchengList2: [
         {
           name: '退税申报',
-          imgUrl: require('@/assets/login/kua-pro-5.svg')
+          imgUrl: require('@/assets/login/kua-pro-6.svg')
         },
         {
           name: '融资匹配',
-          imgUrl: require('@/assets/login/kua-pro-6.svg')
+          imgUrl: require('@/assets/login/kua-pro-5.svg')
         },
         {
           name: '清分结算',
@@ -332,7 +332,7 @@ export default {
         },
         {
           name: '账款催收',
-          imgUrl: require('@/assets/login/kua-pro-7.svg')
+          imgUrl: require('@/assets/login/kua-pro-9.svg')
         }
       ],
       serviceIndex: 0,
@@ -616,19 +616,22 @@ export default {
       left: 13vw;
       top: 50%;
     }
-    .service-long-item::after {
-      content: '';
-      display: inline-block;
-      width: 20vw;
-      height: 1px;
-      background-color: #D9D9D9;
-      position: absolute;
-      left: 13vw;
-      top: 50%;
-    }
+    // .service-long-item::after {
+    //   content: '';
+    //   display: inline-block;
+    //   width: 20vw;
+    //   height: 1px;
+    //   background-color: #D9D9D9;
+    //   position: absolute;
+    //   left: 13vw;
+    //   top: 50%;
+    // }
     .service-item:last-child::after {
       display: none;
     }
+    .bigger-bac {
+      background-size: 4.3vw;
+    }
   }
 }
 </style>

src/views/login/pcComponents/TradeSince.vue

@@ -81,54 +81,63 @@
         label-position="top"
         class="form-box"
       >
-        <el-form-item label="1、进口商所在的国家和地区" prop="type1">
-          <el-radio-group v-model="form2.type1">
-            <el-radio label="15">亚洲</el-radio>
-            <el-radio label="16">欧洲</el-radio>
-            <el-radio label="17">非洲</el-radio>
-            <el-radio label="18">北美洲</el-radio>
-            <el-radio label="19">南美洲</el-radio>
-            <el-radio label="11">大洋洲</el-radio>
-            <el-radio label="12">南极洲</el-radio>
+        <el-form-item label="1、进口商所在的国家和地区" prop="region">
+          <el-radio-group v-model="form2.region" @change="regionChange">
+            <el-radio label="Asia">亚洲</el-radio>
+            <el-radio label="Europe">欧洲</el-radio>
+            <el-radio label="Africa">非洲</el-radio>
+            <el-radio label="NAmerica">北美洲</el-radio>
+            <el-radio label="SAmerica">南美洲</el-radio>
+            <el-radio label="Oceania">大洋洲</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="2、进口商有无官方网站?" prop="type2">
-          <el-radio-group v-model="form2.type2">
-            <el-radio label="17">有</el-radio>
-            <el-radio label="18">无</el-radio>
+        <el-form-item label="" prop="country">
+          <el-select v-model="form2.country" placeholder="请选择国家" @change="moneyUnit = ''; money = '--'">
+            <el-option
+              v-for="item in countryList"
+              :key="item.code"
+              :label="item.name"
+              :value="item.code"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="2、进口商有无官方网站?" prop="officialWebsite">
+          <el-radio-group v-model="form2.officialWebsite" @change="moneyUnit = ''; money = '--'">
+            <el-radio label="1">有</el-radio>
+            <el-radio label="2">无</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="3、进口商企业类型" prop="type3">
-          <el-radio-group v-model="form2.type3">
-            <el-radio label="19">生产型</el-radio>
-            <el-radio label="21">贸易型</el-radio>
-            <el-radio label="22">服务类</el-radio>
-            <el-radio label="23">其他类</el-radio>
+        <el-form-item label="3、进口商企业类型" prop="buyerEnterpriseType">
+          <el-radio-group v-model="form2.buyerEnterpriseType" @change="moneyUnit = ''; money = '--'">
+            <el-radio label="1">生产型</el-radio>
+            <el-radio label="2">贸易型</el-radio>
+            <el-radio label="3">服务类</el-radio>
+            <el-radio label="4">其他类</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="4、与进口商合作的时间?" prop="type4">
-          <el-radio-group v-model="form2.type4">
-            <el-radio label="21">6个月及以下</el-radio>
-            <el-radio label="22">6个月-1年 </el-radio>
-            <el-radio label="23">1-3年</el-radio>
-            <el-radio label="24">3年及以上</el-radio>
+        <el-form-item label="4、与进口商合作的时间?" prop="buyerCooperationTime">
+          <el-radio-group v-model="form2.buyerCooperationTime" @change="moneyUnit = ''; money = '--'">
+            <el-radio label="1">6个月及以下</el-radio>
+            <el-radio label="2">6个月-1年 </el-radio>
+            <el-radio label="3">1-3年</el-radio>
+            <el-radio label="4">3年及以上</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="5、进口商历史最长回款账期" prop="type5">
-          <el-radio-group v-model="form2.type5">
-            <el-radio label="23">无回款</el-radio>
-            <el-radio label="24">30—90天 </el-radio>
-            <el-radio label="25">90—120天</el-radio>
-            <el-radio label="26">120—180天</el-radio>
-            <el-radio label="27">180天及以上</el-radio>
+        <el-form-item label="5、进口商历史最长回款账期" prop="buyerMaximumPaybackPeriod">
+          <el-radio-group v-model="form2.buyerMaximumPaybackPeriod" @change="moneyUnit = ''; money = '--'">
+            <el-radio label="1">无回款</el-radio>
+            <el-radio label="2">30—90天 </el-radio>
+            <el-radio label="3">90—120天</el-radio>
+            <el-radio label="4">120—180天</el-radio>
+            <el-radio label="5">180天及以上</el-radio>
           </el-radio-group>
         </el-form-item>
         <template v-if="showResult">
-          <h5 class="caculate-money">预估授信额度：<span>$ 1,000,000.00</span></h5>
+          <h5 class="caculate-money">预估授信额度：<span>{{ moneyUnit }} {{ money }}</span></h5>
           <div class="caculate-desc">此额度只是初步估算所得，最终的授信额度将根据您的具体情况和申请资料综合确定。</div>
         </template>
-        <el-button v-if="!showResult" type="primary" @click="confirm">提交</el-button>
-        <el-button v-if="showResult" type="primary" @click="toRegister">去注册</el-button>
+        <el-button v-if="money === '--'" type="primary" @click="confirm">提交</el-button>
+        <el-button v-if="money !== '--'" type="primary" @click="toRegister">去注册</el-button>
       </el-form>
     </div>
     <div style="background-color: #F9FAFB; margin-top: 7vw; padding-bottom: 4.5vw;">
@@ -145,7 +154,7 @@
     </div>
     <h3 style="margin: 7.5vw 0 5.5vw;">服务流程</h3>
     <div class="service-list">
-      <div v-for="(item, index) in liuchengList" :key="item.name" class="service-item" :class="index <= serviceIndex ? 'active-service-item' : ''" :style="{backgroundImage: index <= serviceIndex ? `url(${item.imgUrl})` : ''}">
+      <div v-for="(item, index) in liuchengList" :key="item.name" class="service-item" :class="index <= serviceIndex ? item.name === '贸易订单' || item.name === '账款催收' ? 'active-service-item bigger-bac' : 'active-service-item' : ''" :style="{backgroundImage: index <= serviceIndex ? `url(${item.imgUrl})` : ''}">
         {{ item.name }}
       </div>
     </div>
@@ -153,6 +162,7 @@
 </template>
 
 <script>
+import { getCountryByRegoin, getCreditQuota } from '@/api/common'
 export default {
   data() {
     return {
@@ -196,26 +206,30 @@ export default {
       },
       rule1: {},
       form2: {
-        type1: '',
-        type2: '',
-        type3: '',
-        type4: '',
-        type5: ''
+        region: '',
+        officialWebsite: '',
+        buyerEnterpriseType: '',
+        buyerCooperationTime: '',
+        buyerMaximumPaybackPeriod: '',
+        country: ''
       },
       rule2: {
-        type1: [
+        region: [
           { required: true, message: '请选择进口商所在的国家和地区', trigger: 'change' }
         ],
-        type2: [
+        country: [
+          { required: true, message: '请选择进口商所在的国家和地区', trigger: 'blur' }
+        ],
+        officialWebsite: [
           { required: true, message: '请选择进口商有无官方网站', trigger: 'change' }
         ],
-        type3: [
+        buyerEnterpriseType: [
           { required: true, message: '请选择进口商企业类型', trigger: 'change' }
         ],
-        type4: [
+        buyerCooperationTime: [
           { required: true, message: '请选择与进口商合作的时间', trigger: 'change' }
         ],
-        type5: [
+        buyerMaximumPaybackPeriod: [
           { required: true, message: '请选择进口商历史最长回款账期', trigger: 'change' }
         ]
       },
@@ -292,7 +306,7 @@ export default {
         },
         {
           name: '贸易订单',
-          imgUrl: require('@/assets/login/kua-pro-3.svg')
+          imgUrl: require('@/assets/login/kua-pro-8.svg')
         },
         {
           name: '物流出运',
@@ -300,11 +314,11 @@ export default {
         },
         {
           name: '退税申报',
-          imgUrl: require('@/assets/login/kua-pro-5.svg')
+          imgUrl: require('@/assets/login/kua-pro-6.svg')
         },
         {
           name: '融资匹配',
-          imgUrl: require('@/assets/login/kua-pro-6.svg')
+          imgUrl: require('@/assets/login/kua-pro-5.svg')
         },
         {
           name: '清分结算',
@@ -312,12 +326,15 @@ export default {
         },
         {
           name: '账款催收',
-          imgUrl: require('@/assets/login/kua-pro-7.svg')
+          imgUrl: require('@/assets/login/kua-pro-9.svg')
         }
       ],
-      serviceIndex: 0,
+      serviceIndex: 9,
       interval: null,
-      showResult: false
+      showResult: false,
+      countryList: [],
+      money: 0,
+      moneyUnit: ''
     }
   },
   computed: {
@@ -326,12 +343,12 @@ export default {
     }
   },
   mounted() {
-    if (!this.interval) {
-      const that = this
-      this.interval = setInterval(() => {
-        that.serviceIndex = that.serviceIndex === 6 ? 0 : that.serviceIndex + 1
-      }, 2000)
-    }
+    // if (!this.interval) {
+    //   const that = this
+    //   this.interval = setInterval(() => {
+    //     that.serviceIndex = that.serviceIndex === 6 ? 0 : that.serviceIndex + 1
+    //   }, 2000)
+    // }
   },
   destroyed() {
     if (this.interval) {
@@ -348,6 +365,8 @@ export default {
       Object.entries(this.form2).forEach(item => {
         this.form2[item[0]] = ''
       })
+      this.moneyUnit = ''
+      this.money = '--'
       this.bacIndex = val
     },
     toRegister() {
@@ -359,9 +378,32 @@ export default {
     confirm() {
       this.$refs.tab2.validate(flag => {
         if (flag) {
-          this.showResult = true
+          this.calcuteMethod()
         }
       })
+    },
+    // 查询国家
+    regionChange() {
+      if (this.form2.region) {
+        this.moneyUnit = ''
+        this.money = '--'
+        this.form2.country = ''
+        const postData = new FormData()
+        postData.append('continent', this.form2.region)
+        getCountryByRegoin(postData).then(res => {
+          this.countryList = res.data || []
+        })
+      }
+    },
+    // 计算授信额度
+    calcuteMethod() {
+      const data = { ...this.form2 }
+      getCreditQuota(data).then(res => {
+        this.$message.success('计算成功')
+        this.money = res.data.amount / 10000 + '万'
+        this.moneyUnit = res.data.currency === 'USD' ? '$ ' : '￥ '
+        this.showResult = true
+      })
     }
   }
 }
@@ -593,6 +635,10 @@ export default {
     .active-service-item::after {
       left: 6.3vw;
     }
+    .bigger-bac {
+      background-size: 1.6vw;
+      background-position: 2.4vw 1.2vw;
+    }
   }
 }
 </style>