[抖火申请支付]

pages/user/referee.vue

@@ -0,0 +1,176 @@
+<template>
+	<view class="content">
+		<view class="top">
+			<view class="top-name">
+				我的伙伴（{{refereeCount}}人）
+			</view>
+		</view>
+		<view class="list" v-if="refereeArr.length > 0">
+			<view class="item" v-for="(item, index) in refereeArr" :key="index">
+				<image class="item-head" :src="item.avatar ? item.avatar : '/static/imgs/default_myHead.png'" mode="aspectFill"></image>
+				<view class="item-cont">
+					<view class="item-left">
+						<view class="item-top">
+							<view class="item-name">
+								{{item.nickname}}
+							</view>
+							<view class="item-sex">
+								<image src="/static/icon/man.png" mode="aspectFill"></image>
+							</view>
+						</view>
+						<view class="item-identity" v-if="item.identity">
+							抖火法律-{{item.identity.name}}
+						</view>
+					</view>
+					<view class="item-right" @click="clickCall(item.username)">
+						联系
+					</view>
+				</view>
+			</view>
+		</view>
+		<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 { Relations } from '@/apis/interfaces/user'
+    export default {
+    	data() {
+    		return {
+				refereeCount: '',  // 数量
+    			refereeArr  : '',  // 我的伙伴
+    		};
+    	},
+        onShow() {
+			// 获取接口信息
+			this.refereeInfo();
+		},
+		methods:{
+			// 我的伙伴接口信息
+			refereeInfo() {
+				Relations().then(res => {
+					this.refereeCount = res.count.one
+					this.refereeArr   = res.users
+				}).catch(err => {
+					uni.showToast({
+						title: err.message,
+						icon: "none"
+					})
+				})
+			},
+			
+			// 拨打电话
+			clickCall (tel) {
+				uni.makePhoneCall({
+					phoneNumber: tel,//电话号码
+					success: res => {
+					},
+					fail: err =>{
+					}
+				})
+			}
+		}
+    }
+</script>
+
+<style lang="scss" scoped>
+	.top {
+		background-color: #ffffff;
+		position: fixed;
+		width: 100%;
+		line-height: 100rpx;
+		height: 100rpx;
+		top: 0;
+		left: 0;
+		z-index: 2;
+		padding: 0 $padding;
+		box-sizing: border-box;
+		.top-name {
+			position: relative;
+			font-weight: 600;
+			font-size: $title-size + 4;
+			&::after {
+				position: absolute;
+				content: '';
+				left: 30rpx;
+				bottom: 0;
+				width: 40rpx;
+				height: 8rpx;
+				border-radius: $radius;
+				background-color: #5370eb;
+			}
+		}
+	}
+	
+	.list {
+		padding-top: 100rpx;
+		.item {
+			padding: $padding;
+			box-sizing: border-box;
+			position: relative;
+			&:nth-child(odd){
+				background-color: #fafcfb;
+			}
+			.item-head {
+				width: 100rpx;
+				height: 100rpx;
+				border-radius: 50%;
+			}
+			.item-cont {
+				position: absolute;
+				left: 0;
+				top: 0;
+				padding: $padding $padding $padding $padding + 130rpx;
+				box-sizing: border-box;
+				width: 100%;
+				display: flex;
+				.item-left {
+					flex: 1;
+					line-height: 54rpx;
+					.item-top {
+						display: flex;
+						.item-name {
+							font-weight: 600;
+							margin-right: $margin - 10;
+						}
+						.item-sex {
+							background-color: #e5f8ff;
+							border-radius: $radius * 3;
+							height: 38rpx;
+							line-height: 38rpx;
+							padding: 0 20rpx;
+							margin-top: 10rpx;
+							image {
+								width: 24rpx;
+								height: 24rpx;
+							}
+							&.active {
+								background-color: #fff1fa;
+							}
+						}
+					}
+					.item-identity {
+						font-size: $title-size-m;
+						color: #8282a7;
+					}
+				}
+				.item-right {
+					display: inline-block;
+					font-size: $title-size-m;
+					background-color: #edf4ff;
+					color: #5370eb;
+					height: 64rpx;
+					line-height: 64rpx;
+					padding: 0 $padding;
+					border-radius: $radius * 4;
+					margin-top: $margin - 5;
+				}
+			}
+		}
+	}
+</style>