From 6a69c0fee4b6e1469d0b03b5fc537c86d15601f6 Mon Sep 17 00:00:00 2001
From: vee <apple@MacBook-Pro.local>
Date: Thu, 25 Aug 2022 17:52:37 +0800
Subject: [PATCH] =?UTF-8?q?k=E7=BA=BF=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main.js                 |   3 +-
 pages.json              |  13 +-
 pages/markets/kLine.vue | 864 ++++++++++++++++++++++++++--------------
 3 files changed, 575 insertions(+), 305 deletions(-)

diff --git a/main.js b/main.js
index 18b371b..87176b5 100644
--- a/main.js
+++ b/main.js
@@ -11,7 +11,8 @@ import EN from './utils/language/en_US.js'
 import ZH from './utils/language/zh_TW.js'
 import VI from './utils/language/vi_VN.js'
 
-
+import api from './utils/api.js'
+Vue.prototype.$api = api
 // 自定义底部导航栏
 import tabBar from 'components/tabBar/tabBar.vue'
 Vue.component('tab-bar', tabBar)
diff --git a/pages.json b/pages.json
index c061971..ae9bbb5 100644
--- a/pages.json
+++ b/pages.json
@@ -3,32 +3,33 @@
 		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
 	},
 	"pages": [ //pages数组中第一项表示应用启动页
-		// 登陆部分
+		// 首页部分
 		{
-			"path": "pages/login/index",
+			"path": "pages/home/index",
 			"style": {
 				"navigationStyle": "custom"
 			}
 		},
+		// 登陆部分
 		{
-			"path": "pages/login/forget",
+			"path": "pages/login/index",
 			"style": {
 				"navigationStyle": "custom"
 			}
 		},
 		{
-			"path": "pages/login/register",
+			"path": "pages/login/forget",
 			"style": {
 				"navigationStyle": "custom"
 			}
 		},
-		// 首页部分
 		{
-			"path": "pages/home/index",
+			"path": "pages/login/register",
 			"style": {
 				"navigationStyle": "custom"
 			}
 		},
+		
 
 
 
diff --git a/pages/markets/kLine.vue b/pages/markets/kLine.vue
index 3949589..d9a1032 100644
--- a/pages/markets/kLine.vue
+++ b/pages/markets/kLine.vue
@@ -1,300 +1,568 @@
-<template>
-    <view class="main">
-        <!-- nav -->
-        <navigation>{{ 'BTC/USDT' }}</navigation>
-        <!-- 价格百分比 -->
-        <view class="header">
-            <view class="top">
-                <!-- 实时价格 -->
-                <text class="price">34985.93</text>
-                <!-- 百分比,根据数据正负判断颜色 -->
-                <text class="percent" :class="{ rise: false }">-15.30%</text>
-            </view>
-            <view class="bottom">
-                <view class="left">
-                    <view class="title">{{ i18n.Highest }}</view>
-                    <view class="value">45930.24</view>
-                </view>
-                <view class="center">
-                    <view class="title">{{ i18n.Lowest }}</view>
-                    <view class="value">45930.24</view>
-                </view>
-                <view class="right">
-                    <view class="title">{{ i18n.Amount }}</view>
-                    <view class="value">28394893.30943094</view>
-                </view>
-            </view>
-        </view>
-        <!-- K线图 -->
-        <view class="kline">
-        </view>
-        <!-- 买卖挂牌表 -->
-        <view class="MarketTrades">
-            <view class="headTitle">Market trades</view>
-            <view class="table">
-                <view class="box">
-                    <view class="title">
-                        <view class="quantity">{{ i18n.Quantity }}</view>
-                        <view class="price">{{ i18n.BuyingPrice }}</view>
-                    </view>
-                    <view class="list">
-                        <view class="item" v-for="(item, index) in buyList" :key="index">
-                            <text class="price">0.87897874</text>
-                            <text class="num buy">{{ item }}</text>
-                            <view class="buybg" :style="`width: ${20 * index}%;`"></view>
-                        </view>
-                    </view>
-                </view>
-                <view class="box">
-                    <view class="title">
-                        <view class="quantity">{{ i18n.Quantity }}</view>
-                        <view class="price">{{ i18n.SellPrice20 }}</view>
-                    </view>
-                    <view class="list">
-                        <view class="item" v-for="(item, index) in sellList" :key="index">
-                            <text class="price">0.87897874</text>
-                            <text class="num sell">{{ item }}</text>
-                            <view class="sellbg" :style="`width: ${20 * index}%;`"></view>
-                        </view>
-                    </view>
-
-                </view>
-            </view>
-        </view>
-
-        <view class="btn">
-            <!-- open按钮 -->
-            <u-button class="button" color="#00E8A2" throttleTime="500" @click="openBtnClick">
-                {{ i18n.open }}
-            </u-button>
-            <!-- close按钮 -->
-            <u-button class="button" color="#F4506A" throttleTime="500" @click="closeBtnClick">
-                {{ i18n.close }}
-            </u-button>
-        </view>
-
-    </view>
-</template>
-
+<template>
+	<view class="main">
+		<!-- nav -->
+		<navigation>{{ 'BTC/USDT' }}</navigation>
+		<!-- 价格百分比 -->
+		<view class="header">
+			<view class="top">
+				<!-- 实时价格 -->
+				<text class="price">34985.93</text>
+				<!-- 百分比,根据数据正负判断颜色 -->
+				<text class="percent" :class="{ rise: false }">-15.30%</text>
+			</view>
+			<view class="bottom">
+				<view class="left">
+					<view class="title">{{ i18n.Highest }}</view>
+					<view class="value">45930.24</view>
+				</view>
+				<view class="center">
+					<view class="title">{{ i18n.Lowest }}</view>
+					<view class="value">45930.24</view>
+				</view>
+				<view class="right">
+					<view class="title">{{ i18n.Amount }}</view>
+					<view class="value">28394893.30943094</view>
+				</view>
+			</view>
+		</view>
+		<!-- K线图 -->
+		<view class="kline" id="kline"  :kdata="kdata"
+									:change:kdata="klineE.receive" style="height:1000rpx;color:aliceblue ">
+
+		</view>
+		<!-- 买卖挂牌表 -->
+		<view class="MarketTrades">
+			<view class="headTitle">Market trades</view>
+			<view class="table">
+				<view class="box">
+					<view class="title">
+						<view class="quantity">{{ i18n.Quantity }}</view>
+						<view class="price">{{ i18n.BuyingPrice }}</view>
+					</view>
+					<view class="list">
+						<view class="item" v-for="(item, index) in buyList" :key="index">
+							<text class="price">0.87897874</text>
+							<text class="num buy">{{ item }}</text>
+							<view class="buybg" :style="`width: ${20 * index}%;`"></view>
+						</view>
+					</view>
+				</view>
+				<view class="box">
+					<view class="title">
+						<view class="quantity">{{ i18n.Quantity }}</view>
+						<view class="price">{{ i18n.SellPrice20 }}</view>
+					</view>
+					<view class="list">
+						<view class="item" v-for="(item, index) in sellList" :key="index">
+							<text class="price">0.87897874</text>
+							<text class="num sell">{{ item }}</text>
+							<view class="sellbg" :style="`width: ${20 * index}%;`"></view>
+						</view>
+					</view>
+
+				</view>
+			</view>
+		</view>
+
+		<view class="btn">
+			<!-- open按钮 -->
+			<u-button class="button" color="#00E8A2" throttleTime="500" @click="openBtnClick">
+				{{ i18n.open }}
+			</u-button>
+			<!-- close按钮 -->
+			<u-button class="button" color="#F4506A" throttleTime="500" @click="closeBtnClick">
+				{{ i18n.close }}
+			</u-button>
+		</view>
+
+	</view>
+</template>
+
 <script>
-export default {
-    name: "trade",
-    data() {
-        return {
-            buyList: 7,
-            sellList: 9,
-
-        };
-    },
-    computed: {
-        i18n() {
-            return this.$t("markets");
-        },
-    },
-    onLoad() {
-
-    },
-    onShow() { },
-    methods: {
-        depthChange(e) {
-            console.log(e);
-        },
-        goto(page) {
-            let url = '';
-            switch (page) {
-                case 'kLine':
-                    url = '/pages/markets/kLine'
-                    break;
-                default:
-                    break;
-            }
-            uni.navigateTo({
-                url,
-            });
-        }
-
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-.main {
-
-    .header {
-        background: #000000;
-        margin-top: 200rpx;
-        padding: 0 32rpx;
-
-
-        .top {
-            height: 80rpx;
-            border-bottom: 2rpx solid #A1A0A8;
-
-            .price {
-                line-height: 80rpx;
-                font-size: 40rpx;
-            }
-
-            .percent {
-                vertical-align: text-top;
-                margin-left: 20rpx;
-                padding: 8rpx 20rpx;
-                border-radius: 8rpx;
-                font-size: 24rpx;
-                background-color: rgba($color: #F26666, $alpha: 0.2);
-                color: #F26666;
-
-                &.rise {
-                    color: #00E8A2;
-                    background-color: rgba($color: #00E8A2, $alpha: 0.2);
-                }
-            }
-        }
-
-        .bottom {
-            display: flex;
-            font-size: 24rpx;
-
-            .title {
-                margin-top: 24rpx;
-                line-height: 32rpx;
-            }
-
-            .value {
-                margin: 24rpx 0;
-                color: #A1A0A8;
-            }
-
-            .left {
-                flex: 1;
-                text-align: left;
-            }
-
-            .center {
-                flex: 1;
-                text-align: center;
-            }
-
-            .right {
-                flex: 1;
-                text-align: right;
-            }
-
-        }
-    }
-
-    .MarketTrades {
-        .headTitle {
-            padding-left: 32rpx;
-            font-size: 34rpx;
-            height: 80rpx;
-            line-height: 80rpx;
-        }
-
-        .table {
-            display: flex;
-            font-size: 24rpx;
-
-            .box {
-                flex: 1;
-                overflow: hidden;
-                height: 450rpx;
-
-                .title {
-                    display: flex;
-                    margin-bottom: 16rpx;
-                    color: #A1A0A8;
-
-                    .quantity {
-                        flex: 1;
-                    }
-
-                    .price {
-                        flex: 1;
-                        text-align: center;
-                    }
-                }
-
-                .list {
-                    overflow: hidden;
-
-                    .item {
-                        position: relative;
-                        width: 100%;
-                        height: 50rpx;
-                        line-height: 50rpx;
-                        display: flex;
-
-                        .price {
-                            display: block;
-                            width: 50%;
-                            text-align: left;
-                            z-index: 1;
-
-                        }
-
-                        .num {
-                            display: block;
-                            width: 50%;
-                            text-align: right;
-                            padding-right: 32rpx;
-                            z-index: 1;
-
-                            &.buy {
-                                color: #00E8A2;
-                            }
-
-                            &.sell {
-                                color: #F4506A;
-                            }
-                        }
-
-                        .buybg {
-                            height: 100%;
-                            position: absolute;
-                            top: 0;
-                            left: 0;
-                            z-index: 0;
-                            background: rgba($color: #00E8A2, $alpha: 0.1)
-                        }
-
-                        .sellbg {
-                            height: 100%;
-                            position: absolute;
-                            top: 0;
-                            right: 0;
-                            z-index: 0;
-                            background: rgba($color: #F4506A, $alpha: 0.1)
-                        }
-
-                    }
-                }
-            }
-
-
-
-
-        }
-    }
-
-    .btn {
-        display: flex;
-        margin: 96rpx 32rpx;
-
-        .button {
-            flex: 1;
-            box-sizing: border-box;
-            height: 96rpx;
-            border-radius: 16rpx;
-            font-weight: 700;
-            font-size: 28rpx;
-            color: #15141F !important;
-
-            &:nth-child(2) {
-                margin-left: 14rpx;
-            }
-        }
-    }
-
-}
+	import ktest from '@/utils/ktest.js'
+	export default {
+		name: "trade",
+		components: { ktest },
+		data() {
+			return {
+				buyList: 7,
+				sellList: 9,
+				kdata:[]
+
+			};
+		},
+		computed: {
+			i18n() {
+				return this.$t("markets");
+			},
+		},
+		onLoad() {
+			this.kdata=this.splitData(ktest.JSON);
+			console.log(this.kdata,1111)
+		},
+		onShow() {},
+		methods: {
+			into(){
+				
+			},
+			splitData(rawData) {
+				let categoryData = [];
+				let values = [];
+				let volumes = [];
+				for (let i = 0; i < rawData.length; i++) {
+					categoryData.push(rawData[i].splice(0, 1)[0]);
+					values.push(rawData[i]);
+					volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
+				}
+				return {
+					categoryData: categoryData,
+					values: values,
+					volumes: volumes
+				};
+			},
+			depthChange(e) {
+				console.log(e);
+			},
+			goto(page) {
+				let url = '';
+				switch (page) {
+					case 'kLine':
+						url = '/pages/markets/kLine'
+						break;
+					default:
+						break;
+				}
+				uni.navigateTo({
+					url,
+				});
+			}
+
+		},
+	}
+</script>
+<script module="klineE" lang="renderjs">
+	let kline
+	export default {
+		mounted() {
+			console.log(0);
+			console.log(window);
+			console.log(typeof window.echarts);
+			// this.initEcharts();
+			if (typeof window.echarts === 'object') {
+				//this.initEcharts()
+			} else if (typeof window.echarts === 'function') {
+				//this.initEcharts()
+			} else {
+				// console.log(1);
+				// // 动态引入较大类库避免影响页面展示
+				// const script = document.createElement('script');
+				// console.log(2);
+				// //this.kdata=this.splitData(this.kdata);
+				// // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
+				// script.src = './static/echarts.js';
+				// console.log(3);
+				// script.onload = this.initEcharts.bind(this);
+				// console.log(4);
+				// document.head.appendChild(script);
+				// console.log(5);
+			}
+		},
+
+		methods: {
+			receive(newValue, oldValue, ownerVm, vm) {
+				console.log('newValue', newValue)
+				const script = document.createElement('script');
+				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
+				script.src = './static/echarts.js';
+				console.log(3);
+				script.onload = this.upData.bind(this);
+				console.log(4);
+				document.head.appendChild(script);
+				
+			},
+			
+			calculateMA(dayCount, data) {
+				var result = [];
+				for (var i = 0, len = data.values.length; i < len; i++) {
+					if (i < dayCount) {
+						result.push('-');
+						continue;
+					}
+					var sum = 0;
+					for (var j = 0; j < dayCount; j++) {
+						sum += data.values[i - j][1];
+					}
+					result.push(+(sum / dayCount).toFixed(3));
+				}
+				return result;
+			},
+			upData(myChart){
+				const upColor = '#00da3c';
+				const downColor = '#ec0000';
+				var chartDom = document.getElementById('kline');
+				var myChart = echarts.init(chartDom);
+				var option;
+				myChart.setOption(
+				    (option = {
+				      animation: false,
+				      legend: {
+				        bottom: 10,
+				        left: 'center',
+				        data: []
+				      },
+				      tooltip: {
+				        trigger: 'axis',
+				        axisPointer: {
+				          type: 'cross'
+				        },
+				        borderWidth: 1,
+				        borderColor: '#ccc',
+				        padding: 10,
+				        textStyle: {
+				          color: '#ffffff'
+				        },
+				        position: function (pos, params, el, elRect, size) {
+				          const obj = {
+				            top: 10
+				          };
+				          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
+				          return obj;
+				        }
+				        // extraCssText: 'width: 170px'
+				      },
+				      axisPointer: {
+				        link: [
+				          {
+				            xAxisIndex: 'all'
+				          }
+				        ],
+				        label: {
+				          backgroundColor: '#fff'
+				        }
+				      },
+				      toolbox: {
+				        feature: {
+				          dataZoom: {
+				            yAxisIndex: false
+				          },
+				          brush: {
+				            type: ['lineX', 'clear']
+				          }
+				        }
+				      },
+				      brush: {
+				        xAxisIndex: 'all',
+				        brushLink: 'all',
+				        outOfBrush: {
+				          colorAlpha: 0.1
+				        }
+				      },
+				      visualMap: {
+				        show: false,
+				        seriesIndex: 5,
+				        dimension: 2,
+				        pieces: [
+				          {
+				            value: 1,
+				            color: downColor
+				          },
+				          {
+				            value: -1,
+				            color: upColor
+				          }
+				        ]
+				      },
+				      grid: [
+				        {
+				          left: '10%',
+				          right: '8%',
+				          height: '50%'
+				        },
+				        {
+				          left: '10%',
+				          right: '8%',
+				          top: '63%',
+				          height: '16%'
+				        }
+				      ],
+				      xAxis: [
+				        {
+				          type: 'category',
+				          data: this.kdata.categoryData,
+				          boundaryGap: false,
+				          axisLine: { onZero: false },
+				          splitLine: { show: false },
+				          min: 'dataMin',
+				          max: 'dataMax',
+				          axisPointer: {
+				            z: 100
+				          }
+				        },
+				        {
+				          type: 'category',
+				          gridIndex: 1,
+				          data: this.kdata.categoryData,
+				          boundaryGap: false,
+				          axisLine: { onZero: false },
+				          axisTick: { show: false },
+				          splitLine: { show: false },
+				          axisLabel: { show: false },
+				          min: 'dataMin',
+				          max: 'dataMax'
+				        }
+				      ],
+				      yAxis: [
+				        {
+				          scale: true,
+				          splitArea: {
+				            show: true
+				          }
+				        },
+				        {
+				          scale: true,
+				          gridIndex: 1,
+				          splitNumber: 2,
+				          axisLabel: { show: false },
+				          axisLine: { show: false },
+				          axisTick: { show: false },
+				          splitLine: { show: false }
+				        }
+				      ],
+				      dataZoom: [
+				        {
+				          type: 'inside',
+				          xAxisIndex: [0, 1],
+				          start: 98,
+				          end: 100
+				        },
+				        {
+				          show: true,
+				          xAxisIndex: [0, 1],
+				          type: 'slider',
+				          top: '85%',
+				          start: 98,
+				          end: 100
+				        }
+				      ],
+				      series: [
+				        {
+				          name: 'Dow-Jones index',
+				          type: 'candlestick',
+				          data: this.kdata.values,
+				          itemStyle: {
+				            color: upColor,
+				            color0: downColor,
+				            borderColor: undefined,
+				            borderColor0: undefined
+				          },
+				          tooltip: {
+				            formatter: function (param) {
+				              param = param[0];
+				              return [
+				                'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
+				                'Open: ' + param.data[0] + '<br/>',
+				                'Close: ' + param.data[1] + '<br/>',
+				                'Lowest: ' + param.data[2] + '<br/>',
+				                'Highest: ' + param.data[3] + '<br/>'
+				              ].join('');
+				            }
+				          }
+				        },
+				        
+				      ]
+				    }),
+				    true
+				  );
+			}
+		},
+		watch: {
+			// 如果 `question` 发生改变，这个函数就会运行
+			columData: function(newQuestion, oldQuestion) {
+
+				// this.updateEcharts(this.option)
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.main {
+
+		.header {
+			background: #000000;
+			margin-top: 200rpx;
+			padding: 0 32rpx;
+
+
+			.top {
+				height: 80rpx;
+				border-bottom: 2rpx solid #A1A0A8;
+
+				.price {
+					line-height: 80rpx;
+					font-size: 40rpx;
+				}
+
+				.percent {
+					vertical-align: text-top;
+					margin-left: 20rpx;
+					padding: 8rpx 20rpx;
+					border-radius: 8rpx;
+					font-size: 24rpx;
+					background-color: rgba($color: #F26666, $alpha: 0.2);
+					color: #F26666;
+
+					&.rise {
+						color: #00E8A2;
+						background-color: rgba($color: #00E8A2, $alpha: 0.2);
+					}
+				}
+			}
+
+			.bottom {
+				display: flex;
+				font-size: 24rpx;
+
+				.title {
+					margin-top: 24rpx;
+					line-height: 32rpx;
+				}
+
+				.value {
+					margin: 24rpx 0;
+					color: #A1A0A8;
+				}
+
+				.left {
+					flex: 1;
+					text-align: left;
+				}
+
+				.center {
+					flex: 1;
+					text-align: center;
+				}
+
+				.right {
+					flex: 1;
+					text-align: right;
+				}
+
+			}
+		}
+
+		.MarketTrades {
+			.headTitle {
+				padding-left: 32rpx;
+				font-size: 34rpx;
+				height: 80rpx;
+				line-height: 80rpx;
+			}
+
+			.table {
+				display: flex;
+				font-size: 24rpx;
+
+				.box {
+					flex: 1;
+					overflow: hidden;
+					height: 450rpx;
+
+					.title {
+						display: flex;
+						margin-bottom: 16rpx;
+						color: #A1A0A8;
+
+						.quantity {
+							flex: 1;
+						}
+
+						.price {
+							flex: 1;
+							text-align: center;
+						}
+					}
+
+					.list {
+						overflow: hidden;
+
+						.item {
+							position: relative;
+							width: 100%;
+							height: 50rpx;
+							line-height: 50rpx;
+							display: flex;
+
+							.price {
+								display: block;
+								width: 50%;
+								text-align: left;
+								z-index: 1;
+
+							}
+
+							.num {
+								display: block;
+								width: 50%;
+								text-align: right;
+								padding-right: 32rpx;
+								z-index: 1;
+
+								&.buy {
+									color: #00E8A2;
+								}
+
+								&.sell {
+									color: #F4506A;
+								}
+							}
+
+							.buybg {
+								height: 100%;
+								position: absolute;
+								top: 0;
+								left: 0;
+								z-index: 0;
+								background: rgba($color: #00E8A2, $alpha: 0.1)
+							}
+
+							.sellbg {
+								height: 100%;
+								position: absolute;
+								top: 0;
+								right: 0;
+								z-index: 0;
+								background: rgba($color: #F4506A, $alpha: 0.1)
+							}
+
+						}
+					}
+				}
+
+
+
+
+			}
+		}
+
+		.btn {
+			display: flex;
+			margin: 96rpx 32rpx;
+
+			.button {
+				flex: 1;
+				box-sizing: border-box;
+				height: 96rpx;
+				border-radius: 16rpx;
+				font-weight: 700;
+				font-size: 28rpx;
+				color: #15141F !important;
+
+				&:nth-child(2) {
+					margin-left: 14rpx;
+				}
+			}
+		}
+
+	}
 </style>