123

components/uni-countdown/uni-countdowns.vue

@@ -11,178 +11,179 @@
 	</view>
 </template>
 <script>
-	export default {
-		name: 'UniCountdown',
-		props: {
-			showDay: {
-				type: Boolean,
-				default: true
-			},
-			showColon: {
-				type: Boolean,
-				default: true
-			},
-			backgroundColor: {
-				type: String,
-				default: '#FFFFFF'
-			},
-			borderColor: {
-				type: String,
-				default: '#000000'
-			},
-			color: {
-				type: String,
-				default: '#000000'
-			},
-			splitorColor: {
-				type: String,
-				default: '#000000'
-			},
-			day: {
-				type: Number,
-				default: 0
-			},
-			hour: {
-				type: Number,
-				default: 0
-			},
-			minute: {
-				type: Number,
-				default: 0
-			},
-			second: {
-				type: Number,
-				default: 0
-			}
+export default {
+	name: 'UniCountdown',
+	props: {
+		showDay: {
+			type: Boolean,
+			default: true
 		},
-		data() {
-			return {
-				timer: null,
-				syncFlag: false,
-				d: '00',
-				h: '00',
-				i: '00',
-				s: '00',
-				leftTime: 0,
-				seconds: 0
-			}
+		showColon: {
+			type: Boolean,
+			default: true
+		},
+		backgroundColor: {
+			type: String,
+			default: '#FFFFFF'
+		},
+		borderColor: {
+			type: String,
+			default: '#000000'
+		},
+		color: {
+			type: String,
+			default: '#000000'
+		},
+		splitorColor: {
+			type: String,
+			default: '#000000'
+		},
+		day: {
+			type: Number,
+			default: 0
+		},
+		hour: {
+			type: Number,
+			default: 0
+		},
+		minute: {
+			type: Number,
+			default: 0
+		},
+		second: {
+			type: Number,
+			default: 0
+		}
+	},
+	data() {
+		return {
+			timer: null,
+			syncFlag: false,
+			d: '00',
+			h: '00',
+			i: '00',
+			s: '00',
+			leftTime: 0,
+			seconds: 0
+		};
+	},
+	watch: {
+		day(val) {
+			this.changeFlag();
+		},
+		hour(val) {
+			this.changeFlag();
+		},
+		minute(val) {
+			this.changeFlag();
+		},
+		second(val) {
+			this.changeFlag();
+		}
+	},
+	created: function(e) {
+		this.startData();
+	},
+	beforeDestroy() {
+		clearInterval(this.timer);
+	},
+	methods: {
+		toSeconds(day, hours, minutes, seconds) {
+			return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds;
+		},
+		timeUp() {
+			clearInterval(this.timer);
+			this.$emit('timeup');
 		},
-		watch: {
-			day(val) {
-				this.changeFlag()
-			},
-			hour(val) {
-				this.changeFlag()
-			},
-			minute(val) {
-				this.changeFlag()
-			},
-			second(val) {
-				this.changeFlag()
+		countDown() {
+			let seconds = this.seconds;
+			let [day, hour, minute, second] = [0, 0, 0, 0];
+			if (seconds > 0) {
+				day = Math.floor(seconds / (60 * 60 * 24));
+				hour = Math.floor(seconds / (60 * 60)) - day * 24;
+				minute = Math.floor(seconds / 60) - day * 24 * 60 - hour * 60;
+				second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60;
+			} else {
+				this.timeUp();
 			}
+			if (day < 10) {
+				day = '0' + day;
+			}
+			if (hour < 10) {
+				hour = '0' + hour;
+			}
+			if (minute < 10) {
+				minute = '0' + minute;
+			}
+			if (second < 10) {
+				second = '0' + second;
+			}
+			this.d = day;
+			this.h = hour;
+			this.i = minute;
+			this.s = second;
 		},
-		created: function(e) {
-			this.startData();
-		},
-		beforeDestroy() {
-			clearInterval(this.timer)
-		},
-		methods: {
-			toSeconds(day, hours, minutes, seconds) {
-				return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
-			},
-			timeUp() {
-				clearInterval(this.timer)
-				this.$emit('timeup')
-			},
-			countDown() {
-				let seconds = this.seconds
-				let [day, hour, minute, second] = [0, 0, 0, 0]
-				if (seconds > 0) {
-					day = Math.floor(seconds / (60 * 60 * 24))
-					hour = Math.floor(seconds / (60 * 60)) - (day * 24)
-					minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
-					second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
-				} else {
-					this.timeUp()
-				}
-				if (day < 10) {
-					day = '0' + day
-				}
-				if (hour < 10) {
-					hour = '0' + hour
-				}
-				if (minute < 10) {
-					minute = '0' + minute
-				}
-				if (second < 10) {
-					second = '0' + second
-				}
-				this.d = day
-				this.h = hour
-				this.i = minute
-				this.s = second
-			},
-			startData() {
-				this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
-				if (this.seconds <= 0) {
-					return
-				}
-				this.countDown()
-				this.timer = setInterval(() => {
-					this.seconds--
-					if (this.seconds < 0) {
-						this.timeUp()
-						return
-					}
-					this.countDown()
-				}, 1000)
-			},
-			changeFlag() {
-				if (!this.syncFlag) {
-					this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
-					this.startData();
-					this.syncFlag = true;
+		startData() {
+			this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second);
+			if (this.seconds <= 0) {
+				return;
+			}
+			this.countDown();
+			this.timer = setInterval(() => {
+				this.seconds--;
+				if (this.seconds < 0) {
+					this.timeUp();
+					return;
 				}
+				this.countDown();
+			}, 1000);
+		},
+		changeFlag() {
+			if (!this.syncFlag) {
+				this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second);
+				this.startData();
+				this.syncFlag = true;
 			}
 		}
 	}
+};
 </script>
 <style lang="scss" scoped>
-	@import '~@/uni.scss';
-	$countdown-height: 48rpx;
-	$countdown-width: 52rpx;
+@import '~@/uni.scss';
+$countdown-height: 48rpx;
+$countdown-width: 52rpx;
 
-	.uni-countdown {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		justify-content: flex-start;
-		padding: 2rpx 0;
-	}
+.uni-countdown {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+	justify-content: flex-start;
+	padding: 2rpx 0;
+}
 
-	.uni-countdown__splitor {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		justify-content: center;
-		line-height: $countdown-height;
-		padding: 5rpx;
-		font-size: $uni-font-size-sm;
-	}
+.uni-countdown__splitor {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	justify-content: center;
+	line-height: $countdown-height;
+	padding: 5rpx;
+	font-size: $uni-font-size-sm;
+}
 
-	.uni-countdown__number {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		justify-content: center;
-		align-items: center;
-		width: $countdown-width;
-		height: $countdown-height;
-		line-height: $countdown-height;
-		margin: 5rpx;
-		text-align: center;
-		font-size: $uni-font-size-sm;
-	}
+.uni-countdown__number {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	justify-content: center;
+	align-items: center;
+	width: $countdown-width;
+	height: $countdown-height;
+	line-height: $countdown-height;
+	margin: 5rpx;
+	text-align: center;
+	font-size: $uni-font-size-sm;
+	border-radius: 10rpx;
+}
 </style>

pages.json

@@ -210,7 +210,10 @@
 		{
 			"path": "pages/user/user",
 			"style": {
-				"navigationBarTitleText": "个人中心"
+				"navigationBarTitleText": "个人中心",
+				"app-plus": {
+					"titleNView": false
+				}
 			}
 		},
 		{

pages/hall/hallpay.vue

@@ -1,8 +1,415 @@
 <template>
+	<view class="center">
+		<view class="top">
+			<view class="top-main">
+				<view class="num">
+					￥
+					<text>1299.00</text>
+				</view>
+				<image class="top-image" src="../../static/img/copy.png" mode=""></image>
+			</view>
+			<view class="downtime">
+				<uni-countdowns
+					color="#FFFFFF"
+					splitor-color="#FD3B39"
+					background-color="#FD3B39"
+					border-color="#FD3B39"
+					:show-day="false"
+					:hour="stopTime.stopTimeH"
+					:minute="stopTime.stopTimeM"
+					:second="stopTime.stopTimeS"
+				></uni-countdowns>
+			</view>
+		</view>
+		<view class="product flex">
+			<image class="product-image" src="../../static/img/evening.png" mode=""></image>
+			<view class="product-info">
+				<view class="title">趣豆商城挂售礼盒</view>
+				<view class="title buyId">
+					<text>卖家ID：</text>
+					123456
+				</view>
+				<view class="title buyName">
+					<text>卖家昵称：</text>
+					李丹丹
+				</view>
+				<view class="title buyPhone">
+					<text>卖家手机号：</text>
+					123456897
+				</view>
+			</view>
+		</view>
+		<view class="main">
+			<view class="main-tip">请向以下账号自行转账（任选一种方式）</view>
+			<view class="main-title flex">
+				<view class="mt-item" @click="change('0')" :class="{ current: tabCurrentIndex === 0 }">
+					<image class="mt-image" :src="tabCurrentIndex == 0 ? '../../static/img/aliD.png' : '../../static/img/ali.png'" mode=""></image>
+					<view class="mt-font" :class="{ current: tabCurrentIndex === 0 }">支付宝</view>
+				</view>
+				<view class="mt-item" @click="change('1')" :class="{ current: tabCurrentIndex === 1 }">
+					<image class="mt-image1" :src="tabCurrentIndex == 1 ? '../../static/img/bankD.png' : '../../static/img/bank.png'" mode=""></image>
+					<view class="mt-font" :class="{ current: tabCurrentIndex === 1 }">银行卡</view>
+				</view>
+				<view class="mt-item" @click="change('2')" :class="{ current: tabCurrentIndex === 2 }">
+					<image class="mt-image2" :src="tabCurrentIndex == 2 ? '../../static/img/yueD.png' : '../../static/img/yue.png'" mode=""></image>
+					<view class="mt-font" :class="{ current: tabCurrentIndex === 2 }">余额</view>
+				</view>
+			</view>
+			<swiper class="swiper-box" :current="tabCurrentIndex" :duration="500" @change="changeTab" :style="{ height: tabCurrentIndex == 1 ? '450rpx' : '280rpx' }">
+				<swiper-item class="tab-content">
+					<view class="tc-item flex">
+						<view class="tcitem-name">支付宝号</view>
+						<view class="ali-name">152****4123</view>
+						<image class="tcitem-image" src="../../static/img/copy.png" mode=""></image>
+					</view>
+					<view class="tc-item flex">
+						<view class="tcitem-name">姓名</view>
+						<view class="ali-name">李丹丹</view>
+						<image class="tcitem-image" src="../../static/img/copy.png" mode=""></image>
+					</view>
+					<view class="tc-item flex">
+						<view class="tcitem-name">备注</view>
+						<image class="tcitem-image" src="../../static/img/copy.png" mode=""></image>
+					</view>
+				</swiper-item>
+				<swiper-item class="tab-content">
+					<view class="tc-item flex">
+						<view class="tcitem-name">姓名</view>
+						<view class="ali-name">李丹丹</view>
+						<image class="tcitem-image" src="../../static/img/copy.png" mode=""></image>
+					</view>
+					<view class="tc-item flex">
+						<view class="tcitem-name">银行</view>
+						<view class="ali-name">中国建设银行</view>
+						<image class="tcitem-image" src="../../static/img/copy.png" mode=""></image>
+					</view>
+					<view class="tc-item flex">
+						<view class="tcitem-name">开户行</view>
+						<view class="ali-name">椒江支行</view>
+						<image class="tcitem-image" src="../../static/img/copy.png" mode=""></image>
+					</view>
+					<view class="tc-item flex">
+						<view class="tcitem-name">账号</view>
+						<view class="ali-name">5123456798231564894561894</view>
+						<image class="tcitem-image" src="../../static/img/copy.png" mode=""></image>
+					</view>
+					<view class="tc-item flex">
+						<view class="tcitem-name">说明</view>
+						<view class="ali-name" style="color: #fd5452">请使用本人银行卡，否则无效</view>
+						<image class="tcitem-image" src="" mode=""></image>
+					</view>
+				</swiper-item>
+				<swiper-item class="tab-content">
+					<view class="tc-item flex">
+						<view class="tcitem-name">账号</view>
+						<view class="ali-name">152****4123</view>
+						<image class="tcitem-image" src="../../static/img/copy.png" mode=""></image>
+					</view>
+					<view class="tc-item flex">
+						<view class="tcitem-name">姓名</view>
+						<view class="ali-name">李丹丹</view>
+						<image class="tcitem-image" src="../../static/img/copy.png" mode=""></image>
+					</view>
+					<view class="tc-item flex">
+						<view class="tcitem-name">备注</view>
+						<image class="tcitem-image" src="../../static/img/copy.png" mode=""></image>
+					</view>
+				</swiper-item>
+			</swiper>
+		</view>
+		<view class="upload">
+			<view class="upload-title">上传支付截图</view>
+			<view class="upload-main">
+				<image class="upload-image" src="../../static/img/add.png" mode=""></image>
+				<view class="upload-font">点击上传支付截图</view>
+			</view>
+		</view>
+		<view class="bottom flex">
+			<view class="bottom-item">
+				<image class="bi-image" src="../../static/img/call.png" mode=""></image>
+				<view class="bottom-font">联系卖家
+</view>
+			</view>
+			<view class="shu"></view>
+			<view class="bottom-item">
+				<image class="bi-image" src="../../static/img/kf.png" mode=""></image>
+				<view class="bottom-font">联系客服</view>
+			</view>
+			<view class="btn" @click="nav('/pages/hall/hallpay')">立即购买</view>
+		</view>
+	</view>
 </template>
 
 <script>
+import uniCountdowns from '@/components/uni-countdown/uni-countdowns.vue';
+export default {
+	components: {
+		uniCountdowns
+	},
+	data() {
+		return {
+			// 倒计时
+			stopTime: {
+				stopTimeH: 1,
+				stopTimeM: 1,
+				stopTimeS: 1
+			},
+			tabCurrentIndex: 0
+		};
+	},
+	methods: {
+		open() {
+			this.$refs.popup.open();
+		},
+		close() {
+			this.$refs.popup.close();
+		},
+		nav(url) {
+			uni.navigateTo({
+				url
+			});
+		},
+		//swiper 切换
+		changeTab(e) {
+			this.tabCurrentIndex = e.target.current;
+		},
+		toBack() {
+			uni.navigateBack({});
+		},
+		change(num) {
+			this.tabCurrentIndex = num * 1;
+		}
+	}
+};
 </script>
 
-<style>
+<style lang="less">
+.center {
+	background: #f8f6f6;
+	min-height: 100%;
+	height: auto;
+}
+.top {
+	margin-top: 10rpx;
+	background-color: #ffffff;
+	padding: 56rpx 0;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	.top-main {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		line-height: 1;
+		.num {
+			font-size: 28rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #fd3b39;
+			text {
+				font-size: 50rpx;
+			}
+		}
+		.top-image {
+			margin-left: 10rpx;
+			width: 26rpx;
+			height: 28rpx;
+		}
+	}
+	.downtime {
+		margin-top: 20rpx;
+	}
+}
+.product {
+	margin-top: 20rpx;
+	padding: 35rpx 35rpx 40rpx 35rpx;
+	background-color: #ffffff;
+	justify-content: flex-start;
+	align-items: flex-start;
+	.product-image {
+		width: 210rpx;
+		height: 210rpx;
+		border-radius: 10rpx;
+	}
+	.product-info {
+		margin-left: 26rpx;
+		padding-top: 10rpx;
+		line-height: 1;
+		.title {
+			line-height: 1;
+			font-size: 30rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #333333;
+			text {
+				color: #999999;
+			}
+		}
+		.buyId {
+			margin-top: 30rpx;
+		}
+		.buyName {
+			margin-top: 24rpx;
+		}
+		.buyPhone {
+			margin-top: 24rpx;
+		}
+	}
+}
+.main {
+	margin-top: 20rpx;
+	padding: 30rpx 0 40rpx;
+	background: #ffffff;
+	.main-tip {
+		padding: 0 30rpx;
+		font-size: 30rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #999999;
+	}
+	.main-title {
+		padding: 0 30rpx;
+		margin-top: 34rpx;
+		.current {
+			background: #4166fc !important;
+			color: #ffffff !important;
+		}
+		.mt-item {
+			width: 160rpx;
+			height: 60rpx;
+			background: #f8f8f8;
+			border-radius: 10rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			.mt-image {
+				width: 32rpx;
+				height: 32rpx;
+			}
+			.mt-image1 {
+				width: 38rpx;
+				height: 32rpx;
+			}
+			.mt-image2 {
+				width: 36rpx;
+				height: 32rpx;
+			}
+			.mt-font {
+				margin-left: 10rpx;
+				font-size: 30rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #333333;
+			}
+		}
+	}
+	.swiper-box {
+		width: 100%;
+		padding: 14rpx 30rpx 0;
+		.tc-item {
+			padding: 50rpx 2rpx 0;
+			line-height: 1;
+			.tcitem-name {
+				width: 118rpx;
+				font-size: 30rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #999999;
+			}
+			.ali-name {
+				width: 380rpx;
+				font-size: 30rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #333333;
+			}
+			.tcitem-image {
+				width: 26rpx;
+				height: 28rpx;
+			}
+		}
+	}
+}
+.upload {
+	margin-top: 20rpx;
+	padding: 34rpx 30rpx 40rpx 30rpx;
+	background: #ffffff;
+	.upload-title {
+		font-size: 30rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #333333;
+	}
+	.upload-main {
+		padding-top: 32rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		.upload-image {
+			width: 160rpx;
+			height: 160rpx;
+			border-radius: 10rpx;
+		}
+		.upload-font {
+			margin-top: 24rpx;
+			font-size: 30rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #333333;
+		}
+	}
+}
+.bottom {
+	position: fixed;
+	bottom: 0;
+	background: #ffffff;
+	width: 750rpx;
+	height: 146rpx;
+	justify-content: flex-start;
+	.bottom-item {
+		margin-left: 30rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		.bi-image {
+			width: 38rpx;
+			height: 34rpx;
+		}
+		.bottom-font {
+			margin-top: 14rpx;
+			font-size: 24rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #333333;
+		}
+		.bottom-num {
+			line-height: 1;
+			font-size: 24rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #333333;
+		}
+	}
+	.shu {
+		margin-left: 20rpx;
+		width: 2px;
+		height: 74rpx;
+		background: #c0bfc0;
+	}
+	.btn {
+		margin-left: 40rpx;
+		width: 430rpx;
+		height: 80rpx;
+		background: #fd3b39;
+		border-radius: 20rpx;
+		text-align: center;
+		font-size: 34rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #ffffff;
+		line-height: 80rpx;
+	}
+}
 </style>

pages/hall/porducthall.vue

@@ -92,7 +92,7 @@
 				<view class="bottom-font">联系</view>
 				<view class="bottom-num">客服</view>
 			</view>
-			<view class="btn">立即购买</view>
+			<view class="btn" @click="nav('/pages/hall/hallpay')">立即购买</view>
 		</view>
 		<uni-popup ref="popupkf" type="center">
 			<view class="popup-box">

pages/money/money.vue

@@ -1,20 +1,95 @@
 <template>
 	<view class="center">
+		<view class="top">
+			<image class="top-bg" src="../../static/img/money-bg.png" mode=""></image>
+			<view class="top-font">现金余额（元）</view>
+			<view class="num">0.00</view>
+		</view>
+		<view class="navbar">
+			<view class="navbar-item">
+				<view class="navbar-font">
+					<image class="navbar-image" src="../../static/img/been.png" mode=""></image>
+					<view class="font">趣豆</view>
+				</view>
+				<view class="navbar-num">200</view>
+			</view>
+			<view class="navbar-item">
+				<view class="navbar-font">
+					<image class="navbar-image" src="../../static/img/been.png" mode=""></image>
+					<view class="font">趣豆</view>
+				</view>
+				<view class="navbar-num">200</view>
+			</view>
+			<view class="navbar-item">
+				<view class="navbar-font">
+					<image class="navbar-image" src="../../static/img/been.png" mode=""></image>
+					<view class="font">趣豆</view>
+				</view>
+				<view class="navbar-num">200</view>
+			</view>
+		</view>
 		<u-tabbar activeColor="#375AFE" v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
 	</view>
 </template>
 
 <script>
-import { tabbar } from '@/utils/tabbar.js'
+import { tabbar } from '@/utils/tabbar.js';
 export default {
 	data() {
 		return {
 			tabbar: tabbar,
-			current: 3,
-		}
+			current: 3
+		};
 	}
-}
+};
 </script>
 
-<style>
+<style lang="less">
+.center {
+	height: auto;
+	min-height: 100%;
+	background: #ffffff;
+}
+.top {
+	margin: 20rpx auto 0;
+	position: relative;
+	width: 700rpx;
+	height: 200rpx;
+	padding: 54rpx 40rpx;
+	.top-bg {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		width: 700rpx;
+		height: 200rpx;
+	}
+	.top-font {
+		position: relative;
+		z-index: 2;
+		font-size: 32rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #ffffff;
+		line-height: 1;
+	}
+	.num {
+		line-height: 1;
+		position: relative;
+		z-index: 2;
+		margin-top: 24rpx;
+		font-size: 48rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #ffffff;
+	}
+}
+.navbar {
+	width: 700rpx;
+	background: #FFFFFF;
+	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+	border-radius: 20rpx;
+	margin: 40rpx auto 0;
+	padding: 40rpx 0 50rpx;
+}
 </style>

pages/user/user.vue

@@ -3,6 +3,15 @@
 		<view class="vheigh"></view>
 		<view class="user-top">
 			<image src="../../static/img/user-bg.png" mode="" class="user-top-bg"></image>
+			<view class="user-info" @click="navTo('/pages/set/set')">
+				<image class="avtar" :src="userInfo.avatar" mode=""></image>
+				<view class="name">{{ userInfo.nickname }}</view>
+				<view class="phone">{{ userInfo.phone }}</view>
+				<view class="vip">
+					<image class="vip-bg" src="../../static/img/vip.png" mode=""></image>
+					<view class="vip-title">草民</view>
+				</view>
+			</view>
 			<view class="sy-box flex">
 				<view class="sy-item">
 					<view class="sy-item-val">
@@ -98,7 +107,7 @@
 				<image src="../../static/img/Close.png"></image>
 			</view> -->
 		</uni-popup>
-		<u-tabbar v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
+		<u-tabbar activeColor="#375AFE" v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
 	</view>
 </template>
 <script>
@@ -132,9 +141,11 @@
 				qded: false, //是否已签到
 				tabbar: tabbar,
 				current: 4,
-				coverTransform: 'translateY(0px)',
-				coverTransition: '0s',
-				moving: false,
+				text:'',//客服微信
+				today_integral:'',//签到获得的数值
+				today_type:'',//签到获得的数值单位
+				tom_integral: '',//明天签到获得的数值
+				tom_type: '',//签到获得的数值单位
 				userDowm: 0, //卡片升级专属高度
 				userMaxDowm: 0, //卡片最高高度
 				toolList: [{
@@ -282,49 +293,6 @@
 			useTool(e) {
 				this.navTo(e.path)
 			},
-			/**
-			 *  会员卡下拉和回弹
-			 *  1.关闭bounce避免ios端下拉冲突
-			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
-			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
-			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
-			 */
-			coverTouchstart(e) {
-				// console.log(e);
-				if (pageAtTop === false) {
-					return;
-				}
-
-				this.coverTransition = 'transform .1s linear';
-				startY = e.touches[0].clientY;
-			},
-			coverTouchmove(e) {
-				// console.log(e);
-				moveY = e.touches[0].clientY;
-				let moveDistance = moveY - startY;
-				let maxDowm = this.userMaxDowm;
-				let Dowm = this.userDowm;
-				if (moveDistance < 0) {
-					this.moving = false;
-					return;
-				}
-				this.moving = true;
-				if (moveDistance >= Dowm && moveDistance < maxDowm) {
-					moveDistance = Dowm;
-				}
-
-				if (moveDistance > 0 && moveDistance <= Dowm) {
-					this.coverTransform = `translateY(${moveDistance}px)`;
-				}
-			},
-			coverTouchend() {
-				if (this.moving === false) {
-					return;
-				}
-				this.moving = false;
-				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
-				this.coverTransform = 'translateY(0px)';
-			},
 			// 签到弹窗
 			goQd() {
 				this.$refs.popupqd.open()
@@ -631,7 +599,59 @@
 			// width: 100%;
 			// position: absolute;
 		}
-
+		.user-info {
+			width: 750rpx;
+			position: absolute;
+			top: 66rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			.avtar {
+				width: 134rpx;
+				height: 134rpx;
+				border-radius: 50%;
+			}
+			.name {
+				margin-top: 20rpx;
+				font-size: 32rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #FFFFFF;
+			}
+			.phone {
+				margin-top: 13rpx;
+				font-size: 30rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #FFFFFF;
+			}
+			.vip {
+				margin-top: 20rpx;
+				position: relative;
+				width: 120rpx;
+				height: 40rpx;
+				.vip-bg {
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					width: 100%;
+					height: 100%;
+				}
+				.vip-title {
+					width: 120rpx;
+					line-height: 40rpx;
+					text-align: center;
+					position: relative;
+					z-index: 10;
+					font-size: 20rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #93794b;
+				}
+			}
+		}
 		.sy-box {
 			position: absolute;
 			bottom: 105rpx;
@@ -688,7 +708,7 @@
 			height: 80rpx;
 			line-height: 80rpx;
 			border-radius: 20px;
-			background: linear-gradient(-41deg, rgba(60, 237, 237, 0.99), #04B8FF, #375AFE);
+			background: #DC262B;
 			border-radius: 20rpx;
 			text-align: center;
 			font-size: 32rpx;
@@ -904,4 +924,4 @@
 			color: #ffffff;
 		}
 	}
-</style>
+</style>