ArkUI JS AI作诗之滚动诗句 原创 精华

<div class="container">
    <!-- 藏头诗 -->
    <div class="column" style="height: 30%; border-bottom: 2px solid #ccc;">
        <!-- 标题一 -->
        <text class="title">
            {{ $t('strings.titleOne') }}
        </text>
        <!-- 操作区域 -->
        <div class="input-item">
            <input type="text" value="{{inputOne}}" onchange="textChangeOne"></input>
            <input type="button" value="AI生成藏头诗" onclick="onClickOne"></input>
        </div>
        <!-- 藏头诗滚动区域 -->
        <div class="desc" onclick="onMarqueeOne">
            <marquee id="oneMarquee{{$idx}}" for="{{poetryOne}}">{{$item}}</marquee>
        </div>
    </div>
    <!-- 输入第一句诗 -->
    <div class="column" style="height: 70%;">
        <!-- 标题二 -->
        <text class="title">
            {{ $t('strings.titleTwo') }}
        </text>
        <!-- 操作区域 -->
        <div class="input-item">
            <input type="text" value="{{inputTwo}}" onchange="textChangeTwo"></input>
            <input type="button" value="AI生成整首诗" onclick="onClickTwo"></input>
        </div>
        <!-- 整首诗滚动区域 -->
        <div class="desc" onclick="onMarqueeTwo">
            <marquee id="twoMarquee{{$idx}}" for="{{poetryTwo}}">{{$item}}</marquee>
        </div>
    </div>
</div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

/**
最外面容器样式
*/
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    padding: 20px;
}
/**
藏头诗与整首诗内布局样式
*/
.column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

/**
标题
*/
.title {
    font-size: 60px;
    text-align: center;
    width: 100%;
    margin: 20px;
}

/**
文本框和按钮布局
*/
.input-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 10px;
}

/**
文本框宽度为55%
*/
input:first-child {
    width: 55%;
}

