Merge branch 'dev1.0.3-login-temp' of http://222.90.211.174:3000/suf/factoring-trade-c-front-end into dev1.0.3-login-temp

src/router/index.js

@@ -23,22 +23,40 @@ export const constantRoutes = [
     component: () => import('@/views/login/index'),
     hidden: true,
     redirect: '/login/tradeSinceLink',
+    // children: [
+    //   {
+    //     path: 'tradeSinceLink',
+    //     component: () => import('@/views/login/components/TradeSinceLink.vue')
+    //   },
+    //   {
+    //     path: 'qualificationsHonors',
+    //     component: () => import('@/views/login/components/QualificationsHonors.vue')
+    //   },
+    //   {
+    //     path: 'aboutUs',
+    //     component: () => import('@/views/login/components/AboutUs.vue')
+    //   },
+    //   {
+    //     path: 'contactUs',
+    //     component: () => import('@/views/login/components/ContactUs.vue')
+    //   }
+    // ]
     children: [
       {
         path: 'tradeSinceLink',
-        component: () => import('@/views/login/components/TradeSinceLink.vue')
+        component: () => import('@/views/login/components/TradeSinceLinkTemp.vue')
       },
       {
         path: 'qualificationsHonors',
-        component: () => import('@/views/login/components/QualificationsHonors.vue')
+        component: () => import('@/views/login/components/QualificationsHonorsTemp.vue')
       },
       {
         path: 'aboutUs',
-        component: () => import('@/views/login/components/AboutUs.vue')
+        component: () => import('@/views/login/components/AboutUsTemp.vue')
       },
       {
         path: 'contactUs',
-        component: () => import('@/views/login/components/ContactUs.vue')
+        component: () => import('@/views/login/components/ContactUsTemp.vue')
       }
     ]
   },

src/views/login/components/ContactUsTemp.vue

