分公司入股

src/router/index.js

@@ -34,7 +34,7 @@ export const constantRouterMap = [{
 },
 {
   path: '/stockCrowd',
-  component: _import('baseInfo/stockCrowd/index'),
+  component: _import('baseInfo/stockCrowd/stockCrowd'),
   name: '分公司入股',
   hidden: true
   // authority: 'stockCrowd'

src/views/baseInfo/stockCrowd/index.vue

@@ -12,9 +12,11 @@
           <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 :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>
             <el-select class="filter-item" v-model="listQuery.addrCity" placeholder="请选择城市">
+              <el-option :key="undefined" label="无" :value="undefined"></el-option>
               <el-option v-for="item in cityRegions4Query" :key="item.id" :label="item.name"
                          :value="item.id"></el-option>
             </el-select>
@@ -22,6 +24,7 @@
           <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 :key="undefined" label="无" :value="undefined"></el-option>
               <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'>-->
@@ -169,6 +172,7 @@
           addrTown: undefined
         },
         inline: true,
+        send: !1,//是否已发送请求
       }
     },
     computed: {
@@ -285,10 +289,10 @@
         console.log("scroll");
         let isLoading = false;
         window.onscroll = () => {
-          // 距离底部200px时加载一次
+          // 距离底部0px时加载一次
           let ss = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight;
           console.log(ss);
-          let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 0;
+          let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight == 0;
           if (bottomOfWindow) {
             this.getListReachBottom();
           }
@@ -298,7 +302,7 @@
       goBack() {
         console.log(this.optionName);
         let that = this;
-        this.$router.push({path: '/companyInfo'})
+//        this.$router.push({path: '/companyInfo'})
       },
       /**
        * 选择省份
@@ -337,12 +341,16 @@
        */
       getListReachBottom: function () {
         var that = this;
+        if(this.send){
+          return;
+        }
         if (this.nomore) {
           return false
         }
         let allList = this.list;
         this.nomore = false;
         this.nodata = false;
+        this.send = !0;debugger
         stockSearchPage(this.listQuery)
           .then(res => {
             if (res.code == 1) {
@@ -363,6 +371,7 @@
                 this.nodata = true;
               }
             }
+            this.send = !1;
           });
       },
       /**
@@ -370,11 +379,15 @@
        */
       getList: function () {
         var that = this;
+        if(this.send){
+          return;
+        }
         this.nomore = false;
         this.nodata = false;
         this.list = [];
         this.listQuery.page = 1;
         let allList = this.list;
+        this.send = !0;
         stockSearchPage(this.listQuery)
           .then(res => {
             if (res.code == 1) {
@@ -395,6 +408,7 @@
                 this.nodata = true;
               }
             }
+            this.send = !1;debugger
           });
       },
     }

src/views/baseInfo/stockCrowd/stockCrowd.vue

