首页行情轮播/成交量

src/assets/js/api.js

@@ -4,20 +4,20 @@ import common from './common' // common.js文件中统一存放一些公共常
 import store from '@/store/index' //vuex
 import i18n from '@/assets/js/language'
 
-import { Message, Loading } from 'element-ui'
+import { Message } from 'element-ui'
 
 const baseURL = common.baseURL; // API接口
 
 // loading对象
-let loadingObj;
+// let loadingObj;
 
 let reqNum = 0; //用于判断多个axios请求是否都已经完成
 function reqNumFunc() {
 	reqNum--; //没完成一次接口请求 -1，当reqNum === 0 时，说明所有同时发起的请求已经完成
 	if (reqNum === 0) {
-		if (loadingObj) {
-			loadingObj.close() // 隐藏loading
-		}
+		// if (loadingObj) {
+		// 	loadingObj.close() // 隐藏loading
+		// }
 		Message.close();
 	}
 }
@@ -54,17 +54,17 @@ axios.interceptors.request.use(function(config) {
 	config.headers['Accept-language'] = common.getItem('lan') == 'zh' ? 'cn':'en';
 	
 	//判断是否需要Loading，如果不需要loading 接口请求时设置 loading为true this.common.setItem('loading',true);
-	let isLoadings = common.getItem('loading');
-
-	if (!isLoadings) {
-		// 创建loading
-		loadingObj = Loading.service({
-			lock: true,
-			text: i18n.t('加载中'),
-			spinner: 'el-icon-loading',
-			//background: 'rgba(0, 0, 0, 0.7)'
-		})
-	}
+	// let isLoadings = common.getItem('loading');
+
+	// if (!isLoadings) {
+	// 	// 创建loading
+	// 	loadingObj = Loading.service({
+	// 		lock: true,
+	// 		text: i18n.t('加载中'),
+	// 		spinner: 'el-icon-loading',
+	// 		//background: 'rgba(0, 0, 0, 0.7)'
+	// 	})
+	// }
 	return config
 }, function(error) {
 	// 请求错误时弹框提示，或做些其他事

src/store/modules/trend.js

@@ -8,11 +8,15 @@ export default {
 		allCoinList: [], //所有币种 对应后台币种管理 --资产模块使用
 		allPairList: [], //所有交易对  --行情模块使用
 		allTrendList: [], //所有交易对+价格
+		newList: [],//新币
 		myCollectList: [] ,//我的收藏
 		
-		currentPair: null, //当前交易对
+		currentPair: 'BTC-USDT', //当前交易对
 		buyList: [], //买盘
 		sellList: [], //卖盘
+		
+		// 实时成交
+		transactions:[],
 	},
 	mutations: {
 		setCoin(state, data) { //币种 --资产模块
@@ -21,11 +25,16 @@ export default {
 		setPair(state, data) { //交易对 -- 行情、币币模块
 			//console.log(JSON.stringify(data));
 			state.allPairList = data;
+			console.log(JSON.stringify(data)+'12131313')
 		},
 		setTrend(state, data) { //行情
 			//console.log(JSON.stringify(data));
 			state.allTrendList = data;
 		},
+		setNewCoin(state, data) { //行情
+			//console.log(JSON.stringify(data));
+			state.newList = data;
+		},
 		setDepth(state, data) { //深度
 			state.buyList = data.buyList;
 			state.sellList = data.sellList;
@@ -37,19 +46,43 @@ export default {
 		
 		resetPair(state, data) { //更新交易对
 			state.currentPair = data;
-		}
+		},
+		// 切换 当前交易对
+		setSub(state,data){
+			state.sub={
+				dealCoin: data.dealCoin,
+				convertType: data.convertType,
+				name: data.symbolId
+			}
+		},
+		
+		// 设置 实时成交
+		setTransactions(state, data) {
+			state.transactions = data
+		},
 	},
 	actions: {
+		
 		async init(context) {
 			let token = common.getItem(common.tokenKey);
 			if (token) { // 如果token存在,才去获取用户数据
 				context.dispatch('getAllCoin');
 				context.dispatch('getCollect');
 				await context.dispatch('getTrend');
+				await context.dispatch('getNewCoin');
 				context.dispatch('getAllPair');
+				context.dispatch('getTransactions');
 			}
 		},
-
+		
+		// 获取实时成交
+		getTransactions(ctx) {
+			console.log(ctx.state.currentPair);
+			request.getAxios('/api/entrust/trade/list/'+`${ctx.state.currentPair.dealCoin}-${ctx.state.currentPair.convertType}`).then(res => {
+				ctx.commit('setTransactions', res)
+			});
+		},
+		
 		getAllCoin(context) { //获取资产的所有币种信息
 			request.getAxios('/api/user/coin/list')
 				.then(res => {
@@ -57,7 +90,7 @@ export default {
 				})
 		},
 		getAllPair(context) { //获取行情的交易对
-			request.getAxios('/api/coin/case/all')
+			return request.getAxios('/api/coin/case/all')
 				.then(res => {
 					// let newData = [...this.allTrendList]
 					res.data.push({
@@ -72,12 +105,23 @@ export default {
 						status: 'C_C_S_NORMAL',
 						childen: [{'prices': context.state.allTrendList}]
 					})
+					let list = []
+					context.state.allTrendList.forEach(item=>{
+						context.state.newList.forEach(item2=>{
+							if(item.dealCoin == item2.coinId) {
+								list.push(item)
+							}
+						})
+						
+					})
 					res.data.push({
 						caseName: '新币榜',
 						caseCode: "6",
 						status: 'C_C_S_NORMAL',
-						childen: [{'prices': context.state.allTrendList}]
+						childen: [{'prices': list}]
 					})
+					
+					if(!context.state.currentPair) context.commit('resetPair', res.data[0].childen[0].prices[0].dealCoin);
 					context.commit('setPair', res.data);
 				})
 		},
@@ -88,6 +132,13 @@ export default {
 					context.commit('setTrend', res.data);
 				})
 		},
+		getNewCoin(context) { //获取行情
+			common.setItem("loading", true); //不显示loading
+			return request.getAxios('/api/new/coin/list', {})
+				.then(res => {
+					context.commit('setNewCoin', res.data);
+				})
+		},
 		getDepth(context, params) { //获取深度
 			common.setItem('loading', true); //不显示loading
 			request.postAxios('/api/entrust/depth/list', params)

src/views/coincoin/coincoin_trade.vue

@@ -98,6 +98,11 @@
 		computed: {
 			...mapState('trend', ['allPairList', 'currentPair']),
 		},
+		watch:{
+			currentPair(val,old){
+				if(val.symbolId!==old.symbolId) this.restart()
+			}
+		},
 		methods: {
 			/* ----------------  以下是K线图配置  --------------------*/
 			
@@ -111,7 +116,7 @@
 			
 			//重启K线图
 			restart() {
-				this.$store.state.tv_setting.symbol = 'BTC-USDT'; //K线版块(交易对)
+				this.$store.state.tv_setting.symbol = this.currentPair.symbolId; //K线版块(交易对)
 				this.$refs.tradingViewChart.symbolTab();
 			},
 			
@@ -119,7 +124,7 @@
 			KlinFunc() {
 				if (!this.getsetting().wsurl) {
 					this.$store.state.tv_setting.skin = 'white'; //K线颜色 white \ black
-					this.$store.state.tv_setting.symbol = 'BTC-USDT'; //K线版块(交易对)
+					this.$store.state.tv_setting.symbol = this.currentPair.symbolId; //K线版块(交易对)
 					this.load();
 					console.log(11111111)
 					this.$store.state.tv_setting.wsurl = 'ws://119.23.49.169:10803/ws/coin/exchange';
@@ -210,6 +215,10 @@
 				this.$refs.order.getOrderList(1);
 				this.getBalance();
 			},
+			async getData(){
+				await this.$store.dispatch('trend/getAllPair');
+				this.getDepth();
+			}
 		},
 		beforeDestroy() {
 			clearInterval(this.timers);
@@ -218,8 +227,7 @@
 			this.initCoin();
 			this.KlinFunc()
 			this.timers = setInterval(() => {
-				this.$store.dispatch('trend/getAllPair');
-				this.getDepth();
+				this.getData();
 			}, 1000);
 		}
 	}

src/views/coincoin/components/trade_deal.vue

@@ -15,18 +15,11 @@
 				</div>
 
 				<div class="deal-folder">
-					<div class="deal-list">
+					<div class="deal-list" v-for="(item,index) of transactions.data" :key="index">
 						<ul>
-							<li><span>10:52:08</span></li>
-							<li><span class="red-text">4784.10</span></li>
-							<li><span>0.4528</span></li>
-						</ul>
-					</div>
-					<div class="deal-list">
-						<ul>
-							<li><span>10:52:08</span></li>
-							<li><span class="red-text">4786.55</span></li>
-							<li><span>0.51865</span></li>
+							<li><span>{{item.date | dateFormat('HH:mm:ss')}}</span></li>
+							<li><span class="red-text">{{item.price}}</span></li>
+							<li><span>{{item.amount}}</span></li>
 						</ul>
 					</div>
 				</div>
@@ -40,7 +33,7 @@
 	export default {
 		name: 'tradeDeal',
 		computed: {
-			...mapState('trend', ['currentPair']),
+			...mapState('trend', ['currentPair','transactions']),
 		},
 	}
 </script>

src/views/coincoin/components/trade_pair_list.vue

@@ -223,6 +223,7 @@
 			},
 			choosePair(item) { //选择交易对
 				this.$store.dispatch('trend/getNewPair', item);
+				this.$store.dispatch('trend/getTransactions');
 				this.$emit('updateOrder');
 			},
 			

src/views/index/components/price.vue

@@ -1,6 +1,38 @@
 <template>
 	<div class="trade-block">
-		<ul class="market-ticker">
+		<el-carousel height="121px" :interval="5000">
+			<el-carousel-item class="market-ticker" v-for="(item, index) of priceList" :key="index">
+				<ul style="display: flex; justify-content: space-evenly;">
+					<li v-for="(i,j) in item" :key="'id_'+j">
+						<dl v-if="i" class="btcusdt">
+							<dt>
+								<strong>{{i.dealCoin}}/{{i.convertType}}</strong>
+							</dt>
+							<dd class="price">
+								{{i.price}} <em> {{i.price * 7 | Decimal(2)}} CNY</em>
+							</dd>
+							<dd class="vol">24H {{i.quoteVolume}} </dd>
+							<dd class="rate up" v-if="i.changes > 0">+{{i.changes}}%</dd>
+							<dd class="rate down" v-if="i.changes <= 0">{{i.changes}}%</dd>
+						</dl>
+					</li>
+					<!-- <li v-for="{i,$index} in item" :key="$index"> -->
+						<!-- <dl v-if="i" class="btcusdt">
+							<dt>
+								<strong>{{i.dealCoin}}/{{i.convertType}}</strong>
+							</dt>
+							<dd class="price">
+								{{i.price}} <em> {{i.price * 7 | Decimal(2)}} CNY</em>
+							</dd>
+							<dd class="vol">24H {{i.quoteVolume}} </dd>
+							<dd class="rate up" v-if="i.changes > 0">+{{i.changes}}%</dd>
+							<dd class="rate down" v-if="i.changes <= 0">{{i.changes}}%</dd>
+						</dl> -->
+					<!-- </li> -->
+				</ul>
+			</el-carousel-item>
+		</el-carousel>
+		<!-- <ul class="market-ticker">
 			<li v-for="item of priceList" :key="item.symbolId">
 				<dl class="btcusdt">
 					<dt>
@@ -14,30 +46,63 @@
 					<dd class="rate down" v-if="item.changes <= 0">{{item.changes}}%</dd>
 				</dl>
 			</li>
-		</ul>
+		</ul> -->
 	</div>
 </template>
 
 <script>
-	import { mapState } from 'vuex'
+	import {
+		mapState
+	} from 'vuex'
 	export default {
 		name: 'indexPrice',
 		computed: {
 			...mapState('trend', ['allPairList', 'allTrendList']),
-			
+
 			priceList() {
 				let list = [];
-				this.allTrendList.forEach((item) => {
-					if(item.caseCode == 1) {
-						list.push(item)
-					}
-				});
+				for (let i = 0; i < Math.ceil(this.allTrendList.length / 3); i++) {
+					let ls = [...this.allTrendList];
+					let item = ls.splice(i * 3, 3);
+					list.push(item);
+				}
 				return list;
 			}
 		}
-		
+
 	}
 </script>
 
 <style>
+	.trade-block .el-carousel__indicator--horizontal {
+		display: inline-block;
+		padding: 12px 4px !important;
+		height: 12px !important;
+	}
+
+	.trade-block .el-carousel__indicators--horizontal {
+		bottom: 0%;
+		left: 49.5%;
+		transform: translateX(-50%);
+	}
+
+	.el-carousel__indicators {
+		position: absolute;
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		z-index: 2;
+	}
+
+	.trade-block .el-carousel__button {
+		width: 12px;
+		height: 12px;
+		background: rgba(0, 0, 0, .2);
+		border-radius: 50%;
+		opacity: 1;
+	}
+
+	.trade-block .is-active .el-carousel__button {
+		background: #007aff;
+	}
 </style>

src/views/index/components/trend.vue

@@ -168,16 +168,6 @@
 						})
 					}
 				});
-				
-				// newData.sort((a, b) => a.changes - b.changes)
-
-				// list.push({
-				// 	caseName: '涨跌榜',
-				// 	caseCode: "4",
-				// 	status: 'C_C_S_NORMAL',
-				// 	childen: newData || []
-				// })
-				// console.log(list)
 				return list;
 			},
 			tradePairList() { //交易对列表
@@ -289,8 +279,10 @@
 				this.caseIndex = item.caseCode;
 				if(this.caseIndex == 4) {
 					this.toRange = 2
+					this.toVolumn = 0
 				}else if(this.caseIndex == 5) {
 					this.toVolumn = 2
+					this.toRange = 2
 				}else {
 					this.toVolumn = 0
 					this.toRange = 0