liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat：体验店信息

Browse Source
This commit is contained in:
linxi
2026-03-18 15:40:57 +08:00
parent c66fac5992
commit d1413066ac
2 changed files with 80 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg_product/views/experienceProjectDetail.vue
+78 -48
View File
@@ -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;