smart-admin/rc-busness/pages/productdetails/userdetails.vue

<template>
<div>
    <Myheader></Myheader>
  <div class="rc-main">
      
     <div class="rc-header">
         <ul>
             <li v-for="(item,index) in usernewlist" :key="index" @click="usertiao(item,index)">
                 <span>{{item.price}}</span>
                 <img :src=item.catimage alt="">
             </li>
         </ul>
            <ol>
             <li v-for="(item,index) in usermessage" :key="index" @click="usertiao(item,index)">
                 <img :src=item.catimage alt="">
                 <span>{{item.address}}</span>
               
             </li>
         </ol>
          <!-- <ol>
           <li v-for="(usermes,index) in usermessage" :key="index" @click="huangjia(item,index)" ></li>
                <span>{{usermes.address}}</span>
                 <img :src=usermes.catimage alt="">
          </ol> -->

     </div>

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

<script>
import Myheader from '~/components/header.vue' 
  import { biaomessage } from "../../ajax/getData";
export default {
data(){
 return{
        usernewlist: [
        {
          price: "登录/注册",
        
         catimage: require("../../assets/image/rc-left.png"),
        },
        {
          price: "猫",
         
        catimage: require("../../assets/image/rc-left.png"),
        },
            {
          price: "犬",
        
          catimage: require("../../assets/image/rc-left.png"),
        },
        {
          price: "选购产品",
         
          catimage: require("../../assets/image/rc-left.png"),
        },
          {
          price: "个人中心",
        
           catimage: require("../../assets/image/rc-left.png"),
        },
        {
          price: "关于我们",
         
          catimage: require("../../assets/image/rc-left.png"),
        },
      ],


           usermessage: [
        {
          address: "皇家官方公众号",
        
         catimage: require("../../assets/image/weixin.png"),
        },
        {
          address: "皇家爱宠荟",
         
        catimage: require("../../assets/image/xiaochenxu.png"),
        },
            {
          address: "皇家官方社群",
        
          catimage: require("../../assets/image/weixin.png"),
        },
        {
          address: "微博",
         
          catimage: require("../../assets/image/weibo.png"),
        },
          {
          address: "与我们联系",
        
           catimage: require("../../assets/image/xiaochenxu.png"),
        },
        {
          address: "关于我们",
         
          catimage: require("../../assets/image/rc-left.png"),
        },
      ],
 }
},
methods:{

         async usetmessage() {
      let data = await biaomessage();
      if(data){
        this.usernewlist=data;
      }
      console.log(data);
    },
    // usertiao(item,index){
    //    if(item.price=='登出'){
    //           this.$router.push({
    //     path: "/productdetails/userdetails",
      
    //   });
    //    this.usernewlist[0].price='登录/注册'
    //    }
    // },
usertiao(item,index){
if(item.price=='登录/注册' ||index==0){
	this.$router.push({
		path: "/userlogin/login",
		query: {
			stype: 1,
		},
	});
}if(item.price=='登出'){
   localStorage.clear();
  this.usernewlist[0].price='登录/注册'
}

 if(item.price=='猫'){
              this.$router.push({
        path: "/productdetails/productlist/",
        query: {
          stype: 0,
        },
      });
      
}
else if(item.price=='犬'){
            this.$router.push({
        path: "/productdetails/productlist/",
        query: {
          stype: 1,
        },
      });
      
}
else if(item.price=='选购产品'){
            this.$router.push({
        path: "/productdetails/productlist/",
        query: {
          stype: '',
        },
      });
      
}
else if(item.price=='个人中心'){
  console.log('----')
            this.$router.push({
        path: "/personal/mypersonal",
        query: {
          stype: 1,
        },
      });
      
}
// else if(index=5){
//             this.$router.push({
//         path: "/personal/mypersonal",
     
//       });
      
// }
}
},
mounted(){
  let user= JSON.parse(localStorage.getItem("userInfo"));
  console.log(user);
   console.log(this.usernewlist[0].price);
    if(user==''||user==null){
      this.usernewlist[0].price='登录/注册'
    }else{
          this.usernewlist[0].price='登出'
        
    }
   

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

<style lang="less" scoped >
//手机端
@media screen and (max-width: 768px) {
 
  .rc-header{
    width: 92%;
    margin: 0 auto;

    ul{
      display: flex;
      justify-content: space-between;
      align-items: center;
       flex-direction: column;
       border-bottom: 1px solid #D7D7D7;
      li{
          height: 60px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #D7D7D7;
           span{
                     font-size: 16px;

color: #444444;
           }
           img{
             width: 8px;
             height: 16px;
             display: block;
           }
      }
    }

    ol{
      display: flex;
      flex-direction: column;
       border-bottom: 1px solid #D7D7D7;
      font-size: 16px;
      color: #444444; 

      li{
         border-bottom: 1px solid #D7D7D7;
         display: flex;
         align-items: center;
         height: 50px;
         span{
           margin-left: 10px;
         }
      }
      img{
        width: 23px;
        height: 19px;
        display: block;
      }
    }
  }
}
//    /* 最小768px最大1920 *pc端/
@media screen and (min-width: 768px) and (max-width: 1920px) {


}
</style>