<template>


<div>
	<!-- Suppose in header end -->
	<Myheader></Myheader>
    <tabs></tabs>
    <unlogin></unlogin>
	<!-- Suppose in header end -->
	<van-swipe :autoplay="30000">
		<van-swipe-item v-for="(banner, index) in banners" :key="index">
			<img :src="banner.src"  class="useraimg"/>
		</van-swipe-item>
	</van-swipe>

<div class="online bold rc-md-down" id="fixed-catbar-seperator"></div>
   <!-- <div v-swiper:mySwiper="swiperOption" class="swiperWrap">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(banner,index ) in banners" :key="index">
                <img :src="banner.src">
            </div>
        </div>
        <div class="swiper-pagination swiper-pagination-bullets"></div>
  </div> -->
<div class="rc-max-width--xl">
	<div class="usermain">
		<div :class="searchBar?'rc-ma':'rc-ma searchBara'">
			<div v-if="!searchBar" class="online bold rc-md-down"></div>
			<ul class="ul-zhuan">
				<li 
					v-for="(item, index) in discountlist"
					:key="index"
					@click="selectGoods(item, index)"
					:class="activeIndex == index ? 'active' : 'unactive'"
				>
					<img :src="item.catimage" alt="">
					<span>{{ item.title }}</span>
				</li>
			</ul>
			<div class="online bold rc-md-down"></div>
		</div>
	</div>
</div>
<div class="online bold rc-md-up"></div>

<div class="rc-full-width">
  <div class="rc-lunbo rc-full-width">
    <!-- <h2>明星猫粮</h2> -->
   <div class="pageFullScreen" id="xxxFullScreen" v-show="catproduct">
        <!-- 内容 -->
        <div class="swiper-container rc-full-width rc-padding-y--md" id="swiper1">
           <h2 class="rc-beta rc-text--center">明星猫粮</h2>
             <!-- 轮播图 -->
            <swiper :options="swiperOption">
                <swiper-slide class="swiper-slide" v-for="(item, key) in catlistvideo" :key="key" >
                  <div class="rc-video">
                    <div class="uservideo">
            
                    </div>
               
                   <div class="rc-right">
						<img :src=item.catimage alt="">
						<span>{{item.title}}</span>
						<p>{{item.detail}}</p>
						<em>{{item.price}}</em>
						<strong class="ts-standard-btn ts-standard-btn--two center" @click="userbuy(item,index)">立即购买</strong>
                   </div>
                   </div>
                         <div class="sw-center" >
							<div class="rc-click"  @click="selectproduce(item,index)">
								<div class="uservideo">
									<video width="300px" height="251" controls="controls">
										<source :src= item.video type="video/ogg" autoplay>
									</video>
								</div>
                    
								<img :src=item.catimage alt="">
								<span>{{item.title}}</span>
								<p>{{item.detail}}</p>
								<em>{{item.price}}</em>
							</div>
							<div class="rc-full-width rc-margin-y--md">
								<i @click="userbuy(item,index)" class="ts-standard-btn ts-standard-btn--two center">立即购买</i>
							</div>
                         </div>
       
                </swiper-slide>
            </swiper>
        </div>


</div>

 


<div class="online bold"></div>
 <div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md">
   <h2 class="rc-beta rc-text--center">全价猫湿粮</h2>
<van-tabs @change='userclick' class="van-tabs">
  <van-tab v-for="(item,index) in discoun" :key="index" :title="item.title">
       <div class="rc-contair">
         <ul class="ts-product-list rc-margin-bottom--lg">
             <li v-for="(item,index) in catshi" :key="index" class="rc-margin-top--md">
				 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
					<div class="rc-rccontair">
						<img :src=item.picture alt="">   
					</div>
				</div>
				<div class="rc-column">
					<div class="rc-click" @click="selectproduce(item,index)">
						<span>{{item.name}}</span>
						<i>0.001{{item.price}}</i>
					</div>
					<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
				</div>
             </li>
         </ul>
          
      
   <nuxt-link :to="`/productdetails/productlist/`">
     <div class="userserlect">
	   <span class="ts-standard-btn center">查看更多</span>
	 </div>
	</nuxt-link>
    
       
         
     </div>

  </van-tab>
