tjshop/shop/static/manager/src.b/components/page/exchange/Detail.vue

<template>
  <div>
    <div class="operation">
      <el-input v-model="eicode" placeholder="请输入兑换码" size="mini"></el-input>
      <div class="btn">
        <el-button type="primary" @click="search" size="mini">查询</el-button>
      </div>
    </div>

    <div v-bind:class="{show: isSearched, hidden:!isSearched}" class="ecdate">
      <el-row>
        <el-col :span="12" class="eccontent">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>批次信息</span>
            </div>
            <div>
              <el-row>
                <el-col :span="8">商品名称:</el-col>
                <el-col :span="16">{{exchangecode.gname}}</el-col>
              </el-row>
              <el-row class="dataitem">
                <el-col :span="8">说明:</el-col>
                <el-col :span="16">{{exchangecode.remark}}</el-col>
              </el-row>
              <el-row class="dataitem">
                <el-col :span="8">创建人:</el-col>
                <el-col :span="16">{{exchangecode.cuname}}</el-col>
              </el-row>
              <el-row class="dataitem">
                <el-col :span="8">生成数量:</el-col>
                <el-col :span="16">{{exchangecode.num}}</el-col>
              </el-row>
              <el-row class="dataitem">
                <el-col :span="8">状态:</el-col>
                <el-col :span="16">
                  <template v-if="exchangecode.status === 1">
                    <p class="online">启用</p>
                  </template>
                  <template v-else>
                    <p class="offline">禁用</p>
                  </template>
                </el-col>
              </el-row>
              <el-row class="dataitem">
                <el-col :span="8">截止日期:</el-col>
                <el-col :span="16">{{exchangecode.endtime}}</el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12" class="eccontent">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>兑换码信息</span>
            </div>
            <el-row>
              <el-col :span="8">兑换码:</el-col>
              <el-col :span="16">{{item.eicode}}</el-col>
            </el-row>
            <el-row class="dataitem">
              <el-col :span="8">密码:</el-col>
              <el-col :span="16">{{item.eipwd}}</el-col>
            </el-row>
            <el-row class="dataitem">
              <el-col :span="8">使用状态:</el-col>
              <el-col :span="16">
                <template v-if="item.status === 1">
                  <p class="online">已使用</p>
                </template>
                <template v-else>
                  <p class="offline">未使用</p>
                </template>
              </el-col>
            </el-row>
            <el-row class="dataitem">
              <el-col :span="8">使用时间:</el-col>
              <el-col :span="16">{{item.utime}}</el-col>
            </el-row>
            <el-row class="dataitem">
              <el-col :span="8">使用信息:</el-col>
              <el-col :span="16">{{item.extend}}</el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { timeFormater } from "../../../util";
export default {
  data() {
    return {
      eicode: "",
      exchangecode: {},
      item: {},
      isSearched: false
    };
  },
  methods: {
    endTimeFormat(row) {
      return timeFormater(row.endtime);
    },
    utimeFormat(row) {
      if (row.utime === 0) {
        return "-";
      } else {
        return timeFormater(row.utime);
      }
    },
    utimeFormat(row) {
      if (row.utime === 0) {
        return "-";
      } else {
        return timeFormater(row.utime);
      }
    },
    search: function() {
      this.$http
        .echangeCodeGetItemdetail({ eicode: this.eicode }, this)
        .then(res => {
          if (res.code === 0) {
            let exchangecode = res.obj.exchangecode;
            exchangecode.endtime = this.endTimeFormat(exchangecode);
            this.exchangecode = res.obj.exchangecode;

            let item = res.obj.item;
            item.utime = this.utimeFormat(item);
            this.item = item;
            this.isSearched = true;
          }
        });
    }
  }
};
</script>


<style scoped>
.online {
  color: #67c23a;
}
.offline {
  color: #f56c6c;
}

.ecdate {
  margin-top: 20px;
}
.dataitem {
  margin-top: 10px;
}
.eccontent {
  padding: 10px;
}

.show {
  display: block;
}

.hidden {
  display: none;
}
.operation {
  display: flex;
  height: 50px;
  border-bottom: 1px solid #e6e6e6;
  margin-bottom: 10px;
}
.operation .btn {
  display: flex;
  height: 28px;
}
.operation .btn,
.operation .el-input,
.operation .el-select {
  width: 150px;
  margin-right: 8px;
}
</style>