Index error fixed, van-swiper unified

This commit is contained in:
Leung 2022-01-16 20:42:14 +08:00
parent 3634764669
commit 5c5b50b7ea
3 changed files with 239 additions and 257 deletions

View File

@ -285,11 +285,6 @@ img, picture {
.rc-top{ .rc-top{
margin-top: 90px; margin-top: 90px;
} }
.rc-list__header {
background: none;
padding: .5rem 0;
border-bottom: none;
}
.ts-right-arr { .ts-right-arr {
border-bottom:1px solid #E1001A; border-bottom:1px solid #E1001A;
padding-bottom:2px; padding-bottom:2px;

View File

@ -316,8 +316,6 @@ object-fit: cover;
color: #fff; color: #fff;
height: 100%; height: 100%;
width: 100%; width: 100%;
font-size: 1.25rem;
line-height: 9.375rem;
text-align: center; text-align: center;

View File

@ -42,41 +42,40 @@
<div class="swiper-container rc-full-width rc-padding-y--md" id="swiper1"> <div class="swiper-container rc-full-width rc-padding-y--md" id="swiper1">
<h2 class="rc-beta rc-text--center">{{usertitle}}</h2> <h2 class="rc-beta rc-text--center">{{usertitle}}</h2>
<!-- 轮播图 --> <!-- 轮播图 -->
<swiper :options="swiperOption"> <van-swipe class="rc-padding-bottom--md">
<swiper-slide class="swiper-slide" v-for="(item, key) in catlistvideo" :key="key" > <van-swipe-item v-for="(item, index) in catlistvideo" :key="index">
<div class="rc-video"> <div class="rc-video">
<div class="uservideo"> <div class="uservideo">
</div> </div>
<div class="rc-right"> <div class="rc-right">
<img :src=item.catimage alt=""> <img :src=item.catimage alt="">
<span>{{item.title}}</span> <span>{{item.title}}</span>
<p>{{item.detail}}</p> <p>{{item.detail}}</p>
<em>{{item.price}}</em> <em>{{item.price}}</em>
<strong class="ts-standard-btn ts-standard-btn--two center" @click="userbuy(item,index)">立即购买</strong> <strong class="ts-standard-btn ts-standard-btn--two center" @click="userbuy(item,index)">立即购买</strong>
</div> </div>
</div> </div>
<div class="sw-center" > <div class="sw-center" >
<div class="rc-click" @click="selectproduce(item,index)"> <div class="rc-click" @click="selectproduce(item,index)">
<div class="uservideo"> <div class="uservideo">
<video width="300px" height="251" controls="controls"> <video width="300px" height="251" controls="controls">
<source :src=item.video type="video/ogg"> <source :src= item.video type="video/ogg" autoplay>
</video> </video>
</div> </div>
<img :src=item.catimage alt=""> <img :src=item.catimage alt="">
<span>{{item.title}}</span> <span>{{item.title}}</span>
<p>{{item.detail}}</p> <p>{{item.detail}}</p>
<em>{{item.price}}</em> <em>{{item.price}}</em>
</div> </div>
<div class="rc-full-width rc-margin-y--md"> <div class="rc-full-width rc-margin-y--md">
<i @click="userbuy(item,index)" class="ts-standard-btn ts-standard-btn--two center">立即购买</i> <i @click="userbuy(item,index)" class="ts-standard-btn ts-standard-btn--two center">立即购买</i>
</div> </div>
</div> </div>
</van-swipe-item>
</swiper-slide> </van-swipe>
</swiper>
</div> </div>
@ -707,11 +706,10 @@
import { userquery,postCourseId,biaomessage,userque,searchchanpin } from "../ajax/getData"; import { userquery,postCourseId,biaomessage,userque,searchchanpin } from "../ajax/getData";
const settings = require("@/config"); const settings = require("@/config");
export default { export default {
middleware: 'metaTitle', middleware: 'metaTitle',
// middleware: 'metaTitle', meta: {title: '首页'},
meta: {title: '首页'}, data(){
data(){ return{
return{
useraindex:0, useraindex:0,
usertitle:'明星猫粮', usertitle:'明星猫粮',
dogtitle:'明星狗粮', dogtitle:'明星狗粮',
@ -882,7 +880,7 @@
}, },
], ],
discounchufang: [ discounchufang: [
{ {
title: "消化道", title: "消化道",
catimage: require("../assets/cat.png"), catimage: require("../assets/cat.png"),
@ -1074,19 +1072,19 @@
} }
}, },
} }
}, },
components:{ components:{
Myheader, Myheader,
Myfooter, Myfooter,
unlogin, unlogin,
// userswiper // userswiper
}, },
created(){ created(){
vm=this; vm=this;
},
watch:{
}, },
watch:{
},
mounted(){ mounted(){
const that = this const that = this
this.ifAdoid(); this.ifAdoid();
@ -1102,176 +1100,175 @@
destroyed () { destroyed () {
window.removeEventListener('scroll', this.scrollToTop); window.removeEventListener('scroll', this.scrollToTop);
}, },
methods:{ methods:{
ifAdoid(item,index){ ifAdoid(item,index){
//console.log(index); //console.log(index);
this.userindex=index; this.userindex=index;
var sUserAgent = navigator.userAgent.toLowerCase(); var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp"; var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android"; var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; 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)
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) { this.catproduct=true;
//console.log("") this.onemao=false;
this.stypechange=false; this.twomao=false;
//console.log(this.usertitle) this.threemao=false;
this.fourmao=false;
this.catproduct=true; this.fivemao=false;
this.onemao=false; this.sixmao=false;
this.twomao=false; this.dogshow=false
this.threemao=false; this.showingBanners=this.banners.pc;
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.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);
if(item.title=='犬湿粮'||item.title=='犬干粮'||item.title=='处方用粮'){
userindex=userindex-2
}else{
userindex=userindex-1
} }
if(item.title=='明星猫粮'){ else
mingxin.scrollIntoView(true); {
}else{ console.log("当前是手机打开")
let catshiid=document.querySelectorAll('.selectionswitch'); this.showingBanners=this.banners.mobile;
catshiid[userindex].scrollIntoView(true); this.stypechange=true;
} this.onemao=true;
if(item.title=='明星狗粮') this.twomao=true;
dogtop.scrollIntoView(true); this.threemao=true;
// if(item.title=="湿"){ this.fourmao=true;
// this.catproduct=false; this.fivemao=true;
// this.catfood=true; this.dogshow=true;
// }else if(item.title==""){ this.catproduct=true
// this.catproduct=true; this.sixmao=true;
// this.catfood=false;
// } }
//console.log("") },
}
}, 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);
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){ userdog(item,index){
this.userstype=1; this.userstype=1;
let petType={ let petType={
@ -1328,10 +1325,6 @@
this.gotop = false; this.gotop = false;
this.searchBar=true this.searchBar=true
} }
}
}, },
toTop() { toTop() {
let top = document.documentElement.scrollTop || document.body.scrollTop; let top = document.documentElement.scrollTop || document.body.scrollTop;
@ -1445,35 +1438,33 @@
lianxi(item,index){ lianxi(item,index){
if(item.title=='在线客服'){ if(item.title=='在线客服'){
var option = { var option = {
customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'} customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'}
} }
dis_livchat(option); dis_livchat(option);
} }
if(item.title=='购物车'){ if(item.title=='购物车'){
this.$router.push({ this.$router.push({
path: "/myorder/userrecord", path: "/myorder/userrecord",
});
}
if(item.title=='营养专家'){
var option = {
customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'}
}
dis_livchat(option);
}
}); },
} userbuy(item){
if(item.title=='营养专家'){ let user= localStorage.getItem("userInfo");
var option = { this.courseId(item)
customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'} this.$router.push({
} path: "/myorder/userrecord",
dis_livchat(option); });
} },
},
userbuy(item){
let user= localStorage.getItem("userInfo");
this.courseId(item)
this.$router.push({
path: "/myorder/userrecord",
});
},
selectGoods(item,index){ selectGoods(item,index){
//console.log(item,index); //console.log(item,index);
@ -1498,9 +1489,7 @@
selectGoo(item,index){ selectGoo(item,index){
this.activeInde3=index; this.activeInde3=index;
} }
}, }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>