2021-10-26

pages.json

@@ -300,14 +300,13 @@
 				"navigationBarTitleText": "个人中心"
 			}
 		},
+		//糖果
 		{
-			"path": "pages/user/award",
+			"path": "pages/money/account",
 			"style": {
 				"navigationBarTitleText": "奖励明细",
 				"app-plus": {
-					"titleNView": {
-						"type": "transparent"
-					}
+					"titleNView": false
 				}
 			}
 		},
@@ -346,14 +345,13 @@
 				"navigationBarTitleText": "支付成功"
 			}
 		},
+		// 佣金
 		{
 			"path": "pages/money/wallet",
 			"style": {
-				"navigationBarTitleText": "我的钱包",
+				"navigationBarTitleText": "我的佣金",
 				"app-plus": {
-					"titleNView": {
-						"type": "transparent"
-					}
+					"titleNView": false
 				}
 			}
 		},
@@ -397,15 +395,6 @@
 				"navigationBarTitleText": "邀请好友"
 			}
 		}
-	    ,{
-            "path" : "pages/user/user1",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
      
     ],
 

pages/user/award.vue → pages/money/award.vue

@@ -1,32 +1,25 @@
 <template>
 	<view class="content">
+		<view class="status_bar"><!-- 这里是状态栏 --></view>
 		<view class="content-money">
-			<view class="money-box">
-				<view class="text">可提现佣金（元）</view>
-				<view class="money">{{ money | getMoneyStyle }}</view>		
+			<view class="body-title">
+				<view class="goback-box" @click="toBack"><image class="goback" src="../../static/icon/fanhui.png" mode=""></image></view>
+				<view class="header">我的糖果</view>
 			</view>
-			<view class="moneyTx" @click="navto('./withdrawal')">提现</view>
-			<view class="flex buttom-box">
-				<view class="buttom" @click="navto('/pages/money/recharge')">
-					<view class="icon"><image src="/static/icon/i6.png" mode="aspectFill" class="icon-img"></image></view>
-					<text>统计</text>
-				</view>
-				<view class="interval"></view>
-				<view class="buttom" @click="navto('./withdrawal')">
-					<view class="icon"><image src="/static/icon/i7.png" mode="aspectFill" class="icon-img"></image></view>
-					<text>提现</text>
-				</view>
+			<view class="content-bg"><image src="../../static/img/user-award.png" mode=""></image></view>
+			<view class="money-box">
+				<view class="money">100</view>
 			</view>
 		</view>
 		<view class="navbar">
-			<view v-for="(item,index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index}" @click="tabClick(index)">{{ item.text }}</view>
+			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
 		</view>
-		<swiper :current="tabCurrentIndex" :style="{'height':maxheight+'px'}" class="swiper-box" duration="300" @change="changeTab">
+		<swiper :current="tabCurrentIndex" :style="{ height: maxheight }" class="swiper-box" duration="300" @change="changeTab">
 			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
 				<scroll-view scroll-y="true" class="list-scroll-content" @scrolltolower="loadData">
 					<!-- 空白页 -->
 					<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
-					
+
 					<!-- 订单列表 -->
 					<view class="order-item flex" v-for="(item, index) in tabItem.orderList" :key="index">
 						<view class="title-box">
@@ -45,44 +38,40 @@
 				</scroll-view>
 			</swiper-item>
 		</swiper>
+		<view class="btn-box" @click="navto('/pages/money/recharge')">
+			立即充值
+		</view>
 	</view>
 </template>
 
 <script>
 import { spreadCommission, userBalance } from '@/api/wallet.js';
 import { mapState, mapMutations } from 'vuex';
