mp_exhibitor_miniprog/pages/exhibitor/exhibit-detail.vue

<template>
  <page-layout class="exhibit-detail exhibitor-detail" v-if="exhibit && exhibit.name">
    <nav-bar title="展品介绍" @init="onInitNavbar"></nav-bar>
    <u-scroll-view>
      <view class="main-container">
        <view class="exhibit-image" @click="onClickAlbum(exhibit.pic)">
          <image :src="exhibit.pic + '?x-oss-process=image/resize,w_800'" mode="aspectFit"/>
          <view v-for="(item) in exhibit.product_attr_names" class="exhibit-tag">{{ item }}</view>
          <view class="iconfont icon-Search"></view>
        </view>
        <view class="exhibit-name">{{ exhibit.name }}</view>
        <view class="exhibitor-info-list">
          <view class="exhibitor-info-item">
            <view class="iconfont icon-View"></view>浏览：{{ exhibit.pv }}
          </view>
          <view class="exhibitor-info-item" v-if="pollShow.product_poll_show">
            <view class="iconfont icon-xiaochengxu-renqiicon"></view>
            <view>人气：{{ exhibit.poll_count }}</view>
          </view>
        </view>
        <view class="exhibit-desc">{{ exhibit.summary }}</view>
        <view class="exhibit-tags exhibitor-tags">
          <view class="exhibitor-tags-category">产品分类：</view>
          <view class="exhibitor-tags-list">
            <view v-for="(item) in exhibit.product_cate_names" class="exhibitor-tag">{{ item }}</view>
          </view>
        </view>
        <view class="exhibit-tags exhibitor-tags">
          <view class="exhibitor-tags-category">应用领域：</view>
          <view class="exhibitor-tags-list">
            <view v-for="(item) in exhibit.application_areas_names" class="exhibitor-tag">{{ item }}</view>
          </view>
        </view>

        <exhibitor-card :exhibit="exhibit"></exhibitor-card>
        <disclaimer-text></disclaimer-text>
        <view class="exhibit-operation 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="exhibit.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="exhibit.is_like" class="iconfont icon-aixin active"></view>
              <view v-else class="iconfont icon-heart1"></view>
              <view>点赞</view>
            </view>
            <view v-if="pollShow.product_poll_show" @click="onPoll()">
              <view v-if="exhibit.is_poll" class="iconfont icon-Ticket1 active"></view>
              <view v-else class="iconfont icon-xiaochengxu-toupiaoicon"></view>
              <view>投票</view>
            </view>
          </view>
        </view>
      </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 DisclaimerText from '@/components/disclaimer-text/index.vue'
import floatButton from "@/components/layout/float-button"
import ContactUs from '@/pages/index/components/contact-us.vue'
import {
  exhibitorsProductInfo,
  globalPollShow,
  exhibitorsProductCollect,
  exhibitorsProductLike,
  exhibitorsProductPoll
} from '@/api/exhibitor'
import exhibitorCard from "@/pages/exhibitor/components/exhibitor-card";
import PageLayout from "@/components/layout/page-layout";