</van-tabs>
	<div class="rc-selection">
         <ol>
			<li 
			  v-for="(item, index) in selection"
					:key="index"
					@click="selectGo(item, index)"
					:class="activeInde2 == index ? 'userselection' : 'unselection'"
				  >
					<span>{{ item.title }}</span>
			</li>
		</ol>
	<div class="rc-maa">
  <ul>
    <li 
      v-for="(item, index) in doglist"
            :key="index"
            @click="selectGoo(item, index)"
            :class="activeInde3 == index ? 'active' : 'unactive'"
          >
          <img :src="item.catimage" alt="">
            <span>{{ item.title }}</span>
    </li>
  </ul>
  </div>
         <div class="">
			<ul class="ts-product-list rc-margin-bottom--lg">
			    <li v-for="(item,index) in rccontair" :key="index" class="rc-margin-top--md">
							 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
								<div class="rc-rccontair">
									<img :src=item.catimage alt="">   
								</div>
							</div>
							<div class="rc-column">
								<div class="rc-click" @click="selectproduce(item,index)">
									<span>{{item.title}}</span>
									<i>0.001{{item.price}}</i>
								</div>
								<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
							</div>
			    </li>
			</ul>
         
      <nuxt-link :to="`/productdetails/productlist/`">
     <div class="userserlect">
           <span class="ts-standard-btn center">查看更多</span>
         </div>
        </nuxt-link>
       
         
     </div>

      </div>
 </div>
 <div class="online bold"></div>
  <div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md">
   <h2 class="rc-beta rc-text--center">全价猫干粮</h2>
<van-tabs @change='userclick' class="van-tabs">
  <van-tab v-for="(item,index) in discoun" :key="index" :title="item.title">
       <div class="rc-contair">
			<ul class="ts-product-list rc-margin-bottom--lg">
			    <li v-for="(item,index) in catgan" :key="index" class="rc-margin-top--md">
					 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
						<div class="rc-rccontair">
							<img :src=item.picture alt="">   
						</div>
					</div>
					<div class="rc-column">
						<div class="rc-click" @click="selectproduce(item,index)">
							<span>{{item.name}}</span>
							<i>0.001{{item.price}}</i>
						</div>
						<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
					</div>
			    </li>
			</ul>
         
    
   <nuxt-link :to="`/productdetails/productlist/`">
     <div class="userserlect">
           <span class="ts-standard-btn center">查看更多</span>
         </div>
        </nuxt-link>
     </div>

  </van-tab>
</van-tabs>
      <div class="rc-selection">

         <ol>
    <li 
      v-for="(item, index) in selection"
            :key="index"
            @click="selectGo(item, index)"
            :class="activeInde2 == index ? 'userselection' : 'unselection'"
          >
      
            <span>{{ item.title }}</span>
    </li>
  </ol>
     <div class="rc-maa">
  <ul>
 
     
    <li 
      v-for="(item, index) in doglist"
            :key="index"
            @click="selectGoo(item, index)"
            :class="activeInde3 == index ? 'active' : 'unactive'"
          >
          <img :src="item.catimage" alt="">
            <span>{{ item.title }}</span>
    </li>

  </ul>
  </div>
         <div class="rc-contair">
			 <ul class="ts-product-list rc-margin-bottom--lg">
			     <li v-for="(item,index) in rccontair" :key="index" class="rc-margin-top--md">
			 		 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
			 			<div class="rc-rccontair">
			 				<img :src=item.catimage alt="">   
			 			</div>
			 		</div>
			 		<div class="rc-column">
			 			<div class="rc-click" @click="selectproduce(item,index)">
			 				<span>{{item.title}}</span>
			 				<i>0.001{{item.price}}</i>
			 			</div>
			 			<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
			 		</div>
			     </li>
			 </ul>         
     <nuxt-link :to="`/productdetails/productlist/`">
     <div class="userserlect">
           <span class="ts-standard-btn center">查看更多</span>
         </div>
        </nuxt-link>
       
         
     </div>

      </div>



 </div>
<div class="online bold"></div>

   <div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md">
   <h2 class="rc-beta rc-text--center">全价犬湿粮</h2>
