会员限制 + 提示词

pages/ai/paint/loverPaint.vue

@@ -9,6 +9,23 @@
 				<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"
@@ -32,8 +49,8 @@
 			</view>
 		</view>
 		
-		<view class="draw-button" @click="getDraw()">
+		<view class="draw-button" @click="checkIsVip()">
-			生成图片(消耗{{goldNum}}点画意值)
+			生成图片<br/>(消耗{{goldNum}}点画意值)
 		</view>
 		
 	
@@ -41,10 +58,11 @@
 </template>
 
 <script>
-	import {getPaintStyle, getPrompt, textToImg, checkUserCanAiPaint} from '@/api/paint.js';
+	import {getPaintStyle, getPrompt, textToImg, checkUserCanAiPaint, checkVip} from '@/api/paint.js';
 	export default {
 		data() {
 			return {
+				promptList: [],
 				sceneDesc: '',
 				contentDesc: '',
 				paintStyle:[],
@@ -54,15 +72,17 @@
 				checkData:{
 					checkCanPaint: false, //true已达到最大绘画上限;false未达最高上限
 				},
+				prompt_active: 0,
 			}
 		},
 		onLoad() {
 			this.getPaintStyleList();
-			// this.getPrompt();
+			this.getPrompt();
 		},
 		onShow() {
 			this.checkLogin();
-			this.checkUserCanAiPaint();
+			// this.getInitInfo();
+			// this.checkUserCanAiPaint();
 			this.sceneDesc = '',
 			this.contentDesc = '',
 			this.curType = 0
@@ -71,6 +91,82 @@
 			selectType(index) {
 				this.curType = index
 			},
+			//随机选取提示词
+			getRandPrompt() {
+				this.promptList = this.getRandomArrayElements(this.promptList, 10)
+				this.promptText = this.promptList[this.prompt_active].text
+			},
+			//获取提示词列表
+			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
+					});
+				}
+			},
+			//提示词
+			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.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();
@@ -202,7 +298,77 @@
   	justify-content: center;
   	align-items: center;
   	color: #fff;
-  	font-size: 20px;
+  	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;
+  		}
+  
+  	}
   
   }