2021-7-27

App.vue

@@ -74,8 +74,14 @@ export default {
 </script>
 
 <style lang="scss">
+@import 'uview-ui/index.scss';
 /*全局公共样式和字体图标*/
 @import '/static/css/cmy.css';
+uni-page-body{
+	min-height: 100%;
+	height: 0;
+}
+
 view,
 scroll-view,
 swiper,
@@ -102,81 +108,6 @@ image,
 video {
 	box-sizing: border-box;
 }
-/* 骨架屏替代方案 */
-.Skeleton {
-	background: #f3f3f3;
-	padding: 20rpx 0;
-	border-radius: 8rpx;
-}
-
-/* 图片载入替代方案 */
-.image-wrapper {
-	font-size: 0;
-	background: #f3f3f3;
-	border-radius: 4px;
-	image {
-		width: 100%;
-		height: 100%;
-		transition: 0.6s;
-		opacity: 0;
-		&.loaded {
-			opacity: 1;
-		}
-	}
-}
-
-// 设置富文本中图片最大宽度
-uni-rich-text img {
-	max-width: 100% !important;
-}
-/*边框*/
-.b-b:after,
-.b-t:after {
-	position: absolute;
-	z-index: 3;
-	left: 0;
-	right: 0;
-	height: 0;
-	content: '';
-	transform: scaleY(0.5);
-	border-bottom: 1px solid $border-color-base;
-}
-
-.b-b:after {
-	bottom: 0;
-}
-
-.b-t:after {
-	top: 0;
-}
-
-/* button样式改写 */
-uni-button,
-button {
-	height: 80rpx;
-	line-height: 80rpx;
-	font-size: $font-lg + 2rpx;
-	font-weight: normal;
-
-	&.no-border:before,
-	&.no-border:after {
-		border: 0;
-	}
-}
-
-uni-button[type='default'],
-button[type='default'] {
-	color: $font-color-dark;
-}
-
-/* input 样式 */
-.input-placeholder {
-	color: #999999;
-}
-
-.placeholder {
-	color: #999999;
-}
 // 边距样式
 @for $i from 1 to 4 {
 	.margin-l-#{$i * 10} {

main.js

@@ -1,44 +1,15 @@
 import Vue from 'vue'
 import store from './store'
 import App from './App'
-/**
- *  所有测试用数据均存放于根目录json.js
- *  
- *  css部分使用了App.vue下的全局样式和iconfont图标，有需要图标库的可以留言。
- *  示例使用了uni.scss下的变量, 除变量外已尽量移除特有语法,可直接替换为其他预处理器使用
- */
-const msg = (title, duration=1500, mask=false, icon='none')=>{
-	//统一提示方便全局修改
-	if(Boolean(title) === false){
-		return;
-	}
-	uni.showToast({
-		title,
-		duration,
-		mask,
-		icon
-	});
-}
-
-const prePage = ()=>{
-	// 获取当前页面
-	let pages = getCurrentPages();
-	let prePage = pages[pages.length - 2];
-	// #ifdef H5
-	return prePage;
-	// #endif
-	return prePage.$vm;
-}
-
+//引入对象
+import uView from "uview-ui";
+Vue.use(uView);
 
 Vue.config.productionTip = false
-Vue.prototype.$fire = new Vue();
-Vue.prototype.$store = store;
-Vue.prototype.$api = {msg, prePage};
 
 App.mpType = 'app'
 
 const app = new Vue({
-    ...App
+	...App
 })
-app.$mount()
+app.$mount()

pages.json

@@ -1,4 +1,7 @@
 {
+	"easycom": {
+		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
+	},
 	"pages": [{
 			"path": "pages/index/index",
 			"style": {
@@ -39,9 +42,7 @@
 				// #endif
 				"navigationBarTitleText": "商城首页",
 				"app-plus": {
-					"titleNView": {
-						"type": "transparent"
-					}
+					"titleNView":false
 				}
 			}
 		},
@@ -133,6 +134,15 @@
 				}
 			}
 		},
+		{
+			"path": "pages/index/node",
+			"style": {
+				"navigationBarTitleText": "节点",
+				"app-plus": {
+					"titleNView": false
+				}
+			}
+		},
 		{
 			"path": "pages/set/phone",
 			"style": {

pages/index/node.vue

@@ -1,9 +1,36 @@
 <template>
 	<view class="center">
-		<u-tabs-swiper ref="uTabs" :list="tabList" :current="current" @change="tabsChange" :is-scroll="false"></u-tabs-swiper>
-		<swiper :current="current" @animationfinish="transition">
+		<view class="tab flex">
+			<view class="left flex" @click="backIndex"><u-icon name="arrow-left" :size="40"></u-icon></view>
+			<u-tabs-swiper
+				class="tabBox"
+				ref="uTabs"
+				:height="70"
+				:show-bar="false"
+				active-color="#44969D"
+				inactive-color='#6D7C88'
+				:list="tabList"
+				:current="current"
+				@change="tabsChange"
+				:is-scroll="false"
+			></u-tabs-swiper>
+		</view>
+		<swiper class="tabSwiper" :current="current" @animationfinish="transition">
 			<swiper-item class="swiper-item">
-				<scroll-view scroll-y @scrolltolower="onreachBottom"><u-loadmore :status="tabList[0].loding"></u-loadmore></scroll-view>
+				<scroll-view scroll-y @scrolltolower="onreachBottom">
+					<view class="boxItem">
+						<view class="item" v-for="ls in tabList[0].list">
+							<view class="flex title">
+								<view class="tip"></view>
+								<view class="name">{{ ls.name }}</view>
+							</view>
+							<view class="itemConetnt">
+								
+							</view>
+						</view>
+					</view>
+					<u-loadmore :status="tabList[0].loding"></u-loadmore>
+				</scroll-view>
 			</swiper-item>
 			<swiper-item class="swiper-item">
 				<scroll-view scroll-y @scrolltolower="onreachBottom"><u-loadmore :status="tabList[1].loding"></u-loadmore></scroll-view>
@@ -18,32 +45,47 @@ export default {
 			current: 0, //当前选中的标签
 			tabList: [
 				{
-					name: '十年',
-					list:[],
-					pages:1,
-					limit:10,
-					loding:'loadmore'//loading加载中 nomore没有数据
+					name: '节点认购',
+					list: [
+						{
+							name: '节点认购第一期',
+							num: 1000, //认购份额
+							type: 'LALA', //认购货币类型
+							ratio: 10, //认购名额
+							limited: 20, //限购名额
+							allMoney: 20, //认购总额
+							moneyType: 'USDT' //兑换比例金额
+						}
+					],
+					pages: 1,
+					limit: 10,
+					loding: 'loadmore' //loading加载中 nomore没有数据
 				},
 				{
-					name: '青春',
-					pages:1,
-					limit:10,
-					list:[],
-					loding:'loadmore'//loading加载中 nomore没有数据
-				},
+					name: '我的认购',
+					pages: 1,
+					limit: 10,
+					list: [],
+					loding: 'loadmore' //loading加载中 nomore没有数据
+				}
 			]
 		};
 	},
 	//页面加载即刻发生
 	onload() {},
 	methods: {
+		backIndex() {
+			uni.switchTab({
+				url: '/pages/index/index'
+			});
+		},
 		// 内容框切换事件
 		transition(e) {
 			console.log(e);
 		},
 		// tab切换事件
 		tabsChange(e) {
-			console.log(e);
+			this.current = e;
 		},
 		// 下拉到底部加载事件
 		onreachBottom(e) {
@@ -53,6 +95,49 @@ export default {
 };
 </script>
 <style lang="scss">
+.tabBox {
+	flex-grow: 1;
+}
 .center {
+	height: 0;
+	min-height: 100%;
+}
+.tab {
+	background-color: #ffffff;
+	align-items: stretch;
+	.left {
+		padding-left: 10rpx;
+		padding-right: 20rpx;
+	}
+}
+.tabSwiper {
+	height: calc(100% - 70rpx);
+	.swiper-item {
+		padding: 30rpx;
+		.boxItem {
+			.item {
+				background-color: #ffffff;
+				line-height: 1;
+				padding:  30rpx;
+				.title {
+					justify-content: flex-start;
+					padding-bottom: 30rpx;
+					align-items: stretch;
+					border-bottom: 1px solid $border-color-light;
+				}
+				.tip {
+					width: 7rpx;
+					border-radius: 99rpx;
+					background-color: $base-color;
+				}
+				.name{
+					margin-left: 20rpx;
+					font-size: 30rpx;
+					font-weight: bold;
+					color: $font-color-dark;
+				}
+			}
+		}
+	}
 }
 </style>

uni.scss

@@ -1,32 +1,33 @@
+@import 'uview-ui/theme.scss';
 /* 页面左右间距 */
 $page-row-spacing: 30rpx;
 //页面基础颜色
-$page-color-base: #f8f8f8;//页面背景颜色
+$page-color-base: #f8f8f8; //页面背景颜色
 $page-color-light: #f8f6fc;
 // 主题颜色
-$base-color: #5dbc7c;//项目颜色
-$box-shadow-color:#5dbc7c;//阴影颜色
-$font-color:#5dbc7c;//字体颜色
-$font-color-spec: #5dbc7c;//可操作文字颜色
-$background-color:#5dbc7c;//按钮背景颜色
+$base-color: #44969d; //项目颜色
+$box-shadow-color: #5dbc7c; //阴影颜色
+$font-color: #5dbc7c; //字体颜色
+$font-color-spec: #5dbc7c; //可操作文字颜色
+$background-color: #5dbc7c; //按钮背景颜色
 // 小图标大小
-$uni-img-size-base:36rpx;
+$uni-img-size-base: 36rpx;
 /* 文字尺寸 */
 $font-sm: 24rpx;
 $font-base: 28rpx;
 $font-lg: 32rpx;
 /*文字颜色*/
-$font-color-dark: #303133;//黑
-$font-color-base: #606266;//基础
-$font-color-white:#ffffff;//白色
-$font-color-light: #909399;//灰色
-$font-color-disabled: #c0c4cc;//禁用
+$font-color-dark: #0F253A; //黑
+$font-color-base: #606266; //基础
+$font-color-white: #ffffff; //白色
+$font-color-light: #6D7C88; //灰色
+$font-color-disabled: #c0c4cc; //禁用
 /* 边框颜色 */
-$border-color-dark: #dcdfe6;//黑
-$border-color-base: #e4e7ed;//基础灰
-$border-color-light: #ebeef5;//亮灰
+$border-color-dark: #dcdfe6; //黑
+$border-color-base: #e4e7ed; //基础灰
+$border-color-light: #ebeef5; //亮灰
 // uni自带边框颜色
-$uni-border-color:#ebeef5;
+$uni-border-color: #ebeef5;
 /*颜色*/
 $color-yellow: #fd5b23;
 $color-gray: #999999;
@@ -35,7 +36,7 @@ $color-red: #dd524d;
 /* 图片加载中颜色 */
 $image-bg-color: #eee;
 /* 行为相关颜色 */
-$uni-color-primary: #5dbc7c;
+$uni-color-primary: #44969d;
 $uni-color-success: #4cd964;
 $uni-color-warning: #f0ad4e;
 $uni-color-error: #dd524d;
@@ -44,7 +45,7 @@ $box-shadow: 0rpx 0rpx 10rpx 10rpx #f3f3f3;
 // 圆角
 $border-radius-sm: 15rpx;
 // 渐变背景颜色
-$bg-green-gradual: linear-gradient(#5dbc7c, #71d094);
+$bg-green-gradual: linear-gradient(-90edg #60bab0, #45969b);
 /* 功能栏字体大小 */
 %font-title {
 	font-size: $font-lg + 2rpx;
@@ -65,4 +66,4 @@ $bg-green-gradual: linear-gradient(#5dbc7c, #71d094);
 	background-image: $bg-green-gradual;
 	margin-right: 10rpx;
 	border-radius: 10rpx;
-}
+}