734 lines
16 KiB
Vue
734 lines
16 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">亲密度等级{{ getBobbiesList.level ? getBobbiesList.level : 0 }}级</view>
|
||
<image class="user_avatar"
|
||
:src="loverBasicList.image_url ? loverBasicList.image_url : '/static/images/avatar.png'"
|
||
mode="aspectFill"></image>
|
||
<view class="user_content faj">
|
||
<image
|
||
src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/961f20f64150521c08d00889e45d44bd.png"
|
||
mode="widthFix"></image>
|
||
<view class="user_number faj">{{ getBobbiesList.level ? getBobbiesList.level : 0 }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="module fa">
|
||
<view class="module_contentA faj">
|
||
<image
|
||
src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/9c05cdd001973d7ccba80067a1942a9a.png">
|
||
</image>
|
||
<view class="module_module faj fc">
|
||
<view class="module_number">10</view>
|
||
<view class="module_title">日记</view>
|
||
</view>
|
||
</view>
|
||
<view class="module_contentB faj">
|
||
<image
|
||
src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/59ac97bf010703b8ecdcf57deb52b468.png">
|
||
</image>
|
||
<view class="module_module faj fc">
|
||
<view class="module_number">10</view>
|
||
<view class="module_title">聊天</view>
|
||
</view>
|
||
</view>
|
||
<view class="module_contentC faj">
|
||
<image
|
||
src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/59ac97bf010703b8ecdcf57deb52b468.png">
|
||
</image>
|
||
<view class="module_module faj fc">
|
||
<view class="module_number">20</view>
|
||
<view class="module_title">礼物</view>
|
||
</view>
|
||
</view>
|
||
<view class="module_contentD faj">
|
||
<image
|
||
src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/24d05a683e41e5492d4afeb0338dfa1f.png">
|
||
</image>
|
||
<view class="module_module faj fc">
|
||
<view class="module_number">10</view>
|
||
<view class="module_title">语音通话</view>
|
||
</view>
|
||
</view>
|
||
<view class="module_contentE faj">
|
||
<image
|
||
src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/59ac97bf010703b8ecdcf57deb52b468.png">
|
||
</image>
|
||
<view class="module_module faj fc">
|
||
<view class="module_number">5</view>
|
||
<view class="module_title">照片</view>
|
||
</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">{{ getBobbiesList.level ? getBobbiesList.level : 0 }}</view>
|
||
<view class="list_progress">
|
||
<view class="list_plan fa"><text>{{ getBobbiesList.intimacy ? getBobbiesList.intimacy :
|
||
0 }}</text>/{{ getBobbiesList.next_level_intimacy ?
|
||
getBobbiesList.next_level_intimacy : 0 }}</view>
|
||
<!-- <view class="list_line" :style="{ width: getBobbiesList.next_level_intimacy + 'px' }">
|
||
<text
|
||
:style="{ width: (getBobbiesList.next_level_intimacy * getBobbiesList.intimacy_percent) + 'px' }"></text>
|
||
</view> -->
|
||
<view class="list_line">
|
||
<text :style="{ width: calculateProgressWidth() + 'rpx' }"></text>
|
||
</view>
|
||
<!--用用户接口获取 next_level_intimacy//总亲密度,intimacy当前的,intimacy_percent百分比,还有等级level -->
|
||
</view>
|
||
</view>
|
||
<view class="list_module fa">
|
||
<view class="list_item fa">
|
||
<view class="list_heart faj">
|
||
<image
|
||
:src="getBobbiesList.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="getBobbiesList.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="getBobbiesList.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="getBobbiesList.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="getBobbiesList.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="getBobbiesList.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>
|
||
<!-- 根据等级level来点亮 -->
|
||
</view>
|
||
<view class="list_detail">
|
||
<view class="list_all" v-for="(item, index) in getLevelListInfo" :key="index">
|
||
<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" @click="toChat(item.buttton)">
|
||
去聊天</view>
|
||
<view class="list_btn faj" v-if="index == 1" @click="toChat(item.buttton)">
|
||
去语音</view>
|
||
<view class="list_btn faj" v-if="index == 2" @click="toChat(item.buttton)">
|
||
去体验</view>
|
||
<view class="list_btn faj" v-if="index == 3" @click="toChat(item.buttton)">
|
||
去体验</view>
|
||
<view class="list_btn faj" v-if="index == 4" @click="toChat(item.buttton)">
|
||
去体验</view>
|
||
<view class="list_btn faj" v-if="index == 5" @click="todiary(item.buttton)">
|
||
去体验</view>
|
||
<!--getLevelListInfo接口 根据buttton是否为true判断是否可以点击 -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
GetLevelList,
|
||
GetUserBasic
|
||
} from '@/utils/api.js'
|
||
import notHave from '@/components/not-have.vue';
|
||
import topSafety from '@/components/top-safety.vue';
|
||
export default {
|
||
components: {
|
||
notHave,
|
||
topSafety,
|
||
},
|
||
data() {
|
||
return {
|
||
getLevelListInfo: [],
|
||
myavatar: '',
|
||
getBobbiesList: {},
|
||
loverBasicList: uni.getStorageSync('loverBasicList'),
|
||
getMenuInfoList: '',
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getLevelList()
|
||
this.getUserBasic()
|
||
const userinfo = uni.getStorageSync('userinfo');
|
||
if (userinfo) {
|
||
this.myavatar = userinfo.avatar;
|
||
}
|
||
},
|
||
onShow() {
|
||
// #ifdef MP-WEIXIN
|
||
this.getMenuInfo()
|
||
// #endif
|
||
},
|
||
methods: {
|
||
getLevelList() {
|
||
GetLevelList().then(res => {
|
||
if (res.code == 1) {
|
||
this.getLevelListInfo = res.data
|
||
console.log(this.getLevelListInfo)
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
position: 'top'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
getUserBasic() {
|
||
GetUserBasic({}).then(res => {
|
||
if (res.code == 1) {
|
||
this.getBobbiesList = res.data
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
position: 'top'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
calculateProgressWidth() {
|
||
if (this.getBobbiesList.intimacy == null || this.getBobbiesList.next_level_intimacy == null) {
|
||
return 0;
|
||
}
|
||
// 根据比例计算实际宽度，确保不超过最大宽度500rpx
|
||
const actualWidth = (this.getBobbiesList.intimacy / this.getBobbiesList.next_level_intimacy) * 500;
|
||
const result = Math.min(actualWidth, 500);
|
||
|
||
// 打印计算过程和结果
|
||
console.log('最终结果:', result); // 应该打印 125
|
||
|
||
return result;
|
||
},
|
||
back() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
},
|
||
help() {
|
||
uni.navigateTo({
|
||
url: '/pages/index/ties'
|
||
});
|
||
},
|
||
todiary(buttton) {
|
||
console.log(buttton)
|
||
if (buttton) {
|
||
uni.navigateTo({
|
||
url: '/pages/chat/diary'
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: '等级不足',
|
||
icon: 'none',
|
||
position: 'top'
|
||
})
|
||
}
|
||
},
|
||
toChat(buttton) {
|
||
if (buttton) {
|
||
uni.navigateTo({
|
||
url: '/pages/chat/index'
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: '等级不足',
|
||
icon: 'none',
|
||
position: 'top'
|
||
})
|
||
}
|
||
},
|
||
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: 150rpx 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: -110rpx;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.user_content image {
|
||
position: relative;
|
||
width: 138rpx;
|
||
height: 138rpx;
|
||
display: block;
|
||
}
|
||
|
||
.user_number {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
margin: auto;
|
||
font-size: 55rpx;
|
||
color: #FFFFFF;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.module {
|
||
position: relative;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.module_contentA {
|
||
position: relative;
|
||
margin: 74rpx 0 0 0;
|
||
width: 156rpx;
|
||
height: 156rpx;
|
||
}
|
||
|
||
.module_contentA image {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.module_contentB {
|
||
position: relative;
|
||
width: 132rpx;
|
||
height: 132rpx;
|
||
}
|
||
|
||
.module_contentB image {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.module_contentC {
|
||
position: relative;
|
||
margin: 102rpx 0 0 0;
|
||
width: 132rpx;
|
||
height: 132rpx;
|
||
}
|
||
|
||
.module_contentC image {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.module_contentD {
|
||
position: relative;
|
||
width: 186rpx;
|
||
height: 186rpx;
|
||
}
|
||
|
||
.module_contentD image {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.module_contentE {
|
||
position: relative;
|
||
margin: 112rpx 0 0 0;
|
||
width: 132rpx;
|
||
height: 132rpx;
|
||
}
|
||
|
||
.module_contentE image {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.module_module {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
margin: auto;
|
||
}
|
||
|
||
.module_number {
|
||
font-weight: 700;
|
||
font-size: 40rpx;
|
||
color: #F17CC7;
|
||
line-height: 30rpx;
|
||
}
|
||
|
||
.module_title {
|
||
margin: 10rpx 0 0 0;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FFA0DD;
|
||
line-height: 30rpx;
|
||
}
|
||
|
||
.list {
|
||
position: relative;
|
||
margin: 10rpx 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 {
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #222222;
|
||
line-height: 50rpx;
|
||
width: 350rpx;
|
||
}
|
||
|
||
.list_name {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #909090;
|
||
line-height: 50rpx;
|
||
width: 350rpx;
|
||
}
|
||
|
||
.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> |