精简代码

public/config.js

@@ -4,5 +4,5 @@ window.ptconfig={
     // request uri
     apiHost:'https://dfmg.dficoins.com/api/getkkline',
     //
-    coins:['PYTN','GQL']
-}
+    coins:['PYTN','OIGE','GQL','RPN']
+}

src/views/HomeView.vue

@@ -4,18 +4,10 @@
 			<!-- 左侧导航 -->
 			<div class="layui-side layui-bg-black" style="top: 0 !important;">
 				<p class="market_list border-bottom-grey" style="color: #1AA094">交易市场</p>
-				<!-- <a href="index.html"><p class="market_list border-bottom-grey">PYTNUSDT</p></a>
-            <a href="oige.html"><p class="market_list border-bottom-grey">OIGEUSDT</p></a>
-            <a href="gql.html"><p class="market_list border-bottom-grey">GQLUSDT</p></a>
-            <a href="rpn.html"><p class="market_list border-bottom-grey">RPNUSDT</p></a> -->
-				<p class="market_list border-bottom-grey" @click="handleClick('PYTN')"
-					:style="{'color': title =='PYTN'?'red':'white'}">PYTNUSDT</p>
-				<p class="market_list border-bottom-grey" @click="handleClick('OIGE')"
-					:style="{'color': title =='OIGE'?'red':'white'}">OIGEUSDT</p>
-				<p class="market_list border-bottom-grey" @click="handleClick('GQL')"
-					:style="{'color': title =='GQL'?'red':'white'}">GQLUSDT</p>
-				<p class="market_list border-bottom-grey" @click="handleClick('RPN')"
-					:style="{'color': title =='RPN'?'red':'white'}">RPNUSDT</p>
+				<!-- loop coins list  -->
+				<p v-for="(ic,index) in coins" :key="index" class="market_list border-bottom-grey" 
+				:class="{cl_active:index == cur_index }" 
+				@click="handleClick(ic,index)">{{ic}}USDT</p>	
 			</div>
 			<!-- 右侧内容 -->
 			<div class="layui-body" style="top: 0 !important;bottom:0">
@@ -59,8 +51,6 @@
 
 <script>
 	import $ from 'jquery';
-	// import 'layui-src/src/layui.js';
-	// import 'layui-src/src/css/layui.css';
 	import KlineView from '@/components/PytnUsdt.vue';
 	// import '../../static/kline/src/klineCharts.js';
 	import sysconfig from '@/utils/config'
@@ -72,7 +62,11 @@
 		},
 		data() {
 			return {
-				title: sessionStorage.getItem('title') || "PYTN"
+				title: sessionStorage.getItem('title') || "PYTN",
+				// plat coins list
+				coins:[],
+				// current index
+				cur_index:0,
 			};
 		},
 		computed: {
@@ -84,6 +78,8 @@
 			this.$router.replace({ path: '/KlineView', query: { symbol: this.title, interval: kcCurrentData.interval}});
 		},
 		mounted() {
+			//bind coins 
+			this.coins = sysconfig.get("coins")
 			//console.log(sysconfig.get('flag'))
 			const apihost = sysconfig.get('apiHost')
 
@@ -111,7 +107,7 @@
 							});
 						},
 						success: function(result) { //成功回调
-							console.log(result);
+					
 							if (result.status) {
 								loadMoreKline(result.data, true, result.code);
 								$('.interval_btn').removeClass('active');
@@ -152,7 +148,9 @@
 					location.reload();
 				}
 			},
-			handleClick(name) {
+			handleClick(name,index) {
+				console.log(name,index,"hc")
+				this.cur_index = index
 				this.title = name
 				sessionStorage.setItem('title',name)
 				sessionStorage.setItem('interval',kcCurrentData.interval)
@@ -162,9 +160,19 @@
 		}
 	};
 </script>
+
 <style scoped>
 	@import '../../public/static/kline/src/index.css';
 	@import '../../public/static/kline/src/kline.css';
 	@import '../../public/static/kline/src/public(1).css';
 	@import '../../public/static/kline/src/soulTable.css';
+
+	.market_list{
+		pointer:default;
+	}
+
+	.cl_active{
+		background:#1AA094;
+		color:#f0f0f0;
+	}
 </style>