536 lines
12 KiB
Vue
536 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">
|
||
{{ getBobbiesList.bond_today ? getBobbiesList.bond_today : 0 }}<text>/{{
|
||
getBobbiesList.bond_today_all ? getBobbiesList.bond_today_all : 0 }}</text>
|
||
</view>
|
||
<view class="list_progress fa">
|
||
<view class="list_progress_item"
|
||
:style="{ width: calculateTotalProgressWidth() + '%' }">
|
||
</view>
|
||
</view>
|
||
<!--用用户接口获取 next_level_intimacy//总亲密度,intimacy当前的,intimacy_percent百分比,还有等级level -->
|
||
</view>
|
||
</view>
|
||
<view class="list_module">
|
||
<view class="list_detail" v-for="(item, index) in getBondList" :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_day ? item.intimacy_day : 0 }}</text>/{{ item.upper ?
|
||
item.upper : 100 }}牵绊
|
||
</view>
|
||
</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_day, item.upper) + 'rpx' }">
|
||
</view>
|
||
<image
|
||
:style="{ 'margin-left': calculateProgressWidth(item.intimacy_day, item.upper) + 'rpx' }"
|
||
src="/static/images/intimacy_logo.png" mode="widthFix"></image>
|
||
<view class="list_double faj">
|
||
<!-- <text>3倍</text> -->
|
||
</view>
|
||
<!-- intimacy_percentd百分比 -->
|
||
</view>
|
||
<view class="list_wheel fa sb" v-if="index == 0">
|
||
<text>0轮</text>
|
||
<text>{{ item.upper }}轮</text>
|
||
</view>
|
||
<view class="list_wheel fa sb" v-if="index == 1">
|
||
<text>0分钟</text>
|
||
<text>{{ item.upper }}分钟</text>
|
||
</view>
|
||
<view class="list_wheel fa sb" v-if="index == 2 || index == 3">
|
||
<text>0次</text>
|
||
<text>{{ item.upper }}次</text>
|
||
</view>
|
||
</view>
|
||
<view class="list_right faj" v-if="item.type == 1" @click="toChat(item.id)">去聊天
|
||
</view>
|
||
<view class="list_right faj" v-if="item.type == 2" @click="toChat(item.id)">去语音
|
||
</view>
|
||
<view class="list_right faj" v-if="item.type == 3" @click="toChat(item.id)">去赠送
|
||
</view>
|
||
<view class="list_right faj" v-if="item.type == 4" @click="toChat(item.id)">去互动
|
||
</view>
|
||
<!-- 根据get_bond的type来判断显示不同的 -->
|
||
</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 {
|
||
GetBond,
|
||
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 {
|
||
getBondList: [],
|
||
getBobbiesList: {},
|
||
getMenuInfoList: '',
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getBond()
|
||
this.getUserBasic()
|
||
},
|
||
methods: {
|
||
getBond() {
|
||
GetBond(this.form).then(res => {
|
||
if (res.code == 1) {
|
||
this.getBondList = res.data
|
||
console.log(this.getBondList)
|
||
} 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'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
calculateTotalProgressWidth() {
|
||
if (this.getBobbiesList.bond_today_all === 0) {
|
||
return 0;
|
||
}
|
||
// 计算总进度百分比，最大为100%
|
||
const progress = (this.getBobbiesList.bond_today / this.getBobbiesList.bond_today_all) * 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'
|
||
});
|
||
},
|
||
toChat(id) {
|
||
console.log(id)
|
||
if (id >= 1 && id <= 4) {
|
||
if (this.getBobbiesList.level >= id) {
|
||
uni.navigateTo({
|
||
url: '/pages/chat/index'
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: '等级不足',
|
||
icon: 'none',
|
||
position: 'top'
|
||
});
|
||
}
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</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> |