dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterIntegralExchangeRecord.vue

<template>
  <div class="userCenterIntegralExchangeRecord">
    <!-- <div class="outer3">
      <div class="center">
        <div class="centerLeft">
          <div class="centerTop">
            <span>{{
              $i18n.locale == "zh" ? "我的兑换记录" : "Exchange Record"
            }}</span>
          </div>
          <div class="centerBottom">
            <span
              >{{
                $i18n.locale == "zh" ? "小积分" : "SmallIntegral"
              }}&nbsp;/&nbsp;{{
                $i18n.locale == "zh" ? "大兑换" : "BigExchange"
              }}&nbsp;/&nbsp;{{
                $i18n.locale == "zh" ? "超惊喜" : "SuperSurprise"
              }}&nbsp;/&nbsp;{{
                $i18n.locale == "zh" ? "不等待" : "Don'tWait"
              }}</span
            >
          </div>
        </div>
        <div class="centerRight">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngcb776d7fd3ad018f8528faa5d3b23a6cf3e7e6ff44d4ee9fd3a32f5822112194"
          />
        </div>
      </div>
    </div> -->
    <div class="topImg">
      <div v-if="isZh">
        <img
          style="display: block; width: 100%; height: 100%"
          src="../../../assets/我的兑换记录.png"
          alt=""
        />
      </div>
      <div v-else>
        <img
          style="display: block; width: 100%; height: 100%"
          src="../../../assets/22.png"
          alt=""
        />
      </div>
    </div>
    <div class="exchangeRecord">
      {{
        $i18n.locale === "zh" ? "查询到兑换记录" : "Exchange Record Found"
      }}&nbsp;{{ this.forRecord ? this.forRecord : "0" }}&nbsp;{{
        $i18n.locale === "zh" ? "条" : "Strip"
      }}
    </div>
    <!-- 无兑换记录 -->
    <div v-if="isShow" class="noRecord">
      <div class="noRecordImg">
        <img src="../../../assets/record.png" alt="" />
      </div>
      <div>
        <span class="info5">{{
          $i18n.locale == "zh" ? "没有查询到兑换记录" : "No Results"
        }}</span>
      </div>
    </div>

    <!-- 有兑换记录 -->
    <div v-else class="recorded">
      <el-table
        :data="data"
        height="550px"
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ backgroundColor: '#f8f8f8' }"
        style="width: 100%"
      >
        <el-table-column
          :prop="$i18n.locale === 'zh' ? 'commodityName' : 'commodityNameEn'"
          :label="$i18n.locale === 'zh' ? '福利' : 'Welfare'"
          width="width"
          align="center"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="point"
          :label="$i18n.locale === 'zh' ? '积分' : 'Integral'"
          width="width"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="prop"
          :label="$i18n.locale === 'zh' ? '兑换时间' : 'Exchange Time'"
          width="width"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.createDate | time("YYYY-MM-DD HH:mm:ss") }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="prop"
          :label="$i18n.locale === 'zh' ? '兑换状态' : 'Exchange Status'"
          width="width"
        >
          <template>
            <div v-if="isZh">
              <img src="../../../assets/recordsuccess.png" alt="" />
            </div>
            <div v-else>
              <img src="../../../assets/兑换英文.png" alt="" />
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="
          (val) => {
            page.pageSize = val;
          }
        "
        @current-change="
          (val) => {
            page.pageNo = val;
          }
        "
        layout="prev, pager, next"
        :total="page.total"
        :current-page="page.pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        style="text-align: center; margin-top: 20px"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { getPersonalOrder } from "@/api/user";
