<template>
<div>
    <Myheader></Myheader>
     <div class="rc-header">
         <div class="rc-main">
          <ul>
              <li v-for="(item,index) in userrecord" :key="index">
                     {{item.title}}
              </li>
          </ul>
          <ol>

              <li v-for="(item,index) in usermessage" :key="index">
                  <span>{{item.startDate}}</span>
                  <em>{{item.changeValue}}</em>
                  <i>{{item.remark}}</i>

              </li>
          </ol>

         </div> 

     </div>
    <div class="rc-button">
       <div class="rc-order">
           <span>积分兑换</span>

       </div>

    </div>
  </div>
</template>

<script>
import Myheader from '~/components/header.vue' 
  import { memberAccount } from "../../ajax/getData";
export default {
   data(){
       return{
           userrecord:[
               {
                   title:'日期',
                  
               },
                {
                   title:'积分',
                  
               },
               {
                   title:'类型',
                  
               },

               
           ],

                 usermessage:[
               {
                   title:'2021-09-11',
                   rccord:'+100',
                   buycord:'购物积分'
                  
               },
                {
                   title:'2021-09-11',
                    rccord:'+100',
                   buycord:'购物积分'
                  
               },
               {
                   title:'2021-09-11',
                    rccord:'+100',
                   buycord:'购物积分'
                  
               },
                {
                   title:'2021-09-11',
                    rccord:'+100',
                   buycord:'购物积分'
                  
               },
                {
                   title:'2021-09-11',
                    rccord:'+100',
                   buycord:'购物积分'
                  
               },
               

               
           ]

       }
   },
   methods:{
     //请求猫
       async catmessage() {
            let user= JSON.parse(localStorage.getItem("userInfo"));
              let data = await memberAccount(user.data.id);
      if(data){
       this.usermessage=data.data;
       console.log(this.usermessage.data);
      }
    },
   },
   mounted(){
     this.catmessage();
  
   },
   components:{
    Myheader,
   },

}
</script>

<style lang="less" scoped>
ul li ol li em strong i {
  list-style: none;
  font-style: normal;
}
.rc-header {
  width: 100%;
}
//手机端
@media screen and (max-width: 768px) {

         .rc-button{
           width: 100%;
    height: 80px;
    background: #FFFFFF;
   box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;

.rc-order{
width: 164px;
    height: 48px;
    border: 2px solid #E2001A;
    border-radius: 30px;
    background: #E2001A;
    text-align: center;
    align-items: center;
    line-height: 48px;
   span{
       font-size: 16px;
       display: block;
        color: #FFFFFF;

   }
}
       }
   .rc-main{
       width: 92%;
       margin: 0 auto;

       ul{
           height: 70px;
           display: block;
           border-bottom: 1px solid #D8D8D8;
           display: flex;
           align-items: center;
           justify-content: center;
           text-align: center;
           font-size: 16px;
           color: #444444;
           li{
               float: left;
               width: 30%;
             

           }
           li:after{
                //   height: 2px;
                //   border: 1px solid red;
                //   display: block;
                  content:"|";
                  color: #707070;
                  margin-left: 5px;

           }
            li:last-child:after{
                   content:"";

           } 
       }

       ol{
           li{
               font-style: normal;
               display: block;
               height: 32px;
               margin-top: 16px;
               display: flex;
            //    justify-content: space-between;
               align-items: center;
               color: #666666;
               font-size: 14px;
               text-align: center;
               i{
                   font-style: normal;
                    display: block;
                   width: 40%;
               }
               span{
                 font-style: normal;
                    display: block;
                   width: 36%;
               }
               em{
                   font-style: normal;
                    display: block;
                   width: 23%;
               }
            

           }
       }
        
     
   }
}
//pc端
@media screen and (min-width: 768px) and (max-width: 1920px) {
     .rc-button{
           width: 100%;
    height: 80px;
    background: #FFFFFF;
   box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    display: none;

.rc-order{
width: 164px;
    height: 48px;
    border: 2px solid #E2001A;
    border-radius: 30px;
    background: #E2001A;
    text-align: center;
    align-items: center;
    line-height: 48px;
   span{
       font-size: 16px;
       display: block;
        color: #FFFFFF;

   }
}
       }
   .rc-main{
       width: 92%;
       margin: 0 auto;
       margin-top: 60px;

       ul{
           height: 64px;
background: #F6F6F6;
border: 1px solid #D7D7D7;
opacity: 1;
border-radius: 3px 3px 0px 0px;
           display: block;
           display: flex;
           align-items: center;
           justify-content: center;
           text-align: center;
           font-size: 16px;
           color: #444444;
           li{
               float: left;
               width: 42%;
             

           }
       
       }

       ol{
           li{
               font-style: normal;
               display: block;
               height: 48px;
               margin-top: 16px;
               display: flex;
               border: 1px solid #D7D7D7;
            //    justify-content: space-between;
               align-items: center;
               color: #666666;
               font-size: 14px;
               text-align: center;
               i{
                   font-style: normal;
                    display: block;
                   width: 34%;
               }
               span{
                 font-style: normal;
                    display: block;
                   width: 34%;
               }
               em{
                   font-style: normal;
                    display: block;
                   width: 34%;
               }
            

           }
       }
        
     
   }

}


</style>