Merge branch 'master' of http://git.liuniu946.com/hwq/newyqg

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
+				}
 			}
 		},
 		{
@@ -252,6 +255,18 @@
 			"style": {
 				"navigationBarTitleText": "积分明细"
 			}
+		},
+		{
+			"path": "pages/user/xrtd",
+			"style": {
+				"navigationBarTitleText": "新人通道"
+			}
+		},
+		{
+			"path": "pages/user/sqjl",
+			"style": {
+				"navigationBarTitleText": "申请记录"
+			}
 		},
 		{
 			"path": "pages/order/order",
@@ -287,6 +302,12 @@
 				}
 			}
 		},
+		{
+			"path": "pages/hall/hallpay",
+			"style": {
+				"navigationBarTitleText": "支付"
+			}
+		},
 		{
 			"path": "pages/order/evaluate",
 			"style": {
@@ -405,6 +426,12 @@
 				}
 			}
 		},
+		{
+			"path": "pages/hall/history",
+			"style": {
+				"navigationBarTitleText": "场次详情"
+			}
+		},
 		{
 			"path": "pages/money/money",
 			"style": {

pages/hall/hallpay.vue

@@ -0,0 +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 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/history.vue

@@ -0,0 +1,133 @@
+<template>
+	<view class="center">
+		<view class="product">
+			<image class="product-image" src="../../static/img/afternoon.png" mode=""></image>
+			<view class="product-font font1">趣豆商城挂售礼盒</view>
+			<view class="product-font font2">艺术家：李丹丹</view>
+			<view class="product-font font2">创作时间：2022年01月30日</view>
+		</view>
+		<view class="main">
+			<view class="main-item">
+				<view class="main-left">日期</view>
+				<view class="main-right">归属人</view>
+			</view>
+			<view class="main-item">
+				<view class="main-left">2022年01月20日</view>
+				<view class="main-right">林兰</view>
+			</view>
+			<view class="main-item">
+				<view class="main-left">2022年01月20日</view>
+				<view class="main-right">林兰</view>
+			</view>
+			<view class="main-item">
+				<view class="main-left">2022年01月20日</view>
+				<view class="main-right">林兰</view>
+			</view>
+			<view class="main-item">
+				<view class="main-left">2022年01月20日</view>
+				<view class="main-right">林兰</view>
+			</view>
+		</view>
+		<view class="ma">
+			<view class="ma-main">
+				
+			</view>
+			<view class="ma-font">
+				溯源二维码
+			</view>
+		</view>
+	</view>
+</template>
+
+<script></script>
+
+<style lang="scss">
+.center {
+	background: #f8f8f8;
+	height: auto;
+	min-height: 100%;
+}
+.product {
+	width: 670rpx;
+	padding: 44rpx 0 40rpx 0;
+	background: #ffffff;
+	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+	border-radius: 20rpx;
+	margin: 34rpx auto 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	.product-image {
+		width: 300rpx;
+		height: 300rpx;
+		border-radius: 20rpx;
+	}
+	.product-font {
+		font-size: 30rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #1d2023;
+	}
+	.font1 {
+		margin-top: 34rpx;
+	}
+	.font2 {
+		margin-top: 44rpx;
+	}
+}
+.main {
+	width: 670rpx;
+	background: #ffffff;
+	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+	border-radius: 20rpx;
+	margin: 30rpx auto 0;
+	.main-item:first-child {
+		border-top: none;
+	}
+	.main-item {
+		padding: 2rpx 20rpx;
+		display: flex;
+		align-items: center;
+		height: 104rpx;
+		border-top: 1px solid #dddddd;
+		.main-left {
+			width: 50%;
+			text-align: center;
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #1d2023;
+		}
+		.main-right {
+			width: 50%;
+			text-align: center;
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #1d2023;
+		}
+	}
+}
+.ma {
+	width: 670rpx;
+	padding: 46rpx 0;
+	background: #FFFFFF;
+	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+	border-radius: 20rpx;
+	margin: 30rpx auto 0;
+	.ma-main {
+		width: 300rpx;
+		height: 300rpx;
+		margin: 0 auto;
+		background: #000;
+	}
+	.ma-font {
+		font-size: 30rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #1D2023;
+		margin-top: 34rpx;
+		text-align: center;
+	}
+}
+</style>

pages/hall/porducthall.vue

@@ -27,7 +27,7 @@
 					<image class="tmr-image" src="../../static/img/shua.png" mode=""></image>
 					<view class="tmr-font">刷新倒计时</view>
 				</view>
-				<view class="tmr-item">
+				<view class="tmr-item" @click="nav('/pages/hall/history')">
 					<image class="tmr-image1" src="../../static/img/yuan.png" mode=""></image>
 					<view class="tmr-font">溯源</view>
 				</view>
@@ -87,22 +87,54 @@
 				<view class="bottom-num">200</view>
 			</view>
 			<view class="shu"></view>
-			<view class="bottom-item">
+			<view class="bottom-item" @click="openKf()">
 				<image class="bi-image" src="../../static/img/kf.png" mode=""></image>
 				<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">
+				<view class="img"><image src="../../static/img/img009.png" mode=""></image></view>
+				<view class="mian">
+					<view class="delivery">
+						<view class="title">已经为您定制专属客服</view>
+						<image src="../../static/img/img010.png" mode=""></image>
+					</view>
+					<view class="nocancel">客服VX:{{ text }}</view>
+					<view class="comfirm-box">
+						<view class="cancel" @click="cancel">取消</view>
+						<view class="comfirm" @click="comfirm(text)">复制微信</view>
+					</view>
+				</view>
+			</view>
+		</uni-popup>
 	</view>
 </template>
 
 <script>
 export default {
 	data() {
-		return {};
+		return {
+			text:'123456',
+		};
 	},
-	methods: {}
+	methods: {
+		// 打开客服
+		openKf() {
+			this.$refs.popupkf.open();
+		},
+		// 关闭客服
+		cancel() {
+			this.$refs.popupkf.close();
+		},
+		nav(url) {
+			uni.navigateTo({
+				url
+			})
+		}
+	}
 };
 </script>
 
@@ -355,4 +387,94 @@ export default {
 		line-height: 80rpx;
 	}
 }
+.popup-box {
+	width: 522rpx;
+	height: 605rpx;
+	background-color: #ffffff;
+	border-radius: 20rpx;
+	position: relative;
+
+	.img {
+		position: relative;
+		top: -56rpx;
+		left: 0;
+		width: 522rpx;
+		height: 132rpx;
+		display: flex;
+		justify-content: center;
+
+		image {
+			border-radius: 20rpx 20rpx 0 0;
+			width: 450rpx;
+			height: 132rpx;
+		}
+	}
+
+	.mian {
+		margin-top: -44rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		// padding: 32rpx 32rpx;
+		background-color: #ffffff;
+		border-radius: 0 0 20rpx 20rpx;
+		text-align: center;
+
+		.delivery {
+			font-size: 40rpx;
+			color: #333333;
+			display: flex;
+			align-items: center;
+			flex-direction: column;
+
+			.title {
+			}
+
+			image {
+				margin-top: 48rpx;
+				width: 172rpx;
+				height: 160rpx;
+			}
+		}
+
+		.nocancel {
+			font-size: 32rpx;
+			color: #333333;
+			margin-top: 14rpx;
+		}
+
+		.comfirm-box {
+			margin-top: 52rpx;
+			display: flex;
+			// margin-bottom: 32rpx;
+
+			// justify-content: space-around;
+			.cancel {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 197rpx;
+				height: 74rpx;
+				border: 1px solid #dcc786;
+				border-radius: 38rpx;
+
+				font-size: 32rpx;
+				color: #605128;
+			}
+
+			.comfirm {
+				margin-left: 32rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 197rpx;
+				height: 74rpx;
+				background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
+				border-radius: 38px;
+				font-size: 32rpx;
+				color: #605128;
+			}
+		}
+	}
+}
 </style>

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/myfans.vue

@@ -0,0 +1,29 @@
+<template>
+	<view class="content">
+		<view class="top-fan">
+			
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+		
+	}
+</script>
+
+<style lang="scss" scoped>
+	.top-fan {
+		width: 750rpx;
+		height: 336rpx;
+		background: linear-gradient(-41deg, rgba(60, 237, 237, 0.99), #04B8FF, #375AFE);
+	}
+</style>

pages/user/sqjl.vue

@@ -0,0 +1,142 @@
+<template>
+	<view class="content">
+		<view v-for="(item, index) in list" :key="index" class="order-item flex">
+			<view class="title-box flex_item">
+				<view class="title-avatar">
+					<image src="../../static/icon/sh-log.png"></image>
+				</view>
+				<view class="list_tpl">
+					<view class="title">
+						<view class="title-name ">我的好强儿</view>
+					</view>
+					<view class="time">
+						<text>2020-12-12</text>
+					</view>
+				</view>
+				<view class="money">
+					<text>未通过</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: 10
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		background-color: #fff;
+	}
+
+	.sq-item {
+		height: 118rpx;
+		border-top: 1px solid #F0F0F0;
+		width: 690rpx;
+		margin: auto;
+
+		&:first-of-type {
+			border-top: none;
+		}
+
+	}
+
+	.order-item {
+		padding: 20rpx 30rpx;
+		line-height: 1.5;
+		height: 118rpx;
+		border-top: 1px solid #F0F0F0;
+		width: 690rpx;
+		margin: auto;
+
+		&:first-of-type {
+			border-top: none;
+		}
+
+		.title-box {
+			width: 100%;
+
+			.title-avatar {
+				flex-shrink: 0;
+				width: 55rpx;
+				height: 55rpx;
+				margin-right: 25rpx;
+				border-radius: 100%;
+
+				image {
+					width: 100%;
+					height: 100%;
+					border-radius: 100%;
+				}
+			}
+
+			.list_tpl {
+				width: 85%;
+
+				.title {
+					display: flex;
+					justify-content: flex-start;
+					font-size: $font-lg;
+					color: $font-color-base;
+					overflow: hidden; //超出的文本隐藏
+					text-overflow: ellipsis; //溢出用省略号显示
+					white-space: nowrap;
+					line-height: 1;
+					text-align: center;
+
+					.title-name {
+						max-width: 40%;
+					}
+
+					.dl {
+						margin-left: 10rpx;
+						width: 93rpx;
+						height: 32rpx;
+						border-radius: 16rpx;
+
+						image {
+							width: 93rpx;
+							height: 32rpx;
+							border-radius: 16rpx;
+						}
+					}
+
+					.class {
+						display: inline-block;
+						margin-left: 10rpx;
+						padding: 6rpx;
+						text-align: center;
+						border: 1px solid #2e58ff;
+						border-radius: 16rpx;
+						font-size: 20rpx;
+						font-family: PingFang SC;
+						font-weight: 500;
+						color: #2e58ff;
+					}
+				}
+
+				.time {
+					font-size: $font-base;
+					color: $font-color-light;
+				}
+			}
+		}
+
+		.money {
+			width: 50%;
+			text-align: right;
+			color: #333;
+			font-size: $font-lg;
+		}
+	}
+</style>

pages/user/user.vue

@@ -1,904 +1,927 @@
-<template>
-	<view class="container">
-		<view class="vheigh"></view>
-		<view class="user-top">
-			<image src="../../static/img/user-bg.png" mode="" class="user-top-bg"></image>
-			<view class="sy-box flex">
-				<view class="sy-item">
-					<view class="sy-item-val">
-						0
-					</view>
-					<view class="sy-item-name">
-						挂售收益
-					</view>
-				</view>
-				<view class="jg"></view>
-				<view class="sy-item">
-					<view class="sy-item-val">
-						0
-					</view>
-					<view class="sy-item-name">
-						我的奖金
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="qd-box flex">
-			<image src="../../static/icon/uqd.png" mode=""></image>
-			<view class="qd-info">
-				<view class="" style="font-weight: bold;color: #0C1732;">签到领取积分</view>
-				<view class="">已连续签到0天</view>
-				<view class="">今日签到奖励0积分</view>
-			</view>
-			<view class="qd-btn" :class="{'qded': qded}" @click="qded?'':goQd()">
-				{{qded?'已签到': '立即签到'}}
-			</view>
-		</view>
-		<view class="tool-box flex">
-			<view class="tool-item flex" v-for="itemt in toolList" :key="itemt.id" @click="useTool(itemt)">
-				<view class="tool-item-img">
-					<image :src="itemt.img" mode="widthFix" :style="{'width':itemt.width,'height': itemt.height}"
-						class="tool-logo"></image>
-				</view>
-				<view class="tool-item-name">
-					{{itemt.name}}
-				</view>
-			</view>
-		</view>
-		<uni-list class="tool-list">
-			<uni-list-item title="收款信息" @click="navTo('/pages/money/wallet')" thumb="/static/icon/skxx.png">
-			</uni-list-item>
-			<uni-list-item title="实名认证" @click="navTo('/pages/user/coupon')" thumb="/static/icon/bdsj.png">
-			</uni-list-item>
-			<uni-list-item title="收货地址" @click="navTo('/pages/user/favorites')" thumb="/static/icon/shdz.png">
-			</uni-list-item>
-			<uni-list-item title="客服" @click="openKf()" thumb="/static/icon/kf.png">
-			</uni-list-item>
-			<uni-list-item title="设置" @click="navTo('/pages/user/shareQrCode')" thumb="/static/icon/uset.png">
-			</uni-list-item>
-			<!-- <uni-list-item title="关于我们" @click="navTo('/pages/shareQrCode/index')" thumb="/static/icon/img09.png"> -->
-			</uni-list-item>
-		</uni-list>
-		<uni-popup ref="popupkf" type="center">
-			<view class="popup-box">
-				<view class="img">
-					<image src="../../static/img/img009.png" mode=""></image>
-				</view>
-				<view class="mian">
-					<view class="delivery">
-						<view class="title">已经为您定制专属客服</view>
-						<image src="../../static/img/img010.png" mode=""></image>
-					</view>
-					<view class="nocancel">客服VX:{{ text }}</view>
-					<view class="comfirm-box">
-						<view class="cancel" @click="cancel">取消</view>
-						<view class="comfirm" @click="comfirm(text)">复制微信</view>
-					</view>
-				</view>
-			</view>
-		</uni-popup>
-		<uni-popup ref="popupqd" type="center">
-			<view class="popup">
-				<view class="popup-dox">
-					<image class="popup-logo" src="../../static/img/sign-popup.png"></image>
-				</view>
-				<view class="popup-title">
-					获得
-					<text>{{ today_integral }}</text>
-					{{today_type}}
-				</view>
-				<view class="popup-tip">
-					明天签到可得
-					<text>{{ tom_integral }}</text>
-					{{tom_type}}
-				</view>
-				<view class="popup-btn" @click="closeQd">知道了</view>
-			</view>
-			<!-- <view class="close_icon" @click="close">
-				<image src="../../static/img/Close.png"></image>
-			</view> -->
-		</uni-popup>
-		<u-tabbar v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
-	</view>
-</template>
-<script>
-	import {
-		mapState,
-		mapMutations
-	} from 'vuex';
-	import uniList from '@/components/uni-list/uni-list.vue';
-	import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
-	import {
-		orderData,
-		getUserInfo
-	} from '@/api/user.js';
-	import {
-		saveUrl,
-		interceptor
-	} from '@/utils/loginUtils.js';
-	import {
-		tabbar
-	} from '@/utils/tabbar.js'
-	let startY = 0,
-		moveY = 0,
-		pageAtTop = true;
-	export default {
-		components: {
-			uniList,
-			uniListItem
-		},
-		data() {
-			return {
-				qded: false, //是否已签到
-				tabbar: tabbar,
-				current: 4,
-				coverTransform: 'translateY(0px)',
-				coverTransition: '0s',
-				moving: false,
-				userDowm: 0, //卡片升级专属高度
-				userMaxDowm: 0, //卡片最高高度
-				toolList: [{
-						id: 't1',
-						name: '新人通道',
-						width: '56rpx',
-						heigt: '54rpx',
-						img: '../../static/icon/tool-1.png',
-						path: ''
-					},
-					{
-						id: 't2',
-						name: '邀请好友',
-						width: '56rpx',
-						heigt: '57rpx',
-						img: '../../static/icon/tool-2.png',
-						path: '/pages/user/shareQrCode'
-					},
-					{
-						id: 't3',
-						name: '我的粉丝',
-						width: '68rpx',
-						heigt: '53rpx',
-						img: '../../static/icon/tool-3.png',
-						path: ''
-					},
-					{
-						id: 't4',
-						name: '我的订单',
-						width: '55rpx',
-						heigt: '54rpx',
-						img: '../../static/icon/tool-4.png',
-						path: '/pages/order/order'
-					},
-					{
-						id: 't5',
-						name: '我的商品',
-						width: '50rpx',
-						heigt: '58rpx',
-						img: '../../static/icon/tool-5.png',
-						path: ''
-					},
-					{
-						id: 't6',
-						name: '馆长申请',
-						width: '59rpx',
-						heigt: '56rpx',
-						img: '../../static/icon/tool-6.png',
-						path: ''
-					}
-				]
-			};
-		},
-		onShow() {
-			// 判断是否已经登录
-			if (this.hasLogin) {
-				this.loadBaseData();
-			}
-		},
-		onReady() {
-			// 初始化获取页面宽度
-			uni.createSelectorQuery()
-				.select('.container')
-				.fields({
-						size: true
-					},
-					data => {
-						// 计算最多下拉的高度
-						this.userDowm = Math.floor((data.width / 750) * 185);
-						// 计算最大触发修改高度事件
-						this.userMaxDowm = Math.floor((data.width / 750) * 250);
-					}
-				)
-				.exec();
-		},
-		// #ifndef MP
-		// onNavigationBarButtonTap(e) {
-		// 	const index = e.index;
-		// 	if (index === 0) {
-		// 		this.navTo('/pages/set/set');
-		// 	} else if (index === 1) {
-		// 		// #ifdef APP-PLUS
-		// 		const pages = getCurrentPages();
-		// 		const page = pages[pages.length - 1];
-		// 		const currentWebview = page.$getAppWebview();
-		// 		currentWebview.hideTitleNViewButtonRedDot({
-		// 			index
-		// 		});
-		// 		// #endif
-		// 		uni.navigateTo({
-		// 			url: '/pages/user/notice'
-		// 		});
-		// 	}
-		// },
-		// #endif
-		computed: {
-			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
-		},
-		methods: {
-			...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
-			// 加载初始数据
-			loadBaseData() {
-				getUserInfo({})
-					.then(({
-						data
-					}) => {
-						this.setUserInfo(data);
-						// 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
-						orderData({})
-							.then(({
-								data
-							}) => {
-								this.setOrderInfo(data);
-							})
-							.catch(e => {
-								this.setOrderInfo({
-									complete_count: 0, //完成
-									received_count: 0, //待收货
-									unshipped_count: 0, //待发货
-									order_count: 0, //订单总数
-									unpaid_count: 0 //待付款
-								});
-							});
-					})
-					.catch(e => {
-						console.log(e);
-					});
-			},
-			/**
-			 * 统一跳转接口,拦截未登录路由
-			 * navigator标签现在默认没有转场动画，所以用view
-			 */
-			navTo(url) {
-				if (!this.hasLogin) {
-					// 保存地址
-					saveUrl();
-					// 登录拦截
-					interceptor();
-				} else {
-					uni.navigateTo({
-						url
-					});
-				}
-			},
-			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()
-				this.qded = true
-			},
-			// 关闭签到弹窗
-			closeQd() {
-				this.$refs.popupqd.close()
-			},
-			// 打开客服
-			openKf() {
-				this.$refs.popupkf.open()
-			},
-			// 关闭客服
-			cancel() {
-				this.$refs.popupkf.close()
-			},
-		}
-	};
-</script>
-<style lang="scss">
-	page {
-		height: 100%;
-	}
-
-	%flex-center {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-	}
-
-	%section {
-		display: flex;
-		justify-content: space-around;
-		align-content: center;
-		background: #fff;
-		border-radius: 10rpx;
-	}
-
-	.container {
-		height: 100%;
-		background-color: $page-color-base;
-	}
-
-	.content-box {
-		height: 100%;
-	}
-
-	.vheigh {
-		height: var(--status-bar-height);
-		background-color: $base-color;
-	}
-
-	.user-section {
-		height: 435rpx;
-		padding: 15rpx 30rpx 0;
-		position: relative;
-
-		.bg {
-			position: absolute;
-			left: 0;
-			top: 0;
-			width: 100%;
-			height: 100%;
-			background-color: $base-color;
-		}
-	}
-
-	.user-info-box {
-		height: 180rpx;
-		color: white;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		position: relative;
-		z-index: 1;
-
-		.detail {
-			height: 130rpx;
-
-			.portrait-box {
-				height: 100%;
-
-				.portrait {
-					width: 130rpx;
-					height: 100%;
-					border: 5rpx solid #fff;
-					border-radius: 50%;
-				}
-			}
-
-			.info-box {
-				margin-left: 20rpx;
-				line-height: 1.5;
-
-				.username {
-					font-size: $font-lg + 6rpx;
-					height: 100%;
-				}
-			}
-		}
-
-		.config {
-			font-size: 48rpx;
-			height: 130rpx;
-
-			.setting {
-				margin-right: 51rpx;
-			}
-		}
-	}
-
-	.vip-card-box {
-		display: flex;
-		flex-direction: column;
-		color: #f7d680;
-		height: 240rpx;
-		background: linear-gradient(left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
-		border-radius: 16rpx 16rpx 0 0;
-		overflow: hidden;
-		position: relative;
-		padding: 20rpx 24rpx;
-
-		.card-bg {
-			position: absolute;
-			top: 20rpx;
-			right: 0;
-			width: 380rpx;
-			height: 260rpx;
-		}
-
-		.b-btn {
-			position: absolute;
-			right: 20rpx;
-			top: 16rpx;
-			width: 132rpx;
-			height: 40rpx;
-			text-align: center;
-			line-height: 40rpx;
-			font-size: 22rpx;
-			color: #36343c;
-			border-radius: 20px;
-			background: linear-gradient(left, #f9e6af, #ffd465);
-			z-index: 1;
-		}
-
-		.tit {
-			font-size: $font-base + 2rpx;
-			color: #f7d680;
-			margin-bottom: 28rpx;
-
-			.iconfont {
-				color: #f6e5a3;
-				margin-right: 16rpx;
-			}
-		}
-
-		.e-b {
-			font-size: $font-sm;
-			color: #d8cba9;
-			margin-top: 10rpx;
-		}
-	}
-
-	.cover-container {
-		background: $page-color-base;
-		margin-top: -150rpx;
-		padding: 0 30rpx;
-		position: relative;
-		background: #f5f5f5;
-		padding-bottom: 20rpx;
-
-		.arc {
-			position: absolute;
-			left: 0;
-			top: -34rpx;
-			width: 100%;
-			height: 36rpx;
-		}
-	}
-
-	.tj-sction {
-		@extend %section;
-
-		.tj-item {
-			@extend %flex-center;
-			flex-direction: column;
-			height: 140rpx;
-			font-size: $font-sm;
-			color: #75787d;
-		}
-
-		.num {
-			font-size: $font-lg;
-			color: $font-color-dark;
-			margin-bottom: 8rpx;
-		}
-	}
-
-	.item-box {
-		border-radius: 10rpx;
-		background-color: white;
-		margin-top: 20rpx;
-
-		.box-title {
-			line-height: 1;
-			padding: 30rpx;
-
-			.title {
-				font-size: $font-lg;
-				font-weight: bold;
-			}
-
-			.link {
-				font-size: $font-base - 2rpx;
-				color: $font-color-light;
-			}
-		}
-
-		.order-section {
-			@extend %section;
-			padding: 28rpx 0;
-
-			.order-item {
-				@extend %flex-center;
-				width: 120rpx;
-				height: 120rpx;
-				border-radius: 10rpx;
-				font-size: $font-sm;
-				color: $font-color-dark;
-			}
-
-			.iconfont {
-				font-size: 48rpx;
-				margin-bottom: 18rpx;
-				color: #fa436a;
-			}
-
-			.icon-shouhoutuikuan {
-				font-size: 44rpx;
-			}
-
-			.icon {
-				height: 50rpx;
-				width: 48rpx;
-				margin-bottom: 18rpx;
-				background-size: 100%;
-				background-repeat: no-repeat;
-				background-position: center;
-
-				.icon-img {
-					width: 100%;
-					height: 100%;
-				}
-			}
-		}
-	}
-
-	.history-section {
-		// padding: 30rpx 0 0;
-		margin-top: 20rpx;
-		background: #fff;
-		border-radius: 10rpx;
-
-		.sec-header {
-			display: flex;
-			align-items: center;
-			font-size: $font-base;
-			color: $font-color-dark;
-			line-height: 40rpx;
-			margin-left: 30rpx;
-			padding-top: 30rpx;
-
-			.iconfont {
-				font-size: 44rpx;
-				color: $color-red;
-				margin-right: 16rpx;
-				line-height: 40rpx;
-			}
-		}
-
-		.h-list {
-			white-space: nowrap;
-			padding: 30rpx 30rpx 0;
-
-			.h-list-image {
-				display: inline-block;
-				width: 160rpx;
-				height: 160rpx;
-				margin-right: 20rpx;
-				border-radius: 10rpx;
-			}
-		}
-	}
-
-	.user-top {
-		height: 660rpx;
-		position: relative;
-
-		.user-top-bg {
-			width: 750rpx;
-			height: 660rpx;
-			// width: 100%;
-			// position: absolute;
-		}
-
-		.sy-box {
-			position: absolute;
-			bottom: 105rpx;
-			height: 148rpx;
-			width: 750rpx;
-			// background-color: #bfa;
-			.sy-item {
-				flex-grow: 1;
-				text-align: center;
-				font-size: 28rpx;
-				font-family: PingFang SC;
-				font-weight: 500;
-				color: #FFFFFF;
-			}
-			.jg {
-				width: 2rpx;
-				height: 68rpx;
-				background-color: #fff;
-			}
-		}
-	}
-
-	.qd-box {
-		width: 690rpx;
-		height: 210rpx;
-		background: #FFFFFF;
-		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
-		border-radius: 20rpx;
-		margin: -105rpx auto 30rpx;
-		position: relative;
-		padding: 0 40rpx;
-		font-size: 26rpx;
-		font-family: PingFang SC;
-		font-weight: 500;
-		color: #666666;
-
-		image {
-			flex-shrink: 0;
-			width: 65rpx;
-			height: 68rpx;
-		}
-
-		.qd-info {
-			flex-grow: 1;
-			padding-left: 24rpx;
-			line-height: 46rpx;
-		}
-
-		.qd-btn {
-			width: 190rpx;
-			height: 80rpx;
-			line-height: 80rpx;
-			border-radius: 20px;
-			background: linear-gradient(-41deg, rgba(60, 237, 237, 0.99), #04B8FF, #375AFE);
-			border-radius: 20rpx;
-			text-align: center;
-			font-size: 32rpx;
-			font-family: PingFang SC;
-			font-weight: 500;
-			color: #FFFFFF;
-		}
-
-		.qded {
-			background: #E8E8E8;
-			color: #999999;
-		}
-	}
-
-	.tool-box {
-		padding: 60rpx 0 0;
-		width: 690rpx;
-		background: #FFFFFF;
-		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
-		border-radius: 20rpx;
-		margin: 30rpx auto;
-		flex-wrap: wrap;
-		justify-content: flex-start;
-		align-content: space-around;
-
-		.tool-item {
-			width: 25%;
-			height: 120rpx;
-			flex-shrink: 0;
-			margin-bottom: 60rpx;
-			flex-direction: column;
-			align-content: space-between;
-			justify-content: center;
-			font-size: 28rpx;
-			font-family: PingFang SC;
-			font-weight: 500;
-			color: #0C1732;
-
-			.tool-item-img {
-				width: 68rpx;
-				height: 90rpx;
-				position: relative;
-				flex-shrink: 0;
-
-				.tool-logo {
-					position: absolute;
-					top: 0;
-					left: 0;
-					bottom: 0;
-					right: 0;
-					margin: auto;
-				}
-			}
-
-			.tool-item-name {
-				display: inline-block;
-			}
-		}
-	}
-
-	.tool-list {
-		width: 690rpx;
-		margin: auto;
-		background: #FFFFFF;
-		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
-		border-radius: 20rpx;
-	}
-
-	.popup-box {
-		width: 522rpx;
-		height: 605rpx;
-		background-color: #ffffff;
-		border-radius: 20rpx;
-		position: relative;
-
-		.img {
-			position: relative;
-			top: -56rpx;
-			left: 0;
-			width: 522rpx;
-			height: 132rpx;
-			display: flex;
-			justify-content: center;
-
-			image {
-				border-radius: 20rpx 20rpx 0 0;
-				width: 450rpx;
-				height: 132rpx;
-			}
-		}
-
-		.mian {
-			margin-top: -44rpx;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			// padding: 32rpx 32rpx;
-			background-color: #ffffff;
-			border-radius: 0 0 20rpx 20rpx;
-			text-align: center;
-
-			.delivery {
-				font-size: 40rpx;
-				color: #333333;
-				display: flex;
-				align-items: center;
-				flex-direction: column;
-
-				.title {}
-
-				image {
-					margin-top: 48rpx;
-					width: 172rpx;
-					height: 160rpx;
-				}
-			}
-
-			.nocancel {
-				font-size: 32rpx;
-				color: #333333;
-				margin-top: 14rpx;
-			}
-
-			.comfirm-box {
-				margin-top: 52rpx;
-				display: flex;
-				// margin-bottom: 32rpx;
-
-				// justify-content: space-around;
-				.cancel {
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					width: 197rpx;
-					height: 74rpx;
-					border: 1px solid #dcc786;
-					border-radius: 38rpx;
-
-					font-size: 32rpx;
-					color: #605128;
-				}
-
-				.comfirm {
-					margin-left: 32rpx;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					width: 197rpx;
-					height: 74rpx;
-					background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
-					border-radius: 38px;
-					font-size: 32rpx;
-					color: #605128;
-				}
-			}
-		}
-	}
-
-	.popup {
-		width: 560rpx;
-		padding-bottom: 45rpx;
-		background-color: #ffffff;
-		border-radius: 15rpx;
-		text-align: center;
-		line-height: 1;
-
-		.popup-dox {
-			position: relative;
-
-			.popup-logo {
-				margin: -160rpx auto 0;
-				width: 400rpx;
-				height: 200rpx;
-			}
-		}
-
-		.popup-title {
-			margin-top: 85rpx;
-			font-size: 40rpx;
-			font-family: PingFang SC;
-			font-weight: bold;
-			color: #2a2a2a;
-
-			text {
-				font-size: 56rpx;
-				color: #e83f30;
-			}
-		}
-
-		.popup-tip {
-			margin-top: 20rpx;
-			font-size: 28rpx;
-			font-family: PingFang SC;
-			font-weight: 500;
-			color: #8c8c8c;
-
-			text {
-				color: #e83f30;
-			}
-		}
-
-		.popup-btn {
-			margin: 58rpx auto 0;
-			width: 270rpx;
-			height: 66rpx;
-			background: #f0c838;
-			border-radius: 34rpx;
-			text-align: center;
-			line-height: 66rpx;
-			font-size: 36rpx;
-			font-family: Source Han Sans CN;
-			font-weight: 500;
-			color: #ffffff;
-		}
-	}
-</style>
+<template>
+	<view class="container">
+		<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">
+						0
+					</view>
+					<view class="sy-item-name">
+						挂售收益
+					</view>
+				</view>
+				<view class="jg"></view>
+				<view class="sy-item">
+					<view class="sy-item-val">
+						0
+					</view>
+					<view class="sy-item-name">
+						我的奖金
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="qd-box flex">
+			<image src="../../static/icon/uqd.png" mode=""></image>
+			<view class="qd-info">
+				<view class="" style="font-weight: bold;color: #0C1732;">签到领取积分</view>
+				<view class="">已连续签到0天</view>
+				<view class="">今日签到奖励0积分</view>
+			</view>
+			<view class="qd-btn" :class="{'qded': qded}" @click="qded?'':goQd()">
+				{{qded?'已签到': '立即签到'}}
+			</view>
+		</view>
+		<view class="tool-box flex">
+			<view class="tool-item flex" v-for="itemt in toolList" :key="itemt.id" @click="useTool(itemt)">
+				<view class="tool-item-img">
+					<image :src="itemt.img" mode="widthFix" :style="{'width':itemt.width,'height': itemt.height}"
+						class="tool-logo"></image>
+				</view>
+				<view class="tool-item-name">
+					{{itemt.name}}
+				</view>
+			</view>
+		</view>
+		<uni-list class="tool-list">
+			<uni-list-item title="收款信息" @click="navTo('/pages/money/wallet')" thumb="/static/icon/skxx.png">
+			</uni-list-item>
+			<uni-list-item title="实名认证" @click="navTo('/pages/user/coupon')" thumb="/static/icon/bdsj.png">
+			</uni-list-item>
+			<uni-list-item title="收货地址" @click="navTo('/pages/user/favorites')" thumb="/static/icon/shdz.png">
+			</uni-list-item>
+			<uni-list-item title="客服" @click="openKf()" thumb="/static/icon/kf.png">
+			</uni-list-item>
+			<uni-list-item title="设置" @click="navTo('/pages/user/shareQrCode')" thumb="/static/icon/uset.png">
+			</uni-list-item>
+			<!-- <uni-list-item title="关于我们" @click="navTo('/pages/shareQrCode/index')" thumb="/static/icon/img09.png"> -->
+			</uni-list-item>
+		</uni-list>
+		<uni-popup ref="popupkf" type="center">
+			<view class="popup-box">
+				<view class="img">
+					<image src="../../static/img/img009.png" mode=""></image>
+				</view>
+				<view class="mian">
+					<view class="delivery">
+						<view class="title">已经为您定制专属客服</view>
+						<image src="../../static/img/img010.png" mode=""></image>
+					</view>
+					<view class="nocancel">客服VX:{{ text }}</view>
+					<view class="comfirm-box">
+						<view class="cancel" @click="cancel">取消</view>
+						<view class="comfirm" @click="comfirm(text)">复制微信</view>
+					</view>
+				</view>
+			</view>
+		</uni-popup>
+		<uni-popup ref="popupqd" type="center">
+			<view class="popup">
+				<view class="popup-dox">
+					<image class="popup-logo" src="../../static/img/sign-popup.png"></image>
+				</view>
+				<view class="popup-title">
+					获得
+					<text>{{ today_integral }}</text>
+					{{today_type}}
+				</view>
+				<view class="popup-tip">
+					明天签到可得
+					<text>{{ tom_integral }}</text>
+					{{tom_type}}
+				</view>
+				<view class="popup-btn" @click="closeQd">知道了</view>
+			</view>
+			<!-- <view class="close_icon" @click="close">
+				<image src="../../static/img/Close.png"></image>
+			</view> -->
+		</uni-popup>
+		<u-tabbar activeColor="#375AFE" v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
+	</view>
+</template>
+<script>
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+	import uniList from '@/components/uni-list/uni-list.vue';
+	import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
+	import {
+		orderData,
+		getUserInfo
+	} from '@/api/user.js';
+	import {
+		saveUrl,
+		interceptor
+	} from '@/utils/loginUtils.js';
+	import {
+		tabbar
+	} from '@/utils/tabbar.js'
+	let startY = 0,
+		moveY = 0,
+		pageAtTop = true;
+	export default {
+		components: {
+			uniList,
+			uniListItem
+		},
+		data() {
+			return {
+				qded: false, //是否已签到
+				tabbar: tabbar,
+				current: 4,
+				text:'',//客服微信
+				today_integral:'',//签到获得的数值
+				today_type:'',//签到获得的数值单位
+				tom_integral: '',//明天签到获得的数值
+				tom_type: '',//签到获得的数值单位
+				userDowm: 0, //卡片升级专属高度
+				userMaxDowm: 0, //卡片最高高度
+				toolList: [{
+						id: 't1',
+						name: '新人通道',
+						width: '56rpx',
+						heigt: '54rpx',
+						img: '../../static/icon/tool-1.png',
+						path: '/pages/user/xrtd'
+					},
+					{
+						id: 't2',
+						name: '邀请好友',
+						width: '56rpx',
+						heigt: '57rpx',
+						img: '../../static/icon/tool-2.png',
+						path: '/pages/user/shareQrCode'
+					},
+					{
+						id: 't3',
+						name: '我的粉丝',
+						width: '68rpx',
+						heigt: '53rpx',
+						img: '../../static/icon/tool-3.png',
+						path: ''
+					},
+					{
+						id: 't4',
+						name: '我的订单',
+						width: '55rpx',
+						heigt: '54rpx',
+						img: '../../static/icon/tool-4.png',
+						path: '/pages/order/order'
+					},
+					{
+						id: 't5',
+						name: '我的商品',
+						width: '50rpx',
+						heigt: '58rpx',
+						img: '../../static/icon/tool-5.png',
+						path: ''
+					},
+					{
+						id: 't6',
+						name: '馆长申请',
+						width: '59rpx',
+						heigt: '56rpx',
+						img: '../../static/icon/tool-6.png',
+						path: ''
+					}
+				]
+			};
+		},
+		onShow() {
+			// 判断是否已经登录
+			if (this.hasLogin) {
+				this.loadBaseData();
+			}
+		},
+		onReady() {
+			// 初始化获取页面宽度
+			uni.createSelectorQuery()
+				.select('.container')
+				.fields({
+						size: true
+					},
+					data => {
+						// 计算最多下拉的高度
+						this.userDowm = Math.floor((data.width / 750) * 185);
+						// 计算最大触发修改高度事件
+						this.userMaxDowm = Math.floor((data.width / 750) * 250);
+					}
+				)
+				.exec();
+		},
+		// #ifndef MP
+		// onNavigationBarButtonTap(e) {
+		// 	const index = e.index;
+		// 	if (index === 0) {
+		// 		this.navTo('/pages/set/set');
+		// 	} else if (index === 1) {
+		// 		// #ifdef APP-PLUS
+		// 		const pages = getCurrentPages();
+		// 		const page = pages[pages.length - 1];
+		// 		const currentWebview = page.$getAppWebview();
+		// 		currentWebview.hideTitleNViewButtonRedDot({
+		// 			index
+		// 		});
+		// 		// #endif
+		// 		uni.navigateTo({
+		// 			url: '/pages/user/notice'
+		// 		});
+		// 	}
+		// },
+		// #endif
+		computed: {
+			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
+		},
+		methods: {
+			...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
+			// 加载初始数据
+			loadBaseData() {
+				getUserInfo({})
+					.then(({
+						data
+					}) => {
+						this.setUserInfo(data);
+						// 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
+						orderData({})
+							.then(({
+								data
+							}) => {
+								this.setOrderInfo(data);
+							})
+							.catch(e => {
+								this.setOrderInfo({
+									complete_count: 0, //完成
+									received_count: 0, //待收货
+									unshipped_count: 0, //待发货
+									order_count: 0, //订单总数
+									unpaid_count: 0 //待付款
+								});
+							});
+					})
+					.catch(e => {
+						console.log(e);
+					});
+			},
+			/**
+			 * 统一跳转接口,拦截未登录路由
+			 * navigator标签现在默认没有转场动画，所以用view
+			 */
+			navTo(url) {
+				// if (!this.hasLogin) {
+				// 	// 保存地址
+				// 	saveUrl();
+				// 	// 登录拦截
+				// 	interceptor();
+				// } else {
+					uni.navigateTo({
+						url
+					});
+				// }
+			},
+			useTool(e) {
+				this.navTo(e.path)
+			},
+			// 签到弹窗
+			goQd() {
+				this.$refs.popupqd.open()
+				this.qded = true
+			},
+			// 关闭签到弹窗
+			closeQd() {
+				this.$refs.popupqd.close()
+			},
+			// 打开客服
+			openKf() {
+				this.$refs.popupkf.open()
+			},
+			// 关闭客服
+			cancel() {
+				this.$refs.popupkf.close()
+			},
+		}
+	};
+</script>
+<style lang="scss">
+	page {
+		height: 100%;
+	}
+
+	%flex-center {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+	%section {
+		display: flex;
+		justify-content: space-around;
+		align-content: center;
+		background: #fff;
+		border-radius: 10rpx;
+	}
+
+	.container {
+		height: 100%;
+		background-color: $page-color-base;
+	}
+
+	.content-box {
+		height: 100%;
+	}
+
+	.vheigh {
+		height: var(--status-bar-height);
+		background-color: $base-color;
+	}
+
+	.user-section {
+		height: 435rpx;
+		padding: 15rpx 30rpx 0;
+		position: relative;
+
+		.bg {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			background-color: $base-color;
+		}
+	}
+
+	.user-info-box {
+		height: 180rpx;
+		color: white;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		position: relative;
+		z-index: 1;
+
+		.detail {
+			height: 130rpx;
+
+			.portrait-box {
+				height: 100%;
+
+				.portrait {
+					width: 130rpx;
+					height: 100%;
+					border: 5rpx solid #fff;
+					border-radius: 50%;
+				}
+			}
+
+			.info-box {
+				margin-left: 20rpx;
+				line-height: 1.5;
+
+				.username {
+					font-size: $font-lg + 6rpx;
+					height: 100%;
+				}
+			}
+		}
+
+		.config {
+			font-size: 48rpx;
+			height: 130rpx;
+
+			.setting {
+				margin-right: 51rpx;
+			}
+		}
+	}
+
+	.vip-card-box {
+		display: flex;
+		flex-direction: column;
+		color: #f7d680;
+		height: 240rpx;
+		background: linear-gradient(left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
+		border-radius: 16rpx 16rpx 0 0;
+		overflow: hidden;
+		position: relative;
+		padding: 20rpx 24rpx;
+
+		.card-bg {
+			position: absolute;
+			top: 20rpx;
+			right: 0;
+			width: 380rpx;
+			height: 260rpx;
+		}
+
+		.b-btn {
+			position: absolute;
+			right: 20rpx;
+			top: 16rpx;
+			width: 132rpx;
+			height: 40rpx;
+			text-align: center;
+			line-height: 40rpx;
+			font-size: 22rpx;
+			color: #36343c;
+			border-radius: 20px;
+			background: linear-gradient(left, #f9e6af, #ffd465);
+			z-index: 1;
+		}
+
+		.tit {
+			font-size: $font-base + 2rpx;
+			color: #f7d680;
+			margin-bottom: 28rpx;
+
+			.iconfont {
+				color: #f6e5a3;
+				margin-right: 16rpx;
+			}
+		}
+
+		.e-b {
+			font-size: $font-sm;
+			color: #d8cba9;
+			margin-top: 10rpx;
+		}
+	}
+
+	.cover-container {
+		background: $page-color-base;
+		margin-top: -150rpx;
+		padding: 0 30rpx;
+		position: relative;
+		background: #f5f5f5;
+		padding-bottom: 20rpx;
+
+		.arc {
+			position: absolute;
+			left: 0;
+			top: -34rpx;
+			width: 100%;
+			height: 36rpx;
+		}
+	}
+
+	.tj-sction {
+		@extend %section;
+
+		.tj-item {
+			@extend %flex-center;
+			flex-direction: column;
+			height: 140rpx;
+			font-size: $font-sm;
+			color: #75787d;
+		}
+
+		.num {
+			font-size: $font-lg;
+			color: $font-color-dark;
+			margin-bottom: 8rpx;
+		}
+	}
+
+	.item-box {
+		border-radius: 10rpx;
+		background-color: white;
+		margin-top: 20rpx;
+
+		.box-title {
+			line-height: 1;
+			padding: 30rpx;
+
+			.title {
+				font-size: $font-lg;
+				font-weight: bold;
+			}
+
+			.link {
+				font-size: $font-base - 2rpx;
+				color: $font-color-light;
+			}
+		}
+
+		.order-section {
+			@extend %section;
+			padding: 28rpx 0;
+
+			.order-item {
+				@extend %flex-center;
+				width: 120rpx;
+				height: 120rpx;
+				border-radius: 10rpx;
+				font-size: $font-sm;
+				color: $font-color-dark;
+			}
+
+			.iconfont {
+				font-size: 48rpx;
+				margin-bottom: 18rpx;
+				color: #fa436a;
+			}
+
+			.icon-shouhoutuikuan {
+				font-size: 44rpx;
+			}
+
+			.icon {
+				height: 50rpx;
+				width: 48rpx;
+				margin-bottom: 18rpx;
+				background-size: 100%;
+				background-repeat: no-repeat;
+				background-position: center;
+
+				.icon-img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+	}
+
+	.history-section {
+		// padding: 30rpx 0 0;
+		margin-top: 20rpx;
+		background: #fff;
+		border-radius: 10rpx;
+
+		.sec-header {
+			display: flex;
+			align-items: center;
+			font-size: $font-base;
+			color: $font-color-dark;
+			line-height: 40rpx;
+			margin-left: 30rpx;
+			padding-top: 30rpx;
+
+			.iconfont {
+				font-size: 44rpx;
+				color: $color-red;
+				margin-right: 16rpx;
+				line-height: 40rpx;
+			}
+		}
+
+		.h-list {
+			white-space: nowrap;
+			padding: 30rpx 30rpx 0;
+
+			.h-list-image {
+				display: inline-block;
+				width: 160rpx;
+				height: 160rpx;
+				margin-right: 20rpx;
+				border-radius: 10rpx;
+			}
+		}
+	}
+
+	.user-top {
+		height: 660rpx;
+		position: relative;
+
+		.user-top-bg {
+			width: 750rpx;
+			height: 660rpx;
+			// 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;
+			height: 148rpx;
+			width: 750rpx;
+			// background-color: #bfa;
+			.sy-item {
+				flex-grow: 1;
+				text-align: center;
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #FFFFFF;
+				.sy-item-val {
+					
+				}
+			}
+			.jg {
+				width: 2rpx;
+				height: 68rpx;
+				background-color: #fff;
+			}
+		}
+	}
+
+	.qd-box {
+		width: 690rpx;
+		height: 210rpx;
+		background: #FFFFFF;
+		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+		border-radius: 20rpx;
+		margin: -105rpx auto 30rpx;
+		position: relative;
+		padding: 0 40rpx;
+		font-size: 26rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #666666;
+
+		image {
+			flex-shrink: 0;
+			width: 65rpx;
+			height: 68rpx;
+		}
+
+		.qd-info {
+			flex-grow: 1;
+			padding-left: 24rpx;
+			line-height: 46rpx;
+		}
+
+		.qd-btn {
+			width: 190rpx;
+			height: 80rpx;
+			line-height: 80rpx;
+			border-radius: 20px;
+			background: #DC262B;
+			border-radius: 20rpx;
+			text-align: center;
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #FFFFFF;
+		}
+
+		.qded {
+			background: #E8E8E8;
+			color: #999999;
+		}
+	}
+
+	.tool-box {
+		padding: 60rpx 0 0;
+		width: 690rpx;
+		background: #FFFFFF;
+		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+		border-radius: 20rpx;
+		margin: 30rpx auto;
+		flex-wrap: wrap;
+		justify-content: flex-start;
+		align-content: space-around;
+
+		.tool-item {
+			width: 25%;
+			height: 120rpx;
+			flex-shrink: 0;
+			margin-bottom: 60rpx;
+			flex-direction: column;
+			align-content: space-between;
+			justify-content: center;
+			font-size: 28rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #0C1732;
+
+			.tool-item-img {
+				width: 68rpx;
+				height: 90rpx;
+				position: relative;
+				flex-shrink: 0;
+
+				.tool-logo {
+					position: absolute;
+					top: 0;
+					left: 0;
+					bottom: 0;
+					right: 0;
+					margin: auto;
+				}
+			}
+
+			.tool-item-name {
+				display: inline-block;
+			}
+		}
+	}
+
+	.tool-list {
+		width: 690rpx;
+		margin: auto;
+		background: #FFFFFF;
+		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+		border-radius: 20rpx;
+	}
+
+	.popup-box {
+		width: 522rpx;
+		height: 605rpx;
+		background-color: #ffffff;
+		border-radius: 20rpx;
+		position: relative;
+
+		.img {
+			position: relative;
+			top: -56rpx;
+			left: 0;
+			width: 522rpx;
+			height: 132rpx;
+			display: flex;
+			justify-content: center;
+
+			image {
+				border-radius: 20rpx 20rpx 0 0;
+				width: 450rpx;
+				height: 132rpx;
+			}
+		}
+
+		.mian {
+			margin-top: -44rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			// padding: 32rpx 32rpx;
+			background-color: #ffffff;
+			border-radius: 0 0 20rpx 20rpx;
+			text-align: center;
+
+			.delivery {
+				font-size: 40rpx;
+				color: #333333;
+				display: flex;
+				align-items: center;
+				flex-direction: column;
+
+				.title {}
+
+				image {
+					margin-top: 48rpx;
+					width: 172rpx;
+					height: 160rpx;
+				}
+			}
+
+			.nocancel {
+				font-size: 32rpx;
+				color: #333333;
+				margin-top: 14rpx;
+			}
+
+			.comfirm-box {
+				margin-top: 52rpx;
+				display: flex;
+				// margin-bottom: 32rpx;
+
+				// justify-content: space-around;
+				.cancel {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					width: 197rpx;
+					height: 74rpx;
+					border: 1px solid #dcc786;
+					border-radius: 38rpx;
+
+					font-size: 32rpx;
+					color: #605128;
+				}
+
+				.comfirm {
+					margin-left: 32rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					width: 197rpx;
+					height: 74rpx;
+					background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
+					border-radius: 38px;
+					font-size: 32rpx;
+					color: #605128;
+				}
+			}
+		}
+	}
+
+	.popup {
+		width: 560rpx;
+		padding-bottom: 45rpx;
+		background-color: #ffffff;
+		border-radius: 15rpx;
+		text-align: center;
+		line-height: 1;
+
+		.popup-dox {
+			position: relative;
+
+			.popup-logo {
+				margin: -160rpx auto 0;
+				width: 400rpx;
+				height: 200rpx;
+			}
+		}
+
+		.popup-title {
+			margin-top: 85rpx;
+			font-size: 40rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #2a2a2a;
+
+			text {
+				font-size: 56rpx;
+				color: #e83f30;
+			}
+		}
+
+		.popup-tip {
+			margin-top: 20rpx;
+			font-size: 28rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #8c8c8c;
+
+			text {
+				color: #e83f30;
+			}
+		}
+
+		.popup-btn {
+			margin: 58rpx auto 0;
+			width: 270rpx;
+			height: 66rpx;
+			background: #f0c838;
+			border-radius: 34rpx;
+			text-align: center;
+			line-height: 66rpx;
+			font-size: 36rpx;
+			font-family: Source Han Sans CN;
+			font-weight: 500;
+			color: #ffffff;
+		}
+	}
+</style>

pages/user/xrtd.vue

@@ -0,0 +1,134 @@
+<template>
+	<view class="content">
+		<view class="top-bg">
+			<image src="../../static/img/xrtd-bg.png" mode=""></image>
+		</view>
+		<view class="sq-tj">
+			<image src="../../static/img/xrtd-log.png" mode=""></image>
+			<view class="sq-tj-tit">
+				申请条件
+			</view>
+			<view class="sq-tj-info">
+				注册为新人
+			</view>
+		</view>
+		<view class="sq-tj" style="margin-top: 0;margin-bottom: 62rpx;">
+			<image src="../../static/img/xrtd-log.png" mode=""></image>
+			<view class="sq-tj-tit">
+				申请说明
+			</view>
+			<view class="sq-tj-info">
+				身份证名下六单，可提前三分钟抢购
+			</view>
+		</view>
+		<view class="btn-list flex">
+			<view class="look-btn" @click="lookJl()">
+				查看申请记录
+			</view>
+			<view class="sub-btn">
+				提交申请
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			// 查看申请记录
+			lookJl() {
+				this.navTo('/pages/user/sqjl')
+			},
+			// 提交申请
+			subSq() {
+				
+			},
+			navTo(url) {
+				uni.navigateTo({
+					url
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.top-bg {
+		width: 750rpx;
+		height: 623rpx;
+		image {
+			width: 750rpx;
+			height: 623rpx;
+		}
+	}
+	.sq-tj {
+		position: relative;
+		width: 690rpx;
+		height: 190rpx;
+		background: #FFFFFF;
+		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+		border-radius: 20rpx;
+		margin: -160rpx auto 50rpx;
+		image {
+			width: 224rpx;
+			height: 68rpx;
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			margin: auto;
+		}
+		.sq-tj-tit {
+			width: 224rpx;
+			height: 68rpx;
+			font-size: 34rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #FFFFFF;
+			line-height: 68rpx;
+			text-align: center;
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			margin: auto;
+		}
+		.sq-tj-info {
+			font-size: 30rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #0C1732;
+			line-height: 42rpx;
+			padding-top: 100rpx;
+			text-align: center;
+		}
+	}
+	.btn-list {
+		justify-content: space-around;
+		font-size: 32rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #375AFE;
+		line-height: 83rpx;
+		text-align: center;
+		.look-btn {
+			width: 294rpx;
+			height: 83rpx;
+			background: #FFFFFF;
+			border: 2rpx solid #375AFE;
+			border-radius: 10rpx;
+		}
+		.sub-btn {
+			width: 294rpx;
+			height: 83rpx;
+			background: linear-gradient(0deg, rgba(60, 237, 237, 0.99), #04B8FF, #375AFE);
+			border-radius: 10rpx;
+			color: #fff;
+		}
+	}
+</style>