export default {
  name: "userCenterIntegralExchangeRecord",
  data() {
    return {
      isShow: false,
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      shopDetail: {},
      data: [],
      forRecord: "",
      isZh: true,
      detailId:null,
    };
  },
  filters: {
    time(date, type) {
      return moment(date).format(type);
    },
  },
  watch: {
    "$i18n.locale": {
      handler: function () {
        this.isZh = !this.isZh;
      },
      deep: true,
    },
  },
  mounted() {
    let language = window.localStorage.getItem("locale");
    if (language == "zh") {
      this.isZh = true;
    } else {
      this.isZh = false;
    }
    this.detailId = window.localStorage.getItem("detailID")
    // this.shopDetail = this.$route.query.item;
    this.initData();
  },
  methods: {
    initData() {
      let param = this.detailId;
      console.log(param);
      getPersonalOrder(param).then((res) => {
        this.data = res.data;
        this.forRecord = res.data.length;
        if (!this.forRecord) {
          this.isShow = true;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.userCenterIntegralExchangeRecord {
  // width: 100%;
  background: #fff;
  min-height: 800px;
  .topImg {
    width: 984px;
    height: 126px;
  }
  .outer3 {
    height: 136px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng57d0f7528232684af7dcede85c7461f034e12072a9167c35411a147a2f0e124f)
      100% no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    .center {
      width: 443px;
      height: 126px;
      display: flex;
      .centerLeft {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 30px;
        .centerTop {
          margin-left: 10px;
          width: 216px;
          height: 30px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 30px;
          letter-spacing: 6px;
          font-family: SourceHanSansCN-Heavy;
          white-space: nowrap;
          line-height: 30px;
          text-align: left;
          text-shadow: 0px 4px 2px rgba(0, 77, 195, 1);
        }
        .centerBottom {
          width: 206px;
          height: 11px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 11px;
          letter-spacing: 2.200000047683716px;
          font-family: SourceHanSansCN-Regular;
          white-space: nowrap;
          line-height: 11px;
          text-align: left;
          text-shadow: 0px 4px 2px rgba(0, 77, 195, 1);
          margin-top: 11px;
        }
      }
      .centerRight {
        margin-left: 105px;
        width: 135px;
        height: 126px;
      }
    }
  }
  .exchangeRecord {
    width: 130px;
    height: 20px;
    display: block;
    overflow-wrap: break-word;
    color: rgba(119, 138, 164, 1);
    font-size: 14px;
    white-space: nowrap;
    line-height: 20px;
    text-align: left;
    margin: 18px 0;
  }
  // 无兑换记录
  .noRecord {
    width: 983px;
    height: 362px;
    // background: #999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .info5 {
      width: 180px;
      height: 28px;
      display: block;
      overflow-wrap: break-word;
      color: rgba(156, 156, 156, 1);
      font-size: 20px;
      font-family: PingFangSC-Medium;
      white-space: nowrap;
      line-height: 28px;
      text-align: left;
    }
  }
  // 有兑换记录
  .recorded {
    height: 32px;
    background-color: #f5f5f5;
    width: 100%;
    margin: 16px 0;
    // padding-left: 186px;
    .layer2 {
      overflow-wrap: break-word;
      color: rgba(51, 51, 51, 1);
      font-size: 16px;
      white-space: nowrap;
      width: 835px;
      height: 31px;
      line-height: 31px;
      margin: 1px 0;
      display: flex;
      justify-content: space-around;
    }
    .content {
      margin: 11px 0;
      margin-left: -186px;
      width: 100%;
      height: 330px;
      display: flex;
      // background: #999;
      .cLeft {
        height: 206px;
        background-color: rgba(207, 215, 228, 0.8);
        width: 174px;
        display: flex;
        justify-content: center;
        // align-content: center;
        .img {
          margin-top: 14px;
          width: 141px;
          height: 174px;
          background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng0faf2cf0dec2a633fbefba7fc82c1992230df91bc2337fe7b1ea5a32646c8110)
            100% no-repeat;
        }
      }
      .content_01 {
        width: 280px;
        height: 152px;
        margin: 16px 0 0 16px;
        margin-left: -5px;
        .info1 {
          width: 280px;
          height: 30px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(51, 51, 51, 1);
          font-size: 20px;
          font-family: PingFangSC-Semibold;
          white-space: nowrap;
          line-height: 30px;
          text-align: left;
        }
        .box5 {
          height: 32px;
          border-radius: 16px;
          background-color: rgba(240, 242, 245, 1);
          margin-top: 90px;
          width: 222px;

          margin-left: 10px;
          .bd1 {
            width: 196px;
            height: 30px;
            margin-left: 25px;
            display: flex;
            justify-content: space-around;
            .txt4 {
              width: 48px;
              height: 30px;
              display: block;
              color: rgba(51, 51, 51, 1);
              font-size: 16px;
              line-height: 30px;
            }
            .word16 {
              width: 130px;
              height: 30px;
              display: block;
              color: rgba(0, 145, 255, 1);
              font-size: 16px;
              line-height: 30px;
            }
          }
        }
      }
      .content_02 {
        .word17 {
          width: 101px;
          height: 30px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(224, 32, 32, 1);
          font-size: 16px;
          white-space: nowrap;
          line-height: 30px;
          text-align: left;
          margin: 16px 0 0 16px;
        }
      }
      .content_03 {
        .word18 {
          width: 97px;
          height: 30px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(153, 153, 153, 1);
          font-size: 16px;
          white-space: nowrap;
          line-height: 30px;
          text-align: left;
          margin: 16px 0 0 99px;
        }
      }
      .content_04 {
        margin: 4px 0 0 109px;
      }
    }
  }
}
</style>