Skip to content

C
cloud-platform-ui
Commit 2f4ae745 authored by lixy's avatar lixy
Browse files
Options

地图+众筹

parent 529791ec
Hide whitespace changes
Inline Side-by-side
Showing with 1269 additions and 47 deletions
src/App.vue
View file @ 2f4ae745
......@@ -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
View file @ 2f4ae745
......@@ -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
View file @ 2f4ae745
......@@ -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
View file @ 2f4ae745
......@@ -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
View file @ 2f4ae745
......@@ -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 0 → 100644
View file @ 2f4ae745
<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 0 → 100644
View file @ 2f4ae745
<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 0 → 100644
View file @ 2f4ae745
<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 0 → 100644
View file @ 2f4ae745
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment