mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-11-21 18:06:52 +08:00
2058 lines
63 KiB
Vue
2058 lines
63 KiB
Vue
<template>
|
||
<div>
|
||
<Myheader></Myheader>
|
||
<div class="rc-top"></div>
|
||
<!-- Suppose in header end -->
|
||
<div class="ts-banner-swiper-container">
|
||
<swiper :options="headerSwiperOption">
|
||
<swiper-slide>
|
||
<a href="#" target="_blank">
|
||
<picture>
|
||
<source
|
||
media="(max-width: 768px)"
|
||
srcset="/images/banner/pc-weixin.png"
|
||
/>
|
||
<source
|
||
media="(min-width: 769px)"
|
||
srcset="/images/banner/weixin.png"
|
||
/>
|
||
<img src="/images/banner/pc-weixin.png" />
|
||
</picture>
|
||
</a>
|
||
</swiper-slide>
|
||
|
||
<swiper-slide>
|
||
<a href="#" target="_blank">
|
||
<picture>
|
||
<source
|
||
media="(max-width: 768px)"
|
||
srcset="/images/banner/two.jpg"
|
||
/>
|
||
<source
|
||
media="(min-width: 769px)"
|
||
srcset="/images/banner/pc-banner2.png"
|
||
/>
|
||
<img src="/images/banner/two.jpg" />
|
||
</picture>
|
||
</a>
|
||
</swiper-slide>
|
||
<swiper-slide>
|
||
<a target="_blank" @click="diaoqi">
|
||
<picture>
|
||
<source
|
||
media="(max-width: 768px)"
|
||
srcset="/images/banner/three.jpg"
|
||
/>
|
||
<source
|
||
media="(min-width: 769px)"
|
||
srcset="/images/banner/pc-banner4.png"
|
||
/>
|
||
<img src="/images/banner/three.jpg" />
|
||
</picture>
|
||
</a>
|
||
</swiper-slide>
|
||
|
||
<!-- <swiper-slide>
|
||
<a href="/" target="_blank">
|
||
<picture>
|
||
<source media="(max-width: 768px)" srcset="/images/banner/four.jpg">
|
||
<source media="(min-width: 769px)" srcset="/images/banner/pc-banner4.png">
|
||
<img src="/images/banner/four.jpg">
|
||
</picture>
|
||
</a>
|
||
</swiper-slide> -->
|
||
</swiper>
|
||
<div
|
||
id="homeBannerSwiperPagnation"
|
||
class="swiper-pagination ts-carousel-indicator center"
|
||
></div>
|
||
</div>
|
||
|
||
<div class="online bold rc-md-down"></div>
|
||
<div id="fixed-catbar-seperator"></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--md">
|
||
<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 ts-position-identifier"
|
||
data-rel="明星猫粮"
|
||
>
|
||
<!-- <h2>明星猫粮</h2> -->
|
||
<div
|
||
class="pageFullScreen"
|
||
id="xxxFullScreen"
|
||
v-show="catproduct"
|
||
ref="mingxing"
|
||
>
|
||
<!-- 内容 -->
|
||
<div
|
||
class="rc-full-width rc-padding-y--md"
|
||
id="swiper1"
|
||
:style="usermargin"
|
||
>
|
||
<h2 class="rc-beta rc-text--center">{{ usertitle }}</h2>
|
||
<!-- 轮播图 -->
|
||
<div class="ts-carousel-container">
|
||
<swiper
|
||
class="rc-padding-bottom--md"
|
||
:options="catStarProductswiperOption"
|
||
>
|
||
<swiper-slide
|
||
v-for="(item, index) in catlistvideo"
|
||
:key="index"
|
||
>
|
||
<div class="rc-video">
|
||
<div class="uservideo">
|
||
<video controls="" :poster="item.catimage" preload="none">
|
||
<source :src="item.video" type="video/mp4" />
|
||
</video>
|
||
</div>
|
||
|
||
<div class="rc-right">
|
||
<img :src="item.productimage" alt="" />
|
||
<span>{{ item.title }}</span>
|
||
<p>{{ item.detail }}</p>
|
||
<em>{{ item.price }}</em>
|
||
<strong
|
||
class="ts-standard-btn ts-standard-btn--two center"
|
||
@click="selectproduce(item, index)"
|
||
>立即购买</strong
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="sw-center">
|
||
<div class="rc-click">
|
||
<div class="uservideo" @click="playMobileVideo(item)">
|
||
<img :src="item.catimage" />
|
||
</div>
|
||
<div
|
||
class="click-zone"
|
||
@click="selectproduce(item, index)"
|
||
>
|
||
<img :src="item.productimage" alt="" />
|
||
<span>{{ item.title }}</span>
|
||
<p>{{ item.detail }}</p>
|
||
<em>{{ item.price }}</em>
|
||
</div>
|
||
</div>
|
||
<div class="rc-full-width rc-margin-y--md">
|
||
<i
|
||
@click="selectproduce(item, index)"
|
||
class="ts-standard-btn ts-standard-btn--two center"
|
||
>立即购买</i
|
||
>
|
||
</div>
|
||
</div>
|
||
</swiper-slide>
|
||
</swiper>
|
||
<div
|
||
id="catStarSwiperPagnation"
|
||
class="swiper-pagination ts-carousel-indicator center"
|
||
></div>
|
||
</div>
|
||
</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 ts-position-identifier"
|
||
data-rel="猫湿粮"
|
||
>
|
||
全价猫湿粮
|
||
</h2>
|
||
<van-tabs
|
||
@click="catclickShi"
|
||
class="van-tabs"
|
||
v-if="onemao"
|
||
v-model="maoshiCurIndex"
|
||
>
|
||
<van-tab
|
||
v-for="(item, index) in discoun"
|
||
:key="index"
|
||
:title="item.title"
|
||
>
|
||
<div class="rc-contair">
|
||
<div class="ts-no-data" v-if="!catshi.length">
|
||
暂未发现相关记录
|
||
</div>
|
||
<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>￥{{ item.ecPrice }}</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/?stype=0&tagStatus=2`"
|
||
>
|
||
<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="">
|
||
<div class="ts-no-data" v-if="!rccontair.length">
|
||
暂未发现相关记录
|
||
</div>
|
||
<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>￥{{ item.ecPrice }}</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/?stype=0&tagStatus=2`"
|
||
>
|
||
<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 ts-position-identifier"
|
||
data-rel="猫干粮"
|
||
>
|
||
全价猫干粮
|
||
</h2>
|
||
<van-tabs
|
||
@click="catclickGan"
|
||
class="van-tabs"
|
||
v-if="twomao"
|
||
v-model="maoganCurIndex"
|
||
>
|
||
<van-tab
|
||
v-for="(item, index) in discoun"
|
||
:key="index"
|
||
:title="item.title"
|
||
>
|
||
<div class="rc-contair">
|
||
<div class="ts-no-data" v-if="!catgan.length">
|
||
暂未发现相关记录
|
||
</div>
|
||
<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>￥{{ item.ecPrice }}</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/?stype=0&tagStatus=1`"
|
||
>
|
||
<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">
|
||
<div class="ts-no-data" v-if="!rccontair.length">
|
||
暂未发现相关记录
|
||
</div>
|
||
<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>￥{{ item.ecPrice }}</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/?stype=0&tagStatus=1`"
|
||
>
|
||
<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="swiper2"
|
||
>
|
||
<div class="oc-top">
|
||
<h2
|
||
class="rc-beta rc-text--center ts-position-identifier"
|
||
data-rel="明星犬粮"
|
||
>
|
||
{{ dogtitle }}
|
||
</h2>
|
||
</div>
|
||
<!-- 轮播图 -->
|
||
<div class="ts-carousel-container">
|
||
<swiper
|
||
class="rc-padding-bottom--md"
|
||
:options="dogStarProductswiperOption"
|
||
v-if="dogshow"
|
||
>
|
||
<swiper-slide v-for="(item, key) in doglistvideo" :key="key">
|
||
<div class="rc-video">
|
||
<div class="uservideo">
|
||
<video controls="" :poster="item.catimage" preload="none">
|
||
<source :src="item.video" type="video/mp4" />
|
||
</video>
|
||
</div>
|
||
|
||
<div class="rc-right">
|
||
<img :src="item.productimage" alt="" />
|
||
<span>{{ item.title }}</span>
|
||
<p>{{ item.detail }}</p>
|
||
<em>{{ item.price }}</em>
|
||
<strong
|
||
class="ts-standard-btn ts-standard-btn--two center"
|
||
@click="selectproduce(item, index)"
|
||
>立即购买</strong
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="sw-center">
|
||
<div class="rc-click">
|
||
<div class="uservideo" @click="playMobileVideo(item)">
|
||
<img :src="item.catimage" />
|
||
</div>
|
||
<div
|
||
class="click-zone"
|
||
@click="selectproduce(item, index)"
|
||
>
|
||
<img :src="item.productimage" alt="" />
|
||
<span>{{ item.title }}</span>
|
||
<p>{{ item.detail }}</p>
|
||
<em>{{ item.price }}</em>
|
||
</div>
|
||
</div>
|
||
<div class="rc-full-width rc-margin-y--md">
|
||
<i
|
||
@click="selectproduce(item, index)"
|
||
class="ts-standard-btn ts-standard-btn--two center"
|
||
>立即购买</i
|
||
>
|
||
</div>
|
||
</div>
|
||
</swiper-slide>
|
||
</swiper>
|
||
<div
|
||
id="dogStarSwiperPagnation"
|
||
class="swiper-pagination ts-carousel-indicator center"
|
||
></div>
|
||
</div>
|
||
</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 ts-position-identifier"
|
||
data-rel="犬湿粮"
|
||
>
|
||
全价犬湿粮
|
||
</h2>
|
||
<van-tabs
|
||
@click="userdogShi"
|
||
class="van-tabs"
|
||
v-if="threemao"
|
||
v-model="quanshiCurIndex"
|
||
>
|
||
<van-tab
|
||
v-for="(item, index) in dogtype"
|
||
:key="index"
|
||
:title="item.title"
|
||
>
|
||
<div class="online bold rc-md-up" v-show="threemao"></div>
|
||
<div class="usermain">
|
||
<ul class="ul-dog usermain">
|
||
<li
|
||
v-for="(dogListitem, dogListIndex) in userdoglist"
|
||
:key="dogListIndex"
|
||
@click="quanshi(dogListitem, dogListIndex)"
|
||
:class="
|
||
activeIndex5 == dogListIndex ? 'active' : 'unactive'
|
||
"
|
||
>
|
||
<img :src="dogListitem.catimage" alt="" />
|
||
<span>{{ dogListitem.title }}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="rc-contair">
|
||
<div class="ts-no-data" v-if="!dogshi.length">
|
||
暂未发现相关记录
|
||
</div>
|
||
<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>￥{{ item.ecPrice }}</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/?stype=1&tagStatus=2`"
|
||
>
|
||
<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">
|
||
<div class="ts-no-data" v-if="!rccontair.length">
|
||
暂未发现相关记录
|
||
</div>
|
||
<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>￥{{ item.ecPrice }}</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/?stype=1&tagStatus=2`"
|
||
>
|
||
<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 ts-position-identifier"
|
||
data-rel="犬干粮"
|
||
>
|
||
全价犬干粮
|
||
</h2>
|
||
<van-tabs
|
||
@click="userdogGan"
|
||
class="van-tabs"
|
||
v-if="fourmao"
|
||
v-model="quanganCurIndex"
|
||
>
|
||
<div class="online bold rc-md-up" 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="(userDogListItem, userDogListIndex) in userdoglist"
|
||
:key="userDogListIndex"
|
||
@click="userdoghot(userDogListItem, userDogListIndex)"
|
||
:class="
|
||
activeIndex6 == userDogListIndex ? 'active' : 'unactive'
|
||
"
|
||
>
|
||
<img :src="userDogListItem.catimage" alt="" />
|
||
<span>{{ userDogListItem.title }}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="rc-contair">
|
||
<div class="ts-no-data" v-if="!doggan.length">
|
||
暂未发现相关记录
|
||
</div>
|
||
<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>￥{{ item.ecPrice }}</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/?stype=1&tagStatus=1`"
|
||
>
|
||
<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">
|
||
<div class="ts-no-data" v-if="!rccontair.length">
|
||
暂未发现相关记录
|
||
</div>
|
||
<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>￥{{ item.ecPrice }}</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/?stype=1&tagStatus=1`"
|
||
>
|
||
<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 ts-position-identifier"
|
||
data-rel="处方用粮"
|
||
>
|
||
处方用粮
|
||
</h2>
|
||
<van-tabs @click="userclick" class="van-tabs" v-if="fivemao">
|
||
<van-tab
|
||
v-for="(item, index) in discounchufang"
|
||
:key="index"
|
||
:title="item.title"
|
||
>
|
||
<div class="rc-contair">
|
||
<div class="ts-no-data" v-if="!processinformation.length">
|
||
暂未发现相关记录
|
||
</div>
|
||
<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="`${item.picture}`" />
|
||
</div>
|
||
</div>
|
||
<div class="rc-column">
|
||
<div class="rc-click" @click="selectproduce(item, index)">
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
|
||
<nuxt-link
|
||
:to="`/productdetails/productlist/?stype=1&rxgoods=1`"
|
||
>
|
||
<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">
|
||
<div class="ts-no-data" v-if="!rccontair.length">
|
||
暂未发现相关记录
|
||
</div>
|
||
<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
|
||
class="ts-mask ts-mobile-player-container"
|
||
v-show="mobileVideoPlaying"
|
||
>
|
||
<div class="ts-mask-bg"></div>
|
||
<div class="ts-mask-close" @click="closeMobileVideo"></div>
|
||
<video controls="controls" ref="mobile-video-player"></video>
|
||
</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> -->
|
||
|
||
<FixRight></FixRight>
|
||
<div v-if="!dataLoaded" class="ts-mask">
|
||
<div class="ts-mask-bg"></div>
|
||
<div class="userloding"></div>
|
||
<span>数据加载中</span>
|
||
</div>
|
||
<Myfooter></Myfooter>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
let vm = null;
|
||
import Myheader from "~/components/header.vue";
|
||
import FixRight from "~/components/fixed-right.vue";
|
||
import Myfooter from "~/components/rc-footer.vue";
|
||
import unlogin from "~/components/unlogin.vue";
|
||
import { mapMutations } from "vuex";
|
||
import {
|
||
userquery,
|
||
postCourseId,
|
||
biaomessage,
|
||
userque,
|
||
searchchanpin,
|
||
} from "../ajax/getData";
|
||
const settings = require("@/config");
|
||
export default {
|
||
middleware: "metaTitle",
|
||
// middleware: 'metaTitle',
|
||
meta: { title: "首页" },
|
||
data() {
|
||
return {
|
||
fixedHeader: false,
|
||
dataLoaded: true,
|
||
usermargin: { marginTop: "0" },
|
||
useraindex: 0,
|
||
indexacindex:0,
|
||
mobileVideoPlaying: false,
|
||
usertitle: "明星猫粮",
|
||
dogtitle: "明星犬粮",
|
||
processinformation: [],
|
||
catshi: [],
|
||
userindex: 0,
|
||
userstype: "",
|
||
usertop: true,
|
||
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: "成年",
|
||
},
|
||
{
|
||
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: {
|
||
mobile: [
|
||
{ src: "/images/banner/one.jpg", link: "" },
|
||
{ src: "/images/banner/two.jpg", link: "" },
|
||
{ src: "/images/banner/three.jpg", link: "" },
|
||
{ src: "/images/banner/four.jpg", link: "" },
|
||
],
|
||
pc: [
|
||
{ src: "/images/banner/pc-banner1.png", link: "" },
|
||
{ src: "/images/banner/pc-banner2.png", link: "" },
|
||
{ src: "/images/banner/pc-banner3.png", link: "" },
|
||
{ src: "/images/banner/pc-banner4.png", link: "" },
|
||
],
|
||
},
|
||
showingBanners: [],
|
||
maoganCurIndex: 0,
|
||
maoshiCurIndex: 0,
|
||
quanshiCurIndex: 0,
|
||
quanganCurIndex: 0,
|
||
userdoglist: [
|
||
{
|
||
title: "小型犬",
|
||
catimage: "/images/dog/small.png",
|
||
},
|
||
{
|
||
title: "中型犬",
|
||
catimage: "/images/dog/medium.png",
|
||
},
|
||
{
|
||
title: "大型犬",
|
||
catimage: "/images/dog/big.png",
|
||
},
|
||
],
|
||
discoun: [
|
||
{
|
||
title: "<4月龄",
|
||
},
|
||
{
|
||
title: "4-12月龄",
|
||
},
|
||
{
|
||
title: "1-7岁",
|
||
},
|
||
{
|
||
title: ">7岁",
|
||
},
|
||
],
|
||
|
||
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: [
|
||
|
||
],
|
||
|
||
doglistvideo: [
|
||
|
||
],
|
||
rccontair: [
|
||
{
|
||
title: "",
|
||
price: "",
|
||
ordernum: 1,
|
||
catimage: "",
|
||
},
|
||
],
|
||
|
||
headerSwiperOption: {
|
||
loop: true,
|
||
slidesPerView: "auto",
|
||
centeredSlides: true,
|
||
speed: 1000,
|
||
spaceBetween: 0,
|
||
autoplay: {
|
||
delay: 3000,
|
||
stopOnLastSlide: false,
|
||
disableOnInteraction: false,
|
||
},
|
||
pagination: {
|
||
el: "#homeBannerSwiperPagnation",
|
||
clickable: true,
|
||
},
|
||
paginationClickable: true,
|
||
loopAdditionalSlides: 100,
|
||
navigation: {
|
||
nextEl: ".swiper-button-next",
|
||
prevEl: ".swiper-button-prev",
|
||
},
|
||
on: {
|
||
slideChange(Swiper) {1
|
||
// console.log(this.realIndex);
|
||
},
|
||
tap(event) {
|
||
console.log(this.realIndex);
|
||
},
|
||
click(event) {
|
||
console.log(this.realIndex);
|
||
console.log(this.realIndex);
|
||
vm.indexacindex=this.realIndex;
|
||
// if (this.realIndex == 0) {
|
||
// console.log("0");
|
||
// // window.location.href ='https://blog.csdn.net/smallnetvisitor/article/details/84817905';
|
||
// } else if (this.realIndex == 1) {
|
||
// // window.location.href ='https://blog.csdn.net/smallnetvisitor/article/details/84817905';
|
||
// console.log("1");
|
||
// }
|
||
if (this.realIndex == 2) {
|
||
console.log(vm.userdata.data.id)
|
||
// setTimeout(() => {
|
||
// var option = {
|
||
// customer: {
|
||
// id: "",
|
||
// name: "",
|
||
// email: "",
|
||
// mobile: "",
|
||
// memberId: vm.userdata.data.id,
|
||
// },
|
||
// };
|
||
// dis_livchat(option);
|
||
// }, 500);
|
||
|
||
}
|
||
},
|
||
},
|
||
},
|
||
catStarProductswiperOption: {
|
||
//loop: true,
|
||
slidesPerView: "auto",
|
||
centeredSlides: true,
|
||
speed: 1000,
|
||
spaceBetween: 30,
|
||
// autoplay: true,
|
||
loopAdditionalSlides: 100,
|
||
pagination: {
|
||
el: "#catStarSwiperPagnation",
|
||
clickable: true,
|
||
},
|
||
navigation: {
|
||
nextEl: ".swiper-button-next",
|
||
prevEl: ".swiper-button-prev",
|
||
},
|
||
on: {
|
||
slideChange(Swiper) {
|
||
vm.useraindex = this.realIndex;
|
||
},
|
||
click(Swiper) {},
|
||
tap() {},
|
||
},
|
||
},
|
||
dogStarProductswiperOption: {
|
||
//loop: true,
|
||
slidesPerView: "auto",
|
||
centeredSlides: true,
|
||
speed: 1000,
|
||
spaceBetween: 30,
|
||
// autoplay: true,
|
||
loopAdditionalSlides: 100,
|
||
pagination: {
|
||
el: "#dogStarSwiperPagnation",
|
||
clickable: true,
|
||
},
|
||
navigation: {
|
||
nextEl: ".swiper-button-next",
|
||
prevEl: ".swiper-button-prev",
|
||
},
|
||
on: {
|
||
slideChange(Swiper) {},
|
||
tap() {
|
||
console.log(this.realIndex);
|
||
},
|
||
click() {
|
||
console.log(this.realIndex);
|
||
},
|
||
},
|
||
},
|
||
};
|
||
},
|
||
components: {
|
||
Myheader,
|
||
Myfooter,
|
||
unlogin,
|
||
FixRight,
|
||
// userswiper
|
||
},
|
||
created() {
|
||
vm = this;
|
||
let curEnv = process.env.NODE_ENV;
|
||
let envVariable = {
|
||
'development':{
|
||
catlistvideo:[
|
||
{
|
||
title: "主食级猫湿粮",
|
||
video: "/images/cat/one.mp4",
|
||
catimage: "/images/cat/one.jpg",
|
||
productimage: "/images/cat/star-1.png",
|
||
detail: "为10柔软细腻慕斯 适合离乳期幼猫舔食",
|
||
price: "¥372",
|
||
productList: [
|
||
{
|
||
productCode: "80240008F24",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "幼猫成长专属",
|
||
video: "/images/cat/two.mp4",
|
||
catimage: "/images/cat/two.jpg",
|
||
productimage: "/images/cat/star-2.png",
|
||
detail: "支持幼猫自身保护力 为快速生长提供足够能量",
|
||
price: "¥33",
|
||
productList: [
|
||
{
|
||
productCode: "20030040",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "室内成猫专属",
|
||
video: "/images/cat/three.mp4",
|
||
catimage: "/images/cat/three.jpg",
|
||
productimage: "/images/cat/star-3.png",
|
||
detail: "高易消化蛋白 减少粪便量和异味",
|
||
price: "¥157",
|
||
productList: [
|
||
{
|
||
productCode: "21100200",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "英短成猫专属",
|
||
video: "/images/cat/four.mp4",
|
||
catimage: "/images/cat/four.jpg",
|
||
productimage: "/images/cat/star-4.png",
|
||
detail: "增强肌肉质量 支持骨骼与关节健康",
|
||
price: "¥402",
|
||
productList: [
|
||
{
|
||
productCode: "23040450",
|
||
},
|
||
],
|
||
}
|
||
],
|
||
doglistvideo: [
|
||
{
|
||
title: "主食级狗湿粮",
|
||
video: "/images/dog/one.mp4",
|
||
catimage: "/images/dog/one.jpg",
|
||
productimage: "/images/dog/star-1.png",
|
||
detail: "柔软细腻慕斯 适合离乳期幼犬舔食",
|
||
price: "¥359",
|
||
productList: [
|
||
{
|
||
productCode: "81220020F12",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "贵宾成犬专属",
|
||
video: "/images/dog/two.mp4",
|
||
catimage: "/images/dog/two.jpg",
|
||
productimage: "/images/dog/star-2.png",
|
||
detail: "护肤靓毛 理想体态",
|
||
price: "¥562",
|
||
productList: [
|
||
{
|
||
productCode: "14200300",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "小型犬成犬专属",
|
||
video: "/images/dog/three.mp4",
|
||
catimage: "/images/dog/three.jpg",
|
||
productimage: "/images/dog/star-3.png",
|
||
detail: "亮泽被毛 呵护牙齿",
|
||
price: "¥57",
|
||
productList: [
|
||
{
|
||
productCode: "16020080",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "离乳期全价奶糕",
|
||
video: "/images/dog/four.mp4",
|
||
catimage: "/images/dog/four.jpg",
|
||
productimage: "/images/dog/star-4.png",
|
||
detail: "高易再水合颗粒 帮助增强保护健康成长",
|
||
price: "¥263",
|
||
productList: [
|
||
{
|
||
productCode: "17220400",
|
||
},
|
||
],
|
||
},
|
||
]
|
||
},
|
||
'production':{}
|
||
}
|
||
this.catlistvideo = envVariable[curEnv].catlistvideo;
|
||
this.doglistvideo = envVariable[curEnv].doglistvideo;
|
||
},
|
||
watch: {},
|
||
mounted() {
|
||
console.log(process.env.NODE_ENV,' mounted');
|
||
this.checkIsLogin();
|
||
this.userdata = this.$store.state.userInfo;
|
||
console.log(this.userdata);
|
||
const that = this;
|
||
|
||
this.ifAdoid();
|
||
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.catclickGan();
|
||
this.catclickShi();
|
||
|
||
this.dogmessage(); //查询狗的信息
|
||
this.userdogShi();
|
||
this.userdogGan();
|
||
},
|
||
destroyed() {
|
||
window.removeEventListener("scroll", this.scrollToTop);
|
||
},
|
||
methods: {
|
||
diaoqi(){
|
||
setTimeout(() => {
|
||
var option = {
|
||
customer: {
|
||
id: "",
|
||
name: "",
|
||
email: "",
|
||
mobile: "",
|
||
memberId: vm.userdata.data.id,
|
||
},
|
||
};
|
||
dis_livchat(option);
|
||
_hmt.push([
|
||
"_trackCustomEvent",
|
||
"sol_consult",
|
||
{
|
||
"page":this.$route.path,
|
||
"shop_head_banner": 1,
|
||
}
|
||
])
|
||
}, 500);
|
||
},
|
||
...mapMutations(["checkIsLogin"]),
|
||
playMobileVideo(item) {
|
||
let videoPath = item.video;
|
||
let player = this.$refs["mobile-video-player"];
|
||
let _self = this;
|
||
player.src = videoPath;
|
||
player.play();
|
||
this.mobileVideoPlaying = true;
|
||
},
|
||
closeMobileVideo() {
|
||
this.mobileVideoPlaying = false;
|
||
let player = this.$refs["mobile-video-player"];
|
||
player.pause();
|
||
},
|
||
|
||
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)
|
||
this.usermargin = {
|
||
marginTop: "0",
|
||
};
|
||
(this.usertop = false), (this.catproduct = true);
|
||
this.onemao = false;
|
||
this.twomao = false;
|
||
this.threemao = false;
|
||
this.fourmao = false;
|
||
this.fivemao = false;
|
||
this.sixmao = false;
|
||
this.dogshow = false;
|
||
this.showingBanners = this.banners.pc;
|
||
} else {
|
||
console.log("当前是手机打开");
|
||
this.showingBanners = this.banners.mobile;
|
||
this.stypechange = true;
|
||
this.onemao = true;
|
||
this.twomao = true;
|
||
this.threemao = true;
|
||
(this.usertop = 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;
|
||
|
||
this.onemao = 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);
|
||
|
||
let positionIdentifier = document.querySelectorAll(
|
||
".ts-position-identifier"
|
||
);
|
||
let tmpTitle = "";
|
||
let scrollToTop = 0;
|
||
let _self = this;
|
||
let transition = 230;
|
||
positionIdentifier.forEach(function (ele, index) {
|
||
tmpTitle = ele.getAttribute("data-rel");
|
||
if (item.title == tmpTitle) {
|
||
if (_self.fixedHeader && item.title != "明星猫粮") {
|
||
transition += 130;
|
||
}
|
||
scrollToTop =
|
||
_self.heightToTop(positionIdentifier[index]) - transition;
|
||
//positionIdentifier[index].scrollIntoView(true);
|
||
window.scrollTo({
|
||
top: scrollToTop,
|
||
behavior: "smooth",
|
||
});
|
||
//document.body.scrollTop = oPos;
|
||
}
|
||
});
|
||
/*
|
||
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("当前是手机打开")
|
||
*/
|
||
}
|
||
},
|
||
heightToTop(ele) {
|
||
//ele为指定跳转到该位置的DOM节点
|
||
let root = document.body;
|
||
let height = 0;
|
||
do {
|
||
height += ele.offsetTop;
|
||
ele = ele.offsetParent;
|
||
} while (ele !== root);
|
||
return height;
|
||
},
|
||
userdogShi() {
|
||
this.activeIndex5 = this.activeIndex5 ? this.activeIndex5 : 0;
|
||
let apiDogSize = this.userdoglist[this.activeIndex5].title;
|
||
let apiDogAgeType = this.dogtype[this.quanshiCurIndex].title;
|
||
|
||
this.userstype = 1;
|
||
let petType = {
|
||
petType: 1,
|
||
tagStatus: 2,
|
||
tagUsedAge: apiDogAgeType,
|
||
name: apiDogSize,
|
||
};
|
||
for (let i = 0; i < this.userserachlist.length; i++) {
|
||
if (!this.userserachlist.includes(petType)) {
|
||
this.userserachlist.push(petType);
|
||
}
|
||
}
|
||
//TODO how to combine "apiName" here?
|
||
this.dogmessage(this.userserachlist, "Shi");
|
||
},
|
||
userdogGan() {
|
||
this.activeIndex6 = this.activeIndex6 ? this.activeIndex6 : 0;
|
||
let apiDogSize = this.userdoglist[this.activeIndex6].title;
|
||
let apiDogAgeType = this.dogtype[this.quanganCurIndex].title;
|
||
|
||
this.userstype = 1;
|
||
let petType = {
|
||
petType: 1,
|
||
tagStatus: 1,
|
||
tagUsedAge: apiDogAgeType,
|
||
name: apiDogSize,
|
||
};
|
||
for (let i = 0; i < this.userserachlist.length; i++) {
|
||
if (!this.userserachlist.includes(petType)) {
|
||
this.userserachlist.push(petType);
|
||
}
|
||
}
|
||
//TODO how to combine "apiName" here?
|
||
this.dogmessage(this.userserachlist, "Gan");
|
||
},
|
||
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;
|
||
}
|
||
},
|
||
handleScroll(e) {
|
||
let fixedCatbarSeperator = document.getElementById(
|
||
"fixed-catbar-seperator"
|
||
);
|
||
if (!fixedCatbarSeperator) {
|
||
return;
|
||
}
|
||
let scrolltop =
|
||
document.documentElement.scrollTop || document.body.scrollTop;
|
||
if (scrolltop - fixedCatbarSeperator.offsetTop > 0) {
|
||
this.fixedHeader = false;
|
||
this.gotop = true;
|
||
this.searchBar = false;
|
||
} else {
|
||
this.fixedHeader = true;
|
||
this.gotop = false;
|
||
this.searchBar = true;
|
||
}
|
||
console.log(this.searchBar);
|
||
if (this.searchBar == false && this.usertop == true) {
|
||
this.usermargin = { marginTop: "290px" };
|
||
} else {
|
||
this.usermargin = { marginTop: "0px" };
|
||
}
|
||
},
|
||
async courseId(item) {
|
||
this.dataLoaded = false;
|
||
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;
|
||
this.dataLoaded = true;
|
||
}
|
||
},
|
||
//请求猫
|
||
async catmessage(stype, dataType) {
|
||
this.dataLoaded = false;
|
||
let data = [];
|
||
if (stype == undefined || stype == null) {
|
||
data = await biaomessage(0, "", 1, 12);
|
||
} else {
|
||
data = await biaomessage(this.userserachlist, "", 1, 12);
|
||
}
|
||
if (data) {
|
||
let userlist = [];
|
||
//userlist=data.slice(0,6);
|
||
if (dataType) {
|
||
if (dataType == "Shi") this.catshi = data;
|
||
else if (dataType == "Gan") this.catgan = data;
|
||
} else {
|
||
this.catlist = data;
|
||
//this.catgan=userlist;
|
||
//this.catshi=userlist;
|
||
}
|
||
this.dataLoaded = true;
|
||
}
|
||
},
|
||
|
||
//请求犬
|
||
async dogmessage(stype, dataType) {
|
||
this.dataLoaded = false;
|
||
let data = [];
|
||
if (stype == undefined || stype == null) {
|
||
data = await biaomessage(1, "", 1, 6);
|
||
} else {
|
||
data = await biaomessage(this.userserachlist, "", 1, 6);
|
||
}
|
||
if (data) {
|
||
let userlist = [];
|
||
//userlist=data.slice(0,6);
|
||
if (dataType) {
|
||
if (dataType == "Shi") this.dogshi = data;
|
||
else if (dataType == "Gan") this.doggan = data;
|
||
} else {
|
||
this.doglist = data;
|
||
//this.doggan=userlist;
|
||
//this.dogshi=userlist;
|
||
}
|
||
this.dataLoaded = true;
|
||
}
|
||
},
|
||
|
||
selectproduce(item) {
|
||
let isRxGoods = false;
|
||
let productCode = [];
|
||
let mainProductCode = item.productCode;
|
||
if (!item.ecPrice && !item.price) {
|
||
isRxGoods = 1;
|
||
productCode = [item.productCode];
|
||
} else {
|
||
for (let i of item.productList) {
|
||
productCode.push(i.productCode);
|
||
}
|
||
}
|
||
this.$router.push({
|
||
path: "/productdetails/producted",
|
||
query: {
|
||
stype: 1,
|
||
isRxGoods: isRxGoods,
|
||
mainProductCode: mainProductCode,
|
||
productCode: productCode.join(","),
|
||
},
|
||
});
|
||
},
|
||
|
||
//请求处方量信息数据
|
||
async userchufang(item) {
|
||
if (!item) item = this.discounchufang[0].title;
|
||
this.dataLoaded = false;
|
||
let list = [];
|
||
let data = await userque(item, 1, 8);
|
||
if (data) {
|
||
list = data.slice(0, 8);
|
||
this.processinformation = list;
|
||
this.chufanlist = data;
|
||
this.dataLoaded = true;
|
||
}
|
||
},
|
||
//点击请求处方量标签信息数据
|
||
async userquery(item) {
|
||
this.dataLoaded = false;
|
||
let list = [];
|
||
let data = await userquery(item);
|
||
if (data) {
|
||
list = data.slice(0, 8);
|
||
this.processinformation = list;
|
||
this.dataLoaded = true;
|
||
}
|
||
},
|
||
//处方用粮筛选
|
||
userclick(item, index) {
|
||
this.userchufang(index);
|
||
},
|
||
//全价猫干粮筛选
|
||
catclickGan() {
|
||
this.userstype = 0;
|
||
this.maoganCurIndex = this.maoganCurIndex ? this.maoganCurIndex : 0;
|
||
let apiCatAgeType = this.discoun[this.maoshiCurIndex].title;
|
||
let petType = {
|
||
petType: 0,
|
||
tagStatus: 1, //干
|
||
tagUsedAge: apiCatAgeType,
|
||
};
|
||
for (let i = 0; i < this.userserachlist.length; i++) {
|
||
if (!this.userserachlist.includes(petType)) {
|
||
this.userserachlist.push(petType);
|
||
}
|
||
}
|
||
this.catmessage(this.userserachlist, "Gan");
|
||
},
|
||
catclickShi() {
|
||
this.userstype = 0;
|
||
this.maoshiCurIndex = this.maoshiCurIndex ? this.maoshiCurIndex : 0;
|
||
let apiCatAgeType = this.discoun[this.maoshiCurIndex].title;
|
||
let petType = {
|
||
petType: 0,
|
||
tagStatus: 2, //湿
|
||
tagUsedAge: apiCatAgeType,
|
||
};
|
||
for (let i = 0; i < this.userserachlist.length; i++) {
|
||
if (!this.userserachlist.includes(petType)) {
|
||
this.userserachlist.push(petType);
|
||
}
|
||
}
|
||
this.catmessage(this.userserachlist, "Shi");
|
||
},
|
||
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) {
|
||
this.activeIndex5 = index;
|
||
this.userdogShi();
|
||
},
|
||
userdoghot(item, index) {
|
||
this.activeIndex6 = index;
|
||
this.userdogGan();
|
||
},
|
||
selectGo(item, index) {
|
||
this.activeInde2 = index;
|
||
},
|
||
selectGoo(item, index) {
|
||
this.activeInde3 = index;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
@import url("../assets/css/global.less");
|
||
@import url("../assets/css/index.less");
|
||
</style> |