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;