15 changed files with 2339 additions and 48 deletions
@ -0,0 +1,41 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
const serviceTitle = '/img' |
||||
|
const prefix = '/img/mini/tiktok' |
||||
|
//GET 传参需要用 params
|
||||
|
//POST 传参需要用 data
|
||||
|
|
||||
|
// 获取绘画风格
|
||||
|
export function getPaintStyle() { |
||||
|
return request({ |
||||
|
url: `${serviceTitle}${prefix}/getPaintStyle`, |
||||
|
method: 'get' |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 获取提示词列表
|
||||
|
export function getPrompt() { |
||||
|
return request({ |
||||
|
url: `${serviceTitle}${prefix}/getPrompt`, |
||||
|
method: 'get' |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 文生图
|
||||
|
export function textToImg(data) { |
||||
|
return request({ |
||||
|
url: `${serviceTitle}${prefix}/textToImg`, |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 获取绘画者ai绘画分页
|
||||
|
export function getAiPaintPage(data) { |
||||
|
return request({ |
||||
|
url: `${serviceTitle}${prefix}/getAiPaintPage`, |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
|
||||
@ -0,0 +1,22 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
我是chatgpt页面 |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,607 @@ |
|||||
|
<template> |
||||
|
<view class="container"> |
||||
|
<uni-forms :modelValue="formData"> |
||||
|
<!-- 提示词 --> |
||||
|
<view class="head"> |
||||
|
<view> |
||||
|
<uni-easyinput type="textarea" autoHeight v-model="formData.promptText" placeholder="请输入想生成画的提示词" class="promptInput"></uni-easyinput> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="keywords"> |
||||
|
<view class="head"> |
||||
|
<view class="left"> |
||||
|
<view class="icon"> |
||||
|
<uni-icons type="fire-filled" size="20"></uni-icons> |
||||
|
</view> |
||||
|
<view class="title">提示词示例</view> |
||||
|
</view> |
||||
|
<view class="right" @click="getRandPrompt"> |
||||
|
<view class="title">换一批</view> |
||||
|
<view class="icon"> |
||||
|
<uni-icons type="refreshempty" size="20"></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="style"> |
||||
|
<view class="head"> |
||||
|
<view class="left"> |
||||
|
<view class="icon"> |
||||
|
<uni-icons type="star-filled" size="20"></uni-icons> |
||||
|
</view> |
||||
|
<view class="title">选择创作风格</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<scroll-view scroll-x="true" class="styleBox"> |
||||
|
<block v-for="(item,index) in paintStyle" :key="index"> |
||||
|
<view class="styleItem" :class="style_active == item.id?'styleItem styleActive':'styleItem'" @click="onClickStyle(item.id,item.modelName,item.name)"> |
||||
|
<image :src="item.imgUrl" class="styleCover" mode="aspectFill"></image> |
||||
|
<text class="styleName">{{item.name}}</text> |
||||
|
</view> |
||||
|
</block> |
||||
|
</scroll-view> |
||||
|
|
||||
|
<!-- 尺寸 --> |
||||
|
<view class="size"> |
||||
|
<view class="head"> |
||||
|
<view class="left"> |
||||
|
<view class="icon"> |
||||
|
<uni-icons type="map-filled" size="20"></uni-icons> |
||||
|
</view> |
||||
|
<view class="title">选择画布大小</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="lists"> |
||||
|
<view :class="size_active==item.id?'item active':'item'" @click="onClickSize(item.id,item.height,item.width)" |
||||
|
v-for="(item,index) in size" :key="index">{{ item.text }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="bottom"> |
||||
|
<view> |
||||
|
<button type="default" @click="$noMultipleClicks(startPaint)" class="startPaint">开始创作</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</uni-forms> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import base64ToImg from '@/utils/base64Utils'; |
||||
|
import {getPaintStyle, getPrompt, textToImg} from '@/api/paint.js'; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
formData:{ |
||||
|
size_height: undefined, |
||||
|
size_width: undefined, |
||||
|
modelName: undefined, |
||||
|
styleName: undefined, |
||||
|
promptText: undefined |
||||
|
}, |
||||
|
noClick:true, //防止重复提交 |
||||
|
promptList: [], |
||||
|
paintStyle:[], |
||||
|
size_active: 0, |
||||
|
prompt_active: 0, |
||||
|
style_active: 0, |
||||
|
size: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
text: '正方形(512x512)', |
||||
|
height: 512, |
||||
|
width: 512 |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
text: '宽屏(1280x720)', |
||||
|
height: 1280, |
||||
|
width: 720 |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
text: '竖屏(720x1280)', |
||||
|
height: 720, |
||||
|
width: 1280 |
||||
|
} |
||||
|
], |
||||
|
rules:{ |
||||
|
prompt:{ |
||||
|
rules:[{ |
||||
|
required: true, |
||||
|
errorMessage: '请输入关键词', |
||||
|
}] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// onReady() { |
||||
|
// //设置校验规则 |
||||
|
// this.$refs.form.setRules(this.rules); |
||||
|
// }, |
||||
|
created() { |
||||
|
//this.base64ToPath(); |
||||
|
|
||||
|
}, |
||||
|
onLoad() { |
||||
|
this.getPaintStyleList(); |
||||
|
this.getPrompt(); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
|
||||
|
|
||||
|
startPaint(){ |
||||
|
//判断必填项是否都填了 |
||||
|
let that = this; |
||||
|
// console.log('创作prompt为：',that.formData.promptText) |
||||
|
// console.log('创作尺寸高度为：',that.formData.size_height) |
||||
|
// console.log('创作尺寸宽度为：',that.formData.size_width) |
||||
|
// console.log('创作风格为：',that.formData.style_model_name) |
||||
|
|
||||
|
//判断是否登录 |
||||
|
const userInfo = uni.getStorageSync('userInfo'); |
||||
|
console.log('userInfo：',userInfo) |
||||
|
const token = uni.getStorageSync('token'); |
||||
|
if((Object.keys(userInfo).length!=0) && (Object.keys(token).length!=0)){ |
||||
|
//跳转详情页生成图片 |
||||
|
uni.showModal({ |
||||
|
title: '温馨提示', |
||||
|
content: '任务创建完成,点击跳转生成内容！', |
||||
|
success(res) { |
||||
|
if(res.confirm){ |
||||
|
const data = { |
||||
|
width: that.formData.size_width, |
||||
|
height: that.formData.size_height, |
||||
|
prompt: that.formData.promptText, |
||||
|
modelName: that.formData.modelName, |
||||
|
styleName: that.formData.styleName, |
||||
|
painterId: userInfo.id, |
||||
|
painterName: userInfo.username |
||||
|
} |
||||
|
uni.navigateTo({ |
||||
|
url: './paintDetail?data='+JSON.stringify(data) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}else{ |
||||
|
uni.showModal({ |
||||
|
title:'提示', |
||||
|
content:'您还没有登录!点击确定跳转登录界面以体验服务', |
||||
|
success(res) { |
||||
|
if (res.confirm) { |
||||
|
//跳转登录界面 |
||||
|
uni.switchTab({ |
||||
|
url: '/pages/userInfo/userInfo' |
||||
|
}); |
||||
|
}else if(res.cancel){ |
||||
|
uni.showToast({ |
||||
|
title:'登录获取更好的服务体验哟!', |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
//画布大小 |
||||
|
onClickSize(id,height,width) { |
||||
|
this.size_active = id |
||||
|
//console.log('所选尺寸id为：',this.size_active) |
||||
|
this.formData.size_height = height |
||||
|
//console.log('所选尺寸高度为：',this.formData.size_height) |
||||
|
this.formData.size_width = width |
||||
|
//console.log('所选尺寸宽度为：',this.formData.size_width) |
||||
|
}, |
||||
|
//提示词 |
||||
|
onClickPrompt(index) { |
||||
|
this.prompt_active = index |
||||
|
this.formData.promptText = this.promptList[index].text |
||||
|
//console.log('this.prompt_active',this.prompt_active) |
||||
|
}, |
||||
|
//创作风格 |
||||
|
onClickStyle(id,modelName,styleName) { |
||||
|
this.style_active = id |
||||
|
//console.log('所选风格id为',this.style_active) |
||||
|
this.formData.modelName = modelName |
||||
|
this.formData.styleName = styleName |
||||
|
//console.log('所选风格为',this.formData.style_model_name) |
||||
|
}, |
||||
|
//随机选取提示词 |
||||
|
getRandPrompt() { |
||||
|
this.promptList = this.getRandomArrayElements(this.promptList, 10) |
||||
|
this.promptText = this.promptList[this.prompt_active].text |
||||
|
}, |
||||
|
|
||||
|
//获取绘画风格 |
||||
|
async getPaintStyleList() { |
||||
|
const res = await getPaintStyle(); |
||||
|
if (res.data.code === 200) { |
||||
|
this.paintStyle = res.data.data |
||||
|
//console.log('this.paintStyle',this.paintStyle) |
||||
|
}else { |
||||
|
uni.showModal({ |
||||
|
content: '绘画风格加载失败！', |
||||
|
showCancel: false |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//获取提示词列表 |
||||
|
async getPrompt() { |
||||
|
const res = await getPrompt(); |
||||
|
if (res.data.code === 200) { |
||||
|
this.promptList = res.data.data |
||||
|
//console.log('this.promptList',this.promptList) |
||||
|
}else { |
||||
|
uni.showModal({ |
||||
|
content: '提示词列表加载失败！', |
||||
|
showCancel: false |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
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); |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.size { |
||||
|
width: 100%; |
||||
|
margin: 15rpx auto; |
||||
|
|
||||
|
.lists { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.item { |
||||
|
background-color: #fff; |
||||
|
padding: 10rpx 30rpx; |
||||
|
border-radius: 10rpx; |
||||
|
color: #666; |
||||
|
border: 1rpx solid #666; |
||||
|
margin-bottom: 10rpx; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.active { |
||||
|
color: #060101; |
||||
|
border: 1rpx solid #F22E38; |
||||
|
background-color: #FFDEE0; //# FFDEE0 |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.head { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 30rpx; |
||||
|
|
||||
|
.left { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
|
||||
|
.title { |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
|
||||
|
.title { |
||||
|
margin-right: 15rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.play { |
||||
|
width: 92%; |
||||
|
margin: 15rpx auto; |
||||
|
|
||||
|
.lists { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
|
||||
|
.item { |
||||
|
background-color: #FFDEE0; |
||||
|
padding: 10rpx 30rpx; |
||||
|
border-radius: 10rpx; |
||||
|
height: 30rpx; |
||||
|
color: #F22E38; |
||||
|
border: 1rpx solid #F22E38; |
||||
|
margin-bottom: 10rpx; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.head { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 30rpx; |
||||
|
|
||||
|
.left { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
|
||||
|
.title { |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
|
||||
|
.title { |
||||
|
margin-right: 15rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.style { |
||||
|
width: 92%; |
||||
|
margin: 15rpx auto; |
||||
|
|
||||
|
.lists { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.item { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-bottom: 30rpx; |
||||
|
|
||||
|
.title { |
||||
|
margin-top: 15rpx; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.active { |
||||
|
position: relative; |
||||
|
|
||||
|
color: #F22E38; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.head { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 30rpx; |
||||
|
|
||||
|
.left { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
|
||||
|
.title { |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
|
||||
|
.title { |
||||
|
margin-right: 15rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.keywords { |
||||
|
width: 92%; |
||||
|
margin: 15rpx auto; |
||||
|
|
||||
|
.lists { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.item { |
||||
|
background-color: #fff; |
||||
|
padding: 10rpx 15rpx; |
||||
|
border-radius: 10rpx; |
||||
|
color: #666; |
||||
|
border: 1rpx solid #666; |
||||
|
max-width: 128rpx; |
||||
|
margin-bottom: 10rpx; |
||||
|
font-size: 24rpx; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.active { |
||||
|
color: #060101; |
||||
|
border: 1rpx solid #F22E38; |
||||
|
background-color: #FFDEE0; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.head { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 15rpx; |
||||
|
|
||||
|
.left { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
|
||||
|
.title { |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
|
||||
|
.title { |
||||
|
margin-right: 15rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
page { |
||||
|
background-color: #fff; |
||||
|
padding-bottom: 120rpx; |
||||
|
} |
||||
|
|
||||
|
.btn-action { |
||||
|
width: 90%; |
||||
|
position: fixed; |
||||
|
bottom: 0rpx; |
||||
|
left: 4%; |
||||
|
height: 120rpx; |
||||
|
|
||||
|
.btn-group { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.rand { |
||||
|
width: 40%; |
||||
|
|
||||
|
.u-button { |
||||
|
height: 100rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.start { |
||||
|
width: 55%; |
||||
|
|
||||
|
.btn-normal { |
||||
|
height: 100rpx; |
||||
|
line-height: normal; |
||||
|
font-size: 28rpx; |
||||
|
border-radius: 50rpx; |
||||
|
background-color: #f22e38; |
||||
|
border: none; |
||||
|
color: #f4f4f5; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
box-shadow: 3rpx 3rpx 10rpx #dd6161; |
||||
|
|
||||
|
.title { |
||||
|
font-weight: bolder; |
||||
|
} |
||||
|
|
||||
|
.small { |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn-normal::after { |
||||
|
border: initial; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.styleBox{ |
||||
|
white-space: nowrap; // 滚动必须加的属性 |
||||
|
width: 700rpx; |
||||
|
margin-left: 30rpx; |
||||
|
//padding-right: 20rpx; |
||||
|
|
||||
|
.styleItem{ |
||||
|
width: 166rpx; |
||||
|
height: 170rpx; |
||||
|
margin-right: 20rpx; |
||||
|
display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
border: 5rpx solid #fff; |
||||
|
border-radius: 10rpx; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.styleActive { |
||||
|
color: #060101; |
||||
|
border: 1rpx solid #F22E38; |
||||
|
background-color: #FFDEE0; |
||||
|
opacity: 0.9; |
||||
|
font-weight: 900; |
||||
|
} |
||||
|
|
||||
|
.styleCover{ |
||||
|
width: 165rpx; |
||||
|
height: 165rpx; |
||||
|
} |
||||
|
|
||||
|
.styleName{ |
||||
|
font-size: 36rpx; |
||||
|
color: #000000; |
||||
|
line-height: 42rpx; |
||||
|
padding: 0; |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
position: absolute; |
||||
|
background-color: #FFF; |
||||
|
opacity: 0.5; |
||||
|
top: 125rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.startPaint{ |
||||
|
background-color: #1A96DB; |
||||
|
border: 1px solid #F22E38; |
||||
|
border-radius: 10rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,574 @@ |
|||||
|
<template> |
||||
|
<view class="container"> |
||||
|
<!-- 图片绘制区域 --> |
||||
|
<view class="paint"> |
||||
|
<view class="cover" v-if="successFlag === false"> |
||||
|
<view class="plate"> |
||||
|
<view class="loading-icon"> |
||||
|
<uni-icons type="spinner-cycle" size="40"></uni-icons> |
||||
|
</view> |
||||
|
<view class="loading-tips"> |
||||
|
Ai正在拼命绘制中..... |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 绘制好的图替换默认图展示 --> |
||||
|
<view class="successCover" @click="onPreviewImage" v-if="successFlag === true"> |
||||
|
<image :src="transImg" mode="aspectFill" class="img"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="complete"> |
||||
|
<!-- prompt关键词 --> |
||||
|
<view class="keywords"> |
||||
|
<view> |
||||
|
<view class="promptTitle">关键词</view> |
||||
|
</view> |
||||
|
<view class="content"> |
||||
|
<text>{{prompt}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 图画详细参数 --> |
||||
|
<view class="label"> |
||||
|
<!-- <view class="style"> |
||||
|
<view class="i">关键词</view> |
||||
|
<view class="text">{{ prompt }}</view> |
||||
|
</view> --> |
||||
|
<view class="style"> |
||||
|
<view class="i">画布:</view> |
||||
|
<view class="text">{{ imgWidth }}x{{ imgHeight }}</view> |
||||
|
</view> |
||||
|
<view class="style"> |
||||
|
<view class="i">创作风格:</view> |
||||
|
<view class="text">{{styleName}}</view> |
||||
|
</view> |
||||
|
<view class="style" v-if="successFlag === true"> |
||||
|
<view class="i">作品编号:</view> |
||||
|
<view class="text">{{paintId}}</view> |
||||
|
</view> |
||||
|
<view class="style" v-if="successFlag === true"> |
||||
|
<view class="i">创作时间:</view> |
||||
|
<view class="text">{{paintTime}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 底部操作栏(绘制成功替换，告知图片保存在用户画册里) --> |
||||
|
<view class="action" v-if="successFlag === true"> |
||||
|
<view class="action-group"> |
||||
|
<view class="actionBtn"> |
||||
|
<view class="grid" @click="onCopyPrompt"> |
||||
|
<uni-icons type="paperplane-filled" size="30"></uni-icons> |
||||
|
<text class="grid-text">复制关键词</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="actionBtn"> |
||||
|
<view class="grid" @click="onSaveImage(transImg)"> |
||||
|
<uni-icons type="cloud-download-filled" size="30"></uni-icons> |
||||
|
<text class="grid-text">保存作品</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="actionBtn"> |
||||
|
<view class="grid" @click="onShareImage"> |
||||
|
<uni-icons type="pyq" size="30"></uni-icons> |
||||
|
<button open-type="share" size="mini" plain="true" type="default">分享好友</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
<!-- 底部流量主 --> |
||||
|
<!-- <view class="ad" v-if="spool.video.status == 10"> --> |
||||
|
<view class="ad"> |
||||
|
<ad :unit-id="spool.video.id" ad-type="video" ad-theme="white"></ad> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import base64ToImg from '@/utils/base64Utils'; |
||||
|
import { textToImg} from '@/api/paint.js'; |
||||
|
import {loginTiktok} from '@/api/auth.js' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
imgHeight: undefined, |
||||
|
imgWidth: undefined, |
||||
|
transImg: undefined, |
||||
|
prompt: undefined, |
||||
|
successFlag: false, |
||||
|
paintId: undefined, |
||||
|
paintTime: undefined, |
||||
|
styleName: undefined, |
||||
|
//imgHeight: 512, |
||||
|
//imgWidth: 512, |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
//接收上一个页面传来的绘画参数 |
||||
|
const paintData = JSON.parse(options.data); |
||||
|
console.log('paintData',paintData); |
||||
|
this.imgHeight = paintData.height; |
||||
|
this.imgWidth = paintData.width; |
||||
|
this.prompt = paintData.prompt; |
||||
|
this.styleName = paintData.styleName; |
||||
|
textToImg(paintData).then(res =>{ |
||||
|
if(res.data.code === 200){ |
||||
|
uni.hideLoading(); |
||||
|
console.log('res',res); |
||||
|
this.base64ToPath(res.data.data.images); |
||||
|
this.successFlag = true; |
||||
|
this.paintTime = res.data.data.paintTime; |
||||
|
this.paintId = res.data.data.paintId; |
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
onShareTimeline() { |
||||
|
let _this = this |
||||
|
let referee_id = '' |
||||
|
if (_this.userInfo.user_id) { |
||||
|
referee_id = _this.userInfo.user_id |
||||
|
} |
||||
|
return { |
||||
|
imageUrl: _this.share.share.image_url, |
||||
|
title: _this.share.share.title, |
||||
|
path: '/pages/main/draw/index?referee_id=' + referee_id |
||||
|
} |
||||
|
}, |
||||
|
onShareAppMessage() { |
||||
|
console.log('惦记了分享') |
||||
|
// let _this = this |
||||
|
// let referee_id = '' |
||||
|
// if (_this.userInfo.user_id) { |
||||
|
// referee_id = _this.userInfo.user_id |
||||
|
// } |
||||
|
// return { |
||||
|
// imageUrl: _this.share.share.image_url, |
||||
|
// desc: _this.share.share.desc, |
||||
|
// title: '@'+_this.share.share.title, |
||||
|
// path: '/pages/main/draw/index?referee_id=' + referee_id |
||||
|
// } |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
//调用登录接口 |
||||
|
async loginFunc(res, userInfo, callBack) { |
||||
|
const params = { |
||||
|
code: res.code, |
||||
|
encryptedData: userInfo.encryptedData, |
||||
|
iv: userInfo.iv |
||||
|
} |
||||
|
// 用户授权登录 |
||||
|
await loginTiktok(params).then(res => { |
||||
|
if (res.data.code === 200) { |
||||
|
uni.setStorage({ |
||||
|
key: 'userInfo', |
||||
|
data: res.data.data.userInfo, |
||||
|
}) |
||||
|
this.userInfo = res.data.data.userInfo; |
||||
|
console.log('this.userInfo',this.userInfo) |
||||
|
uni.setStorage({ |
||||
|
key: 'token', |
||||
|
data: res.data.data.access_token |
||||
|
}) |
||||
|
let headers = { |
||||
|
TiktokAuthorization: res.data.data.access_token |
||||
|
} |
||||
|
callBack && callBack(headers) |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: res.data.msg, |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
} |
||||
|
}).catch(res => {}) |
||||
|
}, |
||||
|
|
||||
|
// 获取用户信息 |
||||
|
async getUserInfoLogin(callBack) { |
||||
|
uni.getSetting({ |
||||
|
success: (settingObj) => { |
||||
|
if (settingObj.authSetting['scope.userInfo'] === undefined || settingObj.authSetting['scope.userInfo']) { |
||||
|
uni.login({ |
||||
|
force: true, |
||||
|
success: (res) => { |
||||
|
uni.getUserInfo({ |
||||
|
withCredentials: true, |
||||
|
success: async (userInfo) => { |
||||
|
await this.loginFunc(res, userInfo, callBack) |
||||
|
}, |
||||
|
}) |
||||
|
}, |
||||
|
}) |
||||
|
} else { |
||||
|
uni.showModal({ |
||||
|
title: '您已拒绝授权用户信息', |
||||
|
content: '是否进入权限管理，调整授权？', |
||||
|
success: function (res) { |
||||
|
if (res.confirm) { |
||||
|
uni.openSetting({ |
||||
|
success: (settingRes) => { |
||||
|
if (settingRes.authSetting['scope.userInfo']) { |
||||
|
uni.login({ |
||||
|
force: true, |
||||
|
success: (res) => { |
||||
|
uni.getUserInfo({ |
||||
|
withCredentials: true, |
||||
|
success: async (userInfo) => { |
||||
|
await this.loginFunc(res, userInfo, callBack) |
||||
|
}, |
||||
|
}) |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
}) |
||||
|
} else if (res.cancel) { |
||||
|
console.log('用户点击取消'); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
//保存图片 |
||||
|
onSaveImage(url){ |
||||
|
let that = this; |
||||
|
console.log('点击了保存图片事件') |
||||
|
that.download(url) |
||||
|
}, |
||||
|
|
||||
|
// 下载 |
||||
|
download(url) { |
||||
|
let that = this; |
||||
|
//console.log('即将下载的图片为',that.transImg) |
||||
|
uni.showLoading({ |
||||
|
title: '正在保存图片...' |
||||
|
}); |
||||
|
//获取用户的当前设置。获取相册权限 |
||||
|
uni.getSetting({ |
||||
|
success: (res) => { |
||||
|
//如果没有相册权限 |
||||
|
if (!res.authSetting["scope.album"]) { |
||||
|
//向用户发起授权请求 |
||||
|
uni.authorize({ |
||||
|
scope: "scope.album", |
||||
|
success: () => { |
||||
|
uni.saveImageToPhotosAlbum({ |
||||
|
//图片路径，不支持网络图片路径 |
||||
|
filePath: url, |
||||
|
success: (res) => { |
||||
|
|
||||
|
}, |
||||
|
fail: (res) => { |
||||
|
return uni.showToast({ |
||||
|
title: res.errMsg, |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
}, |
||||
|
complete: (res) => { |
||||
|
uni.hideLoading(); |
||||
|
if (res.errMsg !== "saveImageToPhotosAlbum:ok") { |
||||
|
return uni.showToast({ |
||||
|
title: "下载失败！", |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} else { |
||||
|
return uni.showToast({ |
||||
|
title: "保存成功！", |
||||
|
icon: 'none', |
||||
|
success() { |
||||
|
|
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
//授权失败 |
||||
|
fail: () => { |
||||
|
uni.hideLoading(); |
||||
|
uni.showModal({ |
||||
|
title: "您已拒绝获取相册权限", |
||||
|
content: "是否进入权限管理，调整授权？", |
||||
|
success: (res) => { |
||||
|
if (res.confirm) { |
||||
|
//调起客户端小程序设置界面，返回用户设置的操作结果。（重新让用户授权） |
||||
|
uni.openSetting({ |
||||
|
success: (res) => { |
||||
|
|
||||
|
}, |
||||
|
}); |
||||
|
} else if (res.cancel) { |
||||
|
return uni.showToast({ |
||||
|
title: "已取消！", |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
}); |
||||
|
} else { |
||||
|
//如果已有相册权限，直接保存图片到系统相册 |
||||
|
uni.saveImageToPhotosAlbum({ |
||||
|
filePath: url, |
||||
|
success: (res) => { |
||||
|
console.log('有权限下载图片结果为',res) |
||||
|
uni.hideLoading(); |
||||
|
console.log('333333') |
||||
|
if(res.errMsg === "saveImageToPhotosAlbum:ok"){ |
||||
|
console.log('44444') |
||||
|
return uni.showToast({ |
||||
|
title: "保存成功！", |
||||
|
duration: 2000, |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
fail: (res) => { |
||||
|
uni.hideLoading(); |
||||
|
return uni.showToast({ |
||||
|
title: res.errMsg, |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
}, |
||||
|
//无论成功失败都走的回调 |
||||
|
complete: (res) => { |
||||
|
uni.hideLoading(); |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
fail: (res) => {}, |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
//复制关键词 |
||||
|
onCopyPrompt(){ |
||||
|
let that = this; |
||||
|
//console.log('点击复制关键词事件') |
||||
|
uni.setClipboardData({ |
||||
|
data: that.prompt, |
||||
|
success() { |
||||
|
uni.showToast({ |
||||
|
title: '复制关键词成功!' |
||||
|
}); |
||||
|
|
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
//分享 |
||||
|
onShareImage(){ |
||||
|
console.log('点击分享事件') |
||||
|
}, |
||||
|
|
||||
|
//查看大图 |
||||
|
onPreviewImage(){ |
||||
|
console.log('点击查看大图事件') |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
//转义base64图片 |
||||
|
base64ToPath(url){ |
||||
|
let str = "data:image/png;base64,"+url; |
||||
|
base64ToImg(str,res =>{ |
||||
|
console.log('解析出的图片路径为:',res) |
||||
|
this.transImg = res; |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
page { |
||||
|
background-color: #f4f4f4; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
@keyframes xing { |
||||
|
0% { |
||||
|
transform: scale(1); |
||||
|
} |
||||
|
|
||||
|
25% { |
||||
|
transform: scale(1.2); |
||||
|
} |
||||
|
|
||||
|
50% { |
||||
|
transform: scale(1); |
||||
|
} |
||||
|
|
||||
|
75% { |
||||
|
transform: scale(1.2); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes fadenum { |
||||
|
100% { |
||||
|
transform: rotate(360deg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ad { |
||||
|
margin-top: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.complete { |
||||
|
.action { |
||||
|
width: 100%; |
||||
|
position: fixed; |
||||
|
bottom: 0rpx; |
||||
|
left: 0rpx; |
||||
|
background-color: #fff; |
||||
|
padding: 30rpx 10rpx; |
||||
|
|
||||
|
.action-group { |
||||
|
width: 90%; |
||||
|
margin: 0 auto; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.actionBtn{ |
||||
|
width: 50%; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
//margin:0rpx 25rpx 0rpx 25rpx; |
||||
|
|
||||
|
.grid { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
|
||||
|
.grid-text { |
||||
|
font-size: 30rpx; |
||||
|
margin-top: 10rpx; |
||||
|
} |
||||
|
|
||||
|
button { |
||||
|
background-color: transparent; |
||||
|
border: 0; |
||||
|
outline: 0; |
||||
|
font-size: 30rpx; |
||||
|
} |
||||
|
|
||||
|
button::after{ |
||||
|
border: none; |
||||
|
outline: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.label { |
||||
|
width: 92%; |
||||
|
margin: 0 auto; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: left; |
||||
|
align-items: flex-start; |
||||
|
margin-top: 15rpx; |
||||
|
|
||||
|
.style { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: flex-start; |
||||
|
margin-top: 30rpx; |
||||
|
|
||||
|
.i { |
||||
|
//background-color: #fff; |
||||
|
color: #1A96DB; |
||||
|
padding: 5rpx 10rpx; |
||||
|
border-radius: 5rpx; |
||||
|
margin-right: 15rpx; |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
font-size: 40rpx; |
||||
|
font-weight: bolder; |
||||
|
color: #000000; |
||||
|
background-color: #1A94BC1A; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.promptTitle{ |
||||
|
text-align: center; |
||||
|
font-weight: bolder; |
||||
|
font-size: 40rpx; |
||||
|
color: #1A96DB; |
||||
|
} |
||||
|
|
||||
|
.keywords { |
||||
|
width: 90%; |
||||
|
margin: 0 auto; |
||||
|
background-color: #1A94BC1A; |
||||
|
padding: 15rpx; |
||||
|
border-radius: 10rpx; |
||||
|
margin-top: 15rpx; |
||||
|
|
||||
|
.content { |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-line-clamp: 2; |
||||
|
/*这里设置几行*/ |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.paint { |
||||
|
.cover { |
||||
|
width: 100%; |
||||
|
height: 720rpx; |
||||
|
border-radius: 10rpx; |
||||
|
background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63889c845a7e3f0310de5223/6398219cd109e60012196b2c/16715997158982711362.png'); |
||||
|
background-size: 100% 100%; |
||||
|
background-repeat: no-repeat; |
||||
|
|
||||
|
.plate { |
||||
|
width: 100%; |
||||
|
height: 720rpx; |
||||
|
backdrop-filter: blur(25rpx); |
||||
|
background: rgba(255, 255, 255, .3); |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
|
||||
|
.loading-icon { |
||||
|
animation: fadenum 5s infinite; |
||||
|
} |
||||
|
|
||||
|
.loading-tips { |
||||
|
margin-top: 30rpx; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.successCover { |
||||
|
width: 100%; |
||||
|
height: 720rpx; |
||||
|
border-radius: 10rpx; |
||||
|
|
||||
|
.img{ |
||||
|
width: 100%; |
||||
|
height: 720rpx; |
||||
|
border-radius: 10rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,228 @@ |
|||||
|
<template> |
||||
|
<view class="container"> |
||||
|
<view class="head"> |
||||
|
<view> |
||||
|
<uni-search-bar class="uni-mt-10" placeholder="开启你的探索旅程吧" clearButton="auto" cancelButton="none" @confirm="search" ></uni-search-bar> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="hotSearch"> |
||||
|
<view> |
||||
|
<uni-section title="大家都在搜"> |
||||
|
<uni-group> |
||||
|
<uni-data-checkbox mode="tag" v-model="hotKeywordSelected" :localdata="hotKeywordList" @change="selectedHotKeyword" max="1"></uni-data-checkbox> |
||||
|
</uni-group> |
||||
|
</uni-section> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
querySignImgBySignName,getHotKeywordList,insertHotKeyword,incrementHotKeywordScore |
||||
|
} from '@/api/atlas.js' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
hotKeywordList:[], |
||||
|
hotKeywordSelected: "", |
||||
|
} |
||||
|
}, |
||||
|
onShow() { |
||||
|
//解决每次加载页面重新赋值热词列表的BUG |
||||
|
this.hotKeywordList = []; |
||||
|
this.getHotKeywordList(); |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
//选中热点词事件 |
||||
|
async selectedHotKeyword(e){ |
||||
|
let that = this; |
||||
|
console.log('e',e); |
||||
|
that.hotKeywordSelected = e.detail.data.text; |
||||
|
//console.log('进行了点击热点词',that.hotKeywordSelected) |
||||
|
//热搜词点击次数+1 |
||||
|
that.incrementHotKeywordScore(that.hotKeywordSelected); |
||||
|
//调用搜索图片方法 |
||||
|
const params = { |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
signName: that.hotKeywordSelected |
||||
|
} |
||||
|
const response = await querySignImgBySignName(params) |
||||
|
if (response.data.code != 200) { |
||||
|
uni.showToast({ |
||||
|
title: response.data.msg, |
||||
|
icon: 'none', |
||||
|
}) |
||||
|
}else{ |
||||
|
//判断是否返回结果是否有值，有值则跳转对应图片页面，没有则弹窗提示是否跳转AI绘画 |
||||
|
if(response.data.rows.length > 0){ |
||||
|
uni.setStorage({ |
||||
|
key: 'atlas_detailId', |
||||
|
data: { |
||||
|
signName: that.hotKeywordSelected, |
||||
|
type:'search' |
||||
|
}, |
||||
|
success() { |
||||
|
uni.navigateTo({ |
||||
|
url: './atlasList' |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}else{ |
||||
|
uni.showModal({ |
||||
|
title: '提示', |
||||
|
content: '抱歉没有找到想要的图片。不如试试意境绘画!', |
||||
|
success(res){ |
||||
|
if(res.confirm){ |
||||
|
uni.navigateTo({ |
||||
|
url: '../ai/paint/paint' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
//保存热搜词 |
||||
|
async insertHotKeyword(keyword){ |
||||
|
const res = await insertHotKeyword(keyword); |
||||
|
if (res.data.code !== 200) { |
||||
|
uni.showModal({ |
||||
|
content: res.data.msg, |
||||
|
showCancel: false |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//热搜词增加点击次数 |
||||
|
async incrementHotKeywordScore(keyword){ |
||||
|
const res = await incrementHotKeywordScore(keyword); |
||||
|
if (res.data.code !== 200) { |
||||
|
uni.showModal({ |
||||
|
content: res.data.msg, |
||||
|
showCancel: false |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 获取热搜词 |
||||
|
async getHotKeywordList() { |
||||
|
const res = await getHotKeywordList() |
||||
|
if (res.data.code === 200) { |
||||
|
for (let i = 0; i < res.data.data.length; i++) { |
||||
|
let data = { |
||||
|
value: i, |
||||
|
text: res.data.data[i] |
||||
|
} |
||||
|
this.hotKeywordList.push(data); |
||||
|
} |
||||
|
} else { |
||||
|
uni.showModal({ |
||||
|
content: res.data.msg, |
||||
|
showCancel: false |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//搜索图片 |
||||
|
async search(res) { |
||||
|
if (res.value) { |
||||
|
//保存热搜词到redis缓存 |
||||
|
this.insertHotKeyword(res.value) |
||||
|
const params = { |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
signName: res.value |
||||
|
} |
||||
|
const response = await querySignImgBySignName(params) |
||||
|
if (response.data.code != 200) { |
||||
|
uni.showToast({ |
||||
|
title: response.data.msg, |
||||
|
icon: 'none', |
||||
|
}) |
||||
|
}else{ |
||||
|
//判断是否返回结果是否有值，有值则跳转对应图片页面，没有则弹窗提示是否跳转AI绘画 |
||||
|
if(response.data.rows.length > 0){ |
||||
|
uni.setStorage({ |
||||
|
key: 'atlas_detailId', |
||||
|
data: { |
||||
|
signName: res.value, |
||||
|
type:'search' |
||||
|
}, |
||||
|
success() { |
||||
|
uni.navigateTo({ |
||||
|
url: './atlasList' |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}else{ |
||||
|
uni.showModal({ |
||||
|
title: '提示', |
||||
|
content: '抱歉没有找到想要的图片。不如试试意境绘画!', |
||||
|
success(res){ |
||||
|
if(res.confirm){ |
||||
|
uni.navigateTo({ |
||||
|
url: '../ai/paint/paint' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: '请输入要搜索的标签名', |
||||
|
icon: 'none', |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.container{ |
||||
|
//width: 670rpx; |
||||
|
//height: 100vh; |
||||
|
//margin: 0 auto; |
||||
|
//position: relative; |
||||
|
|
||||
|
.recentSearch{ |
||||
|
margin-top: 50rpx; |
||||
|
height: 30vh; |
||||
|
border: 2px solid red; |
||||
|
font-size: 36rpx; |
||||
|
} |
||||
|
|
||||
|
.hotSearch{ |
||||
|
margin-top: 50rpx; |
||||
|
height: 50vh; |
||||
|
//border: 2px solid blue; |
||||
|
|
||||
|
.title{ |
||||
|
font-size: 50px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.uni-searchbar { |
||||
|
border: 1px solid $uni-primary; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 0; |
||||
|
margin-left: 40rpx; |
||||
|
margin-right: 40rpx; |
||||
|
margin-top: 20rpx; |
||||
|
margin-bottom: 50rpx; |
||||
|
|
||||
|
.uni-searchbar__box { |
||||
|
padding: 0; |
||||
|
border-radius: 16rpx !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,172 @@ |
|||||
|
<template> |
||||
|
<view class="myCollection"> |
||||
|
<waterfallList ref="waterfallRef" :col="2" :clickItem="targetDetail" ></waterfallList> |
||||
|
<!-- 显示加载中或者全部加载完成 --> |
||||
|
<view> |
||||
|
<uni-load-more :status="loadStatus"></uni-load-more> |
||||
|
</view> |
||||
|
<!-- <view class="ad-view"> |
||||
|
<ad adpid="__UNI__069D14D" type="banner" @load="onload" @close="onclose" @error="onerror"></ad> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
getAiPaintPage |
||||
|
} from '@/api/paint.js' |
||||
|
import waterfallList from '@/components/waterfall-list/waterfall-list.vue' |
||||
|
export default { |
||||
|
components:{ |
||||
|
waterfallList |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
userInfo: {}, // 用户信息 |
||||
|
imgList: [], // 图片列表 |
||||
|
imgWidth: 0, // 图片宽 |
||||
|
imgHeight: 0, // 图片高 |
||||
|
pageNum: 1, |
||||
|
pageSize: 4, |
||||
|
loadStatus:'noMore', //加载样式：more - 加载前样式，loading - 加载中样式，noMore - 没有数据样式 |
||||
|
isLoadMore:false, //是否加载中 |
||||
|
} |
||||
|
}, |
||||
|
onShow() { |
||||
|
let that = this; |
||||
|
that.userInfo = uni.getStorageSync('userInfo') |
||||
|
if (that.userInfo) { |
||||
|
that.pageNum = 1; |
||||
|
that.$refs.waterfallRef && that.$refs.waterfallRef.init(); |
||||
|
that.getImgList() |
||||
|
} |
||||
|
}, |
||||
|
// 下拉刷新 |
||||
|
onPullDownRefresh() { |
||||
|
this.pageNum = 1 |
||||
|
this.imgList = [] |
||||
|
this.getImgList() |
||||
|
uni.stopPullDownRefresh() |
||||
|
}, |
||||
|
// 上划加载更多 |
||||
|
onReachBottom() {//上拉触底函数 |
||||
|
if(!this.isLoadMore) { //此处判断，上锁，防止重复请求 |
||||
|
this.isLoadMore=true |
||||
|
if (this.loadStatus === "more") { |
||||
|
this.pageNum += 1 //每次上拉请求新的一页 |
||||
|
this.getImgList(); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// ai图画分頁 |
||||
|
async getImgList() { |
||||
|
let that = this |
||||
|
const res = await getAiPaintPage({ |
||||
|
painterId: that.userInfo.id, |
||||
|
source: '1', |
||||
|
pageNum: that.pageNum, |
||||
|
pageSize: that.pageSize |
||||
|
}) |
||||
|
console.log('res',res) |
||||
|
if (res.data.code === 200) { |
||||
|
that.$refs.waterfallRef.addData(res.data.rows); |
||||
|
if(res.data.rows.length < that.pageSize){ //判断接口返回数据量小于请求数据量，则表示此为最后一页 |
||||
|
that.isLoadMore = true |
||||
|
that.loadStatus = 'noMore' |
||||
|
}else{ |
||||
|
this.loadStatus = 'more'; |
||||
|
that.isLoadMore = false |
||||
|
} |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: res.data.msg, |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
that.isLoadMore = false |
||||
|
if(that.page > 1){ |
||||
|
that.page -= 1 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 前往详情页 |
||||
|
targetDetail(item) { |
||||
|
if (item.id) { |
||||
|
console.log('图片为',item) |
||||
|
uni.setStorage({ |
||||
|
key: 'detailId', |
||||
|
data: item.imgId, |
||||
|
success() { |
||||
|
uni.navigateTo({ |
||||
|
url: '../../creator/imgDetail' |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
/*if (item.id) { |
||||
|
uni.setStorage({ |
||||
|
key: 'detailId', |
||||
|
data: item.id, |
||||
|
success() { |
||||
|
uni.navigateTo({ |
||||
|
url: '../creator/imgDetail' |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}*/ |
||||
|
}, |
||||
|
}, |
||||
|
// onload(e) { |
||||
|
// console.log("加载了广告"); |
||||
|
// }, |
||||
|
// onclose(e) { |
||||
|
// console.log("关闭了广告: " + e.detail); |
||||
|
// }, |
||||
|
// onerror(e) { |
||||
|
// console.log("onerror: " + e.detail.errCode + " message:: " + e.detail.errMsg); |
||||
|
// } |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.myCollection { |
||||
|
padding-right: 40rpx; |
||||
|
padding-top: 40rpx; |
||||
|
|
||||
|
.uni-searchbar { |
||||
|
border: 1px solid #11A8FD; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 0; |
||||
|
margin-left: 40rpx; |
||||
|
|
||||
|
.uni-searchbar__box { |
||||
|
padding: 0; |
||||
|
border-radius: 16rpx !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.myCollection-list { |
||||
|
display: flex; |
||||
|
|
||||
|
.first-box { |
||||
|
border-radius: 16rpx; |
||||
|
font-size: 16px; |
||||
|
margin-top: 40rpx; |
||||
|
margin-left: 40rpx; |
||||
|
color: #fff; |
||||
|
line-height: 60rpx; |
||||
|
text-align: center; |
||||
|
height: 60rpx; |
||||
|
background-color: #11A8FD; |
||||
|
display: inline-block; |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
|
||||
|
image { |
||||
|
margin-top: 40rpx; |
||||
|
margin-left: 40rpx; |
||||
|
border-radius: 16rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,4 +1,4 @@ |
|||||
{ |
{ |
||||
"uni-search-bar.cancel": "cancel", |
"uni-search-bar.cancel": "cancel", |
||||
"uni-search-bar.placeholder": "请输入搜索内容" |
"uni-search-bar.placeholder": "点击发现精彩!" |
||||
} |
} |
||||
|
|||||
@ -0,0 +1,31 @@ |
|||||
|
const fsm = tt.getFileSystemManager(); |
||||
|
var index = 0 |
||||
|
function getNewFileId() { |
||||
|
return Date.now() + String(index++) |
||||
|
} |
||||
|
const FILE_BASE_NAME = getNewFileId(); //自定义文件名
|
||||
|
|
||||
|
|
||||
|
|
||||
|
function base64ToImg(base64data, cb) { |
||||
|
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || []; |
||||
|
if (!format) { |
||||
|
return (new Error('图片转换错误!')); |
||||
|
} |
||||
|
|
||||
|
const filePath = `${tt.getEnvInfoSync().common.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`; |
||||
|
const buffer = tt.base64ToArrayBuffer(bodyData); |
||||
|
fsm.writeFile({ |
||||
|
filePath, |
||||
|
data: buffer, |
||||
|
encoding: 'binary', |
||||
|
success() { |
||||
|
cb(filePath); |
||||
|
}, |
||||
|
fail() { |
||||
|
return (new Error('图片转换错误!')); |
||||
|
}, |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
module.exports = base64ToImg; |
||||
Loading…
Reference in new issue