386 lines
10 KiB
Vue
386 lines
10 KiB
Vue
<template>
|
|
<view class="health-foods">
|
|
<view class="v12-justify-center">
|
|
<view class="ys-btn v12-mr-3 v12-radius-100 v12-dark-text v12-px-5 v12-py-2 v12-font-28 v12-font-bold" @click="toSanctun">养生圣地</view>
|
|
<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 + '/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"
|
|
bgColor="#fff"
|
|
searchIconColor="#C52733"
|
|
@search="search"></u-search>
|
|
</view>
|
|
</view>
|
|
<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>
|
|
</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" v-if="rank.length > 0">
|
|
<view class="rank-items-wrap">
|
|
<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">{{ 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 k.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>
|
|
|
|
</view>
|
|
<view class="recommend-wrap v12-mt-3">
|
|
<view class="recommend-title v12-px-3">
|
|
<text class="v12-dark-text v12-font-36 v12-font-bold">食补推荐</text>
|
|
<view class="slider"></view>
|
|
</view>
|
|
<view class="recommends v12-mt-3">
|
|
<view class="recommend-item" v-for="(item, index) in recommendItems" :key="index" @click="toGoods(item.productId)">
|
|
<view class="recommend-img">
|
|
<image :src="item.image"></image>
|
|
<view class="name-wrap v12-white-text v12-text-center">{{ item.title }}</view>
|
|
</view>
|
|
<view class="v12-pa-2 v12-font-bold v12-font-28 more-t">{{ item.productName }}</view>
|
|
<view class="v12-justify-between v12-primary-text v12-font-bold v12-px-2 v12-pb-2">
|
|
<view class="">
|
|
<text class="v12-font-32">￥</text>
|
|
<text class="v12-font-36 ">{{ item.price }}</text>
|
|
</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>
|
|
</template>
|
|
<script>
|
|
import { getRank,getFoods,getRecipe } from '@/api/health'
|
|
export default{
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
foodItems: [],
|
|
recommendItems: [],
|
|
cityId: '',
|
|
cityName: '',
|
|
keyword: '',
|
|
rank: []
|
|
}
|
|
},
|
|
onLoad(opts) {
|
|
this.cityId = opts.city
|
|
this.cityName = decodeURIComponent(opts.cityName)
|
|
this.getRank()
|
|
this.getList()
|
|
this.getRecipeList()
|
|
},
|
|
methods: {
|
|
toGoods(id) {
|
|
this.$yrouter.push({
|
|
path: '/pages/shop/GoodsCon/index',
|
|
query: {
|
|
id: id
|
|
}
|
|
})
|
|
},
|
|
toSanctun() {
|
|
uni.navigateTo({
|
|
url: '/pkg_product/views/healthSanctum?city=' + this.cityId + '&cityName=' + this.cityName
|
|
})
|
|
},
|
|
getRecipeList() {
|
|
getRecipe().then(res => {
|
|
// console.log(res);
|
|
this.foodItems = res.data.records
|
|
})
|
|
},
|
|
toDetails(id) {
|
|
uni.navigateTo({
|
|
url: '/pkg_product/views/healthFoodDetails?id=' + id
|
|
})
|
|
},
|
|
getRank() {
|
|
let params = {
|
|
goodCityId: this.cityId
|
|
}
|
|
getRank(params).then(res => {
|
|
this.rank = res.data
|
|
})
|
|
},
|
|
getList() {
|
|
const params = {
|
|
goodCityId: this.cityId,
|
|
keyword: this.keyword,
|
|
page: 1,
|
|
limit: 9999
|
|
}
|
|
getFoods(params).then(res => {
|
|
this.recommendItems = res.data.records
|
|
})
|
|
},
|
|
search() {
|
|
this.getList()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.arrow-icon{
|
|
width: 25rpx;
|
|
height: 25rpx;
|
|
}
|
|
.icon{
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
.rank2-bg{
|
|
background-color: #ECDAD6 !important;
|
|
}
|
|
.rank3-bg{
|
|
background-color: #DAE3F3 !important;
|
|
}
|
|
.rank3-3-bg{
|
|
background-color: #C8C8C8 !important;
|
|
}
|
|
.rank2-2-bg{
|
|
background-color: #D3B9B2 !important;
|
|
}
|
|
.rank2-4-bg{
|
|
background-color: #AD8578 !important;
|
|
}
|
|
.rank3-4-bg{
|
|
background-color: #A5A5A5 !important;
|
|
}
|
|
.rank-2{
|
|
width: 40rpx; /* 宽度 */
|
|
height: 45rpx; /* 高度，根据正六边形的几何特性计算 */
|
|
background-color: #DDC76F; /* 背景颜色 */
|
|
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.rank-3 {
|
|
width: 30rpx; /* 宽度 */
|
|
height: 35rpx; /* 高度，根据正六边形的几何特性计算 */
|
|
background-color: #AD9161; /* 背景颜色 */
|
|
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
.rank-4{
|
|
width: 25rpx; /* 宽度 */
|
|
height: 28rpx; /* 高度，根据正六边形的几何特性计算 */
|
|
background-color: #FFF3C2; /* 背景颜色 */
|
|
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
.ys-btn{
|
|
background: #E2D7C3;
|
|
}
|
|
.cart-img{
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
border-radius: 50%;
|
|
}
|
|
.bg-img{
|
|
position: absolute;
|
|
height: 100%;
|
|
}
|
|
.recommends{
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-column-gap: 20rpx;
|
|
grid-row-gap: 20rpx;
|
|
}
|
|
.recommend-img{
|
|
width: 344rpx;
|
|
height: 344rpx;
|
|
background: #333;
|
|
border-radius: 20rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.name-wrap{
|
|
position: absolute;
|
|
background: rgba(0,0,0,0.2);
|
|
width: 100%;
|
|
padding: 8px 0;
|
|
bottom: 0;
|
|
}
|
|
.recommend-item{
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
}
|
|
.recommend-title{
|
|
position: relative;
|
|
width: fit-content;
|
|
}
|
|
.slider{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 6rpx;
|
|
background: linear-gradient(to right, #C52733 0%, rgba(255,255,255,0) 100%);
|
|
border-radius: 6rpx;
|
|
bottom: 5rpx;
|
|
}
|
|
.rank-wrap{
|
|
background: #E2BC8D;
|
|
border-radius: 20rpx;
|
|
}
|
|
.rank-tag{
|
|
width: 50rpx; /* 宽度 */
|
|
height: 55rpx; /* 高度，根据正六边形的几何特性计算 */
|
|
background-color: #FBEEB7; /* 背景颜色 */
|
|
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
|
position: absolute;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: 20rpx;
|
|
line-height: 55rpx;
|
|
top: -22.5rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.rank-img{
|
|
min-width: 104rpx;
|
|
width: 104rpx;
|
|
height: 104rpx;
|
|
background: #666;
|
|
border-radius: 20rpx;
|
|
}
|
|
.bee-rank, .drug-rank{
|
|
width: 100%;
|
|
background: #999;
|
|
border-radius: 20rpx;
|
|
overflow: auto;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
.rank-title-wrap{
|
|
height: 140rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.rank-title{
|
|
width: 200rpx;
|
|
padding: 10rpx 5rpx;
|
|
background: linear-gradient(to right, #FFFFFF 0%, rgba(255,255,255,0) 100%);
|
|
z-index: 999;
|
|
}
|
|
.rank-items-wrap{
|
|
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-column-gap: 20rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.rank-item{
|
|
width: 100%;
|
|
height: 116rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding: 0 10rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
.title-img{
|
|
width: 404rpx;
|
|
}
|
|
.health-foods{
|
|
min-height: 100vh;
|
|
background-color: #FAEED8;
|
|
padding: 20rpx;
|
|
box-sizing: border-box ;
|
|
}
|
|
.flex-1{
|
|
flex: 1;
|
|
}
|
|
.swap{
|
|
overflow: auto;
|
|
}
|
|
.trave-item-wrap{
|
|
position: relative;
|
|
}
|
|
.trave-btn{
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
bottom: 30rpx;
|
|
text-align: center;
|
|
width: 212rpx;
|
|
background: rgba(255,255,255,0.9);
|
|
border-radius: 60rpx;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
padding: 10rpx 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content:center;
|
|
}
|
|
.trave-item{
|
|
width: 382rpx;
|
|
height: 272rpx;
|
|
background: rgba(230,178,178,0.39);
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
</style> |