-import { getMoneyStyle } from '@/utils/rocessor.js';
 import uniLoadMore from '@/uview-ui/components/u-loadmore/u-loadmore.vue';
 import empty from '@/uview-ui/components/u-empty/u-empty.vue';
 export default {
-	filters: {
-		getMoneyStyle
-	},
 	components: {
 		empty,
 		uniLoadMore
 	},
-	onReady() {
-		//初始化获取页面宽度
-		uni.createSelectorQuery().select('.content')
-			.fields(
-			{
-				size:true
+	onReady(res) {
+		var _this = this;
+		uni.getSystemInfo({
+			success: resu => {
+				const query = uni.createSelectorQuery();
+				query.select('.swiper-box').boundingClientRect();
+				query.exec(function(res) {
+					_this.maxheight = resu.windowHeight - res[0].top + 'px';
+					console.log('打印页面的剩余高度', _this.height);
+				});
 			},
-			data => {
-				console.log(data);
-				console.log(Math.floor((data.width /750) * 300));
-				//保存头部高度
-				this.maxheight =data.height - Math.floor((data.width / 750) * 570);
-				console.log(this.maxheight);
-				}
-			)
-			.exec();
+			fail: res => {}
+		});
 	},
 	data() {
 		return {
 			// 头部图高度
-			maxheight:'',
+			maxheight: '',
 			tabCurrentIndex: 0,
 			navList: [
 				{
@@ -100,9 +89,9 @@ export default {
 					orderList: [],
 					page: 1, //当前页面
 					limit: 10 //每次信息条数
-				},
+				}
 			],
-			money: ''
+			money: 0
 		};
 	},
 	onLoad(options) {},
@@ -119,11 +108,17 @@ export default {
 				url: e
 			});
 		},
+		// 点击返回 我的页面
+		toBack() {
+			uni.navigateBack({
+				
+			})
+		},
 		async loadData(source) {
 			//这里时将订单挂载到tab列表下
 			let index = this.tabCurrentIndex;
 			let navItem = this.navList[index];
-			let state = navItem.state+3;
+			let state = navItem.state + 3;
 			if (source === 'tabChange' && navItem.loaded === true) {
 				//tab切换只有第一次需要加载数据
 				return;
@@ -134,7 +129,7 @@ export default {
 			}
 			//修改当前对象状态为加载中
 			navItem.loadingType = 'loading';
-			
+
 			spreadCommission(
 				{
 					page: navItem.page,
@@ -143,7 +138,7 @@ export default {
 				state
 			)
 				.then(({ data }) => {
-					if(data.length > 0) {
+					if (data.length > 0) {
 						navItem.orderList = navItem.orderList.concat(data[0].list);
 						console.log(navItem.orderList);
 						navItem.page++;
@@ -172,75 +167,89 @@ export default {
 			this.tabCurrentIndex = index;
 		}
 	}
-}
+};
 </script>
 
 <style lang="scss">
 page {
-	background: #ffffff;
+	background: #f1f1f1;
 	height: 100%;
 }
+.status_bar {
+	height: var(--status-bar-height);
+	width: 100%;
+}
 .content-money {
 	padding-bottom: 30rpx;
-	background: $page-color-base;
-	.moneyTx{
+	position: relative;
+	height: 400rpx;
+	.content-bg {
 		position: absolute;
-		top: 150rpx;
-		right: 0rpx;
-		width: 150rpx;
-		padding: 10rpx 30rpx;
-		border: 2px solid #FFFFFF;
-		border-top-left-radius: 99rpx;
-		border-bottom-left-radius: 99rpx;
-		color: #FFFFFF;
-		line-height: 1;
-		font-size: $font-base;
+		top: 0;
+		left: 0;
+		right: 0;
+		width: 750rpx;
+		height: 400rpx;
+		image {
+			width: 100%;
+			height: 100%;
+		}
 	}
-	.buttom-box {
-		background-color: #ffffff;
+	.body-title {
+		height: 80rpx;
 		text-align: center;
-		margin: 0 30rpx;
-		padding: 20rpx 0;
-		border-radius: $border-radius-sm;
-		margin-top: -60rpx;
-		.buttom {
-			font-size: $font-lg;
-			flex-grow: 1;
+		font-size: 35rpx;
+		position: relative;
+		.header {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			font-size: 36rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #fffeff;
+			height: 80rpx;
+			font-size: 36rpx;
+			font-weight: 700;
+			z-index: 9;
+			display: flex;
+			justify-content: center;
+			align-items: center;
 		}
-		.interval {
-			width: 2px;
-			height: 60rpx;
-			background-color: #eeeeee;
+		.goback-box {
+			position: absolute;
+			z-index: 10;
+			left: 24rpx;
+			top: 0;
+			height: 80rpx;
+			display: flex;
+			align-items: center;
 		}
-		.icon {
-			height: 50rpx;
-			width: 48rpx;
-			margin: 0 auto;
-			.icon-img {
-				width: 100%;
-				height: 100%;
-			}
+		.goback {
+			width: 30rpx;
+			height: 37rpx;
 		}
 	}
 }
 .money-box {
-	background-color: $base-color;
-	padding-top: var(--status-bar-height);
-	height: 368rpx;
+	position: relative;
+	z-index: 100;
+	padding-top: 100rpx;
 	color: #ffffff;
 	text-align: center;
-	.text {
-		padding-top: 147rpx;
-		font-size: $font-sm;
-	}
 	.money {
-		font-size: 56rpx;
+		font-size: 86rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #FFFFFF;
 	}
 }
 
 .navbar {
+	margin-top: 20rpx;
 	display: flex;
-	height: 40px;
+	height: 88rpx;
 	padding: 0 5px;
 	background: #fff;
 	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
@@ -273,7 +282,6 @@ page {
 //列表
 
 .swiper-box {
-	padding-top: 10rpx;
 	.order-item {
 		padding: 20rpx 30rpx;
 		line-height: 1.5;
@@ -294,6 +302,7 @@ page {
 	}
 }
 .list-scroll-content {
+	background: #ffffff;
 	height: 100%;
 }
 .content {
@@ -302,4 +311,21 @@ page {
 		background-color: #ffffff;
 	}
 }
+.btn-box {
+	width: 674rpx;
+	height: 88rpx;
+	background: linear-gradient(0deg, #2E58FF, #32C6FF);
+	border-radius: 44rpx;
+	font-size: 36rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
+	color: #FFFFFF;
+	text-align: center;
+	line-height: 88rpx;
+	position: fixed;
+	bottom: 48rpx;
+	left: 0;
+	right: 0;
+	margin: 0 auto;
+}
 </style>

pages/money/recharge.vue

@@ -1,39 +1,49 @@
 <template>
 	<view class="content">
 		<view class="row-box">
-			<view class="title">充值金额</view>
-			<view class="row">
-				<text class="tit">￥</text>
-				<input class="input" type="number" v-model="money" placeholder="请输入充值金额" placeholder-class="placeholder" />
+			<view class="money-box">
+				<view class="money">{{ myMoney }}</view>
+				<view class="money-text">我的糖果数量</view>
 			</view>
+			<view class="chong">充值记录</view>
 		</view>
-
-		<view class="list">
-			<radio-group @change="tabRadio">
-				<!-- #ifdef APP-PLUS -->
-				<label>
-					<view class="box">
-						<view class="icon iconfont iconzhifubao"></view>
-						<view class="title-box">
-							<view class="title"><text>支付宝充值</text></view>
-						</view>
-						<view class="right"><radio value="alipay" color="#5dbc7c" :checked="type == 'alipay'" /></view>
+		<view class="main-box">
+			<view class="main-top flex">
+				<view @click="change(item)" class="main-item" v-for="(item, index) in numList" :class="{check: money === item}" :key="index">
+					<view class="item-top">
+						<view class="bg"><image src="../../static/icon/candy.png" mode=""></image></view>
+						<view class="item-name" :class="{checks: money === item}">{{ item }}糖果</view>
 					</view>
-				</label>
-				<label>
-					<view class="box">
-						<view class="icon iconfont iconweixin1"></view>
-						<view class="title-box">
-							<view class="title"><text>微信充值</text></view>
-							<view class="node"><text>真实姓名(代勇明)</text></view>
-						</view>
-						<view class="right"><radio value="weixin" color=" #5dbc7c" :checked="type == 'weixin'" /></view>
+					<view class="item-price" :class="{checks: money === item}">
+						￥
+						<text>{{ item }}元</text>
 					</view>
-				</label>
-				<!-- #endif -->
-			</radio-group>
+				</view>
+			</view>
+			<view class="list">
+				<radio-group @change="tabRadio">
+					<label>
+						<view class="box">
+							<view class="icon iconfont iconzhifubao"></view>
+							<view class="title-box">
+								<view class="title"><text>支付宝充值</text></view>
+							</view>
+							<view class="right"><radio value="alipay" color="#EB001C" :checked="type == 'alipay'" /></view>
+						</view>
+					</label>
+					<label>
+						<view class="box">
+							<view class="icon iconfont iconweixin1"></view>
+							<view class="title-box">
+								<view class="title"><text>微信充值</text></view>
+							</view>
+							<view class="right"><radio value="weixin" color=" #EB001C" :checked="type == 'weixin'" /></view>
+						</view>
+					</label>
+				</radio-group>
+			</view>
+			<button class="add-btn up" :class="{ 'active-bg': payLoding }" @click="!payLoding ? confirm() : ''">确认充值</button>
 		</view>
-		<button class="add-btn up" :class="{ 'active-bg': payLoding }" @click="!payLoding ? confirm() : ''">确认充值</button>
 	</view>
 </template>
 
@@ -53,8 +63,11 @@ export default {
 	data() {
 		return {
 			type: 'weixin',
+			numList: ['10', '20', '50', '80', '100', '200'],
 			money: '', //充值金额
-			payLoding: false //是否加载中
+			payLoding: false, //是否加载中
+			myMoney: 0, //我的糖果数
+			money: '10' //充值糖果数
 		};
 	},
 	onLoad(options) {},
@@ -70,6 +83,9 @@ export default {
 				url: url
 			});
 		},
+		change(item){
+			this.money = item
+		},
 		// 切换选中对象
 		tabRadio(e) {
 			this.type = e;
@@ -104,23 +120,22 @@ export default {
 				});
 			// #endif
 			// #ifdef MP
-			rechargeRoutine({ price: this.money})
+			rechargeRoutine({ price: this.money })
 				.then(e => {
 					let da = e.data;
-						wx.requestPayment({
-								timeStamp: da.timestamp,
-								nonceStr: da.nonceStr,
-								package: da.package,
-								signType: da.signType,
-								paySign: da.paySign,
-								success: function(res) {
-									uni.redirectTo({
-										url: '/pages/money/paySuccess'
-									});
-								},
-								
-							})
-					
+					wx.requestPayment({
+						timeStamp: da.timestamp,
+						nonceStr: da.nonceStr,
+						package: da.package,
+						signType: da.signType,
+						paySign: da.paySign,
+						success: function(res) {
+							uni.redirectTo({
+								url: '/pages/money/paySuccess'
+							});
+						}
+					});
+
 					obj.payLoding = false;
 				})
 				.catch(e => {
@@ -163,6 +178,7 @@ export default {
 <style lang="scss">
 page {
 	height: 100%;
+	background: #ffffff;
 }
 
 .add-btn {
@@ -185,37 +201,97 @@ page {
 	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
 }
 .row-box {
-	margin-top: 30rpx;
-	padding: 20rpx 30rpx;
-	background: #fff;
-	.title {
-		font-size: $font-base + 2rpx;
-		color: $font-color-dark;
-	}
-	.row {
-		display: flex;
-		align-items: center;
+	width: 750rpx;
+	height: 354rpx;
+	background: linear-gradient(0deg, #2e58ff, #32c6ff);
+	.money-box {
+		padding-top: 80rpx;
+		margin: 0 auto;
+		text-align: center;
 		position: relative;
-		height: 80rpx;
-		.tit {
-			flex-shrink: 0;
-			width: 40rpx;
-			font-size: 30rpx;
-			color: $font-color-dark;
+		.money {
+			font-size: 74rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #ffffff;
 		}
-		.input {
-			flex: 1;
+		.money-text {
 			font-size: 30rpx;
-			color: $font-color-dark;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #ffffff;
 		}
-		.iconlocation {
-			font-size: 36rpx;
-			color: $font-color-light;
+	}
+	.chong {
+		position: absolute;
+		top: 36rpx;
+		right: 0;
+		width: 128rpx;
+		height: 45rpx;
+		line-height: 45rpx;
+		background: #2e58ff;
+		border-radius: 23rpx 0px 0px 23rpx;
+		font-size: 25rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #ffffff;
+		text-align: center;
+	}
+}
+.main-box {
+	margin-top: -100rpx;
+	width: 750rpx;
+	background: #ffffff;
+	border-radius: 50rpx;
+	padding-top: 46rpx;
+	.main-top {
+		flex-wrap: wrap;
+		justify-content: space-around;
+		align-items: center;
+		.check {
+			background: #FFF6F6 !important;
+			border: 1px solid #D7272B;
 		}
-
-		.buttom {
-			color: $font-color;
-			font-size: $font-base;
+		.main-item {
+			text-align: center;
+			margin-top: 30rpx;
+			width: 220rpx;
+			background: #ffffff;
+			box-shadow: 0px 2rpx 20rpx 0px rgba(215, 39, 43, 0.12);
+			border-radius: 20rpx;
+			padding: 46rpx 0 52rpx;
+			.item-top {
+				display: flex;
+				justify-content: center;
+				.bg {
+					width: 42rpx;
+					height: 42rpx;
+					image {
+						width: 42rpx;
+						height: 42rpx;
+					}
+				}
+				.item-name {
+					padding-left: 6rpx;
+					font-size: 30rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #333333;
+				}
+			}
+			.checks{
+				color: #D7272B !important;
+			}
+			.item-price {
+				padding-top: 14rpx;
+				font-size: 20rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #999999;
+				text {
+					font-size: 28rpx;
+				}
+			}
 		}
 	}
 }

pages/money/wallet.vue

@@ -1,34 +1,27 @@
 <template>
 	<view class="content">
+		<view class="status_bar"><!-- 这里是状态栏 --></view>
 		<view class="content-money">
-			<view class="money-box">
-				<view class="text">可提现金额（元）</view>
-				<view class="money">{{ money | getMoneyStyle }}</view>
+			<view class="body-title">
+				<view class="goback-box" @click="toBack"><image class="goback" src="../../static/icon/fanhui.png" mode=""></image></view>
+				<view class="header">我的佣金</view>
 			</view>
-			<view class="moneyTx" @click="navto('/pages/money/recharge')">充值</view>
-			<view class="flex buttom-box">
-				<view class="buttom" @click="navto('/pages/money/recharge')">
-					<view class="icon"><image class="icon-img" src="/static/icon/i5.png" mode="aspectFit"></image></view>
-					<text>充值</text>
-				</view>
-				<view class="interval"></view>
-				<view class="buttom" @click="navto('/pages/money/withdrawal')">
-					<view class="icon"><image class="icon-img" src="/static/icon/i1.png" mode="aspectFit"></image></view>
-					<text>提现</text>
-				</view>
+			<view class="content-bg"><image src="../../static/img/user-award.png" mode=""></image></view>
+			<view class="money-box">
+				<view class="money"><text>￥</text>100</view>
 			</view>
 		</view>
 		<view class="navbar">
 			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
 		</view>
-		<swiper :current="tabCurrentIndex" :style="{'height':maxheight+'px'}" class="swiper-box" duration="300" @change="changeTab">
+		<swiper :current="tabCurrentIndex" :style="{ height: maxheight }" class="swiper-box" duration="300" @change="changeTab">
 			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
-				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
+				<scroll-view scroll-y="true" class="list-scroll-content" @scrolltolower="loadData">
 					<!-- 空白页 -->
 					<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
-
+	
 					<!-- 订单列表 -->
-					<view v-for="(item, index) in tabItem.orderList" :key="index" class="order-item flex">
+					<view class="order-item flex" v-for="(item, index) in tabItem.orderList" :key="index">
 						<view class="title-box">
 							<view class="title">
 								<text>{{ item.title }}</text>
@@ -45,6 +38,9 @@
 				</scroll-view>
 			</swiper-item>
 		</swiper>
+		<view class="btn-box" @click="navto('/pages/money/withdrawal')">
+			立即提现
+		</view>
 	</view>
 </template>
 
@@ -61,23 +57,19 @@ export default {
 		empty,
 		uniLoadMore
 	},
-	onReady() {
-		// 初始化获取页面宽度
-		uni.createSelectorQuery()
-			.select('.content')
-			.fields(
-				{
-					size: true
-				},
-				data => {
-					console.log(data);
-					console.log(Math.floor((data.width / 750) * 300));
-					// 保存头部高度
-					this.maxheight =data.height - Math.floor((data.width / 750) * 570);
-					console.log(this.maxheight);
-				}
-			)
-			.exec();
+	onReady(res) {
+		var _this = this;
+		uni.getSystemInfo({
+			success: resu => {
+				const query = uni.createSelectorQuery();
+				query.select('.swiper-box').boundingClientRect();
+				query.exec(function(res) {
+					_this.maxheight = resu.windowHeight - res[0].top + 'px';
+					console.log('打印页面的剩余高度', _this.height);
+				});
+			},
+			fail: res => {}
+		});
 	},
 	data() {
 		return {
@@ -85,14 +77,6 @@ export default {
 			maxheight:'',
 			tabCurrentIndex: 0,
 			navList: [
-				{
-					state: 0,
-					text: '全部',
-					loadingType: 'more',
-					orderList: [],
-					page: 1, //当前页数
-					limit: 10 //每次信息条数
-				},
 				{
 					state: 1,
 					text: '支出',
@@ -128,6 +112,12 @@ export default {
 				url: e
 			});
 		},
+		// 点击返回 我的页面
+		toBack() {
+			uni.navigateBack({
+				
+			})
+		},
 		//获取收入支出信息
 		async loadData(source) {
 			//这里是将订单挂载到tab列表下
@@ -189,70 +179,87 @@ export default {
 
 <style lang="scss">
 page {
-	background: #ffffff;
+	background: #f1f1f1;
 	height: 100%;
 }
+.status_bar {
+	height: var(--status-bar-height);
+	width: 100%;
+}
 .content-money {
 	padding-bottom: 30rpx;
-	background: $page-color-base;
-	.moneyTx {
+	position: relative;
+	height: 400rpx;
+	.content-bg {
 		position: absolute;
-		top: 150rpx;
-		right: 0rpx;
-		width: 150rpx;
-		padding: 10rpx 30rpx;
-		border: 2px solid #ffffff;
-		border-top-left-radius: 99rpx;
-		border-bottom-left-radius: 99rpx;
-		color: #ffffff;
-		line-height: 1;
-		font-size: $font-base;
+		top: 0;
+		left: 0;
+		right: 0;
+		width: 750rpx;
+		height: 400rpx;
+		image {
+			width: 100%;
+			height: 100%;
+		}
 	}
-	.buttom-box {
-		background-color: #ffffff;
+	.body-title {
+		height: 80rpx;
 		text-align: center;
-		margin: 0 30rpx;
-		padding: 20rpx 0;
-		border-radius: $border-radius-sm;
-		margin-top: -60rpx;
-		.buttom {
-			font-size: $font-lg;
-			flex-grow: 1;
+		font-size: 35rpx;
+		position: relative;
+		.header {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			font-size: 36rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #fffeff;
+			height: 80rpx;
+			font-size: 36rpx;
+			font-weight: 700;
+			z-index: 9;
+			display: flex;
+			justify-content: center;
+			align-items: center;
 		}
-		.interval {
-			width: 2px;
-			height: 60rpx;
-			background-color: #eeeeee;
+		.goback-box {
+			position: absolute;
+			z-index: 10;
+			left: 24rpx;
+			top: 0;
+			height: 80rpx;
+			display: flex;
+			align-items: center;
 		}
-		.icon {
-			height: 50rpx;
-			width: 48rpx;
-			margin: 0 auto;
-			.icon-img {
-				width: 100%;
-				height: 100%;
-			}
+		.goback {
+			width: 30rpx;
+			height: 37rpx;
 		}
 	}
 }
 .money-box {
-	background-color: $base-color;
-	padding-top: var(--status-bar-height);
-	height: 368rpx;
+	position: relative;
+	z-index: 100;
+	padding-top: 100rpx;
 	color: #ffffff;
 	text-align: center;
-	.text {
-		padding-top: 147rpx;
-		font-size: $font-sm;
-	}
 	.money {
-		font-size: 56rpx;
+		font-size: 86rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #FFFFFF;
+		text{
+			font-size: 42rpx;
+		}
 	}
 }
 
 .navbar {
+	margin-top: 20rpx;
 	display: flex;
-	height: 40px;
+	height: 88rpx;
 	padding: 0 5px;
 	background: #fff;
 	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
@@ -282,10 +289,9 @@ page {
 		}
 	}
 }
-// 列表
+//列表
 
 .swiper-box {
-	padding-top: 10rpx;
 	.order-item {
 		padding: 20rpx 30rpx;
 		line-height: 1.5;
@@ -306,6 +312,7 @@ page {
 	}
 }
 .list-scroll-content {
+	background: #ffffff;
 	height: 100%;
 }
 .content {
@@ -314,4 +321,21 @@ page {
 		background-color: #ffffff;
 	}
 }
+.btn-box {
+	width: 674rpx;
+	height: 88rpx;
+	background: linear-gradient(0deg, #2E58FF, #32C6FF);
+	border-radius: 44rpx;
+	font-size: 36rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
+	color: #FFFFFF;
+	text-align: center;
+	line-height: 88rpx;
+	position: fixed;
+	bottom: 48rpx;
+	left: 0;
+	right: 0;
+	margin: 0 auto;
+}
 </style>

pages/money/withdrawal.vue

@@ -1,27 +1,22 @@
 <template>
 	<view class="content">
-		<uni-notice-bar single="true" text="每月25号到月底可提现上月结算余额"></uni-notice-bar>
 		<view class="content-money">
-			<view class="flex ">
-				<view class="buttom">
-					<view class="icon">{{ money | getMoneyStyle }}</view>
-					<text class="text">可提现金额</text>
-				</view>
-				<view class="interval"></view>
-				<view class="buttom">
-					<view class=" icon">{{ freeze | getMoneyStyle }}</view>
-					<text class="text">待审核提现金额</text>
-				</view>
+			<view class="buttom">
+				<text class="text">可提现金额</text>
+				<view class="icon"><text>￥</text>{{ money }}</view>
 			</view>
-		</view>
-		<view class="row-box">
-			<view class="title">提现金额</view>
-			<view class="row">
-				<text class="tit">￥</text>
-				<input class="input" type="number" v-model="withdrawal" :placeholder="'最低提现金额' + minPrice + '元'" placeholder-class="placeholder" />
-				<view class="buttom" @click="withdrawal = money">全部提现</view>
+			<view class="interval"></view>
+			<view class="buttom">
+				<text class="text">申请提现金额</text>
+				<view class=" icon"><input class="input" type="number" v-model="withdrawal" :placeholder="'最低提现金额' + minPrice + '元'" placeholder-class="placeholder" /></view>
+			</view>
+			<view class="interval"></view>
+			<view class="tip">
+				<text class="tip-text">申请提现金额</text>
+				<view class=" tip-icon" @click="all()">全部提现</view>
 			</view>
 		</view>
+
 		<!-- #ifndef MP-WEIXIN -->
 		<view class="list" v-if="!weichatBsrowser">
 			<radio-group @change="tabRadio">
@@ -51,7 +46,7 @@
 				</label>
 				<label>
 					<view class="box">
-						<view class="icon iconfont"><image class="icon-img" src="/static/icon/i8.png" mode="aspectFit"></image></view>
+						<view class="icon iconfont"><image class="icon-img" src="../../static/icon/i8.png" mode="aspectFit"></image></view>
 						<view class="title-box">
 							<view class="title">
 								<text v-if="bankData.bankno">{{ bankData.bank + ' ' + bankData.bankno }}</text>
@@ -75,19 +70,11 @@
 <script>
 import { getMoneyStyle } from '@/utils/rocessor.js';
 import { extractCash, extractBank, aliInfo, bankInfo } from '@/api/wallet.js';
-import uniNoticeBar from '@/uview-ui/components/u-notice-bar/u-notice-bar.vue';
 export default {
-	filters: {
-		getMoneyStyle
-	},
-	components: {
-		uniNoticeBar
-	},
 	data() {
 		return {
 			type: 'weixin', //提现方式
-			money: '0.00', //可提现金额
-			freeze: '0.0', //冻结金额
+			money: 10, //可提现金额
 			withdrawal: '', //提现金额
 			minPrice: '', //最少提现金额
 			aliData: {},
@@ -109,7 +96,7 @@ export default {
 	},
 	methods: {
 		// 更新数据
-		dataUp(){
+		dataUp() {
 			this.loadAli();
 			this.loadBank();
 		},
@@ -128,9 +115,9 @@ export default {
 		// 加载余额信息
 		async loadData() {
 			extractBank({}).then(({ data }) => {
-				this.money = data.moneyCount;//可提现余额
-				this.minPrice = data.minPrice;//最小提现
-				this.freeze =data.inmoneyCount//提现中的余额
+				// this.money = data.moneyCount; //可提现余额
+				this.minPrice = data.minPrice; //最小提现
+				this.freeze = data.inmoneyCount; //提现中的余额
 			});
 		},
 		// 跳转
@@ -139,6 +126,9 @@ export default {
 				url: url
 			});
 		},
+		all(){
+			this.withdrawal = this.money
+		},
 		// 切换选中对象
 		tabRadio(e) {
 			this.type = e.detail.value;
@@ -148,19 +138,18 @@ export default {
 			let data = {
 				extract_type: this.type, //bank -银行卡 alipay-支付宝 weixin-微信
 				money: this.withdrawal, //金额
-				money_type: 1//0佣金1余额
-			}
-			if (this.type=='alipay') {
+				money_type: 1 //0佣金1余额
+			};
+			if (this.type == 'alipay') {
 				data.name = this.aliData.fullname;
 				data.alipay_code = this.aliData.alino;
 			}
-			if (this.type=='bank') {
+			if (this.type == 'bank') {
 				data.name = this.bankData.fullname;
 				data.bankname = this.bankData.bank;
 				data.cardnum = this.bankData.bankno;
 			}
-			
-			
+
 			extractCash(data)
 				.then(e => {
 					uni.showToast({
@@ -182,71 +171,65 @@ page {
 	height: 100%;
 }
 .content-money {
-	padding: 30rpx 0;
-	background: #ffffff;
-}
-.flex {
+	padding: 0 20rpx;
 	background-color: #ffffff;
-	text-align: center;
-	margin: 0 30rpx;
-	border-radius: $border-radius-sm;
 	.buttom {
-		font-size: $font-lg;
-		width: 50%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		height: 110rpx;
 	}
 	.interval {
-		width: 2px;
-		height: 60rpx;
-		background-color: #eeeeee;
+		width: 100%;
+		height: 1px;
+		background: #E6E6E6;
 	}
 	.icon {
-		background-size: 100%;
-		font-size: 42rpx;
-		color: $font-color-dark;
-		font-weight: bold;
-		background-repeat: no-repeat;
-		background-position: center;
-	}
-	.text {
-		color: $font-color-light;
-	}
-}
-
-.row-box {
-	margin-top: 30rpx;
-	padding: 20rpx 30rpx;
-	background: #fff;
-	.title {
-		font-size: $font-base + 2rpx;
-		color: $font-color-dark;
-	}
-	.row {
-		display: flex;
-		align-items: center;
-		position: relative;
-		height: 80rpx;
-		.tit {
-			flex-shrink: 0;
-			width: 40rpx;
-			font-size: 30rpx;
-			color: $font-color-dark;
+		font-size: 48rpx;
+		font-family: SourceHanSansCN;
+		font-weight: 500;
+		color: #333333;
+		text{
+			font-size: 32rpx;
 		}
 		.input {
+			text-align: right;
 			flex: 1;
 			font-size: 30rpx;
 			color: $font-color-dark;
 		}
 		.iconlocation {
+			text-align: right;
 			font-size: 36rpx;
 			color: $font-color-light;
 		}
-
-		.buttom {
-			color: $font-color-spec;
-			font-size: $font-base;
+	}
+	.text {
+		font-size: 32rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #333333;
+	}
+	.tip {
+		height: 74rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		.tip-text {
+			font-size: 24rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #999999;
+		}
+		.tip-icon {
+			font-size: 26rpx;
+			font-family: SourceHanSansCN;
+			font-weight: 400;
+			color: #438BED;
 		}
 	}
 }
+
 .add-btn {
 	&.modified {
 		color: $base-color;

pages/user/user.vue

@@ -1,101 +1,135 @@
 <template>
-	<view class="container">
+	<view class="content">
 		<view class="top">
-			<view class="bg"><image class="imgBg" src="../../static/img/user-bg.png" mode=""></image></view>
-			<view class="user">
-				<view class="avtor">
-					<image class="portrait" :src="userInfo.avatar || '/static/img/missing-face.png'"></image>
-					<view class="he"><image class="image" v-if="userInfo.point.length != 0" src="../../static/img/hehuoren.png"></image></view>
+			<view class="bg"><image class="imgBg" src="../../static/user/img17.png" mode=""></image></view>
+			<view class="title">
+				<view class="header">
+					<view class="tx"><image src="../../static/error/missing-face.png" mode=""></image></view>
+					<view class="dl"><image src="../../static/user/jiedian1.png" mode=""></image></view>
 				</view>
-				<view class="">
-					<view class="name">
-						<view class="name-left clamp">{{ userInfo.phone || userInfo.email || '游客' }}</view>
-						<view class="name-right">
-							<image class="image" src="../../static/img/img28.png"></image>
-							<view class="level" v-if="userInfo.level">{{ userInfo.level_info.name }}</view>
-							<view class="level" v-else>V0</view>
-						</view>
+				<view class="message">
+					<view class="name">{{ userInfo.nickname }}</view>
+					<view class="phone">{{ userInfo.phone }}</view>
+					<view class="vip-box">
+						<view class="vip">会员等级LV.5</view>
+						<view class="pintuan">拼团等级LV.2</view>
 					</view>
-					<view class="id">uid:{{ userInfo.uid }}</view>
-				</view>
-			</view>
-			<view class="config" @click="nav('/pages/set/userinfo')">
-				<view class="myself"><image src="../../static/img/myself.png" mode=""></image></view>
-				<view class="">
-					我的资料
 				</view>
 			</view>
 		</view>
-		<view class="main">
-			<view class="title">我的工具</view>
-			<view class="tt">
-				<view class="tt-box" @click="nav('/pages/assets/myPing')">
-					<image src="../../static/img/pinggou.png" class="tt-icon1" mode=""></image>
-					<view class="tt-txt">我的拼购</view>
-					<image src="../../static/img/jiantou.png" class="next-icon" mode=""></image>
-				</view>
-				<view class="userInfo.point">
-					<view class="tt-box" v-if="userInfo.point.length != 0" @click="nav('/pages/user/myNote')">
-						<image src="../../static/img/myPoint.png" class="tt-icon1" mode=""></image>
-						<view class="tt-txt">我的节点</view>
-						<image src="../../static/img/jiantou.png" class="next-icon" mode=""></image>
-					</view>
+		<view class="box">
+			<view class="sweets-box">
+				<view class="sweets" @click="nav('/pages/money/award')">
+					<view class="limit">111</view>
+					<view class="sweets-name">糖果</view>
 				</view>
-				<view class="tt-box" @click="nav('/pages/market/myCalculation')">
-					<image src="../../static/img/myKJ.png" class="tt-icon1" mode=""></image>
-					<view class="tt-txt">我的矿机</view>
-					<image src="../../static/img/jiantou.png" class="next-icon" mode=""></image>
+				<view class="jiange"></view>
+				<view class="sweets">
+					<view class="limit">111</view>
+					<view class="sweets-name">拼团积分</view>
 				</view>
-				<view class="tt-box" @click="nav('/pages/index/info')" v-if="userInfo.level >= 4">
-					<image src="../../static/img/data.png" class="tt-icon1" mode=""></image>
-					<view class="tt-txt">汇总数据</view>
-					<image src="../../static/img/jiantou.png" class="next-icon" mode=""></image>
+				<view class="jiange"></view>
+				<view class="sweets">
+					<view class="limit">111</view>
+					<view class="sweets-name">购物积分</view>
 				</view>
-				<view class="tt-box" @click="nav('/pages/user/fulilist')">
-					<image src="../../static/img/gift.png" class="tt-icon1" mode=""></image>
-					<view class="tt-txt">拼购福利</view>
-					<image src="../../static/img/jiantou.png" class="next-icon" mode=""></image>
+				<view class="jiange"></view>
+				<view class="sweets" @click="nav('/pages/money/wallet')">
+					<view class="limit">111</view>
+					<view class="sweets-name">佣金</view>
 				</view>
-				<view class="tt-box" @click="nav('/pages/user/extension')">
-					<image src="../../static/img/myTeam.png" class="tt-icon2" mode=""></image>
-					<view class="tt-txt">我的团队</view>
-					<image src="../../static/img/jiantou.png" class="next-icon" mode=""></image>
+			</view>
+			<view class="my-order">
+				<view class="box-title flex ">
+					<view class="title1"><text>我的订单</text></view>
+					<view class="link" @click="navTo()" hover-class="common-hover"><text class="iconfont iconenter"></text></view>
 				</view>
-				<view class="tt-box" @click="nav('/pages/user/shareQrCode')">
-					<image src="../../static/img/share.png" class="tt-icon3" mode=""></image>
-					<view class="tt-txt">团队邀请</view>
-					<image src="../../static/img/jiantou.png" class="next-icon" mode=""></image>
+				<view class="order-section">
+					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
+						<view class=" icon1 position-relative">
+							<image class="icon-img" src="/static/user/user01.png" mode="aspectFit"></image>
+						</view>
+						<text>待付款</text>
+					</view>
+					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
+						<view class="icon1 position-relative">
+							<image class="icon-img" src="/static/user/user02.png" mode="aspectFit"></image>
+						</view>
+						<text>待发货</text>
+					</view>
+					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
+						<view class="icon1 position-relative">
+							<image class="icon-img" src="/static/user/user03.png" mode="aspectFit"></image>
+						</view>
+						<text>待收货</text>
+					</view>
+					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
+						<view class=" icon1 position-relative"><image class="icon-img" src="/static/user/user04.png" mode="aspectFit"></image></view>
+						<text>已完成</text>
+					</view>
 				</view>
-				<view class="tt-box" @click="server()">
-					<image src="../../static/img/kefu.png" class="tt-icon1" mode=""></image>
-					<view class="tt-txt">联系客服</view>
-					<image src="../../static/img/jiantou.png" class="next-icon" mode=""></image>
+			</view>
+			<view class="my-order">
+				<view class="box-title flex ">
+					<view class="title1"><text>拼购工具</text></view>
+					<view class="link" @click="navTo()" hover-class="common-hover"></view>
 				</view>
-				<view class="tt-box" @click="nav('/pages/set/set')">
-					<image src="../../static/img/set.png" class="tt-icon5" mode=""></image>
-					<view class="tt-txt">设置</view>
-					<image src="../../static/img/jiantou.png" class="next-icon" mode=""></image>
+				<view class="order-section">
+					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
+						<view class=" icon1 position-relative"><image class="icon-img" src="../../static/user/myPing.png" mode="aspectFit"></image></view>
+						<text>我的拼购</text>
+					</view>
+					<view class="order-item" @click="navTo('./pages/user/pingou')" hover-class="common-hover" :hover-stay-time="50">
+						<view class="icon1 position-relative"><image class="icon-img" src="../../static/user/myPoint.png" mode="aspectFit"></image></view>
+						<text>我的节点</text>
+					</view>
+					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
+						<view class="icon1 position-relative"><image class="icon-img" src="../../static/user/myFu.png" mode="aspectFit"></image></view>
+						<text>我的服务器</text>
+					</view>
+					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
+						<view class=" icon1 position-relative"><image class="icon-img" src="../../static/user/data.png" mode="aspectFit"></image></view>
+						<text>汇总数据</text>
+					</view>
 				</view>
 			</view>
-			<view class="kb"></view>
-		</view>
-
-		<uni-popup ref="popup" type="center">
-			<view class="popup">
-				<view class="popup-dox">
-					<image class="popup-logo" src="../../static/img/lianxi.png"></image>
-					<view class="pop-title">已为您定制专属客服</view>
-					<view>{{ weixin }}</view>
-					<image class="popup-text" @longtap="bc_code" :src="erweima"></image>
-					<view class="btn" @click="copy(weixin)">复制微信号</view>
-					<view class="pop-tip flex">
-						<view class="weixin"><image src="../../static/img/weixin.png" mode=""></image></view>
-						<view>长按保存二维码</view>
+			<view class="my-order">
+				<view class="box-title flex ">
+					<view class="title1"><text>更多功能</text></view>
+					<view class="link" @click="navTo()" hover-class="common-hover"></view>
+				</view>
+				<view class="order-section">
+					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
+						<view class=" icon1 position-relative"><image class="icon-img" src="../../static/user/myTeam.png" mode="aspectFit"></image></view>
+						<text>我的团队</text>
+					</view>
+					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
+						<view class="icon1 position-relative"><image class="icon-img" src="../../static/user/myTeams.png" mode="aspectFit"></image></view>
+						<text>互助团队</text>
+					</view>
+					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
+						<view class="icon1 position-relative"><image class="icon-img" src="../../static/user/myShare.png" mode="aspectFit"></image></view>
+						<text>团队邀请</text>
+					</view>
+					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
+						<view class=" icon1 position-relative"><image class="icon-img" src="../../static/user/myAddress.png" mode="aspectFit"></image></view>
+						<text>收货地址</text>
+					</view>
+					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
+						<view class=" icon1 position-relative"><image class="icon-img" src="../../static/user/myKefu.png" mode="aspectFit"></image></view>
+						<text>联系客服</text>
+					</view>
+					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
+						<view class=" icon1 position-relative"><image class="icon-img" src="../../static/user/myAbout.png" mode="aspectFit"></image></view>
+						<text>关于我们</text>
+					</view>
+					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
+						<view class=" icon1 position-relative"><image class="icon-img" src="../../static/user/mySet.png" mode="aspectFit"></image></view>
+						<text>设置</text>
 					</view>
 				</view>
 			</view>
-			<view class="close_icon" @click="close"><image src="../../static/img/Close.png"></image></view>
-		</uni-popup>
+		</view>
 	</view>
 </template>
 <script>
@@ -228,255 +262,248 @@ export default {
 };
 </script>
 <style lang="scss">
-page {
-	height: 100%;
-	background: #ffffff;
-}
-.container {
-	height: 100%;
-	background: #ffffff;
-}
-.kb {
-	height: 100rpx;
+page,
+.content {
+	height: auto;
+	min-height: 100%;
+	background-color: #FFFFFF;
+	padding-bottom: 44rpx;
 }
 .top {
 	width: 100%;
-	height: 340rpx;
+	height: 530rpx;
 	position: relative;
+
 	.bg {
 		position: absolute;
 		width: 100%;
-		height: 340rpx;
-		left: 0;
-		top: 0;
-		right: 0;
+		height: 530rpx;
+
 		image {
 			width: 100%;
 			height: 100%;
 		}
 	}
-	.user {
+
+	.title {
 		position: relative;
-		padding-top: 98rpx;
-		padding-left: 34rpx;
 		display: flex;
-		justify-content: flex-start;
-		align-items: center;
-		z-index: 10;
-		.avtor {
-			width: 102rpx;
-			height: 102rpx;
-			border-radius: 50%;
-			position: relative;
-			.portrait {
-				width: 100%;
-				height: 100%;
-				border-radius: 50%;
-			}
-			.he {
-				position: absolute;
-				height: 30rpx;
-				bottom: -4rpx;
-				left: 0;
-				.image {
-					width: 102rpx;
-					height: 30rpx;
-				}
-			}
-		}
-		.name {
-			margin-left: 30rpx;
-			font-size: 36rpx;
-			font-family: PingFang SC;
-			font-weight: 500;
-			color: #ffffff;
+		flex-direction: column;
+		top: 20%;
+
+		.header {
 			display: flex;
-			justify-content: start;
-			.name-left {
-				max-width: 220rpx;
+			flex-direction: column;
+			align-items: center;
+
+			.tx {
+				width: 132rpx;
+				height: 132rpx;
+
+				image {
+					width: 100%;
+					height: 100%;
+				}
 			}
-			.name-right {
-				margin-left: 20rpx;
-				width: 50rpx;
-				height: 60rpx;
+
+			.dl {
 				position: relative;
+				margin-top: -16rpx;
+				width: 100rpx;
+				height: 32rpx;
+
 				image {
 					width: 100%;
 					height: 100%;
 				}
-				.level {
-					position: absolute;
-					top: 35%;
-					left: 50%;
-					margin-left: -12rpx;
-					font-size: 20rpx;
-				}
 			}
 		}
-		.id {
-			margin-left: 30rpx;
-			font-size: 30rpx;
-			font-family: PingFang SC;
-			font-weight: 500;
-			color: #ffffff;
-		}
-	}
-}
-.main {
-	position: relative;
-	z-index: 11;
-	width: 100%;
-	height: 100%;
-	background: #ffffff;
-	margin-top: -70rpx;
-	border-top-left-radius: 60rpx;
-	border-top-right-radius: 60rpx;
-	.title {
-		padding-top: 65rpx;
-		padding-left: 36rpx;
-		font-size: 36rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
-		color: #333333;
-	}
-	.tt {
-		margin: 0 auto;
-		width: 750rpx;
-		padding: 40rpx 70rpx;
-		border-radius: 10rpx;
-		background-color: #ffffff;
 
-		.tt-box {
-			height: 100rpx;
+		.message {
+			margin-top: 10rpx;
 			display: flex;
+			flex-direction: column;
 			align-items: center;
-			border-bottom: 1px solid #f0f0f0;
-			.tt-icon1 {
-				width: 42rpx;
-				height: 42rpx;
-			}
-			.tt-icon2 {
-				width: 49rpx;
-				height: 38rpx;
-			}
-			.tt-icon3 {
-				width: 46rpx;
-				height: 40rpx;
-			}
-			.tt-icon4 {
-				width: 40rpx;
-				height: 42rpx;
-			}
-			.tt-icon5 {
-				width: 44rpx;
-				height: 40rpx;
+
+			.name {
+				font-size: 34rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #ffffff;
 			}
 
-			.tt-txt {
-				margin-left: 36rpx;
-				font-size: 32rpx;
+			.phone {
+				font-size: 26rpx;
 				font-family: PingFang SC;
 				font-weight: 500;
-				color: #333333;
-				flex: 1;
+				color: #ffffff;
 			}
+		}
 
-			.next-icon {
-				width: 16rpx;
-				height: 25rpx;
+		.vip-box {
+			margin-top: 10rpx;
+			display: flex;
+			align-items: center;
+
+			.vip {
+				padding: 6rpx 16rpx;
+				text-align: center;
+				background: #ffffff;
+				border-radius: 24rpx;
+				font-size: 20rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #2e58ff;
+				margin-right: 10rpx;
 			}
-		}
 
-		.border-b {
-			border-bottom: 1px solid #f1f1f1;
+			.pintuan {
+				padding: 6rpx 16rpx;
+				text-align: center;
+				background: #ffffff;
+				border-radius: 24rpx;
+				font-size: 20rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #2e58ff;
+			}
 		}
 	}
 }
-.popup {
-	width: 640rpx;
-	background-color: #ffffff;
-	border-radius: 15rpx;
-	text-align: center;
-	.popup-dox {
-		position: relative;
-		top: -60rpx;
-		.popup-logo {
-			width: 460rpx;
-			height: 132rpx;
-		}
-		.pop-title {
-			font-size: 40rpx;
+
+.box {
+	display: flex;
+	flex-direction: column;
+	width: 710rpx;
+	position: relative;
+	margin: -80rpx 20rpx;
+	color: #fefefe;
+}
+
+.sweets-box {
+	display: flex;
+	align-items: center;
+	width: 710rpx;
+	padding: 48rpx 0;
+	background: #ffffff;
+	box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
+	border-radius: 20rpx;
+
+	.jiange {
+		width: 1rpx;
+		height: 36rpx;
+		background: #999999;
+	}
+
+	.sweets {
+		width: 25%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		font-size: 28rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+
+		.limit {
+			font-size: 36rpx;
+			font-family: PingFang SC;
 			font-weight: bold;
-			color: #333333;
-			padding: 25rpx 0rpx;
-			margin-bottom: 50rpx;
-		}
-		.popup-text {
-			width: 400rpx;
-			height: 400rpx;
-			margin-bottom: 50rpx;
+			color: #666666;
 		}
-		.btn {
-			width: 300rpx;
-			height: 50rpx;
-			line-height: 50rpx;
-			background: linear-gradient(90deg, #60bab0, #60bab0, #45969b);
-			margin: 0 auto;
-			color: #ffffff;
-			border-radius: 25rpx;
-		}
-		.pop-tip {
-			font-size: 30rpx;
+
+		.sweets-name {
+			font-size: 28rpx;
+			font-family: PingFang SC;
 			font-weight: 500;
-			color: #333333;
-			justify-content: center;
-			margin-top: 20rpx;
-			.weixin {
-				width: 48rpx;
-				height: 40rpx;
-				margin-right: 14rpx;
-				image {
-					width: 48rpx;
-					height: 40rpx;
-				}
-			}
+			color: #666666;
 		}
 	}
 }
-.close_icon {
-	width: 60rpx;
-	height: 60rpx;
-	margin: 88rpx auto 0;
-	image {
-		width: 100%;
-		height: 100%;
+
+.my-order {
+	margin-top: 20rpx;
+	display: flex;
+	justify-content: space-between;
+	flex-direction: column;
+	width: 710rpx;
+	background: #ffffff;
+	box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
+	border-radius: 20rpx;
+}
+
+.box-title {
+	border-top-left-radius: 20rpx;
+	border-top-right-radius: 20rpx;
+	background-color: #ffffff;
+	line-height: 1;
+	padding: 26rpx 34rpx 20rpx;
+	border-bottom: 1px solid #F5F5F5;;
+
+	.title1 {
+		font-size: 30rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #333333;
+	}
+
+	.link {
+		font-size: $font-base - 2rpx;
+		color: $font-color-light;
 	}
 }
-.config {
-	z-index: 10;
-	background: #fff;
-	text-align: right;
-	font-size: 26rpx !important;
-	border-radius: 34px 0px 0px 34px;
-	position: absolute;
-	top: 120rpx;
-	right: 0;
-	font-size: 20rpx;
-	font-family: PingFang SC;
-	font-weight: 500;
-	color: #60bab0;
-	line-height: 58rpx;
-	padding:2rpx 20rpx;
+
+.order-section {
 	display: flex;
+	flex-wrap: wrap;
 	align-items: center;
-	.myself {
-		padding-top: 12rpx;
-		margin-right: 10rpx;
-		image {
-			height: 30rpx;
-			width: 30rpx;
+	text-align: center;
+	padding: 34rpx 0 10rpx;
+	.order-item {
+		display: flex;
+		flex-direction: column;
+		width: 25%;
+		align-items: center;
+		height: 140rpx;
+		font-size: $font-sm;
+		color: $font-color-dark;
+	}
+
+	.iconfont {
+		font-size: 48rpx;
+		margin-bottom: 18rpx;
+		color: #fa436a;
+	}
+
+	.icon-shouhoutuikuan {
+		font-size: 44rpx;
+	}
+
+	.icon {
+		height: 88rpx;
+		width: 90rpx;
+		margin-bottom: 18rpx;
+		background-size: 100%;
+		background-repeat: no-repeat;
+		background-position: center;
+
+		.icon-img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.icon1 {
+		height: 50rpx;
+		width: 48rpx;
+		margin-bottom: 18rpx;
+		background-size: 100%;
+		background-repeat: no-repeat;
+		background-position: center;
+
+		.icon-img {
+			width: 100%;
+			height: 100%;
 		}
 	}
-	
 }
 </style>

pages/user/user1.vue

@@ -1,492 +0,0 @@
-<template>
-	<view class="content">
-		<view class="top">
-			<view class="bg">
-				<image class="imgBg" src="../../static/user/img17.png" mode=""></image>
-			</view>
-			<view class="title">
-				<view class="header">
-					<view class="tx">
-						<image src="../../static/error/missing-face.png" mode=""></image>
-					</view>
-					<view class="dl">
-						<image src="../../static/user/jiedian1.png" mode=""></image>
-					</view>
-				</view>
-				<view class="message">
-					<view class="name">
-						{{name}}
-					</view>
-					<view class="phone">
-						{{phone}}
-					</view>
-					<view class="vip-box">
-						<view class="vip">
-							会员等级LV.5
-						</view>
-						<view class="pintuan">
-							拼团等级LV.2
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="box">
-			<view class="sweets-box">
-				<view class="sweets">
-					<view class="limit">
-						111
-					</view>
-
-					<view class="sweets-name">
-						拼团积分
-					</view>
-				</view>
-				<view class="jiange">
-
-				</view>
-				<view class="sweets">
-					<view class="limit">
-						111
-					</view>
-					<view class="sweets-name">
-						购物积分
-					</view>
-				</view>
-				<view class="jiange">
-
-				</view>
-				<view class="sweets">
-					<view class="limit">
-						111
-					</view>
-					<view class="sweets-name">
-						佣金
-					</view>
-				</view>
-				<view class="jiange">
-
-				</view>
-				<view class="sweets">
-					<view class="limit">
-						111
-					</view>
-					<view class="sweets-name">
-						糖果
-					</view>
-				</view>
-			</view>
-			<view class="my-order">
-				<view class="box-title flex borde-b">
-					<view class="title1"><text>我的订单</text></view>
-					<view class="link" @click="navTo()" hover-class="common-hover">
-
-						<text class="iconfont iconenter"></text>
-					</view>
-				</view>
-				<view class="order-section">
-					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
-						<view class=" icon1 position-relative">
-							<image class="icon-img" src="/static/user/user01.png" mode="aspectFit"></image>
-							<view class="corner">
-								<text></text>
-							</view>
-						</view>
-						<text>代付款</text>
-					</view>
-					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
-						<view class="icon1 position-relative">
-							<image class="icon-img" src="/static/user/user02.png" mode="aspectFit"></image>
-							<view class="corner">
-								<text></text>
-							</view>
-						</view>
-						<text>代发货</text>
-					</view>
-					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
-						<view class="icon1 position-relative">
-							<image class="icon-img" src="/static/user/user03.png" mode="aspectFit"></image>
-							<view class="corner">
-								<text></text>
-							</view>
-						</view>
-						<text>待收货</text>
-					</view>
-					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
-						<view class=" icon1 position-relative">
-							<image class="icon-img" src="/static/user/user04.png" mode="aspectFit"></image>
-						</view>
-						<text>已完成</text>
-					</view>
-				</view>
-			</view>
-			<view class="my-order">
-				<view class="box-title flex borde-b">
-					<view class="title1"><text>拼购工具</text></view>
-					<view class="link" @click="navTo()" hover-class="common-hover">
-					</view>
-				</view>
-				<view class="order-section">
-					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
-						<view class=" icon1 position-relative">
-							<image class="icon-img" src="/static/user/user01.png" mode="aspectFit"></image>
-							
-						</view>
-						<text>我的拼购</text>
-					</view>
-					<view class="order-item" @click="navTo('./pages/user/pingou')" hover-class="common-hover" :hover-stay-time="50">
-						<view class="icon1 position-relative">
-							<image class="icon-img" src="/static/user/user02.png" mode="aspectFit"></image>
-							
-						</view>
-						<text>我的节点</text>
-					</view>
-					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
-						<view class="icon1 position-relative">
-							<image class="icon-img" src="/static/user/user03.png" mode="aspectFit"></image>
-							
-						</view>
-						<text>我的服务器</text>
-					</view>
-					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
-						<view class=" icon1 position-relative">
-							<image class="icon-img" src="/static/user/user04.png" mode="aspectFit"></image>
-						</view>
-						<text>汇总数据</text>
-					</view>
-				</view>
-			</view>
-			<view class="my-order">
-				<view class="box-title flex borde-b">
-					<view class="title1"><text>更多功能</text></view>
-					<view class="link" @click="navTo()" hover-class="common-hover">
-					</view>
-				</view>
-				<view class="order-section">
-					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
-						<view class=" icon1 position-relative">
-							<image class="icon-img" src="/static/user/user01.png" mode="aspectFit"></image>
-							
-						</view>
-						<text>我的团队</text>
-					</view>
-					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
-						<view class="icon1 position-relative">
-							<image class="icon-img" src="/static/user/user02.png" mode="aspectFit"></image>
-							
-						</view>
-						<text>互助团队</text>
-					</view>
-					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
-						<view class="icon1 position-relative">
-							<image class="icon-img" src="/static/user/user03.png" mode="aspectFit"></image>
-							
-						</view>
-						<text>团队邀请</text>
-					</view>
-					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
-						<view class=" icon1 position-relative">
-							<image class="icon-img" src="/static/user/user04.png" mode="aspectFit"></image>
-						</view>
-						<text>收货地址</text>
-					</view>
-					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
-						<view class=" icon1 position-relative">
-							<image class="icon-img" src="/static/user/user04.png" mode="aspectFit"></image>
-						</view>
-						<text>联系客服</text>
-					</view>
-					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
-						<view class=" icon1 position-relative">
-							<image class="icon-img" src="/static/user/user04.png" mode="aspectFit"></image>
-						</view>
-						<text>关于我们</text>
-					</view>
-					<view class="order-item" @click="navTo()" hover-class="common-hover" :hover-stay-time="50">
-						<view class=" icon1 position-relative">
-							<image class="icon-img" src="/static/user/user04.png" mode="aspectFit"></image>
-						</view>
-						<text>设置</text>
-					</view>
-				</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				name: '阿强',
-				phone: 18252757278,
-			}
-		},
-		methods: {
-			navTo(){
-				uni.navigateTo({
-					url
-				})
-			}
-		}
-	}
-</script>
-
-<style lang="scss">
-	.content {
-		height: 100%;
-		color: #FCFCFC;
-	}
-
-	.top {
-		width: 100%;
-		height: 530rpx;
-		position: relative;
-
-		.bg {
-			position: absolute;
-			width: 100%;
-			height: 530rpx;
-
-			image {
-				width: 100%;
-				height: 100%;
-			}
-		}
-
-		.title {
-			position: relative;
-			display: flex;
-			flex-direction: column;
-			top: 20%;
-
-
-
-
-			.header {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-
-				.tx {
-					width: 132rpx;
-					height: 132rpx;
-
-					image {
-						width: 100%;
-						height: 100%;
-					}
-				}
-
-				.dl {
-					position: relative;
-					margin-top: -16rpx;
-					width: 100rpx;
-					height: 32rpx;
-
-					image {
-						width: 100%;
-						height: 100%;
-					}
-				}
-			}
-
-			.message {
-				margin-top: 10rpx;
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-
-				.name {
-					font-size: 34rpx;
-					font-family: PingFang SC;
-					font-weight: bold;
-					color: #FFFFFF;
-
-				}
-
-				.phone {
-					font-size: 26rpx;
-					font-family: PingFang SC;
-					font-weight: 500;
-					color: #FFFFFF;
-
-				}
-			}
-
-			.vip-box {
-				margin-top: 10rpx;
-				display: flex;
-				align-items: center;
-				
-
-				.vip {
-					text-align: center;
-					width: 163rpx;
-					height: 32rpx;
-					background: #FFFFFF;
-					border-radius: 16rpx;
-					font-size: 20rpx;
-					font-family: PingFang SC;
-					font-weight: bold;
-					color: #2E58FF;
-					margin-right: 7rpx;
-				}
-
-				.pintuan {
-					text-align: center;
-					width: 163rpx;
-					height: 32rpx;
-					background: #FFFFFF;
-					border-radius: 16rpx;
-					font-size: 20rpx;
-					font-family: PingFang SC;
-					font-weight: bold;
-					color: #2E58FF;
-				}
-			}
-		}
-	}
-
-	.box {
-		display: flex;
-		flex-direction: column;
-		width: 710rpx;
-		position: relative;
-		margin: -80rpx 20rpx ;
-		color: #FEFEFE;;
-	}
-
-	.sweets-box {
-		display: flex;
-		align-items: center;
-		justify-content: space-around;
-		width: 710rpx;
-		height: 165rpx;
-		background: #FFFFFF;
-		box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
-		border-radius: 20rpx;
-
-		.jiange {
-			width: 1rpx;
-			height: 36rpx;
-			background: #999999;
-
-		}
-
-		.sweets {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			font-size: 28rpx;
-			font-family: PingFang SC;
-			font-weight: 500;
-
-			.limit {
-				font-size: 36rpx;
-				font-family: PingFang SC;
-				font-weight: bold;
-				color: #666666;
-			}
-
-			.sweets-name {
-				font-size: 28rpx;
-				font-family: PingFang SC;
-				font-weight: 500;
-				color: #666666;
-			}
-		}
-
-	}
-
-	.my-order {
-		margin-top: 20rpx;
-		display: flex;
-		justify-content: space-between;
-		flex-direction: column;
-		width: 710rpx;
-		height: 221rpx;
-		background: #FFFFFF;
-		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
-		border-radius: 20rpx;
-	}
-
-	
-
-	.box-title {
-		border-top-left-radius: 20rpx;
-		border-top-right-radius: 20rpx;
-		background-color: #FFFFFF;
-		line-height: 1;
-		padding: 20rpx 30rpx;
-
-		.title1 {
-			font-size: 30rpx;
-			font-family: PingFang SC;
-			font-weight: bold;
-			color: #333333;
-			
-		}
-
-		.link {
-			font-size: $font-base - 2rpx;
-			color: $font-color-light;
-		}
-	}
-	
-	.order-section {
-		display: flex;
-		
-		
-		.order-item {
-			display: flex;
-			flex-direction: column;
-			
-			align-items: center;
-			width: 25%;
-			flex-wrap: wrap;
-			height: 120rpx;
-
-			font-size: $font-sm;
-			color: $font-color-dark;
-		}
-
-		.iconfont {
-			font-size: 48rpx;
-			margin-bottom: 18rpx;
-			color: #fa436a;
-		}
-
-		.icon-shouhoutuikuan {
-			font-size: 44rpx;
-		}
-
-		.icon {
-			height: 88rpx;
-			width: 90rpx;
-			margin-bottom: 18rpx;
-			background-size: 100%;
-			background-repeat: no-repeat;
-			background-position: center;
-
-			.icon-img {
-				width: 100%;
-				height: 100%;
-			}
-		}
-
-		.icon1 {
-			height: 50rpx;
-			width: 48rpx;
-			margin-bottom: 18rpx;
-			background-size: 100%;
-			background-repeat: no-repeat;
-			background-position: center;
-
-			.icon-img {
-				width: 100%;
-				height: 100%;
-			}
-		}
-	}
-</style>

uni.scss

@@ -5,7 +5,7 @@ $page-row-spacing: 30rpx;
 $page-color-base: #f8f8f8; //页面背景颜色
 $page-color-light: #f8f6fc;
 // 主题颜色
-$base-color: #44969d; //项目颜色
+$base-color: #2f78ff; //项目颜色
 $box-shadow-color: #5dbc7c; //阴影颜色
 $font-color: #5dbc7c; //字体颜色
 $font-color-spec: #5dbc7c; //可操作文字颜色