Vent-App/pages/gasreport/components/gasRecordCard.vue

<template>
    <view class="gas-record-card">
        <view class="record-top-area">
            <view class="record-write-box">
                <text class="dialog-label">卡ID：</text>
                <u--input v-model="cardId" placeholder="请输入卡片ID" type="number" size="small" clearable
                    style="width:220px;padding: 2px 9px;"></u--input>
            </view>
            <!-- <u-button type="primary" size="small" style="margin: 2px 0px;" @click="getNfcFormat">格式化tag</u-button> -->
            <u-button type="primary" size="small" style="margin: 2px 0px;" @click="getNfcWrite">录入</u-button>
            <u-button type="primary" size="small" style="margin: 2px 0px;" @click="getNfcRead">读取</u-button>
        </view>
        <view class="record-bot-area">
            <u-toast ref="uToast"></u-toast>
            <view class="record-container" v-if="cardData.id">
                <view class="record-title">
                    <span class="record-text">卡片ID读取</span>
                </view>
                <view class="record-card">
                    <view class="record-card-item">
                        <text class="card-item-label">当前卡ID为：</text>
                        <text class="card-item-value">{{ cardData.id }}</text>
                    </view>
                    <view class="record-card-item">
                        <text class="card-item-label">当前巡检点为：</text>
                        <text class="card-item-value">{{ cardData.address }}</text>
                    </view>

                </view>
            </view>
        </view>

    </view>
</template>

<script>
import api from "@/api/api";
import testNfc from "@/common/util/hexiii-nfc.js"
export default {
    name: 'gasRecordCard',
    data() {
        return {
            isNfc: true,
            cardId: '',
            cardData: { id: '', address: '' },
        }
    },
    computed: {
        cardIds:function(){
            return this.$store.getters.nfcreadtxt;
        }
    },
    watch:{
        cardIds:{
            handler(newV,oldV){
                console.log(newV,'newV------------------------')
                this.getCardLists(newV)
            },
        }
    },
    mounted() {
        testNfc.listenNFCStatus()
    },
    methods: {
        //获取NFC卡读取内容
        getCardLists(ids) {
            let that = this
            new Promise((resolve, reject) => {
                api
                    .getCardList({ id: ids })
                    .then((response) => {
                        if (response.data.code == 200) {
                            let data = response.data.result
                            that.cardData.id = data.id
                            that.cardData.address = data.strInstallPos
                        } else {
                            that.$refs.uToast.show({
                                type: 'default',
                                icon: false,
                                message: response.data.message,
                            })
                        }
                    })

            });
        },

        //格式化tag
        // getNfcFormat() {
        //     testNfc.__write()
        // },
        //nfc 写入
        getNfcWrite() {
            let that = this
            new Promise((resolve, reject) => {
                api
                    .enterCardId({ id: that.cardId, })
                    .then((response) => {
                        if (response.data.code == 200) {
                            if (that.isNfc) {
                                // 调用 js 文件里面的方法
                                // testNfc.setTxt(that.cardId);
                                testNfc.writeData();
                            } else {
                                that.$refs.uToast.show({
                                    type: 'default',
                                    icon: false,
                                    message: '录入成功!',
                                })
                            }
                        } else {
                            that.$refs.uToast.show({
                                type: 'default',
                                icon: false,
                                message: response.data.message,
                            })
                        }
                    })

            });
        },
        //nfc读取
        getNfcRead() {
            let that = this
            if (that.isNfc) {
                // 调用 js 文件里面的方法
                testNfc.readData();
            } else {
                that.getCardLists(that.cardId)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.gas-record-card {
    position: relative;
    width: 100%;
    height: 100%;

    .record-top-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 10px 20px;
        box-sizing: border-box;
        background-color: #FFF;
        margin-bottom: 2px;
    }

    .record-write-box {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;

        .dialog-label {
            width: 60px;
            text-align: right;
        }
    }

    .record-bot-area {
        width: 100%;
        height: calc(100% - 138px);
        padding: 10px;
        box-sizing: border-box;
        background-color: #FFF;
        margin-bottom: 2px;
        overflow-y: auto;

        .record-container {
            .record-title {
                position: relative;
                width: 100%;
                height: 50rpx;
                background: url(/static/warndata/title.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                display: flex;
                /* 将父级元素设置为 Flex 容器 */
                align-items: center;
                /* 垂直居中子元素 */
            }

            .record-text {
                margin: 20px;
            }

            .record-card {
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 100%;
                height: 100px;
                margin: 10px auto;
                border-radius: 10px;
                background: url(/static/warndata/work.png),
                    linear-gradient(to right,
                        rgba(55, 135, 254, 0.08),
                        rgba(4, 184, 255, 0.08),
                        rgba(60, 161, 237, 0.08));
            }

            .record-card-item {
                width: 100%;
                padding: 10px;
                font-size: 14px;
                box-sizing: border-box;

                .card-item-label {
                    display: inline-block;
                    width: 53%;
                    text-align: right;
                    color: #3787fe;
                    font-weight: bold;
                }
            }
        }
    }

}
</style>