<van-tabs @change='userdog' class="van-tabs">
  <van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title">
       <div class="rc-contair">
			<ul class="ts-product-list rc-margin-bottom--lg">
			    <li v-for="(item,index) in dogshi" :key="index" class="rc-margin-top--md">
					 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
						<div class="rc-rccontair">
							<img :src=item.picture alt="">   
						</div>
					</div>
					<div class="rc-column">
						<div class="rc-click" @click="selectproduce(item,index)">
							<span>{{item.name}}</span>
							<i>0.001{{item.price}}</i>
						</div>
						<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
					</div>
			    </li>
			</ul>
         
      
<nuxt-link :to="`/productdetails/productlist/`">
     <div class="userserlect">
           <span class="ts-standard-btn center">查看更多</span>
         </div>
        </nuxt-link>
       
       
         
     </div>

  </van-tab>
</van-tabs>
      <div class="rc-selection">

         <ol>
    <li 
      v-for="(item, index) in selection"
            :key="index"
            @click="selectGo(item, index)"
            :class="activeInde2 == index ? 'userselection' : 'unselection'"
          >
      
            <span>{{ item.title }}</span>
    </li>
  </ol>
     <div class="rc-maa">
  <ul>
 
     
    <li 
      v-for="(item, index) in doglist"
            :key="index"
            @click="selectGoo(item, index)"
            :class="activeInde3 == index ? 'active' : 'unactive'"
          >
          <img :src="item.catimage" alt="">
            <span>{{ item.title }}</span>
    </li>

  </ul>
  </div>
         <div class="rc-contair">
			 <ul class="ts-product-list rc-margin-bottom--lg">
			     <li v-for="(item,index) in rccontair" :key="index" class="rc-margin-top--md">
			 		 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
			 			<div class="rc-rccontair">
			 				<img :src=item.catimage alt="">   
			 			</div>
			 		</div>
			 		<div class="rc-column">
			 			<div class="rc-click" @click="selectproduce(item,index)">
			 				<span>{{item.title}}</span>
			 				<i>0.001{{item.price}}</i>
			 			</div>
			 			<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
			 		</div>
			     </li>
			 </ul>
			 
         
  <nuxt-link :to="`/productdetails/productlist/`">
     <div class="userserlect">
           <span class="ts-standard-btn center">查看更多</span>
         </div>
        </nuxt-link>
       
         
     </div>

      </div>



 </div>
 <div class="online bold"></div>
   <div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md">
   <h2 class="rc-beta rc-text--center">全价犬干粮</h2>
<van-tabs @change='userdog' class="van-tabs">
  <van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title">
       <div class="rc-contair">
			<ul class="ts-product-list rc-margin-bottom--lg">
			    <li v-for="(item,index) in doggan" :key="index" class="rc-margin-top--md">
					 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
						<div class="rc-rccontair">
							<img :src=item.picture alt="">   
						</div>
					</div>
					<div class="rc-column">
						<div class="rc-click" @click="selectproduce(item,index)">
							<span>{{item.name}}</span>
							<i>0.001{{item.price}}</i>
						</div>
						<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
					</div>
			    </li>
			</ul>
         
    <nuxt-link :to="`/productdetails/productlist/`">
     <div class="userserlect">
           <span class="ts-standard-btn center">查看更多</span>
         </div>
        </nuxt-link>
       
       
         
     </div>

  </van-tab>
</van-tabs>
      <div class="rc-selection">

         <ol>
    <li 
      v-for="(item, index) in selection"
            :key="index"
            @click="selectGo(item, index)"
            :class="activeInde2 == index ? 'userselection' : 'unselection'"
          >
      
            <span>{{ item.title }}</span>
    </li>
  </ol>
     <div class="rc-maa">
  <ul>
 
     
    <li 
      v-for="(item, index) in doglist"
            :key="index"
            @click="selectGoo(item, index)"
            :class="activeInde3 == index ? 'active' : 'unactive'"
          >
          <img :src="item.catimage" alt="">
            <span>{{ item.title }}</span>
    </li>

  </ul>
  </div>
         <div class="rc-contair">
			 <ul class="ts-product-list rc-margin-bottom--lg">
			     <li v-for="(item,index) in rccontair" :key="index" class="rc-margin-top--md">
			 		 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
			 			<div class="rc-rccontair">
			 				<img :src=item.catimage alt="">   
			 			</div>
			 		</div>
			 		<div class="rc-column">
			 			<div class="rc-click" @click="selectproduce(item,index)">
			 				<span>{{item.title}}</span>
			 				<i>0.001{{item.price}}</i>
			 			</div>
			 			<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
			 		</div>
			     </li>
			 </ul>
		
      <nuxt-link :to="`/productdetails/productlist/`">
     <div class="userserlect">
           <span class="ts-standard-btn center">查看更多</span>
         </div>
        </nuxt-link>
       
         
     </div>

      </div>



 </div>
 <div class="online bold"></div>

   <div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md">
   <h2 class="rc-beta rc-text--center">处方用粮</h2>
