xiaozhang/Ai_GirlFriend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
155c9f824c
Ai_GirlFriend/xuniYou/pages/friends/dayCohesion.vue

500 lines
12 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" background-color="transparent" :border="false" @clickLeft="back"
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="list">
<image class="list_back" src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/2bfd31d1dda5e6cef31ed4793197c3dd.png" mode="widthFix"></image>
<view class="list_all">
<view class="list_content">
<view class="list_today">今日亲密度</view>
<view class="list_head">
<view class="list_dight">20<text>/200</text></view>
<!-- 循环列表upper相加总今日亲密度，循环列表intimacy相加今日亲密度 -->
<view class="list_progress fa">
<view class="list_progress_item"
:style="{ width: calculateTotalProgressWidth() + '%' }">
</view>
</view>
</view>
</view>
<view class="list_module">
<view class="list_detail" v-for="(item, index) in IntimacyConfigGetDailyIntimacyList"
:key="index">
<image class="list_backA" src="/static/images/ties_backA.png" mode="widthFix"></image>
<view class="list_body">
<view class="list_chat fa">
<view class="list_contribute">{{ item.name ? item.name : '' }}</view>
<view class="list_number fa">
<text>{{ item.intimacy ? item.intimacy : 0 }}</text>/{{ item.upper ?
item.upper : 0 }}牵绊
</view>
<!-- 列表单个的upper总今日亲密度，intimacy今日亲密度 -->
</view>
<view class="list_text h2">{{ item.title ? item.title : '' }}</view>
<view class="list_bottom fa">
<view class="list_left">
<view class="list_item">
<view class="list_line"
:style="{ width: calculateProgressWidth(item.intimacy, item.upper) + 'rpx' }">
</view>
<image
:style="{ 'margin-left': calculateProgressWidth(item.intimacy, item.upper) + 'rpx' }"
src="/static/images/intimacy_logo.png" mode="widthFix"></image>
<!-- <view class="list_double faj">
<text>3倍</text>
去掉几倍根据列表单个的upper总今日亲密度，intimacy今日亲密度来显示进度
</view> -->
</view>
<view class="list_wheel fa sb">
<text>0轮</text>
<!-- <text>50轮</text> -->
<text>{{ item.upper ? item.upper : 0 }}轮</text>
</view>
</view>
<view class="list_right faj">去聊天</view>
</view>
</view>
</view>
<!-- <view class="list_detail">
<image class="list_backA" src="/static/images/ties_backA.png" mode="widthFix"></image>
<view class="list_body">
<view class="list_chat fa">
<view class="list_contribute">语音通话</view>
<view class="list_number fa"><text>0/</text>200牵绊</view>
</view>
<view class="list_text h2">每语音通话1分钟，可获得5亲密度</view>
<view class="list_bottom fa">
<view class="list_left">
<view class="list_item">
<view class="list_line"></view>
<image src="/static/images/intimacy_logo.png" mode="widthFix"></image>
<view class="list_double faj">
<text>3倍</text>
</view>
</view>
<view class="list_wheel fa sb">
<text>0分钟</text>
<text>50分钟</text>
<text>10分钟</text>
</view>
</view>
<view class="list_right faj">去语音</view>
</view>
</view>
</view>
<view class="list_detail">
<image class="list_backA" src="/static/images/ties_backA.png" mode="widthFix"></image>
<view class="list_body">
<view class="list_chat fa">
<view class="list_contribute">赠送礼物</view>
<view class="list_number fa"><text>0/</text>200牵绊</view>
</view>
<view class="list_text h2">赠送别人礼物，手有余香</view>
<view class="list_bottom fa">
<view class="list_left">
<view class="list_item">
<view class="list_line"></view>
<image src="/static/images/intimacy_logo.png" mode="widthFix"></image>
<view class="list_double faj">
<text>3倍</text>
</view>
</view>
<view class="list_wheel fa sb">
<text>0次</text>
<text>1次</text>
<text>2次</text>
</view>
</view>
<view class="list_right faj" @click="togift">去赠送</view>
</view>
</view>
</view>
<view class="list_detail">
<image class="list_backA" src="/static/images/ties_backA.png" mode="widthFix"></image>
<view class="list_body">
<view class="list_chat fa">
<view class="list_contribute">互动贡献</view>
<view class="list_number fa"><text>0/</text>200牵绊</view>
</view>
<view class="list_text h2">和别人互动，手有余香</view>
<view class="list_bottom fa">
<view class="list_left">
<view class="list_item">
<view class="list_line"></view>
<image src="/static/images/intimacy_logo.png" mode="widthFix"></image>
<view class="list_double faj">
<text>3倍</text>
</view>
</view>
<view class="list_wheel fa sb">
<text>0次</text>
<text>1次</text>
<text>2次</text>
</view>
</view>
<view class="list_right faj">去互动</view>
</view>
</view>
</view> -->
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
import {
IntimacyConfigGetDailyIntimacy
} 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 {
form: {
friend_id: '',
},
IntimacyConfigGetDailyIntimacyList: [],
totalIntimacy: 0,
totalUpper: 0
}
},
onLoad(options) {
console.log('页面参数:', options);
console.log('页面参数:', options.id);
this.form.friend_id = options.id
this.intimacyConfigGetDailyIntimacy()
},
methods: {
intimacyConfigGetDailyIntimacy() {
IntimacyConfigGetDailyIntimacy(this.form).then(res => {
if (res.code == 1) {
this.IntimacyConfigGetDailyIntimacyList = res.data
this.calculateTotalIntimacy();
// console.log('测试计算宽度:', this.calculateProgressWidth());
} else {
uni.showToast({
title: res.msg,
icon: 'none',
position: 'top'
})
}
})
},
calculateTotalIntimacy() {
// 循环列表upper相加总今日亲密度，循环列表intimacy相加今日亲密度
this.totalIntimacy = 0;
this.totalUpper = 0;
this.IntimacyConfigGetDailyIntimacyList.forEach(item => {
this.totalIntimacy += (item.intimacy || 0);
this.totalUpper += (item.upper || 0);
});
},
calculateTotalProgressWidth() {
if (this.totalUpper === 0) {
return 0;
}
// 计算总进度百分比，最大为100%
const progress = (this.totalIntimacy / this.totalUpper) * 100;
const result = Math.min(progress, 100);
console.log('总进度宽度:', result);
return result;
},
calculateProgressWidth(intimacy, upper) {
// console.log('计算进度宽度 - 当前值:', intimacy, '最大值:', upper)
if (intimacy == null || upper == null || upper === 0) {
return 0;
}
// 根据比例计算实际宽度，确保不超过最大宽度450rpx
const actualWidth = (intimacy / upper) * 450;
const result = Math.min(actualWidth, 450);
// console.log('最终结果:', result);
return result;
},
back() {
uni.navigateBack({
delta: 1,
});
},
togift() {
uni.navigateTo({
url: '/pages/index/gift'
});
},
}
}
</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;
}
.list {
position: relative;
}
.list_back {
position: absolute;
width: 100%;
display: block;
}
.list_all {
position: relative;
padding: 54rpx 40rpx;
}
.list_content {
position: relative;
padding: 0 20rpx;
}
.list_today {
font-weight: 500;
font-size: 36rpx;
color: #FF51B3;
line-height: 50rpx;
}
.list_head {
position: relative;
margin: 24rpx 0 0 0;
}
.list_dight {
margin: 0 0 0 74rpx;
font-weight: 700;
font-size: 56rpx;
color: #FF51B3;
line-height: 50rpx;
}
.list_dight text {
font-size: 36rpx;
color: #FFBCE2;
}
.list_progress {
position: relative;
margin: 18rpx 0 0 0;
width: 100%;
height: 8rpx;
background: #FFDDF0;
clip-path: polygon(1% 0%, 100% 0%, 99% 100%, 0% 100%);
}
.list_progress_item {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: linear-gradient(90deg, #8D48FE 0%, #EC2E99 100%);
clip-path: polygon(1% 0%, 100% 0%, 99% 100%, 0% 100%);
}
.list_module {
position: relative;
margin: 34rpx 0 0 0;
}
.list_detail {
position: relative;
margin: 0 0 50rpx 0;
}
.list_backA {
position: absolute;
left: 0;
top: 0;
width: 100%;
display: block;
}
.list_body {
position: relative;
padding: 18rpx 36rpx;
}
.list_chat {
position: relative;
}
.list_contribute {
font-weight: 500;
font-size: 32rpx;
color: #222222;
line-height: 50rpx;
}
.list_number {
position: relative;
margin: 0 0 0 120rpx;
font-weight: 500;
font-size: 30rpx;
color: #909090;
line-height: 50rpx;
}
.list_number text {
color: #FF51B3;
}
.list_text {
margin: 25rpx 0 0 0;
height: 100rpx;
font-weight: 500;
font-size: 28rpx;
color: #8C8C8C;
line-height: 50rpx;
}
.list_bottom {
position: relative;
margin: 90rpx 0 0 0;
}
.list_left {
position: relative;
}
.list_item {
position: relative;
width: 450rpx;
height: 6rpx;
background: #FFE7F5;
border-radius: 8rpx;
}
.list_line {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
width: 230rpx;
height: 6rpx;
background: #FF51B3;
border-radius: 8rpx;
}
.list_item image {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 44rpx;
height: 44rpx;
}
.list_double {
position: absolute;
left: 0;
right: 0;
top: -60rpx;
margin: 0 auto;
}
.list_double text {
padding: 0 20rpx;
font-weight: 400;
font-size: 24rpx;
color: #FFFFFF;
line-height: 34rpx;
background: #F25BB0;
border-radius: 6rpx;
}
.list_double text::after {
content: '';
position: absolute;
bottom: -4rpx;
left: 50%;
transform: translateX(-50%);
width: 12rpx;
height: 12rpx;
background: #F25BB0;
border-radius: 0 0 4rpx 0;
transform: translateX(-50%) rotate(45deg);
}
.list_wheel {
position: relative;
margin: 15rpx 0 0 0;
}
.list_wheel text {
font-weight: 500;
font-size: 30rpx;
color: #333333;
line-height: 50rpx;
}
.list_right {
position: relative;
margin: -62rpx 0 0 50rpx;
padding: 4rpx 22rpx;
font-weight: 500;
font-size: 30rpx;
color: #FFFFFF;
line-height: 50rpx;
background: #F661B5;
border-radius: 12rpx;
flex-shrink: 0;
}
</style>
Reference in New Issue Copy Permalink