Huanyuyuehui/pages/shop_details/index.vue

<template>
	<view class="shop_details" :style="viewColor">
		<view class="head">
			<swipers :imgUrls="shopInfo.detail.images"></swipers>
			<view class="back" @tap="toRouter"><i class="iconfont icon-xiangzuo"></i></view>
		</view>
		<view class="main">
			<view class="title">
				<view class="title_left">
					<image :src="shopInfo.mer_avatar" mode=""></image>
				</view>
				<view class="title_right">
					<view class="txt">{{shopInfo.mer_name}}</view>
					<view class="grade">
						<text class="iconfont icon-shitixing"></text>
						<text>评分{{shopInfo.service_score}}分</text>
					</view>
					<view class="desc">商家承诺：{{shopInfo.detail.promise?shopInfo.detail.promise:'啥也没有留下'}}</view>
					<view class="site" @tap="openMap">
						<view>
							<text class="iconfont icon-dingwei"></text>
							<text>{{shopInfo.mer_address}}</text>
						</view>
						<view class="iconfont icon-jiantou"></view>
					</view>
				</view>
			</view>
			<view class="business">
				<view class="business_one">营业中</view>
				<view class="business_one">
					<text>周一到周日</text>
					<text>{{shopInfo.config.mer_take_time.join('-')}}</text>
				</view>
				<view>可提供:</view>
				<view class="business_list" >
					<text v-for="(item,index) in shopInfo.detail.services">{{item}}</text>
				</view>
			</view>
			<view class="tabs">
				<view class="tabs_nav">
					<view class="tabs_item" v-for="(item,index) in tabList" :class="actIndex==index?'active':''" @tap='handleTab(index)'>{{item.name}}</view>
				</view>
				<view class='conter'>
					<!-- #ifndef APP-PLUS -->
					<!-- <jyf-parser v-if="description.type == 0" :domain='domain' :html="description.content.replace(/<br\/>/ig, '')" ref="article" :tag-style="tagStyle"></jyf-parser> -->
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<!-- <view v-if="description.type == 0" class="description" v-html="description.content.replace(/<br\/>/ig, '')"></view> -->
					<!-- #endif -->
					<view class="product_content" v-html="shopInfo.detail.detail"></view>
					<!-- <view class="product_content">
						欢迎来到我们的火锅店！我们是一个有着悠久历史和传统美食文化的品牌，我们的火锅是采用新鲜的食材和秘制的调料烹饪而成，每一口都充满了浓郁的鲜香和醇厚的口感。
					</view>
					<view class="product_content">
						我们的品牌特色在于选用上等食材，如草原鲜嫩肥羊、天然海鲜等，以及秘制香料和特色锅底。店内环境优雅舒适，服务周到细致，为您打造一处独具特色的火锅天地。
					</view> -->
				</view>
			</view>
		</view>
		<view class="btn" @tap="handlePay">去付款</view>
	</view>
</template>

<script>
	import swipers from '@/components/swipers';
	import parser from "@/components/jyf-parser/jyf-parser";
	import { mapGetters } from "vuex";
	import {shopDetail} from '@/api/shop.js'
	export default {
		components:{swipers,"jyf-parser": parser},
		data(){
			return {
				shopInfo:{
					swiper_image:[{img:'/static/images/shop_bg.png'}],
				},
				week:['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				tabList:[{name:'商家信息'}],
				actIndex:0,
				id:0,
				shopInfo:{}
			}
		},
		computed:{
			...mapGetters(['viewColor'])
		},
		onLoad(option){
			this.id=option.id;
			this.init();
		},
		methods:{
			init(){
				shopDetail({id:this.id}).then((res)=>{
					if(res){
						this.shopInfo=res.data
						console.log('res: ',res);
					}
				})
			},
			handleTab(i){
				this.actIndex = i
			},
			handlePay(){
				// 从相机和相册扫码
				// #ifdef APP-PLUS
				uni.scanCode({
					scanType:['qrCode'],
					success: function (res) {
						console.log('二维码信息：' + res);
					}
				});
				// #endif
			},
			toRouter(){
				uni.navigateBack()
			},
			openMap() {
				uni.openLocation({
					latitude: Number(this.shopInfo.lat),
					longitude: Number(this.shopInfo.long),
					name: this.shopInfo.mer_name,
					address: this.shopInfo.mer_info,
					// scale:8,
					success: function () {
						console.log('success');
					},
					fail: function (error) {
						console.log('error', error);
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.shop_details{
		font-family: PingFang SC;
		.head{
			position: relative;
			.back{
				position: absolute;
				top: 88rpx;
				left: 40rpx;
				color: #fff;
				.iconfont{
					font-size: 40rpx;
				}
			}
		}
		.main{
			position: relative;
			height: calc(100vh - 400rpx);
			background: #fff;
			margin-top: -40rpx;
			border-radius: 32rpx 32rpx 0 0;
			padding: 28rpx;
			.title{
				display: flex;
				flex-direction: row;
				
				.title_left{
					image{
						width: 160rpx;
						height: 160rpx;
						border-radius: 12rpx;
					}
				}
				.title_right{
					margin-left: 10rpx;
					width:100%;
					.txt{
						font-size: 32rpx;
						color: #333333;
					}
					.grade,.desc,.site{
						font-size: 24rpx;
						margin-top: 8rpx;
					}
					.grade{
						color: #FE8C16;
						&>:first-child{
							margin-right: 8rpx;
						}
					}
					.desc{
						color: #4E4E4E;
					}
					.site{
						color: #999999;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 24rpx;
						.iconfont{
							font-size: 24rpx;
						}
						&>:first-child{
							max-width: 320rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							&>:first-child{
								margin-right: 8rpx;
							}
						}
					}
				}
			}
			.business{
				margin-top: 40rpx;
				background-color: rgba(236, 239, 244, 0.84);
				border-radius: 16rpx;
				padding: 24rpx;
				&_one{
					font-size: 28rpx;
					&:nth-child(1){
						color: #333333;
					}
					&:nth-child(2){
						margin-top: 12rpx;
						color: #999;
					}
				}
				&_list{
					margin-top: 12rpx;
					text{
						font-size: 24rpx;
						// color: var(--view-theme);
						// border: #1372F5 1px solid;
						color: var(--view-theme);
						border: var(--view-theme) 1px solid;
						border-radius: 8rpx;
						padding: 0 16rpx;
						&:not(:first-child){
							margin-left: 20rpx;
						}
					}
				}
			}
			.tabs{
				margin-top: 40rpx;
				&_nav{
					display: flex;
					flex-direction: row;
				}
				&_item{
					font-size: 32rpx;
					color: #999;
					& + .tabs_item{
						margin-left: 68rpx;
					}
				}
				.active{
					color: #333;
				}
			}
			.conter{
				margin-top: 28rpx;
				.product_content{
					color: #666;
				}
			}
		}
		.btn{
			position: fixed;
			bottom: 30rpx;
			width: 80%;
			height: 92rpx;
			background-image: linear-gradient(90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
			border-radius: 60rpx;
			text-align: center;
			line-height: 92rpx;
			color: #fff;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>