yurong/pageOne/indexs/search.vue

73 lines
2.2 KiB
Vue

<template>
<view>
<view class="w100 h-186" style="background-image: linear-gradient(to bottom,#F2BCBF,#F7F6FA);">
<uni-nav-bar left-icon="back" title="搜索" :border="false" backgroundColor="transparent" class="fw-b" @clickLeft="$tools.goBack()"></uni-nav-bar>
</view>
<view class="w100 rowsc rows mb-20">
<view class="w-710 h-80 bgff br-100 rows rowsm pl-20 pr-6 rowsb">
<view class="rows rowsm">
<image class="w-30 h-32 mr-12" src="/static/images/01_ss.png" mode=""></image>
<input type="text" placeholder="请输入您要搜索的信息" class="fs-28 w-510" v-model="name" @input="onInput"/>
</view>
<view class="w-120 h-68 br-100 bg rows rowsm rowsc colfff fs-28" @click="sousuo">搜索</view>
</view>
</view>
<scroll-view scroll-y="true" style="height: calc(100vh - 330rpx);">
<view class="w100 rows rowsc">
<view class="w-690 h-332 rows rowsw rowsb" v-if="list.length>0">
<view class="rows rowsl w-332 rowsm mb-20 bgff br-20 pb-10" v-for="(item,index) in list" :key="index"
@click="$tools.goNext(`/pageOne/indexs/detail?id=${item.name}`)">
<image class="w-332 h-322 br-20" :src="$tools.oss(item.image)" mode="aspectFill"></image>
<view class="w100 pl-10 pr-10 one_overflow fs-28 mt-10 fw-b">
{{item.name}}
</view>
<view class="w100 rows rowsm pl-10 pr-10 mt-10 rowsb">
<text class="fs-30 fw-b" style="color: #E43B3B;">¥{{item.price}}</text>
</view>
</view>
</view>
<view class="w100 rows rowsc h-600 rowsm" v-else>
<image class="w-436 h-366" src="/static/other/5.png" mode=""></image>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
name:'',
list:[]
}
},
onLoad() {
this.shop()
},
methods: {
shop(){
this.$tools.axios("POST","shop/shop",{
name:this.name
}).then(res => {
this.list = res.data
})
},
sousuo(){
if(this.name == '') return this.$tools.showtt('搜索内容不能为空')
this.shop()
},
onInput(e){
if(e.detail.value==''){
this.shop()
}
}
}
}
</script>
<style>
page{
background-color: #F7F6FA;
}
</style>