export default {
  options: {
    styleIsolation: 'shared'
  },
  components: {
    PageLayout,
    NavBar,
    UScrollView,
    UShareActionSheet,
    DisclaimerText,
    exhibitorCard,
		floatButton,
		ContactUs
  },
  computed: {},
  data() {
    return {
      showShare: false,
      shareInfo: null,
      exhibit: {
        is_collect: 0,
        is_like: 0,
        is_poll: 0,
        name: '',
        summary: '',
        product_cate_names: [],
        application_areas_names: [],
        product_attr_names: [],
        pic: '',
        poll_count: 0,
        pv: 0,
        exhibitors_logo: '',
        exhibitors_name_zh_cn: '',
        exhibitors_name_en_us: '',
        exhibitors_hall: '',
        exhibitors_booth_no: ''
      },
      id: 0,
      pollShow: {
        exhibitors_poll_show: 0,
        product_poll_show: 0
      }
    }
  },
  onLoad(options) {
    this.id = options.id
    this.getProductInfo()
  },
  created() {
    this.getGlobalPollShow()
    uni.$on('refreshData', (val) => {
      if (val === 'pages/exhibitor/exhibit-detail') {
        this.getProductInfo()
      }
    })
  },
  methods: {
    onClickAlbum(url) {
      const pics = [url]
      uni.previewImage({
        current: 0,
        urls: pics
      })
    },
    getProductInfo() {
      exhibitorsProductInfo({id: this.id}).then(res => {
        if (res.code === 0) {
          this.exhibit = res.data
          this.shareInfo = {
            title: this.exhibit.name,
            path: `/pages/exhibitor/exhibit-detail?id=` + this.id,
            imageUrl: this.exhibit.pic + '?x-oss-process=image/resize,w_600,h_600,limit_0,m_pad'
          }
        }
      })
    },
    onShareAppMessage() {
      return this.shareInfo
    },
    onShareTimeline() {
      return this.shareInfo
    },
    onShare() {
      this.shareInfo = {
        title: this.exhibit.name,
        path: `/pages/exhibitor/exhibit-detail?id=` + this.id,
        imageUrl: this.exhibit.pic + '?x-oss-process=image/resize,w_600,h_600,limit_0,m_pad'
      }
      this.showShare = true
    },

    getGlobalPollShow() {
      globalPollShow().then(res => {
        this.pollShow = res.data
      })
    },
    onCollect() { // 收藏
      if (!this.checkAuth('/pages/exhibitor/exhibit-detail?id=' + this.id)) {
        return
      }
      exhibitorsProductCollect({id: this.id}).then(res => {
        if (res.code === 0) {
          this.exhibit.is_collect = this.exhibit.is_collect === 0 ? 1 : 0
        }
      })
    },
    onLike() { // 点赞
      if (!this.checkAuth('/pages/exhibitor/exhibit-detail?id=' + this.id)) {
        return
      }
      exhibitorsProductLike({id: this.id}).then(res => {
        if (res.code === 0) {
          this.exhibit.is_like = this.exhibit.is_like === 0 ? 1 : 0
        }
      })
    },
    onPoll() { // 投票
      if (!this.checkAuth('/pages/exhibitor/exhibit-detail?id=' + this.id)) {
        return
      }
      exhibitorsProductPoll({id: this.id}).then(res => {
        if (res.code === 0) {
          this.exhibit.is_poll = this.exhibit.is_poll === 0 ? 1 : 0
          if (this.exhibit.is_poll === 1) {
            this.exhibit.poll_count = this.exhibit.poll_count + 1
          } else {
            this.exhibit.poll_count = this.exhibit.poll_count - 1
            this.exhibit.poll_count = this.exhibit.poll_count < 0 ? 0 : this.exhibit.poll_count
          }
        }
      })
    }
  }
}
</script>

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

.exhibit-detail {
  .exhibit-image {
    position: relative;
    height: 438rpx;
    background-color: #FFFFFF;
    border-radius: 5rpx;
    border: 1rpx solid #D6D6D6;
    .iconfont {
      position: absolute;
      right: 24rpx;
      top: 24rpx;
      font-size: $fontSize5;
    }
    .exhibit-tag {
      position: absolute;
      top: 28rpx;
      left: 29rpx;
      padding: 12rpx 22rpx;
      color: $textActionColor;
      font-size: $fontSize0;
      background-color: lighten($textActionColor, 43%);
    }
  }

  .exhibitor-detail-link {
    @include link-button;
  }

  .exhibit-name {
    margin-top: 28rpx;

    font-weight: bold;
    font-size: $fontSize6;
    color: #000000;
    line-height: 42rpx;
  }

  .exhibit-desc {
    //margin-top: 18rpx;
    font-size: $fontSize3;
    color: #333333;
    line-height: 1.5;
  }
  .exhibitor-info-list {
    display: flex;
    align-items: center;
    grid-gap: 24rpx;
    margin: 10rpx 0;
    justify-content: flex-end;
    //margin-top: 50rpx;
    .exhibitor-info-item {
      display: flex;
      align-items: center;
      //grid-gap: 12rpx;
      font-size: $fontSize1;
      color: #555555;
      .iconfont {
        font-size: $fontSize2;
      }
    }
  }
}
</style>