地图+众筹

src/App.vue

@@ -12,4 +12,50 @@
 
 <style lang="scss">
   @import './styles/index.scss'; // 全局自定义的css样式
+  .header-css{
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 9999;
+    background: #fff;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #ccc;
+  }
+  .main-container{
+    padding: 0 10px;
+    margin-top: 50px;
+  }
+  .header-title{
+    margin: 0 88px;
+  }
+  .ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .item-right-p p{
+    padding: 3px;
+    margin: 3px;
+  }
+  .main-container h3{
+    margin: 0;
+  }
+  .flex-jcc-aic{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .flex-jcc-aic-cl{
+    display: flex;
+    align-items: center;
+    justify-content:center;
+    flex-direction: column;
+  }
+  .tip-css{
+    color: #ddd;
+    text-align: center;
+    padding: 10px;
+  }
 </style>

src/api/base_info/branch_company/index.js

@@ -25,6 +25,30 @@ export function addObj(obj) {
     data: obj
   });
 }
+// 股权价格
+export function getAllStockPrice() {
+  return fetch({
+    url: '/vehicle/branchCompany/stock/allPrice',
+    method: 'get'
+  });
+}
+
+// 我要参与-众筹
+export function stockApply(obj) {
+  return fetch({
+    url: 'vehicle/branchCompany/stock/apply',
+    method: 'post',
+    data: obj
+  });
+}
+// 股权列表
+export function stockSearchPage(query) {
+  return fetch({
+    url: '/vehicle/branchCompany/stock/search',
+    method: 'get',
+    params: query
+  });
+}
 
 
 export function delObj(id) {

src/main.js

@@ -24,6 +24,7 @@ import 'babel-polyfill';//支持IE执行原生script
 import XEUtils from 'xe-utils';//加入常用工具类
 import VXEUtils from 'vxe-utils';//加入常用工具类
 import BaiduMap from 'vue-baidu-map'
+import '../node_modules/echarts/map/js/china.js' // 引入中国地图数据
 
 // register globally
 Vue.component('multiselect', Multiselect);
@@ -36,6 +37,9 @@ Vue.use(BaiduMap, {
   ak: 'gvQPveN9YrlPSgKUMPK2u2u2BA4yQFRm'
 })
 
+import infiniteScroll from 'vue-infinite-scroll'
+Vue.use(infiniteScroll);
+
 // register global utility filters.
 Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])

src/router/index.js

@@ -177,9 +177,27 @@ export const asyncRouterMap = [{
     component: _import('vehicle/accompanyingItem/index'),
     name: '随行物品管理',
     authority: 'accompanyingItem'
-      }
-    ]
-  }, {
+  }]
+},
+{
+  path: '/companyInfo',
+  component: _import('baseInfo/companyInfo/index'),
+  name: '公司信息',
+  authority: 'companyInfo'
+},
+{
+  path: '/stockCrowd',
+  component: _import('baseInfo/stockCrowd/index'),
+  name: '股权众筹',
+  authority: 'stockCrowd'
+},
+{
+  path: '/stockCrowdDetail',
+  component: _import('baseInfo/stockCrowdDetail/index'),
+  name: '股权众筹详情页',
+  authority: 'stockCrowd'
+},
+{
   path: '/vehicle',
   component: Layout,
   name: '车辆管理',
@@ -205,5 +223,4 @@ export const asyncRouterMap = [{
       authority: 'vehicleWarningMsg'
     }
   ]
-  }
-];
+}];

src/views/baseInfo/branchCompany/index.vue

@@ -3,7 +3,7 @@
     <div class="filter-container" ref="filter-container">
       <el-form :rules="rules4Query" ref="queryForm" :inline="inline" :model="listQuery">
         <el-form-item label="省份">
-          <el-select class="filter-item" v-model="listQuery.addrProvince" placeholder="请选择省份（直辖市）">
+          <el-select class="filter-item" v-model="listQuery.addrProvince" placeholder="请选择省份（直辖市）"  @change='getValue'>
             <el-option :key="undefined" label="无" :value="undefined"></el-option>
             <el-option v-for="item in provinceRegions" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select>
@@ -98,7 +98,7 @@
         </el-form-item>
 
         <el-form-item label="省份" prop="addrProvince">
-          <el-select v-model.number="form.addrProvince" placeholder="请选择省份（直辖市）">
+          <el-select v-model.number="form.addrProvince" placeholder="请选择省份（直辖市）" >
             <el-option v-for="item in provinceRegions" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select>
         </el-form-item>
@@ -274,6 +274,7 @@
           page: 1,
           limit: 20,
           addrProvince: undefined,
+          addrCity: undefined,
           addrTown: undefined
         },
         inline: true,
