xdd-uniapp-new/pkg-video/views/city.vue

<template>
  <view style="min-height:100vh;background: #FFFFFF" v-if="ready">
    <view style="padding: 20rpx 32rpx">
      <u-input v-model="keyword" :customStyle="{'border':'none','background': '#F6F6F6'}"
               placeholder="输入城市名、拼音或字母查询" shape="circle" @confirm="onSearch" @change="onChange">
        <template v-slot:suffix>
          <u-icon name="search" color="#FD5749" size="32rpx" @click="onSearch"/>
        </template>
      </u-input>
    </view>

    <view style="margin: 32rpx" v-if="searchList.length">
      <view class="flex flex-wrap">
        <view class="n-tag jc-center ai-center" v-for="(item,index) in searchList" :key="index"
              @click="navToWatch(item['name'])">{{ item['name'] }}
        </view>
      </view>
    </view>

    <template v-else>
      <view style="margin: 32rpx" v-if="cityName">
        <view style="margin-bottom: 16rpx">当前定位</view>
        <view class="n-tag jc-center ai-center" @click="navToWatch(cityName)">
          <u-icon name="map" color="#333333" size="36rpx"/>
          {{ cityName }}
        </view>
      </view>

      <view style="margin: 32rpx" v-if="watchCity.length">
        <view style="margin-bottom: 16rpx">历史访问</view>
        <view class="flex flex-wrap">
          <view class="n-tag jc-center ai-center" v-for="(item,index) in watchCity" :key="index"
                @click="navToWatch(item)">{{ item }}
          </view>
        </view>
      </view>

      <u-index-list :index-list="indexList" inactiveColor="#666666" activeColor="#FD5749">
        <template v-for="(item, index) in itemArr">
          <u-index-item>
            <u-index-anchor :text="indexList[index].toUpperCase()" color="#333333" size="32rpx" bgColor="#FFFFFF"/>
            <view class="list-cell" v-for="(cell, cIndex) in item" :key="cIndex" @click="navToWatch(cell['name'])">
              {{ cell['name'] }}
            </view>
          </u-index-item>
        </template>
      </u-index-list>
    </template>
  </view>
</template>

<script>
import {getCurAddress, getLocation} from "@/utils/common";
import {getVideoCity} from "@/api/video";

export default {
  data() {
    return {
      watchCity: [],
      ready: false,
      cityName: '',
      keyword: '',
      raw: null,
      searchList: [],
      indexList: ["A", "B", "C"],
      itemArr: [
        ['列表A1', '列表A2', '列表A3'],
        ['列表B1', '列表B2', '列表B3'],
        ['列表C1', '列表C2', '列表C3']
      ]
    }
  },
  mounted() {
    this.watchCity = uni.getStorageSync('watchCity') || []
    this.getMapData()
    this.fetchList()
  },
  methods: {
    async getMapData() {
      uni.showLoading({
        title: '定位中...'
      })
      const map = await getLocation()
      if (map.length > 1) {
        const {latitude, longitude} = map[1]
        getCurAddress(latitude, longitude, address => {
          this.cityName = address.city
        })
      }
    },

    async fetchList() {
      const res = await getVideoCity()
      if (res.success) {
        this.raw = res.data
        const groupedByName = res.data.reduce((accumulator, current) => {
          const groupKey = current['firstLetter'].toUpperCase()
          if (!accumulator[groupKey]) {
            accumulator[groupKey] = []
          }
          accumulator[groupKey].push(current)
          return accumulator
        }, {})

        this.indexList = Object.keys(groupedByName)
        this.itemArr = Object.values(groupedByName)
      }
      this.ready = true
    },

    onSearch ()  {
      const name = this.keyword.trim()
      if (name.length > 0) {
        this.navToWatch(name)
      }
    },

    navToWatch (name)  {
      this.handleHistory(name)
      uni.redirectTo({url: '/pkg-video/views/watch?name=' + name})
    },

    handleHistory (name) {
      for (let i = 0; i < this.watchCity.length; i++) {
        if (name === this.watchCity[i]) return
      }
      if (this.watchCity.length === 4) {
        watchCity.value.pop()
      }
      this.watchCity.unshift(name)
      uni.setStorageSync('watchCity', this.watchCity)
    },

    onChange (value)  {
      this.searchList = []
      if (value.trim().length === 0) return
      this.searchList = this.raw.filter(city => {
        if (city['name'].indexOf(value) > -1) return city
      })
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .u-index-item {
  .u-border-bottom {
    border: none !important;
  }
}

.list-cell {
  margin: 0 30rpx;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #DCDCDC;
  color: #333333;
  font-size: 32rpx;
}

.n-tag {
  display: inline-flex;
  height: 60rpx;
  box-sizing: border-box;
  margin: 0 32rpx 16rpx 0;
  padding: 0 20rpx;
  border: 2px solid #B5B5B5;
  border-radius: 8rpx;
  color: #333333;
  font-size: 32rpx;
}
</style>