这是我的代码:<template>
<view :style="themeColor">
<view class="page">
<view class="flex benben-position-layout flex flex-wrap align-center convenientInformation_flex_0"
:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
<view class='flex flex-wrap align-center justify-between flex-sub convenientInformation_fd0_0'>
<view class='flex flex-wrap align-center convenientInformation_fd0_0_c0' @tap.stop="handleJumpDiy"
data-type="back" data-url="1">
</view>
<view class='flex flex-wrap align-stretch justify-center'>
<text class='convenientInformation_fd0_0_c1_c0'>便民信息</text>
</view>
<view class='flex flex-wrap align-center justify-end convenientInformation_fd0_0_c0'>
<!-- #ifdef APP-PLUS -->
<image class='convenientInformation_fd0_0_c2_c0' mode="aspectFit" :src='STATIC_URL+"40.png"'
@tap.stop="handleJumpDiy" data-type="navigateTo"
:data-url="`/pages/mine/publish/publish?is_bianmin=1&id=-1`">
</image>
<text class='convenientInformation_fd0_0_c2_c1' @tap.stop="handleJumpDiy" data-type="navigateTo"
:data-url="`/pages/mine/publish/publish?is_bianmin=1&id=-1`">发布</text>
<!-- #endif -->
</view>
</view>
</view>
<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
<view class='flex flex-direction flex-wrap align-stretch convenientInformation_fd1_0'>
<view class='flex align-center convenientInformation_fd1_0_c0' @tap.stop="handleJumpDiy"
data-type="navigateTo"
:data-url="`/pages/mine/convenientInformationSearch/convenientInformationSearch`">
<image class='convenientInformation_fd1_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"31.png"'>
</image>
<input type="text" :placeholder="`请输入商家名称搜索`" confirm-type="done" :maxlength="-1"
placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" v-model="fd1_0_c0_c1" />
</view>
<swiper class="swiper" @change="swiperChange">
<block v-for="(item, i) in navs" :key="i">
<swiper-item>
<view class="grid text-center col-5">
<block v-for="(ele, j) in item" :key="j">
<view class="sub-item flex flex-direction justify-center align-center "
@tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/mine/shangjia_result/shangjia_result?is_search=2&title=${ele.title}&id=${
ele.id}`">
<view class="block-48">
<image :src="ele.image" mode="aspectFit"
style="width: 88rpx;height: 88rpx;"></image>
</view>
<text class=" text-333 margin-top-xs bianmintxt"
style="white-space: nowrap;font-size: 24rpx; font-weight: 500; color: #333333;">{{ ele.title }}</text>
</view>
</block>
</view>
</swiper-item>
</block>
</swiper>
</view>
<view class='flex flex-wrap align-center convenientInformation_fd1_1'>
<view>
<benben-flex-tabs class-name='convenientInformation_benbenTabsfd1_1_c0' v-model="tabs"
ref="benben_tabsfd1_1_c0" select-mark="benben_tabsfd1_1_c0" key="benben_tabsfd1_1_c0"
:open-title-type='false' :open-sticky='true' :top='0' :is-show-content='true'
:scrollspy='false' :tabs-info.sync="tabsInfofd1_1_c0">
<scroll-view @scroll="tabsInfofd1_1_c0.scrollX = $event.detail.scrollLeft"
id="benben_tabsfd1_1_c0" class="benben-tabs" style="width:750rpx" :scroll-x="true"
:scroll-left.sync="tabsInfofd1_1_c0.moveX" scroll-with-animation="all .3s ease">
<view class="benben-tabs-content" id="benben_tabsfd1_1_c0-content">
<view id="benben_tabsfd1_1_c0-title"
class="benben-tabs-title flex flex align-center justify-around">
<view
:class="{ 'checkTitlefd1_1_c0': tabs == '1', 'flex flex-wrap align-center convenientInformation_titlefd1_1_c0_c3': true }"
@tap="changeTab(1)" :id="`benben_tabsfd1_1_c0-title-item-${'1'}`">
<text>附近商家</text>
</view>
<view
:class="{ 'checkTitlefd1_1_c0': tabs == '2', 'flex flex-wrap align-center convenientInformation_titlefd1_1_c0_c3': true }"
@tap="changeTab(2)" :id="`benben_tabsfd1_1_c0-title-item-${'2'}`">
<text>距你最近</text>
</view>
</view>
<view
:style="{ left: tabsInfofd1_1_c0.lineleft, maxWidth: tabsInfofd1_1_c0.lineWidth ,}"
id="benben_tabsfd1_1_c0-line"
class="benben-tabs-line flex benben-flex-tabs-line convenientInformation_linefd1_1_c0">
</view>
</view>
</scroll-view>
</benben-flex-tabs>
<view>
<view class="benben_tabsfd1_1_c0-body-item flex flex-direction flex-wrap align-stretch convenientInformation_bodyfd1_1_c0_c3"
v-for="(item,index) in listData">
<view class='flex flex-wrap align-start bm_c0_c3_c0' @tap.stop="detail(item)">
<image class='bm_c0_c3_c0_c0' :src='item.thumb' mode="aspectFill"></image>
<!-- @tap.stop="singleImagePreview(item.thumb)" -->
<view class='flex flex-direction flex-wrap align-stretch flex-sub'>
<view class='flex flex-wrap align-center justify-between'>
<text class='bm_c0_c3_c0_c1_c0_c0'>{{item.deliver_name}}</text>
<view class='flex align-center justify-center bm_c0_c3_c0_c1_c0_c1'
@tap.stop="openCheck(item.deliver_mobile)">
<image class='bm_c0_c3_c0_c1_c0_c1_c0' mode="aspectFit"
:src='STATIC_URL+"17.png"'></image>
<text class='bm_c0_c3_c0_c1_c0_c1_c1'>呼叫</text>
</view>
</view>
<view class='flex align-center bm_c0_c3_c0_c1_c1'>
<text class='bm_c0_c3_c0_c1_c1_c0'>分类:</text>
<text class='bm_c0_c3_c0_c1_c1_c1'>
{{item.cate_name}}</text>
</view>
<view class='flex bm_c0_c3_c0_c1_c2'>
<text class='bm_c0_c3_c0_c1_c1_c0'>地址:
</text>
<text class='bm_c0_c3_c0_c1_c1_c1'>{{item.address}}</text>
</view>
<view class="flex">
<view class='flex align-center'>
<text class='bm_c0_c3_c0_c1_c3_c1'>距离</text>
<text class='bm_c0_c3_c0_c1_c3_c2'>{{item.juli}}</text>
</view>
<view class='flex align-center justify-center bm_c0_c3_c0_c1_c0_c1'
@tap.stop="openLocation(item)" style="margin-left: 10px;">
<image class='bm_c0_c3_c0_c1_c3_c0' mode="aspectFit"
:src='STATIC_URL+"51.png"'></image>
<text class='bm_c0_c3_c0_c1_c0_c1_c1' style="color: #666;">导航</text>
</view>
</view>
</view>
</view>
</view>
<fu-empty emptyImage="nodata" :paging-list-loaded-all="pagingListLoadedAll"
:paging-list-no-list-data="pagingListNoListData" :list-data-length="listDataLength"
:isLoadInit="isLoadInit"></fu-empty>
<view style="height: 100rpx;"></view>
</view>
</view>
</view>
</view>
<yk-authpup ref="authpup-dingwei" type="top" @changeAuth="changeAuthDingwei"
permissionID="ACCESS_FINE_LOCATION"></yk-authpup>
<yk-authpup ref="authpup-phone" type="top" @changeAuth="changeAuth" permissionID="CALL_PHONE"></yk-authpup>
</view>
<image class="fabu_ico" :src="STATIC_URL+'shop_ico.png?v=1'" mode="widthFix" @tap="pushShop"></image>
</view>
</template>
<script>
import pagingList from '@/common/mixin/paging_list.js' //引入混合开发
import ykAuthpup from "../../../components/yk-authpup/yk-authpup";
export default {
components: {
ykAuthpup
},
mixins: [pagingList],
data() {
return {
isTabChanging: false, // Tab切换防连点锁
locationChecked: false, // 定位检查完成标记
locationStatus: 'pending',// 定位状态:pending/denied/granted
longitude: '',
latitude: '',
list_rows: 10,
minixPagingListsApi: global.apiUrls.shopList, //明细请求地址
pageingListApiMethod: "post", //请求方法
tabsInfofd1_1_c0: {
lineleft: '',
lineWidth: '',
moveX: 0,
scrollX: 0,
PageScrollX: 0
},
fd1_0_c0_c1: "",
tabs: "1",
tel: "",
classification: [],
dingwei: {
latitude: '',
longitude: '',
address: {
country: "",
province: "",
city: "",
district: "",
street: "",
streetNum: "",
poiName: "",
cityCode: ""
},
},
navs: [],
callNumber: '',
};
},
computed: {
themeColor() {
return this.$store.getters.themeColor
},
},
onShow(){
if (!this.locationChecked) {
this.handleLocationAuth();
}
},
onLoad(options) {
this.bianminCate()
this.listData = []
var that = this
// #ifdef MP-WEIXIN
console.log("为了获取经纬度 自动定位");
uni.getLocation({
type: 'wgs84', //gcj02
geocode: true,
success: (res) => {
uni.setStorageSync('position', res)
uni.setStorageSync('myPosition', res)
console.log(res);
that.longitude = res.longitude;
that.latitude = res.latitude;
console.log('===' + that.longitude)
console.log('===' + that.latitude)
that.pagingListToggle(); //250630打开了
},
fail(e) {
console.log(e)
}
})
// #endif
//这里应该判断 是否获取过定位 然后请求数据 或者提示他去请求定位 而不是目前的只有h5有数据
//#ifdef APP-PLUS
this.$nextTick(function() {
this.$refs['authpup-dingwei'].open();//app端口 请求经纬度才能请求商家数据 否则没有距离
})
// #endif
//#ifdef H5
that.pagingListToggle() //请求数据
//#endif
},
onPullDownRefresh() {
this.page = 1
this.listData = []
this.pagingListToggle()
},
methods: {
// 打开地图导航
openLocation(item) {
uni.openLocation({
latitude: Number(item.lat),
longitude: Number(item.lng),
name: item.deliver_name,
address: `${item.city_name}${item.district_name}${item.full_address}`
});
},
detail(item) {
uni.navigateTo({
url: '/pages/mine/informationList/bianmindetail' + '?id=' + item.id,
fail(e) {
console.log(e);
}
})
},
pushShop() {
uni.setStorageSync('luntan_show_type', 0)
if (!global.token) {
this.toLoginDiy()
return false
}
uni.navigateTo({
url: '/pages/mine/publish/publish?is_bianmin=1&id=-1'
})
},
changeAuth() {
console.log('回调方法');
this.callMobile(this.callNumber)
},
openCheck(phone) {
// if (!global.token) {
// this.toLoginDiy()
// return false
// }
if (uni.getSystemInfoSync().platform == "ios") {
this.callMobile(phone)
} else {
let that = this
that.callNumber = phone
// #ifdef MP-WEIXIN
this.callMobile(phone)
// #endif
// #ifdef APP-PLUS
this.$refs['authpup-phone'].open();
// #endif
}
},
swiperChange(e) {
this.tabs = e.detail.current;
},
changeTab(e) {
if (this.tabs === e && this.flag) return;
// uni.showLoading()
this.flag = true
this.tabs = e
var that = this
setTimeout(function() {
// uni.hideLoading()
that.flag = false
that.listData = [] //250630打开了
that.pagingListToggle();
console.log(that.listData);
}, 1000)
},
// #ifdef APP-PLUS
changeAuthDingwei() {
var that = this
uni.getLocation({
// type: 'wgs84', //gcj02
// geocode: true,
type: 'gcj02', //gcj02 wgs84 提升速度0
// geocode: true,
geocode: false, // 建议关闭地理编码 提升速度1
isHighAccuracy: false, // 提升速度2
success: (res) => {
uni.setStorageSync('position', res)
uni.setStorageSync('myPosition', res)
// console.log(res);
that.longitude = res.longitude;
that.latitude = res.latitude;
console.log('===' + that.longitude)
console.log('===' + that.latitude)
that.listData = [] //250630打开了
that.pagingListToggle(); //250630打开了 请求数据
},
fail(e) {
console.log(e)
},
complete(e) {
console.log(e)
}
})
},
// #endif
pagingListPostData() {
return {
longitude: this.longitude, //经纬度 查看距离
latitude: this.latitude, //经纬度 查看距离
list_rows: this.list_rows,
type: this.tabs
}
},
bianminCate() {
this.$api.post(global.apiUrls.convenienceClass).then(res => {
console.log('便民信息分类', res);
if (res.data.code == 1) {
let list = res.data.data;
for (let i = 0, l = list.length; i < l; i += 10) {
this.navs.push(list.slice(i, i + 10));
}
}
});
}
}
};
</script>
<style lang="scss" scoped>
.page {
width: 100vw;
overflow-x: hidden;
min-height: calc(100vh - var(--window-bottom));
background: #F8F8F8;
background-size: 100% auto;
}
.fabu_ico {
position: fixed;
bottom: 15%;
right: 20px;
border-radius: 90rpx;
width: 90rpx;
height: 90rpx;
}
.convenientInformation_flex_0 {
border-bottom: 1px solid #eee;
background: #fff;
width: 750rpx;
height: 88rpx;
overflow: hidden;
z-index: 10;
top: 0rpx;
background-size: 100% auto !important;
}
.convenientInformation_fd0_0_c2_c1 {
line-height: 28rpx;
}
.convenientInformation_fd0_0_c2_c0 {
width: 28rpx;
height: 28rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
margin: 0rpx 10rpx 0rpx 0rpx;
}
.convenientInformation_fd0_0_c1_c0 {
font-size: 36rpx;
font-weight: 500;
color: #333333;
line-height: 88rpx;
}
.convenientInformation_fd0_0_c0 {
width: 120rpx;
}
.convenientInformation_fd0_0 {
padding: 0rpx 32rpx 0rpx 32rpx;
}
.bm_c0_c3_c0_c1_c3_c2 {
color: #666666;
font-size: 24rpx;
font-weight: 400;
}
.bm_c0_c3_c0_c1_c3_c1 {
color: #666666;
font-size: 24rpx;
font-weight: 400;
line-height: 28rpx;
}
.bm_c0_c3_c0_c1_c3_c0 {
width: 21rpx;
height: 26rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.bm_c0_c3_c0_c1_c2 {
margin: 8rpx 0rpx 030rpx 0rpx;
}
.bm_c0_c3_c0_c1_c1_c1 {
color: #999999;
font-size: 24rpx;
font-weight: 400;
margin: 0rpx 0rpx 0rpx 8rpx;
}
.bm_c0_c3_c0_c1_c1_c0 {
color: #999999;
font-size: 24rpx;
font-weight: 400;
white-space: nowrap;
}
.bm_c0_c3_c0_c1_c1 {
margin: 8rpx 0rpx 0rpx 0rpx;
}
.bm_c0_c3_c0_c1_c0_c1_c1 {
color: #1071F3;
font-size: 24rpx;
font-weight: 400;
margin: 0rpx 0rpx 0rpx 8rpx;
}
.bm_c0_c3_c0_c1_c0_c1_c0 {
width: 22rpx;
height: 22rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.bm_c0_c3_c0_c1_c0_c1 {
background: rgba(236, 244, 254, 1);
border-radius: 20rpx 20rpx 20rpx 20rpx;
width: 110rpx;
height: 40rpx;
}
.bm_c0_c3_c0_c1_c0_c0 {
color: #333333;
font-size: 32rpx;
font-weight: 500;
width: 350rpx;
}
.bm_c0_c3_c0_c0 {
width: 190rpx;
height: 190rpx;
border-radius: 16rpx;
margin: 0rpx 24rpx 0rpx 0rpx;
}
.bm_c0_c3_c0 {
border-bottom: 1px solid #eee;
padding: 0rpx 0rpx 32rpx 0rpx;
}
.convenientInformation_bodyfd1_1_c0_c3 {
padding: 50rpx 32rpx 0rpx 32rpx;
}
.convenientInformation_titlefd1_1_c0_c3 {
color: #999999;
font-size: 32rpx;
font-weight: 500;
height: 45rpx;
}
.convenientInformation_linefd1_1_c0 {
background: linear-gradient(to right, #1071F3, #3BC1DD);
width: 56rpx;
height: 8rpx;
top: 80rpx;
background-size: 100% auto !important;
border-radius: 10px;
}
.checkTitlefd1_1_c0 {
font-weight: 500 !important;
font-size: 32rpx !important;
color: #333 !important;
background-color: rgba(255, 255, 255, 1) !important;
}
::v-deep .convenientInformation_benbenTabsfd1_1_c0 {
background: #fff;
width: 750rpx;
height: 90rpx;
white-space: nowrap;
text-align: center;
}
.convenientInformation_fd1_1 {
background: var(--benbenbgColor1);
background-size: 100% auto;
}
.convenientInformation_fd1_0_c1_c0_c1 {
color: #333333;
font-size: 24rpx;
font-weight: 500;
}
.convenientInformation_fd1_0_c1_c0_c0 {
// background-color: #1071F3;
width: 135rpx;
height: 88rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
margin: 0rpx 0rpx 20rpx 0rpx;
}
.convenientInformation_fd1_0_c1 {
margin: 0rpx 0rpx 32rpx 0rpx;
}
.convenientInformation_fd1_0_c0_c0 {
width: 32rpx;
height: 32rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
margin: 0rpx 8rpx 0rpx 0rpx;
}
.convenientInformation_fd1_0_c0 {
background: #F8F8F8;
border-radius: 34rpx 34rpx 34rpx 34rpx;
width: 670rpx;
height: 64rpx;
padding: 0rpx 0rpx 0rpx 24rpx;
margin: 0rpx 0rpx 32rpx 0rpx;
}
.convenientInformation_fd1_0 {
background: var(--benbenbgColor1);
padding: 32rpx 40rpx 32rpx 40rpx;
background-size: 100% auto;
margin: 0rpx 0rpx 24rpx 0rpx;
}
.swiper {
height: 320rpx;
}
.block-48 {
width: 90rpx;
min-width: 90rpx;
height: 90rpx;
min-height: 90rpx;
image {
border-radius: 50%;
width: 100%;
height: 100%;
}
}
.sub-item {
position: relative;
margin-bottom: 32rpx;
.jiaobiao {
position: absolute;
top: 10rpx;
right: 20rpx;
width: 35rpx;
height: 35rpx;
color: #fff;
background: $fu-main-color;
border-radius: 50% 50% 0 50%;
font-size: 20rpx;
text-align: center;
line-height: 35rpx;
z-index: 999;
}
}
.text-333 {
color: #333333;
}
.bianmintxt {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
</style>