新增交易页面

components/positionList/positionList.vue

@@ -20,7 +20,7 @@
 			<view class="item" v-for="(item, index) in buyList" :key="index" @click="depthClick(item)">
 				<text class="price">47823.00</text>
 				<text class="num">{{ item }}</text>
-				<view class="bg buybg" :style="`width: ${20 * index}%;`"></view>
+				<view class="buybg" :style="`width: ${20 * index}%;`"></view>
 			</view>
 		</view>
 

pages.json

@@ -44,6 +44,12 @@
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path": "pages/markets/kLine",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
 
 		// charity 
 		{

pages/home/index.vue

@@ -20,7 +20,10 @@
 		<!-- 消息 -->
 		<view class="message" @click="popupShow = true">
 			<u-icon class="icon" name="../../static/home/ic_proclamation.png" size="60rpx" width="60rpx"></u-icon>
-			<view class="text">{{ i18n.homeMessage }}</view>
+			<!-- <view class="text">{{ i18n.homeMessage }}</view> -->
+			<u-notice-bar class="notice" :text="messageList" icon="" fontSize="24rpx" bgColor="#211F32" color="#fff"
+				direction="column">
+			</u-notice-bar>
 		</view>
 		<!-- 三个按钮 -->
 		<view class="btnDiv">
@@ -96,6 +99,12 @@ export default {
 			langTrue: languageData[0].title || 'English',
 			languageData,
 			popupShow: false,
+			messageList: [
+				`Please contact customer service on the top-left corner for identity verification on your first Please contact customer service on the top-left corner for identity verification on your first...Please contact customer service on the top-left corner for identity verification on your first... `,
+				`Please contact customer service on the top-left corner for identity verification on your first Please contact customer service on the top-left corner for identity verification on your first...Please contact customer service on the top-left corner for identity verification on your first... `,
+				`Please contact customer service on the top-left corner for identity verification on your first Please contact customer service on the top-left corner for identity verification on your first...Please contact customer service on the top-left corner for identity verification on your first... `,
+				`Please contact customer service on the top-left corner for identity verification on your first Please contact customer service on the top-left corner for identity verification on your first...Please contact customer service on the top-left corner for identity verification on your first... `,
+			],
 			swiperList: [
 				'https://cdn.uviewui.com/uview/swiper/swiper1.png',
 				'https://cdn.uviewui.com/uview/swiper/swiper2.png',
@@ -206,10 +215,10 @@ export default {
 		/**
 		 * 跳转
 		 */
-		goto(id) {
+		goto(page) {
-			// console.log(id);
+			// console.log(page);
 			let url = '';
-			switch (id) {
+			switch (page) {
 				case 'recharge':
 					url = '/pages/recharge/recharge'
 					break;
@@ -225,7 +234,7 @@ export default {
 			if (url) {
 				this.stopAllVideoPlay()
 				// console.log(url);
-				if (id === 'subcription') {
+				if (page === 'subcription') {
 					uni.reLaunch({
 						url,
 					})
@@ -551,6 +560,7 @@ export default {
 		height: 96rpx;
 		background: #211F32;
 		border-radius: 16rpx;
+		overflow: hidden;
 
 		.icon {
 			position: absolute;
@@ -558,6 +568,12 @@ export default {
 			left: 20rpx;
 		}
 
+		.notice{
+			width: 574rpx;
+			margin-left: 80rpx;
+			margin-top: 10rpx;
+		}
+
 		.text {
 			position: absolute;
 			top: 18rpx;

pages/markets/kLine.vue

@@ -0,0 +1,300 @@
+<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>
+
+<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;
+            }
+        }
+    }
+
+}
+</style>

pages/markets/trade.vue

@@ -14,8 +14,6 @@
         <view class="gap">
             <entrustOrderList></entrustOrderList>
         </view>
-
-
     </view>
 </template>
 
@@ -39,6 +37,19 @@ export default {
     methods: {
         depthChange(e) {
             console.log(e);
+        },
+        goto(page) {
+            let url = '';
+            switch (page) {
+                case 'kLine':
+                    url = '/pages/markets/kLine'
+                    break;
+                default:
+                    break;
+            }
+            uni.navigateTo({
+                url,
+            });
         }
 
     },

pages/mine/mineDetails.vue

@@ -63,10 +63,10 @@ export default {
     },
     onShow() { },
     methods: {
-        goto(id) {
+        goto(page) {
-            // console.log(id);
+            // console.log(page);
             let url = '';
-            switch (id) {
+            switch (page) {
                 case 'mineRecord':
                     url = '/pages/mine/mineRecord'
                     break;

pages/mine/mineRecord.vue

@@ -5,9 +5,10 @@
         <!-- 数据为空格显示 -->
         <u-empty :show="dataList.length === 0" marginTop="350rpx" :text="i18n.NoData" textColor="#818197"
             textSize="36rpx" icon="../../static/mine/img_data.png"></u-empty>
+        <!-- 列表 -->
         <view class="content" v-if="dataList.length > 0">
             <view class="dataBody" v-for="(item, index) in 4" :key="index">
-                <key-value-row :keyName="i18n.BaseCoin" :value="'100BTC'" ></key-value-row>
+                <key-value-row :keyName="i18n.BaseCoin" :value="'100BTC'"></key-value-row>
                 <key-value-row :keyName="i18n.ProfitCoin" :value="'CEH'"></key-value-row>
                 <key-value-row :keyName="i18n.DayRebate" :value="'75000'"></key-value-row>
                 <u-divider text="" lineColor="#B9C1D9"></u-divider>

pages/recharge/recharge.vue

@@ -137,10 +137,10 @@ export default {
     },
     onShow() { },
     methods: {
-        goto(id) {
+        goto(page) {
-            // console.log(id);
+            // console.log(page);
             let url = '';
-            switch (id) {
+            switch (page) {
                 case 'rechargeRecord':
                     url = '/pages/recharge/rechargeRecord'
                     break;

pages/withdrawal/addAddress.vue

@@ -104,10 +104,10 @@ export default {
     },
     onShow() { },
     methods: {
-        goto(id) {
+        goto(page) {
-            // console.log(id);
+            // console.log(page);
             let url = '';
-            switch (id) {
+            switch (page) {
                 case 'withdrawalRecord':
                     url = '/pages/withdrawal/withdrawalRecord'
                     break;

pages/withdrawal/withdrawal.vue

@@ -193,10 +193,10 @@ export default {
     },
     onShow() { },
     methods: {
-        goto(id) {
+        goto(page) {
-            // console.log(id);
+            // console.log(page);
             let url = '';
-            switch (id) {
+            switch (page) {
                 case 'withdrawalRecord':
                     url = '/pages/withdrawal/withdrawalRecord'
                     break;

utils/language/en_US.js

@@ -113,6 +113,15 @@ export default {
 		ExpectProfit: 'Expect profit ',
 		ExpectLoss: 'Expect loss ',
 
+		Highest:'24H Highest',
+		Lowest:'24H Lowest',
+		Amount:'24H Amount',
+
+		MarketTrades:'Market Trades',
+		Quantity:'Quantity',
+		BuyingPrice:'Buying Price',
+		SellPrice20:'Sell Price20',
+		open:'Open',
 	},
 
 	// 捐赠页面相关