Ai_GirlFriend/xuniYou/pages/friends/cohesion.vue

561 lines
13 KiB
Vue
Raw Normal View History

2026-01-31 19:15:41 +08:00
<template>
<view class="page fc">
<uni-nav-bar fixed statusBar left-icon="left" right-icon="help" background-color="transparent" :border="false"
:style="{ '--right-padding': getMenuInfoList + 'px' }" @clickLeft="back" @clickRight="help"
title="亲密度"></uni-nav-bar>
<view class="back"></view>
<scroll-view scroll-y="true" class="scroll-view f1" show-scrollbar>
<image class="logo"
src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/22d88b56e12259070e204f98c81f6adf.png"
mode="widthFix"></image>
<view class="body">
<view class="user faj">
<image class="user_avatar" :src="myavatar ? myavatar : '/static/images/avatar.png'"
mode="aspectFill"></image>
<view class="user_title">亲密度等级{{ friendData.intimacy_level ? friendData.intimacy_level :
'0' }}
</view>
<image class="user_avatar"
:src="friendData.avatar ? friendData.avatar : '/static/images/avatar.png'"
mode="aspectFill"></image>
<view class="user_content faj">
<image
src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/67a9cb232b0d8405963078900eca32ab.png"
mode="widthFix"></image>
<view class="user_number faj">
{{ friendData.intimacy_level ? friendData.intimacy_level : '0' }}</view>
</view>
</view>
<view class="list">
<image class="list_back"
src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/506198f54b1b616aa950275e5523888c.png"></image>
<view class="list_content">
<view class="list_head fa">
<view class="list_grade faj">
{{ friendData.intimacy_level ? friendData.intimacy_level : '0' }}</view>
<view class="list_progress">
<view class="list_plan fa"><text>{{ friendData.intimacy ? friendData.intimacy : '0'
}}</text>/{{ nextLevelIntimacy }}</view>
<view class="list_line">
<text :style="{ width: calculateProgressWidth() + 'rpx' }"></text>
</view>
</view>
<!-- intimacy_level等级
intimacy总亲密度
在列表中根据去下一等级的根据等级从列表获取 -->
</view>
<view class="list_module fa">
<view class="list_item fa">
<view class="list_heart faj">
<image
:src="friendData.intimacy_level >= 0 ? '/static/images/intimacy_logo.png' : '/static/images/intimacy_logoA.png'"
mode="widthFix"></image>
<view class="list_dight faj">0</view>
</view>
<view class="list_ellipsis"></view>
</view>
<view class="list_item fa">
<view class="list_heart faj">
<image
:src="friendData.intimacy_level >= 1 ? '/static/images/intimacy_logo.png' : '/static/images/intimacy_logoA.png'"
mode="widthFix"></image>
<view class="list_dight faj">1</view>
</view>
<view class="list_ellipsis"></view>
</view>
<view class="list_item fa">
<view class="list_heart faj">
<image
:src="friendData.intimacy_level >= 2 ? '/static/images/intimacy_logo.png' : '/static/images/intimacy_logoA.png'"
mode="widthFix"></image>
<view class="list_dight faj">2</view>
</view>
<view class="list_ellipsis"></view>
</view>
<view class="list_item fa">
<view class="list_heart faj">
<image
:src="friendData.intimacy_level >= 3 ? '/static/images/intimacy_logo.png' : '/static/images/intimacy_logoA.png'"
mode="widthFix"></image>
<view class="list_dight faj">3</view>
</view>
<view class="list_ellipsis"></view>
</view>
<view class="list_item fa">
<view class="list_heart faj">
<image
:src="friendData.intimacy_level >= 4 ? '/static/images/intimacy_logo.png' : '/static/images/intimacy_logoA.png'"
mode="widthFix"></image>
<view class="list_dight faj">4</view>
</view>
<view class="list_ellipsis"></view>
</view>
<view class="list_item fa">
<view class="list_heart faj">
<image
:src="friendData.intimacy_level >= 5 ? '/static/images/intimacy_logo.png' : '/static/images/intimacy_logoA.png'"
mode="widthFix"></image>
<view class="list_dight faj">5</view>
</view>
<!-- <view class="list_ellipsis"></view> -->
</view>
</view>
<view class="list_detail">
<view class="list_all" v-for="(item, index) in intimacyConfigListsInfo" :key="index"
v-show="item.level <= friendData.intimacy_level" @click="goback()">
<view class="list_table fa sb">
<view class="list_greade fa f1">
<view class="list_picture">
<view class="list_ellipsiss"></view>
<view class="list_rating faj">Lv.{{ item.level ? item.level : '' }}</view>
<image :src="item.image ? item.image : '/static/images/intimacy_b1.png'"
mode="widthFix"></image>
</view>
<view class="list_text f1 fa">
<view class="list_text_content f1">
<view class="list_title h1">{{ item.name ? item.name : '' }}</view>
<view class="list_name h1">{{ item.title ? item.title : '' }}</view>
</view>
<view class="list_btn faj" v-if="index == 0">去聊天</view>
<view class="list_btn faj" v-if="index == 1">去语音</view>
<view class="list_btn faj" v-if="index >1">去体验</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
import {
IntimacyConfigLists,
} from '@/utils/api.js'
import notHave from '@/components/not-have.vue';
import topSafety from '@/components/top-safety.vue';
import { userInfo } from 'node:os';
export default {
components: {
notHave,
topSafety,
},
data() {
return {
intimacyConfigListsInfo: [],
friendData: {},
myavatar: '',
nextLevelIntimacy: 999,
getMenuInfoList: ''
}
},
onLoad(options) {
this.friendData = JSON.parse(decodeURIComponent(options.friendData))
const userinfo = uni.getStorageSync('userinfo');
if (userinfo) {
this.myavatar = userinfo.avatar;
}
this.intimacyConfigLists()
},
onShow() {
// #ifdef MP-WEIXIN
this.getMenuInfo()
// #endif
},
methods: {
goback() {
uni.navigateBack({
delta: 1,
});
},
intimacyConfigLists() {
IntimacyConfigLists().then(res => {
if (res.code == 1) {
this.intimacyConfigListsInfo = res.data
for (let i = 0; i < this.intimacyConfigListsInfo.length; i++) {
if (this.intimacyConfigListsInfo[i].level == this.friendData.intimacy_level + 1) {
this.nextLevelIntimacy = this.intimacyConfigListsInfo[i].intimacy
}
}
console.log(this.nextLevelIntimacy)
console.log('测试数据:', this.friendData.intimacy);
console.log('测试数据:', this.nextLevelIntimacy);
console.log('测试计算宽度:', this.calculateProgressWidth());
} else {
uni.showToast({
title: res.msg,
icon: 'none',
position: 'top'
})
}
})
},
calculateProgressWidth() {
if (this.friendData.intimacy == null || this.nextLevelIntimacy == null) {
return 0;
}
// 根据比例计算实际宽度确保不超过最大宽度500rpx
const actualWidth = (this.friendData.intimacy / this.nextLevelIntimacy) * 500;
const result = Math.min(actualWidth, 500);
// 打印计算过程和结果
console.log('当前亲密度:', this.friendData.intimacy); // 应该打印 50
console.log('下一等级所需亲密度:', this.nextLevelIntimacy); // 应该打印 200
console.log('计算比例:', this.friendData.intimacy / this.nextLevelIntimacy); // 应该打印 0.25
console.log('计算宽度:', actualWidth); // 应该打印 125
console.log('最终结果:', result); // 应该打印 125
return result;
},
back() {
uni.navigateBack({
delta: 1,
});
},
help() {
uni.navigateTo({
url: '/pages/friends/dayCohesion?id=' + this.friendData.friend.id
});
},
todiary() {
uni.navigateTo({
url: '/pages/chat/diary'
});
},
getMenuInfo() {
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
const systemInfo = uni.getSystemInfoSync();
console.log('胶囊信息:', menuButtonInfo);
// 胶囊宽度
const capsuleWidth = menuButtonInfo.width;
// 胶囊距离右侧的距离 = 屏幕宽度 - 胶囊右边界的x坐标
const distanceFromRight = systemInfo.windowWidth - menuButtonInfo.right;
console.log('胶囊宽度:', capsuleWidth);
console.log('胶囊距离右侧的距离:', distanceFromRight);
this.getMenuInfoList = capsuleWidth + distanceFromRight;
return {
width: capsuleWidth,
distanceFromRight: distanceFromRight,
menuButtonInfo: menuButtonInfo
};
},
}
}
</script>
<style>
page {
background: #F6F8FA;
}
</style>
<style>
.page {
position: relative;
height: 100vh;
overflow: hidden;
}
.scroll-view {
overflow: hidden;
}
.body {
position: relative;
}
.back {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1624rpx;
background: linear-gradient(180deg, #FFE3E9 0%, #FAF0F8 100%);
}
.logo {
position: absolute;
left: 0;
right: 0;
top: -40rpx;
margin: 0 auto;
width: 635rpx;
display: block;
}
.body {
position: relative;
margin: 40rpx 0 0 0;
}
.user {
position: relative;
margin: 200rpx 0 0 0;
}
.user_avatar {
width: 120rpx;
height: 120rpx;
display: block;
border-radius: 100rpx;
}
.user_title {
margin: 0 30rpx;
padding: 0 20rpx;
font-weight: 400;
font-size: 24rpx;
color: #FFFFFF;
line-height: 50rpx;
background: linear-gradient(180deg, #F55C7F 0%, #FE4EC0 100%);
border-radius: 210rpx;
}
.user_content {
position: absolute;
left: 0;
right: 0;
top: -180rpx;
margin: 0 auto;
}
.user_content image {
position: relative;
width: 175rpx;
height: 160rpx;
display: block;
}
.user_number {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
font-size: 55rpx;
color: #FFFFFF;
line-height: 50rpx;
}
.list {
position: relative;
margin: 52rpx 0 0 0;
}
.list_back {
position: absolute;
width: 100%;
height: 100%;
display: block;
}
.list_content {
position: relative;
padding: 50rpx 40rpx;
}
.list_head {
position: relative;
padding: 0 0 0 30rpx;
}
.list_grade {
position: relative;
padding: 18rpx 25rpx;
font-weight: 700;
font-size: 60rpx;
color: #F366B7;
line-height: 50rpx;
background: linear-gradient(155deg, rgba(245, 217, 255, 0.24) 0%, rgba(255, 144, 207, 0.5) 100%, rgba(255, 144, 207, 0.5) 100%);
border: 2rpx solid #FFFFFF;
border-radius: 100rpx;
}
.list_progress {
position: relative;
margin: 0 0 0 26rpx;
}
.list_plan {
position: relative;
margin: 0 0 0 38rpx;
font-weight: 700;
font-size: 28rpx;
color: #F7588F;
line-height: 50rpx;
}
.list_plan text {
font-size: 36rpx;
}
.list_line {
position: relative;
margin: 12rpx 0 0 0;
width: 500rpx;
height: 4rpx;
background: #FFD9F1;
}
.list_line text {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
width: 80rpx;
height: 4rpx;
background: #F7588F;
}
.list_module {
position: relative;
margin: 62rpx 0 0 20rpx;
}
.list_item {
position: relative;
}
.list_heart {
position: relative;
width: 56rpx;
height: 56rpx;
}
.list_heart image {
width: 100%;
height: 100%;
}
.list_dight {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
font-weight: 400;
font-size: 24rpx;
color: #FFFFFF;
line-height: 30rpx;
}
.list_ellipsis {
position: relative;
width: 55rpx;
height: 20rpx;
background-image: radial-gradient(circle, #ccc 3rpx, transparent 3rpx);
background-size: 21% 100%;
background-repeat: repeat-x;
}
.list_detail {
position: relative;
}
.list_all {
position: relative;
margin: 20rpx 0 0 0;
}
.list_ellipsiss {
position: absolute;
left: 0;
right: 0;
top: -160rpx;
width: 20rpx;
height: 70rpx;
background-image: radial-gradient(circle, #F661B5 2rpx, transparent 2rpx);
background-size: 100% 15%;
background-repeat: repeat-y;
margin: 0 auto;
}
.list_rating {
position: absolute;
left: 0;
right: 0;
top: -70rpx;
font-weight: 500;
font-size: 30rpx;
color: #FF6DC5;
line-height: 50rpx;
margin: 0 auto;
}
.list_table {
position: relative;
margin: 18rpx 0 0 0;
}
.list_greade {
position: relative;
margin: 164rpx 0 0 0;
}
.list_picture {
position: relative;
}
.list_picture image {
width: 96rpx;
height: 96rpx;
display: block;
flex-shrink: 0;
border-radius: 100rpx;
}
.list_text {
position: relative;
margin: 0 0 0 18rpx;
overflow: hidden;
}
.list_text_content {
position: relative;
overflow: hidden;
}
.list_title {
width: 350rpx;
font-weight: 500;
font-size: 30rpx;
color: #222222;
line-height: 50rpx;
}
.list_name {
width: 350rpx;
font-weight: 400;
font-size: 24rpx;
color: #909090;
line-height: 50rpx;
}
.list_btn {
padding: 4rpx 35rpx;
font-weight: 500;
font-size: 30rpx;
color: #FFFFFF;
line-height: 50rpx;
background: #F661B5;
border-radius: 12rpx;
}
.uni-navbar__header-btns {
padding-right: var(--right-padding, 0);
}
.uni-navbar__header-btns-right.data-v-26544265 {
width: 60rpx !important;
}
</style>