xdd-uniapp-new/pages/town/index.vue

<template>
  <view class="town">
    <hx-navbar :back="true" :fixed="true" color="#fff" :statusBar="true" transparent="hidden" barPlaceholder="hidden" />
    <view class="top-img">
      <image v-if="townInfo.coverType === 1" :src="townInfo.cover" mode="scaleToFill" class="img"></image>
      <video 
        v-if="townInfo.coverType === 2"
        class="img" 
        :src="townInfo.cover"  
        autoplay
        :play-btn-position="center" 
        :show-fullscreen-btn="false"
        :show-play-btn="false"
        :show-center-play-btn="flase"
        > </video>
    </view>
    <view class="top-intro">
      <view class="intro-title v12-pa-3">
        <text class="v12-font-bold v12-font-40">{{ townInfo.name }}</text>
        <text class="aaaa" v-if="townInfo.isFourA === 1">
          4A
        </text>
      </view>
      <view class="shareBtn"><u-icon name="share-square" color="#C52733"></u-icon>分享给好友</view>
      <u-line dashed></u-line>
      <view v-if="townInfo.intro" class="v12-pa-3 intro-content">
        <u-read-more :toggle="true" showHeight="200">
          {{ townInfo.intro }}
        </u-read-more>
      </view>
    </view>
    <view class="tabs-wrap">
      <view @click="handleTab(item.value)" :class="{ 'tab-actived' : item.value === actived }" class="tab-item"  v-for="(item, index) in tabs" :key="index">{{ item.name }}</view>
    </view>
    <view  class="list-wrap">
        <view v-if="actived === 1">
          <projects :info="townInfo.projectInfo"></projects>
        </view>
        <view v-if="actived === 2">
          <culture :list="townInfo.cultureInfo.cultureImages"></culture>
        </view>
        <view v-if="actived === 3">
          <information :infoArray="activeties"></information>
        </view>
        <view v-if="actived === 4">
          <service :info="{...townInfo.serviceInfo, name:  townInfo.name}"></service>
        </view>
          
      </view>
  </view>
</template>

<script>
import { getAncientTownInfo, getAncientTownActive } from "@/api/inn.js"
import culture from './components/culture.vue'
import information from './components/information.vue'
import service from './components/service.vue'
import projects from './components/projects.vue'
export default {
  components: {
    culture,
    information,
    service,
    projects
  },
  data() {
    return {
      townInfo: {},
      activeties: [],
      id: '',
      actived: 1,
      tabs: [
        {name: '项目', value: 1},
        {name: '文化', value: 2},
        {name: '活动', value: 3},
        {name: '服务', value: 4},
      ],
    }
  },
  onLoad(opts) {
    this.id = opts.id
    this.getInfo()
    this.getActive()
  },
  methods: {
    getInfo() {
      uni.showLoading()
      getAncientTownInfo(this.id).then(res => {
        this.townInfo = res.data
      }).finally(() => {
        uni.hideLoading()
      })
    },
    getActive() {
      const params = {
        ancientTownId: this.id
      }
      getAncientTownActive(params).then(res => {
        this.activeties = res.data.records || []
      })
    },
    handleTab(value) {
      this.actived = value
    },
  }
}
</script>

<style lang="less" scoped>
.shareBtn{
  width: fit-content;
  padding: 5rpx 15rpx;
  background: #edbfc2;
  box-shadow: 0rpx 4rpx 4rpx rgba(0,0,0,0.16);
  border-radius: 24rpx 0rpx 0rpx 24rpx;
  color: #C52733;
  font-weight: bold;
  font-size: 28rpx;
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
}
.town{
  min-height: 100vh;
  background: #f0f0f0;
}
.tab-actived{
  color: #fff;
  font-weight: bold;
  background: linear-gradient(to right, #C52733 0%, rgba(211,92,101,0.91) 54%, rgba(255,255,255,0.62) 100%);
  border-radius: 38rpx 0rpx 0 38rpx;
  padding: 0 20rpx;
}
.tabs-wrap{
  display: flex;
  justify-content: space-around;
  padding: 20rpx 20rpx 0;
  color: #333;
  font-weight: bold;
  font-size: 36rpx;
}
.intro-content{
  letter-spacing: 2.5px;
  line-height: 40rpx;
  font-size: 28rpx;
  color: #666;
}
.aaaa{
  background: #F1B61A;
  color: #fff;
  border-radius: 100px;
  padding: 0 10rpx;
  font-size: 24rpx;
  margin-left: 10rpx;
}
.top-intro{
  width: 100%;
  min-height: 360rpx;
  background: #fff;
  box-shadow: 0rpx 0rpx 12rpx rgba(0,0,0,0.13);
  border-radius: 30rpx;
  margin-top: -30rpx;
  position: relative;
  z-index: 11;
}
.top-img{
  width: 100%;
  background: #fff;
  height: 560rpx;
  position: relative;
  .img{
    height: inherit;
    width: 100%;
  }
  .img1{
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 30rpx;
  }
  .bg{
    height: 100%;
    width: 50%;
    background: #fff;
    position: absolute;
    top: -30rpx;
    right: 0;
    z-index: 9;
  }
}
</style>