[更新]
This commit is contained in:
张慢慢
213
pages/store/store.js
Normal file
213
pages/store/store.js
Normal file
@@ -0,0 +1,213 @@
|
||||
// pages/store/store.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
stores : [], //门店列表
|
||||
id : 0, //优惠券id
|
||||
searchText : '', //搜索关键字
|
||||
longitude : 0, //经度
|
||||
latitude : 0, //纬度
|
||||
//省份选择
|
||||
areas : [],
|
||||
areaIndex : 0,
|
||||
//市级选择
|
||||
cityList : [],
|
||||
cityIndex : 0,
|
||||
//区域选择
|
||||
regiList : [],
|
||||
regiIndex : 0,
|
||||
|
||||
page : {}, //下一页
|
||||
lodingStats : false //加载状态
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad (options) {
|
||||
// 优惠券id
|
||||
this.setData({
|
||||
id :options.id
|
||||
})
|
||||
|
||||
// 获取位置
|
||||
wx.getLocation({
|
||||
type: 'gcj02',
|
||||
success: res=> {
|
||||
this.setData({
|
||||
longitude : res.longitude,
|
||||
latitude : res.latitude
|
||||
})
|
||||
// 解析坐标
|
||||
getApp().qqmapsdk.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{
|
||||
wx.showToast({
|
||||
title: res.message,
|
||||
icon : 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 选择城市信息
|
||||
*/
|
||||
regi(e){
|
||||
let chantType = e.currentTarget.dataset.type,
|
||||
chantIndex = e.detail.value,
|
||||
name = ""
|
||||
|
||||
if(chantType == "area"){
|
||||
name = "areaIndex"
|
||||
}else if(chantType == "city"){
|
||||
name = "cityIndex"
|
||||
this.getAreas(this.data.cityList[chantIndex].code, "")
|
||||
}else if(chantType == "regi"){
|
||||
name = "regiIndex"
|
||||
}
|
||||
|
||||
this.setData({
|
||||
[name] : chantIndex
|
||||
})
|
||||
|
||||
// 获取门店列表
|
||||
this.storesInfo()
|
||||
},
|
||||
|
||||
/**
|
||||
* 门店列表
|
||||
*/
|
||||
storesInfo(addressInfo, page) {
|
||||
let coupon_id = this.data.id,
|
||||
user_lng = this.data.longitude,
|
||||
user_lat = this.data.latitude,
|
||||
province_id = "",
|
||||
city_id = "",
|
||||
district_id = "",
|
||||
title = this.data.searchText || "",
|
||||
areaIndex = this.data.areaIndex,
|
||||
cityIndex = this.data.cityIndex,
|
||||
regiIndex = this.data.regiIndex,
|
||||
cityList = this.data.cityList,
|
||||
areas = this.data.areas,
|
||||
regiList = this.data.regiList
|
||||
|
||||
if(!addressInfo){
|
||||
province_id = areas[areaIndex].code
|
||||
city_id = cityList[cityIndex].code
|
||||
district_id = regiList[regiIndex].code
|
||||
}
|
||||
|
||||
wx.$api.user.stores(coupon_id, province_id, city_id, district_id, title, user_lng, user_lat, page).then(res=>{
|
||||
let stores = this.data.stores,
|
||||
newData = []
|
||||
if(page == 1 || page == undefined) stores = []
|
||||
newData = stores.concat(res.data.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){
|
||||
cityList = res.data.citys
|
||||
areas = res.data.provinces
|
||||
|
||||
areaIndex = areas.findIndex(val => val.name == addressInfo.province)
|
||||
cityIndex = cityList.findIndex(val => val.name == addressInfo.city)
|
||||
// this.getAreas(cityList[cityIndex].code, addressInfo.district)
|
||||
this.getAreas(cityList[cityIndex].code, '')
|
||||
|
||||
}
|
||||
this.setData({
|
||||
areas : areas,
|
||||
stores : newData,
|
||||
cityList : cityList,
|
||||
areaIndex : areaIndex,
|
||||
cityIndex : cityIndex,
|
||||
page : res.data.stores.page,
|
||||
lodingStats : false
|
||||
})
|
||||
wx.stopPullDownRefresh()
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取区级信息
|
||||
*/
|
||||
getAreas(sn, areas){
|
||||
wx.$api.user.areas(sn).then(res=>{
|
||||
let regiList = res.data,
|
||||
regiIndex = 0
|
||||
|
||||
if(areas) regiIndex = regiList.findIndex(val => val.name == areas)
|
||||
|
||||
this.setData({
|
||||
regiList : regiList,
|
||||
regiIndex : regiIndex
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 查看门店详情页
|
||||
*/
|
||||
detailsTap(e) {
|
||||
let store_id = e.currentTarget.dataset.id,
|
||||
user_lng = this.data.longitude,
|
||||
user_lat = this.data.latitude
|
||||
|
||||
wx.navigateTo({
|
||||
url: '/pages/storeDetails/storeDetails?store_id=' + store_id + '&user_lng=' + user_lng + '&user_lat=' + user_lat,
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 搜索门店
|
||||
*/
|
||||
searchForm(e) {
|
||||
this.setData({
|
||||
searchText : e.detail.value.search
|
||||
})
|
||||
|
||||
// 获取门店列表
|
||||
this.storesInfo()
|
||||
},
|
||||
|
||||
/**
|
||||
* 上拉加载
|
||||
*/
|
||||
onReachBottom(){
|
||||
this.setData({
|
||||
lodingStats: true
|
||||
})
|
||||
let pageNumber = this.data.page.current
|
||||
if(this.data.page.has_more){
|
||||
pageNumber++
|
||||
this.setData({
|
||||
page: pageNumber
|
||||
})
|
||||
this.storesInfo('', pageNumber)
|
||||
}
|
||||
}
|
||||
})
|
||||
4
pages/store/store.json
Normal file
4
pages/store/store.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "门店列表"
|
||||
}
|
||||
64
pages/store/store.wxml
Normal file
64
pages/store/store.wxml
Normal file
@@ -0,0 +1,64 @@
|
||||
<!-- 搜索 -->
|
||||
<form bindsubmit="searchForm" class="search">
|
||||
<view class="searchCont">
|
||||
<image src="/static/icon/secrch_icon.png"></image>
|
||||
<input class="search-navigator" name="search" placeholder="请输入门店名称" value="{{searchText}}"></input>
|
||||
<button class="search-btn" form-type="submit">搜索</button>
|
||||
</view>
|
||||
</form>
|
||||
|
||||
<!-- 筛选 -->
|
||||
<view class="screen">
|
||||
<view class="screenLabel">
|
||||
<picker bindchange="regi" data-type="area" value="{{areaIndex}}" range="{{areas}}" range-key="name" name="district_id">
|
||||
<view class="nowrap picker">
|
||||
{{areas[areaIndex].name}}
|
||||
</view>
|
||||
<image class="screenLabel-arrow" src="/static/icon/arrow_down.png"></image>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="screenLabel">
|
||||
<picker bindchange="regi" data-type="city" value="{{cityIndex}}" range="{{cityList}}" range-key="name" name="district_id">
|
||||
<view class="nowrap picker">
|
||||
{{cityList[cityIndex].name}}
|
||||
</view>
|
||||
<image class="screenLabel-arrow" src="/static/icon/arrow_down.png"></image>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="screenLabel">
|
||||
<picker bindchange="regi" data-type="regi" value="{{regiIndex}}" range="{{regiList}}" range-key="name" name="district_id">
|
||||
<view class="nowrap picker">
|
||||
{{regiList[regiIndex].name}}
|
||||
</view>
|
||||
<image class="screenLabel-arrow" src="/static/icon/arrow_down.png"></image>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 门店列表 -->
|
||||
<view class="storeList" wx:if="{{stores != ''}}">
|
||||
<view class="detailsStore-list" wx:for="{{stores}}" wx:key="stores" bindtap="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" wx:if="{{lodingStats}}">
|
||||
<block wx:if="{{page.has_more}}">
|
||||
<image class="pagesLoding-icon" src="/static/icon/refresh_loding.gif" mode="widthFix"></image>加载中...
|
||||
</block>
|
||||
<block wx:else>
|
||||
没有更多了~
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 优惠券为空 -->
|
||||
<view class="pack-center pages-hint" wx:else>
|
||||
<image src="/static/img/null_icon.png"></image>
|
||||
<view>暂无商家</view>
|
||||
</view>
|
||||
136
pages/store/store.wxss
Normal file
136
pages/store/store.wxss
Normal file
@@ -0,0 +1,136 @@
|
||||
/* 搜索 */
|
||||
.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: right;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 30rpx;
|
||||
color: #ff9b1a;
|
||||
}
|
||||
|
||||
/* 筛选 */
|
||||
.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;
|
||||
}
|
||||
Reference in New Issue
Block a user