149 lines
4.5 KiB
Vue
149 lines
4.5 KiB
Vue
<template>
|
||
<view class="main">
|
||
<!-- <view class="location">
|
||
<view class="location_title">当前定位</view>
|
||
</view>
|
||
<view class="location_cont flex">
|
||
<view class="location_name" @click="addressBack">财富海景花园</view>
|
||
<view class="location_btn" @click="refresh"><image class="location_img" src="../../static/userserve/location.png" mode="widthFix"></image>重新定位</view>
|
||
</view>
|
||
|
||
<view class="location">
|
||
<view class="location_title">我的地址</view>
|
||
<view class="location_button" @click="addressList">管理</view>
|
||
</view>
|
||
<view class="location_cont location_padding">
|
||
<view class="location_list flex" @click="addressBack">
|
||
<view class="location_l">
|
||
<view class="location_address">
|
||
<text class="location_default">默认</text>
|
||
<text class="location_address_text">汤臣一品-20号楼2306室</text>
|
||
</view>
|
||
<view class="location_user"><text class="location_user_name">悟语先生</text><text class="location_user_tel">15221678099</text></view>
|
||
</view>
|
||
<view class="location_r location_acty">
|
||
<image class="location_acty_img" src="../../static/selected.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="location_list flex" @click="addressBack">
|
||
<view class="location_l">
|
||
<view class="location_address">
|
||
<text class="location_address_text">花木街道浦东新区机关事务管理局人民政府-20号楼2306室</text>
|
||
</view>
|
||
<view class="location_user"><text class="location_user_name">悟语先生</text><text class="location_user_tel">15221678099</text></view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<view class="location">
|
||
<view class="location_title">附近门店</view>
|
||
</view>
|
||
<view class="location_cont location_padding">
|
||
<view class="location_item" v-for="(item,index) in list" :key="index" :class="list.length > 1?'ocation_bottom':''" @click="addressBack(item)">{{item.name}}</view>
|
||
</view>
|
||
<view class="load_desc">{{decs}}</view>
|
||
<view style="height: 200rpx;"></view>
|
||
<!-- <view class="footer">
|
||
<view class="footer_btn" @click="addressEdit">新增地址</view>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
|
||
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||
import { storeToRefs } from 'pinia';//实现解构付值
|
||
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
|
||
import { frontstorelist } from '@/server/api';
|
||
const counterStore = useCounterStore(); // 使用 Store
|
||
const { proxy } = getCurrentInstance();
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
const {statusHeight,headerHeight,statusBartop,storeName,storeId } = storeToRefs(counterStore);
|
||
const pages = ref(0);
|
||
const limits = ref(10);
|
||
const latitude = ref('');
|
||
const longitude = ref('');
|
||
const list = ref([]);
|
||
const decs = ref('');
|
||
//获取经纬度
|
||
const getLocation = () => {
|
||
//授权成功，获取位置
|
||
uni.getLocation({
|
||
type: 'gcj02',
|
||
success(res){
|
||
latitude.value = res.latitude;
|
||
longitude.value = res.latitude;
|
||
},
|
||
fail(err){
|
||
console.error('获取位置失败:', err);
|
||
},
|
||
complete(){
|
||
api_frontstorelist();
|
||
}
|
||
});
|
||
};
|
||
//门店
|
||
const api_frontstorelist=()=>{
|
||
pages.value = pages.value + 1;
|
||
decs.value = "—— 加载中... ——";
|
||
const params = {
|
||
page:pages.value,
|
||
limit:limits.value
|
||
}
|
||
if(latitude.value && longitude.value){
|
||
params.latitude = latitude.value;
|
||
params.longitude = longitude.value
|
||
}
|
||
return frontstorelist(params).then(({data}) => {
|
||
decs.value = '—— 上拉加载更多 ——';
|
||
if(data.list.length < 10){
|
||
decs.value = '—— 更多门店敬请期待 ——';
|
||
}
|
||
list.value = list.value.concat(data.list);
|
||
})
|
||
.catch(({message}) => {
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
const addressList=()=>{
|
||
uni.navigateTo({
|
||
url:`/userserve/addressList/addressList`
|
||
})
|
||
};
|
||
const addressBack=(item)=>{
|
||
storeName.value = item.name;
|
||
storeId.value = item.id;
|
||
uni.navigateBack({
|
||
delta:1
|
||
})
|
||
};
|
||
const refresh=()=>{
|
||
console.log('刷新定位');
|
||
};
|
||
const addressEdit=()=>{
|
||
uni.navigateTo({
|
||
url:`/userserve/addressEdit/addressEdit`
|
||
})
|
||
};
|
||
onLoad((options) => {
|
||
getLocation();
|
||
});
|
||
onShow(() => {});
|
||
onReady(()=>{})
|
||
onPullDownRefresh(()=>{
|
||
list.value = [];
|
||
decs.value = '';
|
||
pages.value = 0;
|
||
api_frontstorelist();
|
||
uni.stopPullDownRefresh();
|
||
})
|
||
onReachBottom(()=>{
|
||
api_frontstorelist();
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
</style> |