263 lines
6.1 KiB
Vue
263 lines
6.1 KiB
Vue
<template>
|
|
<view class="search-list-page">
|
|
<HeaderCom></HeaderCom>
|
|
<view class="search">
|
|
<image src="@/static/new/search.png" class="search-icon" mode="aspectFit"></image>
|
|
<input type="text" placeholder="请输入内容" v-model="productName" class="input" placeholder-class="place-class">
|
|
<image src="@/static/new/close.png" class="close" mode="a" v-if="productName" @click="delSearch"></image>
|
|
<view @click="search" class="cancel">搜索</view>
|
|
</view>
|
|
<scroll-view scroll-y="true" class="main">
|
|
<view class="list">
|
|
<view class="item" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
|
|
<view class="shop">
|
|
<image v-if="item.coverResource" :src="item.coverResource.url" class="shop-img" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="name">{{item.name}}</view>
|
|
<view class="point">
|
|
<image src="@/static/an/point.gif" class="point-icon" mode=""></image>
|
|
{{item.point.mall | numberFormat(item.point.mall)}}
|
|
</view>
|
|
<!-- <view class="price">¥{{item.price.sale}}</view> -->
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- 所有页面的弹框 -->
|
|
<page-popup page="/pages/shop/search-list"></page-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { myMixins } from "@/mixins/mixins.js";
|
|
import { productTagsApi,productApi } from '@/API/product.js'
|
|
import {
|
|
productChannelApi,productChannelPointApi
|
|
} from '@/API/shop.js'
|
|
import HeaderCom from '@/pages/components/header.vue'
|
|
export default{
|
|
mixins: [myMixins],
|
|
data(){
|
|
return{
|
|
list:[],
|
|
id:"",
|
|
page:1,
|
|
productName:"",
|
|
sort: "",//sales销量 price价格
|
|
order: "desc",//asc 升 desc降
|
|
total:0
|
|
}
|
|
},
|
|
components:{HeaderCom},
|
|
onLoad(opation) {
|
|
this.id = opation.id ? opation.id : ''
|
|
this.productName = opation.productName ? opation.productName : ''
|
|
this.getList(this.productName)
|
|
},
|
|
methods:{
|
|
goBack(){
|
|
uni.switchTab({
|
|
url:'/pages/shop/index'
|
|
})
|
|
},
|
|
delSearch(){
|
|
this.productName = ''
|
|
this.page = 1
|
|
this.list = []
|
|
this.getList(this.productName)
|
|
},
|
|
search(){
|
|
this.page = 1
|
|
this.list = []
|
|
this.getList(this.productName)
|
|
},
|
|
// 查看详情
|
|
goDetail(item){
|
|
uni.navigateTo({
|
|
url:`/pages/shop/detail?id=${item.id}`
|
|
})
|
|
},
|
|
// 获取商品列表
|
|
getList(productName){
|
|
uni.showLoading()
|
|
// productChannelPointApi({page:this.page,size:10,name:this.productName,}).then(res => {
|
|
// uni.hideLoading()
|
|
// if(res.code === 200){
|
|
// if(this.page > 1){
|
|
// this.list = [...this.list,...res.data.content]
|
|
// }else{
|
|
// this.list = res.data.content
|
|
// }
|
|
// this.total = res.data.total
|
|
// }else{
|
|
// this.$api.msg(res.message)
|
|
// }
|
|
// }).catch(err => {
|
|
// uni.hideLoading()
|
|
// })
|
|
productChannelApi({page:this.page,size:10,name:this.productName,}).then(res => {
|
|
uni.hideLoading()
|
|
if(res.code === 200){
|
|
if(this.page > 1){
|
|
this.list = [...this.list,...res.data.content]
|
|
}else{
|
|
this.list = res.data.content
|
|
}
|
|
this.total = res.data.total
|
|
}else{
|
|
this.$api.msg(res.message)
|
|
}
|
|
}).catch(err => {
|
|
uni.hideLoading()
|
|
})
|
|
// productApi({page:this.page,size:10,name:this.productName,}).then(res => {
|
|
// uni.hideLoading()
|
|
// if(res.code === 200){
|
|
// if(this.page > 1){
|
|
// this.list = [...this.list,...res.data.content]
|
|
// }else{
|
|
// this.list = res.data.content
|
|
// }
|
|
// this.total = res.data.total
|
|
// }else{
|
|
// this.$api.msg(res.message)
|
|
// }
|
|
// }).catch(err => {
|
|
// uni.hideLoading()
|
|
// })
|
|
},
|
|
// 上拉加载
|
|
lowerBottom(){
|
|
if(this.total === this.list.length){
|
|
return
|
|
}
|
|
this.page += 1;
|
|
this.getList()
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page{
|
|
background-color: #f5f5f5;
|
|
}
|
|
.search-list-page{
|
|
padding-top: 112rpx;
|
|
.search{
|
|
height: 88rpx;
|
|
padding: 0 32rpx;
|
|
background-color: #fff;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.search-icon{
|
|
position: absolute;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
top: 22rpx;
|
|
left: 48rpx;
|
|
}
|
|
.input{
|
|
width: 598rpx;
|
|
height: 64rpx;
|
|
background: rgba(0,0,0,0.04);
|
|
border-radius: 16rpx;
|
|
padding: 0 72rpx;
|
|
color: #000;
|
|
font-size: 32rpx;
|
|
}
|
|
.place-class{
|
|
font-size: 32rpx;
|
|
color: rgba(0,0,0,0.45);
|
|
}
|
|
.close{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
position: absolute;
|
|
right: 136rpx;
|
|
top: 28rpx;
|
|
}
|
|
.cancel{
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
.main {
|
|
height: calc(100vh - 200rpx);
|
|
|
|
.list {
|
|
display: grid;
|
|
gap: 22rpx;
|
|
grid-template-rows: 1fr;
|
|
margin: 0px auto;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
padding: 24rpx;
|
|
border-radius: 8rpx;
|
|
|
|
.item {
|
|
width: 340rpx;
|
|
// height: 436rpx;
|
|
padding-bottom: 12rpx;
|
|
background-color: #fff;
|
|
|
|
.shop {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 340rpx;
|
|
height: 240rpx;
|
|
background-image: url('@/static/new/card-shop.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
border-radius: 8rpx 8rpx 0px 0px;
|
|
|
|
.shop-img {
|
|
// width: 192rpx;
|
|
height: 236rpx;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
width: 304rpx;
|
|
max-height: 80rpx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin: 16rpx 0 0 16rpx;
|
|
}
|
|
|
|
.point {
|
|
margin: 8rpx 0 0 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 800;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
.point-icon {
|
|
margin-right: 8rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.price {
|
|
margin-left: 16rpx;
|
|
height: 40rpx;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
display: flex;
|
|
align-items: center;
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |