561 lines
13 KiB
Vue
561 lines
13 KiB
Vue
<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> |