<template>
  <div>
    <Myheader></Myheader>
    <div class="rc-header">
      <div class="rc-main">
        <div class="rc-headera">
          <span
            v-for="(item, index) in discountlist"
            :key="index"
            @click="selectGoods(item, index)"
            :class="activeIndex == index ? 'active' : 'unactive'"
          >
           {{item.title}}
          </span>
     
        </div>
        <div class="rc-userheader">
         <span  v-for="(item, index) in message" :key="index">
           {{item.title}}
         </span>
       
        </div>
        <div class="rc-center" v-for="(item, index) in goldmedal" :key="index">
          <div class="rc-title">
              <div>
            <i>订单编号:</i><span>{{ item.ordernumber }}</span>
          
            </div>
            <div class="rc-usertitle">
             <strong>订单状态:</strong> <em>{{ item.orderstype }}</em>
             </div>
          </div>
          <div class="rc-usermain">
            <div class="rc-image">  

              <img :src="item.catimage" alt="" />
            </div>
            <div class="rc-right">
              <div class="rc-usercenter">
              <em>{{ item.usereat }}</em>
              <div class="rc-userright">
                <span>规格:{{ item.num }}</span>
              </div>
              </div>
              <div class="rc-userbottom">
                <span>数量:{{ item.orderstype }}件</span>
                <i>￥{{ item.userprice }}</i>
              </div>


                  <div class="rc-userbottomm">
               <i>￥{{ item.userprice }}</i>
                 <span>{{item.orderstype}}</span>
                <i>￥{{ item.userprice }}</i>
              </div>
            </div>

             <div class="pc-bottom">
            <span @click="usertwo()">再次购买</span>
            <span @click="userfind()">查看订单</span>
          </div>
          </div>
          <div class="rc-bottom">
            <span @click="userpay(item,index)">{{item.buttontitle}}</span>
            <span @click="userfind()">查看订单</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Myheader from "~/components/header.vue";
import { customerorders } from "../../ajax/getData";
export default {
  data() {
    return {
      activeIndex: 0,
       buttontitle:'再次购买',
      discountlist: [
        {
          title: "全部",
        },
        {
          title: "待付款",
        },
        {
          title: "待发货",
        },
        {
          title: "待收货",
        },
      ],

       message: [
        {
          title: "商品",
        },
        {
          title: "单价/元",
        },
        {
          title: "数量",
        },
        {
          title: "实付款/元",
        },
        {
          title: "操作",
        },
      ],

      goldmedal: [
        {
          ordernumber: "1111111111111111111",
          orderstype: 1,
          usereat: "专属升级奖励",
          ordernum: 0,
          num: "5kg",
          specification: "1",
          buttontitle:'立即支付',
          userprice: "167.00",
          catimage: require("../../assets/image/rc-win.png"),

        },

        {
          ordernumber: "1111111111111111111",

          usereat: "每年4次免积分产品试吃",
          ordernum: 0,
             buttontitle:'再次购买',
          catimage: require("../../assets/image/usereat.png"),
          orderstype: 2,
          userprice: "167.00",
        },
        {
          ordernumber: "1111111111111111111",
          usereat: "尊享订单免邮服务（指点商品）",
          ordernum: 0,
            buttontitle:'取消订单',
          catimage: require("../../assets/image/usercar.png"),
          orderstype: 3,
          userprice: "167.00",
        },
        {
          ordernumber: "1111111111111111111",
          usereat: "365天专属养宠工具",
          ordernum: 1,
          catimage: require("../../assets/image/rc-growth.png"),
          orderstype: 1,
          userprice: "167.00",
        },
        {
          ordernumber: "1111111111111111111",
          usereat: "10年专业团队1v1咨询",
          ordernum: 2,
          catimage: require("../../assets/image/consult.png"),
          orderstype: 2,
          userprice: "167.00",
        },
        {
          ordernumber: "1111111111111111111",
          usereat: "行业大咖专业养宠知识",
          ordernum: 3,
          catimage: require("../../assets/image/rc-book.png"),
          orderstype: 3,
          userprice: "167.00",
        },
        {
          ordernumber: "1111111111111111111",
          usereat: "爱宠生活定制活动高级养宠宝典",
          ordernum: 3,
          catimage: require("../../assets/image/userself.png"),
          orderstype: 3,
          userprice: "167.00",
        },
        {
          usereat: "每年积分兑换1次价值288元的免费体检及100元医院绝育券",
          ordernum: 4,
          catimage: require("../../assets/image/rc-health.png"),
          orderstype: 3,
          userprice: "167.00",
        },
      ],
    };
  },
  methods: {
    userpay(item,index){
          console.log(item.buttontitle);
          if(item.buttontitle=='立即支付'){
                 this.$router.push({
        path: "/personal/userpay",
        query: {
          stype: 1,
        },
      });
          }else if(item.buttontitle=='再次购买'){
                  this.$router.push({
        path: "/myorder/userrecord",
        query: {
          stype: 1,
        },
      });
          }
          

    },
    selectGoods(item, index) {
      this.activeIndex = index;
      if(index==1){
     
      }
           if(index==2){
      
      }
    },
    userfind(){
       console.log('--');
       this.$router.push({
        path: "/personal/quiry",
        query: {
          stype: 1,
        },
      });
    },
    usertwo(){
                 this.$router.push({
        path: "/myorder/userrecord",
        query: {
          stype: 1,
        },
      });
    }
  },
  mounted() {


  },
  components: {
    Myheader,
  },
};
</script>

<style lang="less" scoped>

