bnyer-cloud-tiktok/pages/ai/paint/loverPaint.vue

<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="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="getDraw()">
			生成图片
		</view>
		
	
	</view>
</template>

<script>
	import {getPaintStyle, getPrompt, textToImg, checkUserCanAiPaint} from '@/api/paint.js';
	export default {
		data() {
			return {
				sceneDesc: '',
				contentDesc: '',
				paintStyle:[],
				curType: 0,
				userInfo: {},
				checkData:{
					checkCanPaint: false, //true已达到最大绘画上限;false未达最高上限
				},
			}
		},
		onLoad() {
			this.getPaintStyleList();
			// this.getPrompt();
		},
		onShow() {
			this.checkLogin();
			this.checkUserCanAiPaint();
		},
		methods: {
			selectType(index) {
				this.curType = index
			},
			//获取绘画风格
			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
					});
				}
			},
			//判断是否达到免费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,
							}
							uni.navigateTo({
								 url: './loverPainResult?data='+JSON.stringify(data)
							})
						}
					}
				});

				
			}
		}
		
	}
</script>

<style lang="scss" scoped>
.wrap {
  padding: 20px;
  width: 100%;
  min-height: 100vh;
  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: 20px;
  			
  }
  
  .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>