604 lines
15 KiB
Vue
604 lines
15 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="fu-tabbar" :style="[{ height: CustomBar + 'px' }]">
|
||
<view :style="[{ height: StatusBar + 'px' }]"></view>
|
||
<view class="fu-tabbar-con flex justify-start align-center solid-bottom" :style="[{ height: CustomBar - StatusBar + 'px' }]">
|
||
<view class="cuIcon-back padding-left-sm text-333 text-xl" @click="handleBack"></view>
|
||
<view class="search-wrap">
|
||
<view class="cu-bar search bg-white">
|
||
<view class="search-form round">
|
||
<text class="cuIcon-search"></text>
|
||
<input
|
||
v-model="keywords"
|
||
:adjust-position="false"
|
||
type="text"
|
||
:placeholder="$t('搜索')"
|
||
confirm-type="search"
|
||
@confirm="handleSearch"
|
||
/>
|
||
<text v-if="keywords.length != 0" class="cuIcon-roundclosefill text-lg text-gray padding-right-xs" @tap="handleClear"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-show="isSeach" class="uni-indexed-list__list">
|
||
<view v-for="(item, index) in list" :key="index" class="uni-indexed-list__item" hover-class="uni-indexed-list__item--hover">
|
||
<view class="uni-indexed-list__item-container" @click="searchClick(item)">
|
||
<view class="uni-indexed-list__item-border" :class="{ 'uni-indexed-list__item-border--last': index === list.length - 1 }">
|
||
<text class="uni-indexed-list__item-content">{{ item.name }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class=""></view>
|
||
</view>
|
||
|
||
<view class="choose-position-wrap padding-left-sm padding-right-sm padding-bottom-sm" v-show="!isSeach">
|
||
<view class="choose-position-tips text-999 text-df text-bold">
|
||
{{ $t('定位/最近访问') }}
|
||
</view>
|
||
<view class="choose-position flex justify-start align-center">
|
||
<view v-if="location.name" class="choose-position-item solid bg-white text-center text-lg text-333 text-cut" @click="searchClick(location)">
|
||
<text class="cuIcon-locationfill text-red"></text>
|
||
{{ location.name }}
|
||
</view>
|
||
<block v-for="(item, index) in storage" :key="index">
|
||
<view class="choose-position-item solid bg-white text-center text-lg text-333 text-cut" @click="searchClick(item)">
|
||
{{ item.name }}
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
<view class="" style="position: relative" :style="[{ height: 'calc(100% - 148rpx - ' + CustomBar + 'px)' }]" v-show="!isSeach">
|
||
<view class="uni-indexed-list" ref="list" id="list">
|
||
<!-- #ifdef APP-NVUE -->
|
||
<list class="uni-indexed-list__scroll" scrollable="true" show-scrollbar="false">
|
||
<cell v-for="(list, idx) in lists" :key="idx" :ref="'uni-indexed-list-' + idx">
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP-NVUE -->
|
||
<scroll-view :scroll-into-view="scrollViewId" class="uni-indexed-list__scroll" scroll-y>
|
||
<view v-for="(list, idx) in lists" :key="idx" :id="'uni-indexed-list-' + idx">
|
||
<!-- #endif -->
|
||
<indexed-list-item :list="list" :loaded="loaded" :idx="idx" @itemClick="onClick"></indexed-list-item>
|
||
<!-- #ifndef APP-NVUE -->
|
||
</view>
|
||
</scroll-view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP-NVUE -->
|
||
</cell>
|
||
</list>
|
||
<!-- #endif -->
|
||
<view
|
||
class="uni-indexed-list__menu"
|
||
:class="touchmove ? 'uni-indexed-list__menu--active' : ''"
|
||
@touchstart="touchStart"
|
||
@touchmove.stop.prevent="touchMove"
|
||
@touchend="touchEnd"
|
||
@mousedown.stop="mousedown"
|
||
@mousemove.stop.prevent="mousemove"
|
||
@mouseleave.stop="mouseleave"
|
||
>
|
||
<view v-for="(list, key) in lists" :key="key" class="uni-indexed-list__menu-item">
|
||
<text class="uni-indexed-list__menu-text" :class="touchmoveIndex == key ? 'uni-indexed-list__menu-text--active' : ''">
|
||
{{ list.key }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="touchmove" class="uni-indexed-list__alert-wrapper">
|
||
<text class="uni-indexed-list__alert">{{ lists[touchmoveIndex].key }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import indexedListItem from './uni-indexed-list-item.vue'
|
||
import citys from './static/citys.js'
|
||
// #ifdef APP-NVUE
|
||
const dom = weex.requireModule('dom')
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
function throttle(func, delay) {
|
||
var prev = Date.now()
|
||
return function () {
|
||
var context = this
|
||
var args = arguments
|
||
var now = Date.now()
|
||
if (now - prev >= delay) {
|
||
func.apply(context, args)
|
||
prev = Date.now()
|
||
}
|
||
}
|
||
}
|
||
|
||
function touchMove(e) {
|
||
let pageY = e.touches[0].pageY
|
||
let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
|
||
if (this.touchmoveIndex === index) {
|
||
return false
|
||
}
|
||
let item = this.lists[index]
|
||
if (item) {
|
||
// #ifndef APP-NVUE
|
||
this.scrollViewId = 'uni-indexed-list-' + index
|
||
this.touchmoveIndex = index
|
||
// #endif
|
||
// #ifdef APP-NVUE
|
||
dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
|
||
animated: false,
|
||
})
|
||
this.touchmoveIndex = index
|
||
// #endif
|
||
}
|
||
}
|
||
const throttleTouchMove = throttle(touchMove, 40)
|
||
// #endif
|
||
|
||
/**
|
||
* IndexedList 索引列表
|
||
* @description 用于展示索引列表
|
||
* @tutorial https://ext.dcloud.net.cn/plugin?id=375
|
||
* @value true 展示模式
|
||
* @value false 选择模式
|
||
* @property {Object} options 索引列表需要的数据对象
|
||
* @event {Function} click 点击列表事件 ，返回当前选择项的事件对象
|
||
* @example <uni-indexed-list options="" @click=""></uni-indexed-list>
|
||
*/
|
||
export default {
|
||
name: 'UniIndexedList',
|
||
components: {
|
||
indexedListItem,
|
||
},
|
||
data() {
|
||
return {
|
||
lists: [],
|
||
winHeight: 0,
|
||
itemHeight: 0,
|
||
winOffsetY: 0,
|
||
touchmove: false,
|
||
touchmoveIndex: -1,
|
||
scrollViewId: '',
|
||
touchmovable: true,
|
||
loaded: false,
|
||
isPC: false,
|
||
keywords: '',
|
||
storage: [],
|
||
isSeach: false,
|
||
list: [],
|
||
location: {},
|
||
}
|
||
},
|
||
watch: {
|
||
options: {
|
||
handler: function () {
|
||
this.setList()
|
||
},
|
||
deep: true,
|
||
},
|
||
},
|
||
mounted() {
|
||
// #ifdef H5
|
||
this.isPC = this.IsPC()
|
||
// #endif
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
this.setList()
|
||
}, 50)
|
||
setTimeout(() => {
|
||
this.loaded = true
|
||
}, 300)
|
||
})
|
||
this.storage = uni.getStorageSync('storage') ? JSON.parse(uni.getStorageSync('storage')) : []
|
||
this.autoGetLocation()
|
||
},
|
||
methods: {
|
||
/**
|
||
* @description 自动定位获取地理位置
|
||
* 这个定位只使用app，且不能获取code值，如果想和组件选择城市匹配，可以根据城市去城市js去查找对应code
|
||
* 或者引入三方sdk定位获取code
|
||
*/
|
||
autoGetLocation() {
|
||
let _this = this
|
||
uni.getLocation({
|
||
type: 'wgs84',
|
||
geocode: true,
|
||
success: function (res) {
|
||
console.log('当前位置信息：', res)
|
||
_this.location = {
|
||
name: res.address.city,
|
||
code: '',
|
||
}
|
||
},
|
||
fail: function (err) {
|
||
console.log('当前位置信息：', err)
|
||
},
|
||
})
|
||
},
|
||
handleBack() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
})
|
||
},
|
||
handleSearch() {
|
||
if (!this.keywords.trim()) {
|
||
this.list = []
|
||
this.keywords = ''
|
||
this.isSeach = false
|
||
return
|
||
}
|
||
let list = []
|
||
this.lists.forEach((val) => {
|
||
val.items.forEach((item) => {
|
||
// console.log(item)
|
||
if (item.name.includes(this.keywords)) {
|
||
list.push(item)
|
||
}
|
||
})
|
||
})
|
||
this.list = list
|
||
this.isSeach = true
|
||
console.log(list)
|
||
},
|
||
handleClear() {
|
||
this.keywords = ''
|
||
this.list = []
|
||
this.isSeach = false
|
||
},
|
||
setList() {
|
||
let index = 0
|
||
this.lists = []
|
||
citys.list.forEach((value, index) => {
|
||
if (value.data.length === 0) {
|
||
return
|
||
}
|
||
let indexBefore = index
|
||
let items = value.data.map((item) => {
|
||
// console.log(items)
|
||
let obj = {}
|
||
obj['key'] = value.letter
|
||
obj['name'] = item.label
|
||
obj['itemIndex'] = index
|
||
obj['code'] = item.code
|
||
index++
|
||
obj.checked = item.checked ? item.checked : false
|
||
return obj
|
||
})
|
||
this.lists.push({
|
||
title: value.letter,
|
||
key: value.letter,
|
||
items: items,
|
||
itemIndex: indexBefore,
|
||
})
|
||
})
|
||
// #ifndef APP-NVUE
|
||
uni
|
||
.createSelectorQuery()
|
||
.in(this)
|
||
.select('#list')
|
||
.boundingClientRect()
|
||
.exec((ret) => {
|
||
this.winOffsetY = ret[0].top
|
||
this.winHeight = ret[0].height
|
||
this.itemHeight = this.winHeight / this.lists.length
|
||
})
|
||
// #endif
|
||
// #ifdef APP-NVUE
|
||
dom.getComponentRect(this.$refs['list'], (res) => {
|
||
this.winOffsetY = res.size.top
|
||
this.winHeight = res.size.height
|
||
this.itemHeight = this.winHeight / this.lists.length
|
||
})
|
||
// #endif
|
||
},
|
||
touchStart(e) {
|
||
this.touchmove = true
|
||
let pageY = this.isPC ? e.pageY : e.touches[0].pageY
|
||
let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
|
||
let item = this.lists[index]
|
||
if (item) {
|
||
this.scrollViewId = 'uni-indexed-list-' + index
|
||
this.touchmoveIndex = index
|
||
// #ifdef APP-NVUE
|
||
dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
|
||
animated: false,
|
||
})
|
||
// #endif
|
||
}
|
||
},
|
||
touchMove(e) {
|
||
// #ifndef APP-PLUS
|
||
let pageY = this.isPC ? e.pageY : e.touches[0].pageY
|
||
let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
|
||
if (this.touchmoveIndex === index) {
|
||
return false
|
||
}
|
||
let item = this.lists[index]
|
||
if (item) {
|
||
this.scrollViewId = 'uni-indexed-list-' + index
|
||
this.touchmoveIndex = index
|
||
}
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
throttleTouchMove.call(this, e)
|
||
// #endif
|
||
},
|
||
touchEnd() {
|
||
this.touchmove = false
|
||
this.touchmoveIndex = -1
|
||
},
|
||
|
||
/**
|
||
* 兼容 PC @tian
|
||
*/
|
||
|
||
mousedown(e) {
|
||
if (!this.isPC) return
|
||
this.touchStart(e)
|
||
},
|
||
mousemove(e) {
|
||
if (!this.isPC) return
|
||
this.touchMove(e)
|
||
},
|
||
mouseleave(e) {
|
||
if (!this.isPC) return
|
||
this.touchEnd(e)
|
||
},
|
||
|
||
// #ifdef H5
|
||
IsPC() {
|
||
var userAgentInfo = navigator.userAgent
|
||
var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
|
||
var flag = true
|
||
for (let v = 0; v < Agents.length - 1; v++) {
|
||
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
||
flag = false
|
||
break
|
||
}
|
||
}
|
||
return flag
|
||
},
|
||
// #endif
|
||
|
||
onClick(e) {
|
||
let { idx, index } = e
|
||
let obj = {}
|
||
for (let key in this.lists[idx].items[index]) {
|
||
obj[key] = this.lists[idx].items[index][key]
|
||
}
|
||
|
||
if (this.storage.length >= 2) {
|
||
this.storage.pop()
|
||
this.storage.unshift(obj)
|
||
} else {
|
||
this.storage.unshift(obj)
|
||
}
|
||
uni.setStorageSync('storage', JSON.stringify(this.storage))
|
||
this.$emit('click', {
|
||
item: obj,
|
||
// select: select
|
||
})
|
||
},
|
||
searchClick(item) {
|
||
this.$emit('click', {
|
||
item: item,
|
||
// select: select
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
height: 100vh;
|
||
}
|
||
.choose-position-wrap {
|
||
.choose-position-tips {
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
}
|
||
.choose-position {
|
||
.choose-position-item {
|
||
width: 180rpx;
|
||
height: 64rpx;
|
||
line-height: 62rpx;
|
||
padding: 0 8rpx;
|
||
border-radius: 8rpx;
|
||
border: 1rpx solid #999;
|
||
box-sizing: border-box;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
.uni-indexed-list {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
}
|
||
|
||
.uni-indexed-list__scroll {
|
||
flex: 1;
|
||
}
|
||
|
||
.uni-indexed-list__menu {
|
||
// position: absolute;
|
||
// top: 50%;
|
||
// right: 0;
|
||
// transform: translateY(-50%);
|
||
width: 24px;
|
||
background-color: lightgrey;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
}
|
||
|
||
.uni-indexed-list__menu-item {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex: 1;
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* #ifdef H5 */
|
||
cursor: pointer;
|
||
/* #endif */
|
||
}
|
||
|
||
.uni-indexed-list__menu-text {
|
||
line-height: 20px;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
color: #aaa;
|
||
}
|
||
|
||
.uni-indexed-list__menu--active {
|
||
background-color: rgb(200, 200, 200);
|
||
}
|
||
|
||
.uni-indexed-list__menu-text--active {
|
||
color: #007aff;
|
||
}
|
||
|
||
.uni-indexed-list__alert-wrapper {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.uni-indexed-list__alert {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 80px;
|
||
text-align: center;
|
||
line-height: 80px;
|
||
font-size: 35px;
|
||
color: #fff;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
// 搜索 start
|
||
.fu-tabbar {
|
||
position: sticky;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 99999;
|
||
background: #ffffff;
|
||
overflow: hidden;
|
||
.fu-tabbar-con {
|
||
position: relative;
|
||
.search-wrap {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
// #ifndef MP-WEIXIN
|
||
width: calc(100% - 100rpx);
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
width: calc(100% - 242rpx);
|
||
// #endif
|
||
}
|
||
}
|
||
}
|
||
// 搜索 end
|
||
.uni-indexed-list__list {
|
||
background-color: $uni-bg-color;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
border-top-style: solid;
|
||
border-top-width: 1px;
|
||
border-top-color: $uni-border-color;
|
||
}
|
||
|
||
.uni-indexed-list__item {
|
||
font-size: $uni-font-size-lg;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex: 1;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.uni-indexed-list__item-container {
|
||
padding-left: $uni-spacing-row-lg;
|
||
flex: 1;
|
||
position: relative;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
/* #ifdef H5 */
|
||
cursor: pointer;
|
||
/* #endif */
|
||
}
|
||
|
||
.uni-indexed-list__item-border {
|
||
flex: 1;
|
||
position: relative;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 50px;
|
||
padding: $uni-spacing-row-lg;
|
||
padding-left: 0;
|
||
border-bottom-style: solid;
|
||
border-bottom-width: 1px;
|
||
border-bottom-color: $uni-border-color;
|
||
}
|
||
|
||
.uni-indexed-list__item-border--last {
|
||
border-bottom-width: 0px;
|
||
}
|
||
|
||
.uni-indexed-list__item-content {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.uni-indexed-list {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
}
|
||
|
||
.uni-indexed-list__title-wrapper {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
width: 100%;
|
||
/* #endif */
|
||
background-color: #f7f7f7;
|
||
}
|
||
|
||
.uni-indexed-list__title {
|
||
padding: 6px 12px;
|
||
line-height: 24px;
|
||
font-size: $uni-font-size-sm;
|
||
}
|
||
</style>
|