481 lines
12 KiB
Vue
481 lines
12 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 class="one-t">{{ 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" style="width:inherit" mode="scaleToFill"></image>
|
|
<view class="rank-title-wrap">
|
|
<view class="rank-title v12-font-34 v12-font-bold one-t">{{
|
|
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>
|
|
<view class="recommend-img">
|
|
<image class="recommend-img" :src="item.image" mode="aspectFit"></image>
|
|
<view class="name-wrap v12-white-text v12-text-center more-t">{{
|
|
item.title
|
|
}}</view>
|
|
</view>
|
|
<view class="v12-px-2 v12-font-bold v12-font-28 more-t v12-my-2">{{
|
|
item.productName
|
|
}}</view>
|
|
</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.redirectTo({
|
|
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;
|
|
height: 70rpx;
|
|
}
|
|
.recommend-item {
|
|
background: #ffffff;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
.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: hidden;
|
|
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.7);
|
|
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>
|