YFYC-H5/yfyc/src/views/Interact/components/InteractInfo.vue

<template>
  <div class="InteractInfo">
    <!-- 图片盒子 -->
    <div class="title">
      <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
        <van-swipe-item
          @click="lookImg(baseURL+item.filePath)"
          v-for="item in imgList"
          :key="item.id"
        >
          <img
            class="bacImg"
            v-lazy="baseURL+item.filePath"
            alt=""
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 畅游芜湖 -->
    <div class="titLoc">
      <div class="ll">
        <img :src="info.avatarUrl" alt="" />
      </div>
      <div class="rr">
        <h3>{{info.nickName}}</h3>
        <p><van-icon name="location" />{{info.positionName}}</p>
      </div>
    </div>
    <!-- 文字内容 -->
    <div class="txt">
      <h3>{{info.name}}</h3>
      <div v-html="info.description"></div>
      <div class="lastInfo">
        <div>#{{info.dictTopicName}}</div>
        <p>{{info.createTime}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { baseURL } from "@/utils/request";
import {getInfoAPI} from '@/api/interact'
import { ImagePreview } from "vant";
export default {
  name: "InteractInfo",
  components: {},
  data() {
    return {
      baseURL,
      info:{},
      imgList:[]
    };
  },
  computed: {},
  watch: {},
  methods: {
    lookImg(url) {
      ImagePreview({
        images: [url],
        showIndex: false,
      });
    },
  },
async  created() {
    const id =this.$route.params.id
    const res =await getInfoAPI(id)
    this.info=res.data.entity
    this.imgList=res.data.file
  },
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.InteractInfo {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 20px 15px;
  .title {
    width: 100%;
    height: 200px;
    position: relative;
    .my-swipe {
      width: 100%;
      height: 100%;
    }

    .my-swipe .van-swipe-item {
      border-radius: 8px;
    }

    .bacImg {
      border-radius: 8px;
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
    }

    /deep/.van-swipe__indicators {
      bottom: 5px;
    }

    /deep/.van-swipe__indicator {
      opacity: 0.6;
    }

    /deep/.van-swipe__indicator--active {
      opacity: 1;
    }
  }
  .titLoc {
    display: flex;
    margin: 20px 0;
    .ll {
      margin-right: 10px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      & > img {
        width: 100%;
        height: 100%;
      }
    }
    .rr {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      h3 {
        font-size: 16px;
      }
      p {
        font-size: 14px;
        color: #868686;
      }
    }
  }
  .txt {
    h3 {
      font-size: 16px;
      margin-bottom: 12px;
    }
    p {
      font-size: 14px;
      margin-bottom: 12px;
      line-height: 24px;
      color: #5c5c5c;
    }
    .lastInfo {
      margin-top: 22px;
      color: #868686;
      display: flex;
      align-items: center;
      & > div {
        margin-right: 8px;
        font-size: 14px;
        border-radius: 15px;
        border: 1px solid #868686;
        min-width: 60px;
        padding: 0 10px;
        height: 30px;
        line-height: 28px;
      }
      & > p {
        font-size: 12px;
        margin: 0;
      }
    }
  }
}
</style>