更改产品列表

This commit is contained in:
952108534@qq.com 2022-01-17 19:20:54 +08:00
parent 566a8d6cfc
commit f321d8c45c

View File

@ -7,7 +7,13 @@
<div class="usercontentshow" ref="usercontent">
<div class="rc-product ts-scrollable-container">
<div class="rc-productcat ts-scrollable">
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'" >
<div
class="rc-cat"
v-for="(item, index) in userproduct"
:key="index"
@click="selectGoods(item, index)"
:class="activeIndex == index ? 'active' : 'unactive'"
>
<img :src="item.catimage" alt="" />
<span>{{ item.title }}</span>
</div>
@ -17,7 +23,13 @@
<div class="ts-scrollable-container">
<h2>专区:</h2>
<ol class="ts-scrollable">
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
<li
v-for="(item, index) in prefecture"
:key="index"
@click="selectproduct(item, index)"
:class="activeIndexb == index ? 'active' : 'unactive'"
ref="chosebox"
>
{{ item.tagName }}
</li>
</ol>
@ -26,7 +38,13 @@
<div class="ts-scrollable-container">
<h2>年龄:</h2>
<ol class="ts-scrollable">
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
<li
v-for="(item, index) in catage"
:key="index"
@click="selectage(item, index)"
:class="activeIndexc == index ? 'active' : 'unactive'"
ref="chosebox1"
>
{{ item.tagName }}
</li>
</ol>
@ -35,7 +53,13 @@
<div class="ts-scrollable-container">
<h2>功能:</h2>
<ol class="ts-scrollable">
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
<li
v-for="(item, index) in catagea"
:key="index"
@click="selectagc(item, index)"
:class="activeIndexd == index ? 'active' : 'unactive'"
ref="chosebox2"
>
{{ item.tagName }}
</li>
</ol>
@ -44,7 +68,13 @@
<div class="ts-scrollable-container">
<h2>品种:</h2>
<ol class="ts-scrollable">
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
<li
v-for="(item, index) in catageb"
:key="index"
@click="selectagd(item, index)"
:class="activeIndexe == index ? 'active' : 'unactive'"
ref="chosebox3"
>
{{ item.tagName }}
</li>
</ol>
@ -54,16 +84,23 @@
</div>
</div>
<!-- rc-main end -->
<div class="online bold" style="margin-top:127px"></div>
<div class="online bold"></div>
<!-- rc-main start -->
<div class="rc-max-width--xl">
<div class="usersearch">
<div class="rc-contair">
<ul class="ts-product-list">
<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)">
<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)"
>
<div class="rc-rccontair">
<img :src=item.picture alt="">
<img :src="item.picture" alt="" />
</div>
</div>
<div class="rc-column">
@ -71,7 +108,15 @@
<span>{{ item.categoryName }}</span>
<i>0.001{{ item.price }}</i>
</div>
<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="userbuy()">立即购买</strong>
<strong
class="
ts-standard-btn ts-standard-btn--two
rc-margin-y--md
center
"
@click="userbuy()"
>立即购买</strong
>
</div>
</li>
</ul>
@ -83,22 +128,32 @@
</div>
<!-- rc-main end -->
<div v-if="isadrond">
<div class="rc-mubu" v-if="isshow" @click="usershow()"></div>
<div class="rc-bottom" v-if="isshow">
<div class="rc-bottoma">
<div class="rc-productcat ts-scrollable">
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoodsa(item, index)" :class="activeIndex1 == index ? 'active' : 'unactive'" >
<div
class="rc-cat"
v-for="(item, index) in userproduct"
:key="index"
@click="selectGoodsa(item, index)"
:class="activeIndex1 == index ? 'active' : 'unactive'"
>
<img :src="item.catimage" alt="" />
<span>{{ item.tagName }}</span>
</div>
</div>
<div class="rc-prefecture">
<h2>专区:</h2>
<ol class="ts-scrollable">
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
<li
v-for="(item, index) in prefecture"
:key="index"
@click="selectproduct(item, index)"
:class="activeIndexb == index ? 'active' : 'unactive'"
ref="chosebox"
>
{{ item.tagName }}
</li>
</ol>
@ -107,7 +162,13 @@
<div class="ts-scrollable-container rc-margin-y--md">
<h2>年龄:</h2>
<ol class="ts-scrollable">
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
<li
v-for="(item, index) in catage"
:key="index"
@click="selectage(item, index)"
:class="activeIndexc == index ? 'active' : 'unactive'"
ref="chosebox1"
>
{{ item.tagName }}
</li>
</ol>
@ -115,7 +176,13 @@
<div class="ts-scrollable-container rc-margin-y--md">
<h2>功能:</h2>
<ol class="ts-scrollable">
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
<li
v-for="(item, index) in catagea"
:key="index"
@click="selectagc(item, index)"
:class="activeIndexd == index ? 'active' : 'unactive'"
ref="chosebox2"
>
{{ item.tagName }}
</li>
</ol>
@ -124,41 +191,50 @@
<div class="ts-scrollable-container">
<h2>品种:</h2>
<ol class="ts-scrollable">
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
<li
v-for="(item, index) in catageb"
:key="index"
@click="selectagd(item, index)"
:class="activeIndexe == index ? 'active' : 'unactive'"
ref="chosebox3"
>
{{ item.tagName }}
</li>
</ol>
</div>
</div>
<div class="rc-footer">
<span @click="usershow()">取消</span>
<em @click="usershow()">确定</em>
</div>
</div>
</div>
<el-dialog
:visible.sync="dialogInfo1"
hegight="700px"
v-if="!isadrond"
>
<el-dialog :visible.sync="dialogInfo1" hegight="700px" v-if="!isadrond">
<div class="rc-bottom">
<div class="rc-bottoma">
<div class="rc-productcat ts-scrollable">
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoodsa(item, index)" :class="activeIndex1 == index ? 'active' : 'unactive'" >
<div
class="rc-cat"
v-for="(item, index) in userproduct"
:key="index"
@click="selectGoodsa(item, index)"
:class="activeIndex1 == index ? 'active' : 'unactive'"
>
<img :src="item.name" alt="" />
<span>{{ item.title }}</span>
</div>
</div>
<div class="rc-prefecture">
<h2>专区:</h2>
<ol>
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
<li
v-for="(item, index) in prefecture"
:key="index"
@click="selectproduct(item, index)"
:class="activeIndexb == index ? 'active' : 'unactive'"
ref="chosebox"
>
{{ item.tagName }}
</li>
</ol>
@ -167,7 +243,13 @@
<div class="ts-scrollable-container rc-margin-y--md">
<h2>年龄:</h2>
<ol>
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
<li
v-for="(item, index) in catage"
:key="index"
@click="selectage(item, index)"
:class="activeIndexc == index ? 'active' : 'unactive'"
ref="chosebox1"
>
{{ item.tagName }}
</li>
</ol>
@ -175,7 +257,13 @@
<div class="ts-scrollable-container rc-margin-y--md">
<h2>功能:</h2>
<ol>
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
<li
v-for="(item, index) in catagea"
:key="index"
@click="selectagc(item, index)"
:class="activeIndexd == index ? 'active' : 'unactive'"
ref="chosebox2"
>
{{ item.tagName }}
</li>
</ol>
@ -184,7 +272,13 @@
<div class="ts-scrollable-container">
<h2>品种:</h2>
<ol>
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
<li
v-for="(item, index) in catageb"
:key="index"
@click="selectagd(item, index)"
:class="activeIndexe == index ? 'active' : 'unactive'"
ref="chosebox3"
>
{{ item.tagName }}
</li>
</ol>
@ -201,29 +295,38 @@
</template>
<script>
import Myheader from '~/components/header.vue'
import { userstype,biaomessa,biaomessage,searchchanpin } from "../../ajax/getData";
import Myheader from "~/components/header.vue";
import $ from "jquery";
import {
userstype,
biaomessa,
biaomessage,
searchchanpin,
} from "../../ajax/getData";
export default {
data() {
return {
value: "",
userstype: [],
activeIndex:0,
userserachlist:[
{}
],
activeIndex: "0",
allacindex:0,
userishwo: true,
userishwo1: true,
userishwo2: true,
userishwo3: true,
userserachlist: [{}],
activeIndex1: 0,
activeIndexa:'-1',
activeIndexa: "-1",
dialogInfo1: false,
activeIndexb:'-1',
activeIndexc:'-1',
activeIndexd:'-1',
activeIndexe:'-1',
activeIndexf:'-1',
activeIndexb: "-1",
activeIndexc: "-1",
activeIndexd: "-1",
activeIndexe: "-1",
activeIndexf: "-1",
isadrond: true,
isshow: false,
openshow: false,
direction:'btt',
direction: "btt",
searchdata: [
{
title: "猫罐头",
@ -352,7 +455,7 @@ export default {
rccontair: [
{
title: "皇家英国短毛猫全价湿粮",
price:'¥123.45',
price: "¥123.45",
ordernum: 1,
catimage: require("../../assets/image/rc-cat.png"),
@ -360,25 +463,25 @@ export default {
{
title: "皇家英国短毛猫全价湿粮",
price:'¥123.45',
price: "¥123.45",
ordernum: "2",
catimage: require("../../assets/image/rc-dog.png"),
},
{
title: "皇家英国短毛猫全价湿粮",
price:'¥123.45',
price: "¥123.45",
ordernum: "2",
catimage: require("../../assets/image/rc-dog.png"),
},
{
title: "皇家英国短毛猫全价湿粮",
price:'¥123.45',
price: "¥123.45",
ordernum: "2",
catimage: require("../../assets/image/rc-dog.png"),
},
{
title: "皇家英国短毛猫全价湿粮",
price:'¥123.45',
price: "¥123.45",
ordernum: "2",
catimage: require("../../assets/image/rc-dog.png"),
},
@ -392,8 +495,9 @@ export default {
let stype = this.$route.query.stype;
this.userst();
this.activeIndex = stype;
if(stype!==''&&stype!==undefined){
this.onmessage(stype)
if (stype !== "" && stype !== undefined) {
this.onmessage(stype);
} else {
this.usetmessage();
}
@ -404,7 +508,6 @@ export default {
let data = await searchchanpin(stype);
if (data) {
this.rccontair = data;
}
},
async userst() {
@ -416,27 +519,26 @@ export default {
if (data) {
this.userstype = data;
}
this.usercatlist=this.userstype.filter(item=>item.petType=='0')
this.usercatlist.map(element=>{
if(element.name=='品种'){
this.usercatlist = this.userstype.filter((item) => item.petType == "0");
this.usercatlist.map((element) => {
if (element.name == "品种") {
pinzhong.push(element);
this.catageb=pinzhong
this.catageb = pinzhong;
}
if(element.name=='功能'){
if (element.name == "功能") {
gonneg.push(element);
this.catagea=gonneg
this.catagea = gonneg;
}
if(element.name=='年龄'){
if (element.name == "年龄") {
age.push(element);
this.catage=age
this.catage = age;
}
if(element.name=='专区'){
if (element.name == "专区") {
zhuanqu.push(element);
this.prefecture=gonneg
this.prefecture = gonneg;
}
})
this.userdoglisgt=this.userstype.filter(item=>item.petType=='1')
});
this.userdoglisgt = this.userstype.filter((item) => item.petType == "1");
},
async usetmessage() {
@ -452,9 +554,6 @@ export default {
}
},
userbuy() {
this.$router.push({
path: "/myorder/userrecord",
@ -485,129 +584,171 @@ this.dialogInfo1=false;
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 (
!(
bIsIpad ||
bIsIphoneOs ||
bIsMidp ||
bIsUc7 ||
bIsUc ||
bIsAndroid ||
bIsCE ||
bIsWM
)
) {
console.log("当前是电脑打开");
this.$nextTick(() => {
this.isadrond = false;
this.dialogInfo1 = true;
this.isadrond = false;
this.isshow = false;
})
});
} else {
console.log("当前是手机打开")
console.log("当前是手机打开");
this.$nextTick(() => {
this.isadrond = true;
this.isshow = true;
this.$refs.usercontent.style.display='none ';
this.$refs.usercontent.style.display = "none ";
this.dialogInfo1 = false;
})
});
}
},
//
onSearch() {},
selectGoods(item, index) {
selectGoods(item, index) {
this.activeIndex = index;
this.allacindex=index
console;
let petType = {
petType:this.activeIndex,
}
petType: this.allacindex,
};
for (let i = 0; i < this.userserachlist.length; i++) {
if (!this.userserachlist.includes(petType)) {
this.userserachlist.push(petType)
this.userserachlist.push(petType);
}
}
this.usersearch(this.userserachlist)
this.usersearch(this.userserachlist);
},
selectGoodsa(item, index) {
this.activeIndex1 = index;
},
userselect() {
this.$nextTick(() => {
this.ifadroind();
})
});
},
usershow() {
this.$nextTick(() => {
this.isshow = false;
// dom
this.$refs.usercontent.style.display='block ';
})
this.$refs.usercontent.style.display = "block ";
});
},
selectsearch(item, index) {
this.activeIndexa = index;
},
selectage(item, index) {
let tagUsedAge={
petType:this.activeIndex1,
tagUsedAge:item.tagName
let tagUsedAge = {};
this.activeIndexc = index;
this.userishwo1 = !this.userishwo1;
console.log(this.userishwo1);
if (this.userishwo1 == false) {
tagUsedAge = {
petType: this.allacindex,
tagUsedAge: item.tagName,
};
} else {
console.log("这是false");
tagUsedAge = {
petType: this.allacindex,
};
}
this.$refs.chosebox1[index].className = "unactive";
for (let i = 0; i < this.userserachlist.length; i++) {
if (!this.userserachlist.includes(tagUsedAge)) {
this.userserachlist.push(tagUsedAge)
this.userserachlist.push(tagUsedAge);
}
}
this.usersearch(this.userserachlist)
this.activeIndexc=index;
this.usersearch(this.userserachlist);
},
selectagc(item, index) {
let tagFunction={
petType:this.activeIndex1,
tagFunction:item.tagName
let tagFunction = {};
this.activeIndexd = index;
this.userishwo2 = !this.userishwo2;
if (this.userishwo2 == false) {
tagFunction = {
petType: this.allacindex,
tagFunction: item.tagName,
};
} else {
console.log("这是false");
tagFunction = {
petType: this.allacindex,
};
}
this.$refs.chosebox2[index].className = "unactive";
for (let i = 0; i < this.userserachlist.length; i++) {
if (!this.userserachlist.includes(tagFunction)) {
this.userserachlist.push(tagFunction)
this.userserachlist.push(tagFunction);
}
}
this.usersearch(this.userserachlist)
this.activeIndexd=index;
this.usersearch(this.userserachlist);
},
selectagd(item, index) {
let tagBreed={
petType:this.activeIndex1,
tagBreed:item.tagName
let tagBreed = {};
this.activeIndexe = index;
this.userishwo3 = !this.userishwo3;
if (this.userishwo3 == false) {
tagBreed = {
petType: this.allacindex,
tagBreed: item.tagName,
};
} else {
console.log("这是false");
tagBreed = {
petType: this.allacindex,
};
}
this.$refs.chosebox3[index].className = "unactive";
for (let i = 0; i < this.userserachlist.length; i++) {
if (!this.userserachlist.includes(tagBreed)) {
this.userserachlist.push(tagBreed)
this.userserachlist.push(tagBreed);
}
}
this.usersearch(this.userserachlist)
this.activeIndexe=index;
this.usersearch(this.userserachlist);
},
selectproduct(item, index) {
// console.log(this.userishwo=!this.userishwo)
let categoryName = {};
this.activeIndexb = index;
let categoryName={
petType:this.activeIndex1,
console.log(this.activeIndex);
this.userishwo = !this.userishwo;
console.log(this.userishwo);
if (this.userishwo == false) {
console.log("====");
categoryName = {
petType: this.allacindex,
categoryName: item.tagName,
};
} else {
categoryName = {
petType: this.allacindex,
};
}
console.log(this.$refs.chosebox);
this.$refs.chosebox[index].className = "unactive";
for (let i = 0; i < this.userserachlist.length; i++) {
if (!this.userserachlist.includes(categoryName)) {
this.userserachlist.push(categoryName)
this.userserachlist.push(categoryName);
}
}
this.usersearch(this.userserachlist)
this.usersearch(this.userserachlist);
},
//
},
};
</script>