285 lines
8.9 KiB
Vue
285 lines
8.9 KiB
Vue
<template>
|
|
<view class="health-foods">
|
|
<view class="v12-justify-center">
|
|
<view class="v12-mr-3 v12-radius-100 v12-dark1 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">
|
|
<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"></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">
|
|
<view class="trave-item"></view>
|
|
<view class="trave-btn">{{ item.name }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="rank-wrap v12-mt-3">
|
|
<view class="title-img"></view>
|
|
<view class="rank-items-wrap">
|
|
<view class="bee-rank">
|
|
<image :src="rank[0].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>
|
|
<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"
|
|
:key="index">
|
|
<view class="rank-tag">{{ index + 1 }}</view>
|
|
<view class="rank-img">
|
|
<image :src="item.productImage" 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" :key="index">
|
|
<view class="rank-tag">{{ index + 1 }}</view>
|
|
<view class="rank-img">
|
|
<image :src="item.productImage" 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">
|
|
<view class="recommend-img">
|
|
<view class="name-wrap v12-white-text v12-text-center">{{ item.name }}</view>
|
|
</view>
|
|
<view class="v12-pa-2 v12-font-bold v12-font-28 more-t">{{ item.title }}</view>
|
|
<view class="v12-justify-between v12-primary-text v12-font-bold">
|
|
<view>
|
|
<text class="v12-font-32">￥</text>
|
|
<text class="v12-font-36">{{ item.price }}</text>
|
|
</view>
|
|
<view>
|
|
gouwuche
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { getRank } from '@/api/health'
|
|
export default{
|
|
data() {
|
|
return {
|
|
foodItems: [
|
|
{img: '', value: '', name: '淮山党参鹌鹑汤'},
|
|
{img: '', value: '', name: '淮山党参鹌鹑汤'},
|
|
{img: '', value: '', name: '淮山党参鹌鹑汤'},
|
|
{img: '', value: '', name: '淮山党参鹌鹑汤'},
|
|
],
|
|
rankItems: [
|
|
{label: '原始森林野生蜂蜜', intro: '自然野生云南蜂蜜气味香甜可口，口感...', rank: 1, img: ''},
|
|
{label: '原始森林野生蜂蜜', intro: '自然野生云南蜂蜜气味香甜可口，口感...', rank: 2, img: ''},
|
|
{label: '原始森林野生蜂蜜', intro: '自然野生云南蜂蜜气味香甜可口，口感...', rank: 3, img: ''},
|
|
],
|
|
recommendItems: [
|
|
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
|
|
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
|
|
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
|
|
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
|
|
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
|
|
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
|
|
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
|
|
{img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
|
|
],
|
|
cityId: '',
|
|
cityName: '',
|
|
keyword: '',
|
|
rank: []
|
|
}
|
|
},
|
|
onLoad(opts) {
|
|
this.cityId = opts.city
|
|
this.cityName = opts.cityName
|
|
this.getRank()
|
|
},
|
|
methods: {
|
|
toSanctun() {
|
|
uni.navigateTo({
|
|
url: '/pkg_product/views/healthSanctum?city=' + this.cityId + '&cityName=' + this.cityName
|
|
})
|
|
},
|
|
toDetails() {
|
|
uni.navigateTo({
|
|
url: '/pkg_product/views/healthFoodDetails'
|
|
})
|
|
},
|
|
getRank() {
|
|
let params = {
|
|
goodCityId: this.cityId
|
|
}
|
|
getRank(params).then(res => {
|
|
console.log(res);
|
|
this.rank = res.data
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.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{
|
|
height: 500rpx;
|
|
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-tag{
|
|
width: 50rpx; /* 宽度 */
|
|
height: 55rpx; /* 高度，根据正六边形的几何特性计算 */
|
|
background-color: #3498db; /* 背景颜色 */
|
|
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;
|
|
}
|
|
.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{
|
|
background: #E2BC8D;
|
|
border-radius: 20rpx;
|
|
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{
|
|
height: 132rpx;
|
|
width: 100%;
|
|
}
|
|
.health-foods{
|
|
min-height: 100vh;
|
|
background-color: #FAEED8;
|
|
padding: 20rpx ;
|
|
}
|
|
.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;
|
|
}
|
|
.trave-item{
|
|
width: 382rpx;
|
|
height: 272rpx;
|
|
background: rgba(230,178,178,0.39);
|
|
border-radius: 20rpx;
|
|
}
|
|
</style> |