293 lines
6.7 KiB
Vue
293 lines
6.7 KiB
Vue
<template>
|
|
<view>
|
|
<view class="search_header p30">
|
|
<!-- position: sticky; top: 0; left: 0; z-index: 999; -->
|
|
<view style="width: 100%">
|
|
<view class="search_header_blur"></view>
|
|
<search @search="searchChange" />
|
|
</view>
|
|
<view style="margin: 30rpx 0 0">
|
|
<up-swiper :list="list1" height="150rpx" keyName="imageUrl" indicator></up-swiper>
|
|
</view>
|
|
<view class="search_header_grid" style="position: sticky; top: 0; left: 0; background-color: #ffffff; padding: 15rpx">
|
|
<view class="search_header_grid_view" @click="toOrder">
|
|
<image src="/static/icon/dd.png"></image>
|
|
<view>我的订单</view>
|
|
</view>
|
|
<view class="search_header_grid_view" @click="showMode">
|
|
<image src="/static/icon/kj.png"></image>
|
|
<view>卡卷中心</view>
|
|
</view>
|
|
<view class="search_header_grid_view" @click="navTo('/pageMake/invoice/invoice')">
|
|
<image src="/static/icon/kp.png"></image>
|
|
<view>我要开票</view>
|
|
</view>
|
|
<!-- open-type="contact" -->
|
|
<button style="all: unset" @click="toKft">
|
|
<view class="search_header_grid_view">
|
|
<image src="/static/icon/kf.png"></image>
|
|
<view>在线客服</view>
|
|
</view>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
|
|
<view style="height: 35rpx"></view>
|
|
<!-- <view style="padding: 0 30rpx">
|
|
<view class="order_list" style="position: sticky; top: 0; left: 0">
|
|
<view class="order_list_header p30">
|
|
<view class="order_list_header_view" @click="tabChange(1)">
|
|
<view>距我最近</view>
|
|
<view v-if="query.orderByType == 1" class="order_list_header_view_dian"></view>
|
|
</view>
|
|
<view class="order_list_header_view" @click="tabChange(2)">
|
|
<view>空闲最多</view>
|
|
<view v-if="query.orderByType == 2" class="order_list_header_view_dian"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
<view class="order_list">
|
|
<view :class="[query.orderByType == 1 ? 'order_list_active' : '']" class="order_list_view" @click="tabChange(1)">距我最近</view>
|
|
<view :class="[query.orderByType == 2 ? 'order_list_active' : '']" class="order_list_view" @click="tabChange(2)">空闲最多</view>
|
|
</view>
|
|
|
|
<!-- <view style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 30rpx">
|
|
<view style="background-color: #ffffff; width: 690rpx">
|
|
|
|
</view>
|
|
</view> -->
|
|
|
|
<view style="margin-bottom: 30rpx; padding: 0 30rpx" v-for="(item, index) in dataList" :key="index">
|
|
<orderList toNav :info="item"></orderList>
|
|
</view>
|
|
</z-paging>
|
|
<view style="height: 180rpx"></view>
|
|
<!-- <tabbar path="/pages/home/home"></tabbar> -->
|
|
<cc-myTabbar :tabBarShow="0"></cc-myTabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive } from 'vue';
|
|
import { onLoad, onShow, onPullDownRefresh, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
|
|
import { aroundAreaApi, bannerList } from '@/api/api.js';
|
|
import { useNav } from '@/hooks/useNav.js';
|
|
const { nav, navTo } = useNav();
|
|
|
|
const dataList = ref([]);
|
|
const paging = ref(null);
|
|
const query = reactive({
|
|
lon: '',
|
|
lat: '',
|
|
orderByType: 1, //1-最近;2-空闲较多
|
|
keyWord: ''
|
|
});
|
|
|
|
const list1 = ref([]);
|
|
|
|
onLoad(async () => {
|
|
let _res = await bannerList();
|
|
list1.value = _res;
|
|
});
|
|
|
|
onShow(() => {
|
|
uni.hideTabBar();
|
|
});
|
|
|
|
let toKft = (e) => {
|
|
uni.makePhoneCall({
|
|
phoneNumber: '4008005326' //仅为示例
|
|
});
|
|
};
|
|
|
|
const queryList = async () => {
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
});
|
|
try {
|
|
if (!query.lon && !query.lat) {
|
|
const { longitude: lon, latitude: lat } = await uni.getLocation();
|
|
query.lon = lon;
|
|
query.lat = lat;
|
|
}
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
console.log(query);
|
|
aroundAreaApi(query)
|
|
.then((res) => {
|
|
console.log(res, 'list');
|
|
paging.value.complete(res);
|
|
uni.hideLoading();
|
|
})
|
|
.catch((res) => {
|
|
paging.value.complete(false);
|
|
uni.hideLoading();
|
|
});
|
|
};
|
|
|
|
let tabChange = (e) => {
|
|
query.orderByType = e;
|
|
paging.value.reload();
|
|
};
|
|
|
|
let isPagingRefNotFound = () => {
|
|
return !paging.value;
|
|
};
|
|
|
|
onPullDownRefresh(() => {
|
|
if (isPagingRefNotFound()) return;
|
|
paging.value.reload().catch(() => {});
|
|
});
|
|
|
|
onPageScroll((e) => {
|
|
if (isPagingRefNotFound()) return;
|
|
paging.value.updatePageScrollTop(e.scrollTop);
|
|
e.scrollTop < 10 && paging.value.doChatRecordLoadMore();
|
|
});
|
|
|
|
onReachBottom(() => {
|
|
if (isPagingRefNotFound()) return;
|
|
paging.value.pageReachBottom();
|
|
});
|
|
|
|
const toOrder = () => {
|
|
uni.switchTab({
|
|
url: '/pages/order/order'
|
|
});
|
|
};
|
|
|
|
let searchChange = (e) => {
|
|
query.keyWord = e;
|
|
paging.value.reload();
|
|
};
|
|
|
|
let showMode = () => {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '暂未开放',
|
|
showCancel: false,
|
|
confirmText: '确认',
|
|
success: () => {}
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
/* background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%); */
|
|
background-color: #f7f7f7;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.search_header {
|
|
position: relative;
|
|
&_blur {
|
|
width: 100%;
|
|
height: 185rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background: #dbe6ff;
|
|
opacity: 0.8;
|
|
filter: blur(50px);
|
|
/* #ifdef MP-ALIPAY */
|
|
z-index: 0;
|
|
/* #endif */
|
|
/* #ifdef MP-WEIXIN */
|
|
z-index: -1;
|
|
/* #endif */
|
|
}
|
|
|
|
&_grid {
|
|
// margin: 35rpx 0;
|
|
margin-top: 25rpx;
|
|
border-radius: 15rpx;
|
|
@include flex($space: space-between);
|
|
&_view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 126rpx;
|
|
font-size: 26rpx;
|
|
// background: #ffffff;
|
|
// border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
image {
|
|
width: 99rpx;
|
|
height: 99rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.order_list {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 15rpx;
|
|
margin-bottom: 30rpx;
|
|
font-size: 30rpx;
|
|
background-color: #fff;
|
|
width: 690rpx;
|
|
margin: 0 30rpx 30rpx;
|
|
border-radius: 15rpx;
|
|
|
|
// width: 690rpx;
|
|
// background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
|
|
// box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(88, 140, 255, 0.1);
|
|
// border-radius: 44rpx 44rpx 0rpx 0rpx;
|
|
|
|
&_view {
|
|
padding: 15rpx 30rpx;
|
|
background-color: #fff;
|
|
border-radius: 15rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
&_active {
|
|
background-color: #4879e6;
|
|
color: #fff;
|
|
}
|
|
|
|
// &_header {
|
|
// width: 100%;
|
|
// height: 100rpx;
|
|
// @include flex;
|
|
// font-weight: bold;
|
|
// font-size: 36rpx;
|
|
// color: #232323;
|
|
// background-color: #ffffff;
|
|
|
|
// position: sticky;
|
|
// top: 360rpx;
|
|
// left: 0;
|
|
|
|
// &_view {
|
|
// position: relative;
|
|
// margin-right: 50rpx;
|
|
// view {
|
|
// position: relative;
|
|
// z-index: 99;
|
|
// }
|
|
// &_dian {
|
|
// position: absolute !important;
|
|
// bottom: 0rpx;
|
|
// right: 20rpx;
|
|
// width: 66rpx;
|
|
// height: 20rpx;
|
|
// background-color: #4879e6;
|
|
// border-radius: 10rpx;
|
|
// z-index: 1 !important;
|
|
// }
|
|
// }
|
|
// }
|
|
}
|
|
|
|
button::after {
|
|
all: unset;
|
|
}
|
|
</style>
|