universal-wechat-uniapp-241007/pages_order/gourmet/gourmetDetail.vue

<template>
	<view class="postDetail">
		<navbar leftClick @leftClick="$utils.navigateBack" title="详情" />

		<view class="works" @click="$emit('click')">
			<view class="box" :style="{'--sexcolor' : sex[detail.sex].color}">
				<view class="headPortraitimg">
					<image :src="detail.logoImage" 
					@click.stop="previewImage([item.logoImage])"
					mode="aspectFill"></image>
				</view>
				<view class="YaoduUniversalWall">
					<view class="heide">
						<view class="username text-ellipsis">
							{{ detail.title }}
						</view>
					</view>

					<view class="Times">
						<view class="TimeMonth">
							营业时间：{{ detail.workTime }}
						</view>
					</view>
				</view>
			</view>
			
			
			<addressSpot
			:address="detail.address"
			:latitude="detail.latitude"
			:longitude="detail.longitude"
			/>
			
			<view class="bottom">
				<view class="browse">
					{{ detail.isBrowse }}浏览
				</view>
				<view class="browse">
					{{ detail.isComment }}条评论
				</view>
			</view>
		</view>

		<!-- 分类 -->
		<view class="LabelOptions">
			<uv-tabs :list="category" 
			:activeStyle="{color : '#000', fontWeight : 900}"
			lineColor="#5baaff"
			lineHeight="8rpx"
			lineWidth="50rpx"
			:scrollable="false"
			@click="tabsClick"></uv-tabs>
		</view>
		
		<!-- 商城美食 -->
		<view class="goodList"
		v-if="tagIndex == 0">
			<productSelectList 
			v-if="detail.pay == 'Y'"
			:shopId="detail.id"
			:edit="detail.shopUser == userInfo.id"
			:detail="detail"
			@getData="getData"
			:list="list"/>

			<view v-else style="padding: 0 20rpx;">
				<productList 
                :productList="list" 
			    @getData="getData"
			    :edit="detail.shopUser == userInfo.id"
                :pay="detail.pay"/>
			</view>

		</view>
		
		<!-- 店铺介绍 -->
		<view class="goodInfo"
		v-if="tagIndex == 1">
		
			<view class="box" :style="{'--sexcolor' : sex[detail.sex].color}">
				<view class="headPortraitimg"
				v-if="detail.shopImage">
					<image :src="detail.shopImage" 
					@click.stop="previewImage([item.shopImage])"
					mode="aspectFill"></image>
				</view>
				<view class="YaoduUniversalWall">
					<view class="heide"
					v-if="detail.shopName">
						<view class="username text-ellipsis">
							{{ detail.shopName }}
						</view>
					</view>
			
					<callPhone
					:phone="detail.shopPhone" 
					type="3"
					:phoneTitle="detail.title"
					:pid="detail.id"
					title="联系店家" />
					
					<!-- 二维码入口 -->
					<view class="qrcode-btn" @click="goToQrCode">
						<uv-icon name="scan" size="30rpx" color="#3B5CF0"></uv-icon>
						<text>店铺二维码</text>
					</view>
				</view>
			</view>
		
			<view class="dynamics" 
			v-html="$utils.stringFormatHtml(detail.title)">
			</view>
		
			<view class="Artworkimages">
				<view class="wrokimg" @click.stop="previewImage(detail.detailsImage, i)" :key="i"
					v-for="(img, i) in detail.detailsImage">
					<image :src="img" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	
		<!-- 评论组件 -->
		<commentList 
		v-if="tagIndex == 2"
		@getData="getData"
		:list="list"
		:params="params"
		/>
		
	</view>
</template>

