mp_exhibitor_miniprog/pages/exhibitor/exhibit-detail.vue

<template>
	<view class="exhibit-detail exhibitor-detail">
		<nav-bar title="展品介绍" @init="onInitNavbar"></nav-bar>
		<u-scroll-view>
			<view class="main-container">
				<view class="exhibit-image">
					<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>
				<view class="exhibit-name">{{ exhibit.name }}</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>
				<view class="exhibit-operation exhibitor-operation">
					<view class="exhibitor-views">浏览：{{ exhibit.pv }}</view>
					<view class="exhibitor-action">
						<view v-if="pollShow.product_poll_show">
							<view class="iconfont icon-xiaochengxu-renqiicon"></view>
							<view>人气：{{ exhibit.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="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>
				<u-panel title="展商信息">
					<view class="exhibitor-card">
						<view class="exhibitor-info">
							<view class="exhibitor-logo">
								<image :src="exhibit.exhibitors_logo + '?x-oss-process=image/resize,w_400'" mode="widthFix" />
							</view>
							<view class="exhibitor-name-cn">{{ exhibit.exhibitors_name_zh_cn }}</view>
							<view class="exhibitor-name-en">{{ exhibit.exhibitors_name_en_us }}</view>
							<view class="exhibitor-detail-link">
								<van-button type="primary" @click="onClickDetail">
									<template>
										<view>点击了解展商更多信息</view> <view class="arrow iconfont icon-right-s"></view>
									</template>
								</van-button>
							</view>
						</view>
						<view class="exhibitor-number">
							<view class="exhibitor-number-label">我们的展位号</view>
							<view class="exhibitor-number-text">{{ exhibit.exhibitors_hall }}馆 {{ exhibit.exhibitors_booth_no }}</view>
						</view>
					</view>
				</u-panel>
			</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 { exhibitorsProductInfo, globalPollShow, exhibitorsProductCollect, exhibitorsProductLike, exhibitorsProductPoll } from '@/api/exhibitor'
	
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			NavBar,
			UScrollView,
			UShareActionSheet,
			UPanel
		},
		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.loadFontFace('Poppins')
			this.getGlobalPollShow()
		},
		methods: {
			getProductInfo() {
				exhibitorsProductInfo({id: this.id}).then(res => {
					if (res.code === 0) {
						this.exhibit = res.data
					}
				})
			},
			onShareAppMessage() {
				return this.shareInfo
			},
			onShare() {
				this.shareInfo = {
					title: this.exhibit.name,
					path: `/pages/exhibitor/exhibit-detail` + this.id,
					imageUrl: this.exhibit.pic + '?x-oss-process=image/resize,w_600,h_600,limit_0,m_pad'
				}
				this.showShare = true
			},
			onClickDetail(e) {
				this.navigateTo('/pages/exhibitor/detail?id=' + this.exhibit.exhibitors_id)
			},
			getGlobalPollShow() {
				globalPollShow().then(res => {
					this.pollShow = res.data
				})
			},
			onCollect() { // 收藏
				this.checkAuth('/pages/exhibitor/exhibit-detail?id=' + this.id)
				exhibitorsProductCollect({ id: this.id }).then(res => {
					if (res.code === 0) {
						this.exhibit.is_collect = this.exhibit.is_collect === 0 ? 1 : 0
					}
				})
			},
			onLike() { // 点赞
				this.checkAuth('/pages/exhibitor/exhibit-detail?id=' + this.id)
				exhibitorsProductLike({ id: this.id }).then(res => {
					if (res.code === 0) {
						this.exhibit.is_like = this.exhibit.is_like === 0 ? 1 : 0
					}
				})
			},
			onPoll() { // 投票
				this.checkAuth('/pages/exhibitor/exhibit-detail?id=' + this.id)
				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;
			.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-family: Poppins, Poppins;
			font-weight: bold;
			font-size: $fontSize6;
			color: #000000;
			line-height: 42rpx;
		}
		.exhibit-desc{
			margin-top: 18rpx;
			font-family: Poppins, Poppins;
			font-size: $fontSize2;
			color: #555555;
			line-height: 35rpx;
		}
		.exhibitor-card{
			display: flex;
			background-color: #FFFFFF;
			.exhibitor-info{
				padding: 36rpx;
				flex: 1;
			}
			.exhibitor-logo{
				width: 194rpx;
				image{
					height: auto;
				}
			}
			.exhibitor-detail-link{
				margin-top: 36rpx;
			}
			.exhibitor-name-cn,.exhibitor-name-en{
				font-family: Poppins, Poppins;
				font-size: $fontSize3;
				color: #000000;
				line-height: 28rpx;
			}
			.exhibitor-name-en{
				margin-top: 10rpx;
				font-size: $fontSize2;
			}
			.exhibitor-number{
				@include display-flex-center;
				flex-direction: column;
				width: 267rpx;
				background-color: $buttonPrimaryColor;
				color: #FFFFFF;
			}
			.exhibitor-number-text{
				width: 161rpx;
				text-align: center;
				font-family: Poppins, Poppins;
				font-weight: bold;
				font-size: 55rpx;
				line-height: 64rpx;
				margin-top: 30rpx;
			}
			.exhibitor-number-label{
				font-family: Poppins, Poppins;
				font-size: $fontSize3;
				line-height: 28rpx;
				color: rgba(255, 255,  255, 0.74);
			}
		}
		.u-panel{
			margin-top: 54rpx;
			padding: 0;
			.u-panel-title{
				&:after{
					display: none;
				}
			}
		}
	}
</style>