first commit
This commit is contained in:
RISE
182
pages/index/decode.vue
Normal file
182
pages/index/decode.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<scroll-view scroll-y="true" class="htmlText"
|
||||
:scroll-into-view="lastDiv" :scroll-top="scrollTop" scroll-with-animation="true">
|
||||
<view ref="content" class="scrolls">
|
||||
<text :user-select="true">
|
||||
{{ AImessage }}<span class="end" v-if="!isOver"></span>
|
||||
</text>
|
||||
|
||||
</view>
|
||||
<view id="last-div">
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<div class="weui-btn-area ">
|
||||
<button class="weui-btn" :loading="shareBtnLoading" type="primary" @click="showTopTipsFun">分享给好友</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
AImessage: "",
|
||||
isOver: false,
|
||||
socketMsgQueue: [],
|
||||
scrollTop:1,
|
||||
lastDiv:'last-div',
|
||||
dream:"",
|
||||
shareBtnLoading : false
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.dream = options.dream
|
||||
this.initWs()
|
||||
console.log(this.dream,"created")
|
||||
this.socketMsgQueue.push({
|
||||
"act": "start_generate",
|
||||
"payload": {
|
||||
"message": this.dream,
|
||||
"template_name": "jiemeng"
|
||||
}
|
||||
})
|
||||
this.sendMsg()
|
||||
console.log(options.dream)
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.AImessage = ""
|
||||
this.isOver = false
|
||||
this.recordId = null
|
||||
|
||||
|
||||
},
|
||||
onUnload() {
|
||||
this.socketMsgQueue = [];
|
||||
wx.closeSocket()
|
||||
},
|
||||
|
||||
methods: {
|
||||
downScrollTop(isLog){
|
||||
let height = 0
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
|
||||
query.select('.htmlText').boundingClientRect(data => {
|
||||
height = data.height
|
||||
}).exec();
|
||||
query.select('.scrolls').boundingClientRect(data => {
|
||||
// if(!isLog){
|
||||
// console.log( data.height , height , 0 , data.height + height , 0 )
|
||||
// }
|
||||
this.scrollTop = data.height - height > 0 ? data.height + height : 0
|
||||
}).exec();
|
||||
|
||||
},
|
||||
initWs() {
|
||||
const self = this
|
||||
const token = wx.getStorageSync('token');
|
||||
wx.connectSocket({
|
||||
url: 'wss://ai-api.aitools666.com/chat',
|
||||
header: {
|
||||
'authorization': token
|
||||
}
|
||||
})
|
||||
wx.onSocketOpen((res) => {
|
||||
this.sendMsg()
|
||||
})
|
||||
wx.onSocketMessage((res) => {
|
||||
const response = JSON.parse(res.data)
|
||||
if (response.act == 'answer') {
|
||||
this.AImessage = this.AImessage + response.message
|
||||
this.$nextTick(() => {
|
||||
this.downScrollTop()
|
||||
})
|
||||
|
||||
} else if (response.act == 'answer_finish') {
|
||||
this.isOver = true
|
||||
this.recordId = response.payload.record_id
|
||||
setTimeout(() => {
|
||||
this.downScrollTop(false)
|
||||
},500)
|
||||
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: response.message,
|
||||
icon: 'error',
|
||||
duration: 3000,
|
||||
mask: true
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
},
|
||||
sendMsg() {
|
||||
for (let i = 0; i < this.socketMsgQueue.length; i++) {
|
||||
wx.sendSocketMessage({
|
||||
data: JSON.stringify(this.socketMsgQueue[i])
|
||||
})
|
||||
}
|
||||
},
|
||||
showTopTipsFun() {
|
||||
if (!this.isOver) {
|
||||
wx.showToast({
|
||||
title: "请等待生成结束",
|
||||
icon: 'error',
|
||||
duration: 3000,
|
||||
mask: true
|
||||
});
|
||||
return
|
||||
}
|
||||
this.shareBtnLoading = true
|
||||
wx.downloadFile({
|
||||
url: 'https://ai-api.aitools666.com/generate-post?record_id=' + this.recordId,
|
||||
success: (res) => {
|
||||
this.shareBtnLoading = false
|
||||
wx.showShareImageMenu({
|
||||
path: res.tempFilePath,
|
||||
fail: (e)=>{
|
||||
console.log(e)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.page {
|
||||
padding: 2em
|
||||
}
|
||||
|
||||
.htmlText {
|
||||
height: 70vh;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.end::after {
|
||||
content: "|";
|
||||
animation: blink .3s linear infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
198
pages/index/index.vue
Normal file
198
pages/index/index.vue
Normal file
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<h5 class="title-h5">周公解梦</h5>
|
||||
<p class="text-content">请详细描述你的梦境，本系统将科学的分析、解析您的梦境。</p>
|
||||
<view class="uni-title uni-common-pl" style="margin-bottom: 10px;">我梦到了:</view>
|
||||
<view class="uni-textarea">
|
||||
<textarea class="textarea-style" v-model="dream" placeholder="如:从高处跌落,带着降落伞滑落至草原" />
|
||||
</view>
|
||||
<view class="scroll_box">
|
||||
<!-- <swiper class="swiper" display-multiple-items="1" :autoplay="autoplay" :interval="interval" :duration="duration">
|
||||
<swiper-item v-for="(item,index) in list" :key="index">
|
||||
<view class="swiper-item uni-bg-green">{{item}}</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<swiper class="swiper" display-multiple-items="1" :autoplay="autoplay" :interval="interval" :duration="duration">
|
||||
<swiper-item v-for="(item,index) in list" :key="index">
|
||||
<view class="swiper-item uni-bg-green">{{item}}</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<swiper class="swiper" display-multiple-items="1" :autoplay="autoplay" :interval="interval" :duration="duration">
|
||||
<swiper-item v-for="(item,index) in list" :key="index">
|
||||
<view class="swiper-item uni-bg-green">{{item}}</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<swiper class="swiper" display-multiple-items="1" :autoplay="autoplay" :interval="interval" :duration="duration">
|
||||
<swiper-item v-for="(item,index) in list" :key="index">
|
||||
<view class="swiper-item uni-bg-green">{{item}}</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<swiper class="swiper" display-multiple-items="1" :autoplay="autoplay" :interval="interval" :duration="duration">
|
||||
<swiper-item v-for="(item,index) in list" :key="index">
|
||||
<view class="swiper-item uni-bg-green">{{item}}</view>
|
||||
</swiper-item>
|
||||
</swiper> -->
|
||||
</view>
|
||||
<button @click="submitForm" class="submit">开始解梦</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello',
|
||||
swiperDotIndex: 0,
|
||||
dream: '',
|
||||
autoplay: true,
|
||||
interval: 2000,
|
||||
duration: 2000,
|
||||
list: [
|
||||
'请点击发行菜单进行发布',
|
||||
'体积较大；若要正式发布',
|
||||
'运行模式下不压缩代码且含有sourcemap',
|
||||
'检查是否启动多个微信开发者工具，如果是则关闭所有打开的微信开发者工具，',
|
||||
'然后再重新运行',
|
||||
'如果出现微信开发者工具启动后白屏的问题',
|
||||
'或者关闭微信开发者工具，然后再从HBuilderX中启动指定页面',
|
||||
'可以通过微信开发者工具切换pages.json中condition配置的页面',
|
||||
'中修改文件并保存，会自动刷新微信模拟器',
|
||||
'微信开发者工具已启动，在HBuilderX'
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
wx.login({
|
||||
success: res => {
|
||||
// 获取临时登录凭证
|
||||
const code = res.code;
|
||||
// 获取用户信息
|
||||
wx.getUserInfo({
|
||||
success: res => {
|
||||
const userInfo = res.userInfo;
|
||||
// 将 code 和 userInfo 发送给后台服务器
|
||||
wx.request({
|
||||
url: 'https://ai-api.aitools666.com/login',
|
||||
method: 'get',
|
||||
data: {
|
||||
code: code
|
||||
},
|
||||
success: res => {
|
||||
// 将服务器返回的自定义登录态 token 存储到本地
|
||||
wx.setStorageSync('token', res.data.access_token);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
submitForm() {
|
||||
if (!this.dream) {
|
||||
wx.showToast({
|
||||
title: '请填写您的梦境',
|
||||
icon: 'error',
|
||||
duration: 3000,
|
||||
mask: true
|
||||
});
|
||||
return false
|
||||
}
|
||||
const self = this
|
||||
wx.navigateTo({
|
||||
url: '/pages/index/decode?dream='+self.dream,
|
||||
success() {
|
||||
//uni.$emit('start-drame',{dream:self.dream})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.input {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
top: 1vh;
|
||||
left: 3vw;
|
||||
z-index: 9;
|
||||
font-size: 14px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.page {
|
||||
padding: 20px;
|
||||
background-color: #efefef;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.text-style {
|
||||
font-size: 14px;
|
||||
text-indent: 2em;
|
||||
padding-top: 20px;
|
||||
border: none;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.textarea-style {
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.text-content {
|
||||
margin: 3vh 0;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.title-h5 {
|
||||
font-size: 10vw;
|
||||
font-weight: bold;
|
||||
margin: 5vh 0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.submit {
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 90%;
|
||||
bottom: 10vh;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user