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

This commit is contained in:
2025-08-10 20:44:40 +08:00
parent 59a4f5827f
commit 16b8885eb1
5 changed files with 121 additions and 113 deletions

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> <text class="card-btn">下单</text>
</view> </view>
</view> </view>
</view> </view>
</view>
</view> </view>
</view> </view>
</template> </template>

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>

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>
@@ -50,7 +51,7 @@
<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;

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>

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>