<van-tabs @change='userclick' class="van-tabs">
  <van-tab v-for="(item,index) in discounchufang" :key="index" :title="item.title">
       <div class="rc-contair">
			<ul class="ts-product-list rc-margin-bottom--lg">
			    <li v-for="(item,index) in processinformation" :key="index" class="rc-margin-top--md rc-padding-bottom--lg">
					 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
						<div class="rc-rccontair">
							<img :src="`${usersetting}/${item.picFile}`">
						</div>
					</div>
					<div class="rc-column">
						<div class="rc-click" @click="selectproduce(item,index)">
							<span>{{item.productName}}</span>
						</div>
					</div>
			    </li>
			</ul>
         
      
 <nuxt-link :to="`/productdetails/productlist/`">
     <div class="userserlect">
           <span class="ts-standard-btn center">查看更多</span>
         </div>
        </nuxt-link>
        
       
         
     </div>

  </van-tab>
</van-tabs>
      <div class="rc-selection">

         <ol>
    <li 
      v-for="(item, index) in selection"
            :key="index"
            @click="selectGo(item, index)"
            :class="activeInde2 == index ? 'userselection' : 'unselection'"
          >
      
            <span>{{ item.title }}</span>
    </li>
  </ol>
     <div class="rc-maa">
  <ul>
 
     
    <li 
      v-for="(item, index) in doglist"
            :key="index"
            @click="selectGoo(item, index)"
            :class="activeInde3 == index ? 'active' : 'unactive'"
          >
          <img :src="item.catimage" alt="">
            <span>{{ item.title }}</span>
    </li>

  </ul>
  </div>
         <div class="rc-contair">		 
		 <ul class="ts-product-list rc-margin-bottom--lg">
		     <li v-for="(item,index) in rccontair" :key="index" class="rc-margin-top--md rc-padding-bottom--lg">
		 		 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
		 			<div class="rc-rccontair">
		 				<img :src=item.catimage alt="">
		 			</div>
		 		</div>
		 		<div class="rc-column">
		 			<div class="rc-click" @click="selectproduce(item,index)">
		 				<span>{{item.title}}</span>
		 			</div>
		 		</div>
		     </li>
		 </ul>
         
  <nuxt-link :to="`/productdetails/productlist/`">
     <div class="userserlect">
           <span class="ts-standard-btn center">查看更多</span>
         </div>
        </nuxt-link>
       
         
     </div>

      </div>
 </div>
 <div class="online bold"></div>

 <div class="rc-usermessage rc-padding--md rc-full-width rc-max-width--md">
  <h2 class="rc-beta rc-text--center">为每一种健康需求度身定制</h2>
  <span class="rc-text--center">每一只猫、每一只狗都是独一无二的，而他们的健康所需亦一样，需要专门度身定制。不过，这些健康需求
    通常是他们体型、品种或生活方式上的特征。邀请您探索我们的营养系列，了解我们如何协助每一只爱宠过
    得更健康。
  </span>
  <a href="https://royalcanin.com.cn/tailored-nutrition/details" class="ts-standard-btn ts-standard-btn--two center rc-margin-y--md">
	了解更多
  </a>
 </div>
 </div>




</div>

