parent
e69712b1d2
commit
14eab68a3f
@ -0,0 +1,65 @@
|
||||
import { urlPrefix, ossAK, ossHost } from '../../config/index';
|
||||
import Toast, { hideToast } from 'tdesign-miniprogram/toast/index';
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
confirmBtn: { content: '知道了', variant: 'base' },
|
||||
showContentOnly: false,
|
||||
dialog_conent: '',
|
||||
prompt: ''
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
//提示词输入框监听输入
|
||||
promptChangeHandle(e) {
|
||||
this.setData({
|
||||
prompt: e.detail.value
|
||||
});
|
||||
},
|
||||
|
||||
generateHandle(e) {
|
||||
let that = this;
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '生成中...',
|
||||
theme: 'loading',
|
||||
direction: 'column',
|
||||
duration: -1
|
||||
});
|
||||
wx.request({
|
||||
url: urlPrefix + '/QingLong/HuiYa/wxWenToMusic',
|
||||
method: "POST",
|
||||
header: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
data: {
|
||||
token: wx.getStorageSync('token'),
|
||||
prompt: this.data.prompt
|
||||
},
|
||||
success(res) {
|
||||
hideToast({
|
||||
context: that,
|
||||
selector: '#t-toast',
|
||||
});
|
||||
that.setData({ showContentOnly: true, dialog_conent: res.data.message })
|
||||
}
|
||||
});
|
||||
},
|
||||
closeDialog() {
|
||||
this.setData({ showContentOnly: false });
|
||||
}
|
||||
})
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
{
|
||||
"navigationBarTitleText": "AI音乐",
|
||||
"usingComponents": {
|
||||
"t-textarea": "tdesign-miniprogram/textarea/textarea",
|
||||
"t-dropdown-menu": "tdesign-miniprogram/dropdown-menu/dropdown-menu",
|
||||
"t-dropdown-item": "tdesign-miniprogram/dropdown-item/dropdown-item",
|
||||
"t-toast": "tdesign-miniprogram/toast/toast",
|
||||
"t-button": "tdesign-miniprogram/button/button",
|
||||
"t-dialog": "tdesign-miniprogram/dialog/dialog"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
<view class="personalContainer">
|
||||
<view class="jindou_view">
|
||||
消耗 200
|
||||
<image src="/static/images/jd.png" style="width: 16px;height: 16px;margin:0 10rpx;"></image>
|
||||
</view>
|
||||
<view class="textarea-example">
|
||||
<t-textarea t-class="external-class" label="音乐内容描述" placeholder="请输入音乐内容描述" maxlength="200" indicator disableDefaultPadding="{{true}}" bind:change="promptChangeHandle" value="{{prompt}}" placeholderStyle="font-size:14px" style="{{style}}" />
|
||||
</view>
|
||||
|
||||
<view class="conView">
|
||||
<view class="image_upload_title">
|
||||
<view class="vb"></view>
|
||||
<view class="text">演示样例</view>
|
||||
</view>
|
||||
|
||||
<view class="demoView">
|
||||
<view >
|
||||
音乐描述：一首关于整夜跳舞的流行歌曲
|
||||
</view>
|
||||
<view class="demoVideo">
|
||||
<video src="http://hzkc.oss-cn-beijing.aliyuncs.com/Images/temp/demoMusic.mp4" style="width: 100%;"></video>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view class="generate-bottom">
|
||||
<view style="width: 100%;display: flex;justify-content: center;align-items: center;margin-top: 20rpx;">
|
||||
<view class="make_button" bind:tap="generateHandle">
|
||||
<text>立即生成</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<t-toast id="t-toast" bind:close="toast_close" />
|
||||
<t-dialog
|
||||
visible="{{showContentOnly}}"
|
||||
content="{{dialog_conent}}"
|
||||
confirm-btn="{{ confirmBtn }}"
|
||||
bind:confirm="closeDialog"
|
||||
/>
|
||||
</view>
|
||||
@ -0,0 +1,126 @@
|
||||
page {
|
||||
background-color: #FCF9FB;
|
||||
}
|
||||
|
||||
.personalContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.textarea-example {
|
||||
margin: 20rpx;
|
||||
background-color: #FCF9FB;
|
||||
border-radius: 16rpx;
|
||||
border: 1px solid #F7EDF5;
|
||||
}
|
||||
|
||||
.external-class {
|
||||
height: 500rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.t-textarea__label {
|
||||
font-size: 16px !important;
|
||||
border-bottom: 1px solid #F7EDF5;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.t-textarea__wrapper-inner {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.conView {
|
||||
margin: 20rpx;
|
||||
}
|
||||
|
||||
.conItem {
|
||||
width: 164px;
|
||||
height: 50px;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #F7EDF5;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 2px 0 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.conTitle {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.conRightIcon {
|
||||
margin-left: 12rpx;
|
||||
color: #c2c2c2;
|
||||
}
|
||||
|
||||
.generate-bottom {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
/* padding-bottom: env(safe-area-inset-bottom); */
|
||||
height: 124rpx;
|
||||
box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.3);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.make_button {
|
||||
z-index: 99;
|
||||
width: 340px;
|
||||
height: 46px;
|
||||
border-radius: 50rpx;
|
||||
background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.t-dropdown-menu {
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
.jindou_view {
|
||||
position: absolute;
|
||||
top: 46rpx;
|
||||
right: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #FFD100;
|
||||
}
|
||||
|
||||
.image_upload_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.vb {
|
||||
width: 6rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 3rpx 3rpx 3rpx 3rpx;
|
||||
background-image: linear-gradient(to bottom, #fbc2eb 0%, #a6c1ee 100%);
|
||||
/* background-image: linear-gradient(to bottom, #fbc8d4 0%, #9795f0 100%); */
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #000;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
margin-left: 14rpx;
|
||||
}
|
||||
|
||||
.demoView {
|
||||
border: 1px solid #F7EDF5;
|
||||
border-radius: 16rpx;
|
||||
background-color: #FFFFFF;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.demoVideo {
|
||||
margin-top: 10px;
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
import { urlPrefix, ossAK, ossHost } from '../../config/index';
|
||||
import Toast, { hideToast } from 'tdesign-miniprogram/toast/index';
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
confirmBtn: { content: '知道了', variant: 'base' },
|
||||
showContentOnly: false,
|
||||
dialog_conent: '',
|
||||
prompt: ''
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
//提示词输入框监听输入
|
||||
promptChangeHandle(e) {
|
||||
this.setData({
|
||||
prompt: e.detail.value
|
||||
});
|
||||
},
|
||||
|
||||
generateHandle(e) {
|
||||
let that = this;
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '生成中...',
|
||||
theme: 'loading',
|
||||
direction: 'column',
|
||||
duration: -1
|
||||
});
|
||||
wx.request({
|
||||
url: urlPrefix + '/QingLong/HuiYa/wxWenToVideo',
|
||||
method: "POST",
|
||||
header: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
data: {
|
||||
token: wx.getStorageSync('token'),
|
||||
prompt: this.data.prompt
|
||||
},
|
||||
success(res) {
|
||||
hideToast({
|
||||
context: that,
|
||||
selector: '#t-toast',
|
||||
});
|
||||
that.setData({ showContentOnly: true, dialog_conent: res.data.message })
|
||||
}
|
||||
});
|
||||
},
|
||||
closeDialog() {
|
||||
this.setData({ showContentOnly: false });
|
||||
}
|
||||
})
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
{
|
||||
"navigationBarTitleText": "AI视频",
|
||||
"usingComponents": {
|
||||
"t-textarea": "tdesign-miniprogram/textarea/textarea",
|
||||
"t-dropdown-menu": "tdesign-miniprogram/dropdown-menu/dropdown-menu",
|
||||
"t-dropdown-item": "tdesign-miniprogram/dropdown-item/dropdown-item",
|
||||
"t-toast": "tdesign-miniprogram/toast/toast",
|
||||
"t-button": "tdesign-miniprogram/button/button",
|
||||
"t-dialog": "tdesign-miniprogram/dialog/dialog"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,126 @@
|
||||
page {
|
||||
background-color: #FCF9FB;
|
||||
}
|
||||
|
||||
.personalContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.textarea-example {
|
||||
margin: 20rpx;
|
||||
background-color: #FCF9FB;
|
||||
border-radius: 16rpx;
|
||||
border: 1px solid #F7EDF5;
|
||||
}
|
||||
|
||||
.external-class {
|
||||
height: 500rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.t-textarea__label {
|
||||
font-size: 16px !important;
|
||||
border-bottom: 1px solid #F7EDF5;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.t-textarea__wrapper-inner {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.conView {
|
||||
margin: 20rpx;
|
||||
}
|
||||
|
||||
.conItem {
|
||||
width: 164px;
|
||||
height: 50px;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #F7EDF5;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 2px 0 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.conTitle {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.conRightIcon {
|
||||
margin-left: 12rpx;
|
||||
color: #c2c2c2;
|
||||
}
|
||||
|
||||
.generate-bottom {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
/* padding-bottom: env(safe-area-inset-bottom); */
|
||||
height: 124rpx;
|
||||
box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.3);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.make_button {
|
||||
z-index: 99;
|
||||
width: 340px;
|
||||
height: 46px;
|
||||
border-radius: 50rpx;
|
||||
background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.t-dropdown-menu {
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
.jindou_view {
|
||||
position: absolute;
|
||||
top: 46rpx;
|
||||
right: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #FFD100;
|
||||
}
|
||||
|
||||
.image_upload_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.vb {
|
||||
width: 6rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 3rpx 3rpx 3rpx 3rpx;
|
||||
background-image: linear-gradient(to bottom, #fbc2eb 0%, #a6c1ee 100%);
|
||||
/* background-image: linear-gradient(to bottom, #fbc8d4 0%, #9795f0 100%); */
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #000;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
margin-left: 14rpx;
|
||||
}
|
||||
|
||||
.demoView {
|
||||
border: 1px solid #F7EDF5;
|
||||
border-radius: 16rpx;
|
||||
background-color: #FFFFFF;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.demoVideo {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
After Width: | Height: | Size: 697 B |
Loading…
Reference in new issue