feat: 组件的点击事件的热区优化
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -30,6 +30,7 @@
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
padding: 12px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user