shop-applet/pages/product/addGoodDetail/goodsSearch.vue

159 lines
3.5 KiB
Vue

<template>
<view class="content">
<view class="" style="padding: 30rpx;">
<u-search v-model="keyword" :showAction="true" actionText="搜索" :animation="true"
@change="hdChange"></u-search>
</view>
<view class="" v-if='!keyword' style="padding-left: 44rpx;">
<view style="margin: 60rpx 0 30rpx 14rpx;">
常用分类
</view>
<view class="types">
<view class="types-li" v-for="(item,index) in typeList" @click='hdChose(item)'>
{{item.label}}
</view>
</view>
<view style="margin: 60rpx 0 30rpx 14rpx;">
热门分类
</view>
<view class="types">
<view class="types-li" v-for="(item,index) in hotList" @click='hdChose(item)'>
{{item.label}}
</view>
</view>
</view>
<view class="" v-else style="margin: 10rpx 0 0 30rpx;">
<view class="" v-if='searchList.length'>
<view class="keyword-li" v-for='item in searchList' @click='hdChose(item)'>
{{item.label}}
<u-line direction="row" color="#ECECEC"></u-line>
</view>
</view>
<view v-else style="text-align: center;margin-top: 50rpx;">
暂无搜索结果,点击 <text @click="navgo" style='color:#35BC3E;text-decoration: underline;'>手动选择</text>
</view>
</view>
</view>
</template>
<script>
import {
categorySearch,
categoryHotcate,
categorySearchHistory,
} from '@/api/product.js'
export default {
data() {
return {
formData: {},
type: 'detail',
keyword: "",
mer_id: "",
searchList: [],
hotList: [],
typeList: []
}
},
methods: {
hdChange() {
console.log(this.searchList)
categorySearch(this.mer_id, {
keyword: this.keyword
}).then(res => {
this.searchList = res.data
})
},
navgo() {
uni.redirectTo({
url: `/pages/product/addGoodDetail/goodsType?mer_id=${this.mer_id}&&type=${this.type}&&formData=${JSON.stringify(this.formData)}`
})
},
hdChose(item) {
this.formData.cate_name = item.label.includes('--') ? item.label
.split('--')[1] : item.label;
this.formData.cate_id = item.value
categorySearchHistory(this.mer_id, this.$store.state.app.userInfo.uid, {
cate_id: item.value
})
uni.redirectTo({
url: `/pages/product/addGood/addGood?mer_id=${this.mer_id}&&formData=${JSON.stringify(this.formData)}`
})
},
initFormData(option) {
this.mer_id = option.mer_id
if (option.type) {
this.type = 'simple'
}
this.formData = JSON.parse(option.formData)
}
},
onLoad(option) {
this.initFormData(option)
categoryHotcate(
option.mer_id,
this.$store.state.app.userInfo.uid
).then(res => {
this.hotList = res.data.hot_cate.map(item => ({
label: item.cate_name,
value: item.store_category_id
}))
this.typeList = res.data.active_cate.map(item => ({
label: item.cate_name,
value: item.store_category_id
})
)
})
}
}
</script>
<style lang='scss'>
.MediumFont {
font-family: PingFangFamily;
}
.RegularFont {
font-family: PingFangRegular;
}
.content {
box-sizing: border-box;
background-color: #FFFFFF;
min-height: 100vh;
position: relative;
font-size: 28rpx;
font-family: PingFangRegular;
.types {
display: flex;
flex-wrap: wrap;
.types-li {
background-color: #F6F6F6;
border-radius: 8rpx 8rpx 8rpx 8rpx;
padding: 16rpx 24rpx;
margin-bottom: 46rpx;
margin-right: 20rpx;
}
}
.keyword-li {
padding-right: 30rpx;
/* background-color: #F6F6F6; */
height: 100rpx;
line-height: 100rpx;
}
.keyword-li:active {
background-color: #F6F6F6;
}
}
</style>