[抖火申请支付]

pages/user/parent.vue

@@ -0,0 +1,182 @@
+<template>
+	<view class="content">
+		<block v-if="parentData">
+			<view class="pages-back">
+				<image :src="parentData.avatar ? parentData.avatar : '/static/imgs/default_myHead.png'" mode="aspectFill"></image>
+			</view>
+			<view class="pages-cont">
+				<image class="pages-head" :src="parentData.avatar ? parentData.avatar : '/static/imgs/default_myHead.png'" mode="aspectFill"></image>
+				<view class="pages-title">
+					<view class="pages-name">
+						{{parentData.nickname}}
+					</view>
+					<view class="pages-tel">
+						{{mphone}}
+					</view>
+					<view class="pages-btn">
+						<view class="pages-call" @click="clickCall">
+							联系他
+						</view>
+					</view>
+				</view>
+			</view>
+		</block>
+		<view class="pack-center pages-hint" v-else>
+			<image src="/static/imgs/Noevaluate.png" mode="aspectFill"></image>
+			<view class="pages-hint-text">
+				暂无推荐人
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { Parent } from '@/apis/interfaces/user'
+	export default {
+		data() {
+			return {
+				parentData: '',  // 推荐人
+				mphone    : ''   // 手机号
+			};
+		},
+	    onShow() {
+			// 获取接口信息
+			this.parentInfo();
+		},
+		methods:{
+			// 推荐人接口信息
+			parentInfo() {
+				Parent().then(res => {
+					this.parentData = res
+					if(res){
+						this.mphone = res.username.substring(0, 3) + '****' + res.username.substring(7)
+					}
+				}).catch(err => {
+					uni.showToast({
+						title: err.message,
+						icon: "none"
+					})
+				})
+			},
+			
+			// 拨打电话
+			clickCall () {
+				uni.makePhoneCall({
+					phoneNumber: this.parentData.username,//电话号码
+					success: res => {
+					},
+					fail: err =>{
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	/* 头像背景 */
+	.pages-back{
+	    position: fixed;
+	    width: 100vw;
+		height: 100vh;
+	    opacity: .2;
+	    background-color: #ffffff;
+	}
+	.pages-back image{
+	    width: 100%;
+	    height: 100%;
+	    position: absolute;
+	    top: 0;
+	    left: 0;
+	}
+	.pages-back::after,
+	.pages-back::before{
+	    position: absolute;
+	    width: 100%;
+	    height: 100%;
+	    content: " ";
+	    top: 0;
+	    left: 0;
+	}
+	.pages-back::after{
+	    background-image: linear-gradient(to top, #fff, rgba(255,255,255,.0));
+	    z-index: 1;
+	}
+	.pages-back::before{
+	    z-index: 2;
+	    backdrop-filter: blur(15px);
+	}
+	
+	.pages-cont {
+		text-align: center;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-box-pack: center;
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		.pages-head {
+			width: 160rpx;
+			height: 160rpx;
+			border-radius: 50%;
+			margin: 0 auto;
+			z-index: 4;
+			border: 6rpx solid #eaeeff;
+		}
+		.pages-title {
+			background-color: #ffffff;
+			border-radius: $radius-m;
+			box-sizing: border-box;
+			width: 80%;
+			margin: -100rpx auto 0;
+			padding-top: 120rpx;
+			box-sizing: border-box;
+			position: relative;
+			&::after,
+			&::before {
+				position: absolute;
+				content: '';
+				background-color: rgba(255, 255, 255, .9);
+				left: 20rpx;
+				border-radius: 0 0 $radius - 4 $radius - 4;
+			}
+			&::after {
+				z-index: 2;
+				width: calc(100% - 40rpx);
+				left: 20rpx;
+				bottom: -25rpx;
+				height: 25px;
+			}
+			&::before {
+				z-index: 1;
+				width: calc(100% - 80rpx);
+				left: 40rpx;
+				bottom: -50rpx;
+				height: 50rpx;
+			}
+			.pages-name {
+				line-height: 60rpx;
+				font-weight: 600;
+				font-size: $title-size + 4;
+			}
+			.pages-tel {
+				color: #999999;
+			}
+			.pages-btn {
+				border-top: 2rpx solid #f1f1f1;
+				text-align: center;
+				margin-top: $margin + 20;
+				padding: $padding + 10 0;
+				.pages-call {
+					display: inline-block;
+					border: 2rpx solid $mian-color;
+					color: $mian-color;
+					border-radius: $radius * 4;
+					padding: 0 $padding * 3;
+					font-size: $title-size-lg;
+					line-height: 74rpx;
+				}
+			}
+		}
+	}
+</style>