mp_exhibitor_miniprog/pages/exhibitor/components/exhibitor-item.vue

<template>
	<view class="exhibitor-item" hover-class="active" @click="onClickExhibitor(item.id)">
		<view class="exhibitor-body">
			<view class="exhibitor-logo"><image :src="item.logo" mode="aspectFit" /></view>
			<view class="exhibitor-name">
				<view class="exhibitor-name-cn">{{ item.name_zh_cn }}</view>
				<view class="exhibitor-name-en">{{ item.name_en_us }}</view>
			</view>
			<view class="exhibitor-number">
				<view class="exhibitor-number-label">展位号:</view>
				<view class="exhibitor-number-text">{{ item.hall_booth_no }}</view>
			</view>
		</view>
		<view v-if="!footerHidden" class="exhibitor-footer">
			<view class="exhibitor-views">浏览：{{ item.pv }}</view>
			<view class="exhibitor-action">
				<view>
					<button :plain="true" @click.stop="onShare(item)">
						<view>
							<view class="iconfont icon-zhuanfa"></view>
							<view>分享</view>
						</view>
					</button>
				</view>
				<view @click.stop="onCollect()">
					<view v-if="item.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.stop="onLike()">
					<view v-if="item.is_like" class="iconfont icon-aixin active"></view>
					<view v-else class="iconfont icon-heart1"></view>
					<view>点赞</view>
				</view>
				<view v-if="pollShow" @click.stop="onPoll()">
					<view v-if="item.is_poll" class="iconfont icon-Ticket1 active"></view>
					<view v-else class="iconfont icon-xiaochengxu-toupiaoicon"></view>
					<view>投票</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { exhibitorsCollect, exhibitorsLike, exhibitorsPoll } from '@/api/exhibitor'
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
		},
		props: {
			// 数据
			item: Object,
			footerHidden: Boolean,
			pollShow: Number
		},
		data() {
			return {
			}
		},
		created() {
		},
		methods: {
			onCollect() { // 收藏
				if (!this.checkAuth('/pages/exhibitor/index')) {
					return
				}
				exhibitorsCollect({ id: this.item.id }).then(res => {
					if (res.code === 0) {
						let is_collect = this.item.is_collect === 0 ? 1 : 0
						this.$emit('updateItemValue', {
							id: this.item.id,
							key: 'is_collect',
							value: is_collect
						})
					}
				})
			},
			onLike() { // 点赞
				if (!this.checkAuth('/pages/exhibitor/index')) {
					return
				}
				exhibitorsLike({ id: this.item.id }).then(res => {
					if (res.code === 0) {
						let is_like = this.item.is_like === 0 ? 1 : 0
						this.$emit('updateItemValue', {
							id: this.item.id,
							key: 'is_like',
							value: is_like
						})
					}
				})
			},
			onPoll() { // 投票
				if (!this.checkAuth('/pages/exhibitor/index')) {
					return
				}
				exhibitorsPoll({ id: this.item.id }).then(res => {
					if (res.code === 0) {
						let is_poll = this.item.is_poll === 0 ? 1 : 0
						this.$emit('updateItemValue', {
							id: this.item.id,
							key: 'is_poll',
							value: is_poll
						})
					}
				})
			},
			onShare(item) {
				const shareInfo = {
					title: item.name,
					path: `/pages/exhibitor/detail?id=` + item.id,
					imageUrl: item.logo + '?x-oss-process=image/resize,w_600,h_600,limit_0,m_pad'
				}
				this.$emit('share', {
					detail: shareInfo
				})
			},
			onClickExhibitor(id) {
				this.navigateTo('/pages/exhibitor/detail?id=' + id)
			}
		}
	}
</script>
<style lang="scss">
</style>