Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
E
ET_07
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
ET_07
Commits
815c5a5f
Commit
815c5a5f
authored
Feb 25, 2021
by
范雪寒
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 表单页完成
parent
2a162676
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
141 additions
and
58 deletions
+141
-58
form.component.html
form/src/app/form/form.component.html
+131
-29
form.component.ts
form/src/app/form/form.component.ts
+10
-29
No files found.
form/src/app/form/form.component.html
View file @
815c5a5f
<div
class=
"model-content"
>
<!-- <div class="border" style=" width: 520px;">
<span style="height: 30px; font-size: 18px;">可选字母(点击下方字母选择):</span>
<br>
<a (click)="addLetter('Q')" style="font-size: 50px; width: 50px;">Q </a>
<a (click)="addLetter('W')" style="font-size: 50px; width: 50px;">W </a>
<a (click)="addLetter('E')" style="font-size: 50px; width: 50px;">E </a>
<a (click)="addLetter('R')" style="font-size: 50px; width: 50px;">R </a>
<a (click)="addLetter('T')" style="font-size: 50px; width: 50px;">T </a>
<a (click)="addLetter('Y')" style="font-size: 50px; width: 50px;">Y </a>
<a (click)="addLetter('U')" style="font-size: 50px; width: 50px;">U </a>
<a (click)="addLetter('I')" style="font-size: 50px; width: 50px;">I </a>
<a (click)="addLetter('O')" style="font-size: 50px; width: 50px;">O </a>
<a (click)="addLetter('P')" style="font-size: 50px; width: 50px;">P </a>
<br>
<a (click)="addLetter('A')" style="font-size: 50px; margin-left: 20px;">A </a>
<a (click)="addLetter('S')" style="font-size: 50px;">S </a>
<a (click)="addLetter('D')" style="font-size: 50px;">D </a>
<a (click)="addLetter('F')" style="font-size: 50px;">F </a>
<a (click)="addLetter('G')" style="font-size: 50px;">G </a>
<a (click)="addLetter('H')" style="font-size: 50px;">H </a>
<a (click)="addLetter('J')" style="font-size: 50px;">J </a>
<a (click)="addLetter('K')" style="font-size: 50px;">K </a>
<a (click)="addLetter('L')" style="font-size: 50px;">L </a>
<br>
<a (click)="addLetter('Z')" style="font-size: 50px; margin-left: 40px;">Z </a>
<a (click)="addLetter('X')" style="font-size: 50px;">X </a>
<a (click)="addLetter('C')" style="font-size: 50px;">C </a>
<a (click)="addLetter('V')" style="font-size: 50px;">V </a>
<a (click)="addLetter('B')" style="font-size: 50px;">B </a>
<a (click)="addLetter('N')" style="font-size: 50px;">N </a>
<a (click)="addLetter('M')" style="font-size: 50px;">M </a>
<br>
</div> -->
<div
class=
"border"
style=
"width: 350px;"
>
<span
style=
"height: 30px; font-size: 18px;"
>
选择字母(点击下方字母选择):
</span>
<br>
<div
style=
"padding: 10px;"
>
<span
*
ngIf=
"item.letter=='A'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
A
</span></span>
<span
*
ngIf=
"item.letter!='A'"
><a
(
click
)="
selectLetter
('
A
')"
style=
"font-size: 50px;"
>
A
</a></span>
<span
*
ngIf=
"item.letter=='B'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
B
</span></span>
<span
*
ngIf=
"item.letter!='B'"
><a
(
click
)="
selectLetter
('
B
')"
style=
"font-size: 50px;"
>
B
</a></span>
<span
*
ngIf=
"item.letter=='C'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
C
</span></span>
<span
*
ngIf=
"item.letter!='C'"
><a
(
click
)="
selectLetter
('
C
')"
style=
"font-size: 50px;"
>
C
</a></span>
<span
*
ngIf=
"item.letter=='D'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
D
</span></span>
<span
*
ngIf=
"item.letter!='D'"
><a
(
click
)="
selectLetter
('
D
')"
style=
"font-size: 50px;"
>
D
</a></span>
<span
*
ngIf=
"item.letter=='E'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
E
</span></span>
<span
*
ngIf=
"item.letter!='E'"
><a
(
click
)="
selectLetter
('
E
')"
style=
"font-size: 50px;"
>
E
</a></span>
<span
*
ngIf=
"item.letter=='F'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
F
</span></span>
<span
*
ngIf=
"item.letter!='F'"
><a
(
click
)="
selectLetter
('
F
')"
style=
"font-size: 50px;"
>
F
</a></span>
<span
*
ngIf=
"item.letter=='G'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
G
</span></span>
<span
*
ngIf=
"item.letter!='G'"
><a
(
click
)="
selectLetter
('
G
')"
style=
"font-size: 50px;"
>
G
</a></span>
<div
style=
"width: 300px;"
align=
'center'
>
<span>
图1:
</span>
<app-upload-image-with-preview
[
picUrl
]="
item
.
pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
'
pic_url
')"
>
</app-upload-image-with-preview>
</div>
<br>
<div
style=
"width: 300px; margin-top: 5px;"
align=
'center'
>
<span>
图2:
</span>
<app-upload-image-with-preview
[
picUrl
]="
item
.
pic_url_2
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
'
pic_url_2
')"
>
</app-upload-image-with-preview>
</div>
<span
*
ngIf=
"item.letter=='H'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
H
</span></span>
<span
*
ngIf=
"item.letter!='H'"
><a
(
click
)="
selectLetter
('
H
')"
style=
"font-size: 50px;"
>
H
</a></span>
<span
*
ngIf=
"item.letter=='I'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
I
</span></span>
<span
*
ngIf=
"item.letter!='I'"
><a
(
click
)="
selectLetter
('
I
')"
style=
"font-size: 50px;"
>
I
</a></span>
<span
*
ngIf=
"item.letter=='J'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
J
</span></span>
<span
*
ngIf=
"item.letter!='J'"
><a
(
click
)="
selectLetter
('
J
')"
style=
"font-size: 50px;"
>
J
</a></span>
<span
*
ngIf=
"item.letter=='K'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
K
</span></span>
<span
*
ngIf=
"item.letter!='K'"
><a
(
click
)="
selectLetter
('
K
')"
style=
"font-size: 50px;"
>
K
</a></span>
<span
*
ngIf=
"item.letter=='L'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
L
</span></span>
<span
*
ngIf=
"item.letter!='L'"
><a
(
click
)="
selectLetter
('
L
')"
style=
"font-size: 50px;"
>
L
</a></span>
<span
*
ngIf=
"item.letter=='M'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
M
</span></span>
<span
*
ngIf=
"item.letter!='M'"
><a
(
click
)="
selectLetter
('
M
')"
style=
"font-size: 50px;"
>
M
</a></span>
<span
*
ngIf=
"item.letter=='N'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
N
</span></span>
<span
*
ngIf=
"item.letter!='N'"
><a
(
click
)="
selectLetter
('
N
')"
style=
"font-size: 50px;"
>
N
</a></span>
<div
style=
"width: 300px; margin-top: 15px;"
>
<span>
文本:
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
text
"
(
blur
)="
save
()"
>
</div>
<br>
<div
style=
"margin-top: 5px"
>
<span>
音频:
</span>
<app-audio-recorder
[
audioUrl
]="
item
.
audio_url
"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
audio_url
')"
></app-audio-recorder>
</div>
<span
*
ngIf=
"item.letter=='O'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
O
</span></span>
<span
*
ngIf=
"item.letter!='O'"
><a
(
click
)="
selectLetter
('
O
')"
style=
"font-size: 50px;"
>
O
</a></span>
<span
*
ngIf=
"item.letter=='P'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
P
</span></span>
<span
*
ngIf=
"item.letter!='P'"
><a
(
click
)="
selectLetter
('
P
')"
style=
"font-size: 50px;"
>
P
</a></span>
<span
*
ngIf=
"item.letter=='Q'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
Q
</span></span>
<span
*
ngIf=
"item.letter!='Q'"
><a
(
click
)="
selectLetter
('
Q
')"
style=
"font-size: 50px;"
>
Q
</a></span>
<span
*
ngIf=
"item.letter=='R'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
R
</span></span>
<span
*
ngIf=
"item.letter!='R'"
><a
(
click
)="
selectLetter
('
R
')"
style=
"font-size: 50px;"
>
R
</a></span>
<span
*
ngIf=
"item.letter=='S'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
S
</span></span>
<span
*
ngIf=
"item.letter!='S'"
><a
(
click
)="
selectLetter
('
S
')"
style=
"font-size: 50px;"
>
S
</a></span>
<span
*
ngIf=
"item.letter=='T'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
T
</span></span>
<span
*
ngIf=
"item.letter!='T'"
><a
(
click
)="
selectLetter
('
T
')"
style=
"font-size: 50px;"
>
T
</a></span>
<br>
<span
*
ngIf=
"item.letter=='U'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
U
</span></span>
<span
*
ngIf=
"item.letter!='U'"
><a
(
click
)="
selectLetter
('
U
')"
style=
"font-size: 50px;"
>
U
</a></span>
<span
*
ngIf=
"item.letter=='V'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
V
</span></span>
<span
*
ngIf=
"item.letter!='V'"
><a
(
click
)="
selectLetter
('
V
')"
style=
"font-size: 50px;"
>
V
</a></span>
<span
*
ngIf=
"item.letter=='W'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
W
</span></span>
<span
*
ngIf=
"item.letter!='W'"
><a
(
click
)="
selectLetter
('
W
')"
style=
"font-size: 50px;"
>
W
</a></span>
<span
*
ngIf=
"item.letter=='X'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
X
</span></span>
<span
*
ngIf=
"item.letter!='X'"
><a
(
click
)="
selectLetter
('
X
')"
style=
"font-size: 50px;"
>
X
</a></span>
<span
*
ngIf=
"item.letter=='Y'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
Y
</span></span>
<span
*
ngIf=
"item.letter!='Y'"
><a
(
click
)="
selectLetter
('
Y
')"
style=
"font-size: 50px;"
>
Y
</a></span>
<span
*
ngIf=
"item.letter=='Z'"
><span
style=
"font-size: 50px; color: #ff62ff;"
>
Z
</span></span>
<span
*
ngIf=
"item.letter!='Z'"
><a
(
click
)="
selectLetter
('
Z
')"
style=
"font-size: 50px;"
>
Z
</a></span>
<br>
</div>
<!-- <div class="border" style=" width: 520px; height: 120px;">
<span style="height: 30px; font-size: 18px;">单词音频:</span>
<br>
<app-audio-recorder [audioUrl]=" item.audio" (audioUploaded)="onAudioUploadSuccess($event)">
</app-audio-recorder>
</div>
<div class="border" style="width: 520px;">
<span style="height: 30px; font-size: 18px;">正确字母:</span>
<div>
<div *ngFor="let rightWord of item.rightWordList; let i = index">
<div style="padding: 2px;">
<input style="width: 150px;float: left;" type="text" nz-input [(ngModel)]="rightWord.word" (blur)="save()">
<app-audio-recorder style="float: left;" [audioUrl]="rightWord.audio"
(audioUploaded)="onRightAudioUploadSuccess($event, i)">
</app-audio-recorder>
<button style="float: right; margin-left: 10px; height: 32px; color: red;" nz-button nzType="dashed"
class="add-btn" (click)="removeRightWord(i)">
<i nz-icon nzType="minus-circle" nzTheme="outline"></i>
删除字母
</button>
</div>
<br> <br>
</div>
</div>
<div *ngIf="(item.rightWordList.length +item.wrongWordList.length < 5)">
<button style="margin-left: 2px; margin-top: 2px; height: 32px;" nz-button nzType="dashed" class="add-btn"
(click)="addRightWord()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加<span style="color: #44bb44;">正确</span>的字母
</button>
</div>
</div>
-->
</div>
\ No newline at end of file
form/src/app/form/form.component.ts
View file @
815c5a5f
...
...
@@ -18,24 +18,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
createShell
()
{
this
.
item
.
wordList
.
push
({
word
:
''
,
audio
:
''
,
backWord
:
''
,
backWordAudio
:
''
,
});
this
.
save
();
}
removeShell
(
idx
)
{
this
.
item
.
wordList
.
splice
(
idx
,
1
);
this
.
save
();
}
ngOnInit
()
{
this
.
item
=
{};
this
.
item
=
{
letter
:
'
A
'
};
// 获取存储的数据
(
<
any
>
window
).
courseware
.
getData
((
data
)
=>
{
...
...
@@ -52,6 +39,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
},
this
.
saveKey
);
}
selectLetter
(
letter
)
{
this
.
item
.
letter
=
letter
;
this
.
save
();
}
ngOnChanges
()
{
}
...
...
@@ -77,18 +69,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存音频数据
* @param e
*/
onAudioUploadSuccess
(
e
,
key
)
{
this
.
item
[
key
]
=
e
.
url
;
this
.
save
();
}
onWordAudioUploadSuccess
(
e
,
idx
)
{
this
.
item
.
wordList
[
idx
].
audio
=
e
.
url
;
this
.
save
();
}
onBackWordAudioUploadSuccess
(
e
,
idx
)
{
this
.
item
.
wordList
[
idx
].
backWordAudio
=
e
.
url
;
onAudioUploadSuccess
(
e
)
{
this
.
item
.
audio
=
e
.
url
;
this
.
save
();
}
...
...
@@ -97,7 +79,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
*/
save
()
{
(
<
any
>
window
).
courseware
.
setData
(
this
.
item
,
null
,
this
.
saveKey
);
this
.
refresh
();
console
.
log
(
'
this.item =
'
+
JSON
.
stringify
(
this
.
item
));
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment