Ai_GirlFriend/xuniYou/pages/chat/loverMessage.vue

<template>
    <view>
        <view class="body">
            <view class="list">
                <view class="list_content fa">
                    <view class="list_title">性别</view>
                    <view class="list_item fa">
                        {{ getLoverConfigList.gender == 'male' ? '男' : '女' }}
                    </view>
                </view>
                <view class="list_content fa">
                    <view class="list_title">昵称</view>
                    <view class="list_item fa">
                        {{ getLoverConfigList.lover.name }}
                    </view>
                </view>
                <view class="list_content fa">
                    <view class="list_title">人物简介</view>
                    <view class="list_item fa">
                        {{ getLoverConfigList.lover.intro }}
                    </view>
                </view>
                <view class="list_content fa">
                    <view class="list_title">性格模板</view>
                    <view class="list_items fa">
                        <view class="list_table fa">
                            {{ personalityInfo ? personalityInfo : '' }}
                        </view>
                    </view>
                </view>
                <view class="list_content fa">
                    <view class="list_title">故事背景</view>
                    <view class="list_item fa">
                        {{ getLoverConfigList.lover.story_background }}
                    </view>
                </view>
                <view class="list_content fa">
                    <view class="list_title">开场白</view>
                    <view class="list_item fa">
                        {{ getLoverConfigList.lover.opening_line }}
                    </view>
                </view>
                <view class="list_content">
                    <view class="list_title">兴趣标签</view>
                    <view class="list_items fa wp">
                        <view class="list_table fa" v-for="(item, index) in hobbyOptions" :key="index">
                            {{ item.name }}
                        </view>
                    </view>
                </view>
                <view class="list_content fa">
                    <view class="list_title">音色</view>
                    <view class="list_item fa">
                        {{ voicesInfo ? voicesInfo : '' }}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {
    GetLoverConfig,
} from '@/utils/api.js'
import {
    isPhone
} from '@/utils/utils.js'
import notHave from '@/components/not-have.vue';
import topSafety from '@/components/top-safety.vue';
export default {
    components: {
        notHave,
        topSafety,
    },
    data() {
        return {
            getLoverConfigList: '',
            hobbyOptions: [],
            personalityOptions: [],
            voicesInfo: '',
            personalityInfo: '',
        }
    },
    onLoad() {

    },
    onShow() {
        this.getLoverConfig()
    },
    methods: {
        getLoverConfig() {
            GetLoverConfig({}).then(res => {
                if (res.code == 1) {
                    this.getLoverConfigList = res.data
                    // 根据 interest_tags 找到对应的 hobby_options 项
                    if (res.data.lover.interest_tags && res.data.hobby_options) {
                        this.hobbyOptions = res.data.hobby_options.filter(option => 
                            res.data.lover.interest_tags.includes(option.id)
                        );
                    } else {
                        this.hobbyOptions = [];
                    }
                    console.log(this.hobbyOptions);

                    for (let i = 0; i < this.getLoverConfigList.voices.length; i++) {
                        if (this.getLoverConfigList.lover.voice_id == this.getLoverConfigList.voices[i].id) {
                            this.voicesInfo = this.getLoverConfigList.voices[i].name
                        }
                    }

                    for (let i = 0; i < this.getLoverConfigList.personality_options.length; i++) {
                        if (this.getLoverConfigList.personality_options[i].id == this.getLoverConfigList.lover.personality_tag) {
                            this.personalityInfo = this.getLoverConfigList.personality_options[i].name
                        }
                    }
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none',
                        position: 'top'
                    })
                }
            })
        },
    }
}
</script>
<style>
page {
    background: #F6F8FA;
}
</style>
<style>
.body {
    position: relative;
    padding: 0 50rpx 50rpx 50rpx;
}

.list {
    position: relative;
    margin: 54rpx 0 0 0;
}

.list_content {
    position: relative;
    margin: 0 0 30rpx 0;
    padding: 30rpx 40rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    box-sizing: border-box;
}

.list_title {
    margin: 0 80rpx 0 0;
    font-weight: 500;
    font-size: 32rpx;
    color: #222222;
    line-height: 50rpx;
    flex-shrink: 0;
}


.list_item {
    position: relative;
}
.list_items {
    position: relative;
    margin: 30rpx 0 0 0;
}

.list_table {
    margin: 0 30rpx 30rpx 0;
    padding: 0 26rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #FF51B3;
	background: #FCE6F3;
    line-height: 50rpx;
    border-radius: 12rpx;
}
</style>