mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-03 10:46:38 +08:00
missing file
This commit is contained in:
Admin
Gitee
parent
ea6dec3032
commit
ea25c14aa3
525
rc-busness/pages/usersearch/search.vue
Normal file
525
rc-busness/pages/usersearch/search.vue
Normal file
@ -0,0 +1,525 @@
|
|||||||
|
<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">
|
||||||
|
<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-prefecture">
|
||||||
|
<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-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" v-if="isshow">
|
||||||
|
<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.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'" >
|
||||||
|
{{ 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 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-prefecture">
|
||||||
|
<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 } from "../../ajax/getData";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: "",
|
||||||
|
activeIndex:0,
|
||||||
|
activeIndex1:0,
|
||||||
|
activeIndexa:'-1',
|
||||||
|
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"),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Myheader,
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.usetmessage();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
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.activeIndex=index;
|
||||||
|
console.log('----');
|
||||||
|
},
|
||||||
|
selectGoodsa(item, index) {
|
||||||
|
|
||||||
|
this.activeIndex1=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) {
|
||||||
|
|
||||||
|
this.activeIndexa=index;
|
||||||
|
},
|
||||||
|
selectage(item, index) {
|
||||||
|
this.activeIndexc=index;
|
||||||
|
},
|
||||||
|
selectagc(item, index) {
|
||||||
|
this.activeIndexd=index;
|
||||||
|
},
|
||||||
|
selectagd(item, index) {
|
||||||
|
this.activeIndexe=index;
|
||||||
|
},
|
||||||
|
selectproduct(item, index){
|
||||||
|
this.activeIndexb=index;
|
||||||
|
},
|
||||||
|
selectage(item, index) {
|
||||||
|
this.activeIndexc=index;
|
||||||
|
},
|
||||||
|
selectage(item, index) {
|
||||||
|
this.activeIndexc=index;
|
||||||
|
},
|
||||||
|
//弹框的显示隐藏
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped >
|
||||||
|
@import url("../../assets/css/search.less");
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user