176 lines
3.7 KiB
Vue
176 lines
3.7 KiB
Vue
<template>
|
||
<view class="body">
|
||
<uni-nav-bar fixed statusBar left-icon="left" background-color="transparent" :border="false" @clickLeft="back"
|
||
title="恋人生成" color="#FFFFFF"></uni-nav-bar>
|
||
<image class="back"
|
||
:src="image ? image : 'https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251231/a6d2dae70029b6465ea1f1f605f77258.png'"
|
||
mode="aspectFill"></image>
|
||
<view class="body_content">
|
||
<view class="title faj">您是否满意生成的图像？</view>
|
||
<view class="opt faj">
|
||
<view class="opt_item" @click="againClick">重新生成</view>
|
||
<view class="opt_item" @click="generateClick">确定生成</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
AppearanceGenerate
|
||
} 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 {
|
||
image: '',
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if (options.image) {
|
||
this.image = options.image
|
||
}
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
methods: {
|
||
appearanceGenerate() {
|
||
AppearanceGenerate().then(res => {
|
||
if (res.code == 1) {
|
||
this.image = res.data.image_url
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
position: 'top'
|
||
})
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: '生成失败，请重试',
|
||
icon: 'none',
|
||
position: 'top'
|
||
})
|
||
})
|
||
},
|
||
againClick() {
|
||
this.appearanceGenerate()
|
||
},
|
||
back() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
},
|
||
generateClick() {
|
||
uni.navigateBack({
|
||
delta: 2,
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.body {
|
||
position: relative;
|
||
padding: 0 30rpx;
|
||
}
|
||
|
||
.back {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
.body_content{
|
||
position: fixed;
|
||
bottom: 5%;
|
||
left: 0;
|
||
right: 0;
|
||
margin: 0 auto;
|
||
z-index: 2;
|
||
}
|
||
|
||
.title {
|
||
position: relative;
|
||
margin: 0 auto;
|
||
font-weight: 800;
|
||
font-size: 38rpx;
|
||
color: #FFFFFF;
|
||
line-height: 50rpx;
|
||
z-index: 2;
|
||
}
|
||
|
||
.opt {
|
||
position: relative;
|
||
margin: 60rpx 0 0 0;
|
||
z-index: 2;
|
||
}
|
||
|
||
.opt_item {
|
||
padding: 24rpx 65rpx;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #817EFE;
|
||
line-height: 50rpx;
|
||
border-radius: 12rpx;
|
||
border: 2rpx solid #817EFE;
|
||
}
|
||
|
||
.opt_item:nth-child(2) {
|
||
margin: 0 0 0 80rpx;
|
||
color: #FFFFFF;
|
||
background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
|
||
}
|
||
|
||
/* 加载遮罩层样式 */
|
||
.loading-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #FFFFFF;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.loading-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.loading-spinner {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.spinner {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border: 6rpx solid #E0E0E0;
|
||
border-top: 6rpx solid #817EFE;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.loading-text {
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
</style> |