mp_exhibitor_miniprog/pages/exhibitor/detail.vue

<template>
  <page-layout class="exhibitor-detail" v-if="exhibitor && exhibitor.name_zh_cn">
    <nav-bar title="展商详情" @init="onInitNavbar"></nav-bar>
    <u-scroll-view>
      <view class="main-container">
        <view class="exhibitor-main">
          <view class="exhibitor-logo">
            <image v-if="exhibitor && exhibitor.logo" :src="exhibitor.logo + '?x-oss-process=image/resize,w_400'" mode="aspectFit" />
            <image v-else src="https://onlinecatelogue.productronicachina.com.cn/assets/image/normal-logo.jpg" mode="aspectFit" />
          </view>
          <view class="exhibitor-title">
            <view class="exhibitor-title-1">
              {{ exhibitor.name_zh_cn }}
            </view>
            <view class="exhibitor-title-2">
              {{ exhibitor.name_en_us }}
            </view>
            <view class="exhibitor-title-3" v-if="exhibitor.country_name">
              {{ exhibitor.country_name }}
            </view>
          </view>
          <view class="exhibitor-info">
            <view class="exhibitor-number">
              <view class="exhibitor-number-label">展位号:</view>
              <view class="exhibitor-number-text">{{ exhibitor.hall_booth_no }}</view>
            </view>
            <view class="exhibitor-right">
              <view class="exhibitor-info-item">
                <view class="iconfont icon-View"></view>
                {{ exhibitor.pv }}
              </view>
              <view class="exhibitor-info-item" v-if="pollShow.exhibitors_poll_show">
                <view class="iconfont icon-xiaochengxu-renqiicon"></view>
                <view>人气：{{ exhibitor.poll_count }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="exhibitor-desc">
          {{ exhibitor.introduce_zh_cn }}
        </view>
        <view class="exhibitor-tags">
          <view class="exhibitor-tags-category">产品分类：</view>
          <view class="exhibitor-tags-list">
            <view class="exhibitor-tag" v-for="(item) in exhibitor.product_cate_names">{{ item }}</view>
          </view>
        </view>
        <view class="exhibitor-tags">
          <view class="exhibitor-tags-category">应用领域：</view>
          <view class="exhibitor-tags-list">
            <view class="exhibitor-tag" v-for="(item) in exhibitor.application_areas_names">{{ item }}</view>
          </view>
        </view>

        <u-panel title="展品资料">
          <exhibit-recommend :limit="exhibitRecommendLimit" :exhibitorId="exhibitorId"/>
        </u-panel>
        <u-panel title="展商新闻">
          <news-recommend recommend-type="detail" :exhibitorId="exhibitorId"/>
        </u-panel>
        <u-panel title="展商活动">
          <activity-recommend recommend-type="detail" :exhibitorId="exhibitorId"/>
        </u-panel>
        <view class="click-more">
          <van-button type="primary" @click="navigateTo('/pages/index/index?tab=exhibitor')">点击查看更多展商信息</van-button>
        </view>
        <view class="exhibitor-operation">
          <view class="exhibitor-action">
            <view  @click.stop="onShare()">
              <view class="iconfont icon-zhuanfa"></view>
              <view>分享</view>
            </view>
            <view @click="onCollect()">
              <view v-if="exhibitor.is_collect" class="iconfont icon-favourites-filled-star-symbol active"></view>
              <view v-else class="iconfont icon-Favourites-Add-Large"></view>
              <view>收藏</view>
            </view>
            <view @click="onLike()">
              <view v-if="exhibitor.is_like" class="iconfont icon-aixin active"></view>
              <view v-else class="iconfont icon-heart1"></view>
              <view>点赞</view>
            </view>
            <view v-if="pollShow.exhibitors_poll_show" @click="onPoll()">
              <view v-if="exhibitor.is_poll" class="iconfont icon-Ticket1 active"></view>
              <view v-else class="iconfont icon-xiaochengxu-toupiaoicon"></view>
              <view>投票</view>
            </view>
          </view>
        </view>
        <disclaimer-text></disclaimer-text>
      </view>
    </u-scroll-view>
    <float-button></float-button>
    <van-dialog id="van-dialog"/>
    <u-share-action-sheet :show.sync="showShare" :show-info="shareInfo"/>
  </page-layout>
</template>

<script>
import NavBar from '@/components/layout/nav-bar'
import UScrollView from '@/components/common/u-scroll-view'
import UShareActionSheet from '@/components/common/u-share-action-sheet'
import UPanel from '@/components/common/u-panel'
import ExhibitRecommend from '@/pages/exhibitor/components/exhibit-recommend.vue'
import NewsRecommend from '@/pages/news/components/news-recommend.vue'
import ActivityRecommend from '@/pages/activity/components/activity-recommend.vue'
import {exhibitorsInfo, exhibitorsCollect, exhibitorsLike, exhibitorsPoll, globalPollShow} from '@/api/exhibitor'
import DisclaimerText from '@/components/disclaimer-text/index.vue'
import floatButton from "@/components/layout/float-button"
import PageLayout from "@/components/layout/page-layout";
import countryZhCn from "@/utils/country-zh-cn";

export default {
  options: {
    // styleIsolation: 'shared'
  },
  components: {
    PageLayout,
    NavBar,
    UScrollView,
    UShareActionSheet,
    UPanel,
    ExhibitRecommend,
    ActivityRecommend,
    NewsRecommend,
    DisclaimerText,
    floatButton
  },
  computed: {},
  onLoad(options) {
    this.exhibitorId = options.id
    this.getExhibitorsInfo()
  },
  data() {
    return {
      showExhibitMore: true,
      showShare: false,
      shareInfo: null,
      exhibitRecommendLimit: 4,
      exhibitor: {
        name_zh_cn: '',
        name_en_us: '',
        country: '',
        hall_booth_no: '',
        product_cate_names: [],
        application_areas_names: [],
        pv: 0,
        poll_count: 0,
        is_collect: 0,
        is_like: 0,
        is_poll: 0
      },
      exhibitorId: 0,
      pollShow: {
        exhibitors_poll_show: 0,
        product_poll_show: 0
      }
    }
  },
  created() {
    this.getGlobalPollShow()
    uni.$on('refreshData', (val) => {
      if (val === 'pages/exhibitor/detail') {
        this.getExhibitorsInfo()
      }
    })
  },
  methods: {
    getExhibitorsInfo() {
      exhibitorsInfo({id: this.exhibitorId}).then(res => {
        if (res.code === 0) {
          this.exhibitor = res.data
          for (let i = 0; i < countryZhCn.length; i++) {
            if (countryZhCn[i].code === this.exhibitor.country) {
              this.exhibitor.country_name = countryZhCn[i].name
              break;
            }
          }
        }
      })
    },
    onShareAppMessage(ops) {
      return this.shareInfo
    },
    onShare() {
      this.shareInfo = {
        title: this.exhibitor.name_zh_cn,
        path: `/pages/exhibitor/detail?id=` + this.exhibitor.id,
        imageUrl: this.exhibitor.logo + '?x-oss-process=image/resize,w_600,h_600,limit_0,m_pad'
      }
      this.showShare = true
    },
    onCollect() { // 收藏
      if (!this.checkAuth('/pages/exhibitor/detail?id=' + this.exhibitor.id)) {
        return
      }
      exhibitorsCollect({id: this.exhibitor.id}).then(res => {
        if (res.code === 0) {
          this.exhibitor.is_collect = this.exhibitor.is_collect === 0 ? 1 : 0
        }
      })
    },
    onLike() { // 点赞
      if (!this.checkAuth('/pages/exhibitor/detail?id=' + this.exhibitor.id)) {
        return
      }
      exhibitorsLike({id: this.exhibitor.id}).then(res => {
        if (res.code === 0) {
          this.exhibitor.is_like = this.exhibitor.is_like === 0 ? 1 : 0
        }
      })
    },
    onPoll() { // 投票
      if (!this.checkAuth('/pages/exhibitor/detail?id=' + this.exhibitor.id)) {
        return
      }
      exhibitorsPoll({id: this.exhibitor.id}).then(res => {
        if (res.code === 0) {
          this.exhibitor.is_poll = this.exhibitor.is_poll === 0 ? 1 : 0
          if (this.exhibitor.is_poll === 1) {
            this.exhibitor.poll_count = this.exhibitor.poll_count + 1
          } else {
            this.exhibitor.poll_count = this.exhibitor.poll_count - 1
            this.exhibitor.poll_count = this.exhibitor.poll_count < 0 ? 0 : this.exhibitor.poll_count
          }
        }
      })
    },
    getGlobalPollShow() {
      globalPollShow().then(res => {
        this.pollShow = res.data
      })
    }
  }
}
</script>

<style lang="scss">
@import "@/static/style/pages/exhibitor-detail.scss";

.exhibitor-detail {
  padding-bottom: 40rpx;
  .exhibitor-main {
    display: flex;
    align-items: flex-start;
  }
  .exhibitor-info {
    display: flex;
    flex-direction: column;
    grid-gap: 12rpx;
    color: #555555;
    .exhibitor-right {
      display: flex;
      grid-gap: 6rpx;
      .exhibitor-info-item {
        display: flex;
        align-items: center;
        grid-gap: 3rpx;
        font-size: $fontSize0;
      }
    }
  }
  .exhibitor-logo {
    width: 160rpx;
    height: 160rpx;
    padding: 6rpx;
    background: #FFFFFF;
    border: 1rpx solid #D9D9D9;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .u-panel {
    //background-color: #FFFFFF;
  }

  .exhibitor-title {
    flex: 1;
    min-width: 1rpx;
    font-size: $fontSize5;
    color: #000000;
    line-height: 40rpx;
    padding-left: 19rpx;
    padding-right: 24rpx;
    word-break: break-word;
    .exhibitor-title-1 {
      font-weight: bold;
    }

    .exhibitor-title-2 {
      font-size: $fontSize4;
    }

    .exhibitor-title-3 {
      font-size: $fontSize1;
      color: #333333;
      line-height: $fontSize1;
      margin-top: 10rpx;
    }
  }

  .exhibitor-number {
    flex-shrink: 0;
    justify-content: flex-end;
    margin-top: 12rpx;
  }

  .exhibitor-number-label {
    font-size: $fontSize0;
    color: #555555;
  }

  .exhibitor-number-text {

    font-weight: bold;
    font-size: $fontSize6;
    color: #E57519;
    letter-spacing: 2rpx;
  }

  .exhibitor-desc {

    font-size: $fontSize3;
    color: #333333;
    line-height: 35rpx;
    margin-top: 30rpx;
    margin-bottom: 12rpx;
    line-height: 1.5;
  }

  .u-panel {
    padding: 0 !important;
    margin-top: 40rpx;
  }

  .click-more {
    display: flex;
    justify-content: center;
    margin-top: 49rpx;
    @include link-button;
  }
}
</style>