Huanyuyuehui/pages/shop_details/index.vue

231 lines
5.3 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="shop_details">
<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>评分4.5</text>
</view>
<view class="desc">位置好找菜味道不错价格实惠</view>
<view class="site" @tap="openMap">北京市东城区朝阳门内大街···</view>
</view>
</view>
<view class="business">
<view class="business_one">营业中</view>
<view class="business_one">
<text>周一到周日</text>
<text>0900 - 2200</text>
</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";
export default {
components:{swipers,"jyf-parser": parser},
data(){
return {
shopInfo:{
swiper_image:[{img:'/static/images/shop_bg.png'}],
},
tabList:[{name:'商家信息'}],
actIndex:0
}
},
methods:{
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(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">
.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;
.txt{
font-size: 32rpx;
color: #333333;
}
.grade,.desc,.site{
font-size: 24rpx;
margin-top: 8rpx;
}
.grade{
color: #FE8C16;
}
.desc{
color: #4E4E4E;
}
.site{
color: #999999;
}
}
}
.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: #1372F5;
border: #1372F5 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: #1372F5;
border-radius: 60rpx;
text-align: center;
line-height: 92rpx;
color: #fff;
left: 50%;
transform: translateX(-50%);
}
}
</style>