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.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