ufutx_love_mp/src/pages/home/information.wpy
2024-10-18 15:29:28 +08:00

1330 lines
46 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<style lang="less" scoped>
@import url(../../styles/theme.less);
page {
background-color: #f5f5f5;
}
.ui-information{
width: 100vw;
overflow-x: hidden;
}
.ui-abnormal{
width: 100%;
padding-bottom: 300rpx;
background: #f5f5f5;
.ui-user-pic-box{
padding: 0rpx 30rpx;
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{
padding: 0rpx 30rpx;
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;
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;
}
.ui-bullet-item[data-line='2'] {
top: 86rpx;
}
.ui-bullet-item[data-line='3'] {
top: 146rpx;
}
@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;
}
.ui-share-icon, .m_share_img{
width: 140rpx;
height: 140rpx;
}
.u_boBu {
width: 508rpx;
height: 100rpx;
background: #ffffff;
box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
border-radius: 50rpx;
padding: 0 34rpx 0 50rpx;
.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;
}
.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;
}
}
.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">
<view class="ui-abnormal">
<view class="ui-user-pic-box">
<image class="ui-user-pic" :src="userInfo.base_profile.photo" 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'">
<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>
</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>
</view>
<image :src="userInfo.base_profile.photo" class="_photo flo_r" mode="aspectFill" @tap="$previewImage(userInfo.base_profile.photo)"></image>
<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>
</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>
</view>
<view v-if="userInfo.base_profile.isCompleteProfile == false" class="remind">对方资料未完善一键提醒Ta完善资料<span bindtap="handleRemind" data-id="{{userInfo.base_profile.id}}">提醒Ta>></span> </view>
</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'">
<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>
</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="font_26 color333 _text">{{ userInfo.other_profile.interest_hobby || 'ta什么也没有留下' }}</view>
</view>
<!-- 兴趣标签 -->
<view class="font_26 color666 ui-pt-20" v-if="interestLabel && interestLabel.length > 0">
<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>
<!-- 期望对方 -->
<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="conditionArr && conditionArr.length > 0">
<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>
</view>
</view>
</block>
</view>
<block v-if="userInfo.base_profile.type == 'single' && !userInfo.other_info.is_self && !userInfo.other_info.hidden">
<!-- 隐身访问 -->
<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.other_info.is_self">
<view class="boxStyleList">
<view class="_item border text-center recommend" v-if="userInfo.other_info.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">
<image src="https://images.ufutx.com/202103/11/182464043e2aadde7a75788eb852f0d4.png" mode="aspectFit" class="icon"></image>
拉黑并屏蔽
</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>
举报用户
</view>
</view>
</block>
</view>
</view>
<block v-if="!userInfo.other_info.is_self">
<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" open-type="share">
<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>
<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.other_info.is_friend == 0" class="ui-operation-btn" src="https://image.fulllinkai.com/202407/30/58d9ec020a61a2d5370f2adb77489c18.png" mode="widthFix" @tap="contactFriendFn"></image>
<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="userInfo.base_profile.photo" 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>
<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>
<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>
</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>
</view>
<view class="font_28 color666 ui-pt-16" v-if="!userData.rank_id">非会员每天只有3次打招呼</view>
</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)">
<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">
<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">还剩{{userInfo.other_info.surplus_num}}次,<text class="color-theme" @tap="jumpPath('vip')">成为会员</text>将不限制打招呼</view>
</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="modalName = ''"></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>
</view>
<loginDialog :loginShow="loginShow" @hiddenLogin="hiddenLogin"></loginDialog>
</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,
token: '',
userId: '',
userType: '',
id: '',
message: '', // 打招呼信息
loading: false,
throttle: true,
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: [],
interestLabel: [],
conditionArr: [],
myData: {},
isIos: false,
reportShow: false, // 举报弹框
shareImg: '', // 分享海报图片
posterConfig: null // 分享海报数据
},
methods: {
// 夸夸数据列表
getPraiseList () {
let vm = this
let list = []
vm.$get({url: `${service.host}/label/user/${vm.id}/list?page=${vm.praisePage}`}).then(({code, data}) => {
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
})
})
}
}
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)
},
getDetail() {
let vm = this
vm.$showLoading('加载中...')
vm.$get({url: `${service.host}/other/user/${vm.id}`}).then(({code, data}) => {
if (code === 0) {
wx.setNavigationBarTitle({
title: data.base_profile ? data.base_profile.nickname : '单身交友'
})
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'
}
if (data.base_profile.weight) {
data.base_profile.weight = data.base_profile.weight == 39 ? '39kg以下' : data.base_profile.weight + 'kg'
}
vm.interestLabel = data.other_profile.interest_label
}
if (data.approve_profile.is_approved == '1') { // 实名
vm.approveList[0].active = true
}
if (data.approve_profile.is_real_approved == '1') { // 真人
vm.approveList[1].active = true
}
if (data.approve_profile.is_educate_approved == '1') { // 学历
vm.approveList[2].active = true
vm.approveList[2].activeName = data.base_profile.degree ? `${data.base_profile.degree}已认证` : '已认证'
}
if (data.other_profile.mate_conditon instanceof Array) {
data.other_profile.mate_conditon.forEach(item => {
if (item.mate_condition) {
vm.conditionArr = item.mate_condition
}
})
} else {
// vm.conditionArr = Object.values(data.other_profile.mate_conditon)
// 插入期望ta多个城市
if (data.other_profile.city_list_claim) {
let city_list_claim_arr = data.other_profile.city_list_claim.split(',')
city_list_claim_arr.forEach((city) => {
vm.conditionArr.push(city)
})
}
}
if (data.profile_photos && data.profile_photos.length == 0) {
data.profile_photos.push(data.base_profile.photo)
}
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.base_profile.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 || ''
}
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},
{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}
]
}
console.log(vm.posterConfig, '7777777777777')
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 })
}
},
// 关注
attention() {
let vm = this
// 校验是否完成注册资料
if (!vm.$signInVerify()) {
vm.loginShow = true
return
}
if (vm.throttle) {
vm.throttle = false
vm.$post({url: `${service.host}/follow/user/${vm.id}`}).then(({code, data}) => {
if (code == 0) {
if (!vm.userInfo.base_profile.is_followed) {
vm.$showToast(`已关注`)
vm.userInfo.base_profile.is_followed = true
vm.userInfo.base_profile.fans_count = vm.userInfo.base_profile.fans_count + 1
} else {
vm.userInfo.base_profile.is_followed = false
vm.userInfo.base_profile.fans_count = vm.userInfo.base_profile.fans_count - 1
vm.$showToast(`已取消关注`)
}
}
vm.throttle = true
}).catch(() => {
vm.throttle = true
})
}
},
// 取消好友
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}) => {
if (code == 0) {
vm.$showToast('好友已取消')
setTimeout(() => {
wx.navigateBack({delta: 1})
}, 1200)
}
wx.hideLoading()
}).catch(() => {
wx.hideLoading()
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
// 对Ta不感兴趣
dislikeFn() {
let vm = this
// 校验是否完成注册资料
if (!vm.$signInVerify()) {
vm.loginShow = true
return
}
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
}
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}) => {
if (code == 0) {
vm.$showToast(`已加入黑名单`)
setTimeout(() => {
wx.navigateBack({delta: 1})
}, 1200)
}
wx.hideLoading()
}).catch(() => {
wx.hideLoading()
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
// 举报
report() {
let vm = this
// 校验是否完成注册资料
if (!vm.$signInVerify()) {
vm.loginShow = true
return
}
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
}
if (!vm.userData.rank_id) {
vm.modalName = 'purchase'
return
}
vm.$post({url: `${service.host}/other/user/${vm.id}/hidden`}).then(({code, data}) => {
if (code == 0) {
vm.$showToast(`已开启隐身访问`)
vm.userInfo.other_info.hidden = true
}
wx.hideLoading()
}).catch(() => {
wx.hideLoading()
})
},
// 发送打招呼消息
sendMsg() {
let vm = this
let data = {
message: vm.message
}
if (vm.message == '') {
vm.$showToast('打招呼消息不能为空')
return
}
if (vm.throttle) {
vm.throttle = false
vm.$post({url: `${service.host}/other/user/${vm.id}/friend`, data}).then(({code, data}) => {
if (code == 0) {
vm.modalName = ''
vm.$showToast('消息已发送')
if (vm.userInfo.other_info.surplus_num) {
vm.userInfo.other_info.surplus_num--
}
}
vm.throttle = true
wx.hideLoading()
}).catch(() => {
vm.throttle = true
wx.hideLoading()
})
}
},
// 获取打招呼信息
getGreet(state) {
let vm = this
vm.$get({url: `${service.host}/chat/greet/log?status=${state}`}).then(({code, data}) => {
if (code == 0) {
vm.message = data.name
vm.modalName = 'Modal'
}
}).catch(() => {
})
},
// 联系朋友
contactFriendFn() {
let vm = this
// 校验是否完成注册资料
if (!vm.$signInVerify()) {
vm.loginShow = true
return
}
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
wx.hideLoading()
console.log(vm.shareImg)
},
jumpPath(type) {
let vm = this
// 校验是否完成注册资料
if (!vm.$signInVerify()) {
vm.loginShow = true
return
}
if (type == 'chitchat') {
wx.navigateTo({url: `/pages/news/chitchat?id=${vm.id}&name=${encodeURIComponent(vm.userInfo.base_profile.nickname)}&pic=${vm.userInfo.base_profile.photo}&type=${vm.userInfo.base_profile.type}&real=${vm.userInfo.approve_profile.is_real_approved}`})
} else if (type == 'vip' && !vm.isIos) {
wx.navigateTo({url: `/pages/users/upgradeVIP`})
}
vm.modalName = ''
},
hiddenLogin() {
let vm = this
vm.loginShow = false
}
},
onShareAppMessage() {
let vm = this
let openid = wx.getStorageSync('openid')
let url = `/pages/home/information?id=${vm.id}&from_openid=${openid}&share_user_id=${vm.id}&from_user_id=${vm.id}`
return {
title: '觉得Ta很不错可以认识一下',
path: url,
imageUrl: vm.shareImg,
success: function(res) {
wx.showToast({
title: '转发成功',
icon: 'success',
duration: 1500
})
let shareTickets = res.shareTickets
if (shareTickets.length == 0) {
return false
}
},
fail: function(res) {
// 转发失败
}
}
},
onHide() {
let vm = this
clearTimeout(this.timer)
vm.waitBullets = []
},
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')
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)
}
})
</script>
<config>
{
navigationBarTitleText: '单身交友',
enablePullDownRefresh: false,
navigationBarBackgroundColor: '#f5f5f5',
backgroundColorTop: '#f5f5f5',
backgroundColorBottom: '#f5f5f5',
usingComponents: {
'poster': 'plugin://FL-plugin/poster',
loginDialog: '~@/components/loginDialog',
}
}
</config>