<!-- <div class="container">
      <nuxt-link :to="`/userlogin/login/`">
      <div class="userlogin">

          <span>登录/注册</span>

      </div>
        </nuxt-link>
           <nuxt-link :to="`/usersearch/search/`">
      <div class="userlogin">

          <span>搜索</span>

      </div>
        </nuxt-link>



      <nuxt-link :to="`/personal/mypersonal/`">
      <div class="userlogin">
          <span>个人中心</span>

      </div>
        </nuxt-link>
        </div> -->

        <div class="rc-fixright" >
			<ul >
				<li v-for="(userfixed,index) in fixedlist" :key="index" @click="lianxi(userfixed,index)">
					<img :src="userfixed.catimage" alt="">
					<span> {{userfixed.title}}</span>
				</li>
			</ul>
			<div class="tuntop" @click="toTop" v-show="gotop">
				<img src="../assets/image/turntop.png" alt="">
				回到顶部
			</div>
        </div>

          <Myfooter v-on:litentop='showmesg'></Myfooter>
        </div>
</template>
  <script>
  import $ from 'jquery'
  import Myheader from "~/components/header.vue";
  import Myfooter from "~/components/rc-footer.vue";
  import unlogin from "~/components/unlogin.vue";
  import tabs from "@/components/tabs.vue";
  import '@vant/touch-emulator';
  import { userquery,postCourseId,biaomessage,userque } from "../ajax/getData";
  const settings = require("@/config");
  export default {
       middleware: 'metaTitle',
    // middleware: 'metaTitle',
  meta: {title: '首页'},
     data(){
       return{
        processinformation:[],
        catshi:[],
        userunlogin:false,
        searchBar:true,
        usermessage:[],
        catgan:[],
        doggan:[],
        dogtype:[
          {
          title: "幼犬",
            
        },
        {
          title: "成犬",
        },
        {
          title: "老年犬",
        },
        //  {
        //   title: "品种猫",
          
        // },
        // {
        //   title: "亚健康",
          
        // },
        ],
        dogshi:[],
        catlist:[],
        chufanlist:[],
        doglist:[],
        gotop: false,
        usersetting: `${settings.rbs}`,
      activeIndex: 0,
      activeInde2: 0,
activeInde3:0,
      catproduct:true,
      catfood:false,

           dogselection:[
                   {
          title: "小型犬",
            
        },
        {
          title: "中型犬",
        },
        {
          title: "大型犬",
        },
    
            ],

         selection:[
                   {
          title: "幼猫",
            
        },
        {
          title: "成猫",
        },
        {
          title: "老年猫",
        },
         {
          title: "品种猫",
          
        },
        {
          title: "亚健康",
          
        },
            ],

                     banners:[
                {src:require("../assets/image/one.jpg"),link:""},
                {src:require("../assets/image/two.jpg"),link:""},
                {src:require("../assets/image/three.jpg"),link:""},
                {src:require("../assets/image/four.jpg"),link:""},
            ],

                             doglist: [
        {
          title: "小型犬",
             catimage: require("../assets/cat.png"),
        },
        {
          title: "中型犬",
          catimage: require("../assets/four.png"),
        },
        {
          title: "大型犬",
           catimage: require("../assets/one.png"),
        },
 
      ],
                  discoun: [
        {
          title: "幼猫",
        },
        {
          title: "成猫",
        },
        {
          title: "老年猫",
        },
         {
          title: "品种猫",
           
          
        },
        {
          title: "亚健康猫",
         
          
        },
      
      ],

	discountlist: [
        {
          title: "明星猫粮",
			catimage: require("../assets/star-cat.png"),
        },
		{
		  title: "猫湿粮",
		   catimage: require("../assets/two.png"),
		},
        {
          title: "猫干粮",
          catimage: require("../assets/cat.png"),
        },
         {
          title: "明星犬粮",
            catimage: require("../assets/six.png"),
          
        },
		{
		  title: "犬湿粮",
		    catimage: require("../assets/three.png"),
		},
        {
          title: "犬干粮",
            catimage: require("../assets/one.png"),
          
        },
		{
		  title: "处方用粮",
		    catimage: require("../assets/four.png"),
		  
		}
      ],

	discounchufang: [
        {
          title: "消化道",
             catimage: require("../assets/cat.png"),
        },
        {
          title: "泌尿道",
          catimage: require("../assets/four.png"),
        },
        {
          title: "皮肤",
           catimage: require("../assets/one.png"),
        },
         {
          title: "提升活力",
            catimage: require("../assets/two.png"),
          
        },
        {
          title: "体重管理",
            catimage: require("../assets/three.png"),
          
        },
     
      ],
                    catlistvideo: [
        {
          title: "明星猫粮",
            video:require("../assets/cat/one.mp4"),
             catimage: require("../assets/cat/one.jpg"),
             detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
             price:'¥123.45',
        },
        {
          title: "猫湿粮",
         video:require("../assets/cat/two.mp4"),
          catimage: require("../assets/cat/two.jpg"),
            detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
             price:'¥123.45',
        },
        {
          title: "猫干粮",
          video:require("../assets/cat/three.mp4"),
           catimage: require("../assets/cat/three.jpg"),
             detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
             price:'¥123.45',
        },
            {
          title: "猫干粮",
          video:require("../assets/cat/four.mp4"),
           catimage: require("../assets/cat/four.jpg"),
             detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
             price:'¥123.45',
        },
  
      ],
                   fixedlist: [
        {
          title: "购物车",
             catimage: require("../assets/buy.png"),
            
        },
        {
          title: "在线客服",
          catimage: require("../assets/service.png"),
            
        },
        {
          title: "营养专家",
           catimage: require("../assets/consult.png"),
           
        },
  
      ],
             rccontair: [
        {
          title: "皇家英国短毛猫全价湿粮",
          price:'￥123.45',
          ordernum: 1,

          catimage: require("../assets/image/rc-cat.png"),
        },

        {
          title: "皇家英国短毛猫全价湿粮",
           price:'￥123.45',
          ordernum: "2",
          catimage: require("../assets/image/rc-cat.png"),
        },
           {
          title: "皇家英国短毛猫全价湿粮",
           price:'￥123.45',
          ordernum: "2",
          catimage: require("../assets/image/rc-cat.png"),
        },
         {
          title: "皇家英国短毛猫全价湿粮",
           price:'￥123.45',
          ordernum: "2",
          catimage: require("../assets/image/rc-cat.png"),
        },
            {
          title: "皇家英国短毛猫全价湿粮",
           price:'￥123.45',
          ordernum: "2",
          catimage: require("../assets/image/rc-dog.png"),
        },
             {
          title: "皇家英国短毛猫全价湿粮",
           price:'￥123.45',
          ordernum: "2",
          catimage: require("../assets/image/rc-dog.png"),
        },
        //      {
        //   title: "皇家英国短毛猫全价湿粮",
        //    price:'￥123.45',
        //   ordernum: "2",
        //   catimage: require("../assets/image/rc-dog.png"),
        // },
        //      {
        //   title: "皇家英国短毛猫全价湿粮",
        //    price:'￥123.45',
        //   ordernum: "2",
        //   catimage: require("../assets/image/rc-dog.png"),
        // },
      ],

             swiperOption: {
                loop: true,
                slidesPerView: 'auto',
                centeredSlides: true,
                speed:1000,
                spaceBetween: 30,
                //  autoplay: true,
                   loopAdditionalSlides: 100,
                pagination: {
                    el: '.swiper-pagination',
                    dynamicBullets: true
                },
            navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
                on: {
                    // slideChange() {
                    //     console.log('onSlideChangeEnd', this);
                    // },
                    // tap() {
                    //     console.log('onTap', this);
                    // }
                }
            },
       }
     },
       components:{
    Myheader,
    Myfooter,
    tabs,
    unlogin,
     },
      mounted(){
             this.usermessage= JSON.parse(localStorage.getItem("userInfo"));
             let jump = document.querySelectorAll('.d_jump')
            if(this.usermessage==null ||this.usermessage==undefined){
                  this.userunlogin=true
            }
         window.addEventListener("scroll", this.handleScroll, true);
      this.userchufang();//查询处方粮商品信息
      this.catmessage();//查询猫的信息
      this.dogmessage();//查询狗的信息
      // this.usershi();//查询对应的标签
      // this.userhot();

     },
     destroyed () {
    window.removeEventListener('scroll', this.scrollToTop); 
},
     methods:{
         userdog(item,index){
           this.dogmessage(index)
       },

     
       userlook(order){
         console.log(order);
         if(order==0){
           console.log(this.catlist);
             this.catshi=this.catlist;
         }
         if(order==1){
         this.catgan=this.catlist;

         }else if(order==2){
           this.dogshi=this.doglist
         }
         else if(order==3){
           this.doggan=this.doglist
         }
           else if(order==4){
           this.processinformation=this.chufanlist
         }
        
       },
 

       showmesg(){
       this.toTop();
       },
    handleScroll(e) 
	{
		let fixedCatbarSeperator = document.getElementById("fixed-catbar-seperator");
		let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
		if((scrolltop-fixedCatbarSeperator.offsetTop)>=0)
		{
			this.gotop = true
			this.searchBar=false
		}
		else
		{
			this.gotop = false;
			this.searchBar=true
		}
    },
     toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果 
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 400;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
         async courseId(item) {
            console.log(item);
            console.log(this.usermessage);
      let data = await postCourseId(this.productCode,1,this.usermessage.data.id,this.usermessage.data.mobile,item.picFile,item.name,item.basePrice,item.specifications);
      if(data){
        this.productlist=data;
      }
            console.log(data);
    },
     //请求猫
       async catmessage() {
      let data = await biaomessage(0);

      if(data){
        console.log(data);
        this.catlist=data;
        let userlist=[];
        userlist=data.slice(0,6);
        console.log(userlist);
        this.catshi=userlist;
        this.catgan=userlist;
      }

    },

         //请求犬
       async dogmessage(name) {
      let data = await biaomessage(1,name);
      if(data){
         let userlist=[];
        userlist=data.slice(0,6);
        this.doglist=data;
        this.doggan=userlist;
        this.dogshi=userlist;
      }
    },

       selectproduce(item,index){
         if(item.productList[0]==undefined){
           item.productlist[0].productCode=0;
         }
         if(item.productList[0]==undefined){
            item.productlist[0]=[];
         }
                  this.$router.push({
        path: "/productdetails/producted",
        query: {
          stype: 1,
          productCode:item.productList[0].productCode
        },
      });
       },

               //请求处方量信息数据
       async userchufang() {
      console.log("-----");
      let list=[];
      let data = await userque();
      if(data){
        list=data.slice(0,6);
        this.processinformation=list;
        this.chufanlist=data;
       
      }

      console.log(data);
    },

               //点击请求处方量标签信息数据
       async userquery(item) {
      console.log("-----");
      let data = await userquery(item);
      if(data){
        this.processinformation=data;
        console.log(this.processinformation);
         console.log(data);
      }

      console.log(data);
    },
       userclick(item,index){
           this.userquery(index)
       },
  
       lianxi(item,index){
             console.log(item,index);
             if(item.title=='在线客服'){
                 var option = {
    customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'}
    }
    dis_livchat(option);
    }
    if(item.title=='购物车'){
      console.log('---12314');
       this.$router.push({
        path: "/myorder/userrecord",
       
      });
    }
        if(item.title=='营养专家'){
           var option = {
    customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'}
    }
    dis_livchat(option);
    }

             },
             userbuy(item){
 let user= localStorage.getItem("userInfo");
 console.log(item);
   this.courseId(item)
         this.$router.push({
        path: "/myorder/userrecord",
       
      });
             },
       
selectGoods(item,index){
  let jump = document.querySelectorAll('.selectionswitch')
  let total = jump[index].offsetTop
  console.log(total);
   $('html body').animate({scrollTop: total}, 500);
  this.activeIndex=index;
  this.catfood=true;
  this.catproduct=false;
   console.log(item)
   if(item.title=="猫湿粮"){
     this.catproduct=false;
     this.catfood=true;
   }else if(item.title=="明星猫粮"){
          this.catproduct=true;
     this.catfood=false;

   }

},
selectGo(item,index){
  console.log(index);
this.activeInde2=index;
},
selectGoo(item,index){

this.activeInde3=index;
}
     },
   
    
  }
  </script>
<style lang="less" scoped>
@media screen and(min-width: 320px) and(max-width:768px){



}
@import url("../assets/css/global.less");
@import url("../assets/css/index.less");

</style>
