uniapp - 技术栈

<!--

* @Author: wf 11 1145104313@qq.com

* @Date: 2024-12-15 23:26:59

* @LastEditors: wf 11 1145104313@qq.com

* @LastEditTime: 2025-01-08 02:09:59

* @FilePath: \craftsmanNo8-mob\src\pages\home\index.vue

* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/配置

-->

<PageWrapper

class="position-relative flex-col w-100vw min-h-100vh"

showTabbar

:currentTab="0"

:validateToken="false"

:validatePhone="false"

<scroll-view

style="height: calc(100vh - 160rpx)"

:scroll-y="true"

:refresher-threshold="10"

:scroll-top="scrollTop"

@scroll="listScroll"

:enhanced="true"

:show-scrollbar="false"

:bounces="false"

@scrolltolower="handelLower"

:refresher-enabled="isLoadingTop"

:refresher-triggered="isTriggeredTop"

@refresherrefresh="handleRefresher"

@refresherrestore="handelonRestore"

<view v-if="scope" class="flex items-center sys-gap-m-2" style="margin-bottom: 0rpx"

><wd-icon size="16" color="#929292" name="dizhi" class-prefix="iconCraftsmanNo8" /><span

style="margin-left: 6rpx"

>{{ scope }}</span

></view

<view v-else class="flex items-center sys-gap-m-2" style="margin-bottom: 0rpx"

><wd-icon size="16" color="#929292" name="dizhi" class-prefix="iconCraftsmanNo8" /><view

style="margin-left: 6rpx"

class="sys-gap-m-2"

>未检测到当前位置</view

></view

<wd-tabs

v-model="currentTabItem"

animated

auto-line-width

custom-class="rounded-md overflow-hidden"

@change="changeTab"

<wd-tab title="附近师傅" name="masterTab">

<wd-skeleton :row-col="[{ size: '48px', type: 'rect' }]" animation="gradient" />

<wd-skeleton

:custom-style="{ width: '100%', marginLeft: '12px' }"

:row-col="[{ width: '50%' }, { width: '100%' }]"

animation="gradient"

</view>

</template>

<MasterCard

v-for="master in masterList"

:key="master.moverId"

:data="master"

></MasterCard>

</view>

</wd-tab>

<wd-tab title="同城交易" name="cityTopicTab">

</wd-tab>

</wd-tabs>

</view>

</scroll-view>

</PageWrapper>

</template>

import PageWrapper from '@/layout/pageWrapper.vue'

import HomeBanner from './components/HomeBanner.vue'

import CreateDemandOrderNav from './components/CreateDemandOrderNav.vue'

import MainNav from './components/MainNav.vue'

import ModuleTab from './components/ModuleTab.vue'

import { storeToRefs } from 'pinia'

import { useUserStore } from '@/stores/useUserStore'

// import MasterList from '@/pages/master/components/MasterList.vue'

import CityTopicList from '@/pages/cityTopic/components/CityTopicList.vue'

const currentTabItem = shallowRef<number>(0)

const store = useUserStore()

const { scope } = storeToRefs(store)

// import { useMqtt } from '@/hooks/useMqtt'

// // import { connectMqtt } from '@/hooks/mqtt'

// const { setupMqttConnection, useMqttSubscribe } = useMqtt()

const longitude = ref()

const latitude = ref()

const location = ref('')

