对接接口
This commit is contained in:
wangxiaowei
@ -17,20 +17,22 @@
|
||||
<view class="text-36rpx leading-50rpx text-#303133 mr-38rpx">
|
||||
预约茶艺师
|
||||
</view>
|
||||
<view class="flex items-center line-1" @click="Index.handleToCity">
|
||||
<view class="">
|
||||
<wd-icon name="location" size="32rpx"></wd-icon>
|
||||
</view>
|
||||
<view class="mr-10rpx font-400 leading-44rpx text-32rpx pl-10rpx line-1">上海市</view>
|
||||
<view class="flex items-center line-1 city-picker">
|
||||
<wd-icon name="location" size="32rpx"></wd-icon>
|
||||
<wd-picker :columns="cityColumns" v-model="cityValue" @confirm="Index.handleSelectCity" use-default-slot>
|
||||
<view class="mr-10rpx font-400 leading-44rpx text-32rpx pl-10rpx line-1">{{ defaultCity }}</view>
|
||||
</wd-picker>
|
||||
<wd-img width="14rpx" height="9rpx" :src="`${OSS}icon/icon_arrow_down.png`" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</wd-navbar>
|
||||
<view class="search-box relative" @click="Index.handleToSearch">
|
||||
<wd-search placeholder="茶艺师名称" cancel-txt="搜索" placeholder-left hide-cancel custom-input-class="!h-72rpx">
|
||||
<view class="search-box relative">
|
||||
<wd-search placeholder="茶艺师名称" cancel-txt="搜索" placeholder-left hide-cancel custom-input-class="!h-72rpx" v-model="teaSpecialistName" light >
|
||||
</wd-search>
|
||||
<view class="absolute top-1/2 -translate-y-1/2 right-34rpx w-142rpx h-64rpx leading-64rpx text-center rounded-32rpx bg-#4C9F44 text-#fff font-400 text-32rpx">
|
||||
<view
|
||||
class="absolute top-1/2 -translate-y-1/2 right-34rpx w-142rpx h-64rpx leading-64rpx text-center rounded-32rpx bg-#4C9F44 text-#fff font-400 text-32rpx"
|
||||
@click="Index.handleSearch">
|
||||
搜索
|
||||
</view>
|
||||
</view>
|
||||
@ -82,11 +84,10 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="Index.upCallback"
|
||||
:fixed="true">
|
||||
<view class="flex items-center bg-white p-20rpx rounded-10rpx mx-30rpx mb-20rpx" v-for="(item, index) in 100" :key="index" @click="Index.handleToReserveTeaSpecialist(item)">
|
||||
<mescroll-body @init="mescrollInit" @down="downCallback" :down="downOption" @up="Index.upCallback" :up="upOption" fixed>
|
||||
<view class="flex items-center bg-white p-20rpx rounded-10rpx mx-30rpx mb-20rpx" v-for="(item, index) in list" :key="index" @click="Index.handleToReserveTeaSpecialist(item.id)">
|
||||
<view class="mr-28rpx relative">
|
||||
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
|
||||
<wd-img width="200rpx" height="200rpx" :src="item.image"></wd-img>
|
||||
<view class="tea-specialist-time absolute top-6rpx left-0 text-[#fff] font-400 text-18rpx leading-26rpx flex items-center justify-center">
|
||||
可约9:00
|
||||
</view>
|
||||
@ -94,46 +95,53 @@
|
||||
<view class="flex-1">
|
||||
<view class="flex items-center">
|
||||
<view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">
|
||||
茶艺师昵称
|
||||
{{ item.name }}
|
||||
</view>
|
||||
<view>
|
||||
<tea-specialist-level :level="'junior'"></tea-specialist-level>
|
||||
<tea-specialist-level :level="TeaSpecialistLevelValue[item.teamasterLevel[0].level_name]"></tea-specialist-level>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex items-center">
|
||||
<template v-for="(label, labelIndex) in item.teamasterlabel" :key="labelIndex">
|
||||
<!-- 上门服务 -->
|
||||
<view class="mr-12rpx" v-if="label.id == 1">
|
||||
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">{{ label.label_name }}</wd-tag>
|
||||
</view>
|
||||
|
||||
<!-- 到点服务 -->
|
||||
<view class="mr-12rpx" v-if="label.id == 2">
|
||||
<wd-tag color="#F55726" bg-color="#F55726" plain custom-class="!rounded-4rpx">{{ label.label_name }}</wd-tag>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="mr-12rpx">
|
||||
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">上门服务</wd-tag>
|
||||
</view>
|
||||
<view class="mr-12rpx">
|
||||
<wd-tag color="#F55726" bg-color="#F55726" plain>到点服务</wd-tag>
|
||||
</view>
|
||||
<view class="mr-12rpx">
|
||||
<wd-tag color="#818CA9" bg-color="#F3F3F3">28岁</wd-tag>
|
||||
<wd-tag color="#818CA9" bg-color="#F3F3F3">{{ item.both }}</wd-tag>
|
||||
</view>
|
||||
<view class="flex items-center mt-8rpx">
|
||||
<wd-img :src="`${OSS}icon/icon_woman.png`" width="28rpx" height="28rpx"></wd-img>
|
||||
<!-- <wd-img :src="`${OSS}icon/icon_man.png`" width="28rpx" height="28rpx"></wd-img> -->
|
||||
<wd-img :src="item.sex == 1 ? `${OSS}icon/icon_man.png` : `${OSS}icon/icon_woman.png`" width="28rpx" height="28rpx"></wd-img>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex items-center justify-between mt-18rpx">
|
||||
<view class="flex items-center mr-20rpx">
|
||||
<view class="flex items-center">
|
||||
<wd-img :src="`${OSS}icon/icon_store_cert.png`" width="36rpx" height="36rpx"></wd-img>
|
||||
<view class="mr-20rpx w-200rpx">
|
||||
<view class="flex items-center" v-if="item.authent_status == 1">
|
||||
<view class="flex items-center">
|
||||
<wd-img :src="`${OSS}icon/icon_store_cert.png`" width="36rpx" height="36rpx"></wd-img>
|
||||
</view>
|
||||
<text class="ml-8rpx font-400 text-24rpx leading-4rpx text-#303133">商家认证</text>
|
||||
</view>
|
||||
<text class="ml-8rpx font-400 text-24rpx leading-4rpx text-#303133">商家认证</text>
|
||||
</view>
|
||||
|
||||
<view class="flex items-center font-400 text-24rpx leading-34rpx text-#92928C">距您14km</view>
|
||||
<view class="flex items-center font-400 text-24rpx leading-34rpx text-#92928C">距您{{ item.distance }}km</view>
|
||||
</view>
|
||||
|
||||
<view class="font-400 text-[#FF5951] text-26rpx leading-40rpx flex items-center justify-between mt-4rpx">
|
||||
<view class="">
|
||||
<text class="text-32rpx">￥180</text>
|
||||
<text class="text-32rpx">￥{{ item.price }}</text>
|
||||
<text class="text-24rpx">/小时</text>
|
||||
</view>
|
||||
<view class="font-400 text-22rpx leading-32rpx text-#92928C">最快30分钟到达</view>
|
||||
<view class="font-400 text-22rpx leading-32rpx text-#92928C">最快{{ item.speed }}分钟到达</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -147,10 +155,11 @@
|
||||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||||
import TeaSpecialistLevel from '@/components/TeaSpecialistLevel.vue'
|
||||
import { OrderSource, OrderStatus } from '@/utils/order'
|
||||
import {getlocation} from '@/utils/jwexin'
|
||||
import {getDecorate, getTeaSpecialistLevels} from '@/api/home'
|
||||
// import {TeaSpecialistLevels} from '@/utils/teaSpecialist'
|
||||
import {getLocation} from '@/utils/jwexin'
|
||||
import {TeaSpecialistLevelValue} from '@/utils/teaSpecialist'
|
||||
import {getDecorate, getTeaSpecialistLevels, getTeaSpecialist} from '@/api/home'
|
||||
import {getCity} from '@/api/city'
|
||||
import type { IIndexListResult } from '@/api/types/home'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
|
||||
@ -158,65 +167,89 @@
|
||||
const TeaSpecialistLevels = reactive<Array<{ id: number, status: number, level_name: string}>>([])
|
||||
const selectedLevel = ref<Array<any>>([]) // 选择茶艺师的点击等级
|
||||
|
||||
// 分页
|
||||
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||
// 分页相关
|
||||
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||
const downOption = {
|
||||
auto: true
|
||||
}
|
||||
const upOption = {
|
||||
auto: true,
|
||||
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
|
||||
}
|
||||
const latitude = ref<number>(import.meta.env.VITE_DEFAULT_LATITUDE) // 纬度
|
||||
const longitude = ref<number>(import.meta.env.VITE_DEFAULT_LONGITUDE) // 经度
|
||||
const defaultCity = ref<string>(import.meta.env.VITE_DEFAULT_ADDRESS) // 默认城市
|
||||
const list = ref<Array<any>>([]) // 茶艺师列表
|
||||
const teaSpecialistName = ref<string>('') // 茶艺师名称
|
||||
const cityColumns = ref<Array<{label: string, value: string}>>([])
|
||||
const cityValue = ref<string>('')
|
||||
|
||||
onLoad(() => {
|
||||
// getlocation((res) => {
|
||||
// console.log('经纬度:' + res.latitude + ',' + res.longitude)
|
||||
// })
|
||||
onLoad(async () => {
|
||||
// 授权获取地址
|
||||
await getLocation((res) => {
|
||||
latitude.value = res.latitude
|
||||
longitude.value = res.longitude
|
||||
Index.handleSearch()
|
||||
})
|
||||
|
||||
// 获取城市列表
|
||||
getCity({latitude: latitude.value, longitude: longitude.value}).then((res: any) => {
|
||||
cityColumns.value = res.area_list.map(item => {
|
||||
return {
|
||||
label: item.getArea[0].name,
|
||||
value: item.getArea[0].lat + ',' + item.getArea[0].lng
|
||||
}
|
||||
})
|
||||
})
|
||||
// getDecorate({id: 1}).then((res: any) => {
|
||||
// const data = JSON.parse(res.data)
|
||||
// console.log('装修数据:', data)
|
||||
// })
|
||||
|
||||
// 获取茶艺师等级
|
||||
// 等待授权完成后再加载数据
|
||||
getTeaSpecialistLevels().then((res:Array<any>) => {
|
||||
TeaSpecialistLevels.push(...res)
|
||||
})
|
||||
})
|
||||
|
||||
const Index = {
|
||||
// 城市
|
||||
handleToCity: () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/city/city'
|
||||
})
|
||||
// 选择城市
|
||||
handleSelectCity: (e: any) => {
|
||||
cityValue.value = e.value
|
||||
defaultCity.value = e.selectedItems.label
|
||||
|
||||
const val = e.value.split(',')
|
||||
latitude.value = parseFloat(val[0])
|
||||
longitude.value = parseFloat(val[1])
|
||||
Index.handleSearch()
|
||||
},
|
||||
|
||||
// 搜索
|
||||
handleToSearch: () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/search/search'
|
||||
})
|
||||
handleSearch: () => {
|
||||
list.value = []
|
||||
getMescroll().resetUpScroll()
|
||||
},
|
||||
|
||||
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
|
||||
upCallback: (mescroll) => {
|
||||
// 需要留一下数据为空的时候显示的空数据图标内容
|
||||
const filter = {
|
||||
level_id: selectedLevel.value.join(',') || '0',
|
||||
page: mescroll.num,
|
||||
size: mescroll.size,
|
||||
latitude: latitude.value,
|
||||
longitude: longitude.value,
|
||||
search: teaSpecialistName.value
|
||||
}
|
||||
console.log('filter:', filter)
|
||||
|
||||
// apiGoods(mescroll.num, mescroll.size).then(res=>{
|
||||
// const curPageData = res.list || [] // 当前页数据
|
||||
// if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
|
||||
// goods.value = goods.value.concat(curPageData); //追加新数据
|
||||
// //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
|
||||
// //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
|
||||
|
||||
// //方法一(推荐): 后台接口有返回列表的总页数 totalPage
|
||||
// //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
|
||||
|
||||
// //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
|
||||
// //mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
|
||||
|
||||
// //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
|
||||
// //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
|
||||
|
||||
// //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
|
||||
// mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
|
||||
// }).catch(()=>{
|
||||
mescroll.endErr(); // 请求失败, 结束加载
|
||||
// })
|
||||
getTeaSpecialist(filter).then((res: IIndexListResult) => {
|
||||
const curPageData = res.list || [] // 当前页数据
|
||||
if(mescroll.num == 1) list.value = [] // 第一页需手动制空列表
|
||||
list.value = list.value.concat(curPageData) //追加新数据
|
||||
mescroll.endSuccess(curPageData.length, Boolean(res.more))
|
||||
}).catch(() => {
|
||||
mescroll.endErr() // 请求失败, 结束加载
|
||||
})
|
||||
},
|
||||
|
||||
handleClick: (item: any) => {
|
||||
@ -227,13 +260,12 @@
|
||||
// 跳转到预约茶艺师页面
|
||||
handleToReserveTeaSpecialist: (id: number = 1) => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/index/detail`
|
||||
url: `/pages/index/detail?id=${id}&lat=${latitude.value}&lng=${longitude.value}`
|
||||
})
|
||||
},
|
||||
|
||||
// 选择茶艺师等级
|
||||
handleToggleTeaSpecialistLevel: (value: any) => {
|
||||
// 切换茶艺师等级
|
||||
const index = selectedLevel.value.indexOf(value);
|
||||
if (index > -1) {
|
||||
// 如果已经选择了该等级，则取消选择
|
||||
@ -242,6 +274,8 @@
|
||||
// 如果未选择该等级，则添加选择
|
||||
selectedLevel.value.push(value);
|
||||
}
|
||||
|
||||
Index.handleSearch()
|
||||
},
|
||||
|
||||
// 跳转到团体预约页面
|
||||
@ -291,10 +325,22 @@
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.tea-specialist-time {
|
||||
.tea-specialist-time {
|
||||
width: 106rpx;
|
||||
height: 38rpx;
|
||||
background-image: url(#{$OSS}images/collect/collect_image1.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.city-picker {
|
||||
:deep() {
|
||||
.wd-picker__action--cancel {
|
||||
color: #666666 !important;
|
||||
}
|
||||
|
||||
.wd-picker__action {
|
||||
color: #4C9F44;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user