<script>
	import mixinsSex from '@/mixins/sex.js'
	import mixinsList from '@/mixins/list.js'
	import commentList from '../components/list/comment/commentList.vue'
	// import goodList from '../components/list/gourmet/goodList.vue'
	import productSelectList from '../components/list/gourmet/productSelectList.vue'
	import productList from '@/components/user/productList.vue'
	export default {
		mixins: [mixinsSex, mixinsList],
		components: {
			commentList,
			productSelectList,
			productList,
		},
		data() {
			return {
				category : [
					{
						name : '美食商城',
						value : 0,
					},
					{
						name : '店铺介绍',
						value : 1,
					},
					{
						name : '店铺评论',
						value : 2,
					},
				],
				detail: {},
				// mixinsListApi : 'getCommentPage',//评论
				mixinsListApi : 'getGoodsList',//美食
				params : {
					type : '4',
					orderId : '',
					name : '',
				},
				id : 0,
				tagIndex : 0,
			}
		},
		onLoad(options) {
			// this.$route.query的参数
			console.log(options)
			this.id = options.id
			
			this.queryParams.type = this.params.type
			this.queryParams.orderId = options.id
			this.params.orderId = options.id
			
			this.queryParams.shopId = options.id
			
			// 设置分享路径
			this.share.path = '/pages_order/gourmet/gourmetDetail?id=' + this.id
		},
		onPullDownRefresh() {
			this.getDetail()
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			// 跳转到二维码页面
			goToQrCode() {
				uni.navigateTo({
					url: `/pages_order/gourmet/qrCode?id=${this.id}`
				});
			},
			tabsClick(item) {
				this.tagIndex = item.value
				
				if(this.tagIndex == 0){
					this.list = []
					this.mixinsListApi = 'getGoodsList'
				}else if(this.tagIndex == 2){
					this.list = []
					this.mixinsListApi = 'getCommentPage'
				}
				
				this.getData()
			},
			getDetail() {
				this.$api('getStoreDetail', {
					id: this.id
				}, res => {
					uni.stopPullDownRefresh()
					if (res.code == 200) {
						
						this.params.name = res.result.title
						
						// res.result.image =
						// res.result.image ?
						// res.result.image.split(',') : [],
						
						
						res.result.detailsImage = 
						res.result.detailsImage ? 
						res.result.detailsImage.split(',') : [],
						
						// res.result.details = 
						// res.result.details ? 
						// res.result.details.split(',') : []

						this.detail = res.result
						
						// 设置分享信息
						this.share.title = res.result.title || '美食详情'
						this.share.imageUrl = this.$utils.getImageOne(res.result.logoImage)
					}
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.postDetail {
		padding-bottom: calc(env(safe-area-inset-bottom) + 200rpx);
		.box {
			display: flex;
			align-items: center;
		
			.headPortraitimg {
				width: 100rpx;
				height: 100rpx;
				border-radius: 15rpx;
				overflow: hidden;
		
				image {
					width: 100%;
					height: 100%;
				}
			}
		
			.YaoduUniversalWall {
				padding: 0rpx 10rpx;
		
				.Times {
					display: flex;
					padding: 5rpx 0rpx;
					font-size: 20rpx;
					margin-top: 10rpx;
		
					.Month {
						margin: 0rpx 15rpx;
					}
				}
		
			}
		}
		.works {
			background-color: #fff;
			padding: 40rpx;
			border-radius: 20rpx;

			.personalInformation {
				display: flex;

				.inde {
					font-size: 25rpx;
					padding: 0rpx 8rpx;
				}

				.authentication {
					font-size: 25rpx;
				}
			}


			
			.bottom {
				display: flex;
				margin-top: 20rpx;
				font-size: 24rpx;

				.browse {
					margin: 0rpx 30rpx;
					color: rgb(132, 132, 132);
				}

				.Leavingamessage {
					margin-left: auto;
					display: flex;
					align-items: center;
				}
			}
		}
		
		.LabelOptions{
			background-color: #fff;
		}
		
		.goodList{
			// padding: 0 20rpx;
		}
		
		.goodInfo{
			margin: 20rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 30rpx;
			
			.qrcode-btn {
				display: flex;
				align-items: center;
				background-color: #f0f5ff;
				padding: 10rpx 20rpx;
				border-radius: 30rpx;
				margin-top: 15rpx;
				
				text {
					font-size: 24rpx;
					color: #3B5CF0;
					margin-left: 10rpx;
				}
			}
			.dynamics {
				margin-top: 20rpx;
				font-size: 28rpx;
				letter-spacing: 3rpx;
			}
			.Artworkimages {
				display: flex;
				flex-wrap: wrap;
			
				.wrokimg {
					margin: 10rpx;
			
					image {
						height: 190rpx;
						width: 190rpx;
						border-radius: 20rpx;
					}
				}
			}
		}
	}
</style>