宠物陪伴页面、宠物陪遛页面初始化、新增搜索框功能

This commit is contained in:
aiShuiJiaoDeXioShou 2024-09-09 18:04:31 +08:00
parent c4bf54a03a
commit b52c66ff9a
11 changed files with 174 additions and 9 deletions

View File

@ -1,6 +1,9 @@
<template> <template>
<view <view
class="pos-fixed z-999 left-[20px] top-[10px] flex gap-[10px] items-center content-center justify-center" :class="[
'pos-fixed z-999 left-[10px] flex gap-[10px] items-center content-center justify-center',
isH5 ? 'top-[20px]' : 'top-[40px]',
]"
> >
<image src="/static/addresscell/location.png" class="w-[30px]" mode="widthFix" /> <image src="/static/addresscell/location.png" class="w-[30px]" mode="widthFix" />
<view> <view>
@ -15,6 +18,7 @@
<script lang="js" setup> <script lang="js" setup>
import { getLocation, getMapDetailAddress } from '@/service/mapService' import { getLocation, getMapDetailAddress } from '@/service/mapService'
import { isH5 } from '@/utils/platform'
const addressDetail = ref({}) const addressDetail = ref({})
// //

View File

@ -0,0 +1,78 @@
<template>
<view class="w-full h-full">
<wd-search
v-model="value"
placeholder="每一次搜索与众不同"
cancel-txt="搜索"
@search="search"
@cancel="search"
>
<template #prefix>
<wd-popover mode="menu" :content="menu" @menuclick="changeSearchType">
<view class="search-type">
<text>{{ searchType }}</text>
<wd-icon custom-class="icon-arrow" name="fill-arrow-down"></wd-icon>
</view>
</wd-popover>
</template>
</wd-search>
</view>
</template>
<script lang="js" setup>
const searchType = ref('全部')
const value = ref('')
const menu = ref([
{
content: '全部',
},
{
content: '上门服务',
},
{
content: '宠物陪伴',
},
{
content: '宠物陪遛',
},
{
content: '宠物商城',
},
])
//
const search = ({ value }) => {}
//
const changeSearchType = ({ item, index }) => {
searchType.value = item.content
}
</script>
<style lang="scss" scoped>
.search-type {
position: relative;
height: 30px;
line-height: 30px;
padding: 0 8px 0 16px;
}
.search-type::after {
position: absolute;
content: '';
width: 1px;
right: 0;
top: 5px;
bottom: 5px;
background: rgba(0, 0, 0, 0.25);
}
.search-type {
:deep(.icon-arrow) {
display: inline-block;
font-size: 20px;
vertical-align: middle;
}
}
.wd-search {
background-color: #ff8261;
}
</style>

View File

