356 lines
9.6 KiB
Vue
356 lines
9.6 KiB
Vue
<template>
|
||
<view class="shop_details" :style="viewColor">
|
||
<view class="head">
|
||
<swipers v-if="shopInfo.detail&&shopInfo.detail.images" :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" v-if="shopInfo.detail&&shopInfo.detail.promise"
|
||
>商家承诺：{{
|
||
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" v-if="shopInfo.config">
|
||
<text v-for="(item, index) in shopInfo.config.mer_take_day">{{
|
||
" " + week[item]
|
||
}}</text>
|
||
</view>
|
||
<view class="business_one" v-if="shopInfo.config">
|
||
<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" v-if="shopInfo.detail">
|
||
<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;
|
||
},
|
||
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);
|
||
},
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.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%);
|
||
}
|
||
}
|
||
</style> |