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:
modendeveloper
2024-10-09 23:58:37 +08:00
parent b397ba232f
commit 8c2e785ea0
5 changed files with 161 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg_product/views/healthFoods.vue
+60 -59
View File
@@ -5,63 +5,48 @@
<view class="v12-radius-100 v12-primary v12-white-text v12-px-5 v12-py-2 v12-font-28 v12-font-bold" >养生食材</view>
</view>
<view class="v12-justify-between v12-align-center v12-mt-5">
<!-- <image
:src="webUrl + '/home/icon-location.png'"
class="icon"
/> -->
<image
:src="webUrl + '/orderIcon/map_dark.png'"
mode="widthFix"
class="icon"
/>
<view class="v12-font-28 v12-secondary-dark-text v12-mr-3">{{ cityName }}</view>
<view class="flex-1">
<u-search :showAction="false" v-model="keyword" @search="search"></u-search>
<u-search
:showAction="false"
v-model="keyword"
bgColor="#fff"
searchIconColor="#C52733"
@search="search"></u-search>
</view>
</view>
<view class="v12-justify-between swap">
<view v-for="(item, index) in foodItems" :key="index" class="trave-item-wrap v12-mr-3 v12-mt-3" @click="toDetails(item.id)">
<view class="trave-item">
<image class="trave-item" mode="widthFix" :src="item.indexImage"></image>
<swiper class="v12-justify-between swap" autoplay circular next-margin="300rpx" duration="10000" interval="3000" >
<swiper-item v-for="(item, index) in foodItems" :key="index" >
<view class="trave-item-wrap v12-mr-3 v12-mt-3">
<view class="trave-item">
<image class="trave-item" mode="widthFix" :src="item.indexImage"></image>
</view>
<view class="trave-btn" @click="toDetails(item.id)">
<text>{{ item.name }}</text>
<image :src="webUrl + '/orderIcon/arrow.png'" class="arrow-icon v12-ml-1"></image>
</view>
</view>
<view class="trave-btn">{{ item.name }}</view>
</view>
</swiper-item>
</swiper>
<view class="v12-justify-center v12-mt-3" v-if="rank.length > 0">
<image class="title-img" :src="webUrl + '/orderIcon/rankTitle.png'" mode="widthFix"></image>
</view>
<view class="rank-wrap v12-mt-3">
<view class="title-img"></view>
<view class="rank-wrap v12-mt-3" v-if="rank.length > 0">
<view class="rank-items-wrap">
<view class="bee-rank">
<image :src="rank[0].backgroundImage" class="bg-img"></image>
<view class="bee-rank" v-for="(k, i) in rank" :key="i">
<image :src="k.backgroundImage" class="bg-img"></image>
<view class="rank-title-wrap">
<view class="rank-title v12-font-34 v12-font-bold">{{ rank[0].title }}</view>
<view class="rank-title v12-font-34 v12-font-bold">{{ k.title }}</view>
</view>
<view class="v12-px-2">
<view
class="rank-item v12-justify-start v12-align-center v12-mb-4"
v-for="(item, index) in rank[0].products"
@click="toGoods(item.productId)"
:key="index">
<view class="rank-tag" :class="{'rank2-bg' : index === 1, 'rank3-bg' : index === 2 }">
<view class="rank-2" :class="{'rank2-2-bg' : index === 1, 'rank3-3-bg' : index === 2 }">
<view class="rank-3" :class="{'rank2-4-bg' : index === 1, 'rank3-4-bg' : index === 2 }">
<view class="rank-4" :class="{'rank2-bg' : index === 1, 'rank3-bg' : index === 2 }">{{ index + 1 }}</view>
</view>
</view>
</view>
<view class="rank-img">
<image :src="item.productImage" mode="widthFix" class="rank-img"></image>
</view>
<view class="v12-ml-2">
<view class="v12-font-bold v12-font-24 one-t" style="width: 160rpx">{{ item.productTitle }}</view>
<view class="v12-font-22 more-t">{{ item.productDesc }}</view>
</view>
</view>
</view>
</view>
<view class="drug-rank">
<image :src="rank[1].backgroundImage" class="bg-img"></image>
<view class="rank-title-wrap">
<view class="rank-title v12-font-34 v12-font-bold">{{ rank[1].title }}</view>
</view>
<view class="v12-px-2">
<view
class="rank-item v12-justify-start v12-align-center v12-mb-4"
v-for="(item, index) in rank[1].products"
v-for="(item, index) in k.products"
@click="toGoods(item.productId)"
:key="index">
<view class="rank-tag" :class="{'rank2-bg' : index === 1, 'rank3-bg' : index === 2 }">
@@ -82,6 +67,7 @@
</view>
</view>
</view>
</view>
<view class="recommend-wrap v12-mt-3">
<view class="recommend-title v12-px-3">
@@ -100,9 +86,17 @@
<text class="v12-font-32">￥</text>
<text class="v12-font-36 ">{{ item.price }}</text>
</view>
<view class="cart-img"></view>
<view class="cart-img">
<image class="cart-img" :src="webUrl+'/orderIcon/组 355.png'"></image>
</view>
</view>
</view>
</view>
<view v-if="recommendItems.length === 0">
<view class="no-data-wrap v12-justify-center v12-mt-6">
<image :src="webUrl + '/orderIcon/微信图片_20241009220552.png'" mode="widthFix"></image>
</view>
</view>
</view>
</view>
@@ -114,11 +108,6 @@ export default{
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
foodItems: [],
rankItems: [
{label: '原始森林野生蜂蜜', intro: '自然野生云南蜂蜜气味香甜可口，口感...', rank: 1, img: ''},
{label: '原始森林野生蜂蜜', intro: '自然野生云南蜂蜜气味香甜可口，口感...', rank: 2, img: ''},
{label: '原始森林野生蜂蜜', intro: '自然野生云南蜂蜜气味香甜可口，口感...', rank: 3, img: ''},
],
recommendItems: [],
cityId: '',
cityName: '',
@@ -163,7 +152,6 @@ export default{
goodCityId: this.cityId
}
getRank(params).then(res => {
console.log(res);
this.rank = res.data
})
},
@@ -185,6 +173,14 @@ export default{
}
</script>
<style lang="less" scoped>
.arrow-icon{
width: 25rpx;
height: 25rpx;
}
.icon{
width: 30rpx;
height: 30rpx;
}
.rank2-bg{
background-color: #ECDAD6 !important;
}
@@ -192,7 +188,7 @@ export default{
background-color: #DAE3F3 !important;
}
.rank3-3-bg{
background-color: #DAE3F4 !important;
background-color: #C8C8C8 !important;
}
.rank2-2-bg{
background-color: #D3B9B2 !important;
@@ -241,7 +237,6 @@ export default{
width: 48rpx;
height: 48rpx;
border-radius: 50%;
background: #999;
}
.bg-img{
position: absolute;
@@ -284,6 +279,10 @@ export default{
border-radius: 6rpx;
bottom: 5rpx;
}
.rank-wrap{
background: #E2BC8D;
border-radius: 20rpx;
}
.rank-tag{
width: 50rpx; /* 宽度 */
height: 55rpx; /* 高度，根据正六边形的几何特性计算 */
@@ -326,8 +325,7 @@ export default{
z-index: 999;
}
.rank-items-wrap{
background: #E2BC8D;
border-radius: 20rpx;
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 20rpx;
@@ -344,13 +342,13 @@ export default{
position: relative;
}
.title-img{
height: 132rpx;
width: 100%;
width: 404rpx;
}
.health-foods{
min-height: 100vh;
background-color: #FAEED8;
padding: 20rpx ;
padding: 20rpx;
box-sizing: border-box ;
}
.flex-1{
flex: 1;
@@ -374,6 +372,9 @@ export default{
font-size: 28rpx;
font-weight: bold;
padding: 10rpx 20rpx;
display: flex;
align-items: center;
justify-content:center;
}
.trave-item{
width: 382rpx;