@@ -0,0 +1,503 @@
+<template>
+  <div class="contact-us">
+    <div class="top-banner" />
+    <div class="from-cont">
+      <div class="form-all">
+        <div class="form-line" />
+        <div class="form-top">联系我们</div>
+        <div class="form-title">我们的专业团队将及时解决您的问题</div>
+        <div class="input-full">
+          <div class="ipnut-title">企业名称</div>
+          <el-input v-model="contactParam.enterpriceCn" type="text" class="input-cont" />
+        </div>
+        <div class="input-full">
+          <div class="ipnut-title">姓名</div>
+          <el-input v-model="contactParam.contactName" type="text" class="input-cont" />
+        </div>
+        <div class="input-full">
+          <div class="ipnut-title">电话</div>
+          <el-input v-model="contactParam.phoneNumber" type="text" class="input-cont" />
+        </div>
+        <div class="input-full">
+          <div class="ipnut-title">职务</div>
+          <el-input v-model="contactParam.contactPost" type="text" class="input-cont" />
+        </div>
+        <div class="input-full">
+          <div class="ipnut-title">邮箱</div>
+          <el-input v-model="contactParam.email" type="text" class="input-cont" />
+        </div>
+        <!-- <div class="input-flex">
+          <div>
+            <div class="ipnut-title">姓名</div>
+            <el-input v-model="contactParam.contactName" type="text" class="input-cont" />
+          </div>
+          <div>
+            <div class="ipnut-title">职务</div>
+            <el-input v-model="contactParam.contactPost" type="text" class="input-cont" />
+          </div>
+        </div>
+        <div class="input-flex">
+          <div>
+            <div class="ipnut-title">电话</div>
+            <el-input v-model="contactParam.phoneNumber" type="text" class="input-cont" />
+          </div>
+          <div>
+            <div class="ipnut-title">邮箱</div>
+            <el-input v-model="contactParam.email" type="text" class="input-cont" />
+          </div>
+        </div>
+        <div class="input-flex">
+          <div>
+            <div class="ipnut-title">主营品类</div>
+            <el-input v-model="contactParam.mainCategories" type="text" class="input-cont" />
+          </div>
+          <div>
+            <div class="ipnut-title">年销售额（万元）</div>
+            <el-input v-model="contactParam.annualSalesRevenue" type="text" class="input-cont" />
+          </div>
+        </div>
+        <div class="input-full">
+          <div class="ipnut-title">主要客户</div>
+          <el-input v-model="contactParam.mainCustomers" type="text" class="input-cont" />
+        </div>
+        <div class="input-flex">
+          <div>
+            <div class="ipnut-title">预估账期</div>
+            <el-input v-model="contactParam.estimatedAccountingPeriod" type="text" class="input-cont" />
+          </div>
+          <div>
+            <div class="ipnut-title">应收余额（万元）</div>
+            <el-input v-model="contactParam.accountsReceivableBalance" type="text" class="input-cont" />
+          </div>
+        </div> -->
+        <div class="from-btn" @click="submitForm">
+          提交
+        </div>
+      </div>
+      <div class="form-img form-img-mobile" />
+    </div>
+    <div class="card-cont">
+      <div v-for="item in cardList" :key="item.address" class="card-item">
+        <div class="card-item-name">
+          {{ item.companyName }}
+        </div>
+        <div class="card-item-desc">
+          {{ item.address }}
+        </div>
+        <template v-if="mapLoadError">
+          <div class="card-item-map">
+            <img :src="item.mapUrl">
+          </div>
+        </template>
+        <template v-else>
+          <div :id="item.mapName" class="card-item-map" />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import loadMap from '@/utils/loadMap'
+import { contactUs } from '@/api/user'
+
+export default {
+  data() {
+    return {
+      contactParam: {
+        enterpriceCn: '',
+        contactName: '',
+        contactPost: '',
+        phoneNumber: '',
+        email: '',
+        mainCategories: '',
+        annualSalesRevenue: '',
+        mainCustomers: '',
+        estimatedAccountingPeriod: '',
+        accountsReceivableBalance: ''
+      },
+      cardList: [
+        {
+          companyName: '西安总部',
+          address: '西安市经济技术开发区凤城二路51号白桦林金融创新中心D栋13层',
+          mapUrl: require('@/assets/contactUs/map_1.png'),
+          mapName: 'xian'
+        },
+        {
+          companyName: '上海中心',
+          address: '上海市普陀区曹杨路1888号星光耀广场1号楼13A19室',
+          mapUrl: require('@/assets/contactUs/map_2.png'),
+          mapName: 'shanghai'
+        },
+        {
+          companyName: '深圳中心',
+          address: '深圳市前海深港合作区南山街道听海大道5059号前海鸿荣源中心A座1601B',
+          mapUrl: require('@/assets/contactUs/map_3.jpg'),
+          mapName: 'shenzhen'
+        }
+      ],
+      mapLoadError: false
+    }
+  },
+  computed: {
+
+  },
+  mounted() {
+    loadMap().then((res) => {
+      this.initMap()
+    }, (err) => {
+      console.log(err)
+      this.mapLoadError = true
+    })
+  },
+  methods: {
+    // 联系我们提交
+    submitForm() {
+      if (this.contactParam.phoneNumber === '') {
+        this.$message.warning('请输入联系电话')
+        return
+      } else {
+        if (!/^\d{11}$/.test(this.contactParam.phoneNumber)) {
+          this.$message.warning('请输入合法电话号码')
+          return
+        }
+      }
+      if (this.contactParam.email !== '') {
+        if (this.contactParam.email.indexOf('@') === -1) {
+          this.$message.warning('请输入合法邮箱')
+          return
+        }
+      }
+      contactUs(this.contactParam).then(() => {
+        this.$message.success('留言成功')
+        this.$router.go(0)
+      })
+    },
+    initMap() {
+      try {
+        // eslint-disable-next-line
+        const mapXian = new AMap.Map('xian', {
+          resizeEnable: true,
+          center: [108.9231043498764, 34.318071788447504],
+          zoom: 15
+        })
+        // eslint-disable-next-line
+        const marker1 = new AMap.Marker({
+          position: [108.9231043498764, 34.318071788447504]
+        })
+        marker1.setMap(mapXian)
+
+        // eslint-disable-next-line
+        const mapShanghai = new AMap.Map('shanghai', {
+          resizeEnable: true,
+          center: [121.406641, 31.257390],
+          zoom: 15
+        })
+        // eslint-disable-next-line
+        const marker2 = new AMap.Marker({
+          position: [121.406641, 31.257390]
+        })
+        marker2.setMap(mapShanghai)
+
+        // eslint-disable-next-line
+        const mapShenzhen = new AMap.Map('shenzhen', {
+          resizeEnable: true,
+          center: [113.896792, 22.529793],
+          zoom: 15
+        })
+        // eslint-disable-next-line
+        const marker3 = new AMap.Marker({
+          position: [113.896792, 22.529793]
+        })
+        marker3.setMap(mapShenzhen)
+      } catch (error) {
+        console.log('map load error', error)
+        this.mapLoadError = true
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.contact-us {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: #fff;
+  .top-banner {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    height: 420px;
+    background: url('../../../assets/contactUs/top-banner.jpg') no-repeat center;
+  }
+
+  .from-cont {
+    display: flex;
+    width: 100%;
+    height: 702px;
+    margin: 90px auto 174px;
+    .form-all {
+      width: 50%;
+      padding: 0 1% 0 18%;
+      .form-line {
+        width: 16px;
+        height: 2px;
+        border: 2px solid #FE7D0B;
+      }
+      .form-top {
+        font-size: 16px;
+        line-height: 24px;
+        color: #333333;
+        margin-top: 10px;
+        font-weight: 600;
+      }
+      .form-title {
+        font-size: 14px;
+        line-height: 24px;
+        color: #999;
+        margin: 20px 0 28px;
+      }
+      .ipnut-title {
+        color: #333;
+        font-size: 14px;
+        line-height: 21px;
+        margin-bottom: 4px;
+      }
+      .input-cont {
+        width: 100%;
+        border: 1px solid #fff;
+        ::v-deep .el-input__inner {
+          height: 40px;
+          line-height: 40px;
+          background-color: transparent;
+        }
+      }
+      .input-full {
+        width: 100%;
+        color: #fff;
+        margin-bottom: 20px;
+      }
+      .input-flex {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 20px;
+        div {
+          width: 45%;
+          .ipnut-title {
+            width: 100%;
+          }
+          .input-cont {
+            width: 100%;
+            border: 1px solid #fff;
+            ::v-deep .el-input__inner {
+              height: 40px;
+              line-height: 40px;
+              background-color: transparent;
+            }
+          }
+        }
+      }
+      .from-btn {
+        width: 128px;
+        height: 40px;
+        line-height: 40px;
+        background-color: #FE7D0B;
+        color: #fff;
+        margin: 0 auto;
+        text-align: center;
+        cursor: pointer;
+        border-radius: 4px;
+      }
+    }
+    .form-img {
+      flex: 1;
+      height: 100%;
+      background: url('../../../assets/contactUs/form_r.png') no-repeat left center;
+    }
+  }
+
+  .card-cont {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    margin-bottom: 70px;
+    .card-item {
+      width: 28%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 388px;
+      color: #444;
+      background-color: #FBFBFB;
+      padding: 24px;
+      .card-item-name {
+        margin-bottom: 20px;
+        font-size: 22px;
+        line-height: 28px;
+        color: #FE7D0B;
+      }
+      .card-item-desc {
+        font-size: 14px;
+        line-height: 24px;
+        color: #333;
+      }
+      .card-item-map {
+        margin-top: 15px;
+        width: 100%;
+        height: 380px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .card-item:nth-child(2) {
+      margin: 0 20px;
+    }
+    .card-item:nth-child(2) .card-item-map {
+      margin-top: 32px;
+    }
+  }
+}
+
+/* 移动端样式 */
+@media screen and (max-width: 768px) {
+  .contact-us {
+    width: 100%;
+    padding: 0 0 270px;
+    margin-top: 60px;
+    .top-banner {
+      width: 100%;
+      height: 124px;
+      background-size: cover;
+    }
+  }
+  .banner-desc {
+    margin-bottom: 0 !important;
+  }
+
+  .from-cont {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: auto !important;
+    margin: 90px auto 174px;
+    .form-all {
+      width: 100% !important;
+      padding: 20px !important;
+      .form-line {
+        width: 16px;
+        height: 2px;
+        border: 2px solid #FE7D0B;
+      }
+      .form-top {
+        font-size: 16px;
+        line-height: 24px;
+        color: #333333;
+        margin-top: 10px;
+        font-weight: 600;
+      }
+      .form-title {
+        font-size: 14px;
+        line-height: 24px;
+        color: #999;
+        margin: 20px 0 28px;
+      }
+      .ipnut-title {
+        color: #333;
+        font-size: 14px;
+        line-height: 21px;
+        margin-bottom: 4px;
+      }
+      .input-cont {
+        width: 100%;
+        border: 1px solid #fff;
+        ::v-deep .el-input__inner {
+          height: 40px;
+          line-height: 40px;
+          background-color: transparent;
+        }
+      }
+      .input-full {
+        width: 100%;
+        color: #fff;
+        margin-bottom: 20px;
+      }
+      .input-flex {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 20px;
+      }
+      .from-btn {
+        width: 128px;
+        height: 40px;
+        line-height: 40px;
+        background-color: #FE7D0B;
+        color: #fff;
+        margin: 0 auto;
+        text-align: center;
+        cursor: pointer;
+        border-radius: 4px;
+      }
+    }
+    .form-img.form-img-mobile {
+      width: 95%;
+      height: 306px !important;
+      flex: initial;
+      margin: 0 auto;
+      background: url('../../../assets/contactUs/form_r.png') no-repeat center;
+    }
+  }
+
+  .card-cont {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 15px;
+    .card-item {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 388px;
+      // height: 214px;
+      color: #444;
+      background-color: #F5F6F6;
+      padding: 24px;
+      .card-item-name {
+        color: #FE7D0B;
+        font-size: 22px;
+        line-height: 28px;
+      }
+    }
+    .card-item:nth-child(2) {
+      margin: 20px 0 !important;
+    }
+  }
+}
+
+@media screen and (min-width: 1930px) {
+  .contact-us {
+    width: 88% !important;
+    margin: 0 auto 70px !important;
+    .top-banner {
+      width: 100vw !important;
+      height: 570px !important;
+      background-size: cover !important;
+      transform: translateX(-6%) !important;
+    }
+  }
+  .from-cont {
+    width: 86% !important;
+    .form-all {
+      width: 56% !important;
+    }
+  }
+}
+</style>

src/views/login/components/HomeBottom.vue

@@ -2,6 +2,7 @@
   <div class="foot-mark-box">
     <div>
       <div class="hover" @click="handleJumpFiling">© 陕ICP备2024033180号-1</div>
+      <div class="case-cont" @click="handleJumpCase">陕公网安备61019102000586号</div>
       <div>服务邮箱：citp@changan-inkasso.com</div>
       <div>服务电话：029-86689192</div>
       <div class="hover" @click="aboutClick">关于我们</div>
@@ -26,6 +27,9 @@ export default {
     handleJumpFiling() {
       window.open('https://beian.miit.gov.cn/')
     },
+    handleJumpCase() {
+      window.open('https://beian.mps.gov.cn/#/query/webSearch?code=61019102000586')
+    },
     aboutClick() {
       this.$router.push('/login/aboutUs')
     },
@@ -60,6 +64,18 @@ export default {
   div.hover:hover {
     color: #FE7D0B;
   }
+  .case-cont:hover {
+    color: #FE7D0B;
+  }
+  .case-cont::before {
+    content: ' ';
+    display: inline-block;
+    width: 16px;
+    height: 18px;
+    background: url('../../../assets/login/case-icon.png') no-repeat;
+    vertical-align: middle;
+    margin-right: 5px;
+  }
   .user-protocol-content {
     height: 80vh;
     overflow-y: auto;

src/views/login/index.vue

@@ -85,17 +85,15 @@
           <div
             class="bt-l-orange"
             @click="handleJumpInkasso"
-          >长安银科官网：</div>
-          <div>www.changan-inkasso.com</div>
+          >长安银科官网：www.changan-inkasso.com</div>
         </template>
         <div v-if="isMobileTerminal">服务邮箱：citp@changan-inkasso.com</div>
         <div v-if="isMobileTerminal">服务电话：029-86689192</div>
       </div>
       <div v-if="!isMobileTerminal" class="bt-m">
-        <div>服务邮箱：</div>
-        <div>citp@changan-inkasso.com</div>
-        <div>服务电话：</div>
-        <div>029-86689192</div>
+        <div class="case-cont" @click="handleJumpCase">陕公网安备61019102000586号</div>
+        <div>服务邮箱：citp@changan-inkasso.com</div>
+        <div>服务电话：029-86689192</div>
       </div>
       <div class="bt-r">
         <div class="qrocde" />
@@ -109,6 +107,7 @@
       <div class="bottom-cont">
         <div class="bt-l">
           <div class="bt-l-orange" @click="handleJumpFiling">© 陕ICP备2024033180号-1</div>
+          <div class="case-cont" @click="handleJumpCase">陕公网安备61019102000586号</div>
           <div>服务邮箱：citp@changan-inkasso.com</div>
           <div>服务电话：029-86689192</div>
         </div>
@@ -275,6 +274,9 @@ export default {
     },
     handleClickProtocol() {
       this.$refs.protocolDialog.show = true
+    },
+    handleJumpCase() {
+      window.open('https://beian.mps.gov.cn/#/query/webSearch?code=61019102000586')
     }
   }
 
@@ -463,6 +465,21 @@ export default {
       .bt-l-orange:hover {
         color: #FE7D0B;
       }
+      .case-cont {
+        cursor: pointer;
+      }
+      .case-cont:hover {
+        color: #FE7D0B;
+      }
+      .case-cont::before {
+        content: ' ';
+        display: inline-block;
+        width: 16px;
+        height: 18px;
+        background: url('../../assets/login/case-icon.png') no-repeat;
+        vertical-align: middle;
+        margin-right: 5px;
+      }
     }
     .bt-m {
       padding-top: 70px;
@@ -471,6 +488,21 @@ export default {
       > div {
         margin-bottom: 10px;
       }
+      .case-cont {
+        cursor: pointer;
+      }
+      .case-cont:hover {
+        color: #FE7D0B;
+      }
+      .case-cont::before {
+        content: ' ';
+        display: inline-block;
+        width: 16px;
+        height: 18px;
+        background: url('../../assets/login/case-icon.png') no-repeat;
+        vertical-align: middle;
+        margin-right: 5px;
+      }
     }
     .bt-r {
       .qrocde {