518 lines
12 KiB
Vue
518 lines
12 KiB
Vue
<template>
|
|
<view class="health-foods">
|
|
<view
|
|
class="banner-wrap"
|
|
v-if="topImageConfig && topImageConfig.backgroundImage"
|
|
>
|
|
<image
|
|
:src="topImageConfig.backgroundImage"
|
|
class="banner-img"
|
|
mode="widthFix"
|
|
/>
|
|
<view class="banner-tabs v12-justify-center">
|
|
<image
|
|
class="tab-btn v12-mr-3"
|
|
:src="travelButtonSrc"
|
|
mode="widthFix"
|
|
@click="toSanctun"
|
|
/>
|
|
<image
|
|
class="tab-btn"
|
|
:src="wellnessButtonSrc"
|
|
mode="widthFix"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="v12-justify-center v12-mt-3" v-if="hasRankData">
|
|
<image
|
|
class="title-img"
|
|
:src="webUrl + '/orderIcon/rankTitle.png'"
|
|
mode="widthFix"
|
|
></image>
|
|
</view>
|
|
<view class="rank-wrap v12-mt-3" v-if="hasRankData">
|
|
<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" @click.stop="addToCart(item, 'productId')">
|
|
<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>
|
|
<ProductWindow
|
|
ref="attrWindow"
|
|
:attr="attr"
|
|
:cartNum="cart_num"
|
|
:showOk="true"
|
|
@changeFun="changeFun"
|
|
@ok="handleOk"
|
|
/>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { getRank, getFoods, getRecipe, getWellnessTopImage } from "@/api/health";
|
|
import ProductWindow from '@/components/ProductWindow'
|
|
import goCartMixin from '@/mixins/goCartMixins'
|
|
export default {
|
|
components: {
|
|
ProductWindow
|
|
},
|
|
mixins: [goCartMixin],
|
|
computed: {
|
|
hasRankData() {
|
|
if (!Array.isArray(this.rank)) return false;
|
|
const hasText = (v) => typeof v === "string" && v.trim() !== "";
|
|
const hasValue = (v) => v !== null && v !== undefined && v !== "";
|
|
return this.rank.some((item) => {
|
|
if (!item) return false;
|
|
if (hasText(item.title) || hasText(item.backgroundImage)) {
|
|
return true;
|
|
}
|
|
if (Array.isArray(item.products)) {
|
|
return item.products.some((p) => {
|
|
if (!p) return false;
|
|
return (
|
|
hasText(p.productTitle) ||
|
|
hasText(p.productDesc) ||
|
|
hasValue(p.productImage) ||
|
|
hasValue(p.productId)
|
|
);
|
|
});
|
|
}
|
|
return false;
|
|
});
|
|
},
|
|
travelButtonSrc() {
|
|
const config = this.topImageConfig || {};
|
|
return config.travelButtonImage || config.travelButtonImageFocus || "";
|
|
},
|
|
wellnessButtonSrc() {
|
|
const config = this.topImageConfig || {};
|
|
return config.wellnessButtonImageFocus || config.wellnessButtonImage || "";
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
recommendItems: [],
|
|
cityId: "",
|
|
cityName: "",
|
|
rank: [],
|
|
topImageConfig: {}
|
|
};
|
|
},
|
|
onLoad(opts) {
|
|
this.cityId = opts.city;
|
|
this.cityName = decodeURIComponent(opts.cityName);
|
|
this.getRank();
|
|
this.getList();
|
|
this.getTopImage();
|
|
},
|
|
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,
|
|
});
|
|
},
|
|
getRank() {
|
|
let params = {
|
|
goodCityId: this.cityId,
|
|
};
|
|
getRank(params).then((res) => {
|
|
this.rank = res.data;
|
|
});
|
|
},
|
|
getList() {
|
|
const params = {
|
|
goodCityId: this.cityId,
|
|
page: 1,
|
|
limit: 9999,
|
|
};
|
|
getFoods(params).then((res) => {
|
|
this.recommendItems = res.data.records;
|
|
});
|
|
},
|
|
search() {
|
|
this.getList();
|
|
},
|
|
getTopImage() {
|
|
getWellnessTopImage().then((res) => {
|
|
this.topImageConfig = res.data || {};
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.banner-wrap {
|
|
position: relative;
|
|
margin-left: -20rpx;
|
|
margin-right: -20rpx;
|
|
}
|
|
.banner-img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
will-change: transform;
|
|
}
|
|
.banner-tabs {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 40rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.tab-btn {
|
|
width: 200rpx;
|
|
}
|
|
.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: #fff;
|
|
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>
|