tuanfeng-shop-user/components/BeeBrandPane/BeeBrandPane.vue

<template>
	<view class="bee-brand-pane-container">
		<view class="bee-brand-top" @click="$jump(`/pages_category_page1/store/index?storeId=${brandInfo.shop_id}`)">
			<view class="left">
				<BeeAvatar :src="common.seamingImgUrl(brandInfo.shop_logo)" radius="10upx"></BeeAvatar>
				<!-- <view class="tag"> 惊喜价 </view> -->
			</view>
			<view class="middle">
				<view class="brand-name hidden">{{ brandInfo.shop_name }}</view>
				<!-- <view class="rate">
					<view style="display: flex;align-items: center;">
					<BeeIcon :size="12" :src="require('./images/star.png')"></BeeIcon>
					<text class="rate-text">{{ brandInfo.merchantRating || '5.0' }}分</text>
					<text class="sub-text">{{ brandInfo.brandLabel | formatTag }}</text>
					<text class="rate-text">￥{{ brandInfo.perCapita || '0' }}/人</text>
					<text>月售 {{ brandInfo.salesVolume || '0' }}</text>
					</view>
					<view style="color: #777777;">{{ brandInfo.browse || 0 }}浏览量</view>
					</view> -->
				<view v-if="brandInfo.brief" class="elva">
					<view class="elva-text hidden">{{ brandInfo.brief || '--' }}</view>
				</view>
				<view class="location-wrapper">
					<BeeIcon style="line-height: 100%;" :src="require('./images/location.png')" :size="14"></BeeIcon>
					<view class="detail">
						<text v-if="isPositioning" class="dis-container">{{ positioningText }}</text>
						<view v-else style="display: flex;align-items: center;">
							<text class="dis-container"> {{ typeof brandInfo.distance === 'number' ? (brandInfo.distance / 1000).toFixed(2) : 0 }} km </text>
							<BeeIcon :src="require('./images/to.png')" :size="14"></BeeIcon>
						</view>
					</view>
				</view>
				<view style="display: flex;flex-wrap: wrap;">
					<!-- v-if="brandInfo.voucherNum" -->
					<view
						style="width: fit-content;margin-top: 8upx;margin-right: 8upx;padding: 4upx 8upx;border: 0.25px solid #0d0e0d;border-radius: 12upx;font-size: 28upx;font-weight: bold;color: #0d0e0d;"
					>
						补贴代金券{{ brandInfo.voucher_return || 0 }}%
					</view>
					<view
						v-if="brandInfo.is_voucher"
						style="width: fit-content;margin-top: 8upx;margin-right: 8upx;padding: 4upx 8upx;border: 0.25px solid #51cc46;border-radius: 12upx;font-size: 28upx;font-weight: bold;color: #51cc46;"
					>
						支持代金券
					</view>
				</view>
			</view>
		</view>
		<view class="bee-brand-bottom">
			<slot></slot>
		</view>
	</view>
</template>

<script>
export default {

	filters: {
		formatTag(value) {
			return {
				0: '美酒',
				1: '美食',
				2: '娱乐',
				3: '好玩'
			}[value] || ''
		}
	},
	props: {
		brandInfo: {
			type: Object,
			required: true
		},
		isPositioning: {
			type: Boolean,
			default: true
		}
	},

	data() {
		return {
			positioningText: '定位中',
			timer: null
		}
	},
	watch: {
		isPositioning: {
			handler(val, oldVal) {
				this.timer && clearInterval(this.timer)
				if (val) {
					this.timer = setInterval(() => {
						if (this.positioningText.length === 9) {
							this.positioningText = '定位中'
						} else {
							this.positioningText = this.positioningText + '.'
						}
					}, 500)
				} else {
				}
			},
			immediate: true
		}
	},
	beforeDestroy() {
		this.timer && clearInterval(this.timer)
	}
}
</script>

<style lang="less" scoped>
.hidden {
	width: 374upx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.bee-brand-pane-container {
	// width: 100%;
	background-color: #fff;
	padding: 24upx 20upx;
	border-radius: 20upx;
	margin-top: 16upx;
	transition: all 350ms;

	&:active {
		background-color: #e9e9e9;
	}

	.bee-brand-top {
		display: flex;
		align-items: flex-start;
		width: 100%;

		.left {
			display: flex;
			align-items: center;
			flex-direction: column;

			.tag {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 104upx;
				height: 38upx;
				background: url('./images/tag1.png');
				background-size: cover;
				color: #cb511e;
				font-size: 24upx;
				margin-top: 52upx;
			}
		}

		.middle {
			flex: 1;
			margin: 0 28upx;

			.brand-name {
				color: #000;
				font-size: 32upx;
				font-weight: bold;
			}

			.rate {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 8upx;
				font-size: 26upx;

				text {
					font-size: 24upx;
					margin-left: 8upx;

					&.rate-text {
						color: #fa5151;
					}
				}
			}

			.location-wrapper {
				display: flex;
				align-items: center;
				margin: 12upx 0 8upx;

				// /deep/ .icon-container {
				//   margin-top: 6upx;
				// }

				.detail {
					background-color: #efefef;
					// vertical-align: text-bottom;
					padding: 0 4upx;
					border-radius: 4upx;
					margin-left: 4upx;
				}
			}

			.elva {
				margin: 8upx 0;

				.elva-text {
					// width: 348upx;
					margin-left: 10upx;
					font-size: 30upx;
				}
			}
		}
	}
}
</style>