shop-app/src/pages/select-country/index.vue

<route lang="json">
{
  "style": {
    "navigationStyle": "custom",
    "navigationBarTitleText": "%home.select%"
  }
}
</route>
<template>
  <view class="select-country-main-wrap">
    <view class="top-header">
      <view class="left-nav"></view>
      {{ t('home.select') }}
    </view>
    <view class="content" @click.stop="showArea = true">
      <view class="content-title">{{ t('home.area') }}</view>
      <view class="area">Serbia</view>
      <wd-img
        class="right-nav"
        width="48rpx"
        height="48rpx"
        src="/static/images/home/right.svg"
      ></wd-img>
    </view>
    <view class="map"></view>
    <view class="bottom-footer">{{ t('commonPopup.confirm') }}</view>
    <CommonIndexBar
      :areaData="areaData"
      @handleClick="handleClick"
      v-model="showArea"
      @close="showArea = false"
    />
  </view>
</template>

<script setup lang="ts">
  import { t } from '@/locale'
  const showArea = ref(false) // 是否显示地区
  const areaData = ref([
    {
      index: 'A',
      data: ['阿坝', '阿拉善', '阿里', '安康', '安庆', '鞍山', '安顺', '安阳', '澳门'],
    },
    {
      index: 'B',
      data: [
        '北京',
        '白银',
        '保定',
        '宝鸡',
        '保山',
        '包头',
        '巴中',
        '北海',
        '蚌埠',
        '本溪',
        '毕节',
        '滨州',
        '百色',
        '亳州',
      ],
    },
    {
      index: 'C',
      data: [
        '重庆',
        '成都',
        '长沙',
        '长春',
        '沧州',
        '常德',
        '昌都',
        '长治',
        '常州',
        '巢湖',
        '潮州',
        '承德',
        '郴州',
        '赤峰',
        '池州',
        '崇左',
        '楚雄',
        '滁州',
        '朝阳',
      ],
    },
    {
      index: 'D',
      data: [
        '大连',
        '东莞',
        '大理',
        '丹东',
        '大庆',
        '大同',
        '大兴安岭',
        '德宏',
        '德阳',
        '德州',
        '定西',
        '迪庆',
        '东营',
      ],
    },
    {
      index: 'E',
      data: ['鄂尔多斯', '恩施', '鄂州'],
    },
    {
      index: 'F',
      data: ['福州', '防城港', '佛山', '抚顺', '抚州', '阜新', '阜阳'],
    },
    {
      index: 'G',
      data: ['广州', '桂林', '贵阳', '甘南', '赣州', '甘孜', '广安', '广元', '贵港', '果洛'],
    },
    {
      index: 'H',
      data: [
        '杭州',
        '哈尔滨',
        '合肥',
        '海口',
        '呼和浩特',
        '海北',
        '海东',
        '海南',
        '海西',
        '邯郸',
        '汉中',
        '鹤壁',
        '河池',
        '鹤岗',
        '黑河',
        '衡水',
        '衡阳',
        '河源',
        '贺州',
        '红河',
        '淮安',
        '淮北',
        '怀化',
        '淮南',
        '黄冈',
        '黄南',
        '黄山',
        '黄石',
        '惠州',
        '葫芦岛',
        '呼伦贝尔',
        '湖州',
        '菏泽',
      ],
    },
  ])
  const handleClick = ({ index, city }) => {
    console.log(index, city)
  }
</script>

<style lang="scss" scoped>
  .select-country-main-wrap {
    box-sizing: border-box;
    padding: 0 32rpx;
    .top-header {
      position: relative;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 88rpx;
      padding: 6rpx 0;
      font-family: 'PingFang SC';
      font-size: 36rpx;
      font-style: normal;
      font-weight: 600;
      line-height: 52rpx; /* 144.444% */
      color: var(--333, $shop-text-3);
      text-align: center;
      text-transform: capitalize;
      .left-nav {
        position: absolute;
        top: 50%;
        left: 0;
        width: 60rpx;
        height: 60rpx;
        background-image: url(@/static/images/home/left.svg);
        background-size: cover;
        transform: translateY(-50%);
      }
    }
    .content {
      position: relative;
      box-sizing: border-box;
      flex: 1 0 0;
      width: 100%;
      height: 148rpx;
      padding: 24rpx 0 24rpx 0rpx;
      margin: 24rpx 0;
      font-family: 'PingFang SC';
      font-size: 32rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 48rpx; /* 150% */
      color: var(--333, $shop-text-3);
      border-bottom: 1rpx solid var(--Gray-Gray3, #e7e7e7);
      .area {
        font-family: 'PingFang SC';
        font-size: 28rpx;
        line-height: 44rpx; /* 157.143% */
        color: var(--666, $shop-text-6);
      }
      .right-nav {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
      }
    }
    .map {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      align-items: flex-start;
      width: 100%;
      height: 457.334rpx;
      background-image: url(@/static/images/home/test-map.svg);
      background-size: cover;
    }
    .bottom-footer {
      position: fixed;
      bottom: 0;
      box-sizing: border-box;
      display: flex;
      flex: 1 0 0;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 84rpx;
      padding: 10rpx 66rpx;
      margin-top: 500rpx;
      font-family: 'PingFang SC';
      font-size: 32rpx;
      font-style: normal;
      font-weight: 600;
      line-height: 48rpx; /* 150% */
      color: $shop-white;
      text-align: center;
      text-transform: capitalize;
      background: var(
        --ff-4-c-1-bfc-7-b-1-c,
        linear-gradient(270deg, $shop-primary 0%, $shop-help 100%)
      );
      border-radius: 160rpx;
    }
  }
</style>