xdd-uniapp-new/pages/town/components/projects.vue

<template>
  <view class="projects">
    <view class="tabs-wrap">
      <view 
        @click="handleTab(item.value)" 
        class="tab-item" 
        :class="{
          'tab-isActived': actived === item.value
        }" 
        v-for="(item, index) in tabs" 
        :key="index">
        <view 
          :class="{
            'tab-isActived': actived === item.value,
            'no-actived-1': actived === 2 && item.value === 1,
            'no-actived-2': actived === 1 && item.value === 2,
            'no-actived-3': actived === 3 && item.value === 2,
            'no-actived-4': actived === 2 && item.value === 3,
          }"
        >
          {{ item.name }}
      </view>
      </view>
    </view>
    <view 
      v-if="tabs.length > 0"
      class="content v12-justify-center"
      :class="{
        'first-one': actived === 1,
        'last-one': actived === 3
       }"
    >
      <view v-if="items.length > 0" class="v12-d-grid-columns-2 v12-gap-10">
        <view v-for="(item, index) in items" :key="index" class="store-card" @click="toStore(item.hotelId)">
          <view>
            <image class="town-cover" :src="item.cover" mode="aspectFit|aspectFill|widthFix"></image>
          </view>
          <view class="v12-pa-2 card-bottom">
            <view class="v12-dark-text v12-font-bold v12-font-30 v12-py-1 more-t">{{ item.hotelName }}</view>
            <view class="v12-align-center">
              <view class="avtor">
                <image class="avtor" :src="item.logo" mode="scaleToFill"></image>
              </view>
              <view class="v12-secondary-dark-text v12-font-28 v12-ml-3 one-t">{{ item.hotelName }}</view>
            </view>
          </view>
        </view>
      </view>
      <image
        v-if="items.length === 0"
        :src="webUrl + '/orderIcon/wu.png'"
        class="img-nodata"
        style="left: 25%;"
        mode="scaleToFill"
      />
    </view>
    <image
      v-if="tabs.length === 0"
      :src="webUrl + '/orderIcon/wu.png'"
      class="img-nodata"
      mode="scaleToFill"
    />
  </view>
</template>

<script>
export default {
  props: {
    info: {
      default:() => {}
    }
  },
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      actived: 1,
      items: [],
      itemsMap: {
        1: 'project1Hotels',
        2: 'project2Hotels',
        3: 'project3Hotels'
      }
    }
  },
  watch: {
    info(value) {
      this.items = value && value[this.itemsMap[this.actived]]
    },
    actived: {
      handler(value) {
        this.items = this.info && this.info[this.itemsMap[value]]
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    tabs() {
      return this.info && [
        {name: this.info.project1Name, value: 1},
        {name: this.info.project2Name, value: 2},
        {name: this.info.project3Name, value: 3},
      ] || []
    }
  },
  methods: {
    handleTab(value) {
      this.actived = value
    },
    toStore(id) {
      if (!id) {
        return
      }
      uni.navigateTo({
        url: '/pagesInn/inn/innHome?id=' + id 
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.img-nodata {
  position: relative;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 352rpx;
  height: 338rpx;
  margin-bottom: 60rpx;
}
.card-bottom{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 356rpx);
}
.avtor{
  width: 52rpx;
  height: 52rpx;
  background: #eee;
  border-radius: 50%;
}
.town-cover{
  height: 316rpx;
  width: 316rpx;
  border-radius: 30rpx;
  background: rgba(77,39,39,0.1);
}
.store-card{
  width: 316rpx;
  border-radius: 30rpx;
}
.tab-icon{
  height: 30rpx;
  width: 30rpx;
  margin-right: 10rpx;
}
.fit-box-inner{
  background: #f0f0f0;
  width: initial;
  height: inherit;
  width: 40rpx;
}
.first-one{
  border-radius: 0 24rpx 24rpx 24rpx !important;
}
.last-one{
  border-radius: 24rpx 0  24rpx 24rpx !important;
}
.fit-box{
  width: 40rpx;
  height: initial;
  background: #fff;
  display: flex;
}
.projects{
  padding: 20rpx;
}
.tabs-wrap{
  display: flex;
  justify-content: space-between;
}
.tab-item{
  text-align: center;
  flex: 1;
  font-size: 32rpx;
  font-weight: bold;
  background: #fff;
  view{
    padding: 20rpx 0;
    background: #f0f0f0;
    width: inherit;
    height: inherit;
    display: flex;
    justify-content: center;
    align-items: center
  }
}
.no-actived-1{
  border-radius: 0 0 24rpx 0 !important;
}
.no-actived-2{
  border-radius: 0 0  0 24rpx !important;
}
.no-actived-3{
  border-radius: 0 0 24rpx 0 !important;
}
.no-actived-4{
  border-radius: 0 0  0 24rpx !important;
}
.tab-isActived{
  background: #fff !important;
  border-radius: 24rpx 24rpx 0 0 !important;
  position: relative;
}
.content{
  background: #fff;
  padding: 20rpx 10rpx;
  border-radius: 24rpx;
}
</style>