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 12:22:28 +08:00
parent e608382075
commit c66fac5992
4 changed files with 267 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg_product/views/experienceCoupon.vue
+138 -64
View File
@@ -22,7 +22,9 @@ export default {
{ id: 'all', name: '全部体验' }
],
activeCategoryId: 'all',
experienceList: []
experienceList: [],
userLatitude: null,
userLongitude: null
}
},
computed: {
@@ -56,10 +58,51 @@ export default {
return value
},
initPage() {
this.getUserLocation()
this.fetchExperienceCoupon()
this.fetchCouponList()
this.fetchCategoryList()
},
getUserLocation() {
uni.getLocation({
type: 'gcj02',
success: (res) => {
this.userLatitude = res.latitude
this.userLongitude = res.longitude
this.updateDistances()
},
fail: (err) => {
console.error('获取位置失败', err)
}
})
},
updateDistances() {
if (!this.experienceList.length || !this.userLatitude || !this.userLongitude) {
return
}
this.experienceList = this.experienceList.map(item => {
if (item.latitude && item.longitude) {
return {
...item,
distance: this.calculateDistance(this.userLatitude, this.userLongitude, item.latitude, item.longitude)
}
}
return item
})
},
calculateDistance(lat1, lon1, lat2, lon2) {
if (!lat1 || !lon1 || !lat2 || !lon2) return ''
const R = 6371 // 地球半径 km
const dLat = (lat2 - lat1) * Math.PI / 180
const dLon = (lon2 - lon1) * Math.PI / 180
const a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
Math.sin(dLon / 2) * Math.sin(dLon / 2)
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
const d = R * c
return d.toFixed(1) + 'km'
},
setActiveCoupon(coupon) {
if (!coupon) {
return
@@ -130,17 +173,28 @@ export default {
}
getExperienceCouponItems(params).then(({ data }) => {
const list = data || []
this.experienceList = list.map(item => ({
id: item.id != null ? item.id : (item.projectId != null ? item.projectId : item.merId),
title: item.name || '',
subTitle: item.projectName || item.intro || '',
distance: item.cityName && item.areaName ? `${item.cityName}${item.areaName}` : '',
businessTime: item.serviceTime && item.serviceEndTime ? `${item.serviceTime}-${item.serviceEndTime}` : (item.serviceTime || ''),
tags: item.intro || '',
categoryId: this.activeCategoryId === 'all' ? 'all' : this.activeCategoryId,
image: item.image || item.cover || '',
selected: false
}))
this.experienceList = list.map(item => {
const lat = Number(item.latitude || 0)
const lon = Number(item.longitude || 0)
let distance = ''
if (this.userLatitude && this.userLongitude && lat && lon) {
distance = this.calculateDistance(this.userLatitude, this.userLongitude, lat, lon)
}
return {
id: item.id != null ? item.id : (item.projectId != null ? item.projectId : item.merId),
title: item.name || '',
subTitle: item.projectName || item.intro || '',
distance,
latitude: lat,
longitude: lon,
businessTime: item.serviceTime && item.serviceEndTime ? `${item.serviceTime}-${item.serviceEndTime}` : (item.serviceTime || ''),
tags: item.intro || '',
categoryId: this.activeCategoryId === 'all' ? 'all' : this.activeCategoryId,
image: item.image || item.cover || '',
selected: false
}
})
}).catch(() => {
this.experienceList = []
})
@@ -236,21 +290,26 @@ export default {
mode="aspectFill"
/>
<view class="header-mask" />
<view class="header-blur-transition" />
<view class="header-content">
<view
<scroll-view
v-if="couponList.length > 1"
class="coupon-tabs"
scroll-x
class="coupon-tabs-scroll"
:show-scrollbar="false"
>
<view
v-for="(coupon, index) in couponList"
:key="coupon.id"
class="header-tag-main"
:class="{ active: activeCouponId === coupon.id }"
@click="changeCoupon(coupon)"
>
体验券{{ index + 1}}
<view class="coupon-tabs">
<view
v-for="(coupon, index) in couponList"
:key="coupon.id"
class="header-tag-main"
:class="{ active: activeCouponId === coupon.id }"
@click="changeCoupon(coupon)"
>
体验券{{ index + 1}}
</view>
</view>
</view>
</scroll-view>
<view class="header-main">
<view class="line-info flex ai-center">
@@ -258,7 +317,7 @@ export default {
</view>
<view class="line-status flex ai-center">
<view class="status-pill flex ai-center">
<view class="icon-check" />
<u-icon name="checkmark-circle" color="#fff" size="14" style="margin-left: 6rpx;" />
<text class="status-text">已选清单</text>
<view class="count-badge">{{ selectedCount }}/{{ totalCount }}</view>
</view>
@@ -320,14 +379,16 @@ export default {
<view class="card-title">
{{ item.title }}
</view>
<view class="card-subtitle more-t">
{{ item.subTitle }}
</view>
<view class="card-meta">
<view class="meta-distance">
<view class="icon-location" />
<view class="info-row flex jc-between ai-center">
<view class="card-subtitle more-t">
{{ item.subTitle }}
</view>
<view class="meta-distance" v-if="item.distance">
<u-icon name="map" color="#999" size="14" style="margin-right: 4rpx;" />
<text>距该地{{ item.distance }}</text>
</view>
</view>
<view class="card-meta">
<text class="meta-time">营业时间：{{ item.businessTime }}</text>
</view>
<view class="card-footer flex jc-center ai-center">
@@ -336,15 +397,17 @@ export default {
:class="{ selected: item.selected }"
@click.stop="toggleSelect(item)"
>
{{ item.selected ? '取消选择' : '立即选择' }}
<view v-if="item.selected" class="icon-check-circle" />
{{ item.selected ? '取消选择' : '选择' }}
<view v-if="item.selected" class="check-icon-wrapper">
<u-icon name="checkmark" color="#C52733" size="14" bold />
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="bottom-bar">
<view class="bottom-bar" v-if="selectedCount > 0">
<view
v-if="remainCount > 0"
class="bottom-group flex jc-between ai-center"
@@ -407,12 +470,10 @@ export default {
left: 0;
right: 0;
bottom: 0;
height: 120rpx;
background: linear-gradient(to bottom, rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 0.8) 60%, #f5f5f5 100%);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 2;
height: 200rpx; /* 增加过渡高度让渐变更平缓 */
background: linear-gradient(to bottom, rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 0.4) 40%, rgba(245, 245, 245, 0.8) 70%, #f5f5f5 100%);
pointer-events: none;
z-index: 2;
}
.header-content {
position: absolute;
@@ -421,6 +482,7 @@ export default {
top: 0;
bottom: 0;
padding: 32rpx;
padding-bottom: 120rpx; /* 为下方内容上移留出空间 */
box-sizing: border-box;
color: #fff;
display: flex;
@@ -436,6 +498,7 @@ export default {
color: #333;
font-size: 28rpx;
border-radius: 40rpx;
flex-shrink: 0;
}
.header-tag-main.active {
background: #C52733;
@@ -445,11 +508,16 @@ export default {
.header-main {
margin-bottom: 20rpx;
}
.coupon-tabs-scroll {
width: 100%;
white-space: nowrap;
margin-bottom: 20rpx;
}
.coupon-tabs {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
margin-bottom: 20rpx;
padding-right: 24rpx;
flex-wrap: nowrap;
}
.coupon-tab-item {
padding: 8rpx 24rpx;
@@ -547,7 +615,7 @@ export default {
.content {
padding: 0 24rpx;
margin-top: -20rpx;
margin-top: -120rpx; /* 将下方内容整体上移，覆盖在渐变区域上 */
position: relative;
z-index: 4;
}
@@ -606,17 +674,23 @@ export default {
.card-subtitle {
font-size: 22rpx;
color: #999;
flex: 1;
min-width: 0;
margin-right: 16rpx;
}
.info-row {
margin-bottom: 8rpx;
}
.card-meta {
font-size: 22rpx;
color: #666;
margin-bottom: 16rpx;
}
.meta-distance {
display: flex;
align-items: center;
margin-bottom: 4rpx;
color: #999;
flex-shrink: 0;
font-size: 22rpx;
}
.icon-location {
width: 20rpx;
@@ -639,6 +713,8 @@ export default {
}
.meta-time {
display: block;
color: #333;
font-weight: 500;
}
.card-footer {
margin-top: 12rpx;
@@ -648,36 +724,34 @@ export default {
height: 64rpx;
border-radius: 32rpx;
font-size: 26rpx;
color: #C52733;
border: 1rpx solid #C52733;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
&.selected {
background: #C52733;
color: #fff;
}
position: relative;
background: #C52733;
color: #fff;
}
.icon-check-circle {
width: 24rpx;
height: 24rpx;
.check-icon-wrapper {
position: absolute;
right: -8rpx;
top: -8rpx;
background: #fff;
border-radius: 50%;
margin-left: 8rpx;
position: relative;
}
.icon-check-circle::after {
content: '';
position: absolute;
left: 7rpx;
top: 5rpx;
width: 8rpx;
height: 4rpx;
border-left: 2rpx solid #C52733;
border-bottom: 2rpx solid #C52733;
transform: rotate(-45deg);
width: 28rpx;
height: 28rpx;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
/* 缺口在图标的左下角方向 (225deg左右设为透明) */
background: linear-gradient(#fff, #fff) padding-box,
conic-gradient(from 225deg, transparent 0deg 90deg, #C52733 90deg 360deg) border-box;
border: 2rpx solid transparent;
box-shadow: 0 0 0 2rpx #fff; /* 外层白边 */
}
/* 移除之前的伪元素遮挡方案 */
.bottom-bar {
position: fixed;
pkg_product/views/experienceCouponOrderDetail.vue
+5 -6
View File
@@ -2,8 +2,8 @@
<view class="coupon-order-detail">
<view class="status-banner" :class="{ 'completed': isCompleted || isExpired }">
<view v-if="isCompleted">
<view class="status-text dark-text">已完成</view>
<view class="status-subtext">期待再次光临</view>
<view class="status-text v12-white-text">已完成</view>
<view class="status-subtext v12-white-text">期待再次光临</view>
</view>
<view v-else-if="isExpired">
<view class="status-text dark-text">已过期</view>
@@ -39,10 +39,10 @@
<view class="merchant-info">
<view class="merchant-name-large">{{ orderInfo.experienceItemInfo && orderInfo.experienceItemInfo.themeName ? orderInfo.experienceItemInfo.themeName : '' }}</view>
<view class="merchant-time one-t" v-if="formattedBusinessTime">营业时间：{{ formattedBusinessTime }}</view>
<view class="merchant-location-wrap">
<view class="merchant-location-wrap one-t">
<image :src="webUrl + '/orderIcon/map.png'" class="location-icon" />
<text class="distance-text" v-if="distanceText">距该地{{ distanceText }}km</text>
<text class="address-text one-t">{{ orderInfo.address }}</text>
<text class="address-text">{{ orderInfo.address }}</text>
</view>
</view>
<view class="merchant-actions">
@@ -92,7 +92,7 @@
<view class="bottom-bar" v-if="isCompleted || isExpired">
<view class="home-btn" @click="goHome">
<image :src="webUrl + '/orderIcon/home.png'" class="home-icon" />
<u-icon name="home" color="#C52733" size="38rpx" class="home-icon"></u-icon>
<text>返回主页</text>
</view>
</view>
@@ -419,7 +419,6 @@ export default {
align-items: center;
font-size: 24rpx;
color: #999;
padding-right: 160rpx;
}
.location-icon {
pkg_product/views/sojoumOrderDetails.vue
+120 -3
View File
@@ -75,7 +75,6 @@
</view>
</view>
<!-- 商家电话弹窗 -->
<u-popup :show="showPhonePopup" mode="center" round="10" :safe-area-inset-bottom="false">
<view class="phone-popup">
<view class="phone-title">{{ title }}</view>
@@ -98,6 +97,21 @@
</view>
</u-popup>
<u-popup :show="showExperienceCouponPopup" bgColor="transparent" mode="center" round="10" :safe-area-inset-bottom="false">
<image class="" :src="webUrl + '/tiyan.png'" mode="widthFix" lazy-load="false">
</image>
<!-- <view class="experience-popup">
<view class="experience-title">体验券提醒</view>
<view class="experience-content">您有可领取的体验券，可前往体验券页面领取。</view>
</view> -->
<view class="experience-actions v12-align-center">
<view class="v12-font-28 v12-dark-border v12-radius-100 v12-px-2 close-btn" @click="showExperienceCouponPopup = !showExperienceCouponPopup">暂不领取</view>
<view class="v12-font-28 v12-primary-text v12-primary-border v12-radius-100 v12-px-2 go-btn" @click="goExperienceCoupon">去领取体验券</view>
</view>
</u-popup>
<!-- 联系人信息 -->
<view class="contact-section" v-if="orderInfo.realName && orderInfo.userPhone">
<view class="section-title v12-font-28 v12-font-bold">联系人信息</view>
@@ -204,6 +218,7 @@
<script>
import { fetchSojoumOrderDetail,sojoumOrderCheckInTime, sojoumOrderCalendar } from "@/api/sojoumOrder";
import { checkExperienceCoupon } from '@/api/product'
import DateRangePicker from '@/components/DateRangePicker/DateRangePicker.vue'
export default {
components: {
@@ -223,17 +238,22 @@ export default {
merchantPhone: '' // 添加商家电话字段
},
showPhonePopup: false, // 控制电话弹窗显示
isView: 0
isView: 0,
showExperienceCouponPopup: false,
experienceCouponId: null,
experienceCouponTimer: null
}
},
onLoad(otps) {
this.key = otps.id;
this.isView = otps.isView || 0;
this.getSojoumOrderDetail();
},
onShow() {
this.getSojoumOrderDetail();
},
onUnload() {
this.stopExperienceCouponPolling();
},
methods: {
handleDateRangeChange(dates) {
// if (dates && dates.length === 2) {
@@ -316,9 +336,52 @@ export default {
if (res.status === 200) {
this.orderInfo = res.data;
this.orderInfo.minBookingDays = this.getDaysCount();
this.startExperienceCouponPolling();
uni.hideLoading();
}
},
startExperienceCouponPolling() {
this.stopExperienceCouponPolling();
const statusType = this.orderInfo && this.orderInfo._status && this.orderInfo._status._type;
// if (![1, 2].includes(Number(statusType))) {
// return;
// }
this.checkExperienceCouponStatus();
this.experienceCouponTimer = setInterval(() => {
this.checkExperienceCouponStatus();
}, 5000);
},
stopExperienceCouponPolling() {
if (this.experienceCouponTimer) {
clearInterval(this.experienceCouponTimer);
this.experienceCouponTimer = null;
}
},
async checkExperienceCouponStatus() {
const orderId = this.orderInfo && this.orderInfo.orderId ? this.orderInfo.orderId : this.key;
if (!orderId) {
return;
}
try {
const res = await checkExperienceCoupon({ orderId });
if (!res || res.status !== 200) {
return;
}
const data = res.data || {};
const hasExperienceCoupon = Number(data.hasExperienceCoupon || 0);
const showPopup = Number(data.showPopup || 0);
if (!hasExperienceCoupon) {
return;
}
if (!showPopup) {
return;
}
this.stopExperienceCouponPolling();
this.experienceCouponId = data.couponId || null;
this.showExperienceCouponPopup = true;
} catch (e) {
}
},
/**
* 格式化日期
* @param {string} dateStr - 格式为 yyyy-MM-dd 的日期字符串
@@ -408,6 +471,17 @@ export default {
}
})
},
goExperienceCoupon() {
this.showExperienceCouponPopup = false;
const couponId = this.experienceCouponId;
let url = '/pkg_product/views/experienceCoupon';
if (couponId) {
url += `?couponId=${couponId}`;
}
uni.navigateTo({
url
})
},
// 显示电话弹窗
showPhoneDialog(type) {
if (!this.orderInfo.merPhone && type === 'phone') {
@@ -451,6 +525,18 @@ export default {
</script>
<style lang="scss" scoped>
.close-btn{
width: 274rpx;
margin-right: 30rpx;
height: 52rpx;
opacity: 0;
}
.go-btn{
height: 52rpx;
margin-right: 10rpx;
opacity: 0;
}
.status-section,.product-section,.verify-section {
border-radius: 20rpx;
}
@@ -549,6 +635,37 @@ export default {
}
}
.experience-popup {
padding: 40rpx 50rpx;
border-radius: 20rpx;
background-color: #fff;
width: 560rpx;
box-sizing: border-box;
}
.experience-title {
font-size: 32rpx;
font-weight: bold;
text-align: center;
margin-bottom: 20rpx;
color: #333;
}
.experience-content {
font-size: 28rpx;
color: #666;
text-align: center;
margin-bottom: 40rpx;
}
.experience-actions {
position: absolute;
bottom: 60rpx;
width: 100%;
justify-content: center;
display: flex;
}
.contact-section,
.order-section {
background-color: #fff;