feta:'pc端开发完成'

api/index.js

@@ -2,12 +2,35 @@ import request from '../utils/request';
 
 export function postListData(params) {
   console.log('params',params);
-  return request('news/list', {
+  return request('https://official.webapi.bicredit.xin/api/news/list', {
+    method: 'post',
+    data: {...params}//get请求使用params,直接拼接在请求url上
+  })
+}
+export function postListID(params) {
+  // console.log('params',params);
+  return request('https://official.webapi.bicredit.xin/api/news/detail', {
+    method: 'get',
+    data: {...params}//get请求使用params,直接拼接在请求url上
+  })
+}
+// 
+// 获取验证码
+export function sendSms(params) {
+  console.log('params',params);
+  return request('http://api.crm.meloinfo.com/collect/sendSms', {
+    method: 'post',
+    data: {...params}//get请求使用params,直接拼接在请求url上
+  })
+}
+// 渠道商户
+export function postCustomer(params) {
+  console.log('params',params);
+  return request('http://api.crm.meloinfo.com/collect/customer', {
     method: 'post',
     data: {...params}//get请求使用params,直接拼接在请求url上
   })
 }
-
 // export const getListT = (params) => {
 //   return request('', {
 //     method: 'post',

pages/user/content.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <div v-html="list">
+
+</div>
+  </div>
+
+</template>
+<script>
+export default {
+  data(){
+    return{
+      list:''
+    }
+  },
+  created(){
+    console.log('this',this.$route.query.id)
+    this.postListIDFn(this.$route.query.id)
+  },
+  methods:{
+    async postListIDFn(id){
+    //  let z =  await postListID({id:id})
+    let z =  await this.$axios.$get(`https://official.webapi.bicredit.xin/api/news/detail/${id}`)
+    //  console.log('zzz',z)
+     if(z.msg == '成功'){
+      this.list = z.data.content
+     }
+    }
+  }
+}
+</script>

pages/user/index.vue

@@ -1,99 +1,59 @@
 <template>
   <div class="home">
-    <!-- <ModalForm
-        formRef={ref}
-        width={500}
-        onFinish={async (values) => {
-          await submit(values);
-        }}
-        title="申请试用"
-        open={open}
-      >
-        <ProFormText
-          fieldProps={{
-            addonBefore: (
-              <img
-                style={{ width: 15, height: 15 }}
-                src={require('../../assets/img_home_modal_0.png')}
-              />
-            ),
-          }}
-          rules={[{ required: true }]}
-          name="companyName"
-          placeholder="请输入您的公司名称"
-        />
-        <ProFormText
-          fieldProps={{
-            addonBefore: (
-              <img
-                style={{ width: 15, height: 15 }}
-                src={require('../../assets/img_home_modal_1.png')}
-              />
-            ),
-          }}
-          rules={[{ required: true }]}
-          name="address"
-          placeholder="请选择所在城市"
-        />
-        <ProFormText
-          fieldProps={{
-            addonBefore: (
-              <img
-                style={{ width: 15, height: 15 }}
-                src={require('../../assets/img_home_modal_2.png')}
-              />
-            ),
-          }}
-          rules={[{ required: true }]}
-          name="customName"
-          placeholder="请输入您的姓名"
-        />
-        <ProFormText
-          fieldProps={{
-            addonBefore: (
-              <img
-                style={{ width: 15, height: 15 }}
-                src={require('../../assets/img_home_modal_3.png')}
-              />
-            ),
-          }}
-          rules={[{ required: true }]}
-          name="phone"
-          placeholder="请输入您的联系方式"
-        />
-        <ProFormText
-          fieldProps={{
-            addonAfter: (
-              <a
-                style={{ display: 'inline-block', width: 100 }}
-                onClick={() => {
-                  if (!result.loading && countdown === 0) {
-                    var phone = ref.current?.getFieldValue('phone') as string;
-                    if (new RegExp('^1[0-9]{10}$').test(phone)) {
-                      result.run(phone);
-                    } else {
-                      message.error('请输入正确的手机号');
-                    }
-                  }
-                }}
-              >
-                {countdown === 0 ? '获取验证码' : Math.round(countdown / 1000)}
-              </a>
-            ),
-            addonBefore: (
-              <img
-                style={{ width: 15, height: 15 }}
-                src={require('../../assets/img_home_modal_4.png')}
-              />
-            ),
-          }}
-          rules={[{ required: true }]}
-          name="verifyCode"
-          placeholder="请输入验证码"
-        />
-      </ModalForm> -->
     <!-- <img class="home-back" src={require('../../assets/img_home.png')} /> -->
-    <img src="../../static/image/img_home.png" class="home-back" alt="">
+    <a-modal v-model="amodal" title="申请试用" on-ok="handleOk" centered @afterClose="fouse" destroyOnClose>
+      <template slot="footer">
+        <div class="sub">
+          <a-button key="submit" type="primary" @click="handleSubmit">
+            立即提交
+          </a-button>
+        </div>
+      </template>
+      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 50 }" @submit="handleSubmit">
+        <a-form-item label="CompanyName">
+          <!-- 公司名称 -->
+          <a-input v-decorator="['companyName', { rules: [{ required: true, message: '请输入您的公司名称' }] }]"
+            v-model="customer.companyName" placeholder="请输入您的公司名称*">
+            <img src="../../static/image/img_home_modal_0.png" class="w-15 h-15" slot="prefix" alt="">
+          </a-input>
+        </a-form-item>
+        <a-form-item label="City">
+          <!-- 选择所在城市 -->
+          <a-input v-decorator="['city', { rules: [{ required: true, message: '请输入所在城市' }] }]" v-model="customer.city"
+            placeholder="请输入所在城市*">
+            <!-- <a-icon slot="prefix" type="bank" /> -->
+            <img src="../../static/image/img_home_modal_1.png" class="w-15 h-15" slot="prefix" alt="">
+          </a-input>
+        </a-form-item>
+        <a-form-item label="CustomName">
+          <!-- 姓名 -->
+          <a-input v-decorator="['customName', { rules: [{ required: true, message: '请输入您的姓名' }] }]"
+            v-model="customer.customName" placeholder="请输入您的姓名*">
+            <!-- <a-icon slot="prefix" type="UserOutlined" /> -->
+            <img src="../../static/image/img_home_modal_2.png" class="w-15 h-15" slot="prefix" alt="">
+          </a-input>
+        </a-form-item>
+        <a-form-item label="Phone">
+          <!-- 手机号 -->
+          <a-input v-decorator="['phone', { rules: [{ required: true, message: '请输入您的联系方式' }] }]" v-model="customer.phone"
+            placeholder="请输入您的联系方式*">
+            <!-- <a-icon slot="prefix" type="phone" /> -->
+            <img src="../../static/image/img_home_modal_3.png" class="w-15 h-15" slot="prefix" alt="">
+          </a-input>
+        </a-form-item>
+        <!-- 验证码 -->
+        <a-form-item label="VerifyCode">
+          <a-input v-decorator="['verifyCode', { rules: [{ required: true, message: '请输入验证码' }] }]" placeholder="输入验证码"
+            v-model="customer.verifyCode" size="large">
+            <img src="../../static/image/img_home_modal_4.png" class="w-15 h-15" slot="prefix" alt="">
+            <div slot="suffix" style="cursor: pointer; color: #1890ff;" @click="verifyCodeFn">
+              {{ countdown == 0 ? '获取验证码' : countdown }}
+            </div>
+          </a-input>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+    <img src="../../static/image/img_home.png" class="home-back" style="cursor: pointer;" alt="" @click="amodalFn">
     <div class="home-qa">
       <div class="home-title">为什么选择惠融易客</div>
       <div class="home-title-sub">
@@ -112,7 +72,7 @@
                 <div class="home-qa-img-row-item-absolute-title">
                   {{ p.title }}
                 </div>
-                <div class="home-qa-img-row-item-absolute-subtitle">
+                <div class="home-qa-img-row-item-absolute-subtitle yc-4">
                   {{ p.content }}
                 </div>
               </div>
@@ -136,7 +96,7 @@
                 <div class="home-qa-img-row-item-absolute-title">
                   <span>0{{ i + 1 }}</span> {{ p.title }}
                 </div>
-                <div class="home-qa-img-row-item-absolute-subtitle">
+                <div class="home-qa-img-row-item-absolute-subtitle yc-4">
                   {{ p.content }}
                 </div>
               </div>
@@ -159,16 +119,6 @@
           </div>
 
         </div>
-
-        <!-- <Row gutter={[100, 24]} >
-            {[...Array(6).keys()].map((p) => {
-              return (
-                <Col span={8}>
-                  <img src={require(`../../assets/img_home_ad_${p}.png`)} />
-                </Col>
-              );
-            })}
-          </Row> -->
       </div>
     </div>
     <div class="home-static">
@@ -188,34 +138,46 @@
           </div>
           <div class="home-static-title">人</div>
         </div>
-        <div style='text-align: center'>
-          <a-button class="home-static-btn" shape="round">立即申请试用</a-button>
+        <div style="text-align: center">
+          <a-button class="home-static-btn" shape="round" @click="amodalFn">立即申请试用</a-button>
         </div>
       </div>
     </div>
     <div class="home-qa">
       <div class="home-content">
         <div class="home-title">咨询信息</div>
-        <div class="home-title-sub">
+        <div class="home-title-sub" @click="amodalFn">
           点击了解惠融易客的更多信息
         </div>
         <div class="home-ad-xw" v-if="homeList3[0]">
           <div class="ad-free-img">
-            <img :src="homeList3[0].images"
-            style="width:100%"
-              alt="">
+            <img v-if="activeKey" :src="homeList3[activeKey].images" style="width:100%;height: 100%;" alt="">
+            <img v-else :src="homeList3[0].images" style="width:100%;height: 100%;" alt="">
+
           </div>
           <div class="ad-free-content">
-            <div style="height:200px">
-              <div class="add-title">
-                {{ homeList3[0].title }}
-              </div>
-              <div  style="height:50px" class="yc-3">
-                点击查看详情
-              </div>
-            </div>
-            <a-divider></a-divider>
-            <div >
+            <a-collapse v-model="activeKey" accordion @change="collapseChange">
+              <a-collapse-panel key="0" :header="homeList3[0].title" :showArrow="false">
+                <div class="add-title yc-3">
+                  {{ homeList3[0].summary }}
+                </div>
+                <a-button type="primary" style="margin-top: 5px;" @click="btnContent(homeList3[0])">
+                  查看详情
+                </a-button>
+              </a-collapse-panel>
+              <template v-for="(item, index) in homeList3">
+                <a-collapse-panel v-if="index !== 0" :key="index + ''" :header="item.title" :showArrow="false">
+                  <!-- <p>{{ item.title }}</p> -->
+                  <div class="add-title yc-3">
+                    {{ item.summary }}
+                  </div>
+                  <a-button type="primary" @click="btnContent(item)">
+                    查看详情
+                  </a-button>
+                </a-collapse-panel>
+              </template>
+            </a-collapse>
+            <div>
 
             </div>
           </div>
@@ -274,19 +236,22 @@
             <span class="color-fff-12" style="font-size: 11px; margin-bottom: 5px;">
               关注公众号
             </span>
-            <img src="https://img.atobo.com/ProductImg/EWM/UWeb/1/5/4/4/5124/15445124/1.gif" style="width:100px;height:100px" alt="">
+            <img src="https://img.atobo.com/ProductImg/EWM/UWeb/1/5/4/4/5124/15445124/1.gif"
+              style="width:100px;height:100px" alt="">
           </div>
           <div class="code-content" style="margin: 0 15px 0 45px">
             <span class="color-fff-12" style="font-size: 11px; margin-bottom: 5px;">
               iosAPP下载
             </span>
-            <img src="https://img.atobo.com/ProductImg/EWM/UWeb/1/5/4/4/5124/15445124/1.gif" style="width:100px;height:100px" alt="">
+            <img src="https://img.atobo.com/ProductImg/EWM/UWeb/1/5/4/4/5124/15445124/1.gif"
+              style="width:100px;height:100px" alt="">
           </div>
           <div class="code-content">
             <span class="color-fff-12" style="font-size: 11px; margin-bottom: 5px;">
               安卓APP下载
             </span>
-            <img src="https://img.atobo.com/ProductImg/EWM/UWeb/1/5/4/4/5124/15445124/1.gif" style="width:100px;height:100px" alt="">
+            <img src="https://img.atobo.com/ProductImg/EWM/UWeb/1/5/4/4/5124/15445124/1.gif"
+              style="width:100px;height:100px" alt="">
           </div>
         </div>
       </div>
@@ -294,13 +259,13 @@
       <div class="site color-fff">
         <img src="../../static/image/005.png" class="w-20 h-20 " alt="">
         <span>
-          地址  重庆市两江新区大竹林街道清枫北路10号3幢双子座A座1406
+          地址 重庆市两江新区大竹林街道清枫北路10号3幢双子座A座1406
         </span>
       </div>
       <!-- 备案号 -->
       <div class="reference">
         <span>重庆惠融数字科技有限公司版权所有</span>
-         <span>
+        <span>
           渝ICP备2023000211号-4
         </span>
       </div>
@@ -309,7 +274,8 @@
 </template>
 
 <script>
-import {postListData} from '../../api/index'
+import { postListData, sendSms,postCustomer } from '../../api/index'
+import { message } from 'ant-design-vue'
 export default {
   name: 'IndexPage',
   data() {
@@ -348,23 +314,151 @@ export default {
         },
       ],
       freeList: ['3', '0', '7', '0', '1', '3', '7', '4'],
-      homeList3:[],
+      homeList3: [],
+      activeKey: [0],
+      text: `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,
+      amodal: false, //申请试用弹窗
+      countdown: 0,
+      customer: {
+        sceneType: "loanofficial", // 场景
+        companyName: '',// 公司名称
+        customName: '', // 姓名
+        city: '', // 所在城市
+        phone: '', // 手机号
+        verifyCode: '', //验证码
+        channel:16, //pc官网16 手机端17
+      },
+      // 定时器
+      intervalBtn: {},
+      formLayout: 'horizontal',
+      form: this.$form.createForm(this, { name: 'coordinated' }),
     }
   },
-  created(){
-      this.postListDataFn()
+  created() {
+    this.postListDataFn()
   },
-  methods:{
-    async postListDataFn(){
-     let list =  await postListData({
+  methods: {
+    async postListDataFn() {
+      let list = await postListData({
         "categoryId": 1
       })
-      list.data.data? this.homeList3 = list.data.data.list :''
-      console.log('this.homeList3',this.homeList3)
-    }
+      list.data.data ? this.homeList3 = list.data.data.list : ''
+      // console.log('this.homeList3',this.homeList3)
+    },
+    collapseChange(e) {
+      console.log(this.activeKey, 'collapseChange', e)
+    },
+    btnContent(item) {
+      console.log('item', item)
+      this.$router.push({ path: `/user/content?id=${item.id}`})
+    },
+    // 发送
+    handleSubmit(e) {
+      e.preventDefault();
+      this.form.validateFields(async(err, values) => {
+        if (!err) {
+          // console.log('Received values of form: ', values);
+         let z = await postCustomer(this.customer)
+         console.log('zzz',z)
+         if(z.data.msg=='成功'){
+          // 关闭页面
+          this.fouse()
+         }
+        } else {
+          console.log('进来了')
+        }
+      });
+    },
+    // 打开
+    amodalFn(){
+      this.amodal = true
+    },
+    // 关闭
+    fouse(){
+      console.log('关闭了')
+      this.amodal = false
+    },
+    handleSelectChange(value) {
+      console.log(value);
+      this.form.setFieldsValue({
+        note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
+      });
+    },
+    // 验证码
+    async verifyCodeFn() {
+      if (this.customer.phone) {
+        if (new RegExp('^1[0-9]{10}$').test(this.customer.phone)) {
+          let z = await sendSms({
+          sceneType: "loanofficial",
+          userMobile: this.customer.phone
+        })
+        // console.log('zzz', z)
+        if (z.data.code == 0) {
+          message.success('发送成功')
+          this.countdown = 60
+          this.countDown()
+          // console.log('进来了', this.countdown)
+        } else {
+          message.error('发送失败')
+        }
+        } else {
+          message.error('请输入正确的手机号');
+        }
+      } else {
+        message.error('请输入手机号')
+      }
+
+    },
+    // 倒计时
+    countDown() {
+      // 设置倒计时
+      this.intervalBtn = setInterval(() => {
+        if (this.countdown == 1) {
+          // 清除定时器
+          clearInterval(this.intervalBtn)
+          // 重置倒计时状态
+          // this.countdown = 0
+        };
+        // 倒计时
+        this.countdown--
+      }, 1000)
+    },
   }
 }
 </script>
 <style lang="less">
 @import '../../static/index.less';
+
+.ant-collapse-header {
+  white-space: nowrap !important;
+  text-overflow: ellipsis !important;
+  overflow: hidden !important;
+}
+
+.ant-btn-primary {
+  background-color: #526eea !important;
+  border-color: #526eea !important;
+}
+
+.ant-btn-primary {
+  background-color: #fff !important;
+  border-color: #fff !important;
+  color: #1890ff !important;
+}
+
+.ant-form-item-label {
+  display: none !important;
+}
+
+.ant-modal-footer {
+  text-align: center !important;
+}
+
+.sub .ant-btn-primary {
+  background-color: #526eea !important;
+  border-color: #526eea !important;
+  color: #fff !important;
+  width: 150px;
+  height: 40px;
+}
 </style>

static/index.less

@@ -77,7 +77,7 @@ body {
           left: 0;
           width: 100%;
           height: 100%;
-          padding: 32px 24px;
+          // padding: 32px 24px;
           color: #fff;
           display: flex;
           flex-direction: column;
@@ -93,6 +93,7 @@ body {
           }
 
           .home-qa-img-row-item-absolute-subtitle {
+            // height: 100%;
             font-size: 10px;
             font-weight: 400;
           }
@@ -248,17 +249,25 @@ body {
 .color-fff{
   color: #fff;
 }
+.w-15 {
+  width: 15px;
+}
+.h-15 {
+  height: 15px;
+}
 .w-20{
   width: 20px;
 }
 .h-20{
   height: 20px;
 }
+
 .home-ad-xw {
   display: flex;
-  align-items: center;
+  // align-items: center;
   .ad-free-img{
-    width: 40%;
+    width: 50%;
+    // height: 100%;
     margin-right: 50px;
   }
   .ad-free-content{
@@ -277,4 +286,10 @@ body {
 -webkit-line-clamp:3;
 -webkit-box-orient: vertical;
 overflow: hidden;
-}
+}
+.yc-4{
+  display: -webkit-box;
+-webkit-line-clamp:4;
+-webkit-box-orient: vertical;
+overflow: hidden;
+}

utils/request.js

@@ -3,7 +3,8 @@ import axios from "axios";
 // 创建实例
 // Set config defaults when creating the instance
 const instance = axios.create({
-  baseURL: 'https://official.webapi.bicredit.xin/api/',//直接使用博客链接
+  // baseURL: 'https://official.webapi.bicredit.xin/api/',
+  // http://api.crm.meloinfo.com/collect/sendSms
   timeout: 2500,
 });