lookcommon_course/pages_tool/pages/pinyin/index.vue

<template>
    <view class="pinyin-box">
        <view class="pages-box">
            <view class="fs32 fc99">请输入您要查询的汉字</view>
            <view class="inp-box">
                <input @input="valFun" class="inp" placeholder="请输入单个汉字" placeholderStyle="font-size:30rpx" :value="val" />
                <view class="inpimg">
                    <image class="pagesimg" src="/static/images/search.png"></image>
                </view>
            </view>
            <view class="btn-box">
                <button @tap="onInput" class="btn fs32">查 询</button>
            </view>
        </view>
        <view :class="'det-box ' + (show ? '' : 'dp-n')">
            <view class="pg-t fs36 fc99">详细信息</view>
            <view class="pglist fc99 bd-n">
                <view class="pg-l fs32">结果：</view>
                <view class="pg-r fs32">{{ pinyinText }}</view>
            </view>
        </view>
    </view>
</template>

<script>
getApp();
export default {
    data() {
        return {
            pinyin: new Object(),
            pinyinText: '',
            val: '',
            show: false
        };
    },
    onLoad: function () {
        this.getPinyin();
    },
    methods: {
        getPinyin: function () {
            var that = this;
            uniCloud.callFunction({
                    name: 'getPinyin',
                    data: {}
                })
                .then(function (n) {
                    that.pinyin=n.result.data[0].pinyin
                });
        },

        valFun: function (t) {
           this.val=t.detail.value;
        },
        onInput: function (t) {
            var n = this.val;
            if (1 == (n = n && n.trim()).length) {
                if (this.pinyin.hasOwnProperty(n)) {
					this.pinyinText=this.pinyin[n].join(', ');
					this.show=true;
                } else {
                   this.pinyinText='没有查询到';
                   this.show=true;
                }
            } else {
				this.pinyinText='请输入单个汉字';
				this.show=true;
            }
        }
    }
};
</script>
<style>
@import './index.css';
</style>