<template>
  <div class="message-wrap">
    <nav-bar title="消息中心"/>
    <div
      class="message line flex align-c"
      v-for="(item, index) in data"
      @click="goOrder(item)"
      :key="index">
      <div>
        <h5>{{item.title}}</h5>
        <p>{{item.content}}</p>
      </div>
      <i class="icon icon-jiantou-you"/>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/NavBar";

export default {
  name: "Message",
  components: {
    NavBar
  },
  data() {
    return {
      data: null
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取数据
    getData() {
      let params = {};
      params.url = this.$apis.api_message_list;
      params.data = {};
      this.$net.req(params, this).then(
        res => {
          this.data = res.data;
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 支付单详情
    goOrder(item) {
      let lang = this.$store.state.langStr;
      this.$router.push({
        path: `/${lang}/orderInfo/${item.id}`
      });
    }
  }
};
</script>

<style scoped lang='less'>
.message-wrap {
  background: #fff;
  min-height: 100vh;
  .message {
    padding: 20px 0;
    margin: 0 17px;
    overflow: hidden;
    > img {
      width: 45px;
      height: 45px;
      border-radius: 8px;
      margin: 0 15px 0 0;
    }
    div {
      color: #000;
      overflow: hidden;
      h5 {
        font-size: 17px;
        font-weight: 500;
        line-height: 23px;
        color: #333;
      }
      p {
        font-size: 13px;
        line-height: 19px;
        color: #999;
      }
    }
    div + i {
      color: #bbb;
      font-size: 12px;
    }
  }
  .message.line {
    border-bottom: 1px solid #eee;
  }
}
</style>
