123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378 |
- <template>
- <div class="container store-page">
- <!-- <div class="store-toolbar">
- <div class="toolbar">
- <div class="item item1" >
- <van-search
- value="{{ value }}"
- placeholder="请输入搜索关键词"
- show-action
- shape="round"
- background="#efefef"
- focus
- @change="onChange"
- @cancel="onCancel"
- />
- </div>
- </div>
- </div> -->
- <div class="content">
- <div class="all-city">
- <scroll-view class="city-scroll" scroll-y="true" scroll-with-animation="true" :scroll-into-view="toView">
- <div class="city-list">
- <div id="gps" class="city-con">
- <span @click='selectcity(currentCity)' class="city-box">
- <van-icon style="font-size: 14px; color: red;vertical-align: middle;" name="location-o" />
- <span >{{currentCity.name}}</span>
- </span>
- </div>
- <div class="city-con" id="hot">
- <div class="nav-text">
- <span>热门城市</span>
- </div>
- <div class="hot-list">
- <span @click='selectcity(item)' class="city-box" v-for="(item,index) in hotList" :key="index" >{{item.name}}</span>
- </div>
- </div>
- <!-- 循环城市列表 start -->
- <div v-for="(item,index) in cityList" :key="index" :id="'city' + item.title" :data-title="item.title">
- <div class="nav-text">
- <span>{{item.title}}</span>
- </div>
- <div class="show-city">
- <span @click='selectcity(item)' v-for="(item,indexx) in item.lists" :key="indexx" >{{item.name}}</span>
- </div>
- </div>
- <!-- 循环城市列表 end -->
- </div>
- </scroll-view>
- </div>
- <!-- 字母索引 start -->
- <div class="search-nav" >
- <span @click="cityScroll(item)" :data-index="index" v-for="(item,index) in searchNav" :key="index" >{{item}}</span>
- </div>
- <!-- 字母索引 end -->
- </div>
- <view v-if="showCon" class="modal-mask" @click="showCon=false">
- <view class="modal-dialog">
- <view class="modal-title">温馨提示</view>
- <view class="modal-content">
- 获取定位失败,请前往设置打开定位权限
- </view>
- <view class="modal-footer">
- <view class="btn-cancel" @click="showCon=false">取消</view>
- <button open-type="openSetting" class="btn-confirm button-on-view" style="padding:0rpx;" @click="showCon=false">设置</button>
- </view>
- </view>
- </view>
- </div>
- </template>
- <script>
- import { listStore, getLookUpData } from '@/api/api';
- import NoData from '@/components/NoData';
- import storage from '@/utils/storage.js';
- import { getListArea } from '@/api/store.js';
- import { province, city, area } from '@/api/address.js'
- import pinyin from 'pinyin'
- export default {
- name: 'storeSearch',
- components: { 'no-data': NoData },
- data() {
- return {
- showCon: false,
- searchVal: '',
- // 当前定位城市code name
- currentCity: {
- code:'',
- name:''
- },
- isfocus: true,
- toView:'',//用来做定位联动
- searchNav: ["定","热"],
- hotList: [
- {name:"西安市",code:"6101"},
- {name:"咸阳市",code:"6104"},
- {name:"渭南市",code:"6105"},
- {name:"商洛市",code:"6110"},
- {name:"铜川市",code:"6102"},
- {name:"兰州市",code:"6201"}
- ],
- cityList: [],
- currentPosition: {
- lat: '',
- lng: ''
- },
- };
- },
- computed: {
- },
- methods: {
- onChange (e) {
- this.searchVal = e.mp.detail
- console.log(e, "e.detail")
- console.log(this.searchVal, "this.searchVal")
- },
- onCancel () {
- wx.navigateBack({
- delta: 1
- })
- },
- // 获取已开通城市
- getAllCity () {
- getListArea({}).then(res => {
- console.log(res)
- if(res.status == 200){
- this.getCityList(res.data)
- }
- })
- },
- // 格式化城市列表
- getCityList (data){
- this.cityList = []
- this.searchNav = ["定","热"]
- let zmIndex = []
- for(let i=0;i<data.length;i++){
- let item = data[i]
- if(String(item.addrDistrict).length == 4){
- // 如果是直辖市
- if(item.addrDistrictName == '市辖区'){
- //console.log(province)
- //console.log(item.addrDistrict)
- let b = province.find(k=>{
- return k.children[0].value == item.addrDistrict
- })
- console.log(b)
- item.addrDistrictName = b.name
- }
- let py = pinyin(item.addrDistrictName)
- let pyIndex = py[0][0].substr(0,1).toUpperCase()
- const hasPy = zmIndex.find(item => {return item == pyIndex})
- const hasCity = this.cityList.find(item => {return item.title == pyIndex})
- if(!hasPy){
- zmIndex.push(pyIndex)
- }
- // 已存在
- if(hasCity){
- hasCity.lists.push({ name: item.addrDistrictName , code: item.addrDistrict})
- }else{
- this.cityList.push({
- "title": pyIndex,
- "lists":[{ name: item.addrDistrictName , code: item.addrDistrict}]
- })
- }
- }
- }
- // 缓存数据
- //storage.put('cityListData', this.cityList , 5)
- // 按字母排序
- this.cityList = this.cityList.sort(function(a,b){
- return a.title.charCodeAt(0) - b.title.charCodeAt(0)
- })
- this.searchNav = this.searchNav.concat(zmIndex.sort())
- //console.log(this.cityList,'cityList')
- //console.log(this.searchNav,'searchNav')
- },
- // 选择城市
- selectcity(data){
- wx.reLaunch({
- url: `/pages/store/main?code=${data.code}&name=${data.name}`
- })
- },
- // 点击英文字母进行跳转到相应位置
- cityScroll(index){
- console.log(index, 'eeeee')
- if (index == "定") {
- this.toView = "gps"
- } else if (index == "热"){
- this.toView = "hot"
- }
- this.toView = `city${index}`
- console.log(this.toView, 'this.toView')
- },
- },
- onShow() {
- this.searchVal = '';
- this.isfocus = true
- },
- onLoad(options) {
- console.log(options)
- this.currentCity.code = options.code != 'undefined' ? options.code : null
- this.currentCity.name = options.name != 'undefined' ? options.name : '未开启'
- this.getAllCity()
- }
- };
- </script>
- <style lang="stylus">
- .modal-mask {
- width: 100%;
- height: 100%;
- position: fixed;
- top: 0;
- left: 0;
- background-color: rgba(0, 0, 0, 0.5);
- overflow: hidden;
- z-index: 9999;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .modal-dialog {
- width: 540rpx;
- overflow: hidden;
- z-index: 9999;
- background: #f9f9f9;
- border-radius: 5rpx;
- }
- .modal-title {
- padding-top: 30rpx;
- font-size: 32rpx;
- color: #030303;
- text-align: center;
- }
- .modal-content {
- padding: 20rpx 32rpx;
- font-size: 28rpx;
- }
- .modal-footer {
- display: flex;
- flex-direction: row;
- height: 86rpx;
- border-top: 1px solid #dedede;
- font-size: 34rpx;
- line-height: 86rpx;
- }
- .btn-cancel {
- width: 50%;
- color: #abb4bd;
- text-align: center;
- border-right: 1px solid #dedede;
- }
- .btn-confirm {
- width: 50%;
- color: #6fb64b;
- text-align: center;
- font-weight: 500;
- }
- ._v-card .v-card{
- border-bottom: 1px solid #eee;
- height:auto;
- }
- .vcard .van-card__img{
- border-radius:5px;
- }
- .container {
- height: 100%;
- overflow: hidden;
- box-sizing: border-box;
- padding-top: 30rpx;
- }
- .store-content {
- height: 100%;
- box-sizing: border-box;
- }
- .store-toolbar {
- position: fixed;
- top: 0;
- width: 100%;
- box-sizing: border-box;
- border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
- background-color: #fff;
- z-index: 9;
- .toolbar {
- display: flex;
- justify-content: space-around;
- height: 70rpx;
- .item {
- width: 100%;
- border-bottom : 1px solid #d9d9d9;
- }
- .item1 {
- text-align: right;
- }
- }
- }
- .city-con{
- width :100%;
- padding: 5px 0px;
- }
- .city-box{
- width: 80px;
- border :1px solid #dfdfdf;
- border-radius :5px;
- height: 30px;
- display: inline-block;
- text-align: center;
- line-height: 30px;
- margin-bottom: 10px;
- font-size: 14px;
- margin-left :15px;
- }
- .content{
- // margin-top: 90rpx;
- width: 100%;
- }
- .nav-text{
- background-color :#efefef;
- width :100%;
- font-size :16px;
- padding :10px 0px;
- }
- .nav-text span {
- margin-left :15px;
- }
- .hot-list {
- width :100%;
- padding-top: 10px;
- }
- .city-scroll {
- // left: 15px;
- // position: fixed;
- height: 100%;
- width: 100%;
- }
- .search-nav{
- position: fixed;
- top: 140rpx;
- bottom: 160rpx;
- right: 5rpx;
- z-index :99;
- display:flex;
- flex-direction: column;
- }
- .search-nav span{
- padding : 10px;
- text-align: center;
- font-size: 24rpx;
- }
- .show-city{
- display: flex;
- flex-direction: column;
- justify-content: left;
- }
- .show-city span{
- padding :10px 15px
- font-size: 28rpx;
- }
- </style>
|