地图+众筹

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

@@ -161,49 +161,66 @@ export const asyncRouterMap = [{
     authority: 'serviceZipkinManager'
   }]
 }, {
-    path: '/baseInfo',
-    component: Layout,
-    name: '基础信息',
-    icon: 'fa-user',
-    authority: 'baseInfo',
-    children: [{
-      path: 'branchCompany',
-      component: _import('baseInfo/branchCompany/index'),
-      name: '分公司管理',
-      authority: 'branchCompany'
+  path: '/baseInfo',
+  component: Layout,
+  name: '基础信息',
+  icon: 'fa-user',
+  authority: 'baseInfo',
+  children: [{
+    path: 'branchCompany',
+    component: _import('baseInfo/branchCompany/index'),
+    name: '分公司管理',
+    authority: 'branchCompany'
+  },
+  {
+    path: '/baseInfo/accompanyingItem',
+    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: '车辆管理',
+  icon: 'setting',
+  authority: 'vehicle',
+  children: [
+    {
+      path: 'vehicleInfo',
+      component: _import('vehicle/vehicleInfo/index'),
+      name: '车辆信息管理',
+      authority: 'vehicleInfo'
     },
-      {
-        path: '/baseInfo/accompanyingItem',
-        component: _import('vehicle/accompanyingItem/index'),
-        name: '随行物品管理',
-        authority: 'accompanyingItem'
-      }
-    ]
-  }, {
-    path: '/vehicle',
-    component: Layout,
-    name: '车辆管理',
-    icon: 'setting',
-    authority: 'vehicle',
-    children: [
-      {
-        path: 'vehicleInfo',
-        component: _import('vehicle/vehicleInfo/index'),
-        name: '车辆信息管理',
-        authority: 'vehicleInfo'
-      },
-      {
-        path: 'bookRecord',
-        component: _import('vehicle/bookRecord/index'),
-        name: '车辆申请管理',
-        authority: 'bookRecord'
-      },
-      {
-        path: 'vehicleWarningMsg',
-        component: _import('vehicle/vehicleWarningMsg/index'),
-        name: '车辆预警消息',
-        authority: 'vehicleWarningMsg'
-      }
-    ]
-  }
-];
+    {
+      path: 'bookRecord',
+      component: _import('vehicle/bookRecord/index'),
+      name: '车辆申请管理',
+      authority: 'bookRecord'
+    },
+    {
+      path: 'vehicleWarningMsg',
+      component: _import('vehicle/vehicleWarningMsg/index'),
+      name: '车辆预警消息',
+      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/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>