445 lines
15 KiB
Vue
445 lines
15 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 搜索 -->
|
|
<form @submit="searchForm" class="search">
|
|
<view class="searchCont">
|
|
<image src="/static/icon/secrch_icon.png"></image>
|
|
<input class="search-navigator" name="search" placeholder="请输入门店名称" :value="searchText">
|
|
<button class="search-btn" form-type="submit">搜索</button>
|
|
</view>
|
|
</form>
|
|
|
|
<!-- 筛选 -->
|
|
<view class="screen">
|
|
<view class="screenLabel">
|
|
<picker @change="regi" data-type="areasList" :value="areaIndex" :range="areasList" :range-key="'name'"
|
|
name="district_id">
|
|
<view class="nowrap picker" v-if="areasList[areaIndex]">
|
|
{{ areasList[areaIndex].name }}
|
|
</view>
|
|
<image class="screenLabel-arrow" src="/static/icon/arrow_down.png"></image>
|
|
</picker>
|
|
</view>
|
|
<view class="screenLabel">
|
|
<picker @change="regi" data-type="cityList" :value="cityIndex" :range="cityList" :range-key="'name'"
|
|
name="district_id">
|
|
<view class="nowrap picker" v-if="cityList[cityIndex]">
|
|
{{ cityList[cityIndex].name }}
|
|
</view>
|
|
<image class="screenLabel-arrow" src="/static/icon/arrow_down.png"></image>
|
|
</picker>
|
|
</view>
|
|
<view class="screenLabel">
|
|
<picker @change="regi" data-type="regiList" :value="regiIndex" :range="regiList" :range-key="'name'"
|
|
name="district_id">
|
|
<view class="nowrap picker" v-if="regiList[regiIndex]">
|
|
{{ regiList[regiIndex].name }}
|
|
</view>
|
|
<image class="screenLabel-arrow" src="/static/icon/arrow_down.png"></image>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 门店列表 -->
|
|
<view class="storeList" v-if="storesList.length > 0">
|
|
<view v-for="(item, index) in storesList" :key="index" class="detailsStore-list" @tap="detailsTap"
|
|
:data-id="(item.store_id)">
|
|
<image :src="item.cover" class="detailsStore-logo"></image>
|
|
<view class="detailsStore-cont">
|
|
<view class="nowrap detailsStore-name">{{ item.title }}</view>
|
|
<view class="detailsStore-place">
|
|
<text class="nowrap">{{ item.address }}</text>
|
|
{{ item.km }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="pagesLoding" v-if="lodingStats">
|
|
<block v-if="page.has_more">
|
|
<image class="pagesLoding-icon" src="/static/icon/refresh_loding.gif" mode="widthFix">
|
|
</image>加载中...
|
|
</block>
|
|
<block v-else>
|
|
没有更多了~
|
|
</block>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商家为空 -->
|
|
<view class="pack-center pages-hint" v-else>
|
|
<image src="/static/img/null_icon.png"></image>
|
|
<view>暂无商家</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js'
|
|
import { stores, areas } from '@/apis/interfaces/user'
|
|
export default {
|
|
data() {
|
|
return {
|
|
storesList: [],
|
|
//门店列表
|
|
couponId: 0,
|
|
//优惠券id
|
|
searchText: '',
|
|
//搜索关键字
|
|
longitude: 0,
|
|
//经度
|
|
latitude: 0,
|
|
//纬度
|
|
//省份选择
|
|
areasList: [],
|
|
areaIndex: 0,
|
|
//市级选择
|
|
cityList: [],
|
|
cityIndex: 0,
|
|
//区域选择
|
|
regiList: [],
|
|
regiIndex: 0,
|
|
page: {
|
|
has_more: false
|
|
},
|
|
//下一页
|
|
lodingStats: false, //加载状态
|
|
qqMap: new QQMapWX({
|
|
key: '4KYBZ-LCAKF-QWOJN-NIDNZ-FZHLZ-2XFW7',
|
|
vm: this
|
|
}),
|
|
type : '' //跳转来源 campus为校园活动跳转
|
|
}
|
|
},
|
|
// 生命周期函数--监听页面加载
|
|
onLoad(options) {
|
|
// 跳转来源
|
|
this.type = options.type
|
|
// 优惠券id
|
|
this.couponId = options.id
|
|
|
|
// 获取定位 - 使用腾讯地图sdk
|
|
uni.getLocation({
|
|
success: res => {
|
|
this.longitude = res.longitude
|
|
this.latitude = res.latitude
|
|
// 调用接口
|
|
this.qqMap.reverseGeocoder({
|
|
location: {
|
|
latitude: res.latitude,
|
|
longitude: res.longitude
|
|
},
|
|
success: res => {
|
|
if(res.message == "query ok"){
|
|
let addressInfo = res.result.address_component
|
|
// 获取门店列表
|
|
this.storesInfo(addressInfo);
|
|
}else{
|
|
uni.showToast({
|
|
title: res.message,
|
|
icon : 'none'
|
|
})
|
|
}
|
|
},
|
|
fail: res => {},
|
|
complete: res => {}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
methods: {
|
|
// 门店列表
|
|
storesInfo(addressInfo, page) {
|
|
let title = this.searchText || ""
|
|
let province_id = "",
|
|
city_id = "",
|
|
district_id = "",
|
|
newcity = this.cityList,
|
|
newAreas = this.areasList,
|
|
regiList = this.regiList,
|
|
areaIndex = this.areaIndex,
|
|
cityIndex = this.cityIndex,
|
|
regiIndex = this.regiIndex
|
|
if(!addressInfo){
|
|
province_id = this.areasList[this.areaIndex].code
|
|
city_id = this.cityList[this.cityIndex].code
|
|
district_id = this.regiList[this.regiIndex].code
|
|
}
|
|
stores({
|
|
coupon_id: this.couponId,
|
|
province_id: province_id,
|
|
city_id: city_id,
|
|
district_id: district_id,
|
|
title: this.searchText || "",
|
|
user_lng: this.longitude,
|
|
user_lat: this.latitude,
|
|
page: page
|
|
}).then(res=>{
|
|
let newStores = this.storesList,
|
|
newData = []
|
|
if(page == 1 || page == undefined) newStores = []
|
|
newData = newStores.concat(res.stores.data)
|
|
newData.map(res=>{
|
|
let distance = res.distance
|
|
if(res.distance > 1000){
|
|
distance = (distance / 1000) + "km"
|
|
}else{
|
|
distance = distance + "m"
|
|
}
|
|
res.km = distance
|
|
})
|
|
if(addressInfo){
|
|
newcity = res.citys
|
|
newAreas = res.provinces
|
|
areaIndex = newAreas.findIndex(val => val.name == addressInfo.province)
|
|
cityIndex = newcity.findIndex(val => val.name == addressInfo.city)
|
|
this.getAreas(newcity[cityIndex].code, '')
|
|
}
|
|
|
|
this.storesList = newData
|
|
this.cityList = newcity
|
|
this.cityIndex = cityIndex
|
|
this.areasList = newAreas
|
|
this.areaIndex = areaIndex
|
|
this.page = res.stores.page
|
|
this.lodingStats = false
|
|
uni.stopPullDownRefresh()
|
|
})
|
|
},
|
|
|
|
// 获取区级信息
|
|
getAreas(sn, areasData){
|
|
areas(sn).then(res=>{
|
|
let newRegi = res,
|
|
newregiIndex = 0
|
|
if(areasData) newregiIndex = newRegi.findIndex(val => val.name == areasData)
|
|
this.regiList = newRegi
|
|
this.regiIndex = newregiIndex
|
|
}).catch(err => {
|
|
if (!err.login) {
|
|
if(this.type == 'campus') {
|
|
uni.showModal({
|
|
title: '用户登录已过期',
|
|
content: '请重新登录',
|
|
showCancel: false,
|
|
success: res => {
|
|
if (res.confirm) {
|
|
uni.redirectTo({
|
|
url: '/pages/campus/signin'
|
|
});
|
|
}
|
|
}
|
|
})
|
|
}else {
|
|
uni.showModal({
|
|
title: '用户登录已过期',
|
|
content: '请重新登录',
|
|
showCancel: false,
|
|
success: res => {
|
|
if (res.confirm) {
|
|
uni.redirectTo({
|
|
url: '/pages/auth/login'
|
|
});
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// 选择城市信息
|
|
regi(e){
|
|
let chantType = e.currentTarget.dataset.type,
|
|
chantIndex = e.detail.value,
|
|
name = ""
|
|
|
|
if(chantType == "areasList"){
|
|
name = "areaIndex"
|
|
this.areaIndex = chantIndex
|
|
}else if(chantType == "cityList"){
|
|
name = "cityIndex"
|
|
this.getAreas(this.cityList[chantIndex].code, "")
|
|
this.cityIndex = chantIndex
|
|
}else if(chantType == "regiList"){
|
|
name = "regiIndex"
|
|
this.regiIndex = chantIndex
|
|
}
|
|
|
|
// 获取门店列表
|
|
this.storesInfo()
|
|
},
|
|
|
|
// 查看门店详情页
|
|
detailsTap(e) {
|
|
let store_id = e.currentTarget.dataset.id,
|
|
user_lng = this.longitude,
|
|
user_lat = this.latitude
|
|
uni.navigateTo({
|
|
url: '/pages/store/details?store_id=' + store_id + '&user_lng=' + user_lng + '&user_lat=' + user_lat,
|
|
})
|
|
},
|
|
|
|
// 搜索门店
|
|
searchForm(e) {
|
|
this.searchText = e.detail.value.search
|
|
|
|
// 获取门店列表
|
|
this.storesInfo()
|
|
},
|
|
|
|
// 上拉加载
|
|
onReachBottom(){
|
|
this.lodingStats = true
|
|
let pageNumber = this.page.current
|
|
if(this.page.has_more){
|
|
pageNumber++
|
|
this.page = pageNumber
|
|
this.storesInfo('', pageNumber)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
/* 搜索 */
|
|
.search {
|
|
background: #fff;
|
|
position: fixed;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
height: 110rpx;
|
|
z-index: 99;
|
|
}
|
|
|
|
.searchCont {
|
|
background: #f7f7f7;
|
|
border-radius: 50rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
font-size: 28rpx;
|
|
margin: 20rpx 20rpx 0;
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
}
|
|
|
|
.searchCont image {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
margin: 24rpx 20rpx 0 0;
|
|
}
|
|
|
|
.searchCont input {
|
|
height: 100%;
|
|
width: calc(100% - 150rpx);
|
|
}
|
|
|
|
.searchCont button {
|
|
background: transparent;
|
|
width: 100rpx !important;
|
|
text-align: center;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
font-size: 30rpx;
|
|
color: #ff9b1a;
|
|
}
|
|
|
|
.search-btn::after {
|
|
display: none;
|
|
}
|
|
|
|
/* 筛选 */
|
|
.screen {
|
|
background: #fff;
|
|
position: fixed;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 110rpx;
|
|
height: 90rpx;
|
|
overflow: hidden;
|
|
z-index: 99;
|
|
}
|
|
|
|
.screenLabel {
|
|
float: left;
|
|
width: calc(33.33% - 20rpx);
|
|
text-align: center;
|
|
color: #5f5f5f;
|
|
line-height: 90rpx;
|
|
font-size: 28rpx;
|
|
margin: 0 10rpx;
|
|
}
|
|
|
|
.screenLabel picker {
|
|
width: calc(100% - 17rpx);
|
|
position: relative;
|
|
}
|
|
|
|
.screenLabel-arrow {
|
|
position: absolute;
|
|
right: 0;
|
|
top: calc(50% - 17rpx);
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
}
|
|
|
|
/* 门店列表 */
|
|
|
|
.storeList {
|
|
background: #fff;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 220rpx;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
.detailsStore-list {
|
|
position: relative;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.detailsStore-list:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.detailsStore-logo {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.detailsStore-cont {
|
|
position: absolute;
|
|
left: 150rpx;
|
|
top: 10rpx;
|
|
width: calc(100% - 150rpx);
|
|
}
|
|
|
|
.detailsStore-tel {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
margin-top: 25rpx;
|
|
}
|
|
|
|
.detailsStore-place {
|
|
font-size: 24rpx;
|
|
line-height: 40rpx;
|
|
color: #5a5a5a;
|
|
display: flex;
|
|
}
|
|
|
|
.detailsStore-place text {
|
|
flex: 1;
|
|
display: inline-block;
|
|
font-size: 28rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.detailsStore-name {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
</style>
|