zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 组件的点击事件的热区优化

Browse Source
This commit is contained in:
zoujing
2025-08-10 20:44:40 +08:00
parent 59a4f5827f
commit 16b8885eb1
5 changed files with 121 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
pages/module/booking/QuickBookingContentList.vue
View File

@@ -2,30 +2,32 @@
<view class="container"> <view class="container">
<ModuleTitle :title="commodityDTO.title" /> <ModuleTitle :title="commodityDTO.title" />
<view class="container-scroll"> <view class="container-scroll">
<view class="mk-card-item" v-for="(item, index) in commodityDTO.commodityList" :key="`${item.commodityId}-${index}`"> <view v-for="(item, index) in commodityDTO.commodityList" :key="`${item.commodityId}-${index}`">
<!-- <view class="card-badge">超值推荐</view> --> <view class="mk-card-item" @click="placeOrderHandle(item)">
<image class="card-img" :src="item.commodityIcon" mode="aspectFill" /> <!-- <view class="card-badge">超值推荐</view> -->
<view class="card-content"> <image class="card-img" :src="item.commodityIcon" mode="aspectFill" />
<view class="card-title-column"> <view class="card-content">
<text class="card-title">{{ item.commodityName }}</text> <view class="card-title-column">
<view class="card-tags" v-for="(tag) in item.commodityTradeRuleList" :key="tag"> <text class="card-title">{{ item.commodityName }}</text>
<text class="card-tag">{{ tag }}</text> <view class="card-tags" v-for="(tag) in item.commodityTradeRuleList" :key="tag">
</view> <text class="card-tag">{{ tag }}</text>
</view> </view>
<template v-for="(serviceItem, index) in item.commodityServices" :key="serviceItem.serviceTitle"> </view>
<view v-if="index < 3" class="card-desc">· {{ serviceItem.serviceTitle }}</view> <template v-for="(serviceItem, index) in item.commodityServices" :key="serviceItem.serviceTitle">
</template> <view v-if="index < 3" class="card-desc">· {{ serviceItem.serviceTitle }}</view>
<view class="card-bottom-row"> </template>
<view class="card-price-row"> <view class="card-bottom-row">
<text class="card-price-fu">￥</text> <view class="card-price-row">
<text class="card-price">{{ item.commodityPrice }}</text> <text class="card-price-fu">￥</text>
<text class="card-unit">/人</text> <text class="card-price">{{ item.commodityPrice }}</text>
</view> <text class="card-unit">/人</text>
</view>
<text class="card-btn" @click="placeOrderHandle(item)">下单</text>
</view> <text class="card-btn">下单</text>
</view> </view>
</view> </view>
</view>
</view>
</view> </view>
</view> </view>
</template> </template>
@@ -39,7 +41,7 @@
default: {} default: {}
} }
}) })
/// 去下单 /// 去下单
const placeOrderHandle = (item) => { const placeOrderHandle = (item) => {
uni.navigateTo({ uni.navigateTo({
@@ -50,7 +52,7 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
.container-scroll { .container-scroll {
display: flex; display: flex;
@@ -58,16 +60,16 @@
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
margin: 4px 0; margin: 4px 0;
/* 隐藏滚动条 */ /* 隐藏滚动条 */
scrollbar-width: none; scrollbar-width: none;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
.mk-card-item { .mk-card-item {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: start; align-items: start;
@@ -77,7 +79,7 @@
border-radius: 10px; border-radius: 10px;
margin-right: 8px; margin-right: 8px;
padding-bottom: 12px; padding-bottom: 12px;
.card-badge { .card-badge {
position: absolute; position: absolute;
top: 8px; top: 8px;
@@ -89,7 +91,7 @@
border-radius: 4px; border-radius: 4px;
z-index: 2; z-index: 2;
} }
.card-img { .card-img {
width: 188px; width: 188px;
height: 114px; height: 114px;
@@ -97,7 +99,7 @@
object-fit: cover; /* 确保图片不变形，保持比例裁剪 */ object-fit: cover; /* 确保图片不变形，保持比例裁剪 */
flex-shrink: 0; /* 防止图片被压缩 */ flex-shrink: 0; /* 防止图片被压缩 */
} }
.card-content { .card-content {
box-sizing: border-box; box-sizing: border-box;
padding: 10px 12px 0 12px; padding: 10px 12px 0 12px;
@@ -109,14 +111,14 @@
flex: 1; /* 让内容区域占据剩余空间 */ flex: 1; /* 让内容区域占据剩余空间 */
overflow: hidden; /* 防止内容溢出 */ overflow: hidden; /* 防止内容溢出 */
} }
.card-title-column { .card-title-column {
display: flex; display: flex;
align-items: start; align-items: start;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
} }
.card-title { .card-title {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
@@ -131,14 +133,14 @@
line-height: 1.4; line-height: 1.4;
max-height: 2.8em; /* 2行的高度 */ max-height: 2.8em; /* 2行的高度 */
} }
.card-tags { .card-tags {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: start; align-items: start;
padding: 6px 0; padding: 6px 0;
} }
.card-tag { .card-tag {
background: #f5f5f5; background: #f5f5f5;
color: #ff6600; color: #ff6600;
@@ -147,13 +149,13 @@
padding: 0 6px; padding: 0 6px;
margin-left: 2px; margin-left: 2px;
} }
.card-desc { .card-desc {
font-size: 13px; font-size: 13px;
color: #888; color: #888;
margin-top: 2px; margin-top: 2px;
} }
.card-bottom-row { .card-bottom-row {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -161,14 +163,14 @@
margin-top: 8px; margin-top: 8px;
width: 100%; width: 100%;
} }
.card-price-row { .card-price-row {
.card-price-fu { .card-price-fu {
color: #ff6600; color: #ff6600;
font-size: 11px; font-size: 11px;
font-weight: normal; font-weight: normal;
} }
.card-price { .card-price {
color: #ff6600; color: #ff6600;
font-size: 16px; font-size: 16px;
@@ -181,7 +183,7 @@
margin-left: 2px; margin-left: 2px;
} }
} }
.card-btn { .card-btn {
background: #ff6600; background: #ff6600;
color: #fff; color: #fff;
@@ -191,8 +193,8 @@
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
} }
} }
} }
} }
</style> </style>

1
pages/module/detail/DetailCardCompontent.vue
View File

@@ -30,6 +30,7 @@
<style scoped lang="scss"> <style scoped lang="scss">
.container { .container {
width: 100%; width: 100%;
padding: 12px 0;
} }
</style> </style>

93
pages/module/detail/DetailCardGoodsContentList.vue
View File

@@ -2,29 +2,30 @@
<view class="container"> <view class="container">
<ModuleTitle title="相关商品" /> <ModuleTitle title="相关商品" />
<view class="container-scroll"> <view class="container-scroll">
<view class="mk-card-item" v-for="(item, index) in commodityList" :key="`${item.commodityId}-${index}`"> <view v-for="(item, index) in commodityList" :key="`${item.commodityId}-${index}`">
<image class="card-img" :src="item.commodityPhoto" mode="aspectFill" /> <view class="mk-card-item" @click="placeOrderHandle(item)">
<view class="card-content"> <image class="card-img" :src="item.commodityPhoto" mode="aspectFill" />
<view class="card-title-column"> <view class="card-content">
<text class="card-title">{{ item.commodityName }}</text> <view class="card-title-column">
<view class="card-tags" v-for="(tag) in item.commodityTradeRuleList" :key="tag"> <text class="card-title">{{ item.commodityName }}</text>
<text class="card-tag">{{ tag }}</text> <view class="card-tags" v-for="(tag) in item.commodityTradeRuleList" :key="tag">
</view> <text class="card-tag">{{ tag }}</text>
</view> </view>
<template v-for="(serviceItem, index) in item.commodityServices" :key="serviceItem.serviceTitle"> </view>
<view v-if="index < 3" class="card-desc">· {{ serviceItem.serviceTitle }}</view> <template v-for="(serviceItem, index) in item.commodityServices" :key="serviceItem.serviceTitle">
</template> <view v-if="index < 3" class="card-desc">· {{ serviceItem.serviceTitle }}</view>
<view class="card-bottom-row"> </template>
<view class="card-price-row"> <view class="card-bottom-row">
<text class="card-price-fu">￥</text> <view class="card-price-row">
<text class="card-price">{{ item.specificationPrice }}</text> <text class="card-price-fu">￥</text>
<text class="card-unit">/人</text> <text class="card-price">{{ item.specificationPrice }}</text>
</view> <text class="card-unit">/人</text>
</view>
<text class="card-btn" @click="placeOrderHandle(item)">下单</text> <text class="card-btn">下单</text>
</view> </view>
</view> </view>
</view> </view>
</view>
</view> </view>
</view> </view>
</template> </template>
@@ -38,7 +39,7 @@
default: [] default: []
} }
}) })
/// 去下单 /// 去下单
const placeOrderHandle = (item) => { const placeOrderHandle = (item) => {
uni.navigateTo({ uni.navigateTo({
@@ -49,8 +50,8 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
margin-bottom: 8px 0; margin: 6px 0 0;
.container-scroll { .container-scroll {
display: flex; display: flex;
@@ -58,16 +59,16 @@
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
margin: 4px 0; margin: 4px 0;
/* 隐藏滚动条 */ /* 隐藏滚动条 */
scrollbar-width: none; scrollbar-width: none;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
.mk-card-item { .mk-card-item {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: start; align-items: start;
@@ -77,7 +78,7 @@
border-radius: 10px; border-radius: 10px;
margin-right: 8px; margin-right: 8px;
padding-bottom: 12px; padding-bottom: 12px;
.card-badge { .card-badge {
position: absolute; position: absolute;
top: 8px; top: 8px;
@@ -89,7 +90,7 @@
border-radius: 4px; border-radius: 4px;
z-index: 2; z-index: 2;
} }
.card-img { .card-img {
width: 188px; width: 188px;
height: 114px; height: 114px;
@@ -97,7 +98,7 @@
object-fit: cover; /* 确保图片不变形，保持比例裁剪 */ object-fit: cover; /* 确保图片不变形，保持比例裁剪 */
flex-shrink: 0; /* 防止图片被压缩 */ flex-shrink: 0; /* 防止图片被压缩 */
} }
.card-content { .card-content {
box-sizing: border-box; box-sizing: border-box;
padding: 10px 12px 0 12px; padding: 10px 12px 0 12px;
@@ -109,14 +110,14 @@
flex: 1; /* 让内容区域占据剩余空间 */ flex: 1; /* 让内容区域占据剩余空间 */
overflow: hidden; /* 防止内容溢出 */ overflow: hidden; /* 防止内容溢出 */
} }
.card-title-column { .card-title-column {
display: flex; display: flex;
align-items: start; align-items: start;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
} }
.card-title { .card-title {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
@@ -131,14 +132,14 @@
line-height: 1.4; line-height: 1.4;
max-height: 2.8em; /* 2行的高度 */ max-height: 2.8em; /* 2行的高度 */
} }
.card-tags { .card-tags {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: start; align-items: start;
padding: 6px 0; padding: 6px 0;
} }
.card-tag { .card-tag {
background: #f5f5f5; background: #f5f5f5;
color: #ff6600; color: #ff6600;
@@ -147,13 +148,13 @@
padding: 0 6px; padding: 0 6px;
margin-left: 2px; margin-left: 2px;
} }
.card-desc { .card-desc {
font-size: 13px; font-size: 13px;
color: #888; color: #888;
margin-top: 2px; margin-top: 2px;
} }
.card-bottom-row { .card-bottom-row {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -161,14 +162,14 @@
margin-top: 8px; margin-top: 8px;
width: 100%; width: 100%;
} }
.card-price-row { .card-price-row {
.card-price-fu { .card-price-fu {
color: #ff6600; color: #ff6600;
font-size: 11px; font-size: 11px;
font-weight: normal; font-weight: normal;
} }
.card-price { .card-price {
color: #ff6600; color: #ff6600;
font-size: 16px; font-size: 16px;
@@ -181,7 +182,7 @@
margin-left: 2px; margin-left: 2px;
} }
} }
.card-btn { .card-btn {
background: #ff6600; background: #ff6600;
color: #fff; color: #fff;
@@ -191,8 +192,8 @@
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
} }
} }
} }
} }
</style> </style>

28
pages/module/discovery/DiscoveryCradContentList.vue
View File

@@ -2,10 +2,12 @@
<view class="container"> <view class="container">
<ModuleTitle :title="recommendTheme.themeName" /> <ModuleTitle :title="recommendTheme.themeName" />
<view class="container-scroll"> <view class="container-scroll">
<view class="mk-card-item" v-for="(item, index) in recommendTheme.recommendPostsList" :key="index" @click="sendReply(item)"> <view v-for="(item, index) in recommendTheme.recommendPostsList" :key="index">
<image :src="item.coverPhoto" mode="widthFix"></image> <view class="mk-card-item" @click="sendReply(item)">
<text>{{ item.topic }}</text> <image :src="item.coverPhoto" mode="widthFix"></image>
</view> <text>{{ item.topic }}</text>
</view>
</view>
</view> </view>
</view> </view>
</template> </template>
@@ -20,7 +22,7 @@
default: {} default: {}
} }
}) })
const sendReply = (item) => { const sendReply = (item) => {
const topic = item.userInputContent || item.topic.replace(/^#/, ''); const topic = item.userInputContent || item.topic.replace(/^#/, '');
uni.$emit(RECOMMEND_POSTS_TITLE, topic); uni.$emit(RECOMMEND_POSTS_TITLE, topic);
@@ -29,20 +31,20 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
.container-scroll { .container-scroll {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
overflow-x: auto; overflow-x: auto;
margin-top: 4px; margin-top: 4px;
/* 隐藏滚动条 */ /* 隐藏滚动条 */
scrollbar-width: none; scrollbar-width: none;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
.mk-card-item { .mk-card-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -52,7 +54,7 @@
background-color: #ffffff; background-color: #ffffff;
border-radius: 10px; border-radius: 10px;
margin-right: 8px; margin-right: 8px;
image { image {
width: 188px; width: 188px;
height: 112px; height: 112px;
@@ -67,4 +69,4 @@
} }
} }
} }
</style> </style>

18
pages/module/recommend/RecommendPostsList.vue
View File

@@ -2,12 +2,14 @@
<view class="container"> <view class="container">
<ModuleTitle :title="recommendTheme.themeName" /> <ModuleTitle :title="recommendTheme.themeName" />
<view class="container-scroll"> <view class="container-scroll">
<view class="mk-card-item" v-for="(item, index) in recommendTheme.recommendPostsList" :key="index" @click="sendReply(item)"> <view v-for="(item, index) in recommendTheme.recommendPostsList" :key="index">
<image :src="item.coverPhoto" mode="aspectFill"></image> <view class="mk-card-item" @click="sendReply(item)">
<view class="overlay-gradient"> <image :src="item.coverPhoto" mode="aspectFill"></image>
<text class="overlay-text">{{ item.topic }}</text> <view class="overlay-gradient">
</view> <text class="overlay-text">{{ item.topic }}</text>
</view> </view>
</view>
</view>
</view> </view>
</view> </view>
</template> </template>
@@ -33,7 +35,7 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
width: 100%; width: 100%;
} }
.container-scroll { .container-scroll {
@@ -92,4 +94,4 @@
} }
} }
</style> </style>