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 class="cover-box">
            <image 
              v-if="item.coverType === 1"
              class="town-cover" 
              :src="item.cover" 
              mode="aspectFit|aspectFill|widthFix"></image>
              <video 
                v-if="item.coverType === 2"
                play-btn-position="center" 
                :show-fullscreen-btn="false" 
                class="town-cover" 
                :src="item.cover" 
                :show-play-btn="false"
                :show-center-play-btn="false"
                controls 
                :poster="item.cover + '?vframe/jpg/offset/1'"></video>
            <view class="name-box">
              <image
                :src="webUrl + '/home/icon-location.png'"
                class="icon"
              />
              
              <view class="one-t">
                {{ item.cityName }}
              </view>
            </view>
          </view>
          <view class="v12-pa-2 card-bottom">
            <view class="v12-dark-text v12-font-bold v12-font-30 more-t v12-pb-1 v12-mb-2">{{ item.content }}</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>
.icon {
  display: block;
  width: 28rpx;
  height: 28rpx;
  margin: 0 10rpx 0 0;
}
.name-box{
  color: #fff;
  position: absolute;
  left: 20rpx;
  bottom: 20rpx;
  font-size: 28rpx;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  height: 60rpx;
  padding: 0 16rpx 16rpx 16rpx;
  border-radius: 0rpx 0rpx 16rpx 16rpx;
  box-sizing: border-box;
  font-size: 24rpx;
  line-height: 28rpx;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 100%);
  .icon {
    display: block;
    width: 28rpx;
    height: 28rpx;
    margin: 0 10rpx 0 0;
  }
  .one-t{
    width: 240rpx !important;
  }
}
.cover-box{
  position: relative;
  height: 316rpx;
}
.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>