添加收藏茶室接口和完善茶室详情
This commit is contained in:
wangxiaowei
@ -1,5 +1,6 @@
|
||||
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
|
||||
<route lang="jsonc" type="page">{
|
||||
"needLogin": true,
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
// 'custom' 表示开启自定义导航栏，默认 'default'
|
||||
@ -11,57 +12,125 @@
|
||||
<view class="">
|
||||
<view class="home-bg">
|
||||
<view class="home-bg w-[100vw] fixed top-0 left-0 z-100">
|
||||
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
|
||||
<template #left>
|
||||
<view class="flex items-center" @click="search.back">
|
||||
<wd-img width="48rpx" height="48rpx" :src="`${OSS}icon/icon_arrow_left.png`" />
|
||||
<wd-navbar safeAreaInsetTop custom-class='!bg-[#F6F7F8]' :bordered="false" placeholder>
|
||||
<template #left>
|
||||
<view class="h-48rpx flex items-center">
|
||||
<view class="mt-4rpx" @click="router.navigateBack()">
|
||||
<wd-icon name="thin-arrow-left" size="30rpx"></wd-icon>
|
||||
</view>
|
||||
</template>
|
||||
<template #title>
|
||||
<view class="search-box flex items-center ml-26rpx">
|
||||
<wd-search v-model="keywords" placeholder="搜索茶址名称" hide-cancel placeholder-left
|
||||
placeholderStyle="text-align:left;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;"></wd-search>
|
||||
<view class="search-box ml-20rpx">
|
||||
<wd-search
|
||||
v-model="keywords"
|
||||
hide-cancel
|
||||
placeholder-left
|
||||
light
|
||||
placeholder="搜索茶址名称"
|
||||
placeholderStyle="text-align:left;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;"
|
||||
@search="Search.handleSearch">
|
||||
</wd-search>
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mx-30rpx mt-30rpx" :style="{ paddingTop: navbarHeight + 'px' }">
|
||||
<view class="flex justify-between items-center">
|
||||
<view class="flex justify-between items-center" @click="Search.handleClearHistory">
|
||||
<view class="text-30rpx leading-42rpx text-[#303133] font-bold">历史搜索</view>
|
||||
<wd-icon name="delete-thin" size="22px" color="9D9D9D"></wd-icon>
|
||||
</view>
|
||||
|
||||
<view class="mt-40rpx flex flex-wrap items-center">
|
||||
<view class="bg-[#F8F9FA] rounded-28rpx w-112rpx h-56rpx text-center text-[#606266] text-26rpx leading-56rpx mr-20rpx mb-24rpx" v-for="(item, index) in 10" :key="index">
|
||||
茶叶
|
||||
<view class="bg-[#F8F9FA] rounded-28rpx w-112rpx h-56rpx text-center text-[#606266] text-26rpx leading-56rpx mr-20rpx mb-24rpx" v-for="(item, index) in searchHistory" :key="index">
|
||||
{{ item.content }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 删除历史 -->
|
||||
<wd-message-box selector="wd-message-box-slot"></wd-message-box>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { getNavBarHeight } from '@/utils/index'
|
||||
import { getTeaRoomSearchHistory, clearTeaRoomSearchHistory } from '@/api/tea-room'
|
||||
import { router } from '@/utils/tools'
|
||||
import { useMessage } from 'wot-design-uni'
|
||||
|
||||
let navbarHeight = ref(0)
|
||||
let OSS = inject('OSS')
|
||||
const navbarHeight = ref(0)
|
||||
|
||||
// 提示框
|
||||
const message = useMessage('wd-message-box-slot')
|
||||
|
||||
// 搜索关键词
|
||||
const keywords = ref<string>('')
|
||||
|
||||
onLoad(() => {
|
||||
navbarHeight.value = getNavBarHeight()
|
||||
// 搜索历史
|
||||
const searchHistory = ref<Array<any>>([])
|
||||
|
||||
onShow(() => {
|
||||
Search.handleInit()
|
||||
})
|
||||
|
||||
const search = {
|
||||
back: () => {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
onLoad((args) => {
|
||||
navbarHeight.value = getNavBarHeight()
|
||||
keywords.value = args.keywords || ''
|
||||
})
|
||||
|
||||
const Search = {
|
||||
// 初始化
|
||||
handleInit: () => {
|
||||
console.log("🚀 ~ Search.handleInit:")
|
||||
getTeaRoomSearchHistory().then( res => {
|
||||
searchHistory.value = res.list
|
||||
console.log('搜索历史123', res.list)
|
||||
})
|
||||
},
|
||||
|
||||
// 搜索
|
||||
handleSearch: () => {
|
||||
const params = {
|
||||
keywords: keywords.value
|
||||
}
|
||||
uni.$emit('refreshTeaRoomList', params)
|
||||
router.navigateBack()
|
||||
},
|
||||
|
||||
// 清除搜索历史
|
||||
handleClearHistory: () => {
|
||||
message.confirm({
|
||||
title: '删除',
|
||||
msg: '是否清空搜索历史',
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
cancelButtonProps: {
|
||||
customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||||
},
|
||||
confirmButtonProps: {
|
||||
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||||
}
|
||||
}).then((res) => {
|
||||
// 点击确认按钮回调事件
|
||||
if (res.action === 'confirm') {
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '删除中...',
|
||||
mask: true
|
||||
})
|
||||
clearTeaRoomSearchHistory().then(() => {
|
||||
searchHistory.value = []
|
||||
uni.hideLoading()
|
||||
})
|
||||
} catch (e) {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
}).catch(() => {
|
||||
// 点击取消按钮回调事件
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user