game2006admin/src/views/nft/nftquery.vue

<template>
  <div class="createPost-container">
    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
      <div class="createPost-main-container">
        <el-row>
          <el-col :span="5">
            <el-form-item label-width="120px" label="所有者地址:" class="postInfo-container-item" prop="owner_address">
              <el-input v-model="postForm.owner_address" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label-width="120px" label="上一个所有者:" class="postInfo-container-item" prop="last_owner_address">
              <el-input v-model="postForm.last_owner_address" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label-width="120px" label="net_id:" class="postInfo-container-item" prop="net_id">
              <el-input v-model.number="postForm.net_id" />
            </el-form-item>
          </el-col>
          <el-button style="margin-left: 10px;" type="success" @click="submitForm()">
            查询
          </el-button>
        </el-row>

        <el-table
          v-table-scroll-load="nextStream"
          :empty-text="emptytext"
          height="400"
          :data="NFTList"
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column
            prop="idx"
            label="ID"
            width="100"
          />
          <el-table-column
            prop="owner_address"
            label="所有者地址"
            width="100"
          />
          <el-table-column
            prop="creator_address"
            label="创建者"
            width="100"
          />
          <el-table-column
            prop="token_id"
            label="token_id"
            width="100"
          />
          <el-table-column
            prop="token_type"
            label="nft类型 1:英雄 2:枪支 3:芯片 6:荣誉 7:徽章"
            width="100"
          />
          <el-table-column
            prop="token_state"
            label="0:正常状态 1:出售中 2:出租中"
            width="100"
          />
          <el-table-column
            prop="item_id"
            label="道具id"
            width="100"
          />
          <el-table-column
            prop="deleted"
            label="deleted"
            width="100"
          />
          <el-table-column
            prop="confirm_count"
            label="confirm_count"
            width="100"
          />
          <el-table-column
            prop="confirm_block_number"
            label="confirm_block_number"
            width="100"
          />
          <el-table-column
            prop="tags"
            label="tags"
            width="100"
          />
          <el-table-column
            prop="net_id"
            label="net_id"
            width="100"
          />
          <el-table-column
            prop="contract_address"
            label="contract_address"
            width="100"
          />
          <el-table-column
            prop="createtime"
            label="创建时间"
            width="100"
          />
          <el-table-column
            prop="modifytime"
            label="修改时间"
            width="100"
          />
          <el-table-column
            prop="last_owner_address"
            label="上一个所有者"
            width="100"
          />
        </el-table>
      </div>
    </el-form>
  </div>
</template>

<script>
import { getNFTInfo } from '@/api/nft'

const pagesize = 10

export default {
  name: 'NFT',
  data() {
    var validatequery = (rule, value, callback) => {
      if (!this.postForm.owner_address && !this.postForm.last_owner_address && !this.postForm.net_id) {
        callback(new Error('请至少填写一项'))
      } else {
        callback()
      }
    }

    var number_validatequery = (rule, value, callback) => {
      if (!this.postForm.owner_address && !this.postForm.last_owner_address) {
        if (!value) {
          callback(new Error('请至少填写一项'))
        } else {
          var num = Number(value)
          if (isNaN(num)) {
            callback(new Error('请填写数字'))
          } else {
            callback()
          }
        }
      } else {
        callback()
      }
    }

    return {
      postForm: {
        owner_address: '',
        last_owner_address: '',
        net_id: ''
      },
      rules: {
        owner_address: [{ required: false, validator: validatequery, trigger: 'blur' }],
        last_owner_address: [{ required: false, validator: validatequery, trigger: 'blur' }],
        net_id: [{ required: false, validator: number_validatequery, trigger: 'blur' }]
      },
      emptytext: ' ',
      NFTList: [],
      cursor: 0,
      remaining: 0
    }
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    submitForm() {
      console.log('valid begin')
      try {
        this.$refs['postForm'].validate((valid) => {
          console.log('valid end', valid)
          if (valid) {
            const querydata = JSON.parse(JSON.stringify(this.postForm))
            console.log('querydata:', querydata)
            if (querydata.net_id === '') {
              querydata.net_id = 0
            }
            getNFTInfo(querydata, 0, pagesize).then(response => {
              if (response.code === 0) {
                console.log('response', response)
                this.NFTList = response.data
                this.cursor = response.page.next_cursor
                this.remaining = response.page.remaining
                if (this.NFTList === undefined || this.NFTList.length <= 0) {
                  this.emptytext = 'No data'
                }
                this.$message({
                  message: '收到回应',
                  type: 'success',
                  duration: 1200,
                  onClose: () => {
                    // this.$router.push('index')
                  }
                })
              }
            }).catch(error => {
              console.log('error', error)
            })
          }
        })
      } catch (e) {
        console.log(e)
      }
    },
    nextStream() {
      if (this.remaining > 0) {
        this.remaining = 0
        const querydata = JSON.parse(JSON.stringify(this.postForm))
        console.log('next querydata:', querydata)
        if (querydata.net_id === '') {
          querydata.net_id = 0
        }
        getNFTInfo(querydata, this.cursor, pagesize).then(response => {
          if (response.code === 0) {
            console.log('next response', response)
            this.NFTList = this.NFTList.concat(response.data)
            this.cursor = response.page.next_cursor
            this.remaining = response.page.remaining
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}

.article-textarea ::v-deep {
  textarea {
    padding-right: 40px;
    resize: none;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #bfcbd9;
  }
}

</style>