442 lines
8.6 KiB
Vue
442 lines
8.6 KiB
Vue
<template>
|
|
<view class="wrapper">
|
|
<view class="itemwrap">
|
|
<text class="title">当前选择城市</text>
|
|
<view class="listwrap">
|
|
<view class="itemlist" @tap="goShopList" :data-id="shopArea[address].area_id" :data-name="address">
|
|
<view class="itemTitle">{{address}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="itemwrap">
|
|
<text class="title">当前定位城市</text>
|
|
<view class="listwrap">
|
|
<view class="itemlist" @tap="goShopList" :data-id="shopArea[address].area_id" :data-name="Usercity">
|
|
<view class="itemTitle">{{Usercity}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="itemwrap">
|
|
<text class="title">已开通城市</text>
|
|
<view class="listwrap">
|
|
<view class="itemlist" @tap="goShopList" data-id="0" data-name="全部">
|
|
<view class="itemTitle">全部</view>
|
|
</view>
|
|
<view class="itemlist" v-for="(item, index) in shopArea" :key="index" @tap="goShopList" :data-id="item.area_id" :data-name="item.area_name">
|
|
<view class="itemTitle">{{item.area_name}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import {apiArr} from '../../api/community.js';
|
|
|
|
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
shopArea: [],
|
|
address: '定位中',
|
|
lat: '',
|
|
lng: '',
|
|
qqmap_key: '',
|
|
Usercity: '',
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.getHostInfo();
|
|
this.getAddress();
|
|
this.getShopAreaList();
|
|
this.Usercity = uni.getStorageSync('Usercity');
|
|
},
|
|
methods: {
|
|
getHostInfo() {
|
|
uni.request({
|
|
url: apiArr.get_host_info,
|
|
method: 'POST',
|
|
header: {
|
|
'Content-type': 'application/x-www-form-urlencoded'
|
|
},
|
|
success: (result) => {
|
|
let wxapp = result.data.all.wxapp;
|
|
if (wxapp.qqmap_key) {
|
|
this.qqmap_key = wxapp.qqmap_key;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
getAddress() {
|
|
let userlocat = uni.getStorageSync('userlocat');
|
|
let nowtime = Date.parse(new Date()) / 1000;
|
|
|
|
if (!userlocat || userlocat.overtime < nowtime || !userlocat.city) {
|
|
uni.showLoading({
|
|
title: '定位中...'
|
|
});
|
|
uni.getLocation({
|
|
success: (res) => {
|
|
let overtime = Date.parse(new Date()) / 1000 + 7200;
|
|
this.lat = res.latitude;
|
|
this.lng = res.longitude;
|
|
|
|
if (this.qqmap_key) {
|
|
uni.request({
|
|
url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=${this.qqmap_key}&get_poi=0`,
|
|
success: (res) => {
|
|
let city = res.data.result.address_component.city;
|
|
uni.setStorageSync('city', city);
|
|
|
|
console.log(res,'asdasd');
|
|
|
|
if (city) {
|
|
this.address = city;
|
|
let area = this.shopArea;
|
|
if (typeof area[city] !== 'undefined') {
|
|
// setData(this, 'area_id', area[city]['area_id']);
|
|
}
|
|
}
|
|
userlocat = {
|
|
userlat: this.lat,
|
|
userlng: this.lng,
|
|
overtime: overtime,
|
|
city: city
|
|
};
|
|
uni.setStorageSync('userlocat', userlocat);
|
|
uni.hideLoading();
|
|
}
|
|
});
|
|
} else {
|
|
uni.request({
|
|
url: apiArr.get_maps_geocoder,
|
|
success: (res) => {
|
|
let city = res.data.city;
|
|
if (city) {
|
|
this.address = city;
|
|
let area = this.shopArea;
|
|
if (typeof area[city] !== 'undefined') {
|
|
// setData(this, 'area_id', area[city]['area_id']);
|
|
}
|
|
}
|
|
userlocat = {
|
|
userlat: this.lat,
|
|
userlng: this.lng,
|
|
overtime: overtime,
|
|
city: city
|
|
};
|
|
uni.setStorageSync('userlocat', userlocat);
|
|
uni.hideLoading();
|
|
}
|
|
});
|
|
}
|
|
|
|
uni.request({
|
|
url: apiArr.setcookie_location,
|
|
method: 'POST',
|
|
header: {
|
|
'Content-type': 'application/x-www-form-urlencoded'
|
|
},
|
|
data: userlocat,
|
|
success: (result) => {
|
|
console.log(result);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
let address = uni.getStorageSync('city') || userlocat.city;
|
|
this.address = address;
|
|
}
|
|
},
|
|
getShopAreaList() {
|
|
|
|
console.log(apiArr.get_community_area_list);
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
});
|
|
uni.request({
|
|
url: apiArr.get_community_area_list,
|
|
method: 'GET',
|
|
header: {
|
|
'Content-type': 'application/x-www-form-urlencoded'
|
|
},
|
|
success: (result) => {
|
|
console.log(result);
|
|
|
|
let {
|
|
data: {
|
|
list
|
|
}
|
|
} = result;
|
|
if (list) {
|
|
this.shopArea = list
|
|
}
|
|
|
|
|
|
},
|
|
fail(err) {
|
|
console.log(err);
|
|
},
|
|
complete: () => uni.hideLoading()
|
|
});
|
|
},
|
|
goShopList(event) {
|
|
let area_id = event.currentTarget.dataset.id;
|
|
let name = event.currentTarget.dataset.name;
|
|
if (name == '定位中') {
|
|
this.getAddress();
|
|
return;
|
|
}
|
|
|
|
const pages = getCurrentPages();
|
|
const prevPage = pages[pages.length - 2];
|
|
area_id = area_id || '';
|
|
|
|
const userlocat = uni.getStorageSync('userlocat');
|
|
userlocat.city = name;
|
|
console.log(event);
|
|
uni.setStorageSync('userlocat', userlocat);
|
|
uni.setStorageSync('city', name);
|
|
|
|
// prevPage.setData({
|
|
// area_id: area_id,
|
|
// address: name
|
|
// });
|
|
this.address = name
|
|
this.area_id = area_id
|
|
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
success: (res) => {
|
|
console.log('返回成功', res);
|
|
},
|
|
fail: (err) => {
|
|
console.error('返回失败', err);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.top_nav {
|
|
margin-left: 16px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.nav-name {
|
|
color: #fff;
|
|
font-size: 30rpx;
|
|
width: 16.66%;
|
|
text-align: center;
|
|
line-height: 28px;
|
|
flex-direction: column;
|
|
display: inline-flex;
|
|
height: 60px;
|
|
position: relative;
|
|
}
|
|
|
|
/* .nav-hover {
|
|
font-weight: 600;
|
|
border-bottom: 3px solid #D3BA77;
|
|
} */
|
|
|
|
.nav-hover::after {
|
|
content: " ";
|
|
width: 30%;
|
|
height: 4px;
|
|
background: #D3BA77;
|
|
position: absolute;
|
|
bottom: 1px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.nav-date {
|
|
width: 16.66%;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
flex-direction: column;
|
|
display: inline-flex;
|
|
justify-items: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.nav-date image {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
.wrapper {
|
|
margin-top: 20px;
|
|
border-radius: 10px 10px 0 0;
|
|
}
|
|
|
|
.itemwrap {
|
|
margin-top: 0;
|
|
border-radius: 10px 10px 0 0;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.itemwrap .title {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.itemwrap,
|
|
.listwrap {
|
|
height: auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.listwrap {
|
|
margin: 10px auto;
|
|
width: 96%;
|
|
}
|
|
|
|
.itemlist {
|
|
margin: 5px 1.5%;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
width: 30.33%;
|
|
float: left;
|
|
text-align: center;
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
.itemTitle {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.intro {
|
|
height: 60px;
|
|
}
|
|
|
|
.intro-left {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.room-img {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.room-intro {
|
|
margin-left: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.room-name {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.room-price {
|
|
font-size: 14px;
|
|
margin-top: 5px;
|
|
color: #D3BA77;
|
|
}
|
|
|
|
.room-nume {
|
|
font-size: 12px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.in-free {
|
|
float: right;
|
|
border: 1px solid #6F9473;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.in-use {
|
|
float: right;
|
|
border: 1px solid #DB8259;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.use {
|
|
width: 100%;
|
|
height: 35px;
|
|
border-radius: 3px 3px 0 0;
|
|
}
|
|
|
|
.use text {
|
|
line-height: 35px;
|
|
font-size: 16px;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.in {
|
|
width: 52px;
|
|
height: 17px;
|
|
}
|
|
|
|
.in text {
|
|
line-height: 17px;
|
|
font-size: 10px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.notes {
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.color-card {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.card-list {
|
|
border-radius: 2px;
|
|
margin: 4px 0 0 24px;
|
|
}
|
|
|
|
.color-card text {
|
|
margin-left: 6px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.endtime {
|
|
float: right;
|
|
}
|
|
|
|
.endtime text {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.timeline {
|
|
display: flex;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.line {
|
|
width: 4.3%
|
|
}
|
|
|
|
.line-card {
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.line text {
|
|
font-size: 10px;
|
|
margin-top: 4px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
</style> |