@@ -329,6 +330,9 @@
       }
     },
     methods: {
+      getValue(e){
+        this.listQuery.addrCity = undefined;
+      },
       getStatusName(code) {
         if (!this.$utils.isInteger(code)) {
           return '未知';

src/views/baseInfo/companyInfo/chinaMap.vue

+
+<template>
+  <div :class="className" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+  import echarts from 'echarts';
+  import {
+    getSonRegionByCodes,
+    getRegionByCodes,
+  } from 'api/base_info/region/';
+
+  require('echarts/theme/macarons'); // echarts 主题
+  import { debounce } from 'utils';
+
+  export default {
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '330px'
+      },
+      autoResize: {
+        type: Boolean,
+        default: true
+      }
+    },
+    data() {
+      return {
+        chart: null,
+        clientWidth: 350,
+        clientHeight:500
+      };
+    },
+    mounted() {
+      this.initChart();
+      if (this.autoResize) {
+        this.__resizeHanlder = debounce(() => {
+          if (this.chart) {
+            this.chart.resize()
+          }
+        }, 100)
+//        window.addEventListener('resize', this.__resizeHanlder)
+      }
+
+      // 监听侧边栏的变化
+      const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+//      sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
+    },
+    provinceRegions() {
+      return getSonRegionByCodes(1);
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      if (this.autoResize) {
+//        window.removeEventListener('resize', this.__resizeHanlder)
+      }
+
+      const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+//      sidebarElm.removeEventListener('transitionend', this.__resizeHanlder)
+
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      initChart() {
+        let that = this;
+        var mydata = getSonRegionByCodes(1);
+        this.chart = echarts.init(this.$el, 'macarons');
+        this.chart.setOption({
+          title: {
+//            text: '全国地图大数据',
+            subtext: '',
+            x:'center'
+          },
+          tooltip : {
+            trigger: 'item'
+          },
+
+          //左侧小导航图标
+//          visualMap: {
+//            show : true,
+//            x: 'left',
+//            y: 'center',
+//            splitList: [
+//              {start: 500, end:600},{start: 400, end: 500},
+//              {start: 300, end: 400},{start: 200, end: 300},
+//              {start: 100, end: 200},{start: 0, end: 100},
+//            ],
+//            color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']
+//          },
+          //配置属性
+          series: [{
+            name: '数据',
+            type: 'map',
+            mapType: 'china',
+            roam: true,
+            label: {
+              normal: {
+                show: true  //省份名称
+              },
+              emphasis: {
+                show: false
+              }
+            },
+            data:mydata  //数据
+          }],
+          grid:{
+            x:0,
+            y:0,
+            x2:0,
+            y2:0
+          }
+        });
+        this.chart.on('click', function(param) {
+          let mydata = getSonRegionByCodes(1);
+          var name = param.name;
+          let provinceId = 0;
+          mydata.map(function(item){
+            console.log(item.name.indexOf(name));
+            if(item.name.indexOf(name) !=-1){
+              provinceId = item.agencyId;
+            }
+          });
+          that.$emit('headCallBack', provinceId);
+        });
+      }
+    }
+  }
+</script>

src/views/baseInfo/companyInfo/index.vue

+<template>
+  <div>
+    <div class="header-css">
+      <!--@click="$router.push({name:'mypoints'})"-->
+      <img @click="goBack()" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAfCAYAAADqUJ2JAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU0OTNGQTA2QTEwNTExRTg4M0E3OUI4RkYwRDg3RUU4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU0OTNGQTA3QTEwNTExRTg4M0E3OUI4RkYwRDg3RUU4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTQ5M0ZBMDRBMTA1MTFFODgzQTc5QjhGRjBEODdFRTgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTQ5M0ZBMDVBMTA1MTFFODgzQTc5QjhGRjBEODdFRTgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4bKBAsAAAAzklEQVR42qzWWQrCMBDG8VzCtVb01ZuIFJUq4nU8l+AlXEsFXz2CC+iXB2EYgjBL4P/6o4Qk0xD0q4G2aBSMyB590F2LNQkSe6OFFGmhA0PWUqSNjgxZWZEXWkqRDjpZkS46E+Sp2diIXAjyQKUUyRLIXIr0UMWQmQapGTKVInkCKaTIAF0ZMtEgN4aMNZdwR5DYRvskuH1RXEOPPfqtfgIrtFjucY5cTza9a5X1rv27uKUWc3mPXF9I+ma7YuYp4jrXXCet6+xP/o18BRgA2Nl6bmmSdvgAAAAASUVORK5CYII=" size="25" style="width: 15px; height: 20px; margin: 10px">
+      <span class="header-title">公司列表</span>
+    </div>
+    <div class="main-container">
+
+    <div class="shoppings main-container">
+      <div class="filter-container" ref="filter-container">
+        <el-form :rules="rules4Query" ref="queryForm" style="display: flex;" :inline="inline" :model="listQuery">
+          <el-select class="filter-item" style="width: 70%;margin-right: 10px;" v-model="listQuery.addrProvince" placeholder="请选择省份（直辖市）" @change='getValue'>
+            <el-option v-for="item in provinceRegions" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+          <el-select class="filter-item" v-model="listQuery.addrCity" placeholder="请选择城市"  @change='getCompanyList'>
+            <el-option v-for="item in cityRegions4Query" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form>
+      </div>
+    </div>
+    <!--地图-->
+    <china-map v-on:headCallBack="headCall"></china-map>
+    <!--分公司数据-->
+    <div class="shoppings company-list"
+      v-for="item in list"
+      :key="item.key"
+    >
+      <div class="item-right-p">
+        <h3 class="ellipsis">{{item.name}}</h3>
+        <p class="ellipsis">负责人：{{item.leader}}</p>
+        <p class="ellipsis">联系电话(公司)：{{item.leaderContactInfo}}</p>
+        <p>地址： {{item.address + item.addrDetail}}</p>
+      </div>
+    </div>
+    <div class="tip-css" v-if="nodata">
+      暂无数据
+    </div>
+    <div v-else-if="nomore" class="tip-css">
+      已加载全部
+    </div>
+  </div>
+  </div>
+</template>
+<script>
+
+  /*引入postcss-px2rem 通过require的形式*/
+//  var px2rem = require('postcss-px2rem');
+  import {
+    page,
+    addObj,
+    getObj,
+    delObj,
+    putObj
+  } from 'api/base_info/branch_company';
+  import chinaMap from './chinaMap';
+
+  import {
+    getSonRegionByCodes,
+    getRegionByCodes,
+  } from 'api/base_info/region/';
+
+  import {mapGetters} from 'vuex';
+
+  export default {
+    name: 'branchCompany',
+    components: { chinaMap },
+    data() {
+      return {
+        nodata: false,
+        nomore:false,
+        form: {
+          id: undefined,
+          name: undefined,
+          status: undefined,
+          addrProvince: undefined,
+          addrCity: undefined,
+          addrTown: undefined,
+          addrDetail: undefined,
+          leader: undefined,
+          leaderContactInfo: undefined,
+          updateTime: undefined
+        },
+        rules: {
+          status: [
+            {
+              type: 'integer',
+              required: true,
+              message: '请输名称',
+              trigger: 'blur'
+            }
+          ],
+          name: [
+            {
+              required: true,
+              message: '请输名称',
+              trigger: 'blur'
+            },
+            {
+              min: 0,
+              max: 200,
+              message: '长度小于 200 个字符',
+              trigger: 'blur'
+            }
+          ],
+          addrDetail: [
+            {
+              required: true,
+              message: '请输入详细地址',
+              trigger: 'blur'
+            },
+            {
+              min: 0,
+              max: 200,
+              message: '长度小于 200 个字符',
+              trigger: 'blur'
+            }
+          ],
+          addrProvince: [
+            {
+              required: true,
+              type: 'number',
+              message: '请选择省份',
+              trigger: 'blur'
+            }
+          ],
+          addrCity: [
+            {
+              required: true,
+              type: 'number',
+              message: '请选择城市',
+              trigger: 'blur'
+            },
+            {
+              validator: (rule, value, callback) => {
+                if (this.$utils.isInteger(this.form.addrProvince) &&
+                  value.toString().substr(0, 2) != this.form.addrProvince.toString().substr(0, 2)) {
+                  return callback(new Error('请选择省份下相应城市'));
+                }
+                callback();
+              },
+              trigger: 'blur'
+            }
+          ],
+          addrTown: [
+            {
+              required: true,
+              type: 'number',
+              message: '请选择镇(县)',
+              trigger: 'blur'
+            },
+            {
+              validator: (rule, value, callback) => {
+                if (this.$utils.isInteger(this.form.addrCity) &&
+                  value.toString().substr(0, 4) != this.form.addrCity.toString().substr(0, 4)) {
+                  return callback(new Error('请选择城市下相应镇（县）'));
+                }
+                callback();
+              },
+              trigger: 'blur'
+            }
+          ]
+        },
+        rules4Query: {
+          addrCity: [
+            {
+              validator: (rule, value, callback) => {
+                if (this.$utils.isUndefined(value)) {
+                  return callback();
+                }
+                if (this.$utils.isInteger(this.listQuery.addrProvince) &&
+                  value.toString().substr(0, 2) !== this.listQuery.addrProvince.toString().substr(0, 2)) {
+                  return callback(new Error('请选择省份下相应城市'));
+                }
+                callback();
+              },
+              trigger: 'blur'
+            }
+          ]
+        },
+        list: null,
+        total: null,
+        listLoading: true,
+        listQuery: {
+          page: 1,
+          limit: 5,
+          addrProvince: undefined,
+          addrCity: undefined,
+          addrTown: undefined
+        },
+        inline: true,
+        dialogFormVisible: false,
+        dialogStatus: '',
+        branchCompany_btn_edit: false,
+        branchCompany_btn_del: false,
+        branchCompany_btn_add: false,
+        textMap: {
+          update: '编辑',
+          create: '创建'
+        },
+        tableKey: 0
+      }
+    },
+    created() {
+      this.getList();
+      this.branchCompany_btn_edit = this.elements['branchCompany:btn_edit'];
+      this.branchCompany_btn_del = this.elements['branchCompany:btn_del'];
+      this.branchCompany_btn_add = this.elements['branchCompany:btn_add'];
+    },
+    computed: {
+      ...mapGetters([
+        'elements',
+        'companyStatusAndCode'
+      ]),
+      provinceRegions() {
+        return getSonRegionByCodes(1);
+      },
+      cityRegions() {
+        if (!this.$utils.isInteger(this.form.addrProvince)) {
+          return null;
+        }
+        return getSonRegionByCodes(this.form.addrProvince);
+      },
+      townRegions() {
+        if (!this.$utils.isInteger(this.form.addrCity)) {
+          return null;
+        }
+        return getSonRegionByCodes(this.form.addrCity);
+      },
+      cityRegions4Query() {
+        if (!this.$utils.isInteger(this.listQuery.addrProvince)) {
+          return null;
+        }
+        return getSonRegionByCodes(this.listQuery.addrProvince);
+      },
+      townRegions4Query() {
+        if (!this.$utils.isInteger(this.listQuery.addrCity)) {
+          return null;
+        }
+        return getSonRegionByCodes(this.listQuery.addrCity);
+      }
+    },
+    methods: {
+      getCompanyList(e){
+        this.getList();
+      },
+      getValue(e){
+        this.listQuery.addrCity = undefined;
+      },
+      headCall: function (msg) { //回调方法，接收子组件传的参数
+        this.listQuery.addrProvince = msg;
+        this.getList();
+      },
+      getStatusName(code) {
+        if (!this.$utils.isInteger(code)) {
+          return '未知';
+        }
+        return this.companyStatusAndCode[code].val;
+      },
+      getList(reachBottom) {
+        if(!reachBottom){
+          this.list = [];
+          this.listQuery.page = 1;
+          this.nodata = false;
+          this.nomore = false;
+        } else if(reachBottom) {
+          if(this.nomore){
+            return false
+          }
+        }
+        page(this.listQuery)
+          .then(response => {
+            let listTemp = response.data.data;
+            //一次读入所有涉及地区，防止多次读取
+            if (!this.$utils.isEmpty(listTemp)) {
+              let allRegions = new Set();
+              for (let index in listTemp) {
+                allRegions.add(listTemp[index].addrProvince);
+                allRegions.add(listTemp[index].addrCity);
+                allRegions.add(listTemp[index].addrTown);
+                let regions = getRegionByCodes([listTemp[index].addrProvince, listTemp[index].addrCity, listTemp[index].addrTown]);
+                listTemp[index].address = regions[0].name + ' ' + regions[1].name + ' ' + regions[2].name + ' ';
+              }
+              getRegionByCodes([...allRegions]);
+            }
+            let arr = this.list;
+//            if(this.listQuery.page >1){
+              listTemp.map(function(item){
+                arr.push(item);
+              });
+//            }
+            this.list = arr;
+            this.total = response.data.totalCount;
+            this.listLoading = false;
+            if(arr.length == this.listQuery.page*this.listQuery.limit){
+              this.listQuery.page++;
+            }else if(arr.length == 0){
+              this.nodata = true;
+            }else if(arr.length < this.listQuery.page*this.listQuery.limit){
+              this.nomore = true;
+            }
+          })
+      },
+      getAddrStr(branchCompany) {
+        let regions = getRegionByCodes([branchCompany.addrProvince, branchCompany.addrCity, branchCompany.addrTown]);
+        return regions[0].name + ' ' + regions[1].name + ' ' + regions[2].name + ' ';
+      },
+      handleFilter() {
+        this.$refs.queryForm.validate(valid => {
+
+          if (valid) {
+            this.getList();
+          } else {
+            return false;
+          }
+        });
+      },
+      handleSizeChange(val) {
+        this.listQuery.limit = val;
+        this.getList();
+      },
+      handleCurrentChange(val) {
+        this.listQuery.page = val;
+        this.getList();
+      },
+      handleCreate() {
+        this.resetTemp();
+        this.dialogStatus = 'create';
+        this.dialogFormVisible = true;
+      },
+      handleUpdate(row) {
+        getObj(row.id)
+          .then(response => {
+            this.form = response.data;
+            this.dialogFormVisible = true;
+            this.dialogStatus = 'update';
+            this.selectedProvince = response.data.addrProvince;
+            this.selectedCity = response.data.addrCity;
+          });
+      },
+      scroll() {
+        let isLoading = false
+        window.onscroll = () => {
+          // 距离底部20px时加载一次
+          let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 0;
+          if (bottomOfWindow && isLoading == false) {
+            this.getList(true);
+            setTimeout(function(){
+              isLoading = true;
+            });
+          }
+        }
+      },
+      handleDelete(row) {
+        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+          .then(() => {
+            delObj(row.id)
+              .then(() => {
+                this.$notify({
+                  title: '成功',
+                  message: '删除成功',
+                  type: 'success',
+                  duration: 2000
+                });
+                const index = this.list.indexOf(row);
+                this.list.splice(index, 1);
+              });
+          });
+      },
+      create(formName) {
+        const set = this.$refs;
+        set[formName].validate(valid => {
+          if (valid) {
+            addObj(this.form)
+              .then(() => {
+                this.dialogFormVisible = false;
+                this.getList();
+                this.$notify({
+                  title: '成功',
+                  message: '创建成功',
+                  type: 'success',
+                  duration: 2000
+                });
+              })
+          } else {
+            return false;
+          }
+        });
+      },
+      cancel(formName) {
+        this.dialogFormVisible = false;
+        this.$refs[formName].resetFields();
+      },
+      update(formName) {
+        const set = this.$refs;
+        set[formName].validate(valid => {
+          if (valid) {
+            this.dialogFormVisible = false;
+            putObj(this.form).then(() => {
+              this.dialogFormVisible = false;
+              this.getList();
+              this.$notify({
+                title: '成功',
+                message: '创建成功',
+                type: 'success',
+                duration: 2000
+              });
+            });
+          } else {
+            return false;
+          }
+        });
+      },
+      resetTemp() {
+        this.form = {
+          id: undefined,
+          name: undefined,
+          status: undefined,
+          addrProvince: undefined,
+          addrCity: undefined,
+          addrTown: undefined,
+          addrDetail: undefined,
+          leader: undefined,
+          leaderContactInfo: undefined,
+          updateTime: undefined
+        };
+      }
+    },
+    mounted() {    // 滚动加载更多   
+      const _this = this;
+      this.$nextTick(() => {
+        window.addEventListener('scroll', this.scroll)
+      })
+    },
+  }
+</script>

src/views/baseInfo/stockCrowd/index.vue

+<template>
+  <div>
+    <div class="header-css">
+      <!--@click="$router.push({name:'mypoints'})"-->
+      <img @click="goBack()" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAfCAYAAADqUJ2JAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU0OTNGQTA2QTEwNTExRTg4M0E3OUI4RkYwRDg3RUU4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU0OTNGQTA3QTEwNTExRTg4M0E3OUI4RkYwRDg3RUU4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTQ5M0ZBMDRBMTA1MTFFODgzQTc5QjhGRjBEODdFRTgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTQ5M0ZBMDVBMTA1MTFFODgzQTc5QjhGRjBEODdFRTgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4bKBAsAAAAzklEQVR42qzWWQrCMBDG8VzCtVb01ZuIFJUq4nU8l+AlXEsFXz2CC+iXB2EYgjBL4P/6o4Qk0xD0q4G2aBSMyB590F2LNQkSe6OFFGmhA0PWUqSNjgxZWZEXWkqRDjpZkS46E+Sp2diIXAjyQKUUyRLIXIr0UMWQmQapGTKVInkCKaTIAF0ZMtEgN4aMNZdwR5DYRvskuH1RXEOPPfqtfgIrtFjucY5cTza9a5X1rv27uKUWc3mPXF9I+ma7YuYp4jrXXCet6+xP/o18BRgA2Nl6bmmSdvgAAAAASUVORK5CYII=" size="25" style="width: 15px; height: 20px; margin: 10px">
+      <span class="header-title">众筹列表</span>
+    </div>
+    <!--众筹列表数据-->
+    <div class="shoppings main-container">
+      <div class="filter-container" ref="filter-container">
+        <el-form ref="queryForm" :inline="inline" :model="listQuery">
+          <el-form-item style="margin-bottom: 3px;">
+            <el-select class="filter-item" style="width: 70%;margin-right: 10px;" v-model="listQuery.addrProvince" placeholder="请选择省份（直辖市）" @change='getValue'>
+              <el-option v-for="item in provinceRegions" :key="item.id" :label="item.name" :value="item.id"></el-option>
+            </el-select>
+            <el-select class="filter-item" v-model="listQuery.addrCity" placeholder="请选择城市">
+              <el-option v-for="item in cityRegions4Query" :key="item.id" :label="item.name" :value="item.id"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item  style="margin-bottom: 3px;">
+            <el-select class="filter-item" style="width: 70%;margin-right: 10px;" v-model="listQuery.priceStart" placeholder="起点股价"  @change='getStartValue'>
+              <el-option v-for="item in allStockPrice" :key="item.id" :label="item.name" :value="item"></el-option>
+            </el-select>
+            <el-select class="filter-item" v-model="listQuery.priceEnd" placeholder="结束股价"  @change='getEndValue'>
+              <el-option v-for="item in allStockPrice" :key="item.id" :label="item.name" :value="item"></el-option>
+            </el-select>
+            <el-button @click="getList()" style="height: 35px;margin-left: 10px;">搜索</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="first" >
+        <div
+          class="order-item"
+          v-for="item in list"
+          :key="item.key"
+          @click="view(item.id, item.companyName)"
+        >
+          <div class="item-right-p flex-jcc-aic">
+            <img :src="item.companyPic" style="width: 150px;height:100px;"/>
+            <div>
+              <p>{{item.companyName}}</p>
+              <p class="ft12">每份价格：{{item.price}}w</p>
+              <p class="ft12">剩余份数：{{item.total}}</p>
+            </div>
+          </div>
+        </div>
+        <div class="tip-css" v-if="nodata">
+          暂无数据
+        </div>
+        <div v-if="nomore" class="tip-css">
+          已加载全部
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+  .ft12{
+    font-size: 12px;
+    color: #3a3a3a;
+  }
+  .order-item{
+    display: flex;
+    align-items: center;
+    padding: 10px 0;
+    width: 100%;
+  }
+  .el-form--inline .el-form-item__content{
+    display: flex;
+    margin-bottom: 0 !important;
+  }
+</style>
+
+<script>
+  import {
+    stockSearchPage,
+    creatCrowd,
+    getAllStockPrice
+  } from 'api/base_info/branch_company';
+
+  import {
+    getSonRegionByCodes,
+    getRegionByCodes,
+  } from 'api/base_info/region/';
+
+  import {mapGetters} from 'vuex';
+  import ElForm from "../../../../node_modules/element-ui/packages/form/src/form.vue";
+  import ElFormItem from "../../../../node_modules/element-ui/packages/form/src/form-item.vue";
+  import ElButton from "../../../../node_modules/element-ui/packages/button/src/button.vue";
+
+  export default {
+    components: {
+      ElButton,
+      ElFormItem,
+      ElForm},
+    name: 'stockCrowd',
+    data() {
+      return {
+        nodata: false,
+        nomore:false,
+        allStockPrice: null,
+        list: null,
+        total: null,
+        listLoading: true,
+        listQuery: {
+          page: 1,
+          limit: 5,
+          priceStart: undefined,
+          priceEnd: undefined,
+          addrProvince: undefined,
+          addrCity: undefined,
+          addrTown: undefined
+        },
+        inline: true,
+      }
+    },
+    computed: {
+      ...mapGetters([
+        'elements',
+        'companyStatusAndCode'
+      ]),
+      provinceRegions() {
+        return getSonRegionByCodes(1);
+      },
+      cityRegions() {
+        if (!this.$utils.isInteger(this.form.addrProvince)) {
+          return null;
+        }
+        return getSonRegionByCodes(this.form.addrProvince);
+      },
+      cityRegions4Query() {
+        if (!this.$utils.isInteger(this.listQuery.addrProvince)) {
+          return null;
+        }
+        return getSonRegionByCodes(this.listQuery.addrProvince);
+      },
+      townRegions4Query() {
+        if (!this.$utils.isInteger(this.listQuery.addrCity)) {
+          return null;
+        }
+        return getSonRegionByCodes(this.listQuery.addrCity);
+      }
+    },
+    created() {
+      this.getList();
+      this.getAllStockPrice();//获取股价列表
+      this.$nextTick(() => {
+        window.addEventListener('scroll', this.scroll)
+      });
+    },
+    mounted() {    // 滚动加载更多   
+    },
+    methods: {
+      scrollBottom() {
+        //当前页面是否存在id = list-box
+        const element = document.getElementById("list-box");
+        //当前页面不否存在id =list-box或没有下一页时结束
+        if (element == null || !this.pageStatus) {
+          return false;
+        }
+        //浮动框变化的高度
+        const height1 =
+          document.documentElement.scrollTop || document.body.scrollTop;
+        //屏幕的高度
+        const height2 =
+          document.documentElement.clientHeight || document.body.clientHeight;
+        //id=list-box的高度（列表信息放在这个标签里）
+        const height3 =
+          document.getElementById("list-box").scrollHeight ||
+          document.documentElement.clientHeight ||
+          document.body.clientHeight;
+        //id=header-box的高度（列表信息外的其他高度）
+        const height4 = document.getElementById("header-box").scrollHeight || 100;
+        if (height1 + height2 > height3 + height4 && this.pageSum > 0) {
+          // 请求的数据未加载完成时，滚动到底部不再请求前一天的数据
+          this.loading = true;
+          let pageNumber = pageSum;
+          if (this.pageSum != 0) {
+            pageNumber = pageNumber + 1;
+          }
+          if (this.pageNum < pageNumber) {
+            this.pageNum += 1;
+            this.pageStatus = false;
+          } else {
+            this.tips = "没有数据可加载了";
+            this.pageStatus = false;
+            return false;
+          }
+          this.tips = "数据正在加载中...";
+          const data = {
+            pageNum: this.pageNum
+          };
+          this.$store
+            .dispatch("getMyList", data)
+            .then(resp => {
+              if (resp.data.code == "00") {
+                const newList = resp.data.data.list;
+                for (var i = 0; i < newList.length; i++) {
+                  this.myList.push(newList[i]);
+                }
+                // 请求的数据执行完成后
+                this.$nextTick(() => {
+                  this.loading = false;
+                  this.pageStatus = true;
+                });
+              } else {
+                alert(resp.data.msg);
+              }
+            })
+            .catch(() => {
+              this.tips = "连接失败，请稍后重试";
+            });
+        }
+      },
+      //获取股价列表
+      getAllStockPrice(){
+        let that = this;
+        getAllStockPrice()
+          .then(response => {
+            that.allStockPrice = response.data;
+          });
+
+      },
+      /**
+       * 滚动事件
+       */
+      scroll() {
+        let isLoading = false;
+        window.onscroll = () => {
+          // 距离底部200px时加载一次
+          let ss= document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight;
+          console.log(ss);
+          let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 0;
+          if (bottomOfWindow) {
+            this.getListReachBottom();
+          }
+        }
+      },
+      //返回按钮
+      goBack(){
+        console.log(this.optionName);
+        let that  = this;
+        this.$router.push({ path:'/companyInfo'})
+      },
+      /**
+       * 选择省份
+       * @param e
+       */
+      getValue(e){
+        this.listQuery.addrCity = undefined;
+      },
+      /**
+       * 选择股价开始价格
+       * @param target
+       */
+      getStartValue(){
+        if(this.listQuery.priceStart >= this.listQuery.priceEnd){
+          this.listQuery.priceEnd = undefined;
+        }
+      },
+      /**
+       * 选择股价结束价格
+       * @param target
+       */
+      getEndValue(){
+        if(this.listQuery.priceStart >= this.listQuery.priceEnd){
+          this.listQuery.priceStart = undefined;
+        }
+      },
+      view(id, name) {
+        //众筹详情页
+        console.log(id+"----"+name);
+        this.$router.push({ path:'/stockCrowdDetail?id='+id+"&name="+name })
+      },
+      /**
+       * 触底加载更多数据
+       * @returns {boolean}
+       */
+      getListReachBottom:function () {
+        var that = this;
+        if(this.nomore){
+          return false
+        }
+        let allList = this.list;
+        this.nomore = false;
+        this.nodata = false;
+        stockSearchPage(this.listQuery)
+          .then(res => {
+          if (res.code == 1) {
+            res.data.list.forEach(function(item){
+              item.price = item.price/10000;
+              item.companyPic = "http://113.105.137.152:9800/vehicle/branchCompany/stock/download/companyPic?realFileRelPath="+item.companyPic;
+              allList.push(item);
+            });
+            this.lastPage = res.data.lastPage;
+            this.list = allList;
+            if(allList.length == this.listQuery.page*this.listQuery.limit){
+              this.listQuery.page++
+            }else if(allList.length < this.listQuery.page*this.listQuery.limit){
+              this.nomore =  true;
+              localStorage.setItem("isMore",true);
+            }else if(allList.length == 0){
+              this.nodata = true;
+            }
+          }
+        });
+      },
+      /**
+       * 获取股权列表数据
+       */
+      getList:function () {
+        var that = this;
+        this.nomore = false;
+        this.nodata = false;
+        this.list = [];
+        this.listQuery.page = 1;
+        let allList = this.list;
+        stockSearchPage(this.listQuery)
+          .then(res => {
+            if (res.code == 1) {
+              res.data.list.forEach(function(item){
+                item.price = item.price/10000;
+                item.companyPic = "http://113.105.137.152:9800/vehicle/branchCompany/stock/download/companyPic?realFileRelPath="+item.companyPic;
+              allList.push(item);
+            });
+              this.list = allList;
+              this.lastPage = res.data.lastPage;
+            if(allList.length == this.listQuery.page*this.listQuery.limit){
+              this.listQuery.page++
+            }else if(allList.length < this.listQuery.page*this.listQuery.limit){
+              this.nomore =  true;
+              localStorage.setItem("isMore",true);
+            }else if(allList.length == 0){
+              this.nodata = true;
+            }
+          }
+        });
+      },
+    }
+  }
+</script>

src/views/baseInfo/stockCrowdDetail/index.vue

+<template>
+  <div>
+    <div class="header-css">
+      <!--@click="$router.push({name:'mypoints'})"-->
+      <img @click="goBack()" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAfCAYAAADqUJ2JAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU0OTNGQTA2QTEwNTExRTg4M0E3OUI4RkYwRDg3RUU4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU0OTNGQTA3QTEwNTExRTg4M0E3OUI4RkYwRDg3RUU4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTQ5M0ZBMDRBMTA1MTFFODgzQTc5QjhGRjBEODdFRTgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTQ5M0ZBMDVBMTA1MTFFODgzQTc5QjhGRjBEODdFRTgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4bKBAsAAAAzklEQVR42qzWWQrCMBDG8VzCtVb01ZuIFJUq4nU8l+AlXEsFXz2CC+iXB2EYgjBL4P/6o4Qk0xD0q4G2aBSMyB590F2LNQkSe6OFFGmhA0PWUqSNjgxZWZEXWkqRDjpZkS46E+Sp2diIXAjyQKUUyRLIXIr0UMWQmQapGTKVInkCKaTIAF0ZMtEgN4aMNZdwR5DYRvskuH1RXEOPPfqtfgIrtFjucY5cTza9a5X1rv27uKUWc3mPXF9I+ma7YuYp4jrXXCet6+xP/o18BRgA2Nl6bmmSdvgAAAAASUVORK5CYII=" size="25" style="width: 15px; height: 20px; margin: 10px">
+      <span class="header-title">众筹详情页</span>
+    </div>
+    <!--众筹详情页-->
+    <!--我要参与-->
+    <div class="shoppings main-container"  v-if="optionName=='detail'">
+      <div class="first" >
+        <h3>{{companyName}}</h3>
+       <div class="pad10 tips">
+         <p>参与须知：</p>
+         <p>本次提交为意向参与，后续会有专门的工作人员联系您，联系您，最终的参与众筹成功，需要线下确认。</p>
+       </div>
+        <el-form :model="form" :rules="rules" ref="form" label-width="100px">
+          <el-input v-model="form.companyId" hidden></el-input>
+          <el-form-item label="姓名" prop="name">
+            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
+          </el-form-item>
+          <el-form-item label="联系电话" prop="tel">
+            <el-input v-model="form.tel" placeholder="请输入联系电话"></el-input>
+          </el-form-item>
+          <el-form-item label="数量" prop="count">
+            <el-input v-model="form.count" placeholder="请输入份额"></el-input>
+          </el-form-item>
+        </el-form>
+        <ruby class="ruby" v-if="msg">{{msg}}</ruby>
+        <div class="flex-jcc-aic bottom-button">
+          <el-button @click="submit('form')">提 交</el-button>
+        </div>
+      </div>
+    </div>
+    <!--参与结果页-->
+    <div class="shoppings main-container flex-jcc-aic-cl" v-if="optionName=='crowdResult'">
+      <img class="success-tip" src="http://218.10.105.196:9007/ipc//img/photo.png"/>
+      <h5>感谢您的参与，后续会有专门的客服与您联系！</h5>
+      <el-button @click="goBack()">返回股权众筹页</el-button>
+    </div>
+  </div>
+</template>
+
+<style>
+  .pad10{
+    padding: 10px;
+  }
+  .tips p{
+    color: #999;
+    font-size: 14px;
+  }
+
+  .success-tip{
+    width: 100px;
+    height:100px;
+    margin: 30px;
+    border-radius: 100px;
+  }
+  .bottom-button{
+    padding: 10px;
+  }
+  .bottom-button button{
+    padding: 10px 40px;
+  }
+  .ruby{
+    display: block;
+    color: red;
+    font-size: 13px;
+    padding-bottom: 10px;
+  }
+  .el-form-item__label{
+    text-align: left;
+  }
+  .el-form--inline .el-form-item__content{
+    margin-bottom: 10px;
+  }
+  p{
+    padding: 3px;
+    margin: 0;
+  }
+</style>
+
+<script>
+  import {
+    stockSearchPage,
+    stockApply,
+    page,
+    addObj,
+    getObj,
+    delObj,
+    putObj
+  } from 'api/base_info/branch_company';
+
+  import {mapGetters} from 'vuex';
+  import ElForm from "../../../../node_modules/element-ui/packages/form/src/form.vue";
+  import ElFormItem from "../../../../node_modules/element-ui/packages/form/src/form-item.vue";
+
+  export default {
+    components: {
+      ElFormItem,
+      ElForm},
+    name: 'stockCrowdDetail',
+    data() {
+      return {
+        optionName:"detail",
+        form: {
+          name: undefined,
+          tel: undefined,
+          companyId: undefined,
+          count: undefined
+        },
+        companyName: "",//公司名称
+        rules: {
+          name: [
+            {
+              required: true,
+              message: '请输名称',
+              trigger: 'blur'
+            }
+          ],
+          tel: [{
+            required: true,
+            message: '请输入正确的联系电话',
+            trigger: 'blur'
+          }],
+          count: [{
+            required: true,
+            message: '请输入份额',
+            trigger: 'blur'
+          }]
+        },
+        msg:"",//提示语
+        total: null,
+        listLoading: true
+      }
+    },
+    created() {
+    },
+    methods: {
+      //返回按钮
+      goBack(){
+        this.$router.push({ path:'/stockCrowd' })
+      },
+      switchTab(target){
+        this.optionName = target;
+      },
+      submit(formName){debugger
+        let that = this;
+        that.msg = "";
+        if(!that.form.companyId){
+          that.msg = "请选择待申请的众筹项目！"
+        }
+        var isPhone = false;
+        var isNum = false;
+        var checkCount = (value) => {
+          if(!value){
+            return;
+          } else {
+            if (!(/(^[1-9]\d*$)/.test(value))) {
+              isNum = false;
+              that.msg = "请输入大于0的整数";
+              return;
+            } else {
+              isNum = true;
+            }
+          }
+        }
+        var checkPhone = (value) => {
+          if (!value) {
+            return;
+          } else {
+            const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
+            console.log(reg.test(value));
+            if (reg.test(value)) {
+              isPhone = true;
+            } else {
+              isPhone = false;
+              that.msg = "请输入正确手机号";
+              return;
+            }
+          }
+        };
+        //提交
+        const set = this.$refs;
+        set[formName].validate(valid => {
+          checkPhone(that.form.tel);
+          checkCount(that.form.count);
+          if (valid && isPhone) {
+            stockApply(this.form)
+              .then(() => {
+                that.optionName = "crowdResult"
+              })
+          } else {
+            return false;
+          }
+        });
+      }
+    },
+    mounted() {
+      let id = this.$route.query.id;
+      this.form.companyId = this.$route.query.id;
+      this.companyName = this.$route.query.name;
+    }
+
+  }
+</script>