parent
19fc9009e3
commit
515a5a6680
@ -0,0 +1 @@
|
||||
<template>ai音乐</template>
|
||||
@ -0,0 +1 @@
|
||||
<template>ai视频</template>
|
||||
@ -0,0 +1,117 @@
|
||||
import { reactive, ref } from "vue";
|
||||
import { aiWriting } from "@/apis/api";
|
||||
export default function () {
|
||||
const token = uni.getStorageSync("token");
|
||||
const { safeAreaInsets } = uni.getSystemInfoSync();
|
||||
const pickerPopup: any = ref(null);
|
||||
|
||||
const platFormRange = [
|
||||
{ id: 1, value: "小红书" },
|
||||
{ id: 2, value: "微信朋友圈" },
|
||||
];
|
||||
const sizeValueRnage = [
|
||||
{ id: 100, value: "100字" },
|
||||
{ id: 150, value: "150字" },
|
||||
{ id: 200, value: "200字" },
|
||||
{ id: 250, value: "250字" },
|
||||
{ id: 300, value: "300字" },
|
||||
];
|
||||
|
||||
const data: any = reactive({
|
||||
token: token,
|
||||
safeBottom: safeAreaInsets?.bottom,
|
||||
btnLoading: false,
|
||||
describe: "", //描述
|
||||
inputValueLength: 0, //内容长度
|
||||
platform: 1, //平台 1 小红书 2 微信朋友圈
|
||||
platformStr: "小红书",
|
||||
platformIndex: 0, //平台索引
|
||||
sizeValue: 100, //字数 100 150 200 250 300
|
||||
sizeIndex: 0, //字数索引
|
||||
sizeStr: "100字", //字数
|
||||
aiResult: "", //生成结果
|
||||
});
|
||||
|
||||
//输入内容改变
|
||||
function inputChange(e: any) {
|
||||
data.inputValueLength = parseInt(e.length);
|
||||
}
|
||||
|
||||
//选择器改变
|
||||
function platformChange(e: any) {
|
||||
const value = e.detail.value;
|
||||
data.platformIndex = parseInt(value);
|
||||
data.platform = platFormRange[parseInt(value)].id;
|
||||
data.platformStr = platFormRange[parseInt(value)].value;
|
||||
}
|
||||
|
||||
//选择器改变
|
||||
function sizeValueChange(e: any) {
|
||||
const value = e.detail.value;
|
||||
data.sizeIndex = parseInt(value);
|
||||
data.sizeValue = sizeValueRnage[parseInt(value)].id;
|
||||
data.sizeStr = sizeValueRnage[parseInt(value)].value;
|
||||
}
|
||||
|
||||
//立即生成
|
||||
function toMake() {
|
||||
if (data.describe == "") {
|
||||
uni.showToast({
|
||||
title: "请输入写作内容描述",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
const param = {
|
||||
token: data.token,
|
||||
prompt: data.describe,
|
||||
limit: data.sizeValue,
|
||||
platform_id: data.platform,
|
||||
};
|
||||
data.btnLoading = true;
|
||||
uni.showLoading({
|
||||
title: "生成中...",
|
||||
mask: true,
|
||||
});
|
||||
aiWriting(param).then((res: any) => {
|
||||
uni.hideLoading();
|
||||
data.btnLoading = false;
|
||||
if (res.success) {
|
||||
data.aiResult = res.message;
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "生成失败",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//复制文本
|
||||
function toCopy() {
|
||||
uni.setClipboardData({
|
||||
data: data.aiResult,
|
||||
success: (res: any) => {
|
||||
uni.showToast({
|
||||
title: "复制成功",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
data,
|
||||
toMake,
|
||||
inputChange,
|
||||
pickerPopup,
|
||||
platFormRange,
|
||||
platformChange,
|
||||
sizeValueRnage,
|
||||
sizeValueChange,
|
||||
toCopy,
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<view
|
||||
class="aiwriting-container"
|
||||
:style="'padding-bottom:' + data.safeBottom + 'px'"
|
||||
>
|
||||
<view class="content">
|
||||
<view class="writing-content border-radius">
|
||||
<view class="title">
|
||||
写作内容描述
|
||||
<view class="jin-dou-style">
|
||||
消耗10
|
||||
<image
|
||||
style="width: 32rpx; height: 32rpx"
|
||||
src="../../static/jd.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
autoHeight
|
||||
:maxlength="200"
|
||||
v-model="data.describe"
|
||||
type="textarea"
|
||||
@input="inputChange"
|
||||
placeholder="请输入写作内容描述"
|
||||
/>
|
||||
<view class="num-style"
|
||||
>{{ data.inputValueLength ? data.inputValueLength : 0 }}/200</view
|
||||
>
|
||||
</view>
|
||||
<view class="param-content border-radius">
|
||||
<view class="param-row">
|
||||
<text>类型</text>
|
||||
<view class="grey-font">
|
||||
<picker
|
||||
mode="selector"
|
||||
:value="data.platformIndex"
|
||||
:range="platFormRange"
|
||||
range-key="value"
|
||||
@change="platformChange"
|
||||
>
|
||||
<text>{{ data.platformStr }}</text>
|
||||
<uni-icons type="right" color="" size="16" />
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
<view class="param-row">
|
||||
<text>字数</text>
|
||||
<view class="grey-font">
|
||||
<picker
|
||||
mode="selector"
|
||||
:value="data.sizeIndex"
|
||||
:range="sizeValueRnage"
|
||||
range-key="value"
|
||||
@change="sizeValueChange"
|
||||
>
|
||||
<text>{{ data.sizeStr }}</text>
|
||||
<uni-icons type="right" color="" size="16" />
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="data.aiResult && data.aiResult !== ''"
|
||||
class="writing-content border-radius"
|
||||
>
|
||||
<view class="title"> 结果 </view>
|
||||
<view class="result-content">{{ data.aiResult }}</view>
|
||||
<view class="num-style" @click="toCopy">点击复制</view>
|
||||
</view>
|
||||
</view>
|
||||
<button
|
||||
:disabled="data.btnLoading"
|
||||
:loading="data.btnLoading"
|
||||
class="make-btn-style"
|
||||
@click="toMake"
|
||||
>
|
||||
立即生成
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import getData from "./aiWriting";
|
||||
const {
|
||||
data,
|
||||
toMake,
|
||||
inputChange,
|
||||
platFormRange,
|
||||
sizeValueRnage,
|
||||
platformChange,
|
||||
sizeValueChange,
|
||||
toCopy,
|
||||
} = getData();
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.aiwriting-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: $uni-spacing-col-base;
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - 92rpx);
|
||||
padding-bottom: $uni-spacing-col-base;
|
||||
overflow-y: scroll;
|
||||
box-sizing: border-box;
|
||||
.writing-content {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: white;
|
||||
box-sizing: border-box;
|
||||
padding: $uni-spacing-col-base;
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
font-size: $uni-font-size-lg;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid $uni-border-color;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-right: $uni-spacing-col-base;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: $uni-spacing-col-base;
|
||||
.jin-dou-style {
|
||||
color: #ffd100;
|
||||
}
|
||||
}
|
||||
.result-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.num-style {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
font-size: $uni-font-size-sm;
|
||||
color: $uni-text-color-disable;
|
||||
}
|
||||
}
|
||||
.param-content {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: white;
|
||||
margin: $uni-spacing-col-base 0;
|
||||
padding: 0 $uni-spacing-col-base;
|
||||
box-sizing: border-box;
|
||||
.param-row {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $uni-border-color;
|
||||
.grey-font {
|
||||
color: $uni-text-color-grey;
|
||||
}
|
||||
}
|
||||
:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.make-btn-style {
|
||||
width: 100%;
|
||||
height: 92rpx;
|
||||
line-height: 92rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue