proginn-frontend/pages/frontend/dynamic/info.vue

<template>
  <ErrorPage404 v-if="!isExist"></ErrorPage404>
  <div v-else :style="{ marginTop: mainMarginTop, width: '100%' }">
    <div class="dynamic-info-wrapper-mobile" v-if="isInit">
      <div class="dynamic-info-main">
        <div class="dynamic-info-user">
          <div class="dynamic-info-user-avatar">
            <img :src="user_info.icon_url || ''" />
          </div>
          <div class="dynamic-info-user-info">
            <div class="dynamic-info-user-nickname">
              <span>{{ user_info.nickname }}</span>
              <LevelTag :level="user_info.freework_level"></LevelTag>
            </div>
            <div class="dynamic-info-user-title">
              <span>{{ user_info.tag[0] ? user_info.tag[0].name : "" }}</span>
              <span>{{
                user_info.tag[1] ? "· " + user_info.tag[1].name : ""
              }}</span>
            </div>
          </div>
          <!-- <div class="dynamic-info-user-menu"></div> -->
        </div>
        <div class="dynamic-info-content">
          {{ dynamicDetail.title }}
        </div>
        <div class="dynamic-info-type-area">
          <div class="dynamic-info-type"># {{ dynamicDetail.type_text }}</div>
        </div>
        <div class="dynamic-info-img-list" v-if="dynamicDetail.img.length > 0">
          <div
            class="dynamic-info-img-item"
            v-for="item in dynamicDetail.img"
            :key="item.img"
            :style="{
              'background-image': 'url(' + item.img + ')'
            }"
          >
            <!-- <img :src="" /> -->
          </div>
        </div>

        <!-- 根据type去显示 -->
        <!-- 
          @click="gotoPage(resources.resources_url)"
         -->
        <div
          v-if="dynamicDetail.type != 2"
          class="dynamic-info-resources-link"
          @click="gotoDownload"
        >
          <div class="dynamic-info-resources-img">
            <img :src="resources.resources_img" />
          </div>
          <div class="dynamic-info-resources-title">
            {{ resources.resources_title }}
          </div>
        </div>

        <!-- 
          @click="gotoPage(resources.resources_url)"
         -->
        <div v-else class="dynamic-info-resources-area" @click="gotoDownload">
          <div class="resources-top">
            <div class="resources-title">{{ resources.resources_title }}</div>
            <div class="resources-price">{{ resources.resources_price }}</div>
          </div>
          <div class="resource-tag">
            <div
              v-for="item in resources.resources_tag"
              :key="item"
              class="resources-tag-item"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="resource-company">
            <div class="resource-company-img">
              <img :src="user_info.icon_url || ''" />
            </div>
            <div class="resource-company-name">
              {{ resources.resources_form }}
            </div>
          </div>
        </div>

        <div class="dynamic-info-like">
          <div
            class="dynamic-info-like-item dynamic-info-like-count"
            @click="gotoDownload"
          >
            {{ dynamicDetail.z_num }}
          </div>
          <div
            class="dynamic-info-like-item dynamic-info-comment-count"
            @click="gotoDownload"
          >
            {{ dynamicDetail.c_num }}
          </div>
        </div>
      </div>

      <!-- <div class="dynamic-comment-main">
            <div class="dynamic-comment-title">评论</div>

            <ul class="dynamic-comment-list">
                <li class="dynamic-comment-item">
                    <div class="dynamic-comment-avatar">
                        <img src="https://iph.href.lu/100x100?fg=666666&bg=cccccc" />
                    </div>
                    <div class="dynamic-comment-info">
                        <div class="dynamic-comment-item-top">
                            <div class="dynamic-comment-nickname">Keimi</div>
                            <div class="dynamic-comment-time">2020-03-12</div>
                            <div class="dynamic-comment-more"></div>
                        </div>
                        <div class="dynamic-comment-content">
                            我还在很愉快 期待下次合作
                        </div>
                    </div>
                </li>
                <li class="dynamic-comment-item">
                    <div class="dynamic-comment-avatar">
                        <img src="https://iph.href.lu/100x100?fg=666666&bg=cccccc" />
                    </div>
                    <div class="dynamic-comment-info">
                        <div class="dynamic-comment-item-top">
                            <div class="dynamic-comment-nickname">Keimi</div>
                            <div class="dynamic-comment-time">2020-03-12</div>
                            <div class="dynamic-comment-more"></div>
                        </div>
                        <div class="dynamic-comment-content">
                            我还在很愉快 期待下次合作期待下次合作期待下次合作期待下次合作期待下次合作期待下次合作期待下次合作期待下次合作期待下次合作期待下次合作期待下次合作期待下次合作
                        </div>
                    </div>
                </li>
                <li class="dynamic-comment-item">
                    <div class="dynamic-comment-avatar">
                        <img src="https://iph.href.lu/100x100?fg=666666&bg=cccccc" />
                    </div>
                    <div class="dynamic-comment-info">
                        <div class="dynamic-comment-item-top">
                            <div class="dynamic-comment-nickname">Keimi</div>
                            <div class="dynamic-comment-time">2020-03-12</div>
                            <div class="dynamic-comment-more"></div>
                        </div>
                        <div class="dynamic-comment-content">
                            我还在很愉快 期待下次合作
                        </div>
                    </div>
                </li>
            </ul>
        </div> -->
    </div>

    <div class="dynamic-bottom">
      <div class="dynamic-bottom-btn" @click="gotoDownload"></div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import DynamicInfoData from "@/components/dynamic/DynamicInfo.js";
import qs from "qs";
import ErrorPage404 from "@/components/error_page/404.vue";
import LevelTag from "@/components/level-tag.vue";

export default {
  name: "DynamicDetail",
  layout: "noheader",
  data() {
    return {
      baseUrl: "",
      isWeixinApp: true,
      isExist: true,
      dynamicDetail: {},
      user_info: {},
      resources: {},
      isInit: false
    };
  },
  components: {
    ErrorPage404,
    LevelTag
  },
  head() {
    const {
      title = "",
      keyword = "",
      description = "",
      h1 = "",
      canonical = "",
      metaLocation
    } = this.head || {};
    let obj = {
      title: title,
      meta: [
        {
          name: "keywords",
          content: keyword
        },
        {
          name: "description",
          content: description
        },
        {
          name: "h1",
          content: h1
        },
        {
          name: "viewport",
          content: "width=device-width, initial-scale=1.0, viewport-fit=cover"
        }
      ],
      link: [
        {
          rel: "canonical",
          href: canonical
        }
      ]
    };
    if (metaLocation) {
      obj.meta.push({
        name: "location",
        content: metaLocation
      });
    }
    return obj;
  },
  computed: {
    ...mapState(["deviceType"]),
    showWxHeader() {
      return (
        !this.deviceType.app &&
        !this.isWeixinApp &&
        (this.deviceType.android || this.deviceType.ios)
      );
    },
    mainMarginTop() {
      if (this.mobile && this.showWxHeader) {
        return "0 !important";
      } else if (this.mobile) {
        return "0px !important";
      } else {
        return "20px !important";
      }
    }
  },
  // async asyncData({
  //     ...params
  // }) {
  //     let dynamicInfoData = new DynamicInfoData(params)
  //     let ans = await dynamicInfoData.dealData()

  //     return {
  //         ...ans
  //     }
  // },
  mounted() {
    const self = this;
    this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1;
    this.fetchData();
  },
  methods: {
    async fetchData() {
      // console.log(this)
      if (!this.$route.params.id) {
        this.isExist = false;
        return;
      }
      let dynamicId = this.$route.params.id;
      let res = await this.$axios.$post("/uapi/dynamic/get_dynamic_detail", {
        dynamic_id: dynamicId
      });
      this.isInit = true;

      //   let dynamicDetail = {};
      if (Number(res.status) === 1) {
        let dynamicList = res.data.list;
        this.dynamicDetail = {
          ...dynamicList[0]
        };
        this.user_info = {
          ...dynamicList[0].user_info
        };
        this.resources = {
          ...dynamicList[0].resources
        };
      } else {
        this.isExist = false;
      }
    },
    gotoPage(url) {
      location.href = url;
    },
    gotoDownload() {
      location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=com.proginn";
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/dynamic/info.scss";
</style>
<style lang="scss">
strong {
  font-weight: bold !important;
}

em {
  font-style: italic !important;
}
</style>