Huanyuyuehui/pages/shop_details/index.vue

<template>
	<view class="shop_details" :style="viewColor">
		<view class="head">
			<swipers :imgUrls="shopInfo.swiper_image"></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="@/static/images/shop_bg.png" mode=""></image>
				</view>
				<view class="title_right">
					<view class="txt">特色餐厅(朝阳总店)</view>
					<view class="grade">
						<text class="iconfont icon-shitixing"></text>
						<text>评分4.5分</text>
					</view>
					<view class="desc">商家承诺:</view>
					<view class="site" @tap="openMap">
						<view>
							<text class="iconfont icon-dingwei"></text>
							<text>北京市东城区朝阳门内大街特色</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>09：00 - 22：00</text>
				</view>
				<!-- <view class="iconfont icon-dianhua"></view> -->
				<view class="business_one">
					<view>
						商家电话：15834567081
					</view>
					<text class="copy" @tap="setCopy(15834567081)">复制</text>
				</view>
				<view class="business_list">可提供：</view>
				<view class="business_list">
					<text>WiFi</text>
					<text>充电宝</text>
					<text>停车场</text>
					<text>茶水</text>
					<text>饮料</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">
						欢迎来到我们的火锅店！我们是一个有着悠久历史和传统美食文化的品牌，我们的火锅是采用新鲜的食材和秘制的调料烹饪而成，每一口都充满了浓郁的鲜香和醇厚的口感。
					</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";
	export default {
		components:{swipers,"jyf-parser": parser},
		data(){
			return {
				shopInfo:{
					swiper_image:[{img:'/static/images/shop_bg.png'}],
				},
				tabList:[{name:'商家信息'}],
				actIndex:0
			}
		},
		computed:{
			...mapGetters(['viewColor'])
		},
		methods:{
			handleTab(i){
				this.actIndex = i
			},
			setCopy(content) {
				// 该方法不支持h5
				//#ifndef APP-PLUS
				uni.setClipboardData({
					data: String(content), // 必须字符串
					success: function() {
						console.log('success');
					}
				});
				//#endif
			
				// h5端赋值方法，使用创建节点
				// #ifdef H5
				if (!document.queryCommandSupported('copy')) { // 兼容某些浏览器的判断
					console.log('该浏览器不支持')
				}
				let textarea = document.createElement("textarea")
				textarea.value = content
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选择对象
				textarea.setSelectionRange(0, content.length) // 核心
				let result = document.execCommand("copy") // 执行浏览器复制命令
				if (result) {
					uni.showToast({
						title: '复制成功',
						duration: 2000,
						icon:'none'
					});
				}
				textarea.remove()
				// #endif
			},
			handlePay(){
				// 从相机和相册扫码
				// #ifdef APP-PLUS
				uni.scanCode({
					scanType:['qrCode'],
					success: function (res) {
						console.log('二维码信息：' + res);
					}
				});
				// #endif
			},
			toRouter(){
				uni.navigateBack()
			},
			openMap() {
				uni.openLocation({
					latitude: Number(22.541211),
					longitude: Number(114.118052),
					name: '深房广场',
					address: '鲜果自由，等你来哈',
					// scale:8,
					success: function () {
						console.log('success');
					},
					fail: function (error) {
						console.log('error', error);
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.over {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.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: color-mix(in oklch, var(--view-theme), transparent 90%);
				// opacity: 0.8;
				border-radius: 16rpx;
				padding: 24rpx;
				&_one{
					font-size: 28rpx;
					&:nth-child(1){
						color: #333333;
					}
					&:nth-child(2){
						margin-top: 12rpx;
						color: #999;
					}
					&:nth-child(3){
						margin-top: 12rpx;
						color: #333;
						display: flex;
						justify-content: space-between;
						.copy{
							color: var(--view-theme);
						}
					}
				}
				&_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>