2024-03-24 12:37:22 +08:00
|
|
|
|
<template>
|
2024-03-26 15:02:49 +08:00
|
|
|
|
<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 v-for="(item, index) in shopInfo.config.mer_take_day">{{
|
|
|
|
|
" " + week[item]
|
|
|
|
|
}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="business_one">
|
|
|
|
|
<text>{{ shopInfo.config.mer_take_time.join("-") }}</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 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">
|
2024-03-24 15:28:42 +08:00
|
|
|
|
欢迎来到我们的火锅店!我们是一个有着悠久历史和传统美食文化的品牌,我们的火锅是采用新鲜的食材和秘制的调料烹饪而成,每一口都充满了浓郁的鲜香和醇厚的口感。
|
|
|
|
|
</view>
|
|
|
|
|
<view class="product_content">
|
|
|
|
|
我们的品牌特色在于选用上等食材,如草原鲜嫩肥羊、天然海鲜等,以及秘制香料和特色锅底。店内环境优雅舒适,服务周到细致,为您打造一处独具特色的火锅天地。
|
2024-03-26 14:48:11 +08:00
|
|
|
|
</view> -->
|
2024-03-26 15:02:49 +08:00
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="btn" @tap="handlePay">去付款</view>
|
|
|
|
|
</view>
|
2024-03-24 12:37:22 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
2024-03-26 15:02:49 +08:00
|
|
|
|
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;
|
|
|
|
|
},
|
|
|
|
|
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(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);
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
2024-03-24 12:37:22 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
2024-03-26 15:02:49 +08:00
|
|
|
|
.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(4) {
|
|
|
|
|
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%);
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-03-24 12:37:22 +08:00
|
|
|
|
</style>
|