@ -234,6 +234,14 @@
"navigationBarTitleText": "发布页面" "navigationBarTitleText": "发布页面"
} }
}, },
{
"path": "pages/service/accompany",
"type": "page",
"layout": "default",
"style": {
"navigationBarTitleText": "宠物陪伴"
}
},
{ {
"path": "pages/service/detail", "path": "pages/service/detail",
"type": "page", "type": "page",
@ -257,6 +265,14 @@
"navigationBarTitleText": "服务页面" "navigationBarTitleText": "服务页面"
} }
}, },
{
"path": "pages/service/knowledge",
"type": "page",
"layout": "default",
"style": {
"navigationBarTitleText": "宠物宝典"
}
},
{ {
"path": "pages/service/my-service", "path": "pages/service/my-service",
"type": "page", "type": "page",

View File

@ -11,7 +11,12 @@
<view class="container"> <view class="container">
<Banner /> <Banner />
<AddressCell /> <AddressCell />
<!-- 这里放搜索框 -->
<view class="w-[80vw] pos-absolute top-[53vw]">
<Search />
</view>
<loading-animation v-model="isLoading" /> <loading-animation v-model="isLoading" />
<view class="index"> <view class="index">
<view <view
v-if="petInfo?.id" v-if="petInfo?.id"
@ -41,7 +46,7 @@
<view class="service-card small-card" @click="toPath('/pages/service/slippery')"> <view class="service-card small-card" @click="toPath('/pages/service/slippery')">
<image :src="imgUrl('@/static/home/cwpl.png')" class="service-image" mode="widthFix" /> <image :src="imgUrl('@/static/home/cwpl.png')" class="service-image" mode="widthFix" />
</view> </view>
<view class="service-card small-card" @click="toPath('/pages/service/door')"> <view class="service-card small-card" @click="toPath('/pages/service/search')">
<image :src="imgUrl('@/static/home/smfw.png')" class="service-image" mode="widthFix" /> <image :src="imgUrl('@/static/home/smfw.png')" class="service-image" mode="widthFix" />
</view> </view>
</view> </view>
@ -80,6 +85,7 @@ import { imgUrl, toast } from '@/utils/commUtils'
import { httpGet } from '@/utils/http' import { httpGet } from '@/utils/http'
import Tabbar from '@/components/Tabbar.vue' import Tabbar from '@/components/Tabbar.vue'
import AddressCell from '@/components/AddressCell.vue' import AddressCell from '@/components/AddressCell.vue'
import Search from '@/components/Search.vue'
const isLoading = ref(false) const isLoading = ref(false)
const petInfo = ref({}) const petInfo = ref({})

View File

@ -151,13 +151,15 @@ const auth = async () => {
toast('您还未实名认证,请先实名认证!') toast('您还未实名认证,请先实名认证!')
try { try {
const res = await isBindPhone() const res = await isBindPhone()
if (res.code == 200 && res.data) { if (res.code != 200 || !res.data) {
toast('您手机号还未绑定!') toast('您手机号还未绑定!')
uni.navigateTo({ url: '/pages/permission/phone-auth' }) uni.navigateTo({ url: '/pages/permission/bind-phone' })
return
} }
} catch (e) { } catch (e) {
console.log('手机号发送验证信息失败:', e) console.log('手机号发送验证信息失败:', e)
} }
toast('请先实名认证!')
// //
uni.navigateTo({ url: '/pages/permission/real-name-auth' }) uni.navigateTo({ url: '/pages/permission/real-name-auth' })
return return

View File

@ -0,0 +1,16 @@
<route lang="json5" type="page">
{
layout: 'default',
style: {
navigationBarTitleText: '宠物陪伴',
},
}
</route>
<template>
<view class=""></view>
</template>
<script lang="js" setup></script>
<style lang="scss" scoped></style>

View File

@ -0,0 +1,16 @@
<route lang="json5" type="page">
{
layout: 'default',
style: {
navigationBarTitleText: '宠物宝典',
},
}
</route>
<template>
<view class=""></view>
</template>
<script lang="js" setup></script>
<style lang="scss" scoped></style>

View File

@ -1,6 +1,9 @@
import { toast } from '@/utils/commUtils' import { toast } from '@/utils/commUtils'
import { httpGet } from '@/utils/http' import { httpGet } from '@/utils/http'
const CACHE_KEY = 'lastLocation'; // 缓存位置的键
const THROTTLE_TIME = 30000; // 30秒内不能重复获取
// 通过高德地图api获取详细位置 // 通过高德地图api获取详细位置
export const getReverseGeocoding = async (longitude, latitude) => { export const getReverseGeocoding = async (longitude, latitude) => {
try { try {
@ -39,20 +42,36 @@ export const getMapDetailAddress = async (longitude, latitude) => {
// 获取当前经纬度信息 // 获取当前经纬度信息
export const getLocation = async () => { export const getLocation = async () => {
const currentTime = Date.now()
// 从本地缓存中获取上次的位置信息
const cachedLocation = uni.getStorageSync(CACHE_KEY)
// 如果有缓存并且未超过30秒直接返回缓存的位置信息
if (cachedLocation && currentTime - cachedLocation.time < THROTTLE_TIME) {
return cachedLocation.data // 返回缓存中的数据
}
try { try {
const res = await new Promise((resolve, reject) => { const res = await new Promise((resolve, reject) => {
uni.getLocation({ uni.getLocation({
type: 'gcj02', // 可以指定返回的经纬度类型,如 'gcj02'、'wgs84'等 type: 'gcj02',
success: (res) => { success: (res) => {
resolve(res) // 成功时返回结果 resolve(res) // 成功时返回结果
}, },
fail: (err) => { fail: (err) => {
reject(err) // 失败时抛出错误 reject(err) // 失败时抛出错误
}, },
}) });
});
// 成功获取到位置信息后,缓存到本地存储
uni.setStorageSync(CACHE_KEY, {
data: res,
time: currentTime, // 记录获取位置的时间戳
}) })
// 返回获取到的地理位置信息
return res return res // 返回最新的位置信息
} catch (err) { } catch (err) {
console.log(err) console.log(err)
toast('获取位置失败') toast('获取位置失败')

View File

@ -1,4 +1,5 @@
import { useUserStore } from "@/store" import { useUserStore } from "@/store"
import { httpGet } from "@/utils/http"
// 获取用户信息并且更新缓存 // 获取用户信息并且更新缓存
// 返回用户详细信息 // 返回用户详细信息

View File

@ -33,9 +33,11 @@ interface NavigateToOptions {
"/pages/push/goods" | "/pages/push/goods" |
"/pages/push/index" | "/pages/push/index" |
"/pages/push/share" | "/pages/push/share" |
"/pages/service/accompany" |
"/pages/service/detail" | "/pages/service/detail" |
"/pages/service/door" | "/pages/service/door" |
"/pages/service/index" | "/pages/service/index" |
"/pages/service/knowledge" |
"/pages/service/my-service" | "/pages/service/my-service" |
"/pages/service/search" | "/pages/service/search" |
"/pages/service/shop" | "/pages/service/shop" |

View File

@ -84,6 +84,11 @@ public class UsersServiceImpl extends ServiceImpl<UsersMapper, Users> implements
@Override @Override
public GlobalResponse<String> getMhCode(String phone) { public GlobalResponse<String> getMhCode(String phone) {
// 判断上一次验证码是否失效
if (redisCache.hasKey(phone)) {
return GlobalResponse.failure("您在一分钟前已经获取过验证码了!");
}
// 获取配置数据 // 获取配置数据
String smsapi = "http://api.smsbao.com/"; String smsapi = "http://api.smsbao.com/";
String user = "549555305"; // 短信平台帐号 String user = "549555305"; // 短信平台帐号
@ -100,7 +105,7 @@ public class UsersServiceImpl extends ServiceImpl<UsersMapper, Users> implements
if ("0".equals(result) || ProfileUtil.isDebug()) { // 发送成功 if ("0".equals(result) || ProfileUtil.isDebug()) { // 发送成功
log.debug("验证码:" + code); log.debug("验证码:" + code);
// 将验证码存入缓存 // 将验证码存入缓存
redisCache.set(phone, code, 5, TimeUnit.MINUTES); redisCache.set(phone, code, 1, TimeUnit.MINUTES);
return GlobalResponse.success("验证码获取成功", code); return GlobalResponse.success("验证码获取成功", code);
} else if (result == null) { } else if (result == null) {
log.debug("短信接口请求失败"); log.debug("短信接口请求失败");