Feat:体验店信息
This commit is contained in:
@@ -25,12 +25,14 @@
|
||||
<view class="store-intro">
|
||||
{{ project.intro }}
|
||||
</view>
|
||||
<view class="store-tags">
|
||||
<view class="time-tag">
|
||||
<view class="time-tag-label">营业时间</view>
|
||||
<view class="time-tag-value">{{ project.serviceTime }}~{{ project.serviceEndTime }}</view>
|
||||
<view class="store-tags" style="display: flex; flex-wrap: wrap; align-items: center;">
|
||||
<view style="display: flex; align-items: center; margin-right: 16rpx; border-radius: 44rpx;">
|
||||
<view style="border-radius: 44rpx 0 0 44rpx;font-size: 24rpx; color: #fff; background-color: #C52733; height: 44rpx; display: flex; align-items: center; padding: 0 20rpx; position: relative; z-index: 1;">营业时间</view>
|
||||
<view style="font-size: 24rpx; color: #333; background-color: #fff; border: 2rpx solid #C52733; border-radius: 44rpx; height: 44rpx; display: flex; align-items: center; padding: 0 20rpx 0 16rpx; box-sizing: border-box; margin-left: -20rpx; position: relative; z-index: 2;">
|
||||
{{ project.serviceTime || '00:00' }}~{{ project.serviceEndTime || '24:00' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="license-tag">营业执照</view>
|
||||
<view class="license-tag" @click="handleViewLicense">营业执照</view>
|
||||
</view>
|
||||
<view class="store-meta">
|
||||
<view class="meta-left">
|
||||
@@ -59,14 +61,20 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section-experience">
|
||||
<view class="experience-badge-wrap">
|
||||
<view class="experience-badge">
|
||||
<u-icon name="diamond-fill" color="#F9D24D" size="18"></u-icon>
|
||||
<view class="experience-badge-wrap">
|
||||
<view class="experience-badge">
|
||||
<view class="badge-diamond">
|
||||
<view class="badge-icon">
|
||||
<u-icon :name="webUrl + '/icon/zuanshi.png'" color="#F9D24D" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="badge-bg">
|
||||
<text class="badge-text">超值体验</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="section-experience">
|
||||
|
||||
<view class="experience-card">
|
||||
<image
|
||||
v-if="project.cover"
|
||||
@@ -106,29 +114,20 @@
|
||||
<text class="dot"></text>
|
||||
<text>{{ project.detailText || '详情信息由商家提供' }}</text>
|
||||
</view>
|
||||
|
||||
<template v-if="project.remark">
|
||||
<view class="section-title" style="margin-top: 24rpx;">备注</view>
|
||||
<view class="section-text with-dot">
|
||||
<text class="dot"></text>
|
||||
<text>{{ project.remark }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<view class="section" v-if="project.remark">
|
||||
<view class="section-title">备注</view>
|
||||
<view class="section-text with-dot">
|
||||
<text class="dot"></text>
|
||||
<text>{{ project.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section" v-if="usageNotice">
|
||||
<view class="section-title">使用须知</view>
|
||||
<view class="section-text with-dot">
|
||||
<text class="dot"></text>
|
||||
<text>有效期: {{ validFrom || '2026年1月1日' }} — {{ validTo || '2026年1月31日' }}</text>
|
||||
</view>
|
||||
<view class="section-text with-dot">
|
||||
<text class="dot"></text>
|
||||
<text>{{ usageNotice || '无需预约,如遇消费高峰时段您可能需要排队' }}</text>
|
||||
</view>
|
||||
<view class="section-text with-dot">
|
||||
<text class="dot"></text>
|
||||
<text>平台温馨提醒:您在到店体验本商品/服务期间,请关注商家的安全提示内容,了解相关注意事项,做好安全防护措施,保护您的安全。</text>
|
||||
<view class="section-content">
|
||||
<u-parse :content="usageNotice"></u-parse>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-space" />
|
||||
@@ -160,7 +159,8 @@ export default {
|
||||
experienceTitle: '',
|
||||
experienceSubTitle: '',
|
||||
detailText: '',
|
||||
remark: ''
|
||||
remark: '',
|
||||
qualification: ''
|
||||
},
|
||||
detailList: [],
|
||||
experienceMerchantId: '',
|
||||
@@ -227,6 +227,7 @@ export default {
|
||||
this.project.longitude = data.longitude || this.project.longitude
|
||||
this.project.phone = data.phone || this.project.phone
|
||||
this.project.wechat = data.wechat || this.project.wechat
|
||||
this.project.qualification = data.qualification || this.project.qualification
|
||||
const project = data.project || {}
|
||||
this.project.experienceTitle = project.themeName || this.project.experienceTitle || this.project.name
|
||||
if (project.themeImage) {
|
||||
@@ -235,6 +236,7 @@ export default {
|
||||
this.project.detailText = project.detail || this.project.detailText
|
||||
this.project.remark = project.remark || this.project.remark
|
||||
this.usageNotice = project.useNotice || this.usageNotice
|
||||
console.log('this.usageNotice', this.usageNotice)
|
||||
if (project.totalPrice != null) {
|
||||
this.totalPrice = project.totalPrice
|
||||
}
|
||||
@@ -284,6 +286,18 @@ export default {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.project.phone
|
||||
})
|
||||
},
|
||||
handleViewLicense() {
|
||||
if (this.project.qualification) {
|
||||
uni.previewImage({
|
||||
urls: [this.project.qualification]
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '暂无营业执照',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -424,34 +438,50 @@ export default {
|
||||
position: relative;
|
||||
}
|
||||
.experience-badge-wrap {
|
||||
position: absolute;
|
||||
top: -24rpx;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
margin-top: 40rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.experience-badge {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(90deg, #E63E48, #C52733);
|
||||
padding: 8rpx 24rpx 8rpx 16rpx;
|
||||
border-radius: 8rpx 32rpx 32rpx 8rpx;
|
||||
position: relative;
|
||||
box-shadow: 0 4rpx 12rpx rgba(197, 39, 51, 0.3);
|
||||
height: 44rpx;
|
||||
}
|
||||
.experience-badge::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -8rpx;
|
||||
border-top: 8rpx solid #901b24;
|
||||
border-left: 8rpx solid transparent;
|
||||
.badge-diamond {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
background: #ffffff;
|
||||
border: 4rpx solid #C52733;
|
||||
transform: rotate(45deg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
margin-left: -14rpx;
|
||||
}
|
||||
.badge-icon {
|
||||
transform: rotate(-45deg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.badge-bg {
|
||||
background: #C52733;
|
||||
border-radius: 0 24rpx 24rpx 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20rpx 0 24rpx;
|
||||
margin-left: -16rpx;
|
||||
}
|
||||
.badge-text {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
margin-left: 8rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
.experience-card {
|
||||
border-radius: 24rpx;
|
||||
|
||||
@@ -42,14 +42,7 @@
|
||||
<view class="v12-align-center v12-primary-border v12-font-22 v12-ml-1 v12-px-2 v12-radius-100 v12-white" style=" white-space: nowrap;height: 100%;">{{ store.serviceTime }} - {{ store.serviceEndTime }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="v12-pa-3 " v-if="store.tags" style="display: flex;flex-wrap: wrap; align-items: center;">
|
||||
<view v-for="value in store.tags.split(',')" :key="value" class="v12-px-2 v12-radius-100 v12-mr-2 v12-mb-2 v12-font-24" style="width: fit-content; border: 2rpx solid #888">{{ value }}</view>
|
||||
</view>
|
||||
<view class="inn-signature-wrap">
|
||||
<view class="triangle"></view>
|
||||
<!-- <view class="inn-signature">
|
||||
{{ store.intro }}
|
||||
</view> -->
|
||||
<view class="inn-signature-wrap" style="margin-top: 0; padding-top: 0;">
|
||||
<view class="share-btn" @click="changeShare">
|
||||
<image :src="webUrl + '/page/hotel/share.png'" class="img" />
|
||||
</view>
|
||||
@@ -331,7 +324,7 @@
|
||||
</view>
|
||||
<view class="info-box">
|
||||
<view class="v12-font-32 v12-font-bold t-one">{{ item.name }}</view>
|
||||
<view class="v12-font-26 v12-dark1-text t-one">{{ item.intro }}</view>
|
||||
<view class="v12-font-26 v12-dark1-text more-t" style="margin-top: 8rpx; margin-bottom: 16rpx; line-height: 1.4;">{{ item.intro }}</view>
|
||||
<view class="bottom-row">
|
||||
<view class="v12-font-20 v12-font-bold">
|
||||
营业时间:{{ item.serviceTime }}~{{ item.serviceEndTime }}
|
||||
|
||||
Reference in New Issue
Block a user