smart-admin/rc-busness/pages/index.vue
2022-01-13 18:42:55 +08:00

1534 lines
44 KiB
Vue

<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 rc-margin-y--xl">
<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>
</div>
</div>
<div class="online bold rc-md-up" v-show="catproduct"></div>
<div class="rc-full-width">
<div class="rc-lunbo rc-full-width">
<!-- <h2>明星猫粮</h2> -->
<div class="pageFullScreen" id="xxxFullScreen" v-show="catproduct" ref="mingxing">
<!-- 内容 -->
<div class="swiper-container rc-full-width rc-padding-y--md" id="swiper1">
<h2 class="rc-beta rc-text--center">{{usertitle}}</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" v-show="onemao"></div>
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" ref="usercontent" v-show="onemao">
<h2 class="rc-beta rc-text--center" >全价猫湿粮</h2>
<van-tabs @change='catclick' 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" v-show="twomao"></div>
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="twomao" ref="catgan">
<h2 class="rc-beta rc-text--center">全价猫干粮</h2>
<van-tabs @change='catclick' 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" v-show="dogshow"></div>
<div class="pageFullScreen" id="xxxFullScreen" v-show="dogshow" ref="mingxing">
<!-- 内容 -->
<div class="swiper-container rc-full-width rc-padding-y--md" id="swiper1">
<div class="oc-top">
<h2 class="rc-beta rc-text--center">{{dogtitle}}</h2>
</div>
<!-- 轮播图 -->
<swiper :options="swiperOption">
<swiper-slide class="swiper-slide" v-for="(item, key) in doglistvideo" :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" v-show="threemao"></div>
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="threemao" ref="doggshi">
<h2 class="rc-beta rc-text--center">全价犬湿粮</h2>
<van-tabs @change='userdog' class="van-tabs">
<div class="online bold rc-md-down" v-show="threemao"></div>
<van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title">
<div class="online bold" v-show="threemao"></div>
<div class="usermain">
<ul class="ul-dog usermain">
<li
v-for="(item, index) in userdoglist"
:key="index"
@click="quanshi(item, index)"
:class="activeIndex5 == 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 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" v-show="fourmao"></div>
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="fourmao" ref="dogan">
<h2 class="rc-beta rc-text--center">全价犬干粮</h2>
<van-tabs @change='userdog' class="van-tabs">
<div class="online bold" v-show="fourmao"></div>
<van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title">
<div class="usermain">
<ul class="ul-dog usermain">
<li
v-for="(item, index) in userdoglist"
:key="index"
@click="userdoghot(item, index)"
:class="activeIndex6 == 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 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" v-show="fivemao"></div>
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="fivemao" ref="chufang">
<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="">
<span>回到顶部</span>
</div>
</div>
<Myfooter v-on:litentop='showmesg'></Myfooter>
</div>
</template>
<script>
let vm=null;
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,searchchanpin } from "../ajax/getData";
const settings = require("@/config");
export default {
middleware: 'metaTitle',
// middleware: 'metaTitle',
meta: {title: '首页'},
data(){
return{
useraindex:0,
usertitle:'明星猫粮',
dogtitle:'明星狗粮',
processinformation:[],
catshi:[],
userindex:0,
userstype:'',
onemao:false,
twomao:false,
threemao:false,
dogshow:false,
fourmao:false,
fivemao:false,
sixmao:false,
stypechange:true,
userunlogin:false,
searchBar:true,
usermessage:[],
catgan:[],
userserachlist:[{}],
doggan:[],
dogtype:[
{
title: "幼犬",
},
{
title: "成犬",
},
{
title: "老年犬",
},
],
anchor:'',
dogshi:[],
catlist:[],
chufanlist:[],
doglist:[],
gotop: false,
usersetting: `${settings.rbs}`,
activeIndex: 0,
activeIndex5:0,
activeIndex6:0,
activeInde2: 0,
activeInde3:0,
catproduct:true,
catfood:false,
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:""},
],
userdoglist: [
{
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: "明星猫粮",
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
catimage: require("../assets/star-cat.png"),
price:'¥2'
},
{
title: "猫湿粮",
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
price:'¥12',
catimage: require("../assets/two.png"),
},
{
title: "猫干粮",
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
price:'¥102',
catimage: require("../assets/cat.png"),
},
{
title: "明星狗粮",
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
price:'¥112',
catimage: require("../assets/six.png"),
},
{
title: "犬湿粮",
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
price:'¥112',
catimage: require("../assets/three.png"),
},
{
title: "犬干粮",
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
price:'¥112',
catimage: require("../assets/one.png"),
},
{
title: "处方用粮",
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
price:'¥112',
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',
},
],
doglistvideo: [
{
title: "明星狗粮",
video:require("../assets/dog/one.mp4"),
catimage: require("../assets/dog/one.jpg"),
detail:'为10月龄及以上成犬量身打造的精准营养',
price:'¥123.45',
},
{
title: "狗湿粮",
video:require("../assets/dog/two.mp4"),
catimage: require("../assets/dog/two.jpg"),
detail:'为10月龄及以上英国成犬量身打造的精准营养',
price:'¥123.45',
},
{
title: "狗干粮",
video:require("../assets/dog/three.mp4"),
catimage: require("../assets/dog/three.jpg"),
detail:'为10月龄及以上英国犬成犬量身打造的精准营养',
price:'¥123.45',
},
{
title: "狗干粮",
video:require("../assets/dog/four.mp4"),
catimage: require("../assets/dog/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(Swiper) {
console.log('onSlideChangeEnd',this);
// vm.ifadroind('','',this.realIndex);
vm.useraindex=this.realIndex;
},
tap() {
console.log('onTap', this);
}
// slideChange() {
// console.log('onSlideChangeEnd', this);
// },
// tap() {
// console.log('onTap', this);
// }
}
},
}
},
components:{
Myheader,
Myfooter,
tabs,
unlogin,
// userswiper
},
created(){
vm=this;
},
watch:{
},
mounted(){
const that = this
this.ifAdoid()
// window.onresize = () => {
// setTimeout(() => {
// this.ifAdoid()
// }, 500);
// }
this.usermessage= JSON.parse(localStorage.getItem("userInfo"));
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:{
ifAdoid(item,index){
console.log(index);
this.userindex=index;
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
console.log("当前是电脑打开")
this.stypechange=false;
console.log(this.usertitle)
// let catshiid=document.querySelectorAll('.selectionswitch');
// catshiid[this.userindex].style.display='none';
// catshiid[this.userindex].style.display='none';
this.catproduct=true;
this.onemao=false;
this.twomao=false;
this.threemao=false;
this.fourmao=false;
this.fivemao=false;
this.sixmao=false;
this.dogshow=false
// console.log(catshiid);
}else{
console.log("当前是手机打开")
this.stypechange=true;
this.onemao=true;
this.twomao=true;
this.threemao=true;
this.fourmao=true;
this.fivemao=true;
this.dogshow=true;
this.catproduct=true
this.sixmao=true;
}
},
ifadroind(item,index,order){
console.log(item,index,order);
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
console.log("当前是电脑打开啊啊啊")
if(item.title=='明星猫粮'){
this.catproduct=true;
this.twomao=false;
this.threemao=false;
this.fourmao=false;
this.fivemao=false;
this.dogshow=false;
this.sixmao=false;
}
if(item.title=='猫湿粮'){
this.onemao=true;
this.dogshow=false;
console.log(this.onemao);
this.twomao=false;
this.threemao=false;
this.fourmao=false;
this.fivemao=false;
this.catproduct=false;
}if(item.title=='猫干粮'){
this.onemao=false;
this.twomao=true;
this.dogshow=false;
this.threemao=false;
this.fourmao=false;
this.chufang=false;
this.catproduct=false;
}
if(item.title=='犬干粮'){
this.onemao=false;
this.twomao=false;
this.threemao=false;
this.fourmao=true;
this.chufang=false;
this.dogshow=false;
this.catproduct=false;
}
if(item.title=='犬湿粮'){
this.onemao=false;
this.twomao=false;
this.threemao=true;
this.fourmao=false;
this.chufang=false;
this.catproduct=false;
this.dogshow=false;
}
if(item.title=='处方用粮'){
this.onemao=false;
this.twomao=false;
this.threemao=false;
this.fourmao=false;
this.fivemao=true;
this.dogshow=false;
this.catproduct=false;
}
if(item.title=='明星狗粮'){
this.onemao=false;
this.twomao=false;
this.threemao=false;
this.fourmao=false;
this.fivemao=false;
this.dogshow=true;
this.catproduct=false;
}
// this.usertitle=item.title
// this.catlistvideo[order]=item;
// this.catproduct=true;
}else{
this.catfood=true;
// this.catproduct=false;
let userindex=index
console.log(item,index);
let mingxin=document.querySelector('.pageFullScreen');
let dogtop=document.querySelector('.oc-top');
console.log(dogtop);
console.log(mingxin.offsetTop);
if(item.title=='犬湿粮'||item.title=='犬干粮'||item.title=='处方用粮'){
userindex=userindex-2
}else{
userindex=userindex-1
}
if(item.title=='明星猫粮'){
mingxin.scrollIntoView(true);
}else{
let catshiid=document.querySelectorAll('.selectionswitch');
catshiid[userindex].scrollIntoView(true);
}
if(item.title=='明星狗粮')
dogtop.scrollIntoView(true);
// if(item.title=="猫湿粮"){
// this.catproduct=false;
// this.catfood=true;
// }else if(item.title=="明星猫粮"){
// this.catproduct=true;
// this.catfood=false;
// }
console.log("当前是手机打开")
}
},
userdog(item,index){
this.userstype=1;
let petType={
petType:1,
name:index,
}
for(let i =0;i<this.userserachlist.length;i++){
if(!this.userserachlist.includes(petType)){
this.userserachlist.push(petType)
}
}
this.dogmessage(this.userserachlist)
},
userlook(order){
if(order==0){
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) {
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;
}
},
//请求猫
async catmessage(stype) {
let data=[];
if(stype==undefined||stype==null){
data = await biaomessage(0);
}else{
data = await biaomessage(this.userserachlist);
}
if(data){
this.catlist=data;
let userlist=[];
userlist=data.slice(0,6);
this.catshi=userlist;
this.catgan=userlist;
}
},
//请求犬
async dogmessage(stype) {
let data=[];
if(stype==undefined||stype==null){
data = await biaomessage(1);
}else{
data = await biaomessage(this.userserachlist);
}
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() {
let list=[];
let data = await userque();
if(data){
list=data.slice(0,6);
this.processinformation=list;
this.chufanlist=data;
}
},
//点击请求处方量标签信息数据
async userquery(item) {
let data = await userquery(item);
if(data){
this.processinformation=data;
}
},
//处方用粮筛选
userclick(item,index){
this.userquery(index)
},
//全价猫湿粮筛选
catclick(item,index){
this.userstype=0;
let petType={
petType:0,
name:index,
}
for(let i =0;i<this.userserachlist.length;i++){
if(!this.userserachlist.includes(petType)){
this.userserachlist.push(petType)
}
}
this.catmessage(this.userserachlist)
},
lianxi(item,index){
if(item.title=='在线客服'){
var option = {
customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'}
}
dis_livchat(option);
}
if(item.title=='购物车'){
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");
this.courseId(item)
this.$router.push({
path: "/myorder/userrecord",
});
},
selectGoods(item,index){
console.log(item,index);
this.activeIndex=index;
console.log(item.title);
this.ifadroind(item,index,this.useraindex)
// this.ifAdoid(item,index);
},
quanshi(item,index){
console.log(item,index);
this.activeIndex5=index
console.log(this.activeIndex5);
},
userdoghot(item,index){
this.activeIndex6=index
},
selectGo(item,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>