ufutx_love_mp/src/pages/home/information.wpy

1282 lines
44 KiB
Plaintext
Raw Normal View History

2024-08-16 09:14:13 +08:00
<style lang="less" scoped>
@import url(../../styles/theme.less);
page {
background-color: #f5f5f5;
2024-08-16 09:14:13 +08:00
}
.ui-abnormal{
width: 100%;
2024-08-16 09:14:13 +08:00
padding-bottom: 300rpx;
background: #f5f5f5;
.ui-user-pic-box{
padding: 0rpx 30rpx;
2024-08-16 09:14:13 +08:00
height: 690rpx;
background: #f3f4f9;
position: relative;
border-radius: 24rpx;
margin: 0 auto 26rpx auto;
.ui-user-pic, .ui-mask{
width: 100%;
height: 690rpx;
border-radius: 24rpx;
}
.ui-mask{
position:absolute;
left: 0;
top: 0;
}
}
.ui-skeleton-pic, .ui-skeleton-pic-v2{
width: 92%;
margin: auto;
height: 204rpx;
background-image: url("https://image.fulllinkai.com/202203/23/6c196ecbe7899a15320fd6c3ab48b64b.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.ui-skeleton-pic-v2{
height: 302rpx;
background-image: url("https://image.fulllinkai.com/202203/23/7f312644a6dc92171ea79e7a7bf50571.png");
}
.exposure{
padding: 0 30rpx;
height: 80rpx;
line-height: 80rpx;
background: #fff4f7;
overflow: hidden;
color: #F33B6C;
.exposure_button{
padding: 0 10rpx;
height: 40rpx;
border-radius: 24rpx;
line-height: 40rpx;
border: 1rpx solid #ff95b1;
box-sizing: border-box;
}
}
.ui-bullet-wrap {
width: 100%;
height: 200rpx;
2024-08-16 09:14:13 +08:00
position: relative;
position: absolute;
top: 0;
left: 0;
z-index: 999;
.ui-bullet-item {
position: absolute;
animation: rightToleft 10s linear both;
padding: 0 20rpx 0 4rpx;
background: rgba(0, 0, 0, 0.4);
border-radius: 30rpx;
}
.ui-bullet-item-pic{
width: 34rpx;
height: 34rpx;
border-radius: 50%;
margin-right: 12rpx;
}
.ui-bullet-item[data-line='1'] {
top: 26rpx;
2024-08-16 09:14:13 +08:00
}
.ui-bullet-item[data-line='2'] {
top: 86rpx;
2024-08-16 09:14:13 +08:00
}
.ui-bullet-item[data-line='3'] {
top: 146rpx;
2024-08-16 09:14:13 +08:00
}
@keyframes rightToleft {
0% {
transform: translate(100vw);
}
100% {
transform: translate(-100%);
}
}
}
.ui-swiper{
width: 100%;
border-radius: 24rpx;
overflow: hidden;
height: 690rpx;
}
.itemInfo{
position: relative;
margin: 0 30rpx;
padding: 24rpx 30rpx;
background: #FFFFFF;
border-radius: 32rpx;
border-bottom: 2rpx solid #F5F5F5;
.nameBox {
display: flex;
justify-content: left;
align-items: center;
.name {
max-width: 180rpx;
}
}
.itemInfomation{
.Info{
min-width: 50%;
display: inline-flex;
align-items: center;
height: 36rpx;
font-size: 26rpx;
color: #333333;
margin-top: 20rpx;
}
.icon{
width: 28rpx;
height: 28rpx;
margin-right: 14rpx;
}
}
.remind{
margin: 30rpx 40rpx 8rpx 40rpx;
height: 34rpx;
font-size: 24rpx;
color: #999999;
span{
color: #F33B6C;
margin-left: 10rpx;
}
}
.name{
max-width: 70%;
height: 50rpx;
font-size: 36rx;
color: #333333;
font-weight: 600;
}
._photo{
position: absolute;
right: 20rpx;
top: 16rpx;
width: 100rpx;
height: 100rpx;
border-radius: 50%;
border: 4rpx solid #fff;
background: #FFFFFF;
box-shadow: 0 0 20rpx 4rpx rgba(0, 0, 0, 0.15);
}
.ui-sex-box{
min-width:70%;
padding-bottom:20rpx;
border-bottom:2rpx solid #f5f5f5;
.sexBox{
display: inline-block;
margin-top: 10rpx;
height: 34rpx;
line-height: 34rpx;
margin-right: 32rpx;
color: #666666;
font-size: 24rpx;
}
}
.VIPIcon{
width: 76rpx;
height: auto;
margin-left: 8rpx;
}
}
}
._bc-center {
width: 92%;
margin: 0 auto;
background: #F8F8F8;
border-radius: 24rpx;
.itemLabel{
padding-left: 40rpx;
margin-top: 20rpx;
.itemBox{
padding: 0 22rpx;
height: 52rpx;
border-radius: 16rpx;
line-height: 52rpx;
background: #F5F5F5;
margin-right: 20rpx;
margin-bottom: 24rpx;
color: #f5f5f5;
font-size: 28rpx;
font-weight: 400;
color: #333333;
}
}
.ui-approve-box{
border-radius: 32rpx;
margin: 30rpx 0;
background: #ffffff;
padding: 20rpx;
position: relative;
._title{
height: 44rpx;
line-height: 44rpx;
display: flex;
align-items: center;
position: relative;
margin-bottom: 20rpx;
.icon{
width: 28rpx;
height: 28rpx;
margin-right: 8rpx;
}
}
.hintMsg {
background: #FDFAF1;
padding: 12rpx 22rpx 12rpx 72rpx;
letter-spacing: 2rpx;
border-radius: 6rpx;
position: relative;
margin: 20rpx 0 22rpx 0;
border: 2rpx solid #FBF4ED;
}
.hintMsg:before {
content: '';
background-image: url("https://image.fulllinkai.com/202207/14/ae43d8615860cebeb46ac52fc61cfe60.png");
width: 32rpx;
height: 32rpx;
background-size: cover;
position: absolute;
top: 15rpx;
left: 26rpx;
}
._text{
margin: 0 40rpx 20rpx;
font-size: 28rpx;
color: #333333;
white-space: pre-wrap;
}
._item{
width: 33%;
}
.icon{
margin-right: 12rpx;
width: 90rpx;
height: 90rpx;
}
.m_idCon {
padding: 4rpx 20rpx 0 40rpx;
flex-wrap: wrap;
.u_idCon {
padding: 10rpx 22rpx;
line-height: 36rpx;
border-radius: 100rpx;
background-color: #F5F5F5;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
}
}
}
.boxStyleList{
width: 92%;
background: #ffffff;
border-radius: 32rpx;
margin: 22rpx auto;
.u_box_bu {
padding: 12rpx 26rpx;
background-color: #FF5380;
border-radius: 100rpx;
color: white;
line-height: 40rpx;
}
.icon{
width: 28rpx;
height: 28rpx;
vertical-align: middle;
margin-right: 8rpx;
}
._item,._item1{
padding: 12rpx;
line-height: 60rpx;
letter-spacing: 1rpx;
}
._item{
border-bottom: 2rpx solid #F8F8F8;
}
.recommend{
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
height: 88rpx;
color: #333333;
}
}
.d_btn_buy{
background-image: url("https://image.fulllinkai.com/202204/07/7aa184820aeac10da142727c00e74ff7.png");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
width: 160rpx;
height: 160rpx;
position: fixed;
bottom: 13vh;
right: 32rpx;
}
.ui-bottom-operation {
position: relative;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
.ui-mask-icon{
width: 100vw;
height: 162rpx;
position: absolute;
bottom: 0;
left: 0;
}
.ui-operation{
position: relative;
z-index: 9;
padding: 0 50rpx 70rpx 26rpx;
2024-08-16 09:14:13 +08:00
}
.ui-share-icon, .m_share_img{
width: 140rpx;
height: 140rpx;
}
.u_boBu {
width: 508rpx;
2024-08-16 09:14:13 +08:00
height: 100rpx;
background: #ffffff;
box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
border-radius: 50rpx;
padding: 0 34rpx 0 50rpx;
2024-08-16 09:14:13 +08:00
.ui-operation-btn{
width: 184rpx;
height: 68rpx;
}
.ui-operation-btn-v2{
width: 52rpx;
height: 52rpx;
}
}
}
.ui-praise-box{
border-radius: 30rpx 30rpx 0 0!important;
background: #ffffff;
.ui-praise-item{
padding: 6rpx 20rpx;
background: #f8f8f8;
border-radius: 40rpx;
white-space: nowrap;
}
.ui-active-praise{
color: #F33B6C;
background: #ffdfea;
2024-08-16 09:14:13 +08:00
}
.ui-praise-btn{
width: 420rpx;
height: 72rpx;
border-radius: 40rpx;
background: linear-gradient(to right, #F33B6C 0%, #E2597C 100%);
margin: 120rpx auto 20rpx auto;
}
.cancelIcon{
width: 28rpx;
height: 28rpx;
position: absolute;
right: 30rpx;
top: 30rpx;
2024-08-16 09:14:13 +08:00
}
}
.g_apply {
padding: 40rpx 0;
background-color: white;
.m_apply_tt {
.u_apply_img {
width: 72rpx;
height: 72rpx;
margin-right: 10rpx;
}
}
.inputStyle{
width: 528rpx;
background: #f4f7f7;
height: 180rpx;
padding: 18rpx 28rpx;
font-size: 28rpx;
color: #333333;
border-radius: 32rpx 32rpx 0 0;
}
.text_num{
width: 528rpx;
margin-top: -2rpx;
padding-right: 18rpx;
padding-bottom: 8rpx;
border-bottom-left-radius: 38rpx;
border-bottom-right-radius: 38rpx;
background: #f4f7f7;
}
.changeText{
margin-top: 16rpx;
margin-bottom: 40rpx;
image{
width: 28rpx;
height: 28rpx;
vertical-align: middle;
margin-bottom: 2rpx;
margin-right: 12rpx;
}
}
.u_apply_can {
width: 192rpx;
height: 68rpx;
border-radius: 34rpx;
border: 2rpx solid #D8D8D8;
margin-right: 32rpx;
}
.u_apply_btn {
width: 192rpx;
height: 68rpx;
background: #FF5380;
border-radius: 100rpx;
margin-left: 32rpx;
}
}
.open_confirm_box{
position: relative;
display: inline-block;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
width: 600rpx;
max-width: 100%;
background-color: #ffffff;
border-radius: 24rpx;
.confirm_prompt{
padding: 68rpx 90rpx;
line-height: 40rpx;
}
.cancelIcon{
width: 192rpx;
height: 68rpx;
margin-right: 64rpx;
}
.determineIcon{
width: 192rpx;
height: 68rpx;
}
.m_bu {
padding: 0rpx 74rpx 38rpx;
.u_hide_bu,
.u_pur_bu {
width: 192rpx;
height: 68rpx;
border: 2rpx solid #D8D8D8;
border-radius: 100rpx;
}
.u_pur_bu {
background-color: #FF5380;
color: white;
border: 2rpx solid #FF5380;
}
}
}
</style>
<template>
<view class="ui-information">
<block v-if="userInfo.other_info.is_banned == 1">
2024-08-16 09:14:13 +08:00
<view class="ui-abnormal">
<view class="ui-user-pic-box">
<image class="ui-user-pic" src="https://image.fulllinkai.com/202407/29/396698823907d0ff19b889cea3ac7e9f.jpeg" mode="aspectFill"></image>
<image src="https://image.fulllinkai.com/202204/11/a1825ca68374240d26a38c9b28cb4cbd.png" class="ui-mask" mode="aspectFill"></image>
</view>
<view class="ui-skeleton-pic"></view>
<view class="ui-skeleton-pic-v2"></view>
</view>
</block>
<block v-else>
<block v-if="userInfo.other_info.hidden_profile == 'NONE'">
2024-08-16 09:14:13 +08:00
<view class="ui-abnormal">
<view class="ui-pb-30" @tap="wantExposure" v-if="channel == 'recommend'">
<view class="exposure f-fbc">
<view class="font_26 flo_l">提升你的曝光等级可以获得更多关注喔~</view>
<view class="exposure_button flo_r font_24">我要曝光</view>
</view>
</view>
<view class="ui-pb-30" v-if="userData.hidden > 0" @tap="goto('/pages/users/setTing')">
<view class="exposure f-fbc">
<view class="font_26 flo_l">尊敬的会员您正处于无痕迹访问Ta人</view>
<view class="exposure_button flo_r font_24">去设置</view>
</view>
</view>
<view class="ui-user-pic-box">
<!--弹幕-->
<view class="ui-bullet-wrap">
<view v-for="(item,index) in showingBullets" :key="index" class="ui-bullet-item font_24 white f-fcl" data-line="{{item.line}}">
<image class="ui-bullet-item-pic" :src="item.img" mode="aspectFill"></image>
{{ item.name }}
</view>
</view>
<!--轮播图-->
<swiper class="ui-swiper" circular="true" autoplay="true" indicator-dots="true" indicator-color="#c5c5c5" indicator-active-color="#ffffff">
<block v-for="(item,index) in userInfo.profile_photos" :key="index" v-if="index < 10">
<swiper-item class="ui-swiper ui-relative">
<image :src="item" class="ui-swiper" mode="aspectFill" @tap.stop="$previewImages(item, userInfo.profile_photos)"></image>
2024-08-16 09:14:13 +08:00
</swiper-item>
</block>
</swiper>
</view>
<view class="itemInfo">
<view class="nameBox">
<view class="color-333 ellipsis_1 font_32 bold name">{{ userInfo.base_profile.nickname }}</view>
<image src="https://images.ufutx.com/202101/30/e3a22a60849c3910e680d932772432b4.png" v-if="userInfo.base_profile.is_rank" mode="widthFix" class="VIPIcon"></image>
<image src="https://images.ufutx.com/202101/30/004a146ad71658aaa2ad0f0263f960b8.png" mode="widthFix" v-else class="VIPIcon"></image>
2024-08-16 09:14:13 +08:00
</view>
<image :src="userInfo.base_profile.photo" @tap="previewImageV2(userInfo.base_profile.photo)" class="_photo flo_r" mode="aspectFill"></image>
2024-08-16 09:14:13 +08:00
<view class="clearfloat"></view>
<view class="ui-sex-box">
<view class="sexBox">{{userInfo.base_profile.fans_count}} 粉丝</view>
<view class="sexBox">{{userInfo.base_profile.preview_count}} 浏览</view>
2024-08-16 09:14:13 +08:00
</view>
<view class="itemInfomation" v-if="userInfo.base_profile">
<view class="Info"> <image class="icon" src="https://images.ufutx.com/202103/11/c0510638768e154a31d6befab67dcdf8.png"></image> {{userInfo.base_profile.year || "未填写"}} · {{userInfo.base_profile.sex == 1 ? '男':'女'}} </view>
<view class="Info"> <image class="icon" src="https://images.ufutx.com/202103/11/3f20187cff709ec748558b85994ca8ac.png"></image>{{userInfo.base_profile.stature || "未填写"}}· {{userInfo.base_profile.weight || "未填写"}}</view>
<view class="Info"> <image class="icon" src="https://images.ufutx.com/202103/11/895b335c6680356e0161c6a925a8663d.png"></image>{{userInfo.base_profile.type == 'single' && userInfo.base_profile.state ? userInfo.base_profile.state + '·': '' }} {{ userInfo.base_profile.belief || "未填写" }}</view>
<view class="Info"> <image class="icon" src="https://images.ufutx.com/202103/11/ac43cc923f3a9f91df858a89d14e716b.png"></image>{{userInfo.base_profile.industry_sub || "未填写"}}</view>
<view class="Info"> <image class="icon" src="https://images.ufutx.com/202103/11/ab39aa5d95c43c3c3a963fdd7d12e735.png"></image>现居{{userInfo.base_profile.city || "未填写"}} · {{userInfo.base_profile.resident_city || "未填写"}}</view>
<view class="Info"> <image class="icon" src="https://images.ufutx.com/202103/11/8125ddac9473066531c7ea9971033e0d.png"></image>{{userInfo.base_profile.degree || "未填写"}} · {{userInfo.base_profile.graduate_school || "未填写"}}</view>
<view class="Info"> <image class="icon" src="https://image.fulllinkai.com/202311/27/4f350b8f5119ca398b1712ff1a5e284c.png"></image>{{userInfo.base_profile.marry_by_time ? "期望"+ userInfo.base_profile.marry_by_time+ "结婚" : "未填写"}}</view>
2024-08-16 09:14:13 +08:00
</view>
<view v-if="userInfo.base_profile.isCompleteProfile == false" class="remind">对方资料未完善一键提醒Ta完善资料<span bindtap="handleRemind" data-id="{{userInfo.base_profile.id}}">提醒Ta>></span> </view>
2024-08-16 09:14:13 +08:00
</view>
<view>
<view class="font_28 _bc-center">
<!--认证展示-->
<view class="font_26 color666 ui-approve-box">
<view class="_title">
<image src="https://images.ufutx.com/202011/26/7645858a1ae55dd7c3ef90ec7a42bfa3.png" mode="aspectFill" class="icon" ></image>
<span class="font_30 bold color333">身份认证</span>
</view>
<view class="hintMsg font_22" v-if="!approveList[0].active || !approveList[1].active">
Ta尚未进行{{ !approveList[1].active ? '真人认证' : '' }}{{ !approveList[1].active && !approveList[2].active ? '和' : '' }}{{ !approveList[2].active ? '学历认证' : '' }}
请注意交友风险
</view>
<view class="f-fbc">
<view class="_item text-center ui-mt-20 ui-mb-20" v-for="(item,index) in approveList" :key="index">
<image :src="item.active ? item.activeIcon : item.icon" class="icon" mode="aspectFit"></image>
<view class="color666 font_24">{{item.active?item.activeName:item.name}}</view>
</view>
</view>
</view>
<block v-if="userInfo.base_profile.type == 'single'">
2024-08-16 09:14:13 +08:00
<view class="ui-approve-box">
<!-- 自我描述 -->
<view class="font_26 color666">
<view class="_title">
<image src="https://images.ufutx.com/202011/26/7645858a1ae55dd7c3ef90ec7a42bfa3.png" mode="aspectFill" class="icon"></image>
<span class="font_30 bold color333">自我描述</span>
</view>
<view class="font_26 color333 _text">{{ userInfo.other_profile.introduction || 'ta什么也没有留下' }}</view>
2024-08-16 09:14:13 +08:00
</view>
<!-- 兴趣爱好 -->
<view class="font_26 color666 ui-pt-20">
<view class="_title">
<image src="https://images.ufutx.com/202011/26/7645858a1ae55dd7c3ef90ec7a42bfa3.png" mode="aspectFill" class="icon"></image>
<span class="font_30 bold color333">兴趣爱好</span>
</view>
<view class="m_idCon f-fc">
<block v-for="(item,index) in interestLabel" :key="index">
<view class="u_idCon font_26 color333" v-if="item">{{ item }}</view>
</block>
</view>
<view class="font_26 color333 _text">{{ userInfo.other_profile.interest_hobby || 'ta什么也没有留下' }}</view>
2024-08-16 09:14:13 +08:00
</view>
<!-- 期望对方 -->
<view class="font_26 color666 ui-pt-20">
<view class="_title">
<image src="https://images.ufutx.com/202011/26/7645858a1ae55dd7c3ef90ec7a42bfa3.png" mode="aspectFill" class="icon"></image>
<span class="font_30 bold color-333">期望对方</span>
</view>
<view class="m_idCon f-fc" v-if="showCondition">
<block v-for="(item,index) in conditionArr" :key="index">
<view class="u_idCon font_26 color333" v-if="item">{{ item }}</view>
</block>
</view>
<view class="font_26 color333 ui-ml-40 ui-mr-40 ui-mt-4">{{ userInfo.other_profile.ideal_mate || 'ta什么也没有留下' }}</view>
2024-08-16 09:14:13 +08:00
</view>
</view>
</block>
</view>
<block v-if="userInfo.base_profile.type == 'single' && userInfo.base_profile.id && userInfo.base_profile.self != 1">
2024-08-16 09:14:13 +08:00
<!-- 隐身访问 -->
<view class="boxStyleList f-fcc f-fdc ui-pt-30 ui-pb-30" @tap="hiddenChange">
<view class="font_32 color-theme">想要隐身访问Ta</view>
<view class="font_24 color-999 ui-pt-12 ui-pb-40">随意浏览Ta人主页不留下访问痕迹</view>
<view class="u_box_bu font_28">开启隐身访问</view>
</view>
</block>
<block v-if="userInfo.base_profile.id && userInfo.base_profile.self != 1">
2024-08-16 09:14:13 +08:00
<view class="boxStyleList">
<view class="_item border text-center recommend" v-if="userInfo.base_profile.is_friend == 1" @tap="deletefriend">
<image src="https://images.ufutx.com/202103/11/0f148a7763958c65dac1a5ce929163dc.png" mode="aspectFit" class="icon"></image>
取消{{userInfo.base_profile.sex == 1?'他':'她'}}为好友
</view>
<view class="_item1 border text-center recommend" @tap="shield">
2024-08-16 09:14:13 +08:00
<image src="https://images.ufutx.com/202103/11/182464043e2aadde7a75788eb852f0d4.png" mode="aspectFit" class="icon"></image>
拉黑并屏蔽
2024-08-16 09:14:13 +08:00
</view>
<view class="_item1 border text-center recommend" @tap="report">
<image src="https://images.ufutx.com/202103/11/182464043e2aadde7a75788eb852f0d4.png" mode="aspectFit" class="icon"></image>
举报用户
2024-08-16 09:14:13 +08:00
</view>
</view>
</block>
2024-08-16 09:14:13 +08:00
</view>
</view>
<block v-if="userInfo.base_profile.self != 1">
2024-08-16 09:14:13 +08:00
<view class="ui-bottom-operation">
<image class="ui-mask-icon" src="https://image.fulllinkai.com/202407/30/dca7024d347433e1aa893ce15a056b10.png" mode="widthFix"></image>
<view class="f-fbc ui-operation">
<button class="m_share_img btn">
<image class="ui-share-icon" src="https://image.fulllinkai.com/202407/30/a0c06b508211c748a046e22626627b5a.png" mode="widthFix"></image>
</button>
<view class="u_boBu f-fbc">
<image class="ui-operation-btn-v2" src="https://image.fulllinkai.com/202409/25/104374082c9e2bd160ee963b4f29c98f.png" mode="widthFix" @tap="modalName = 'praise'"></image>
<image v-if="userInfo.base_profile.is_followed" class="ui-operation-btn-v2" src="https://image.fulllinkai.com/202407/30/48c1254fc413725432cc8d1c22be7440.png" mode="widthFix" @tap="attention"></image>
2024-08-16 09:14:13 +08:00
<image v-else class="ui-operation-btn-v2" src="https://image.fulllinkai.com/202407/30/c7aa12666362515181a8f237a3ea48ff.png" mode="widthFix" @tap="attention"></image>
<image v-if="userInfo.base_profile.is_friend == 0" class="ui-operation-btn" src="https://image.fulllinkai.com/202407/30/58d9ec020a61a2d5370f2adb77489c18.png" mode="widthFix" @tap="contactFriendFn"></image>
2024-08-16 09:14:13 +08:00
<image v-else class="ui-operation-btn" src="https://image.fulllinkai.com/202407/30/0bfb0220f4b120dc0b0e9b4fb7a70a7b.png" mode="widthFix" @tap="jumpPath('chitchat')"></image>
</view>
</view>
</view>
</block>
</block>
<block v-else>
<!--关闭资料的用户样式-->
<view class="ui-abnormal" v-if="loading">
<view class="ui-user-pic-box">
<image class="ui-user-pic" src="https://image.fulllinkai.com/202407/29/396698823907d0ff19b889cea3ac7e9f.jpeg" mode="aspectFill"></image>
<image v-if="userInfo.base_profile.hidden_profile_status != 1" src="https://image.fulllinkai.com/202203/22/0406319a6c0998836ca7391e588010b6.png" class="ui-mask" mode="aspectFill"></image>
2024-08-16 09:14:13 +08:00
<image v-else src="https://image.fulllinkai.com/202310/25/9643efd8588e76ddc045a2e2df757d30.png" class="ui-mask" mode="aspectFill"></image>
</view>
<view class="ui-skeleton-pic"></view>
<view class="ui-skeleton-pic-v2"></view>
</view>
</block>
</block>
</view>
<block v-if="posterConfig">
<!--生成海报-->
<poster type="2d" id="poster" hide-loading="{{false}}" preload="{{false}}" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail">
</poster>
</block>
<!-- <wxShareCom :modalName.sync="modalName" :sharePic.sync="shareImg" @modalFn="modalFn"></wxShareCom>-->
<view class="cu-modal bottom-modal {{modalName == 'praise' ? 'show' : ''}}">
<view class="cu-dialog ui-pb-40 ui-praise-box ui-pl-30">
<image class="cancelIcon" src="https://images.ufutx.com/202106/01/e536a423a145ae12ab4f6dc57f58588d.png" mode="widthFix" @tap="modalName = ''"></image>
<view class="font_30 bold color333 ui-pt-30">夸夸{{userInfo.base_profile.nickname}}引起Ta的注意吧</view>
<view class="font_24 color999">最多选3个每天只有1次夸夸Ta的机会</view>
<view class="f-fcl flex-wrap">
<view class="ui-praise-item ui-mr-26 ui-mt-26 color333 font_26" :class="{'ui-active-praise' : item.state}" v-for="(item,index) in praiseList" :key="index" @tap="changePraise(item, index)">{{item.label}}</view>
</view>
<view class="f-fcc colorF font_30 ui-praise-btn" @tap="sendPraise">确定</view>
<view class="color-theme font_26 ui-pb-20" @tap="refresh">换一批</view>
2024-08-16 09:14:13 +08:00
</view>
</view>
<view class="cu-modal {{modalName == 'Modal' ? 'show' : ''}}">
<view class="cu-dialog" style="border-radius: 32rpx;width: 600rpx;">
<view class="g_apply">
<view class="m_apply_tt">
<view class="f-fcc">
<image class="u_apply_img" mode="widthFix" src="https://images.ufutx.com/202105/31/37e0eda3fe1fcc0af2cb3ca2a51d2291.png"></image>
<view class="font_34 color333 bold">打个招呼吧</view>
2024-08-16 09:14:13 +08:00
</view>
<view class="font_28 color666 ui-pt-16" v-if="!userData.rank_id">非会员每天只有3次打招呼</view>
2024-08-16 09:14:13 +08:00
</view>
<view class="text-left ff ui-pt-30 ui-pl-36 ui-pr-36">
<textarea type="text" disabled show-confirm-bar="{{false}}" placeholder="输入打招呼内容" class="inputStyle" v-model="message" @input="typing" maxlength="60"/>
<view class="text_num text-right">{{message.length}} / 60</view>
<view class="changeText text-right" @tap="getGreet(1)">
2024-08-16 09:14:13 +08:00
<image src="https://images.ufutx.com/202012/23/5b3b28530ad449fd04d51852ff1472ba.png" mode="aspectFit"></image>
<span class="font_24 color-666">换一个</span>
</view>
<view class="f-fcc">
2024-08-16 09:14:13 +08:00
<view class="u_apply_can f-fcc font_32 color999" @tap="modalName = ''">取消</view>
<view class="font_30 u_apply_btn white f-fcc" @tap="sendMsg">发送</view>
</view>
<view class="font_28 color999 text-center ui-pt-40" v-if="!userData.rank_id">还剩{{userData.surplus_num}}次,<text class="color-theme" @tap="jumpPath('vip')">成为会员</text>将不限制打招呼</view>
2024-08-16 09:14:13 +08:00
</view>
</view>
</view>
</view>
<view class="cu-modal {{modalName == 'purchase' ? 'show' : ''}}">
<view class="open_confirm_box ui-pb-36">
<view class="confirm_prompt font_32">购买会员服务后可使用此功能,请及时购买</view>
<image class="cancelIcon" src="https://images.ufutx.com/202103/12/4281e92bc8b727bae08099a3015225b1.png" mode="widthFix" @tap="purchaseShow = false"></image>
<image v-if="isIos" class="determineIcon" src="https://images.ufutx.com/202103/12/91fea69fdff1cfeaac369ddd5dd591f0.png" mode="widthFix" @tap="modalName = 'purchaseTips'"></image>
<image v-else class="determineIcon" src="https://images.ufutx.com/202103/12/91fea69fdff1cfeaac369ddd5dd591f0.png" mode="widthFix" @tap="determine('vipModal')"></image>
</view>
</view>
<view class="cu-modal {{modalName == 'purchaseTips' ? 'show' : ''}}">
<view class="open_confirm_box">
<view class="confirm_prompt font_32">此功能需要开通VIP因微信限制暂不支持直接购买会员可以通过联系客服去购买</view>
<view class="m_bu f-fbc">
<view class="u_hide_bu font_32 color-999 f-fcc" @tap="modalName = ''">取消</view>
<button class="btn service" hover-class="btn_active" @tap.stop="handleContact">
<view class="u_pur_bu u_exc font_28 text-center f-fcc">联系客服</view>
</button>
</view>
</view>
<loginDialog :loginShow="loginShow" @hiddenLogin="hiddenLogin"></loginDialog>
2024-08-16 09:14:13 +08:00
</view>
</template>
<script>
import wepy from '@wepy/core'
import https from '../../mixins/https'
import base from '../../mixins/base'
import {service} from '../../config'
wepy.page({
config: {},
mixins: [https, base],
data: {
loginShow: false,
waitBullets: [],
showingBullets: [],
lines: 3,
currentLine: 1,
isInfinite: true,
timer: null,
2024-08-16 09:14:13 +08:00
token: '',
userId: '',
userType: '',
id: '',
message: '', // 打招呼信息
loading: false,
throttle: true,
2024-08-16 09:14:13 +08:00
modalName: '', // 弹框
pairedScore: 0,
userData: {}, // 自己的数据信息
userInfo: {}, // 当前用户详情数据
profile_courtship: {},
approveList: [
{name: '实名未认证', activeName: '实名已认证', activeIcon: 'https://image.fulllinkai.com/202407/30/079c165acc114129d384a18e01b1ddf6.png', active: false, icon: 'https://image.fulllinkai.com/202202/23/1913244bb11dae8889d0fbd8d4ab39e5.png'},
{name: '真人未认证', activeName: '真人已认证', activeIcon: 'https://image.fulllinkai.com/202407/30/8f2700a35614c24f578ac6b5bf6e74c6.png', active: false, icon: 'https://image.fulllinkai.com/202202/23/c8a7f144e6eb593a5c494e700a212dac.png'},
{name: '学历未认证', activeName: '学历已认证', activeIcon: 'https://image.fulllinkai.com/202407/30/8f2700a35614c24f578ac6b5bf6e74c6.png', active: false, icon: 'https://image.fulllinkai.com/202202/23/c6e970db876230df0411eddd49d9e58f.png'}
],
praiseList: [],
praisePage: 1,
selectPraise: [],
2024-08-16 09:14:13 +08:00
interestLabel: [],
showCondition: false,
conditionArr: [],
myData: {},
isIos: false,
reportShow: false, // 举报弹框
shareImg: '', // 分享海报图片
posterConfig: null // 分享海报数据
},
methods: {
// 夸夸数据列表
getPraiseList () {
2024-08-16 09:14:13 +08:00
let vm = this
let list = []
vm.$get({url: `${service.host}/label/user/${vm.id}/list?page=${vm.praisePage}`}).then(({code, data}) => {
2024-08-16 09:14:13 +08:00
if (code == 0) {
console.log(data, '夸夸列表')
if (data.data && data.data.length > 0) {
// 已选中的夸夸重新赋值到数组中
vm.selectPraise.forEach((j) => {
list.unshift(j)
})
data.data.forEach((item) => {
list.push({label: item.label, state: false})
})
let res = new Map()
vm.praiseList = JSON.parse(JSON.stringify(list.filter((list) => !res.has(list.label) && res.set(list.label, 1))))
}
if (data.data && data.data.length >= 9) {
vm.praisePage++
} else {
vm.praisePage = 1
}
}
wx.hideLoading()
}).catch(() => {
wx.hideLoading()
})
},
// 夸夸TA换一批
refresh() {
let vm = this
// 校验是否完成注册资料
if (!vm.$signInVerify()) {
vm.loginShow = true
return
}
vm.getPraiseList()
},
// 用户已有夸夸弹幕数据
getUserPraise () {
let vm = this
vm.$get({url: `${service.host}/label/user/${vm.id}/logs`}).then(({code, data}) => {
if (code == 0) {
console.log(data, '夸夸列表1')
if (data && data.length != 0) {
vm.waitBullets = []
data.forEach(item => {
let text = item.content.join(' ')
vm.waitBullets.push({
id: Math.random() + Math.random(),
name: text,
img: item.photo,
line: 0
})
})
}
2024-08-16 09:14:13 +08:00
}
wx.hideLoading()
}).catch(() => {
wx.hideLoading()
})
},
// 保存夸夸Ta
sendPraise() {
let vm = this
// 校验是否完成注册资料
if (!vm.$signInVerify()) {
vm.loginShow = true
return
}
let list = []
vm.selectPraise.forEach((item) => {
list.push(item.label)
})
if (list.length == 0) {
vm.$showToast('请选择至少1个夸夸Ta')
return
}
let data = {
labels: list
}
if (vm.throttle) {
vm.throttle = false
vm.$showLoading('')
vm.$post({url: `${service.host}/label/user/${vm.id}`, data}).then(({code, data}) => {
if (code == 0) {
vm.$showToast('夸夸Ta已发送')
vm.modalName = ''
}
vm.throttle = true
wx.hideLoading()
}).catch(() => {
vm.throttle = true
wx.hideLoading()
})
}
},
showNextBullet() {
let vm = this
if (vm.waitBullets && vm.waitBullets.length == 0) {
return
}
// 先确定弹道,跟上一个弹道错开即可
vm.currentLine = (vm.currentLine % vm.lines) + 1
// 从等待集合里取出第一个
let currentBullet = JSON.parse(JSON.stringify(vm.waitBullets.shift()))
// vm.isInfinite &&
vm.waitBullets.push({
id: Math.random() + Math.random(),
name: currentBullet.name,
img: currentBullet.img,
isWished: false,
line: 0
})
// 设置弹幕的弹道
currentBullet.line = vm.currentLine
// 弹幕放进显示集合里,弹幕开始滚动
vm.showingBullets.push(currentBullet)
},
2024-08-16 09:14:13 +08:00
getDetail() {
let vm = this
vm.$showLoading('加载中...')
vm.$get({url: `${service.host}/other/user/${vm.id}`}).then(({code, data}) => {
2024-08-16 09:14:13 +08:00
if (code === 0) {
wx.setNavigationBarTitle({
title: data.base_profile ? data.base_profile.nickname : '单身交友'
2024-08-16 09:14:13 +08:00
})
if (data.base_profile) {
data.base_profile.city = data.base_profile.city ? data.base_profile.city.replace('市', '') : ''
data.base_profile.resident_city = data.base_profile.resident_city ? data.base_profile.resident_city.replace('市', '人') : ''
if (data.base_profile.stature) {
data.base_profile.stature = data.base_profile.stature == 139 ? '139cm以下' : data.base_profile.stature + 'cm'
2024-08-16 09:14:13 +08:00
}
if (data.base_profile.weight) {
data.base_profile.weight = data.base_profile.weight == 39 ? '39kg以下' : data.base_profile.weight + 'kg'
2024-08-16 09:14:13 +08:00
}
vm.interestLabel = data.other_profile.interest_label
2024-08-16 09:14:13 +08:00
}
if (data.approve_profile.is_approved == '1') { // 实名
2024-08-16 09:14:13 +08:00
vm.approveList[0].active = true
}
if (data.approve_profile.is_real_approved == '1') { // 真人
2024-08-16 09:14:13 +08:00
vm.approveList[1].active = true
}
if (data.approve_profile.is_educate_approved == '1') { // 学历
2024-08-16 09:14:13 +08:00
vm.approveList[2].active = true
vm.approveList[2].activeName = data.base_profile.degree ? `${data.base_profile.degree}已认证` : '已认证'
2024-08-16 09:14:13 +08:00
}
if (data.other_profile.mate_conditon instanceof Array) {
data.other_profile.mate_conditon.forEach(item => {
2024-08-16 09:14:13 +08:00
if (item.mate_condition) {
vm.conditionArr = item.mate_condition
}
})
} else {
// vm.conditionArr = Object.values(data.other_profile.mate_conditon)
2024-08-16 09:14:13 +08:00
// 插入期望ta多个城市
if (data.other_profile.city_list_claim) {
let city_list_claim_arr = data.other_profile.city_list_claim.split(',')
2024-08-16 09:14:13 +08:00
city_list_claim_arr.forEach((city) => {
vm.conditionArr.push(city)
})
}
}
if (vm.conditionArr && vm.conditionArr.length > 0) {
vm.showCondition = true
}
if (data.profile_photos && data.profile_photos.length == 0) {
data.profile_photos.push(data.base_profile.photo)
}
2024-08-16 09:14:13 +08:00
vm.userInfo = data
let num = 0
if (data.self_other_info == 1) { num = num + 50 }
if (data.self_is_real_approved == 1) { num = num + 50 }
vm.pairedScore = num
if (data.photo) {
let year = '', city = '', degree = '', industry_sub = data.base_profile.industry_sub
if (data.base_profile) {
year = data.base_profile.year || ''
city = data.base_profile.city || ''
degree = data.base_profile.degree || ''
2024-08-16 09:14:13 +08:00
}
vm.posterConfig = {
width: 420,
height: 336,
backgroundColor: '#fff',
debug: false,
texts: [
{x: 20, y: 248 + 26, lineHeight: 22, width: 200, text: `${year} | ${city}`, fontSize: 26, color: '#fff', zIndex: 99},
{x: 20, y: 288 + 26, width: 200, lineHeight: 22, text: `${degree} | ${industry_sub}`, fontSize: 26, color: '#fff', zIndex: 99}
],
images: [
{url: data.base_profile.photo, width: 420, height: 336, y: 0, x: 0},
2024-08-16 09:14:13 +08:00
{url: 'https://image.fulllinkai.com/202206/20/be5b39dde1ad4720893b2e3c52b4480d.png', width: 420, height: 100, y: 236, x: 0},
{url: 'https://image.fulllinkai.com/202206/20/bd732960011f55fed0e5e7d623118494.png', width: 136, height: 40, y: 276, x: 264}
]
}
vm.$nextTick(() => {
setTimeout(() => {
vm.$wx.selectComponent('#poster').onCreate(true, vm)
}, 100)
})
}
vm.loading = true
}
wx.hideLoading()
}).catch(err => {
wx.hideLoading()
console.log(err)
})
},
// 选择夸夸选项
changePraise(e, index) {
let vm = this
if (!vm.praiseList[index].state) {
if (vm.selectPraise && vm.selectPraise.length >= 3) {
vm.$showToast('最多只能选择3个')
return
}
vm.praiseList[index].state = true
vm.selectPraise.push({label: e.label, state: true})
} else {
vm.praiseList[index].state = false
vm.selectPraise = vm.selectPraise.filter(item => { return item.label != e.label })
}
},
2024-08-16 09:14:13 +08:00
// 关注
attention() {
let vm = this
// 校验是否完成注册资料
if (!vm.$signInVerify()) {
vm.loginShow = true
return
}
2024-08-16 09:14:13 +08:00
vm.$showLoading('')
vm.$post({url: `${service.host}/follow/users/119488`}).then(({code, data}) => {
if (code == 0) {
if (data.is_followed) {
vm.$showToast(`已关注`)
vm.userInfo.is_followed = true
vm.userInfo.fans_count = vm.userInfo.fans_count + 1
} else {
vm.userInfo.is_followed = false
vm.userInfo.fans_count = vm.userInfo.fans_count - 1
vm.$showToast(`已取消关注`)
}
}
wx.hideLoading()
}).catch(() => {
wx.hideLoading()
})
},
// 取消好友
deletefriend() {
let vm = this
wx.showModal({
title: '温馨提示',
content: '是否确认取消该好友',
success: function (res) {
if (res.confirm) {
vm.$showLoading('')
vm.$delete({url: `${service.host}/friend/user/${vm.id}`}).then(({code, data}) => {
2024-08-16 09:14:13 +08:00
if (code == 0) {
vm.$showToast('好友已取消')
setTimeout(() => {
wx.navigateBack({delta: 1})
}, 1200)
2024-08-16 09:14:13 +08:00
}
wx.hideLoading()
}).catch(() => {
wx.hideLoading()
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
// 对Ta不感兴趣
dislikeFn() {
let vm = this
// 校验是否完成注册资料
if (!vm.$signInVerify()) {
vm.loginShow = true
return
}
2024-08-16 09:14:13 +08:00
wx.showModal({
title: '温馨提示',
content: '是否对Ta不感兴趣标记为不感兴趣下次系统将不再为您推荐Ta.',
confirmText: '不感兴趣',
success: function (res) {
if (res.confirm) {
vm.$showLoading('')
vm.$post({url: `${service.host}/dislike/${vm.id}`}).then(({code, data}) => {
if (code == 0) {
vm.$showToast('已标记')
}
wx.hideLoading()
}).catch(() => {
wx.hideLoading()
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
// 加入黑名单并屏蔽
shield() {
let vm = this
// 校验是否完成注册资料
if (!vm.$signInVerify()) {
vm.loginShow = true
return
}
2024-08-16 09:14:13 +08:00
wx.showModal({
title: '加入黑名单',
content: '拉黑后,对方将无法访问、关注、发送好友请求,也无法给你发消息,可以在【设置-黑名单】中取消',
success: function (res) {
if (res.confirm) {
vm.$showLoading('')
vm.$post({url: `${service.host}/user/${vm.id}/linking/blacklist`}).then(({code, data}) => {
2024-08-16 09:14:13 +08:00
if (code == 0) {
vm.$showToast(`已加入黑名单`)
setTimeout(() => {
wx.navigateBack({delta: 1})
2024-08-16 09:14:13 +08:00
}, 1200)
}
wx.hideLoading()
}).catch(() => {
wx.hideLoading()
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
// 举报
report() {
let vm = this
// 校验是否完成注册资料
if (!vm.$signInVerify()) {
vm.loginShow = true
return
}
2024-08-16 09:14:13 +08:00
vm.reportShow = false
wx.navigateTo({url: `/pages/users/report?id=${vm.id}&type=details`})
},
// 隐身访问处理
hiddenChange() {
let vm = this
// 校验是否完成注册资料
if (!vm.$signInVerify()) {
vm.loginShow = true
return
}
vm.$post({url: `${service.host}/other/user/${vm.id}/hidden`}).then(({code, data}) => {
2024-08-16 09:14:13 +08:00
if (code == 0) {
vm.$showToast(`已开启隐身访问`)
2024-08-16 09:14:13 +08:00
}
wx.hideLoading()
}).catch(() => {
wx.hideLoading()
})
},
// 发送打招呼消息
sendMsg() {
let vm = this
let data = {
message: vm.message
}
if (vm.message == '') {
vm.$showToast('打招呼消息不能为空')
return
}
vm.$post({url: `${service.host}/friend/users/${vm.id}/v3`, data}).then(({code, data}) => {
if (code == 0) {
vm.modalName = ''
vm.$showToast('消息已发送')
}
wx.hideLoading()
}).catch(() => {
wx.hideLoading()
})
},
// 获取打招呼信息
getGreet(state) {
let vm = this
vm.$get({url: `${service.host}/chat/greet/log?status=${state}`}).then(({code, data}) => {
2024-08-16 09:14:13 +08:00
if (code == 0) {
vm.message = data.name
}
}).catch(() => {
})
},
// 联系朋友
contactFriendFn() {
let vm = this
// 校验是否完成注册资料
if (!vm.$signInVerify()) {
vm.loginShow = true
return
2024-08-16 09:14:13 +08:00
}
vm.getGreet(0)
},
// 联系客服
handleContact() {
wx.previewImage({
current: 'https://image.fulllinkai.com/202310/23/2a132a4978ef87d532a817041e425c26.png',
urls: ['https://image.fulllinkai.com/202310/23/2a132a4978ef87d532a817041e425c26.png']
})
},
modalFn(val) {
let vm = this
vm.modalName = val
},
// 海报生成成功回调
onPosterSuccess(e) {
let vm = this
vm.shareImg = e.$wx.detail
// vm.modalName = 'showPic'
wx.hideLoading()
console.log(vm.shareImg)
},
jumpPath(type) {
let vm = this
// 校验是否完成注册资料
if (!vm.$signInVerify()) {
vm.loginShow = true
return
}
2024-08-16 09:14:13 +08:00
if (type == 'chitchat') {
wx.navigateTo({url: `/pages/news/groupChitchat?id=${vm.userInfo.id}&name=${encodeURIComponent(vm.userInfo.nickname)}&pic=${vm.userInfo.photo}&type=${vm.userInfo.type}`})
} else if (type == 'vip' && !vm.isIos) {
wx.navigateTo({url: `/pages/users/upgradeVIP`})
}
vm.modalName = ''
},
hiddenLogin() {
let vm = this
vm.loginShow = false
2024-08-16 09:14:13 +08:00
}
},
onHide() {
let vm = this
clearTimeout(this.timer)
vm.waitBullets = []
},
2024-08-16 09:14:13 +08:00
onShow() {
let vm = this
const info = wx.getSystemInfoSync()
vm.token = wx.getStorageSync('token')
if (info.platform === 'android') {
vm.isIos = false
} else {
vm.isIos = true
}
},
onLoad(e) {
let vm = this
vm.userData = wx.getStorageSync('userInfo')
2024-08-16 09:14:13 +08:00
vm.userId = wx.getStorageSync('user_id')
vm.userType = wx.getStorageSync('type')
vm.id = e.id
vm.getDetail()
vm.getPraiseList()
vm.getUserPraise()
vm.showNextBullet()
vm.timer = setInterval(() => {
vm.showNextBullet()
}, 3000)
2024-08-16 09:14:13 +08:00
}
})
</script>
<config>
{
navigationBarTitleText: '单身交友',
enablePullDownRefresh: false,
navigationBarBackgroundColor: '#f5f5f5',
backgroundColorTop: '#f5f5f5',
backgroundColorBottom: '#f5f5f5',
2024-08-16 09:14:13 +08:00
usingComponents: {
'poster': 'plugin://FL-plugin/poster',
loginDialog: '~@/components/loginDialog',
2024-08-16 09:14:13 +08:00
}
}
</config>