feat: 优化代码
This commit is contained in:
@@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<view class="search_warp">
|
||||
<!-- 头部搜索 -->
|
||||
<view class="header_comm">
|
||||
<up-image src="/static/common/left.png" width="20" height="20" bgColor="#f1f6ff00" @click="jumpHome"></up-image>
|
||||
<view>
|
||||
<up-input
|
||||
placeholder="搜索关键字（商品、店铺、品牌）"
|
||||
:customStyle="{
|
||||
'border-color':'#7934F6 !important',
|
||||
'padding': '0 0 0 20rpx !important',
|
||||
'border-radius': '20rpx !important',
|
||||
'width': '590rpx',
|
||||
}"
|
||||
v-model="form.keyword"
|
||||
clearable
|
||||
>
|
||||
<template #prefix>
|
||||
<up-image src="/static/common/search.png" width="20" height="20" bgColor="#f1f6ff00" @click="jumpHome"></up-image>
|
||||
</template>
|
||||
<template #suffix>
|
||||
<view class="search_but_warp" @click="searchGYLMall">搜索</view>
|
||||
</template>
|
||||
</up-input>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 历史搜索 -->
|
||||
<view class="search_history" v-if="!poductList || poductList.length === 0">
|
||||
<view class="search_history_title">
|
||||
<view>猜你喜欢</view>
|
||||
<up-image src="/static/common/delete.png" width="20" height="20" bgColor="#f1f6ff00" @click="isShowSearch = true;"></up-image>
|
||||
</view>
|
||||
<view class="search_history_cotent" v-if="searchList && searchList.length !==0">
|
||||
<view v-for="item in searchList" :key="item.id" style="margin: 0 10rpx 10rpx 0;">
|
||||
<up-tag plain :text="item.name" type="warning" :show="true" :closable="isShowSearch" borderColor="#7934F6" color="#7934F6" @close="searchHistoryDelete(item)" @click="searchClick(item)"></up-tag>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="not_order_warp">
|
||||
<view class="not_order_warp_img"><up-image src="/static/common/not_search.png" width="100" height="100" bgColor="#f1f6ff00"></up-image></view>
|
||||
<view class="not_order_msg_warp">暂无搜索记录</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 搜索出内容 -->
|
||||
<view v-else class="poduct_list">
|
||||
<view class="poduct_search_warp">
|
||||
<view>综合</view>
|
||||
<view>销量</view>
|
||||
<view>优惠卷</view>
|
||||
<view>
|
||||
<up-image :src="imgSize === 'big' ? '/static/search/dt.png':'/static/search/xt.png'" width="20" height="20" bgColor="#f1f6ff00" @click="toggleImg"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="poduct_content_warp" >
|
||||
<view v-if="poductList && poductList.length !==0">
|
||||
<!-- 大图 -->
|
||||
<view v-if="imgSize === 'big'" class="big_warp">
|
||||
<view v-for="item in poductList" class="big_item_warp" :key="item.id" @click="jumpInfo(item)">
|
||||
<up-image :src="item.url " width="100%" height="150px" bgColor="#f1f6ff00" radius="10"></up-image>
|
||||
<view class="big_item_content_warp">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="total_or_quantity">
|
||||
<view class="total_">
|
||||
<text>￥</text>
|
||||
<text style="font-size: 36rpx;">{{item.adPrice}}</text>
|
||||
</view>
|
||||
<view>已售{{item.sales}}件</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 小图 -->
|
||||
<view v-if="imgSize === 'min'" class="min_warp">
|
||||
<view v-for="item in poductList" class="min_item_warp" :key="item.id" @click="jumpInfo(item)">
|
||||
<up-image :src="item.url " width="100" height="100" bgColor="#f1f6ff00" radius="10"></up-image>
|
||||
<view class="min_item_content_warp">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="total_or_quantity">
|
||||
<view class="total_">
|
||||
<text>￥</text>
|
||||
<text style="font-size: 36rpx;">{{item.adPrice}}</text>
|
||||
</view>
|
||||
<view>已售{{item.sales}}件</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="not_order_warp">
|
||||
<view class="not_order_warp_img"><up-image src="/static/common/not_search.png" width="100" height="100" bgColor="#f1f6ff00"></up-image></view>
|
||||
<view class="not_order_msg_warp">抱歉没有搜索此类商品~</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { searchList } from '@/api/product.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
searchList:[
|
||||
{
|
||||
id:1,
|
||||
name:'酒',
|
||||
},{
|
||||
id:2,
|
||||
name:'鸿星尔克',
|
||||
},{
|
||||
id:3,
|
||||
name:'361',
|
||||
},{
|
||||
id:4,
|
||||
name:'国美',
|
||||
},{
|
||||
id:5,
|
||||
name:'刘丹',
|
||||
},{
|
||||
id:6,
|
||||
name:'榴莲',
|
||||
},{
|
||||
id:7,
|
||||
name:'会心一笑',
|
||||
},
|
||||
],// 搜索历史记录
|
||||
form:{
|
||||
keyword:null,
|
||||
type:null,
|
||||
categoryId:null,//
|
||||
page:1,
|
||||
pageSize:20,
|
||||
},
|
||||
isShowSearch:false,
|
||||
poductList:[],// 产品列表
|
||||
imgSize:"min",// big:大，min:笑
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
const keyword = option.keyword;
|
||||
if(keyword && keyword !==0 && keyword !== "undefined"){
|
||||
this.form.keyword = keyword;
|
||||
this.searchClickFun();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jumpHome(){
|
||||
uni.switchTab({
|
||||
url: '/pages/home/home',
|
||||
})
|
||||
},
|
||||
|
||||
// 删除历史
|
||||
searchHistoryDelete(item){
|
||||
this.isShowSearch = false;
|
||||
},
|
||||
/**
|
||||
* 查询产品
|
||||
*/
|
||||
async searchClick(item){
|
||||
this.form.keyword = item.name;
|
||||
this.searchGYLMall();
|
||||
},
|
||||
/**
|
||||
* 查询产品
|
||||
*/
|
||||
async searchClickFun(){
|
||||
const form = this.form;
|
||||
|
||||
const params = {
|
||||
page:form.page,
|
||||
pageSize:form.pageSize,
|
||||
}
|
||||
if(form.categoryId){
|
||||
params.categoryId = form.categoryId;
|
||||
}
|
||||
if(form.keyword){
|
||||
params.keyword = form.keyword;
|
||||
}
|
||||
if(form.type){
|
||||
params.type = form.type;
|
||||
}
|
||||
const resp = await searchList(params);
|
||||
if(resp && resp.bizcode === 100){
|
||||
this.poductList = resp.data;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换图大小
|
||||
*/
|
||||
toggleImg(){
|
||||
this.imgSize = this.imgSize === 'big'?'min':'big';
|
||||
},
|
||||
jumpInfo(item){
|
||||
uni.navigateTo({
|
||||
url: '/pages/other_package/productInfo/productInfo?id='+item.id,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search_warp{
|
||||
background-color: $app-bj;
|
||||
height: 100vh;
|
||||
overflow-y: hidden;
|
||||
.search_but_warp{
|
||||
background: $app-bt-bj;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx 40rpx;
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.search_history{
|
||||
padding: 60rpx 40rpx;
|
||||
.search_history_title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.search_history_cotent{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.poduct_list{
|
||||
.poduct_search_warp{
|
||||
background: #FFFFFF;
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10rpx 60rpx;
|
||||
}
|
||||
.poduct_content_warp{
|
||||
padding: 30rpx;
|
||||
height: calc(100vh - 340rpx);
|
||||
overflow-y: auto;
|
||||
.big_warp{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.big_item_warp{
|
||||
width: 48%;
|
||||
margin-bottom: 20rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
.big_item_content_warp{
|
||||
padding: 20rpx;
|
||||
.title{
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.min_warp{
|
||||
.min_item_warp{
|
||||
padding: 30rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.min_item_content_warp{
|
||||
margin-left: 10rpx;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
}
|
||||
.title{
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.total_or_quantity{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 10rpx 0 6rpx;
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.total_{
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
color: #F52D1D;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user