mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 02:06:38 +08:00
1153 lines
30 KiB
Vue
1153 lines
30 KiB
Vue
<template>
|
||
|
||
|
||
<div>
|
||
<!-- Suppose in header end -->
|
||
<Myheader></Myheader>
|
||
<div class="rc-login">
|
||
<div class="userunlogin" v-show="userunlogin" @click="userlogin">
|
||
<div class="user-left">
|
||
<img src="../assets/image/rc-people.png" alt="">
|
||
<span>
|
||
登录/注册
|
||
</span>
|
||
</div>
|
||
<div class="user-right">
|
||
<img src="../assets/image/rc-left.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 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" 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-main">
|
||
<div class="usermain">
|
||
<div :class="searchBar?'rc-ma':'rc-ma searchBara'">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
<div class="online"></div>
|
||
|
||
<div class="rc-main">
|
||
<div class="rc-lunbo">
|
||
<!-- <h2>明星猫粮</h2> -->
|
||
<div class="pageFullScreen" id="xxxFullScreen" v-show="catproduct">
|
||
<!-- 内容 -->
|
||
<div class="swiper-container" id="swiper1">
|
||
<h2>明星猫粮</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 @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="sw-cen">
|
||
<i @click="userbuy(item,index)">立即购买</i>
|
||
</div>
|
||
</div>
|
||
|
||
</swiper-slide>
|
||
</swiper>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<div class="online"></div>
|
||
<div class="selectionswitch">
|
||
<h2>全价猫湿粮</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>
|
||
<li v-for="(item,index) in catshi" :key="index">
|
||
<div class="rc-conta" @click="selectproduce(item,index)" >
|
||
<div class="rc-rccontair">
|
||
<img :src=item.picture alt="">
|
||
</div>
|
||
<span>{{item.name}}</span>
|
||
<i>{{item.price}}</i>
|
||
</div>
|
||
<strong @click="selectproduce(item,index)">立即购买</strong>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<nuxt-link :to="`/productdetails/productlist/`">
|
||
<div class="userserlect">
|
||
<span>查看更多</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>
|
||
<li v-for="(item,index) in rccontair" :key="index">
|
||
<div class="rc-rccontair">
|
||
<img :src=item.catimage alt="">
|
||
</div>
|
||
<span>{{item.title}}</span>
|
||
<i>{{item.price}}</i>
|
||
<strong @click="userbuy(item,index)">立即购买</strong>
|
||
</li>
|
||
</ul>
|
||
|
||
<nuxt-link :to="`/productdetails/productlist/`">
|
||
<div class="userserlect">
|
||
<span>查看更多</span>
|
||
</div>
|
||
</nuxt-link>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="online"></div>
|
||
<div class="selectionswitch">
|
||
<h2>全价猫干粮</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>
|
||
<li v-for="(item,index) in catgan" :key="index">
|
||
<div class="rc-conta" @click="selectproduce(item,index)" >
|
||
<div class="rc-rccontair">
|
||
<img :src=item.picture alt="">
|
||
</div>
|
||
<span>{{item.name}}</span>
|
||
<i>{{item.price}}</i>
|
||
</div>
|
||
<strong @click="selectproduce(item,index)">立即购买</strong>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<nuxt-link :to="`/productdetails/productlist/`">
|
||
<div class="userserlect">
|
||
<span>查看更多</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>
|
||
<li v-for="(item,index) in rccontair" :key="index">
|
||
<div class="rc-rccontair">
|
||
<img :src=item.catimage alt="">
|
||
</div>
|
||
<span>{{item.title}}</span>
|
||
<i>{{item.price}}</i>
|
||
<strong @click="userbuy(item,index)">立即购买</strong>
|
||
</li>
|
||
</ul>
|
||
|
||
<nuxt-link :to="`/productdetails/productlist/`">
|
||
<div class="userserlect">
|
||
<span>查看更多</span>
|
||
</div>
|
||
</nuxt-link>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
<div class="online"></div>
|
||
|
||
<div class="selectionswitch">
|
||
<h2>全价犬湿粮</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>
|
||
<li v-for="(item,index) in dogshi" :key="index">
|
||
<div class="rc-conta" @click="selectproduce(item,index)" >
|
||
<div class="rc-rccontair">
|
||
<img :src=item.picture alt="">
|
||
</div>
|
||
<span>{{item.name}}</span>
|
||
<i>{{item.price}}</i>
|
||
</div>
|
||
<strong @click="selectproduce(item,index)">立即购买</strong>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<nuxt-link :to="`/productdetails/productlist/`">
|
||
<div class="userserlect">
|
||
<span>查看更多</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>
|
||
<li v-for="(item,index) in rccontair" :key="index">
|
||
<div class="rc-rccontair">
|
||
<img :src=item.catimage alt="">
|
||
</div>
|
||
<span>{{item.title}}</span>
|
||
<i>{{item.price}}</i>
|
||
<strong @click="userbuy(item,index)">立即购买</strong>
|
||
</li>
|
||
</ul>
|
||
|
||
<nuxt-link :to="`/productdetails/productlist/`">
|
||
<div class="userserlect">
|
||
<span>查看更多</span>
|
||
</div>
|
||
</nuxt-link>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
<div class="online"></div>
|
||
<div class="selectionswitch">
|
||
<h2>全价犬干粮</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>
|
||
<li v-for="(item,index) in doggan" :key="index">
|
||
<div class="rc-conta" @click="selectproduce(item,index)" >
|
||
<div class="rc-rccontair">
|
||
<img :src=item.picture alt="">
|
||
</div>
|
||
<span>{{item.name}}</span>
|
||
<i>{{item.price}}</i>
|
||
</div>
|
||
<strong @click="selectproduce(item,index)">立即购买</strong>
|
||
</li>
|
||
</ul>
|
||
|
||
<nuxt-link :to="`/productdetails/productlist/`">
|
||
<div class="userserlect">
|
||
<span>查看更多</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>
|
||
<li v-for="(item,index) in rccontair" :key="index">
|
||
<div class="rc-rccontair">
|
||
<img :src=item.catimage alt="">
|
||
</div>
|
||
<span>{{item.title}}</span>
|
||
<i>{{item.price}}</i>
|
||
<strong @click="selectproduce(item,index)">立即购买</strong>
|
||
</li>
|
||
</ul>
|
||
|
||
<nuxt-link :to="`/productdetails/productlist/`">
|
||
<div class="userserlect">
|
||
<span>查看更多</span>
|
||
</div>
|
||
</nuxt-link>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
<div class="online"></div>
|
||
|
||
<div class="selectionswitch">
|
||
<h2>处方用粮</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>
|
||
<li v-for="(item,index) in processinformation" :key="index">
|
||
<div class="rc-conta" @click="selectproduce(item,index)" >
|
||
<div class="rc-rccontair">
|
||
<img :src="`${usersetting}/${item.picFile}`">
|
||
</div>
|
||
<span>{{item.productName}}</span>
|
||
<!-- <i>￥{{item.basePrice}}</i> -->
|
||
</div>
|
||
<strong @click="selectproduce(item,index)">立即购买</strong>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<nuxt-link :to="`/productdetails/productlist/`">
|
||
<div class="userserlect">
|
||
<span>查看更多</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>
|
||
<li v-for="(item,index) in rccontair" :key="index">
|
||
<div class="rc-rccontair">
|
||
<img :src=item.catimage alt="">
|
||
</div>
|
||
<span>{{item.title}}</span>
|
||
<i>{{item.price}}</i>
|
||
<strong @click="selectproduce(item,index)">立即购买</strong>
|
||
</li>
|
||
</ul>
|
||
|
||
<nuxt-link :to="`/productdetails/productlist/`">
|
||
<div class="userserlect">
|
||
<span>查看更多</span>
|
||
</div>
|
||
</nuxt-link>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="online"></div>
|
||
|
||
<div class="rc-usermessage">
|
||
<em>为每一种健康需求度身定制</em>
|
||
<span>每一只猫、每一只狗都是独一无二的，而他们的健康所需亦一样，需要专门度身定制。不过，这些健康需求
|
||
通常是他们体型、品种或生活方式上的特征。邀请您探索我们的营养系列，了解我们如何协助每一只爱宠过
|
||
得更健康。
|
||
</span>
|
||
<a href="https://royalcanin.com.cn/tailored-nutrition/details">
|
||
<i>了解更多</i>
|
||
</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 '@vant/touch-emulator';
|
||
import { userquery,postCourseId,biaomessage,userque } from "../ajax/getData";
|
||
const settings = require("@/config");
|
||
export default {
|
||
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
|
||
},
|
||
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
|
||
}
|
||
|
||
},
|
||
//用户登录
|
||
userlogin(){
|
||
this.$router.push({
|
||
path: "/userlogin/login",
|
||
query: {
|
||
stype: 1,
|
||
},
|
||
});
|
||
},
|
||
|
||
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>
|