GCLS_Page_Mobile/components/Strockred/Strockred.vue

<template>
	<view class="strockredBox">
		<view class="strockred">
			<view :class="['pinyin-box']">
				<AudioPlay v-if="audioFileId" :file-id="audioFileId" themeColor="gray" />
				<text class="pinyin">{{pinyin}}</text>
			</view>
			<view class="character-target-box">
				<SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" :size="300" />
				<view :id="targetView" class="character-target-div"></view>
			</view>
			<view v-if="reset" :class="['reset-box']" @click="resetHanzi">
				<SvgIcon icon-class="reset" class="reset-btn" :size="18" />
				<text class="reset-text">重写</text>
			</view>
		</view>
	</view>
</template>

<script>
	import HanziWriter from 'hanzi-writer';
	import {
		GetFileURLMap
	} from '@/api/api.js';
	import {
		clearConfig
	} from 'dompurify';
	export default {
		name: 'Strockred',
		components: {},
		props: {
			bookText: {
				type: String,
				default: '',
			},
			pinyin: {
				type: String,
				default: '',
			},
			targetView: {
				type: String,
				default: '',
			},
			reset: {
				type: Boolean,
				default: true,
			},
			hanziColor: {
				type: String,
				default: '',
			},
			bookStrokes: {
				type: Object,
				default: () => {},
			},
			audioFileId: {
				type: String,
				default: '',
			},
			mark: {
				type: String,
				default: '',
			},
			answerIndex: {
				type: Number,
				default: -1,
			},
			userAnswerList: {
				type: Array,
				default: () => [],
			}
		},
		data() {
			return {
				writer: null,
			};
		},
		computed: {},
		watch: {
			// hanziColor: {
			// 	handler(val, oldVal) {
			// 		console.log(val);
			// 	},
			// 	immediate: true,
			// 	deep: true,
			// },
			targetView: {
				handler(val, oldVal) {
					this.$nextTick(() => {
						this.initHanziwrite();
					});
				},
				immediate: true,
				deep: true,
			}
		},
		// 方法集合
		methods: {
			initHanziwrite() {
				let _this = this;
				let options = {
					charDataLoader(char, onComplete) {
						onComplete(_this.bookStrokes);
					},
					width: 300,
					height: 300,
					padding: 10,
					showCharacter: false,
					strokeColor: _this.hanziColor,
					drawingColor: _this.hanziColor,
					drawingWidth: 6,
				};
				this.writer = HanziWriter.create(this.targetView, this.Book_text, options);
				// this.writer.quiz();
				this.writer.quiz({
					onComplete: function(summaryData) {
						_this.$emit("saveStrock", _this.mark, "true", null, _this.answerIndex);
					}
				});
			},
			resetHanzi() {
				this.writer.quiz();
				document.getElementsByClassName('strockred-box')[0].previousElementSibling.style.zIndex = -1;
				document.getElementsByClassName('strockred-box')[0].children[0].children[1].style.zIndex = 1;
				this.$emit("saveStrock", this.mark, "false", null, this.answerIndex);
			},
			updateColor(color) {
				this.writer.updateColor('strokeColor', color);
				this.writer.updateColor('drawingColor', color);
			},
			// setUserAnswer() {
			// 	var curAns = this.userAnswerList.find(p => p.mark == this.mark);
			// 	if (!curAns) return;
			// 	var ans_index_en = curAns.strokes_content_list[this.answerIndex];
			// 	if (!ans_index_en) return;
			// 	ans_index_en = JSON.parse(ans_index_en);
			// 	var that = this;
			// 	var char = ans_index_en.hz;
			// 	HanziWriter.loadCharacterData(char).then(function(charData) {
			// 		that.bookStrokes.strokes = charData.strokes.slice(0, ans_index_en.strokes_content.length);
			// 		that.bookStrokes.medians = charData.medians.slice(0, ans_index_en.strokes_content.length);
			// 		// that.hanziColor = '#000000';
			// 		// that.bookStrokes.strokes = charData.strokes.slice(ans_index_en.strokes_content.length);
			// 		// that.bookStrokes.medians = charData.medians.slice(ans_index_en.strokes_content.length);
			// 	});
			// },
		},
	};
</script>

<style lang="scss" scoped>
	.strockredBox {
		margin: 26rpx auto;

		.strockred {
			display: flex;
			flex-direction: column;
			align-items: center;
			row-gap: 26rpx;

			.pinyin-box {
				display: flex;
				justify-content: center;
				align-items: center;
				column-gap: 16rpx;

				.pinyin {
					font-family: 'League';
					margin-top: -8px;
					font-size: 32px;
					color: #000000;
				}
			}

			.character-target-box {
				height: 300px;
				border: 4px solid #E81B1B;
				position: relative;
				z-index: 111;

				.character-target-bg {
					color: #EDEDED;
				}

				.character-target-div {
					position: absolute;
					top: 0;
					left: 0;
				}
			}

			.reset-box {
				display: flex;
				justify-content: center;
				column-gap: 16rpx;

				.reset-text {
					margin-top: -4rpx;
					font-size: 32rpx;
				}
			}
		}
	}

	.audio-wrapper {
		margin: 0;

		/deep/ .audio-play {
			width: 40rpx !important;
			height: 40rpx !important;
			color: #000000;
			background-color: initial !important;
		}

		/deep/ .voice-play {
			width: 40rpx !important;
			height: 40rpx !important;
		}
	}
</style>