3-7-1

pages.json

@@ -252,6 +252,18 @@
 			"style": {
 				"navigationBarTitleText": "积分明细"
 			}
+		},
+		{
+			"path": "pages/user/xrtd",
+			"style": {
+				"navigationBarTitleText": "新人通道"
+			}
+		},
+		{
+			"path": "pages/user/sqjl",
+			"style": {
+				"navigationBarTitleText": "申请记录"
+			}
 		},
 		{
 			"path": "pages/order/order",

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,907 @@
-<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;
-		}
-	}
+<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: '/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)
+			},
+			/**
+			 *  会员卡下拉和回弹
+			 *  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;
+				.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: 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>

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>