smart-admin/rc-busness/pages/usersearch/search.vue
2022-01-11 15:24:00 +08:00

759 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div>
<Myheader></Myheader>
<div class="rc-top">
<div class="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>
<div class="rc-title">
<h2>热门搜索</h2>
<span class="rc-change">换一批</span>
</div>
<div class="rc-variety">
<ul>
<li v-for="(item, index) in searchdata" :key="index" @click="selectsearch(item, index)" :class="activeIndexa == index ? 'active' : 'unactive'">
{{ item.title }}
</li>
</ul>
</div>
<div class="usercontentshow" ref="usercontent">
<div class="rc-product">
<h2>我想搜</h2>
<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'" >
<img :src="item.catimage" alt="" />
<span>{{ item.title }}</span>
</div>
<div class="rc-productright" @click="userselect">
<img src="../../assets/image/rc-usericon.png" alt="" />
<span @click="usershow()">筛选</span>
</div>
</div>
</div>
<div class="rc-age">
<h2>专区:</h2>
<ol class="ts-scrollable">
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
{{ item.tagName }}
</li>
</ol>
</div>
<div class="rc-age">
<h2>年龄:</h2>
<ol class="ts-scrollable">
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
{{ item.tagName }}
</li>
</ol>
</div>
<div class="rc-contair">
<ul>
<li v-for="(item,index) in rccontair" :key="index">
<div class="rc-click" @click="selectproduce(item)">
<div class="rc-rccontair">
<img :src=item.picture alt="">
</div>
<span>{{item.name}}</span>
<i>{{item.price}}</i>
</div>
<strong @click="userbuy()">立即购买</strong>
</li>
</ul>
</div>
</div>
</div>
<div class="usershow" v-if="openshow">
<div class="rc-show">
</div>
</div>
</div>
<div v-if="isadrond">
<div class="rc-mubu" v-if="isshow" @click="usershow()">
</div>
<div class="rc-bottom rc-main" 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="selectGoods(item, index)" :class="activeIndex1 == index ? 'active' : 'unactive'" >
<img :src="item.catimage" alt="" />
<span>{{ item.title }}</span>
</div>
</div>
<div class="rc-age">
<h2>专区:</h2>
<ol class="ts-scrollable">
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
{{ item.tagName }}
</li>
</ol>
</div>
<div class="rc-age">
<h2>年龄:</h2>
<ol class="ts-scrollable">
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
{{ item.tagName }}
</li>
</ol>
</div>
<div class="rc-age">
<h2>功能:</h2>
<ol class="ts-scrollable">
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
{{ item.tagName }}
</li>
</ol>
</div>
<div class="rc-age">
<h2>品种:</h2>
<ol class="ts-scrollable">
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
{{ 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"
>
<div class="rc-bottom">
<div class="rc-bottoma" >
<div class="rc-productcat">
<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.name }}</span>
</div>
</div>
<div class="rc-age">
<h2>专区:</h2>
<ol>
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
{{ item.title }}
</li>
</ol>
</div>
<div class="rc-age">
<h2>年龄:</h2>
<ol>
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
{{ item.title }}
</li>
</ol>
</div>
<div class="rc-age">
<h2>功能:</h2>
<ol>
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
{{ item.title }}
</li>
</ol>
</div>
<div class="rc-age">
<h2>品种:</h2>
<ol>
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
{{ item.title }}
</li>
</ol>
</div>
</div>
</div>
<div class="rc-button">
<span @click="openclose()">取消</span>
<em>确认</em>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import Myheader from '~/components/header.vue'
import { biaome,userstype,searchchanpin } from "../../ajax/getData";
export default {
data() {
return {
value: "",
userserachlist:[
{
}
],
userstype:[],
activeIndex:0,
activeIndex1:0,
activeIndexa:0,
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,
},
mounted(){
this.usetmessage();
this.userst();
},
methods: {
async usersearch(stype){
let data=await searchchanpin(stype);
console.log(data);
if(data){
this.rccontair=data;
}
},
async userst() {
let pinzhong=[];
let zhuanqu=[];
let age=[];
let gonneg=[];
let data = await userstype();
if(data){
this.userstype=data;
}
this.usercatlist=this.userstype.filter(item=>item.petType=='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
}
})
this.userdoglisgt=this.userstype.filter(item=>item.petType=='1')
// console.log(this.userdoglisgt)
// console.log(this.usercatlist,this.userdoglisgt);
// if(this.userstype[i].name=='品种'){
// pinzhong.push(this.userstype[i]);
//
// }
// else if(this.userstype[i].name=='专区'){
// zhuanqu.push(this.userstype[i]);
// this.prefecture=zhuanqu
// }
// else if(this.userstype[i].name=='年龄'){
// age.push(this.userstype[i]);
// this.catage=age;
// }
// else if(this.userstype[i].name=='功能'){
// gonneg.push(this.userstype[i]);
// this.catagea=gonneg;
// }
console.log(pinzhong,zhuanqu,age,gonneg);
console.log(this.userstype);
},
async usetmessage() {
let data = await biaome(this.value,10);
if(data){
this.rccontair=data;
}
console.log( this.rccontair);
},
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;
},
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.value);
console.log(e);
},
selectGoods(item, index) {
this.activeIndex1=index;
let petType={
petType:this.activeIndex1,
}
for(let i =0;i<this.userserachlist.length;i++){
if(!this.userserachlist.includes(petType)){
this.userserachlist.push(petType)
}
console.log(this.userserachlist);
}
this.usersearch(this.userserachlist)
console.log(index);
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=gonneg
}
})
console.log(pinzhong);
}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
}
})
}
console.log(index);
console.log('----');
this.activeIndex=index;
console.log('----');
},
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
}
})
console.log(pinzhong);
}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
}
})
}
console.log(index);
console.log('----');
},
userselect(){
this.$nextTick(() => {
this.ifadroind();
console.log( this.$refs.usercontent)
})
},
usershow(){
this.$nextTick(() => {
this.isshow=false;
// dom元素更新后执行因此这里能正确打印更改之后的值
this.$refs.usercontent.style.display='block ';
})
},
selectsearch(item, index) {
console.log(item)
this.value=item.title;
this.activeIndexa=index;
},
selectage(item, index) {
console.log(item)
let tagUsedAge={
petType:this.activeIndex1,
tagUsedAge:item.tagName
}
for(let i =0;i<this.userserachlist.length;i++){
if(!this.userserachlist.includes(tagUsedAge)){
this.userserachlist.push(tagUsedAge)
}
console.log(this.userserachlist);
}
this.usersearch(this.userserachlist)
this.activeIndexc=index;
},
selectagc(item, index) {
console.log(item)
let tagFunction={
petType:this.activeIndex1,
tagFunction:item.tagName
}
for(let i =0;i<this.userserachlist.length;i++){
if(!this.userserachlist.includes(tagFunction)){
this.userserachlist.push(tagFunction)
}
console.log(this.userserachlist);
}
this.usersearch(this.userserachlist)
this.activeIndexd=index;
},
selectagd(item, index) {
console.log(item)
let tagBreed={
petType:this.activeIndex1,
tagBreed:item.tagName
}
for(let i =0;i<this.userserachlist.length;i++){
if(!this.userserachlist.includes(tagBreed)){
this.userserachlist.push(tagBreed)
}
console.log(this.userserachlist);
}
this.usersearch(this.userserachlist)
this.activeIndexe=index;
},
selectproduct(item, index){
console.log(item)
this.activeIndexb=index;
let categoryName={
petType:this.activeIndex1,
categoryName:item.tagName,
}
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)
},
// selectage(item, index) {
// this.activeIndexc=index;
// },
// selectage(item, index) {
// this.activeIndexc=index;
// },
//弹框的显示隐藏
},
};
</script>
<style lang="less" scoped >
@import url("../../assets/css/global.less");
@import url("../../assets/css/search.less");
</style>