/**
诗显示区域
*/
.desc {
    padding-top: 20px;
    padding-bottom: 20px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/**
滚动文本底内边距10像素
*/
marquee {
    padding-bottom: 10px;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.

import fetch from '@system.fetch';
import prompt from '@system.prompt';

export default {
    data: {
        flagOne: false,
        flagTwo: false,
        inputOne: '我爱祖国',
        inputTwo: '沁园春雪',
        poetryOne: [],
        poetryTwo: []
    },

    /**
     * 获取藏头诗文本框内容
     * @param e
     */
    textChangeOne(e) {
        // 赋值给变量
        this.inputOne = e.text;
    },
    /**
     * 获取输入第一句诗文本框内容
     * @param e
     */
    textChangeTwo(e) {
        // 赋值给变量
        this.inputTwo = e.text;
    },

    /**
     * 生成藏头诗事件
     * @param res
     */
    onClickOne() {
        // 去掉文本框空格和换行符
        this.inputOne = this.inputOne.replace(/[\s]+/g, "").replace(/\n/g, "").replace(/\r/g, "");
        // 当文本框为空时，温馨提示，并阻止往执行
        if (this.inputOne === "") {
            prompt.showDialog({
                message: "不能为空，请输入汉字",
                duration: 3000,
                bottom: '80%'
            })
            return;
        }

        // 封装URL
        var url = "https://py.myie9.com/cangtoutest/"+this.inputOne;
        var that = this;
        fetch.fetch({
            url: url,
            method: 'GET',
            responseType: 'text',
            success: function(res) {
                console.log('xx' + JSON.stringify(res));
                // 返回错误码时，温馨提示
                if(res.code == 500) {
                    prompt.showToast({
                        message: "请输入至少4个不同的汉字",
                        duration: 3000,
                        bottom: '80%'
                    })
                    return;
                }
                // 温馨提示生成成功
                prompt.showToast({
                    message: "藏头诗生成成功",
                    duration: 3000,
                    bottom: '80%'
                })

                // 获取返回的数据
                var descOne = res.data;
                // 把返回的字符串数据，按照句号切分为数组
                var descOneArray = descOne.split("。");
                console.log('xx' + descOne)
                // 清空储存诗数组
                that.poetryOne = []
                // 固定行字符长度为50
                var rowLen = 50;
                for (var index = 0; index < descOneArray.length; index++) {
                    if(descOneArray[index] === '') {
                        continue;
                    }
                    // 在每行诗后面加上句号
                    var str = descOneArray[index] + "。";
                    // 当前行诗的字符长度
                    var currentLen = str.length;
                    // 如果长度少于50个字符，补上空格(为什么要补上空格，长度不够时, Marquee是不会滚动的)
                    if(currentLen < rowLen) {
                        for(var i=0; i< rowLen - currentLen; i++) {
                            str += " ";
                        }
                    }
                    // 存储到藏头诗数组
                    that.poetryOne.push(str)
                }
            },
            fail: function(err) {
                // 出现错误时，温馨提示
                prompt.showToast({
                    message: "生成失败，请重新生成",
                    duration: 3000,
                    bottom: '80%'
                })
            }
        })
    },

    /**
     * 生成整首诗事件
     * @param res
     */
    onClickTwo() {
        // 去掉文本框空格和换行符
        this.inputTwo = this.inputTwo.replace(/[\s]+/g, "").replace(/\n/g, "").replace(/\r/g, "");
        // 当文本框为空时，温馨提示，并阻止往执行
        if (this.inputTwo === "") {
            prompt.showToast({
                message: "不能为空，请输入一句诗",
                duration: 3000,
                bottom: '50%'
            })
            return;
        }

        // 封装URL
        var url = "https://py.myie9.com/xuxietest/"+this.inputTwo;
        var that = this;
        fetch.fetch({
            url: url,
            method: 'GET',
            responseType: 'text',
            success: function(res) {
                console.log('xx' + JSON.stringify(res));
                // 返回错误码时，温馨提示
                if(res.code == 500) {
                    prompt.showToast({
                        message: "整首诗生成失败",
                        duration: 3000,
                        bottom: '50%'
                    })
                    return;
                }
                // 温馨提示生成成功
                prompt.showToast({
                    message: "整首诗生成成功",
                    duration: 3000,
                    bottom: '50%'
                })
                // 在每行诗后面加上句号
                var descTwo = res.data;
                // 把返回的字符串数据，按照句号切分为数组
                var descTwoArray = descTwo.split("。");
                console.log('xx' + descTwo)
                // 清空储存诗数组
                that.poetryTwo = []
                // 固定行字符长度为50
                var rowLen = 50;
                for (var index = 0; index < descTwoArray.length; index++) {
                    if(descTwoArray[index] === '') {
                        continue;
                    }
                    // 在每行诗后面加上句号
                    var str = descTwoArray[index] + "。";
                    // 当前行诗的字符长度
                    var currentLen = str.length;
                    // 如果长度少于50个字符，补上空格(为什么要补上空格，长度不够时, Marquee是不会滚动的)
                    if(currentLen < rowLen) {
                        for(var i=0; i< rowLen - currentLen; i++) {
                            str += " ";
                        }
                    }
                    // 存储到整首诗数组
                    that.poetryTwo.push(str)
                }
            },
            fail: function(err) {
                // 出现错误时，温馨提示
                prompt.showToast({
                    message: "生成失败，请重新生成",
                    duration: 3000,
                    bottom: '50%'
                })
            }
        })
    },

    /**
     * 控制藏头诗滚动与暂停
     */
    onMarqueeOne() {
        // 由于把返回的整首诗，按句号分开，赋值给不同的Marquee，这里循环处理滚动或暂停
        for (var i = 0; i < this.poetryOne.length; i++) {
            if(!this.flagOne){
                this.$element('oneMarquee'+i).stop();
            }else{
                this.$element('oneMarquee'+i).start();
            }
        }
        // 切换状态
        this.flagOne = !this.flagOne
    },

    /**
     * 控制整首诗滚动与暂停
     */
    onMarqueeTwo() {
        // 由于把返回的整首诗，按句号分开，赋值给不同的Marquee，这里循环处理滚动或暂停
        for (var i = 0; i < this.poetryTwo.length; i++) {
            if(!this.flagTwo){
                this.$element('twoMarquee'+i).stop();
            }else{
                this.$element('twoMarquee'+i).start();
            }
        }
        // 切换状态
        this.flagTwo = !this.flagTwo;
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.