// 手机端
@media screen and(min-width: 320px) and(max-width:768px) {
  .active {
  font-size: 14px;
  color: #e2001a;
  cursor: pointer;
}
.unactive {
  font-size: 14px;
  color: #444444;
  cursor: pointer;
}
  .rc-header {


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

      .rc-headera {
        display: flex;
        justify-content: space-between;
        height: 64px;
        align-items: center;
      }
      .rc-userheader{
        display: none;
      }

      .rc-center {
        width: 100%;
        height: 245px;
        margin-top: 8px;
        .rc-usermain {
            .pc-bottom{
              display: none;
            }

          display: flex;
          .rc-image {
              border: 1px solid #D8D8D8;
    margin-top: 17px;
;
            img {
              width: 96px;
              height: 96px;
              display: block;

            }
          }

          .rc-right {

            .rc-userbottomm{
              display: none;
            }
            display: flex;
            flex-direction: column;
            width: 100%;
            margin-left: 16px;
            justify-content: center;
            em
            {
                font-style: normal;
                display: block;
                font-size: 16px;
                margin-top: 18px;
                font-weight: bold;
        
color: #E1001A;
            }
          }
          .rc-userright {
            display: flex;
            flex-direction: column;
            color: #666666;
            font-size: 14px;
            span{
                display: block;
                margin-top: 16px;
            }
          }
          .rc-userbottom {
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
            span{
                color: #666666;
                font-size: 14px;
            }
            i{
                font-style: normal;
                color: #E1001A;
                font-size: 18px;
                font-weight: bold;
            }
          }
        }

        .rc-bottom {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 24px;
          span {
            display: block;
            width: 130px;
            display: flex;
            align-items: center;
            line-height: 40px;
            text-align: center;
            color: #e2001a;
            height: 40px;
            border: 2px solid #e2001a;
         justify-content: center;
            border-radius: 30px;
            font-weight: bold;
          }
          span:last-child{
              margin-left: 15px;
          }
        }
      }

      .rc-title {
        height: 52px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #d8d8d8;
        justify-content: space-between;
        span{
            font-size: 14px;
           color: #999999;
           margin-left: 8px;
        }
        em{
            font-style: normal;
            font-size: 14px;

color: #333333;
        }
        i{
            font-style: normal;
            font-size: 14px;

color: #333333;
        }
        .rc-usertitle strong{
          display: none;
        }
      }
    }
  }
}
//    /* 最小768px最大1920 *pc端/
@media screen and (min-width: 768px) and (max-width: 1920px) {
  .active {
  font-size: 18px;
  color: #e2001a;
  cursor: pointer;
  // margin-left: 40px;
}
.unactive {
  font-size: 18px;
  color: #444444;
  cursor: pointer;
  // margin-left: 80px;
}
 .rc-header {
    .rc-main {
      width: 92%;
      margin: 0 auto;

      .rc-headera {
        display: flex;
        height: 64px;
        align-items: center;
        border: 1px solid #D7D7D7;
        border-radius: 3px 3px 0px 0px;
        font-size: 18px;
        span:first-child{
         margin-left: 40px;
        }
        span{
          margin-left: 80px;
        }
      }

      .rc-userheader{
        width: 100%;
        height: 64px;
        background: #F6F6F6;
        border: 1px solid #D7D7D7;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 18px;
      span:first-child{
        margin-left: 173px;
      }
         span:last-child{
        margin-right: 87px;
      }
      }

      .rc-center {
        width: 100%;
        height: 220px;
        border: 1px solid #D7D7D7;
        .rc-usermain {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 164px;
          .rc-usercenter{
            width: 25%;
            em{
              font-size: 18px;
            }
          }
          .rc-image {
              border: 1px solid #D8D8D8;
               margin-left: 40px;
   
            img {
              width: 96px;
              height: 96px;
              display: block;

            }
          }

          .rc-right {
            .rc-userbottom{
              display: none;
            }
            display: flex;
           
            width: 100%;
            margin-left: 16px;

            em
            {
                font-style: normal;
               font-weight: bold;
                font-size: 16px;
                margin-top: 18px;
        
color: #E1001A;
            }
          }
          .rc-userright {
            display: flex;
            flex-direction: column;
            color: #666666;
            font-size: 16px;
            span{
                display: block;
                margin-top: 6px;
            }
          }
          .rc-userbottomm {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 58%;
            font-size: 20px;
             color: #E1001A;
             font-weight: bold;
            i{
                font-style: normal;
               
               
            }
          }

             .pc-bottom {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          margin-right: 40px;
      
          span {
            display: block;
            width: 130px;
            cursor: pointer;
            display: flex;
            align-items: center;
            line-height: 40px;
            font-weight: bold;
            text-align: center;
            color: #e2001a;
            height: 40px;
            border: 2px solid #e2001a;
         justify-content: center;
            border-radius: 30px;
          }
          span:last-child{
              margin-top: 15px;
          }
        }
        }

        .rc-bottom {
         display: none;
        }
      }

      .rc-title {
        height: 55px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #d8d8d8;
        justify-content: space-between;
        span{
            font-size: 16px;
           color: #999999;
           margin-left: 8px;
        }
        strong{
          font-style: normal;
          font-size: 16px;
          color: #444444;
        }
        em{
            font-style: normal;
            font-size: 16px;

color: #333333;
        }
        i{
            font-style: normal;
            font-size: 16px;
            margin-left: 40px;

color: #333333;
        }
        .rc-usertitle{
          margin-right: 73px;
          display: flex;
          align-items: center;
          em{
            display: block;
            margin-left: 8px;
          }
        }
      }
    }
  }
}
</style>