500 lines
12 KiB
Vue
500 lines
12 KiB
Vue
<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> |