123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280 |
- <template>
- <view class="exhibitor-detail">
- <nav-bar title="展商详情" @init="onInitNavbar"></nav-bar>
- <u-scroll-view>
- <view class="main-container">
- <view class="exhibitor-main">
- <view class="exhibitor-logo">
- <image src="https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da70c02212.png?x-oss-process=image/resize,w_200" 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">
- {{ exhibitor.country }}
- </view>
- </view>
- <view class="exhibitor-number">
- <view class="exhibitor-number-label">展位号:</view>
- <view class="exhibitor-number-text">{{ exhibitor.hall_booth_no }}</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>
- <view class="exhibitor-operation">
- <view class="exhibitor-views">浏览:{{ exhibitor.pv }}</view>
- <view class="exhibitor-action">
- <view v-if="pollShow.exhibitors_poll_show">
- <view class="iconfont icon-xiaochengxu-renqiicon"></view>
- <view>人气:{{ exhibitor.poll_count }}</view>
- </view>
- <view>
- <button :plain="true" @click.stop="onShare()">
- <view>
- <view class="iconfont icon-zhuanfa"></view>
- <view>分享</view>
- </view>
- </button>
- </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>
- <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/exhibitor/index')">点击查看更多展商信息</van-button></view>
- </view>
- </u-scroll-view>
- <u-share-action-sheet :show.sync="showShare" :show-info="shareInfo" />
- </view>
- </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'
-
- export default {
- options: {
-
- },
- components: {
- NavBar,
- UScrollView,
- UShareActionSheet,
- UPanel,
- ExhibitRecommend,
- ActivityRecommend,
- NewsRecommend
- },
- 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
- },
- exhibitorId: 0,
- pollShow: {
- exhibitors_poll_show: 0,
- product_poll_show: 0
- }
- }
- },
- created() {
- this.loadFontFace('Poppins')
- this.getGlobalPollShow()
- },
- methods: {
- getExhibitorsInfo() {
- exhibitorsInfo({id: this.exhibitorId}).then(res => {
- if (res.code === 0) {
- this.exhibitor = res.data
- }
- })
- },
- onShareAppMessage(ops) {
- return {
- title: '科世达(上海)连接器有限公司',
- path: `/pages/exhibitor/detail`,
- imageUrl: this.exhibitor.logo + '?x-oss-process=image/resize,w_600,h_600,limit_0,m_pad'
- }
- },
- 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() {
- this.checkAuth('/pages/exhibitor/detail?id=' + this.exhibitor.id)
- exhibitorsCollect({ id: this.exhibitor.id }).then(res => {
- if (res.code === 0) {
- this.exhibitor.is_collect = this.exhibitor.is_collect === 0 ? 1 : 0
- }
- })
- },
- onLike() {
- this.checkAuth('/pages/exhibitor/detail?id=' + this.exhibitor.id)
- exhibitorsLike({ id: this.exhibitor.id }).then(res => {
- if (res.code === 0) {
- this.exhibitor.is_like = this.exhibitor.is_like === 0 ? 1 : 0
- }
- })
- },
- onPoll() {
- this.checkAuth('/pages/exhibitor/detail?id=' + this.exhibitor.id)
- 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{
- .exhibitor-main{
- display: flex;
- }
- .exhibitor-logo{
- width: 166rpx;
- height: 166rpx;
- background: #FFFFFF;
- border: 1rpx solid #D9D9D9;
- image{
- width: 100%;
- height: 100%;
- }
- }
- .u-panel{
- background-color: #FFFFFF;
- }
- .exhibitor-title{
- font-family: Poppins, Poppins;
- font-size: 30rpx;
- color: #000000;
- line-height: 40rpx;
- padding-left: 19rpx;
- padding-right: 24rpx;
- .exhibitor-title-1{
- font-weight: bold;
- }
- .exhibitor-title-2 {
- font-size: 28rpx;
- }
- .exhibitor-title-3 {
- font-size: $fontSize0;
- color: #333333;
- line-height: 20rpx;
- 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-family: Poppins, Poppins;
- font-weight: bold;
- font-size: $fontSize6;
- color: #E57519;
- letter-spacing: 2rpx;
- }
- .exhibitor-desc{
- font-family: Poppins, Poppins;
- font-size: $fontSize2;
- color: #333333;
- line-height: 35rpx;
- margin-top: 30rpx;
- margin-bottom: 12rpx;
- }
- .u-panel{
- margin-top: 40rpx;
- }
- .click-more{
- display: flex;
- justify-content: center;
- margin-top: 49rpx;
- @include link-button;
- }
- }
- </style>
|