Huanyuyuehui/pages/shop_details/index.vue

320 lines
7.7 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>
2024-03-26 14:47:50 +08:00
<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-26 14:47:50 +08:00
<!-- <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>
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
},
2024-03-26 14:47:50 +08:00
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
},
2024-03-24 15:28:42 +08:00
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">
2024-03-26 14:47:50 +08:00
.over {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
2024-03-24 12:37:22 +08:00
.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;
2024-03-26 14:47:50 +08:00
background-color: color-mix(in oklch, var(--view-theme), transparent 90%);
// opacity: 0.8;
2024-03-24 12:37:22 +08:00
border-radius: 16rpx;
padding: 24rpx;
&_one{
font-size: 28rpx;
&:nth-child(1){
color: #333333;
}
&:nth-child(2){
margin-top: 12rpx;
color: #999;
}
2024-03-26 14:47:50 +08:00
&:nth-child(3){
margin-top: 12rpx;
color: #333;
display: flex;
justify-content: space-between;
.copy{
color: var(--view-theme);
}
}
2024-03-24 12:37:22 +08:00
}
&_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>