You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
443 lines
10 KiB
443 lines
10 KiB
<template>
|
|
<view class="wrap">
|
|
<view class="desc-box">
|
|
<text class="title">内容描述</text>
|
|
<textarea class="desc-input" v-model="contentDesc"
|
|
placeholder="请输入内容描述~" />
|
|
<!-- <view class="bottom-box">
|
|
<view class="keyTips" @click="clickRandomKey()"></view>
|
|
<view class="limit">{{drawDesc.length}}/50</view>
|
|
</view> -->
|
|
</view>
|
|
<view class="keywords">
|
|
<view class="head">
|
|
<view class="left">
|
|
<view class="title">内容描述示例</view>
|
|
</view>
|
|
<view class="right" @click="getRandPrompt">
|
|
<view class="title">换一批</view>
|
|
<view class="icon">
|
|
<uni-icons type="refreshempty" size="14" :color="primaryColor"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="lists">
|
|
<view @click="onClickPrompt(index)" :class="index == prompt_active?'item active':'item'"
|
|
v-for="(item,index) in promptList" :key="index">{{ item.text }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="desc-box">
|
|
<text class="title">场景描述</text>
|
|
<textarea class="desc-input" v-model="sceneDesc"
|
|
placeholder="描述一下你们的场景吧~(例:在教堂,在海边,在美术馆,咖啡馆...)" />
|
|
<!-- <view class="bottom-box">
|
|
<view class="keyTips" @click="clickRandomKey()"></view>
|
|
<view class="limit">{{drawDesc.length}}/50</view>
|
|
</view> -->
|
|
</view>
|
|
|
|
<view class="type-box">
|
|
<text class="title">风格选择</text>
|
|
<view class="type-item-box">
|
|
<view class="type-item" v-for="(item, index) in paintStyle" @click="selectType(index)"
|
|
:style="{ backgroundImage: `url(${item.imgUrl})` }"
|
|
:class="curType == index? 'active' : ''">
|
|
<view class="title">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="draw-button" @click="checkIsVip()">
|
|
开始创作<br/>消耗({{goldNum}}点画意值)
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {getPaintStyle, getPrompt, textToImg, checkUserCanAiPaint, checkVip} from '@/api/paint.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
promptList: [],
|
|
sceneDesc: '',
|
|
contentDesc: '',
|
|
paintStyle:[],
|
|
curType: 0,
|
|
goldNum: 5, //画意值
|
|
userInfo: {},
|
|
checkData:{
|
|
checkCanPaint: false, //true已达到最大绘画上限;false未达最高上限
|
|
},
|
|
prompt_active: 0,
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getPaintStyleList();
|
|
this.getPrompt();
|
|
},
|
|
onShow() {
|
|
this.checkLogin();
|
|
// this.getInitInfo();
|
|
// this.checkUserCanAiPaint();
|
|
this.sceneDesc = '',
|
|
this.contentDesc = '',
|
|
this.curType = 0
|
|
},
|
|
onShareAppMessage(res) {
|
|
if (res.from === 'button') { // 来自页面内分享按钮
|
|
// console.log(res)
|
|
}
|
|
return {
|
|
title: '来[次元意境]获取好看的图纸头像吧!',
|
|
path: `/pages/ai/paint/loverPaint`
|
|
}
|
|
},
|
|
methods: {
|
|
selectType(index) {
|
|
this.curType = index
|
|
},
|
|
//随机选取提示词
|
|
getRandPrompt() {
|
|
this.promptList = this.getRandomArrayElements(this.promptList, 5)
|
|
this.promptText = this.promptList[this.prompt_active].text
|
|
},
|
|
//获取提示词列表
|
|
async getPrompt() {
|
|
const res = await getPrompt("2");
|
|
if (res && res.data.code === 200) {
|
|
this.promptList = res.data.data
|
|
//console.log('this.promptList',this.promptList)
|
|
}else {
|
|
uni.showModal({
|
|
content: '提示词列表加载失败！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
},
|
|
//提示词
|
|
onClickPrompt(index) {
|
|
this.prompt_active = index
|
|
this.contentDesc = this.promptList[index].text
|
|
// //拖底消除校验状态
|
|
// if(this.checkData.checkPrompt === false){
|
|
// this.checkData.checkPrompt = true;
|
|
// }
|
|
//console.log('this.prompt_active',this.prompt_active)
|
|
},
|
|
getRandomArrayElements(arr, count) {
|
|
var shuffled = arr.slice(0),
|
|
i = arr.length,
|
|
min = i - count,
|
|
temp, index;
|
|
while (i-- > min) {
|
|
index = Math.floor((i + 1) * Math.random());
|
|
temp = shuffled[index];
|
|
shuffled[index] = shuffled[i];
|
|
shuffled[i] = temp;
|
|
}
|
|
return shuffled.slice(min);
|
|
},
|
|
async checkIsVip() {
|
|
let that = this;
|
|
const data = {
|
|
userId: that.userInfo.id,
|
|
userClientType: 10
|
|
}
|
|
const res = await checkVip(data);
|
|
console.log('res===', res);
|
|
if (res && res.data.code === 200) {
|
|
if(res.data.data.isVip == 1) {
|
|
that.getDraw()
|
|
} else {
|
|
uni.showModal({
|
|
title: '您还不是VIP会员',
|
|
content: '开通VIP解锁更多权益~',
|
|
showCancel: false,
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定');
|
|
uni.navigateTo({
|
|
url:'/pages/userInfo/vip/vip'
|
|
})
|
|
}
|
|
}
|
|
});
|
|
}
|
|
// this.paintStyle = res.data.data
|
|
//console.log('this.paintStyle',this.paintStyle)
|
|
}
|
|
// else {
|
|
// uni.showModal({
|
|
// content: '网络错误，请稍后再试~',
|
|
// showCancel: false
|
|
// });
|
|
// }
|
|
},
|
|
//获取绘画风格
|
|
async getPaintStyleList() {
|
|
const res = await getPaintStyle();
|
|
if (res && res.data.code === 200) {
|
|
this.paintStyle = res.data.data
|
|
//console.log('this.paintStyle',this.paintStyle)
|
|
}else {
|
|
uni.showModal({
|
|
content: '绘画风格加载失败！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
},
|
|
//判断是否达到免费AI绘画次数上限
|
|
async checkUserCanAiPaint(){
|
|
let that = this;
|
|
const data = {
|
|
userId: that.userInfo.id,
|
|
platform: 1,
|
|
appType: 0
|
|
}
|
|
const res = await checkUserCanAiPaint(data);
|
|
//console.log('res绘画',res)
|
|
if(res.data.code === 200){
|
|
if(res.data.data === true){
|
|
that.checkData.checkCanPaint = true;
|
|
}else{
|
|
that.checkData.checkCanPaint = false;
|
|
}
|
|
}else{
|
|
return uni.showModal({
|
|
content: '检查绘画上限失败！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
},
|
|
//判断是否登录
|
|
checkLogin(){
|
|
let that = this;
|
|
that.userInfo = uni.getStorageSync('userInfo');
|
|
console.log('userInfo：',that.userInfo)
|
|
let token = uni.getStorageSync('token');
|
|
if((Object.keys(that.userInfo).length==0) && (Object.keys(token).length==0)){
|
|
console.error('尚未登录!');
|
|
uni.showModal({
|
|
title:'提示',
|
|
content:'您还没有登录!点击确定跳转登录界面以体验服务',
|
|
success(res) {
|
|
if (res.confirm) {
|
|
//跳转登录界面
|
|
uni.switchTab({
|
|
url: '/pages/userInfo/userInfo'
|
|
});
|
|
}else if(res.cancel){
|
|
uni.showToast({
|
|
title:'登录获取更好的服务体验哟!',
|
|
duration: 2000
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
getDraw() {
|
|
// if(this.userInfo.isVip != 1) {
|
|
// uni.showModal({
|
|
// title:'此功能仅限VIP使用',
|
|
// content: '开通VIP获得更多权益',
|
|
// })
|
|
// return
|
|
// }
|
|
if(!this.contentDesc || !this.sceneDesc) {
|
|
uni.showToast({
|
|
title: '请输入描述~',
|
|
duration: 2000,
|
|
icon: 'none'
|
|
});
|
|
return
|
|
}
|
|
const that = this;
|
|
|
|
//跳转详情页生成图片
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '任务创建完成,点击跳转生成内容！',
|
|
success(res) {
|
|
if(res.confirm){
|
|
const data = {
|
|
prompt: that.contentDesc,
|
|
scenePrompt: that.sceneDesc,
|
|
styleName: that.paintStyle[that.curType].styleName,
|
|
painterId: that.userInfo.id,
|
|
painterName: that.userInfo.username,
|
|
appType: 0,
|
|
platform: 1,
|
|
goldNum: that.goldNum,
|
|
}
|
|
uni.navigateTo({
|
|
url: './loverPainResult?data='+JSON.stringify(data)
|
|
})
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wrap {
|
|
padding: 20rpx;
|
|
width: 100%;
|
|
min-height: 110vh;
|
|
background-color: #faf0f3;
|
|
.draw-button {
|
|
position:fixed;
|
|
left: 50%;
|
|
bottom: 50rpx;
|
|
transform: translateX(-50%);
|
|
background: linear-gradient(#fc1f8d, #d2158a);
|
|
width: 400rpx;
|
|
height: 100rpx;
|
|
border-radius: 50rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
|
|
}
|
|
.head {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-bottom: 15rpx;
|
|
|
|
.left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.title {
|
|
color: #fc1f8d;
|
|
font-size: 26rpx;
|
|
|
|
.tip-vip-icon {
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.title {
|
|
margin-right: 15rpx;
|
|
font-size: 24rpx;
|
|
line-height: 48rpx;
|
|
color: #3a3a3a;
|
|
}
|
|
.icon {
|
|
line-height: 48rpx;
|
|
}
|
|
}
|
|
}
|
|
.keywords {
|
|
width: 100%;
|
|
margin: 15rpx auto;
|
|
|
|
.lists {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.item {
|
|
background-color: $uni-white;
|
|
padding: 10rpx 15rpx;
|
|
border-radius: 10rpx;
|
|
color: $uni-base-color;
|
|
border: 1rpx solid #fc1f8d;
|
|
max-width: 128rpx;
|
|
margin-bottom: 10rpx;
|
|
font-size: 24rpx;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.active {
|
|
// color: $uni-white;
|
|
border: 1rpx solid #d2158a;
|
|
background-color: #fad5e6;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.desc-box {
|
|
margin-bottom: 10px;
|
|
.title {
|
|
color: #fff;
|
|
font-size: 18px;
|
|
// margin-bottom: 20px;
|
|
color: #fc1f8d;
|
|
font-weight: bold;
|
|
}
|
|
.desc-input {
|
|
border: 2px solid #fc1f8d;
|
|
margin-top: 5px;
|
|
width: 100%;
|
|
height: 200rpx;
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
// color: #fff;
|
|
}
|
|
}
|
|
.type-box {
|
|
.title {
|
|
color: #fff;
|
|
font-size: 18px;
|
|
// margin-bottom: 5px;
|
|
color: #fc1f8d;
|
|
font-weight: bold;
|
|
}
|
|
.type-item-box {
|
|
margin-top: 5px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
.type-item {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
background-size: 100% 100%;
|
|
border-radius: 5px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
.title {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
color: #fc1f8d;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
}
|
|
.active {
|
|
border: 4px solid #fc1f8d;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|