355 lines
12 KiB
Vue
355 lines
12 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="body">
|
||
|
|
<view class="list">
|
||
|
|
<view class="list_content">
|
||
|
|
<view class="list_title">描述着装</view>
|
||
|
|
<textarea class="" v-model="saveform.outfit_desc" placeholder="穿白色夏季校服"
|
||
|
|
placeholder-class="list_textarea" />
|
||
|
|
</view>
|
||
|
|
<view class="list_content fa">
|
||
|
|
<view class="list_title">选择瞳色</view>
|
||
|
|
<view class="list_module f1 fa">
|
||
|
|
<picker class="list_data f1" :value="eyeColorIndex"
|
||
|
|
:range="getLoverAppearanceList.eye_color_options" range-key="name"
|
||
|
|
@change="bindEyeColorChange">
|
||
|
|
<view class="list_picker f1 fa" :style="form.eyeColor ? 'color:#333' : 'color:#D3D3D3'">
|
||
|
|
<view class="f1">
|
||
|
|
{{ form.eyeColor ? form.eyeColor : '请选择瞳色' }}
|
||
|
|
</view>
|
||
|
|
<image src="/static/images/more.png" mode="widthFix"></image>
|
||
|
|
</view>
|
||
|
|
</picker>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="list_content fa">
|
||
|
|
<view class="list_title">选择发型</view>
|
||
|
|
<view class="list_module f1 fa">
|
||
|
|
<picker class="list_data f1" :value="hairStyleIndex"
|
||
|
|
:range="getLoverAppearanceList.hair_style_options" range-key="name"
|
||
|
|
@change="bindHairStyleChange">
|
||
|
|
<view class="list_picker f1 fa" :style="form.hairStyle ? 'color:#333' : 'color:#D3D3D3'">
|
||
|
|
<view class="f1">
|
||
|
|
{{ form.hairStyle ? form.hairStyle : '请选择发型' }}
|
||
|
|
</view>
|
||
|
|
<image src="/static/images/more.png" mode="widthFix"></image>
|
||
|
|
</view>
|
||
|
|
</picker>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="list_contents">
|
||
|
|
<view class="list_title">外貌特征</view>
|
||
|
|
<textarea class="" v-model="saveform.appearance_prompt" maxlength="100" @input="appearanceNum"
|
||
|
|
placeholder="青年，皮肤白皙，现代长相，气质高冷" placeholder-class="list_textarea" />
|
||
|
|
<view class="list_count">{{ appearanceNumber }}/100</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="opt faj" @click="submit">保存并生成图像</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
GetLoverAppearance,
|
||
|
|
LoverAppearance,
|
||
|
|
AppearanceGenerate
|
||
|
|
} 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 {
|
||
|
|
eyeColorList: [{
|
||
|
|
name: '红色',
|
||
|
|
id: 0,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '紫色',
|
||
|
|
id: 1,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
eyeColorIndex: 0,
|
||
|
|
hairStyleList: [{
|
||
|
|
name: '长直发',
|
||
|
|
id: 0,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '短卷发',
|
||
|
|
id: 1,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '马尾辫',
|
||
|
|
id: 2,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
hairStyleIndex: 0,
|
||
|
|
form: {
|
||
|
|
eyeColor: '',
|
||
|
|
hairStyle: '',
|
||
|
|
},
|
||
|
|
saveform: {
|
||
|
|
appearance_prompt: '',
|
||
|
|
outfit_desc: '',
|
||
|
|
eye_color_id: '',
|
||
|
|
hair_style_id: '',
|
||
|
|
},
|
||
|
|
appearanceNumber: 0,
|
||
|
|
getLoverAppearanceList: '',
|
||
|
|
image: '',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
this.getLoverAppearance()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
LoverAppearance(data) {
|
||
|
|
LoverAppearance(data).then(res => {
|
||
|
|
if (res.code == 1) {
|
||
|
|
uni.showToast({
|
||
|
|
title: '保存成功',
|
||
|
|
icon: 'none',
|
||
|
|
position: 'top'
|
||
|
|
})
|
||
|
|
setTimeout(() => {
|
||
|
|
this.appearanceGenerate()
|
||
|
|
|
||
|
|
}, 500);
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: res.msg,
|
||
|
|
icon: 'none',
|
||
|
|
position: 'top'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getLoverAppearance() {
|
||
|
|
GetLoverAppearance({}).then(res => {
|
||
|
|
if (res.code == 1) {
|
||
|
|
this.getLoverAppearanceList = res.data
|
||
|
|
console.log(this.getLoverAppearanceList)
|
||
|
|
this.saveform.appearance_prompt = this.getLoverAppearanceList.appearance_prompt ? this.getLoverAppearanceList.appearance_prompt : ''
|
||
|
|
this.saveform.outfit_desc = this.getLoverAppearanceList.outfit_desc ? this.getLoverAppearanceList.outfit_desc : ''
|
||
|
|
for (let i = 0; i < this.getLoverAppearanceList.eye_color_options.length; i++) {
|
||
|
|
if (this.getLoverAppearanceList.eye_color_options[i].id == this.getLoverAppearanceList.eye_color_id) {
|
||
|
|
this.eyeColorIndex = i
|
||
|
|
this.form.eyeColor = this.getLoverAppearanceList.eye_color_options[i].name
|
||
|
|
this.saveform.eye_color_id = this.getLoverAppearanceList.eye_color_options[i].id
|
||
|
|
}
|
||
|
|
}
|
||
|
|
for (let i = 0; i < this.getLoverAppearanceList.hair_style_options.length; i++) {
|
||
|
|
if (this.getLoverAppearanceList.hair_style_options[i].id == this.getLoverAppearanceList.hair_style_id) {
|
||
|
|
this.hairStyleIndex = i
|
||
|
|
this.form.hairStyle = this.getLoverAppearanceList.hair_style_options[i].name
|
||
|
|
this.saveform.hair_style_id = this.getLoverAppearanceList.hair_style_options[i].id
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: res.msg,
|
||
|
|
icon: 'none',
|
||
|
|
position: 'top'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
appearanceGenerate() {
|
||
|
|
AppearanceGenerate().then(res => {
|
||
|
|
if (res.code == 1) {
|
||
|
|
this.image = res.data.image_url
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pages/create/generateImage?image=' + this.image
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: res.msg,
|
||
|
|
icon: 'none',
|
||
|
|
position: 'top'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}).catch(err => {
|
||
|
|
uni.showToast({
|
||
|
|
title: '生成失败，请重试',
|
||
|
|
icon: 'none',
|
||
|
|
position: 'top'
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
bindEyeColorChange(e) {
|
||
|
|
this.eyeColorIndex = e.detail.value;
|
||
|
|
this.form.eyeColor = this.getLoverAppearanceList.eye_color_options[this.eyeColorIndex].name;
|
||
|
|
this.saveform.eye_color_id = this.getLoverAppearanceList.eye_color_options[this.eyeColorIndex].id;
|
||
|
|
},
|
||
|
|
bindHairStyleChange(e) {
|
||
|
|
this.hairStyleIndex = e.detail.value;
|
||
|
|
this.form.hairStyle = this.getLoverAppearanceList.hair_style_options[this.hairStyleIndex].name;
|
||
|
|
this.saveform.hair_style_id = this.getLoverAppearanceList.hair_style_options[this.hairStyleIndex].id;
|
||
|
|
},
|
||
|
|
appearanceNum(e) {
|
||
|
|
this.appearanceNumber = e.detail.value.length;
|
||
|
|
},
|
||
|
|
submit() {
|
||
|
|
if (this.saveform.outfit_desc == '') {
|
||
|
|
uni.showToast({
|
||
|
|
title: "请输入恋人的着装要求",
|
||
|
|
icon: 'none',
|
||
|
|
position: 'top'
|
||
|
|
})
|
||
|
|
} else if (this.saveform.outfit_desc.length < 4) {
|
||
|
|
uni.showToast({
|
||
|
|
title: "着装描述至少需要4个字",
|
||
|
|
icon: 'none',
|
||
|
|
position: 'top'
|
||
|
|
})
|
||
|
|
} else if (!this.saveform.eye_color_id) {
|
||
|
|
uni.showToast({
|
||
|
|
title: "请选择瞳色",
|
||
|
|
icon: 'none',
|
||
|
|
position: 'top'
|
||
|
|
})
|
||
|
|
} else if (!this.saveform.hair_style_id) {
|
||
|
|
uni.showToast({
|
||
|
|
title: "请选择发型",
|
||
|
|
icon: 'none',
|
||
|
|
position: 'top'
|
||
|
|
})
|
||
|
|
} else if (this.saveform.appearance_prompt == '') {
|
||
|
|
uni.showToast({
|
||
|
|
title: "请输入外貌特征",
|
||
|
|
icon: 'none',
|
||
|
|
position: 'top'
|
||
|
|
})
|
||
|
|
} else if (this.saveform.appearance_prompt.length < 4) {
|
||
|
|
uni.showToast({
|
||
|
|
title: "外貌特征至少需要4个字",
|
||
|
|
icon: 'none',
|
||
|
|
position: 'top'
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
console.log(this.saveform)
|
||
|
|
// 构建符合要求的数据结构
|
||
|
|
const submitData = {
|
||
|
|
appearance_prompt: this.saveform.appearance_prompt,
|
||
|
|
appearance_params: {
|
||
|
|
hair_style_id: this.saveform.hair_style_id,
|
||
|
|
eye_color_id: this.saveform.eye_color_id,
|
||
|
|
outfit_desc: this.saveform.outfit_desc
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
console.log(submitData);
|
||
|
|
this.LoverAppearance(submitData);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
page {
|
||
|
|
background: #F6F8FA;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style>
|
||
|
|
.body {
|
||
|
|
position: relative;
|
||
|
|
padding: 0 50rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list {
|
||
|
|
position: relative;
|
||
|
|
margin: 72rpx 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_content textarea {
|
||
|
|
margin: 22rpx 0 0 0;
|
||
|
|
height: 215rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: #333;
|
||
|
|
line-height: 50rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list_title {
|
||
|
|
margin: 0 44rpx 0 0;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #222222;
|
||
|
|
line-height: 50rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list_contents {
|
||
|
|
position: relative;
|
||
|
|
margin: 0 0 30rpx 0;
|
||
|
|
padding: 30rpx 60rpx 60rpx 40rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list_contents textarea {
|
||
|
|
margin: 22rpx 0 0 0;
|
||
|
|
height: 120rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: #333;
|
||
|
|
line-height: 50rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list_textarea {
|
||
|
|
color: #ADADAD;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list_module {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list_picker image {
|
||
|
|
width: 8rpx;
|
||
|
|
height: 8rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list_count {
|
||
|
|
position: absolute;
|
||
|
|
right: 30rpx;
|
||
|
|
bottom: 14rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 26rpx;
|
||
|
|
color: #ADADAD;
|
||
|
|
line-height: 50rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.opt {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 60rpx;
|
||
|
|
margin: 0 50rpx;
|
||
|
|
padding: 20rpx 0;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
line-height: 50rpx;
|
||
|
|
background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
|
||
|
|
border-radius: 12rpx;
|
||
|
|
}
|
||
|
|
</style>
|