+<template>
+  <div class="category">
+    <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" style="position: fixed;top: 42px;padding-top:10px;background: #fff;z-index: 999;" 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: 45%;margin-right: 10px;" 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>
+            <el-select class="filter-item" style="width: 45%;" v-model="listQuery.addrCity" placeholder="请选择城市">
+              <el-option :key="undefined" label="无" :value="undefined"></el-option>
+              <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 :key="undefined" label="无" :value="undefined"></el-option>
+              <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="shoppings" style="margin-top: 155px;">
+        <div class="all">
+          <div class="goods">
+            <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="0">
+              <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: 130px;height:100px;border-radius: 10px;"/>
+                  <div style="height: 90px;padding-left: 10px;width: 100%;">
+                    <div style="line-height: 20px;">{{item.companyName}}</div>
+                    <div class="flex-jcb-aic">
+                      <div
+                        style="position: relative;background: #ccc;border-radius: 10px;height: 10px;width: 100px;margin-right: 20px;">
+                        <div :style="{width:item.width}" class="last-css"></div>
+                      </div>
+                      <div class="ft12">剩余:{{item.balance}}股</div>
+                    </div>
+                    <div class="ft20">￥{{item.price}}/股</div>
+                  </div>
+                </div>
+              </div>
+              <div class="order-item" v-show="!loading" style="color: #999;justify-content: center;" v-if="list.length<=0">---暂无数据---</div>
+            </div>
+            <infinite-loading v-show="loading" spinner="spiral" style="margin-top:2em" ref="sroller">
+            </infinite-loading>
+            <div v-if="nomore && !loading" style="text-align: center;color: #999;padding: 10px;">
+                ---暂无更多数据---
+              </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import infiniteScroll from 'vue-infinite-scroll'
+  import InfiniteLoading from 'vue-infinite-loading'
+  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,
+      InfiniteLoading
+    },
+    name: 'stockCrowd',
+    directives: {
+      infiniteScroll
+    },
+    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);
+      }
+    },
+    data() {
+      return {
+        inline: true,
+        page: 1,
+        loading: false,
+        list: [],
+        allStockPrice: null,
+        listQuery: {
+          limit: 10,
+          priceStart: undefined,
+          priceEnd: undefined,
+          addrProvince: undefined,
+          addrCity: undefined,
+          addrTown: undefined
+        },
+        nomore: false
+      }
+    },
+    created() {
+      this.getAllStockPrice();//获取股价列表
+    },
+    methods: {
+      //获取股价列表
+      getAllStockPrice() {
+        let that = this;
+        getAllStockPrice()
+          .then(response => {
+            that.allStockPrice = response.data;
+          });
+
+      },
+      /**
+       * 选择省份
+       * @param e
+       */
+      getValue(e) {
+        this.listQuery.addrCity = undefined;
+      },
+      /**
+       * 选择股价开始价格
+       * @param target
+       */
+      getStartValue() {
+        this.listQuery.priceEnd = this.listQuery.priceStart;
+        // 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;
+        }
+      },
+      getList(){
+        this.page = 1;
+        this.list = [];
+        this.nomore = false;
+        this.loadMore();
+      },
+      loadMore: function() {
+        if(this.nomore){
+          return;
+        }
+        this.busy = true;
+        this.loading = true;
+        let params = this.listQuery;
+        params.page = this.page++;
+        stockSearchPage(this.listQuery)
+          .then(res => {
+            this.loading = false;
+            let allList = [];
+            res.data.list.forEach(function (item) {
+              item.price = item.price / 1000 + ",000";
+              item.width = (item.total - item.balance) / item.total * 100 + "px";
+              item.companyPic = "https://xxfcmgmt.upyuns.com/vehicle/branchCompany/stock/download/companyPic?realFileRelPath=" + item.companyPic;
+              allList.push(item);
+            });
+            if(res.data.list.length< this.listQuery.limit && allList.length>0){
+              //已加载全部
+              this.nomore = true;
+            }
+            this.list = [...this.list, ...allList];
+          });
+        this.busy = false;
+      },
+      view(id, name) {
+        //众筹详情页
+        console.log(id + "----" + name);
+        this.$router.push({path: '/stockCrowdDetail?id=' + id + "&name=" + name})
+      },
+      search: function() {
+        this.goods = false
+      },
+      shop: function() {
+        this.goods = true
+      },
+      /**
+       * 获取股权列表数据
+       */
+      infiniteHandler: async function($state) {
+      }
+    }
+  }
+</script>
+<style>
+  .header-title {
+    text-align: center;
+    width: 100%;
+  }
+  .last-css {
+    position: relative;
+    background: #f25b5b;
+    border-radius: 10px;
+    height: 10px;
+  }
+
+  .flex-jcc-aic {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    width: 95%
+  }
+
+  .flex-jcb-aic {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    margin-top: 8px;
+  }
+
+  .ft20 {
+    margin-top: 10px;
+    font-size: 20px;
+    color: #f25b5b;
+  }
+
+  .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>