dvcp_v2_wxcp_app/src/project/baidu/AppTourismStrategy/AppTourismStrategy.vue

<template>
  <div class="AppTourismStrategy">
    <div class="header-bg"></div>
    <div class="tourism-content">
      <div class="tab">
        <div :class="tabIndex == index ? 'item active' : 'item'" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">{{ item }}</div>
        <span :class="`slider`+tabIndex"></span>
      </div>
      <div class="list-content1" v-if="tabIndex == 0 || cityType == 1">
        <div class="item" v-for="(item, index)  in list" :key="index" @click="toDetail(item.id, item.input03)">
          <img :src="item.imgList[item.imgIndex]" alt="">
          <p>{{ item.input03 }}</p>
        </div>
        <div class="back-btn" v-if="cityType == 1" @click="backCity()">返回城市列表</div>
      </div>
      <div class="list-content2" v-if="tabIndex == 1 && cityType == 0">
        <div class="item" v-for="(item, index)  in list" :key="index" @click="getCity(item.input00)">
          <img :src="item.imgList[item.imgIndex]" alt="">
          <span>{{ item.input01 }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";
export default {
  name: 'AppTourismStrategy',
  appName: '旅游攻略',
  data() {
    return {
      tabList: [ '周边旅游', '国内旅游'], 
      tabIndex: 0,
      list: [],
      areaId: '411702000000',
      cityType: 0, //0国内 1国内周边
      cityAreaId: '', //国内周边城市ID
    }
  },
  computed: {
    ...mapState(['user']),
  },
  onLoad(option) { //type 0周边、1：国内
    this.areaId = option.areaId
    this.tabIndex = option.type || 0

    // uni.$on('tourismBack', (res) => {
    //   this.cityAreaId = res.cityAreaId
    //   this.getList()
    // })

    this.getList()
  },
  onShow() {
    document.title = '旅游攻略'
  },
  methods: {
    tabClick(index) {
      this.tabIndex = index;
      this.cityType = 0
      this.getList()
    },
    toDetail(id, title) {
      uni.navigateTo({url: `./Detail?id=${id}&cityAreaId=${this.cityAreaId}&title=${title}`})
    },
    backCity() {
      this.cityType = 0
      this.cityAreaId = ''
      this.getList()
    },
    getCity(areaId) {
      this.cityAreaId = areaId
      this.cityType = 1
      this.getList()
    },
    getList() {
      this.$http.post("/app/appapplicationinfo/list?appId=875e5087954e429d9ed14820e808aaa4&current=1&size=200", 
      {
        "input00": this.tabIndex == 0 ? this.areaId : this.cityAreaId,
        "radio06": this.tabIndex
      }, 
      {withoutToken: true}).then(res => {
        res.data.records.map((item) => {
          item.imgList = item.textarea05.split('|')
          item.imgIndex = Math.floor(Math.random() * 4)
        })
        if(this.tabIndex == 1 && this.cityType == 0) {
          const areas = {}
          res.data.records.map(e=>{
            if(!areas[e.input00]){
              const {input00,input01,imgList,imgIndex} = e
              areas[e.input00] = {input00,input01,imgList,imgIndex}
            }
          })
          this.list = Object.values(areas)
        }else {
          this.list = res.data.records
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.AppTourismStrategy {
  height: 100vh;
  background-color:#EAEEF6;
  position: relative;
  .header-bg {
    width: 100%;
    height: 600px;
    background-image: linear-gradient(180deg, #2067f3cc 1%, #2067f300 98%);
  }
  .tourism-content {
    width: calc(100% - 64px);
    min-height: calc(100% - 64px);
    background: #FFF;
    border-radius: 16px;
    position: absolute;
    top: 32px;
    left: 32px;
    padding: 32px 0;
    box-sizing: border-box;
    .tab {
      padding: 0 144px 54px 144px;
      display: flex;
      position: relative;
      .item {
        flex: 1;
        text-align: center;
        width: 128px;
        line-height: 48px;
        font-family: PingFangSC-Regular;
        font-size: 32px;
        color: #666;
      }
      .active {
        font-family: PingFangSC-SNaNpxibold;
        font-weight: 600;
        color: #000;
      }
      span {
        position: absolute;
        top: 64px;
        width: 48px;
        height: 6px;
        background: #2066F3;
        border-radius: 3px;
        transition: left 0.3s ease;
      }
      .slider0 {
        left: 218px; 
      }
      .slider1 {
        left: 418px;
      }
    }
    .list-content1 {
      padding-left: 32px;
      .item {
        display: inline-block;
        margin: 0 32px 32px 0;
        width: calc(50% - 32px);
        vertical-align: text-top;
        img {
          width: 294px;
          height: 220px;
        }
        p {
          line-height: 40px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 28px;
          color: #222;
          text-align: center;
          margin-top: 16px;
          width: 100%;
          word-break: break-all;
        }
      }
      .item:nth-of-type(2n) {
        margin-right: 0;
      }
      .back-btn {
        width: calc(100% - 32px);
        height: 88px;
        background: #2067F4;
        border-radius: 44px;
        line-height: 88px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 34px;
        color: #FFF;
        text-align: center;
        margin-top: 126px;
      }
    }
    .list-content2 {
      padding-left: 32px;
      .item {
        display: inline-block;
        position: relative;
        margin: 0 32px 32px 0;
        img {
          width: 186px;
          height: 186px;
          border-radius: 8px;
        }
        span {
          line-height: 40px;
          font-family: PingFangSC-SNaNpxibold;
          font-weight: 600;
          font-size: 28px;
          color: #FFF;
          position: absolute;
          top: 16px;
          left: 24px;
        }
      }
      .item:nth-of-type(3n) {
        margin-right: 0;
      }
    }
  }
}
</style>