const getLocation = () => {

uni.getLocation({

type: 'gcj02',

success: function (res) {

console.log(res)

longitude.value = res.longitude

latitude.value = res.latitude

uni.setStorageSync('longitude', res.longitude)

uni.setStorageSync('latitude', res.latitude)

let url = `https://api.tianditu.gov.cn/geocoder\`

// 'https://restapi.amap.com/v3/geocode/regeo?key=e5b5c1604e7b9d8647bd07fa5b0b8799\&location=' +

// longitude.value +

// ',' +

// latitude.value

console.log(url)

uni.request({

url: url,

data: {

postStr: JSON.stringify({ lon: longitude.value, lat: latitude.value, ver: 1 }),

type: 'geocode',

tk: '8a92a1a2a334a3c8cac8c2d324866067',

method: 'GET',

success: (res) => {

let data = res.data

if (data.status == '0') {

let city = data.result.addressComponent.city

let province = data.result.addressComponent.province

// 直辖市（如果province以"市"结尾）

if (province.endsWith('市')) {

scope.value = province

console.log('111111', scope.value)

} else if (city !== null && typeof city === 'string') {

scope.value = city

console.log('222222', scope.value)

}

// 省直辖县

else {

scope.value = ''

}

fail: (err) => {

console.log(err)

scope.value = ''

})

fail: (err) => {

// this.$api.msg('定位失败,请检查是否开启定位');

uni.showToast({

title: '定位失败,请检查是否开启定位!',

icon: 'none',

})

console.log(err)

})

}

onShow(() => {

getLocation()

pageObj.value.pageNum = 1

loadings.value = 'more'

getMasterList()

})

onLoad(() => {

console.log('onLoad')

})

// 师傅列表

import useLoading from '@/hooks/useLoading'

import MasterCard from '@/pages/master/components/MasterCard.vue'

import { getCjProgramCjMoverMoverListByScope } from '@/servers/api/shifuguanli'

const { isLoading, showLoading, hideLoading } = useLoading()

const masterList = ref<[]>([])

const pageObj = ref({

pageNum: 1,

pageSize: 10,

})

const scrollTop = ref(0)

const oldScrollTop = ref(0)

const loadings = ref('more')

const isLoadingTop = ref(true)

const isTriggeredTop = ref(true)

const isShowBtm = ref(true)

const listScroll = (e) => {

oldScrollTop.value = e.detail.scrollTop

}

const changeTab = () => {

getTotop()

pageObj.value.pageNum = 1

loadings.value = 'more'

getMasterList()

}

const getTotop = () => {

//视图会发生重新渲染

scrollTop.value = oldScrollTop.value

//当视图渲染结束重新设置为0

nextTick(() => {

scrollTop.value = 0

})

}

const handelLower = () => {

console.log('滚动到底部>>>')

isShowBtm.value = true

if (loadings.value == 'loading') return

if (loadings.value == 'noMore') return

loadings.value = 'loading'

pageObj.value.pageNum += 1

getMasterList(true)

}

const handleRefresher = () => {

console.log('顶部下拉刷新s>>>', isLoadingTop.value, isTriggeredTop.value)

isLoadingTop.value = true

isTriggeredTop.value = true

if (!isLoadingTop.value) return

pageObj.value.pageNum = 1

loadings.value = 'more'

getMasterList()

nextTick(() => {

// isLoadingTop.value = false

isTriggeredTop.value = false

})

}

const handelonRestore = () => {

console.log('handelonRestore>>>')

isLoadingTop.value = true

}

/**

* 获取师傅列表

const getMasterList = async (load) => {

try {

showLoading()

let obj = {

scope: scope.value ? scope.value : '北京市',

pageNum: pageObj.value.pageNum,

pageSize: pageObj.value.pageSize,

}

getCjProgramCjMoverMoverListByScope(obj).then((res) => {

if (res.code == 200) {

const resData = res.data.list

if (load) {

nextTick(() => {

masterList.value = masterList.value.concat(resData)

})

if (resData && resData.length == 0) {

loadings.value = 'noMore'

} else {

loadings.value = 'more'

}

} else {

nextTick(() => {

masterList.value = res.data.list

})

}

})

} catch (error) {

console.error(error)

} finally {

hideLoading()

}

</script>

.bg-home-linear {

// background: linear-gradient(

// to bottom,

// #9b2207,

// #e44a02,

// #f16f13,

// #f7c69e,

// rgba(0, 0, 0, 0)

// );

}

:deep(.wd-tabs) {

overflow: auto;

}

::v-deep .wd-tabs__nav-item {

flex: none !important;

padding: 0 30rpx;

font-size: 30rpx !important;

}

</style>