Huanyuyuehui/pages/shop_details/index.vue

265 lines
6.3 KiB
Vue
Raw Normal View History

2024-03-24 12:37:22 +08:00
<template>
2024-03-25 10:35:25 +08:00
<view class="shop_details" :style="viewColor">
2024-03-24 12:37:22 +08:00
<view class="head">
<swipers :imgUrls="shopInfo.swiper_image"></swipers>
2024-03-24 15:28:42 +08:00
<view class="back" @tap="toRouter"><i class="iconfont icon-xiangzuo"></i></view>
2024-03-24 12:37:22 +08:00
</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">
2024-03-25 10:35:25 +08:00
<text class="iconfont icon-shitixing"></text>
2024-03-24 12:37:22 +08:00
<text>评分4.5</text>
</view>
<view class="desc">位置好找菜味道不错价格实惠</view>
2024-03-25 10:35:25 +08:00
<view class="site" @tap="openMap">
<view>
<text class="iconfont icon-dingwei"></text>
<text>北京市东城区朝阳门内大街特色</text>
</view>
<view class="iconfont icon-jiantou"></view>
</view>
2024-03-24 12:37:22 +08:00
</view>
</view>
<view class="business">
<view class="business_one">营业中</view>
<view class="business_one">
<text>周一到周日</text>
<text>0900 - 2200</text>
</view>
2024-03-25 10:35:25 +08:00
<view>可提供:</view>
2024-03-24 12:37:22 +08:00
<view class="business_list">
<text>WiFi</text>
<text>充电宝</text>
<text>停车场</text>
<text>茶水</text>
<text>饮料</text>
</view>
</view>
<view class="tabs">
<view class="tabs_nav">
2024-03-24 15:28:42 +08:00
<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>
2024-03-24 12:37:22 +08:00
</view>
</view>
</view>
2024-03-24 15:28:42 +08:00
<view class="btn" @tap="handlePay">去付款</view>
2024-03-24 12:37:22 +08:00
</view>
</template>
<script>
import swipers from '@/components/swipers';
2024-03-24 15:28:42 +08:00
import parser from "@/components/jyf-parser/jyf-parser";
2024-03-25 10:35:25 +08:00
import { mapGetters } from "vuex";
2024-03-24 12:37:22 +08:00
export default {
2024-03-24 15:28:42 +08:00
components:{swipers,"jyf-parser": parser},
2024-03-24 12:37:22 +08:00
data(){
return {
shopInfo:{
2024-03-24 15:28:42 +08:00
swiper_image:[{img:'/static/images/shop_bg.png'}],
},
tabList:[{name:'商家信息'}],
actIndex:0
2024-03-24 12:37:22 +08:00
}
},
2024-03-25 10:35:25 +08:00
computed:{
...mapGetters(['viewColor'])
},
2024-03-24 12:37:22 +08:00
methods:{
2024-03-24 15:28:42 +08:00
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({
2024-03-24 17:43:25 +08:00
latitude: Number(22.541211),
longitude: Number(114.118052),
name: '深房广场',
address: '鲜果自由,等你来哈',
// scale:8,
2024-03-24 15:28:42 +08:00
success: function () {
console.log('success');
},
fail: function (error) {
console.log('error', error);
}
});
},
2024-03-24 12:37:22 +08:00
}
}
</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;
2024-03-25 10:35:25 +08:00
width:100%;
2024-03-24 12:37:22 +08:00
.txt{
font-size: 32rpx;
color: #333333;
}
.grade,.desc,.site{
font-size: 24rpx;
margin-top: 8rpx;
}
.grade{
color: #FE8C16;
2024-03-25 10:35:25 +08:00
&>:first-child{
margin-right: 8rpx;
}
2024-03-24 12:37:22 +08:00
}
.desc{
color: #4E4E4E;
}
.site{
color: #999999;
2024-03-25 10:35:25 +08:00
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;
}
}
2024-03-24 12:37:22 +08:00
}
}
}
.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;
2024-03-25 10:35:25 +08:00
// color: var(--view-theme);
// border: #1372F5 1px solid;
color: var(--view-theme);
border: var(--view-theme) 1px solid;
2024-03-24 12:37:22 +08:00
border-radius: 8rpx;
padding: 0 16rpx;
&:not(:first-child){
margin-left: 20rpx;
}
}
}
}
.tabs{
margin-top: 40rpx;
&_nav{
display: flex;
flex-direction: row;
}
&_item{
2024-03-24 15:28:42 +08:00
font-size: 32rpx;
color: #999;
2024-03-24 12:37:22 +08:00
& + .tabs_item{
margin-left: 68rpx;
}
}
2024-03-24 15:28:42 +08:00
.active{
color: #333;
}
2024-03-24 12:37:22 +08:00
}
2024-03-24 15:28:42 +08:00
.conter{
margin-top: 28rpx;
.product_content{
color: #666;
}
}
}
.btn{
position: fixed;
bottom: 30rpx;
width: 80%;
height: 92rpx;
2024-03-25 10:35:25 +08:00
background-image: linear-gradient(90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
2024-03-24 15:28:42 +08:00
border-radius: 60rpx;
text-align: center;
line-height: 92rpx;
color: #fff;
left: 50%;
transform: translateX(-50%);
2024-03-24 12:37:22 +08:00
}
}
</style>