mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-03 02:36:39 +08:00
980 lines
29 KiB
Vue
980 lines
29 KiB
Vue
<template>
|
||
<div>
|
||
<transition name="fade">
|
||
<div class="userloding" v-show="isLoading"></div>
|
||
</transition>
|
||
|
||
<Myheader></Myheader>
|
||
<div class="rc-top"></div>
|
||
<div class="rc-max-width--xl rc-main">
|
||
<div class="usersearch">
|
||
<div class="form-search">
|
||
<van-search
|
||
v-model="value"
|
||
show-action
|
||
placeholder="请输入搜索关键词"
|
||
@search="onSearch"
|
||
class="rc-keyword"
|
||
>
|
||
<template #action>
|
||
<div @click="onSearch" class="rc-search">搜索</div>
|
||
</template>
|
||
</van-search>
|
||
<div class="ts-stand">
|
||
<span @click="onSearch" class="ts-standard-btn">搜索</span>
|
||
</div>
|
||
</div>
|
||
<div class="rc-max-width--xl rc-title">
|
||
<h2>热门搜索</h2>
|
||
<span class="rc-change" @click="userbatch">换一批</span>
|
||
</div>
|
||
<div class="rc-max-width--xl rc-variety">
|
||
<ul>
|
||
<li
|
||
v-for="(item, index) in searchdata"
|
||
:key="index"
|
||
@click="selectsearch(item, index)"
|
||
:class="activeIndexa == index"
|
||
>
|
||
{{ item.title }}
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="usersearch">
|
||
<div class="usercontentshow" ref="usercontent">
|
||
<div class="usercontentshow rc-product">
|
||
<h2>我想搜</h2>
|
||
<div class="rc-productcat ts-scrollable">
|
||
<ol>
|
||
<li
|
||
v-for="(item, index) in userproduct"
|
||
:key="index"
|
||
@click="selectGoods(item, index)"
|
||
:class="activeIndex == index ? 'active' : 'unactive'"
|
||
class="ts-standard-btn"
|
||
ref="userstandard"
|
||
>
|
||
<img :src="item.catimage" alt="" />
|
||
<span>{{ item.title }}</span>
|
||
</li>
|
||
</ol>
|
||
<div class="rc-productcat userselect" @click="userselect">
|
||
<img src="../../assets/image/rc-usericon.png" alt="" />
|
||
<span @click="usershow()">筛选</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ts-scrollable-container">
|
||
<h2>专区:</h2>
|
||
<ol class="ts-scrollable">
|
||
<li
|
||
v-for="(item, index) in prefecture"
|
||
:key="index"
|
||
ref="chosebox"
|
||
@click="selectproduct(item, index)"
|
||
:class="item.checked ? 'active' : 'unactive'"
|
||
>
|
||
{{ item.tagName }}
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<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="item.checked ? 'active' : 'unactive'"
|
||
ref="chosebox1"
|
||
>
|
||
{{ item.tagName }}
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="online"></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)"
|
||
>
|
||
<div class="rc-rccontair">
|
||
<img :src="item.picture" alt="" />
|
||
</div>
|
||
</div>
|
||
<div class="rc-column">
|
||
<div class="rc-click" @click="selectproduce(item)">
|
||
<span>{{ item.categoryName }}</span>
|
||
<i>￥{{ item.ecPrice }}</i>
|
||
</div>
|
||
<strong
|
||
class="
|
||
ts-standard-btn ts-standard-btn--two
|
||
rc-margin-y--md
|
||
center
|
||
"
|
||
@click="userbuy()"
|
||
>立即购买</strong
|
||
>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="usershow" v-if="openshow">
|
||
<div class="rc-show"></div>
|
||
</div>
|
||
</div>
|
||
<div v-if="isadrond" class="useronshow">
|
||
<div class="rc-mubu" v-if="isshow" @click="usershow()"></div>
|
||
<div class="rc-bottom rc-full-width" v-if="isshow">
|
||
<div class="usersearch">
|
||
<div class="usercontentshow rc-column" ref="usercontent">
|
||
<div class="usercontentshow rc-product">
|
||
<div class="rc-productcat ts-scrollable">
|
||
<ol>
|
||
<li
|
||
v-for="(item, index) in userproduct"
|
||
:key="index"
|
||
@click="selectGoods(item, index)"
|
||
:class="activeIndex == index ? 'active' : 'unactive'"
|
||
class="ts-standard-btn"
|
||
ref="userstandard"
|
||
>
|
||
<img :src="item.catimage" alt="" />
|
||
<span>{{ item.title }}</span>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ts-scrollable-container">
|
||
<h2>专区:</h2>
|
||
<ol class="ts-scrollable">
|
||
<li
|
||
v-for="(item, index) in prefecture"
|
||
:key="index"
|
||
ref="chosebox"
|
||
@click="selectproduct(item, index)"
|
||
:class="item.checked ? 'active' : 'unactive'"
|
||
>
|
||
{{ item.tagName }}
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<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="item.checked ? 'active' : 'unactive'"
|
||
ref="chosebox1"
|
||
>
|
||
{{ item.tagName }}
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
<div class="ts-scrollable-container">
|
||
<h2>功能:</h2>
|
||
<ol class="ts-scrollable">
|
||
<li
|
||
v-for="(item, index) in catagea"
|
||
ref="cgosebox4"
|
||
:key="index"
|
||
@click="selectagc(item, index)"
|
||
:class="item.checked ? 'active' : 'unactive'"
|
||
>
|
||
{{ item.tagName }}
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
<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="item.checked ? 'active' : 'unactive'"
|
||
ref="chosebox3"
|
||
>
|
||
{{ item.tagName }}
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="rc-button">
|
||
<span @click="openclose()">取消</span>
|
||
<em @click="openclose()">确认</em>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-dialog :visible.sync="dialogInfo1" hegight="700px" v-if="!isadrond">
|
||
<div class="usersearch">
|
||
<div class="usercontentshow" ref="usercontent">
|
||
<div class="usercontentshow rc-product">
|
||
<div class="rc-productcat ts-scrollable">
|
||
<ol>
|
||
<li
|
||
v-for="(item, index) in userproduct"
|
||
:key="index"
|
||
@click="selectGoods(item, index)"
|
||
:class="activeIndex == index ? 'active' : 'unactive'"
|
||
class="ts-standard-btn"
|
||
ref="userstandard"
|
||
>
|
||
<img :src="item.catimage" alt="" />
|
||
<span>{{ item.title }}</span>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
<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="item.checked ? 'active' : 'unactive'"
|
||
>
|
||
{{ item.tagName }}
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<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="item.checked ? 'active' : 'unactive'"
|
||
ref="chosebox1"
|
||
>
|
||
{{ item.tagName }}
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
<div class="ts-scrollable-container">
|
||
<h2>功能:</h2>
|
||
<ol class="ts-scrollable">
|
||
<li
|
||
v-for="(item, index) in catagea"
|
||
:key="index"
|
||
ref="cgosebox4"
|
||
@click="selectagc(item, index)"
|
||
:class="item.checked ? 'active' : 'unactive'"
|
||
>
|
||
{{ item.tagName }}
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
<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="item.checked ? 'active' : 'unactive'"
|
||
ref="chosebox3"
|
||
>
|
||
{{ item.tagName }}
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="rc-button rc-padding-bottom--md">
|
||
<span @click="openclose()">取消</span>
|
||
<em @click="openclose()">确认</em>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
<!-- rc-main end -->
|
||
<MyFooter></MyFooter>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Myheader from "~/components/header.vue";
|
||
import MyFooter from '~/components/rc-footer.vue'
|
||
import { biaome, userstype, searchchanpin } from "../../ajax/getData";
|
||
export default {
|
||
data() {
|
||
return {
|
||
value: "",
|
||
isLoading: true,
|
||
|
||
userserachlist: [
|
||
{
|
||
categoryName: "", //专区
|
||
tagUsedAge: "", //年龄
|
||
tagFunction: "", //功能
|
||
tagBreed: "", //品种
|
||
},
|
||
],
|
||
userstype: [],
|
||
activeIndex: "-1",
|
||
activeIndex1: 0,
|
||
activeIndexa: "-1",
|
||
// userpeolist:[
|
||
// {
|
||
// categoryName:'', //专区
|
||
// tagUsedAge:'',//年龄
|
||
// tagFunction:'',//功能
|
||
// tagBreed:'', //品种
|
||
// }
|
||
// ],
|
||
allsearch: false,
|
||
dialogInfo1: false,
|
||
activeIndexb: "-1",
|
||
activeIndexc: "-1",
|
||
activeIndexd: "-1",
|
||
activeIndexe: "-1",
|
||
activeIndexf: "-1",
|
||
isadrond: true,
|
||
isshow: false,
|
||
openshow: false,
|
||
direction: "btt",
|
||
searchdata: [
|
||
{
|
||
title: "猫罐头",
|
||
ordernum: "1",
|
||
},
|
||
|
||
{
|
||
title: "犬罐头",
|
||
ordernum: "2",
|
||
},
|
||
{
|
||
title: "布偶猫",
|
||
ordernum: "3",
|
||
},
|
||
{
|
||
title: "博美犬",
|
||
ordernum: "4",
|
||
},
|
||
],
|
||
|
||
userproduct: [
|
||
{
|
||
title: "猫产品",
|
||
ordernum: "1",
|
||
catimage: require("../../assets/image/rc-cat.png"),
|
||
},
|
||
|
||
{
|
||
title: "犬产品",
|
||
ordernum: "2",
|
||
catimage: require("../../assets/image/rc-dog.png"),
|
||
},
|
||
],
|
||
|
||
catproduct: [
|
||
{
|
||
title: "猫产品",
|
||
ordernum: "1",
|
||
catimage: require("../../assets/image/rc-cat.png"),
|
||
},
|
||
|
||
{
|
||
title: "犬产品",
|
||
ordernum: "2",
|
||
catimage: require("../../assets/image/rc-dog.png"),
|
||
},
|
||
],
|
||
|
||
prefecture: [
|
||
{
|
||
title: "猫湿粮",
|
||
ordernum: "2",
|
||
catimage: require("../../assets/image/rc-dog.png"),
|
||
},
|
||
{
|
||
title: "品种猫粮",
|
||
ordernum: "2",
|
||
catimage: require("../../assets/image/rc-dog.png"),
|
||
},
|
||
{
|
||
title: "营养猫粮",
|
||
ordernum: "2",
|
||
catimage: require("../../assets/image/rc-dog.png"),
|
||
},
|
||
{
|
||
title: "功能猫粮",
|
||
ordernum: "2",
|
||
catimage: require("../../assets/image/rc-dog.png"),
|
||
},
|
||
],
|
||
catage: [
|
||
{
|
||
title: "<4月龄",
|
||
ordernum: "1",
|
||
},
|
||
{
|
||
title: "4-12月龄",
|
||
ordernum: "2",
|
||
},
|
||
{
|
||
title: "1-7岁",
|
||
ordernum: "3",
|
||
},
|
||
{
|
||
title: ">7岁",
|
||
ordernum: "4",
|
||
},
|
||
],
|
||
catagea: [
|
||
{
|
||
title: "绝育呵护",
|
||
ordernum: "1",
|
||
},
|
||
{
|
||
title: "口腔呵护",
|
||
ordernum: "2",
|
||
},
|
||
{
|
||
title: "美毛呵护",
|
||
ordernum: "3",
|
||
},
|
||
{
|
||
title: "去毛球",
|
||
ordernum: "4",
|
||
},
|
||
],
|
||
catageb: [
|
||
{
|
||
title: "英短",
|
||
ordernum: "1",
|
||
},
|
||
{
|
||
title: "美短",
|
||
ordernum: "2",
|
||
},
|
||
{
|
||
title: "布偶",
|
||
ordernum: "3",
|
||
},
|
||
{
|
||
title: "暹罗",
|
||
ordernum: "4",
|
||
},
|
||
],
|
||
|
||
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-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"),
|
||
},
|
||
],
|
||
usercatlist: [],
|
||
userdoglisgt: [],
|
||
};
|
||
},
|
||
components: {
|
||
Myheader,
|
||
MyFooter
|
||
},
|
||
mounted() {
|
||
this.usetmessage();
|
||
this.userst();
|
||
},
|
||
methods: {
|
||
//换一批
|
||
userbatch() {
|
||
this.allsearch = !this.allsearch;
|
||
if (this.allsearch == false) {
|
||
this.searchdata = [
|
||
{
|
||
title: "法国斗牛犬",
|
||
ordernum: "7",
|
||
},
|
||
{
|
||
title: "老年",
|
||
ordernum: "8",
|
||
},
|
||
{
|
||
title: "布偶",
|
||
ordernum: "9",
|
||
},
|
||
{
|
||
title: "柴犬",
|
||
ordernum: "10",
|
||
},
|
||
];
|
||
this.activeIndexa = 0;
|
||
} else {
|
||
this.searchdata = [
|
||
{
|
||
title: "猫罐头",
|
||
ordernum: "1",
|
||
},
|
||
|
||
{
|
||
title: "犬罐头",
|
||
ordernum: "2",
|
||
},
|
||
{
|
||
title: "布偶猫",
|
||
ordernum: "3",
|
||
},
|
||
{
|
||
title: "博美犬",
|
||
ordernum: "4",
|
||
},
|
||
];
|
||
this.activeIndexa = 0;
|
||
}
|
||
},
|
||
|
||
async usersearch(stype, usertype) {
|
||
let data = await searchchanpin(stype, usertype, 1, 10);
|
||
if (data) {
|
||
this.rccontair = data;
|
||
}
|
||
},
|
||
async userst() {
|
||
this.isLoading = true;
|
||
let pinzhong = [];
|
||
let zhuanqu = [];
|
||
let age = [];
|
||
let gonneg = [];
|
||
let data = await userstype();
|
||
if (data) {
|
||
this.userstype = data;
|
||
this.isLoading = false;
|
||
}
|
||
this.usercatlist = this.userstype.filter((item) => item.petType == "0");
|
||
this.usercatlist.map((element) => {
|
||
if (element.name == "品种") {
|
||
pinzhong.push(element);
|
||
this.catageb = pinzhong;
|
||
this.catageb=this.catageb.sort((n1,n2)=>{
|
||
return n1.sort-n2.sort;
|
||
})
|
||
this.catageb.forEach((element) => {
|
||
element.checked = false;
|
||
});
|
||
// console.log(this.catageb);
|
||
}
|
||
if (element.name == "功能") {
|
||
gonneg.push(element);
|
||
this.catagea = gonneg;
|
||
this.catagea.forEach((element) => {
|
||
element.checked = false;
|
||
});
|
||
console.log(this.catagea);
|
||
}
|
||
if (element.name == "年龄") {
|
||
age.push(element);
|
||
this.catage = age;
|
||
this.catage.forEach((element) => {
|
||
element.checked = false;
|
||
});
|
||
}
|
||
if (element.name == "专区") {
|
||
zhuanqu.push(element);
|
||
this.prefecture = zhuanqu;
|
||
this.prefecture.forEach((element) => {
|
||
element.checked = false;
|
||
});
|
||
}
|
||
});
|
||
|
||
this.userdoglisgt = this.userstype.filter((item) => item.petType == "1");
|
||
},
|
||
|
||
async usetmessage() {
|
||
this.isLoading = true;
|
||
this.$nextTick(() => {
|
||
this.$refs.userstandard[0].style.margin = 0 + "px";
|
||
});
|
||
let data = await biaome(this.activeIndex1, this.value, 1, 10);
|
||
if (data) {
|
||
this.rccontair = data;
|
||
this.isLoading = false;
|
||
}
|
||
this.userproduct.forEach((element) => {
|
||
element.checked = false;
|
||
});
|
||
},
|
||
selectproduce(item) {
|
||
this.$router.push({
|
||
path: "/productdetails/producted",
|
||
query: {
|
||
stype: 1,
|
||
productCode: item.productList[0].productCode,
|
||
},
|
||
});
|
||
},
|
||
userbuy() {
|
||
this.$router.push({
|
||
path: "/myorder/userrecord",
|
||
query: {
|
||
stype: 1,
|
||
},
|
||
});
|
||
},
|
||
openclose() {
|
||
this.dialogInfo1 = false;
|
||
this.isshow = false;
|
||
},
|
||
ifadroind() {
|
||
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.$nextTick(() => {
|
||
this.isadrond = false;
|
||
this.dialogInfo1 = true;
|
||
this.isadrond = false;
|
||
this.isshow = false;
|
||
});
|
||
} else {
|
||
console.log("当前是手机打开");
|
||
this.$nextTick(() => {
|
||
this.isadrond = true;
|
||
this.isshow = true;
|
||
// this.$refs.usercontent.style.display='none ';
|
||
this.dialogInfo1 = false;
|
||
});
|
||
}
|
||
},
|
||
//搜索
|
||
onSearch(e) {
|
||
this.usetmessage(this.activeIndex1, this.value);
|
||
},
|
||
selectGoods(item, index) {
|
||
this.activeIndex1 = index;
|
||
this.usersearch(this.userserachlist, this.activeIndex1);
|
||
let pinzhong = [];
|
||
let zhuanqu = [];
|
||
let age = [];
|
||
let gonneg = [];
|
||
if (this.activeIndex1 == 0) {
|
||
this.usercatlist.map((element) => {
|
||
if (element.name == "品种") {
|
||
pinzhong.push(element);
|
||
|
||
this.catageb = pinzhong;
|
||
}
|
||
if (element.name == "功能") {
|
||
gonneg.push(element);
|
||
this.catagea = gonneg;
|
||
}
|
||
if (element.name == "年龄") {
|
||
age.push(element);
|
||
this.catage = age;
|
||
}
|
||
if (element.name == "专区") {
|
||
zhuanqu.push(element);
|
||
this.prefecture = zhuanqu;
|
||
}
|
||
});
|
||
} else if (this.activeIndex1 == 1) {
|
||
this.userdoglisgt.map((element) => {
|
||
if (element.name == "品种") {
|
||
pinzhong.push(element);
|
||
this.catageb = pinzhong;
|
||
this.catageb.forEach((element) => {
|
||
element.checked = false;
|
||
});
|
||
}
|
||
if (element.name == "功能") {
|
||
gonneg.push(element);
|
||
this.catagea = gonneg;
|
||
this.catagea.forEach((element) => {
|
||
element.checked = false;
|
||
});
|
||
}
|
||
if (element.name == "年龄") {
|
||
age.push(element);
|
||
this.catage = age;
|
||
this.catage.forEach((element) => {
|
||
element.checked = false;
|
||
});
|
||
}
|
||
if (element.name == "专区") {
|
||
zhuanqu.push(element);
|
||
this.prefecture = zhuanqu;
|
||
this.prefecture.forEach((element) => {
|
||
element.checked = false;
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
this.activeIndex = index;
|
||
},
|
||
selectGoodsa(item, index) {
|
||
let pinzhong = [];
|
||
let zhuanqu = [];
|
||
let age = [];
|
||
let gonneg = [];
|
||
this.activeIndex1 = index;
|
||
if (this.activeIndex1 == 0) {
|
||
this.usercatlist.map((element) => {
|
||
if (element.name == "品种") {
|
||
pinzhong.push(element);
|
||
this.catageb = pinzhong;
|
||
}
|
||
if (element.name == "功能") {
|
||
gonneg.push(element);
|
||
this.catagea = gonneg;
|
||
}
|
||
if (element.name == "年龄") {
|
||
age.push(element);
|
||
this.catage = age;
|
||
}
|
||
if (element.name == "专区") {
|
||
zhuanqu.push(element);
|
||
this.prefecture = gonneg;
|
||
}
|
||
});
|
||
} else if (this.activeIndex1 == 1) {
|
||
this.userdoglisgt.map((element) => {
|
||
if (element.name == "品种") {
|
||
pinzhong.push(element);
|
||
this.catageb = pinzhong;
|
||
}
|
||
if (element.name == "功能") {
|
||
gonneg.push(element);
|
||
this.catagea = gonneg;
|
||
}
|
||
if (element.name == "年龄") {
|
||
age.push(element);
|
||
this.catage = age;
|
||
}
|
||
if (element.name == "专区") {
|
||
zhuanqu.push(element);
|
||
this.prefecture = gonneg;
|
||
}
|
||
});
|
||
}
|
||
},
|
||
userselect() {
|
||
this.$nextTick(() => {
|
||
this.ifadroind();
|
||
});
|
||
},
|
||
usershow() {
|
||
this.$nextTick(() => {
|
||
this.isshow = false;
|
||
// dom元素更新后执行，因此这里能正确打印更改之后的值
|
||
// this.$refs.usercontent.style.display='block ';
|
||
});
|
||
},
|
||
|
||
selectsearch(item, index) {
|
||
this.value = item.title;
|
||
this.activeIndexa = index;
|
||
this.usetmessage(item.title);
|
||
},
|
||
selectage(item, index) {
|
||
if(this.activeIndex=='-1'){
|
||
this.activeIndex=0;
|
||
}
|
||
// debugger;
|
||
// this.userishwo1 = !this.userishwo1;
|
||
let tagUsedAge = {};
|
||
// this.userishwo1 = !this.userishwo1;
|
||
if (item.checked == false) {
|
||
item.checked = true;
|
||
this.userserachlist[0].tagUsedAge = item.tagName;
|
||
this.$refs.chosebox1[index].className = "active";
|
||
} else {
|
||
this.userserachlist[0].tagUsedAge = "";
|
||
item.checked = false;
|
||
this.$refs.chosebox1[index].className = "unactive";
|
||
}
|
||
// if (this.userishwo1 == false) {
|
||
// tagUsedAge = {
|
||
// petType: this.activeIndex1,
|
||
// tagUsedAge: item.tagName,
|
||
// };
|
||
// } else {
|
||
// tagUsedAge = {
|
||
// petType: this.activeIndex1,
|
||
// };
|
||
// }
|
||
// for (let i = 0; i < this.userserachlist.length; i++) {
|
||
// if (!this.userserachlist.includes(tagUsedAge)) {
|
||
// this.userserachlist.push(tagUsedAge);
|
||
// }
|
||
// }
|
||
this.usersearch(this.userserachlist, this.activeIndex1);
|
||
this.activeIndexc = index;
|
||
},
|
||
selectagc(item, index) {
|
||
if(this.activeIndex=='-1'){
|
||
this.activeIndex=0;
|
||
}
|
||
// let tagFunction = {
|
||
// petType: this.activeIndex1,
|
||
// tagFunction: item.tagName,
|
||
// };
|
||
if (item.checked == false) {
|
||
item.checked = true;
|
||
this.$refs.cgosebox4[index].className = "active";
|
||
this.userserachlist[0].tagFunction = item.tagName;
|
||
} else {
|
||
item.checked = false;
|
||
this.$refs.cgosebox4[index].className = "unactive";
|
||
this.userserachlist[0].tagFunction = "";
|
||
}
|
||
|
||
// for (let i = 0; i < this.userserachlist.length; i++) {
|
||
// if (!this.userserachlist.includes(tagFunction)) {
|
||
// this.userserachlist.push(tagFunction);
|
||
// }
|
||
// }
|
||
this.usersearch(this.userserachlist, this.activeIndex1);
|
||
this.activeIndexd = index;
|
||
},
|
||
selectagd(item, index) {
|
||
if(this.activeIndex=='-1'){
|
||
this.activeIndex=0;
|
||
}
|
||
let tagBreed = {};
|
||
if (item.checked == false) {
|
||
item.checked = true;
|
||
this.$refs.chosebox3[index].className = "active";
|
||
this.userserachlist[0].tagBreed = item.tagName;
|
||
} else {
|
||
item.checked = false;
|
||
this.$refs.chosebox3[index].className = "unactive";
|
||
this.userserachlist[0].tagBreed = "";
|
||
}
|
||
// if (this.userishwo3 == false) {
|
||
// tagBreed = {
|
||
// petType: this.activeIndex1,
|
||
// tagBreed: item.tagName,
|
||
// };
|
||
// } else {
|
||
// tagBreed = {
|
||
// petType: this.activeIndex1,
|
||
// };
|
||
// }
|
||
// for (let i = 0; i < this.userserachlist.length; i++) {
|
||
// if (!this.userserachlist.includes(tagBreed)) {
|
||
// this.userserachlist.push(tagBreed);
|
||
// }
|
||
// }
|
||
this.usersearch(this.userserachlist, this.activeIndex1);
|
||
this.activeIndexe = index;
|
||
},
|
||
selectproduct(item, index) {
|
||
this.activeIndexb = index;
|
||
console.log(this.activeIndex);
|
||
if(this.activeIndex=='-1'){
|
||
this.activeIndex=0;
|
||
}
|
||
if (item.checked == false) {
|
||
item.checked = true;
|
||
this.$refs.chosebox[index].className = "active";
|
||
this.userserachlist[0].categoryName = item.tagName;
|
||
} else {
|
||
item.checked = false;
|
||
this.$refs.chosebox[index].className = "unactive";
|
||
this.userserachlist[0].categoryName = "";
|
||
}
|
||
// this.userishwo = !this.userishwo;
|
||
// if (this.userishwo == false) {
|
||
// categoryName = {
|
||
// petType: this.activeIndex1,
|
||
// categoryName: item.tagName,
|
||
// };
|
||
// } else {
|
||
// categoryName = {
|
||
// petType: this.activeIndex1,
|
||
// };
|
||
// }
|
||
console.log(this.userserachlist[0].categoryName);
|
||
// for (let i = 0; i < this.userserachlist.length; i++) {
|
||
// if (!this.userserachlist.includes(categoryName)) {
|
||
// this.userserachlist.push(categoryName);
|
||
// }
|
||
// console.log(this.userserachlist);
|
||
// }
|
||
|
||
this.usersearch(this.userserachlist, this.activeIndex1);
|
||
},
|
||
|
||
//弹框的显示隐藏
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped >
|
||
@import url("../../assets/css/global.less");
|
||
@import url("../../assets/css/search.less");
|
||
</style> |