278 lines
6.7 KiB
Vue
278 lines
6.7 KiB
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> |