You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

678 lines
25 KiB
Vue

<template>
<view>
<view class="positionLetter" :style="'top:' + pltop + 'px'" v-if="plShow">
{{ alpha }}
</view>
<scroll-view :scroll-y="true" style="height: 100vh" :scroll-into-view="toView" @scroll="leftMove">
<!-- scroll-with-animation="{{true}}" -->
<view class="p10200" id="top">
<!-- <view class="weui-search-bar weui-search-bar_focusing" id="searchBar">
<form class="weui-search-bar__form">
<view class="weui-search-bar__box">
<i class="weui-icon-search"></i>
<input type="text" class="weui-search-bar__input" placeholder="搜索城市/拼音" value="{{inputVal}}"
focus="{{inputShowed}}" bindinput="inputTyping" />
<span class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput"></span>
</view>
</form>
</view> -->
<view class="headTxt">当前城市</view>
<view class="container">
<view @tap="selectQuanGuo" :class="'item ' + (selectedQuanGuo.checked ? 'active' : '')">全国</view>
<view @tap="getLocation" :class="'item ' + (selectedCityLocal.checked ? 'active' : '')" v-if="selectedCityLocal.shortName">
<i class="iconfont icon-dizhi mr8"></i>
{{ selectedCityLocal.shortName }}
</view>
<view
@tap="selectOld"
v-if="selectedCity.name != '' && selectedCity.name != null && selectedCity.name != selectedCityLocal.name"
:class="'item ' + (selectedCity.checked ? 'active' : '')"
>
{{ selectedCity.shortName }}
</view>
</view>
<!-- <view class="headTxt" id="hot">热门城市</view>
<view class="container">
<view class="item {{hotCitySelect == index ? 'active' :''}}" wx:for="{{hotCity}}" wx:for-item="item"
wx:for-index="index" data-id="{{index}}" bindtap="selectCity">{{item.name}}</view>
<view class="item {{hotCitySelect == index ? 'active' :''}}" wx:for="{{hotCity}}" wx:for-item="item"
wx:for-index="index" data-id="{{index}}" bindtap="selectCity">{{item.name}}</view>
<view class="item {{hotCitySelect == index ? 'active' :''}}" wx:for="{{hotCity}}" wx:for-item="item"
wx:for-index="index" data-id="{{index}}" bindtap="selectCity">{{item.name}}</view>
<view class="item {{hotCitySelect == index ? 'active' :''}}" wx:for="{{hotCity}}" wx:for-item="item"
wx:for-index="index" data-id="{{index}}" bindtap="selectCity">{{item.name}}</view>
</view> -->
<block v-for="(item, index) in cityList" :key="index">
<view class="headTxt" :id="item.name == '热门城市' ? 'hot' : item.name">{{ item.name }}</view>
<view class="container">
<view
@tap="selectCity"
:data-city="item1"
:class="'item ' + (item1.name == selectedCityTemp.name && selectedCityTemp.checked ? 'active' : '')"
v-for="(item1, index1) in item.list"
:key="index1"
>
{{ item1.shortName }}
</view>
</view>
</block>
</view>
</scroll-view>
<scroll-view class="letter-list" :enhanced="true" @touchstart.stop.prevent="handlerAlphaTap" @touchmove="touchMove" @touchend.stop.prevent="touchEnd">
<!-- {{toView == 'top' ?'rlhc':'' }}" -->
<view :class="'letter ' + (toView == 'top' ? 'rlhc' : '')" @tap="goTop" hover-class="rlhc"><i class="iconfont icon-sousuo f12"></i></view>
<!-- {{toView == 'hot' ?'rlhc':'' }}" -->
<view :class="'letter ' + (toView == 'hot' ? 'rlhc' : '')" @tap="clickHot" hover-class="rlhc">热</view>
<!-- {{toView == item ?'rlhc':'' }}" -->
<view
:class="'letter ' + (toView == item ? 'rlhc' : '')"
hover-class="rlhc"
@click.stop="chooseLetter"
:data-item="item"
v-for="(item, index) in letter"
:key="index"
>
{{ item }}
</view>
</scroll-view>
<view class="btmFix">
<view class="display-flex">
<view class="flex-1 pl20 pr10">
<button class="resetBtn btn" style="font-weight: 400" @click.stop="reset">重置</button>
</view>
<view class="flex-1 pl10 pr20">
<button type="primary" class="loginOut btn" style="font-weight: 400" @click.stop="loginOut"></button>
</view>
</view>
</view>
</view>
</template>
<script>
// pages/city/index.js
const app = getApp();
export default {
data() {
return {
inputShowed: false,
inputVal: '',
hotCity: [
{
id: 1,
name: '郑州'
},
{
id: 2,
name: '上海'
},
{
id: 3,
name: '昆山'
},
{
id: 4,
name: '苏州'
},
{
id: 5,
name: '无锡'
},
{
id: 6,
name: '深圳'
},
{
id: 7,
name: '南京'
},
{
id: 8,
name: '东莞'
},
{
id: 9,
name: '常州'
}
],
hotCitySelect: -1,
toView: '',
from: '',
cityList: [],
letter: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
selectedQuanGuo: {
name: '全国',
shortName: '全国',
checked: true
},
selectedCityLocal: {
name: '',
shortName: '',
checked: false
},
selectedCity: {
name: '',
shortName: '',
checked: false
},
selectedCityTemp: {
name: '',
shortName: '',
checked: false
},
alpha: '',
plShow: false,
pltop: 70,
selectedQuanGuoStorage: {
name: '全国',
shortName: '全国',
checked: true
},
selectedCityStorage: {
name: '',
shortName: '',
checked: false
},
selectedCityLocalStorage: {
name: '',
shortName: '',
checked: false
},
selectedCityTempStorage: {
name: '',
shortName: '',
checked: false
},
storeJobListSearchForm: '',
searchCityParamStorage: ''
};
}
/**
* 生命周期函数--监听页面加载
*/,
onLoad: function (options) {
var that = this;
console.log(options);
if (options.from) {
this.setData({
from: options.from
});
}
try {
var searchCityParamStorage = uni.getStorageSync('searchCityParamStorage');
console.log('searchCityParamStorage======', searchCityParamStorage);
var selectedCityTempParamStorage = uni.getStorageSync('selectedCityTempParamStorage');
console.log('selectedCityTempParamStorage======', selectedCityTempParamStorage);
var tag = uni.getStorageSync('selectedQuanGuoStorage');
if (tag && app.globalData.isNotEmptyCheck(tag.name)) {
that.selectedQuanGuoStorage = uni.getStorageSync('selectedQuanGuoStorage');
console.log('selectedQuanGuoStorage======', that.selectedQuanGuoStorage);
that.selectedCityStorage = uni.getStorageSync('selectedCityStorage');
console.log('selectedCityStorage======', that.selectedCityStorage);
that.selectedCityLocalStorage = uni.getStorageSync('selectedCityLocalStorage');
console.log('selectedCityLocalStorage======', that.selectedCityLocalStorage);
that.selectedCityTempStorage = uni.getStorageSync('selectedCityTempStorage');
console.log('selectedCityTempStorage======', that.selectedCityTempStorage);
}
if (searchCityParamStorage && app.globalData.isNotEmptyCheck(searchCityParamStorage.name)) {
that.setData({
selectedQuanGuo: JSON.parse(JSON.stringify(that.selectedQuanGuoStorage)),
selectedCity: JSON.parse(JSON.stringify(that.selectedCityStorage)),
selectedCityTemp: JSON.parse(JSON.stringify(that.selectedCityTempStorage))
});
} else {
that.setData({
selectedQuanGuo: that.selectedQuanGuo,
selectedCityLocal: that.selectedCityLocal,
selectedCity: that.selectedCity,
selectedCityTemp: that.selectedCityTemp
});
}
} catch (e) {
console.log('CatchClause', e);
console.log('CatchClause', e);
console.log('获取缓存设置的查询职位列表参数错误:', e);
}
this.getAllCityLevel2();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
// onShareAppMessage1: function () {
// }
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/ methods: {
leftMove(e) {
this.setData({
toView: ''
});
},
handlerAlphaTap(e) {
console.log(e.target.dataset.item);
this.setData({
toView: e.target.dataset.item,
alpha: e.target.dataset.item,
plShow: true
});
},
touchEnd(e) {
this.setData({
plShow: false
});
},
touchMove(e) {
var that = this;
// console.log(e)
console.log(e.changedTouches[0].clientY);
let moveY = e.changedTouches[0].clientY;
let rY = moveY - 80;
// toView:'hot'
// toView:e.target.dataset.item
if (rY >= 0) {
let index = Math.ceil(rY / 22);
// console.log(index);
if (index == 1) {
this.setData({
toView: 'top',
alpha: '查',
plShow: true
});
} else if (index == 2) {
this.setData({
toView: 'hot',
alpha: '热',
plShow: true,
pltop: 92
});
} else {
let nonwAp = that.letter[index - 3];
let hg = (index - 2) * 22;
this.setData({
toView: nonwAp,
alpha: nonwAp,
plShow: true,
pltop: 92 + hg
});
}
// if(0 <= index < list.length) {
// let nonwAp = list[index];
// nonwAp && this.setData({alpha: nonwAp.alphabet});
// }
}
// let {list} = this.data;
// console.log(list)
// console.log(this.data.alphabet)
// let moveY = e.touches[0].clientY;
// let rY = moveY - this.offsetTop;
// if(rY >= 0) {
// let index = Math.ceil((rY - this.apHeight)/ this.apHeight);
// if(0 <= index < list.length) {
// let nonwAp = list[index];
// nonwAp && this.setData({alpha: nonwAp.alphabet});
// }
// }
},
getLocation() {
var that = this;
if (app.globalData.isNotEmptyCheck(app.globalData.lng) && app.globalData.isNotEmptyCheck(app.globalData.lat)) {
that.getCityNameByLatLng(app.globalData.lng, app.globalData.lat, 1);
} else {
uni.getSetting({
success: (res) => {
console.log(res); // res.authSetting.location
if (res.authSetting['scope.userLocation']) {
uni.getLocation({
type: 'gcj02',
success(res1) {
console.log('获取位置');
console.log(res1);
app.globalData.lng = res1.longitude;
app.globalData.lat = res1.latitude;
that.getCityNameByLatLng(res1.longitude, res1.latitude, 1);
},
fail() {}
});
that.getCityNameByLatLng(app.globalData.lng, app.globalData.lat, 1);
} else {
console.log('11111111');
uni.openSetting({
success(res) {
console.log(res.authSetting);
// res.authSetting = {
// "scope.userInfo": true,
// "scope.userLocation": true
// }
}
});
// that.getStoreJobDetailById();
}
}
});
}
},
selectQuanGuo: function (e) {
var that = this;
that.selectedQuanGuo.checked = true;
that.selectedCity.checked = false;
that.selectedCityLocal.checked = false;
that.selectedCityTemp.checked = false;
this.setData({
selectedQuanGuo: that.selectedQuanGuo,
selectedCity: that.selectedCity,
selectedCityTemp: that.selectedCityTemp,
selectedCityLocal: that.selectedCityLocal
});
},
selectOld: function (e) {
var that = this;
that.clearAllChecked();
that.selectedCity.checked = true;
this.setData({
selectedQuanGuo: that.selectedQuanGuo,
selectedCity: that.selectedCity,
selectedCityTemp: that.selectedCityTemp,
selectedCityLocal: that.selectedCityLocal
});
},
reset: function (e) {
this.clearAllChecked();
this.selectedQuanGuo.checked = true;
this.setAllSelected();
},
selectCity: function (e) {
var city = e.currentTarget.dataset.city;
console.log(city);
this.selectedCityLocal.checked = false;
var that = this;
if (this.selectedCity.id != city.id) {
this.selectedCity.checked = false;
}
this.selectedCityTemp = city;
this.selectedCityTemp.checked = true;
this.selectedQuanGuo.checked = false;
this.setData({
selectedCity: that.selectedCity,
selectedCityTemp: that.selectedCityTemp,
selectedQuanGuo: that.selectedQuanGuo,
selectedCityLocal: this.selectedCityLocal
});
},
loginOut: function () {
var that = this;
var temp;
if (that.selectedCityTemp.checked) {
that.clearAllChecked();
that.selectedCityTemp.checked = true;
temp = that.selectedCityTemp;
that.selectedCity = that.selectedCityTemp;
} else if (that.selectedQuanGuo.checked) {
that.clearAllChecked();
that.selectedQuanGuo.checked = true;
// temp = that.data.selectedQuanGuo;
temp = that.selectedQuanGuo;
} else if (that.selectedCity.checked) {
that.clearAllChecked();
that.selectedCity.checked = true;
temp = that.selectedCity;
} else if (that.selectedCityLocal.checked) {
that.clearAllChecked();
that.selectedCityLocal.checked = true;
temp = that.selectedCityLocal;
}
try {
uni.setStorageSync('selectedCityTempParamStorage', that.selectedCity);
uni.setStorageSync('searchCityParamStorage', temp);
uni.setStorageSync('selectedQuanGuoStorage', that.selectedQuanGuo);
uni.setStorageSync('selectedCityStorage', that.selectedCity);
uni.setStorageSync('selectedCityLocalStorage', that.selectedCityLocal);
uni.setStorageSync('selectedCityTempStorage', that.selectedCityTemp);
uni.setStorageSync('FROMCITY', true);
} catch (e) {
console.log('CatchClause', e);
console.log('CatchClause', e);
console.log('index-设置查询职位列表参数错误', e);
}
if (this.from == 'search') {
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2]; // 上一个页面
prevPage.data.storeJobListSearchForm.cityName = temp.name;
prevPage.setData({
storeJobListSearchForm: prevPage.data.storeJobListSearchForm,
searchCityParamStorage: temp
});
uni.navigateBack({
delta: 1
});
// wx.reLaunch({
// url: "../jobListSearch/index?fromSearchPage=1",
// });
} else {
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2]; // 上一个页面
prevPage.data.storeJobListSearchForm.cityName = temp.name;
prevPage.setData({
storeJobListSearchForm: prevPage.data.storeJobListSearchForm,
searchCityParamStorage: temp
});
uni.navigateBack({
delta: 1
});
// var pages = getCurrentPages();
// var prevPage = pages[pages.length - 2]; // 上一个页面
// console.log(prevPage);
// console.log(temp);
// prevPage.data.storeJobListSearchForm.cityName = temp.name;
// prevPage.setData({
// storeJobListSearchForm: prevPage.data.storeJobListSearchForm,
// searchCityParamStorage: temp,
// });
// wx.navigateBack({
// delta: 1,
// });
// wx.reLaunch({
// url: "../firstBill/index?fromSearchPage=1",
// });
}
},
showInput: function () {
this.setData({
inputShowed: true
});
},
hideInput: function () {
this.setData({
inputVal: '',
inputShowed: false
});
},
clearInput: function () {
this.setData({
inputVal: ''
});
},
inputTyping: function (e) {
this.setData({
inputVal: e.detail.value
});
},
clickHot: function (e) {
this.setData({
toView: 'hot'
});
},
goTop: function (e) {
this.setData({
toView: 'top'
});
},
chooseLetter: function (e) {
console.log(e.target.dataset.item);
this.setData({
toView: e.target.dataset.item
});
},
getAllCityLevel2: function () {
var that = this;
uni.request({
url: app.globalData.ip + '/city/getAllCityLevel2',
data: {},
header: app.globalData.header,
method: 'GET',
success: function (res) {
console.log(res);
that.setData({
cityList: res.data.data
});
console.log(that.cityList);
if (app.globalData.isNotEmptyCheck(app.globalData.lng) && app.globalData.isNotEmptyCheck(app.globalData.lat)) {
that.getCityNameByLatLng(app.globalData.lng, app.globalData.lat, 0);
} else {
uni.getLocation({
type: 'gcj02',
success(res) {
console.log(res);
app.globalData.lng = res.longitude;
app.globalData.lat = res.latitude;
that.getCityNameByLatLng(res.longitude, res.latitude, 0);
}
});
}
}
});
},
getCityNameByLatLng: function (longitude, latitude, comeFrom) {
var that = this;
uni.request({
url: app.globalData.ip + '/location/getCityNameByLatLng',
data: {
lng: longitude,
lat: latitude
},
header: app.globalData.headers,
method: 'GET',
success: function (res) {
console.log(res);
if (res.data.status == 200) {
var cityName = res.data.data;
that.cityList.forEach((item) => {
item.list.forEach((item1) => {
if (item1.name == cityName) {
// if (that.data.selectedCityLocalStorage) {}
// debugger;
if (comeFrom == 1) {
//主动点击获取位置
that.clearAllChecked();
that.selectedCityLocal = item1;
that.selectedCityLocal.checked = true;
that.setAllSelected();
} else {
if (that.selectedCityLocalStorage.checked) {
that.clearAllChecked();
that.selectedCityLocal = item1;
that.selectedCityLocal.checked = true;
that.setAllSelected();
} else {
// that.clearAllChecked();
that.selectedCityLocal = item1;
that.selectedCityLocal.checked = false;
that.setAllSelected();
}
}
}
});
});
}
}
});
},
clearAllChecked: function () {
var that = this;
that.selectedQuanGuo.checked = false;
that.selectedCity.checked = false;
that.selectedCityLocal.checked = false;
that.selectedCityTemp.checked = false;
},
setAllSelected: function () {
var that = this;
this.setData({
selectedQuanGuo: that.selectedQuanGuo,
selectedCity: that.selectedCity,
selectedCityTemp: that.selectedCityTemp,
selectedCityLocal: that.selectedCityLocal
});
}
}
};
</script>
<style>
@import './index.css';
</style>