Huanyuyuehui/pages/shop_details/index.vue

356 lines
9.6 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>