[本时生活h5端]
This commit is contained in:
230
pages/store/details.vue
Normal file
230
pages/store/details.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 门店详情 -->
|
||||
<view class="detailsImg">
|
||||
<image :src="storeinfo.cover" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="detailsCont">
|
||||
<view class="detailsName">
|
||||
{{ storeinfo.title }}
|
||||
</view>
|
||||
<view class="detailsLabel">
|
||||
<view class="detailsLabel-left">
|
||||
<image src="/static/static/icon/site_icon.png"></image>
|
||||
<view class="detailsLabel-name">
|
||||
<text>{{ storeinfo.address }}</text>
|
||||
距您 {{ distance }}
|
||||
</view>
|
||||
</view>
|
||||
<image class="detailsLabel-tel" src="/static/icon/tel.png" @tap="tel"></image>
|
||||
</view>
|
||||
<view class="detailsLabel">
|
||||
<view class="detailsLabel-left">
|
||||
<image src="/static/icon/time_icon.png"></image>
|
||||
<view class="detailsLabel-name">
|
||||
<text>营业时间</text>
|
||||
<block v-if="storeinfo.open_time != null">{{ storeinfo.open_time }}</block>
|
||||
<block v-else>00：00</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<view class="detailsBtn">
|
||||
<view class="detailsBtn-cont" @tap="siteMap">
|
||||
去导航
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { storesShow } from '@/apis/interfaces/user'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
storeinfo : '', // 门店详情
|
||||
distance : 0, // 门店距离换算
|
||||
longitude : 0, // 门店详情
|
||||
latitude : 0, // 门店详情
|
||||
};
|
||||
},
|
||||
onLoad(options){
|
||||
storesShow({
|
||||
store_id: options.store_id,
|
||||
user_lng: options.user_lng,
|
||||
user_lat: options.user_lat
|
||||
}).then(res => {
|
||||
let distance = res.distance;
|
||||
if (distance > 1000) {
|
||||
distance = distance / 1000 + "km";
|
||||
} else {
|
||||
distance = distance + "m";
|
||||
}
|
||||
this.storeinfo = res
|
||||
this.distance = distance
|
||||
}).catch(err => {
|
||||
if (!err.login) {
|
||||
if(options.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'
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
// 拨打电话
|
||||
tel(e) {
|
||||
let tel = this.storeinfo.mobile
|
||||
uni.showActionSheet({
|
||||
itemList : ['呼叫商家'],
|
||||
success : res =>{
|
||||
if(res.tapIndex==0){
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: tel
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 导航
|
||||
siteMap(){
|
||||
uni.openLocation({
|
||||
latitude : parseFloat(this.storeinfo.latitude),
|
||||
longitude : parseFloat(this.storeinfo.longitude),
|
||||
address : this.storeinfo.address
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 门店详情 */
|
||||
.detailsImg {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 60%;
|
||||
}
|
||||
|
||||
.detailsImg image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.detailsCont {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.detailsName {
|
||||
font-size: 34rpx;
|
||||
padding: 30rpx;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.detailsLabel {
|
||||
display: flex;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.detailsLabel::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: #e7e7e7;
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
}
|
||||
|
||||
.detailsLabel-left {
|
||||
width: calc(100%- 40rpx);
|
||||
display: flex;
|
||||
flex: 1;
|
||||
color: #5e5e5e;
|
||||
}
|
||||
|
||||
.detailsLabel-left image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin: 20rpx 20rpx 0 0;
|
||||
}
|
||||
|
||||
.detailsLabel-tel {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.detailsLabel-name {
|
||||
font-size: 26rpx;
|
||||
width: calc(100% - 110rpx);
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.detailsLabel-name text {
|
||||
font-weight: 600;
|
||||
font-size: 30rpx;
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.detailsLabel-add {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.detailsBtn {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
position: fixed;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.detailsBtn-cont {
|
||||
width: 100%;
|
||||
background: #ef8e41;
|
||||
color: #fff;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
</style>
|
||||
444
pages/store/index.vue
Normal file
444
pages/store/index.vue
Normal file
@@ -0,0 +1,444 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user