xiaozhang/Ai_GirlFriend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
1c4dea0a34
Ai_GirlFriend/xuniYou/pages/index/ties.vue

536 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">
{{ 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>
Reference in New Issue Copy Permalink