Smart-Farm/uniapp/uni-app/home/pages/farm/info.vue

<template>
	<view class="home-farm-info" v-if="detail.id">
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" color="#fff"
			:backgroundColor="scrollTop < 20 ?``:primaryColor" leftIcon="icon-left" title="商户信息">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<image mode="aspectFill" lazy-load class="common-bg abs" :style="{height: `${configInfo.navBarHeight + 104}px`}"
			src="https://lbqny.migugu.com/admin/farm/bg-cash.png"></image>
		<view class="common-top-img"></view>
		<view class="common-top-info rel">
			<view class="top-box abs">
				<view class="farm-item fill-base flex-center ml-md mr-md pd-lg box-shadow radius-24">
					<image mode="aspectFill" lazy-load class="cover box-shadow-mini radius-24" :src="detail.cover">
					</image>
					<view class="flex-1 ml-lg">
						<view class="f-title c-title ellipsis" style="max-width: 460rpx;">{{detail.title}}</view>
						<view class="f-caption c-caption mt-sm">浏览量 {{detail.iv || 0}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="space-md"></view>
		<view class="fill-base pt-sm pl-lg pr-lg pb-lg">
			<view class="common-nav-title flex-center c-title">
				<view class="common-line" :style="{background:primaryColor}"></view>
				<view class="f-title text-bold flex-1">店铺描述</view>
			</view>
			<view class="f-paragraph c-desc">
				<text decode="emsp" style="word-break:break-all;">{{detail.desc}}</text>
			</view>
		</view>
		<view class="info-list fill-base pl-lg pb-lg">
			<image mode="aspectFill" @tap.stop="$util.previewImage({current:item,urls:detail.imgs})"
				class="info-img fill-body radius-16"
				:class="[{'mr-md':index!=detail.imgs.length},{'mr-lg': index == detail.imgs.length}]" :src="item"
				v-for="(item,index) in detail.imgs" :key="index"></image>
		</view>

		<view class="space-md"></view>
		<view class="fill-base pt-sm pl-lg pr-lg pb-lg">
			<view class="common-nav-title flex-center c-title">
				<view class="common-line" :style="{background:primaryColor}"></view>
				<view class="f-title text-bold flex-1">基础信息</view>
			</view>
			<view class="f-paragraph c-desc mt-sm">
				<view @tap.stop="$util.goUrl({url:detail.mobile,openType:'call'})" class="flex-between">
					<view>联系电话</view>
					<view>{{detail.mobile}}</view>
				</view>
				<view @tap.stop="toMap" class="flex-warp mt-md">
					<view>店铺地址</view>
					<view class="flex-1 ml-lg pl-lg">{{detail.address}}</view>
				</view>
				<!-- <view class="flex-between mt-md">
					<view>开店时间</view>
					<view>{{detail.create_time}}</view>
				</view> -->
				<view class="flex-between mt-md">
					<view>是否营业</view>
					<view>{{openType[detail.is_open]}}</view>
				</view>
			</view>
		</view>
		<view class="space-footer"></view>

	</view>
</template>

<script>
	import {
		mapState,
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				scrollTop: 0,
				options: {},
				detail: {},
				openType: {
					0: '闭店中',
					1: '营业中'
				}
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
		}),
		onLoad(options) {
			this.options = options
			this.initIndex()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		methods: {
			async initIndex() {
				let {
					id
				} = this.options
				let data = await this.$api.home.farmerInfo({
					id
				})
				data.is_open = 1
				data.star_percent = (data.star * 1 / 5 * 100).toFixed(2) + '%'
				data.iv = data.iv*1+1
				this.detail = data
			},
			initRefresh() {
				this.initIndex()
			},
			async toMap() {
				let {
					lat,
					lng,
					address
				} = this.detail
				await this.$util.checkAuth({
					type: 'userLocation'
				})
				await uni.getLocation({
					type: 'gcj02',
				})
				await uni.openLocation({
					latitude: lat * 1,
					longitude: lng * 1,
					name: address,
					scale: 28
				})
			},
		}
	}
</script>


<style lang="scss">
	.home-farm-info {
		.farm-item {
			.cover {
				width: 160rpx;
				height: 160rpx;
			}

			.icon-dingwei,
			.icon-right {
				font-size: 24rpx;
			}


			.status-btn {
				width: 80rpx;
				height: 36rpx;
				font-size: 20rpx;
			}

			.max-title {
				max-width: 370rpx;
			}

			.addr-text {
				max-width: 420rpx;
			}
		}

		.info-list {
			white-space: nowrap;
			width: 100%;
			overflow: auto;

			.info-img {
				width: 200rpx;
				height: 200rpx;
				display: inline-block;
			}

		}
	}
</style>