<template>
|
<u-popup :show="show" mode="center" :mask-close-able="false" @close="$emit('close')" bgColor="transparent">
|
<view class="txt-center">
|
<view class="bgColor2 pb-35 px-27 pt-60 relative">
|
<view class="absolute fs-69 lh-81 color3 top0" style="right: 6rpx;">LOGO</view>
|
<view class="bgColor3 pt-40 pl-27 pr-50">
|
<view class="flex a-center">
|
<image :src="$showFullImg(superiorInfo.avatar)" class="w-96 h-96 mr-19 shrink0" style="border-radius: 50%;"/>
|
<view class="flex flex-column a-left">
|
<view class="line1 fs-27 lh-38">{{ superiorInfo.nickName ||''}}</view>
|
<view class="mt-12 fs-23 lh-33 color2">{{ superiorInfo.phone||'' }}</view>
|
</view>
|
</view>
|
</view>
|
<view class="splitLine">
|
<view class="leftCircle"></view>
|
<view class="rightCircle"></view>
|
</view>
|
<view class="bgColor4 pb-46 pt-15">
|
<view class="fs-31 lh-42 font-bold color111">
|
诚邀您一起加入海诊康道
|
</view>
|
<view @tap.stop="handleAccept" class="mt-38 mx-69 lh-85 fs-27 font-bold white bgColor5 br-67">接受邀请
|
</view>
|
</view>
|
</view>
|
<image @tap.stop="handleClose" src="/static/image/home/Group@2x.png" class="mt-58 w-58 h-58" />
|
</view>
|
</u-popup>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, watch } from "vue";
|
import { confirmSuperior, getSuperiorInfo } from "./service.js";
|
import { hasCompletedAuthSession } from '@/utils/auth-session.js'
|
interface Props {
|
show: boolean;
|
code?: string;
|
type?: string;
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
show: false
|
});
|
|
const emit = defineEmits<{
|
'accept': [data?: { code?: string; type?: string }];
|
'close': [];
|
}>();
|
|
const superiorInfo = ref<any>({});
|
|
watch(() => props.show, (newVal) => {
|
if (newVal) {
|
getSuperiorInfo({
|
spreadCode: props.code,
|
superiorType: props.type,
|
}).then(res => {
|
if (res.code == 200) {
|
superiorInfo.value = res.data;
|
}
|
})
|
}
|
});
|
|
const handleAccept = () => {
|
if (!hasCompletedAuthSession()) {
|
uni.navigateTo({
|
url: '/pages/login/login?inviteUserId=' + superiorInfo.value.id + '&inviteType=' + props.type
|
})
|
handleClose();
|
return;
|
}
|
confirmSuperior({
|
superiorId: superiorInfo.value.id,
|
superiorType: props.type,
|
}).then(res => {
|
if (res.code == 200) {
|
emit('accept', {
|
code: props.code,
|
type: props.type,
|
})
|
handleClose();
|
}else{
|
uni.showToast({
|
duration: 1500,
|
title: res.message,
|
icon: 'none',
|
mask: true
|
})
|
}
|
})
|
};
|
|
const handleClose = () => {
|
emit('close');
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.bgColor2 {
|
background: linear-gradient(137deg, #1D2F97 0%, #56D1FF 100%);
|
width: 576.92rpx;
|
}
|
|
.bgColor3 {
|
background-color: #fff;
|
border-radius: 19rpx 57rpx 0 0;
|
}
|
|
.bgColor4 {
|
background-color: #fff;
|
border-radius: 0 0 19rpx 19rpx;
|
}
|
|
.bgColor5 {
|
background: linear-gradient(270deg, #6BEADF 0%, #1BA8EC 100%);
|
box-shadow: 0rpx 8rpx 19rpx 0rpx rgba(27, 168, 236, 0.3);
|
}
|
|
.color2 {
|
color: rgba(0, 0, 0, 0.45);
|
}
|
|
.color3 {
|
color: rgba(255, 255, 255, .1);
|
}
|
|
.color111 {
|
color: rgba(28, 73, 155, 1);
|
}
|
|
.a-left {
|
align-items: flex-start;
|
}
|
|
.splitLine {
|
position: relative;
|
height: 35rpx;
|
display: flex;
|
align-items: center;
|
background-color: #fff;
|
overflow: hidden;
|
|
&::before {
|
content: "";
|
position: absolute;
|
top: 50%;
|
left: 0;
|
right: 0;
|
height: 1rpx;
|
transform: translateY(-50%);
|
background-image: linear-gradient(to right, #f2f2f2 50%, transparent 50%);
|
background-size: 20rpx 100%;
|
background-repeat: repeat-x;
|
margin: 0 40rpx;
|
}
|
|
.leftCircle {
|
width: 35rpx;
|
height: 35rpx;
|
background-color: #2b55b0;
|
border-radius: 50%;
|
position: absolute;
|
left: -17.5rpx;
|
top: 50%;
|
transform: translateY(-50%);
|
}
|
|
.rightCircle {
|
width: 35rpx;
|
height: 35rpx;
|
background-color: #46a2e1;
|
border-radius: 50%;
|
position: absolute;
|
right: -17.5rpx;
|
top: 50%;
|
transform: translateY(-50%);
|
}
|
}
|
</style>
|
