182 lines
4.0 KiB
Vue
182 lines
4.0 KiB
Vue
<template>
|
|
<view class="content">
|
|
<block v-if="parentData">
|
|
<view class="pages-back">
|
|
<image :src="parentData.avatar ? parentData.avatar : 'https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/5641d82e94651198a0a2236f368ff9ba.png'" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="pages-cont">
|
|
<image class="pages-head" :src="parentData.avatar ? parentData.avatar : 'https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/5641d82e94651198a0a2236f368ff9ba.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="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/7ad417d0c215db601b8e1bead05c3a5e.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> |