mp_exhibitor_miniprog/pages/exhibitor/detail.vue

<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: {
			// styleIsolation: 'shared'
		},
		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>