257 lines
9.4 KiB
Vue
257 lines
9.4 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 头部 -->
|
||
<view class="flood">
|
||
<img
|
||
@click="back"
|
||
class="jiantou"
|
||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAfCAYAAAAFkva3AAAA9ElEQVRIS63UIW5CQRSF4f8YXFeAKHtgBU3qWlPRlWBqcDgSdoCoq6G+qhXV3Q6quWQIkCG8ee/emTd+vsxJ5hzRcMzsHvgA7oBX1Von6AeYnYx1FdYB7YGHMFaAXiR9hTAzS5G+s2jpRUcoRXVjQ5Ab80AuzAsNYhGoF4tCRawG6sRqoRusBbrCWqELNgZ0xMxsCvxmFfkHns4ViaxKwibAZwKyiytJywiUxxwFvBR9jBderUYreDNBLWDnntWCxXGsAXuXNgoOznYEHMTSZ/SCLiwDd8BzqSluzAOGsB5wIWkTxgrgn6R5FZaBW+AReJP0fgD6yKcB+KwshwAAAABJRU5ErkJggg=="
|
||
draggable="true"
|
||
/>
|
||
<view class="input">
|
||
<img
|
||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAC50lEQVRIS7WWz08TURDHv9OSkiYCCZqQKI0EjVExUePJsx5MvEAEPBhveJHuwtuiCKc9ISL7FrtbPejRU/EHJ/Xgv2DUBPyR+DOFAwmYdL0ISTvm2RYLlHZp4Z02b9/MZ2fmO/OWUGKZphlqbNzXycydRHQW4P0AVgHMM+MtEc143tKMaZpqz/eijSeldLsAngBwuIKXL0Q8LIT+zC9tDZZMJoOp1OIYEW7mjT8AeJTN4mUoxN/VXiYTbGfOXgDQB+C42mPGRCTSMtrb25upBF2DWZZzJw9aJSIjnV56YJpmdos0Bxoamq8RkQ0grICxmDbsC2bb8W5mmlZ1IeKLQuivKxmq95blniPiFwBCRNwjhP6knB3lxLD3K4BWAP2God33AyqcsW23n5ldAAuet9xeTjRk2/ErzPQYwFxra8tJP7kv/hhV6/n5xfcAOphxNRbTlK+Si6R0pwFWaRSxWHRqO1EVzlqWO0jEqn5PDUPrLgNzfgA4mM3i2NCQ9qka2OSkczQQwEcAPw1DaysH+wOg3vOW67fbpAWn+bqvKIEZhlZfLo0ewA21wBKJxJ6VlexvHzDnM4AjtaRRSrcD4FkfaaxdIFI6AwCUuMoLpCB9ZsxGIi2nqpF+KrX4jggnKkq/1qaW0rkOIKGauq6OD+m6roRSus9yY8fpIUKylnEF0GXDiCofW661QSylOwHwjRxwe4M4N/05YRiaRkRcNjL1Mj92VJGj+cNzAB4GAplX4XD4m+d5oWAw3AbweWb0qRqVcOoKEdW3Am66PC3LuUSEcZ+X5whz4DTAowUwMxzDiA6UAm6CKSMlmqam5h5m6gLoDMAHcs5oAeA3RPw8nf41XZg4tu2MMWPkf6QUF6J/cCOwJKya+SilcxvArSLbe0JERTFwx2AKYtvxcWYqvrHXAXcUlm+jwu9FLvHEU0Lo4t9zNSmrZFPURuuAuwLLR3iXCEPF0e0aTEGkdCeJssFdTeNWaf4LfE9oKz70n2kAAAAASUVORK5CYII="
|
||
/>
|
||
<input
|
||
type="text"
|
||
placeholder="请输入药名/厂家"
|
||
v-model="value"
|
||
@keydown.enter="onenter"
|
||
@input="onInput"
|
||
/>
|
||
</view>
|
||
<img
|
||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAArCAYAAAA65tviAAAEzElEQVRoQ+2ZW6hVVRSG/7HWGGvvE6UV2c2itOimZEQkpBGEJHUio/QhwUuRYCL1kF2eJHqK8hBJZAbRTbphYJGWhT1YPtRLKUYXwpIudhHRtNp7z7HWiLnbS6bLc99rn3OgM9/2vIzxf3OsveaYYxF6afV6/ZIoipYDuBHAeQAqvc0bwb46gL0AtmRZtr5SqXxd9E1hh5klqvo4gJUA4hEUOhRXKYCnmflBImrkC4+CtCDeATB3KFZHce5WZr4lhzkK4pxbA+D+URQ2HNc9IrLKL2yC1Gq1C+M4/goAB9Z+M7PVIrIZwD4iyobjqd01ZhYBOMs5101EjwI4I7CpaZpeWq1Wv2uCOOeeANAka7VfmflqIvqxXSFlrjezc1X1MwBnBnbXiMgDOchuANPyQTO7M0mSF8sUUZatRqOxlIheCOx9KSLTc5B/AFTzQWaeSER/luW8TDtmNkFVDwU2ayLSlYNYMHBERE4q03nZtpxzhwGcmNsVEeoN5JCInFy28zLtOecOApg4DlLmrrZjazwi7exeJ9aOR6QTu9qOzVIjYmZnq+pDAKaY2WYReY6IwvOoqVVVF5rZAiL63Tn3WFdX1/dFCOecz7iXmdlfZtZTqVR29QdaGoiZiap+AeCywOEqEekJBajqYjN7Kej7hZkvJqIjeZ9zbg6ArQB8cujbYWae1l+eVxpIo9HwCeWnhV3bJSIzwj7nnBd4Q9hHRN3MvCXvU9XnzeyucI6ZrUiSZF1fUSkNpF6vXx5F0c6Co+0icl0BZBOAeYV514rIJ0FEngJwbwF2ETNv6DiId+Cc2wjg9pYzf/28SUQ+KIBcA2BbkJB+xMxzwv9S6y7kU/NTWmt3t64QPpHttZUWEW/dzOI0TW/NsmyymX1YqVT8xey4VqvVLoiiqDuKov1xHL9JRFqc5F8czjkfubqIvE5Ef/cF0drE8Vyrvw0a8bFSH60RVx84HAcZzd3vzff/IiL+lZiXSI2ZhYj82TDmmpmxqvpSaV5cTEWE8zv7TwAmB6pni8iOMUfx30E8G8DHgbafReScJkij0XiViO4IBrcx89yxFhV/CKuqzx6uz7Wa2WtJkixsgqhqt5m9W4jARmZeQUR/jIXImNkkVX0GwPxQDxHdzMybwyK2T+RmFUT7Z9FnuQeI6ACA9+I43tjbvSNcZ2anq+oyAFcAkBI24lQAMwEkBVs7RMQ/akf/ML6QPTWOYy/6tAEcb2Lm+X09dqq6wMyeBeCdd7LtT9N0ZrVa3XMMiP9Rr9enx3H8tplN7U+Bmd2XJMnaQhQmOOfWEtGSTqpviibak6bpvEql4mvWzXbMFyvfYWYnqKr/TnKPL+f3IepzEbkyH3POzSKiV8xsSoch9gFYx8w9xQz5OJDgbRA552ZEUXR+lmWTiGh9IDLzhW4fRFV9BMDDwVU1n+a/p6w1s+IFbMisURQdyrLsBxHZ2dd3mj5Bit6cc98AuCgAXU5EdwO4qjjXzPYS0WIR2T5k1cNcMGiQRqPxMhEtGsiPmW0QkZVEFJb+B1rW9vigQVT1NjN7qx+PB4loOTO/0baqYRgYNIiZkaq+X6yKtHz6u/gSIvKpzqi0QYMEb7TVAJa2Pkp+a2ZPisj6gQ7JTtMNCaTTYtqx/y/2ZXxKzaQkWgAAAABJRU5ErkJggg=="
|
||
draggable="true"
|
||
/>
|
||
</view>
|
||
<view class="zhan"></view>
|
||
|
||
<!-- 搜索框下面的排序栏 -->
|
||
<view v-if="tanchu">
|
||
<view class="end-title tablist">
|
||
<view @click="change(0);sort('goods_id')" :class="{ btna: btnnum == 0 }">综合</view>
|
||
|
||
<view
|
||
:class="{ btna: btnnum == 1 }"
|
||
class="shops"
|
||
@click="
|
||
change(1);
|
||
sort('sale_num');
|
||
"
|
||
>
|
||
<p>销量</p>
|
||
<view class="shopsimgs">
|
||
<img
|
||
v-if="!xiaoliangarr"
|
||
src="/static/home/shangxia_hui.png"
|
||
alt=""
|
||
/>
|
||
<img
|
||
v-if="xiaoliangarr && xiaolianglist"
|
||
src="/static/home/down_paixu.png"
|
||
alt=""
|
||
/>
|
||
<img
|
||
v-if="xiaoliangarr && !xiaolianglist"
|
||
src="/static/home/up_paixu.png"
|
||
alt=""
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view
|
||
:class="{ btna: btnnum == 2 }"
|
||
class="shops"
|
||
@click="
|
||
change(2);
|
||
sort('price');
|
||
"
|
||
>
|
||
<p>价格</p>
|
||
<view class="shopsimgs">
|
||
<img v-if="!jiagearr" src="/static/home/shangxia_hui.png" alt="" />
|
||
<img
|
||
v-if="jiagearr && jiagelist"
|
||
src="/static/home/down_paixu.png"
|
||
alt=""
|
||
/>
|
||
<img
|
||
v-if="jiagearr && !jiagelist"
|
||
src="/static/home/up_paixu.png"
|
||
alt=""
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="end-cont" :class="{ dis: btnnum == 0 }">
|
||
<shoplist :shop="list" class="comm"></shoplist>
|
||
</view>
|
||
<view class="end-cont" :class="{ dis: btnnum == 1 }">
|
||
<shoplist :shop="list" class="comm"></shoplist>
|
||
</view>
|
||
<view class="end-cont" :class="{ dis: btnnum == 2 }">
|
||
<shoplist :shop="list" class="comm"></shoplist>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 搜索不到内容给的提示 -->
|
||
<view class="sousuo" v-if="kon">
|
||
<img src="/static/home/nopic.png" draggable="true" />
|
||
<p>暂无数据</p>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import shoplist from "../../components/shoplist.vue";
|
||
export default {
|
||
data() {
|
||
return {
|
||
//判断搜索内容是否为空
|
||
kong: [],
|
||
//判断搜索内容标志位
|
||
kon: false,
|
||
value: "",
|
||
list: [],
|
||
//标准位，取消重复发生ajax请求
|
||
flag: false,
|
||
//保存明星爆款传来的值
|
||
hots: [],
|
||
//保存九宫格传来的id
|
||
newlist: [],
|
||
//保存轮播图传来的id
|
||
bann: [],
|
||
//tab栏切换
|
||
btnnum: 0,
|
||
//判断tab切换是否出现
|
||
tanchu: false,
|
||
//判断是否点击了销量
|
||
xiaoliangarr: false,
|
||
//判断是否点击了价格
|
||
jiagearr: false,
|
||
//销量
|
||
xiaolianglist: false,
|
||
//价格
|
||
jiagelist: false,
|
||
//排序
|
||
order: false,
|
||
sortType: null,
|
||
};
|
||
},
|
||
onLoad(el) {
|
||
this.hots = el.key;
|
||
this.newlist = el.newlist;
|
||
this.bann = el.banner;
|
||
},
|
||
created() {
|
||
//判断明星爆款是否传来了值
|
||
if (this.hots != null || this.newlist != null || this.bann != null) {
|
||
this.getsearch();
|
||
}
|
||
},
|
||
methods: {
|
||
//搜索接口
|
||
async getsearch() {
|
||
let res = await this.$http.index.search({
|
||
//根据关键字搜索
|
||
search_words: this.value || this.hots,
|
||
//根据id搜索
|
||
activity_id: this.newlist || this.bann,
|
||
});
|
||
//这里写true的原因就是首页点进来进入搜索页面tab栏切换也要打开
|
||
this.tanchu = true;
|
||
|
||
//price 是价格-----------------sale_num 是销售数量
|
||
console.log(res.data.data);
|
||
this.list = res.data.data;
|
||
//判断搜索内容是否为空
|
||
if (this.list.length == 0) {
|
||
this.kon = !this.kon;
|
||
}
|
||
},
|
||
//键盘确认键按下事件
|
||
onenter() {
|
||
if (this.value.length != 0) {
|
||
if (this.flag == true) {
|
||
this.getsearch();
|
||
this.flag = false;
|
||
this.tanchu = true;
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: "关键词不能为空",
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
//当输入框内的值为0，清空搜索内容
|
||
this.list = "";
|
||
this.tanchu = false;
|
||
}
|
||
},
|
||
//输入框事件
|
||
onInput() {
|
||
this.flag = true;
|
||
},
|
||
//点击返回上一层
|
||
back() {
|
||
uni.navigateBack();
|
||
},
|
||
//tab栏切换事件 0-综合 1-销量 2-价格
|
||
change(e) {
|
||
//判断当前点击位置是否是综合
|
||
if (e == 0) {
|
||
}
|
||
//当前点击的位置等于销量
|
||
if (e == 1) {
|
||
this.xiaoliangarr = true;
|
||
this.jiagearr = false;
|
||
this.xiaolianglist = !this.xiaolianglist;
|
||
}
|
||
//当前点击的位置等于价格
|
||
if (e == 2) {
|
||
this.xiaoliangarr = false;
|
||
this.jiagearr = true;
|
||
this.jiagelist = !this.jiagelist;
|
||
}
|
||
this.btnnum = e;
|
||
console.log("当前点击的下标", e);
|
||
},
|
||
//实现排序
|
||
sort(type) {
|
||
this.order = !this.order; // 更改为 升序或降序
|
||
this.sortType = type;
|
||
this.list.sort(this.compare(type));
|
||
},
|
||
// 排序方法
|
||
compare(attr) {
|
||
let that = this;
|
||
return function (a, b) {
|
||
let val1 = a[attr];
|
||
let val2 = b[attr];
|
||
|
||
if (that.order) {
|
||
return val1 - val2;
|
||
} else {
|
||
return val2 - val1;
|
||
}
|
||
};
|
||
},
|
||
},
|
||
components: {
|
||
shoplist,
|
||
},
|
||
computed: {},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
@import "../../common/less/page/search.less";
|
||
/deep/.shoplist {
|
||
margin-top: 20rpx;
|
||
}
|
||
/deep/.shoplist:first-child {
|
||
margin-top: 100rpx;
|
||
}
|
||
</style>
|