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-08 00:25:03 +08:00
parent c51f177c7c
commit 566ef9de61
8 changed files with 901 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/v12-style.less
+5 -2
View File
@@ -3,8 +3,8 @@
@dark-color: #333333;
@white-color: #fff;
@colors: #C52733, #333333, #fff, #666, #F0F0F0, #999999, #E92727, #FFC543;
@classnames: primary, dark, white, secondary-dark, grey, dark1, red, yellow;
@colors: #C52733, #333333, #fff, #666, #F0F0F0, #999999, #E92727, #FFC543, #69C573;
@classnames: primary, dark, white, secondary-dark, grey, dark1, red, yellow, success;
/*=====================================*/
each(@colors, {
@@ -192,6 +192,9 @@ each(@colors, {
.v12-full-width{
width: 100%;
}
.v12-nowrap{
white-space: nowrap
}
pages.json
+36 -1
View File
@@ -540,7 +540,42 @@
{
"path": "views/healthList",
"style": {
"navigationBarTitleText": "康养 · 食材"
"navigationBarTitleText": "选择城市"
}
},
{
"path": "views/expoList",
"style": {
"navigationBarTitleText": "康养生活",
"navigationBarBackgroundColor": "#FFFFFF"
}
},
{
"path": "views/expoDetails",
"style": {
"navigationBarTitleText": "康养生活",
"navigationBarBackgroundColor": "#FFFFFF"
}
},
{
"path": "views/healthSanctum",
"style": {
"navigationBarTitleText": "康养生活",
"navigationBarBackgroundColor": "#FFFFFF"
}
},
{
"path": "views/healthFoods",
"style": {
"navigationBarTitleText": "康养生活",
"navigationBarBackgroundColor": "#FAEED8"
}
},
{
"path": "views/healthFoodDetails",
"style": {
"navigationBarTitleText": "康养生活",
"navigationBarBackgroundColor": "#FFFFFF"
}
},
{
pkg_product/views/expoDetails.vue
+119
View File
@@ -0,0 +1,119 @@
<template>
<view class="expo-details">
<view class="video-wrap">
<video id="ky-video" class="ky-video" @error="videoErrorCallback" :show-fullscreen-btn="false" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" autoplay controls></video>
</view>
<view class="expo-item">
中国昆明第九届国际大健康暨养生养老产业博览会
</view>
<view class="details-wrap v12-mt-3">
<view class="v12-font-bold v12-dark-text v12-font-32 v12-mb-3">展会信息</view>
<view class="v12-justify-start v12-mb-3">
<view class="tag v12-success v12-white-text v12-font-20 v12-px-2 v12-py-1 v12-radius-50 v12-nowrap">主题</view>
<view class="v12-font-bold v12-font-28 v12-dark-text v12-ml-3">中国昆明第九届国际大健康暨养生养老产业博览会</view>
</view>
<view class="v12-justify-start v12-mb-3">
<view class="tag v12-success v12-white-text v12-font-20 v12-px-2 v12-py-1 v12-radius-50 v12-nowrap">内容</view>
<view class="v12-font-24 v12-dark-text v12-ml-3">“中国(昆明)国际大健康养生养老产业博览会”创办于2017
年，由云南省民政厅、云南省老龄办、云南省贸促会共同发
起指导，早云南省商务厅、云南省投促局以及昆明市政府相
关部门支持下，至今已连续成功举办了八届，在国内同类型
展会中已具一定规模和影响力，被昆明市有关部门综合评估
为5A级博览会。
</view>
</view>
<view class="v12-justify-start v12-mb-3">
<view class="tag v12-success v12-white-text v12-font-20 v12-px-2 v12-py-1 v12-radius-50 v12-nowrap">时间</view>
<view class="v12-font-bold v12-font-28 v12-dark-text v12-ml-3">2024年11月22日--2024年11月24日</view>
</view>
<view class="v12-justify-start v12-mb-3">
<view class="tag v12-success v12-white-text v12-font-20 v12-px-2 v12-py-1 v12-radius-50 v12-nowrap">地点</view>
<view class="v12-font-bold v12-font-28 v12-dark-text v12-ml-3">滇池国际会展中心</view>
</view>
</view>
<view class="more-wrap v12-mt-3">
<view class="v12-justify-between v12-align-center v12-mb-3">
<view class="v12-font-bold v12-font-32">其他展会</view>
<view class="v12-font-24" @click="toMore">查看更多</view>
</view>
<view
v-for="(item, index) in moreList"
:key="index"
@click="getOther(item.id)"
class="v12-white v12-dark-text v12-font-bold v12-font-26 v12-mb-3 v12-radius-50 v12-pa-2">
{{ item.label }}
</view>
</view>
</view>
</template>
<script>
export default{
data() {
return {
keyword: '',
moreList: [
{id: 1, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
{id: 2, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
{id: 3, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
{id: 4, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
{id: 5, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
],
id: '',
details: {}
}
},
onLoad(opts) {
this.id = opts.id || ''
this.getDetails(this.id)
},
methods: {
videoErrorCallback(error) {
console.log(error);
},
getDetails(id) {
},
getOther(id) {
this.id = id
this.getDetails(this.id)
},
toMore() {
uni.navigateTo({
url: '/pkg_product/views/expoList'
})
},
}
}
</script>
<style lang="less" scoped>
.ky-video{
height: 400rpx;
width: 100%;
border-radius: 20rpx;
}
.tag{
height: 30rpx;
}
.expo-details{
height: 100vh;
background: #fff;
padding: 20rpx;
}
.expo-item{
background-color: #f2f2f2;
border-radius: 100rpx;
font-size: 26rpx;
font-weight: bold;
margin-top: 20rpx;
padding: 20rpx;
}
.details-wrap, .more-wrap{
width: 100%;
background: #f2f2f2;
border-radius: 20rpx;
padding: 20rpx;
box-sizing: border-box;
}
</style>
pkg_product/views/expoList.vue
+60
View File
@@ -0,0 +1,60 @@
<template>
<view class="expo-list">
<view class="search-wrap">
<u-search
placeholder="请输入关键字查询"
v-model="keyword"
shape="round"
:showAction="false"
></u-search>
</view>
<view class="expo-wrap">
<view
class="expo-item"
v-for="(item, index) in expoList"
:key="index"
@click="toDetails(item)"
>
{{ item.label }}
</view>
</view>
</view>
</template>
<script>
export default{
data() {
return {
keyword: '',
expoList: [
{id: 1, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
{id: 2, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
{id: 3, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
{id: 4, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
{id: 5, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
]
}
},
methods: {
toDetails(item) {
uni.navigateTo({
url: '/pkg_product/views/expoDetails?id='+item.id
})
}
}
}
</script>
<style lang="less" scoped>
.expo-list{
height: 100vh;
background: #fff;
padding: 20rpx;
}
.expo-item{
background-color: #f2f2f2;
border-radius: 100rpx;
font-size: 26rpx;
font-weight: bold;
margin-top: 20rpx;
padding: 20rpx;
}
</style>
pkg_product/views/healthFoodDetails.vue
+238
View File
@@ -0,0 +1,238 @@
<template>
<view class="food-wrap">
<view class="v12-mb-3 banner-wrap">
</view>
<view class="inro-wrap v12-mb-3 ">
<view class="v12-font-36 v12-font-bold v12-dark-text v12-mb-3">淮山党参鹌鹑汤</view>
<view class="v12-font-28 v12-secondary-dark-text">淮山党参鹌鹑汤是一种具有补益作用的汤品，非常适合在
季节变换或身体虚弱时饮用</view>
</view>
<view class="details-list-wrap v12-mb-3 ">
<view class="v12-justify-start v12-align-center">
<view class="primary-title">
<text class="v12-font-34 v12-font-bold">食材清单</text>
<view class="slider"></view>
</view>
<view class="v12-dark1-text v12-font-24 v12-ml-3">/ 新鲜的食材决定药膳的作用</view>
</view>
<view class="v12-white v12-radius-20 v12-pa-2 v12-mt-3">
<view class="v12-font-28 v12-font-bold v12-mb-2">主料</view>
<view class="v12-d-grid-columns-2 primary-item-wrap">
<view v-for="(item, index) in primaryList" :key="index" class="primary-item v12-justify-start v12-align-center">
<view class="primary-img"></view>
<view class="v12-ml-2">
<view class="v12-font-26 one-t v12-mb-1">{{ item.label }}</view>
<view class="v12-font-20 v12-primary v12-white-text v12-nowrap v12-px-2 v12-py-1 v12-radius-60">+加入团购食材</view>
</view>
</view>
</view>
</view>
<view class="v12-white v12-radius-20 v12-pa-2 v12-mt-3">
<view class="v12-font-28 v12-font-bold v12-mb-2">辅料</view>
<view class="v12-d-grid-columns-2 primary-item-wrap">
<view v-for="(item, index) in secondaryList" :key="index" class="primary-item v12-justify-start v12-align-center">
<view class="v12-ml-2">
<view class="v12-font-26 one-t v12-mb-1">
<text class="v12-mr-2 v12-font-bold">·</text>
<text>{{ item }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="step-wrap v12-mb-3">
<view class="step-title">
<view>烹饪步骤</view>
<view class="slider"></view>
</view>
<view class="steps v12-mt-3">
<view v-for="(item, index) in steps" :key="index" class="step-item">
<view class="step-img"></view>
<view class="v12-ml-2 step-info">
<view class="v12-font-26 v12-font-bold v12-mb-3">{{ item.label }}</view>
<view class="v12-font-26 v12-secondary-dark-text">{{ item.describle }}</view>
</view>
</view>
</view>
</view>
<view class="tips-wrap">
<view class="step-title">
<view>养生小tips</view>
<view class="slider"></view>
</view>
<view class="card-wrap v12-mt-3">
<view class="card-item">
<view class="card-tag v12-primary v12-white-text">选材</view>
<view class="v12-mt-6">
<view v-for="(item, index) in tips" :key="index">
<text class="v12-primary-text v12-font-bold v12-mr-2">·</text>
<text class="v12-font-26 v12-dark-text">{{ item }}</text>
</view>
</view>
</view>
<view class="card-item v12-mt-3">
<view class="card-tag v12-primary v12-white-text">注意事项</view>
<view class="v12-mt-6">
<view v-for="(item, index) in tips" :key="index">
<text class="v12-primary-text v12-font-bold v12-mr-2">·</text>
<text class="v12-font-26 v12-dark-text">{{ item }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default{
data() {
return {
tips: [
'鹌鹑：选择新鲜的鹌鹑，处理清洗干净，去除内脏和杂质',
'淮山：选择肉质雪白、无黑点的淮山，去皮切块后应立即',
'放入清水中浸泡，以防氧化变黑',
'党参：选择色泽黄亮、无霉变、无虫蛀的党参'
],
primaryList: [
{img: '', label: '鹌鹑(2只)'},
{img: '', label: '鹌鹑(2只)'},
{img: '', label: '鹌鹑(2只)'},
{img: '', label: '鹌鹑(2只)'},
],
secondaryList: [
'枸杞（适量）',
'姜片（适量）',
'盐（适量）',
'清水（适量）'
],
steps: [
{img: '', label: '步骤1：', step: 1, describle: '所有食材洗净备用'},
{img: '', label: '步骤2：', step: 2, describle: '所有食材洗净备用'},
{img: '', label: '步骤3：', step: 3, describle: '所有食材洗净备用'},
{img: '', label: '步骤4：', step: 4, describle: '所有食材洗净备用'},
]
}
}
}
</script>
<style lang="less" scoped>
.card-tag{
width: fit-content;
padding: 10rpx 20rpx;
border-radius: 10rpx 0 20rpx 20rpx;
position: absolute;
top: -12rpx;
}
.card-tag::after{
content: '';
width: 0;
height: 0;
border-left: 8rpx solid transparent !important;
border-right: 8rpx solid transparent !important;
right: -4px;
border-top: 8rpx solid #7D393F !important;
border-bottom: 8rpx solid transparent!important;
position: absolute;
top: 4rpx;
rotate: 45deg;
}
.card-item{
position: relative;
background: #fff;
border-radius: 20rpx;
padding: 20rpx;
}
.tips-wrap{
background: #F2F2F2;
border-radius: 40rpx;
padding: 20rpx;
box-sizing: border-box;
}
.steps{
display: flex;
overflow: auto;
}
.step-info{
height: inherit;
padding: 20rpx;
box-sizing: border-box;
}
.step-item{
min-width: 482rpx;
width: 482rpx;
height: 232rpx;
background: #fff;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: flex-start;
margin-right: 24rpx;
padding: 0 20rpx;
}
.step-item:last-child{
margin-right: 0 !important;
}
.step-img{
width: 200rpx;
height: 200rpx;
background: rgba(195,126,126,0.39);
border-radius: 20rpx;
}
.step-title{
position: relative;
width: fit-content;
font-weight: bold;
font-size: 34rpx;
}
.step-wrap{
background: #F2F2F2;
border-radius: 40rpx;
padding: 20rpx 20rpx 30rpx 20rpx;
box-sizing: border-box;
}
.primary-item-wrap{
grid-column-gap: 20rpx;
grid-row-gap: 20rpx;
}
.primary-img{
width: 124rpx;
height: 90rpx;
background: rgba(63,20,20,0.39);
border-radius: 20rpx;
}
.primary-item{
}
.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;
}
.primary-title{
position: relative;
width: fit-content;
}
.food-wrap{
min-height: 100vh;
background: #fff;
padding: 20rpx 20rpx 60rpx 20rpx;
}
.banner-wrap{
width: 100%;
height: 360rpx;
background: rgba(180,18,18,0.39);
border-radius: 40rpx;
box-sizing: border-box;
}
.details-list-wrap{
background: #F2F2F2;
border-radius: 40rpx;
padding: 20rpx 20rpx 30rpx 20rpx;
}
</style>
pkg_product/views/healthFoods.vue
+249
View File
@@ -0,0 +1,249 @@
<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">昆明市</view>
<view class="flex-1"><u-search :showAction="false"></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">
<view class="rank-title-wrap">
<view class="rank-title v12-font-34 v12-font-bold">蜂蜜榜</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 rankItems" :key="index">
<view class="rank-tag">{{ index + 1 }}</view>
<view class="rank-img"></view>
<view class="v12-ml-2">
<view class="v12-font-bold v12-font-24 one-t" style="width: 160rpx">{{ item.label }}</view>
<view class="v12-font-22 more-t">{{ item.intro }}</view>
</view>
</view>
</view>
</view>
<view class="drug-rank">
<view class="rank-title-wrap">
<view class="rank-title v12-font-34 v12-font-bold">药膳榜</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 rankItems" :key="index">
<view class="rank-tag">{{ index + 1 }}</view>
<view class="rank-img"></view>
<view class="v12-ml-2">
<view class="v12-font-bold v12-font-24 one-t" style="width: 160rpx">{{ item.label }}</view>
<view class="v12-font-22 more-t">{{ item.intro }}</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>
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'},
]
}
},
methods: {
toSanctun() {
uni.navigateTo({
url: '/pkg_product/views/healthSanctum'
})
},
toDetails() {
uni.navigateTo({
url: '/pkg_product/views/healthFoodDetails'
})
}
}
}
</script>
<style lang="less" scoped>
.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;
}
.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%);
}
.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{
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>
pkg_product/views/healthList.vue
+42 -16
View File
@@ -1,20 +1,20 @@
<template>
<view class="pkg-product-list">
<view class="first-half">
<view class="search-box flex jc-between ai-center">
<input
v-model="keyword"
type="text"
placeholder="搜索内容"
placeholder-style="color:#949494"
@confirm="searchClick"
>
<view class="search-box flex v12-justify-start ai-center">
<image
:src="webUrl+'/20220903142935869059.png'"
class="icon"
class="icon v12-mr-3"
mode="scaleToFill"
@click="searchClick"
/>
<input
v-model="keyword"
type="text"
placeholder="搜索城市"
placeholder-style="color:#949494"
@confirm="searchClick"
>
</view>
<swiper
v-if="bannerList.length > 0"
@@ -36,7 +36,7 @@
/>
</swiper-item>
</swiper>
<view
<!-- <view
v-show="tabIndex === 0"
class="tab-box flex jc-center ai-center"
>
@@ -65,6 +65,10 @@
class="active"
@click="changeTab(1)"
/>
</view> -->
<view class="v12-justify-start v12-align-center news-wrap v12-radius-100">
<view class="v12-font-bold v12-primary v12-white-text v12-mr-2 v12-pa-2 v12-radius-100 news-title">最新展会</view>
<view class="v12-font-28 v12-dark-text one-t" @click="toExpo">中国昆明第九届国际大健康暨养生养老博览会</view>
</view>
</view>
<view class="body-box">
@@ -72,15 +76,16 @@
<view
v-for="(item, index) in asideList"
:key="index"
:class="index === asideIndex ? 'active' : ''"
class="item flex jc-center ai-center"
@click="asideTap(index)"
:class="index === asideIndex ? 'actived' : ''"
class="item flex jc-center ai-center "
@click="asideTap(index, item.label)"
>
<text class="one-t">{{ item.label }}</text>
</view>
</view>
<view class="article-box">
<scroll-view
<view class="v12-mt-2 v12-ml-3 v12-px-1 v12-font-28 v12-dark-text v12-font-bold label-wrap">{{ label }}</view>
<scroll-view
v-if="dataList.length > 0"
:style="{'height':listHeight}"
:enable-flex="true"
@@ -169,7 +174,8 @@ export default {
asideList: [],
asideIndex: 0,
dataList: [],
pageKeyId: Object.freeze('wellnessFoodIndex')
pageKeyId: Object.freeze('wellnessFoodIndex'),
label: ''
}
},
onLoad() {
@@ -182,9 +188,15 @@ export default {
})
fetchCity(4).then(({data}) => {
this.asideList = data.group
this.label = this.asideList[this.asideIndex].label
this.searchReq()
})
},
toExpo() {
uni.navigateTo({
url: '/pkg_product/views/expoDetails'
})
},
changeTab(index) {
if (this.asideList.length === 0) return
if (index === this.tabIndex) return
@@ -239,10 +251,11 @@ export default {
}
})
},
asideTap(index) {
asideTap(index, label) {
this.asideIndex = index
this.page = 1
this.dataList = []
this.label = label
this.searchReq()
},
goStore(id) {
@@ -261,6 +274,19 @@ export default {
<style scoped lang="less">
@import "@/assets/css/product.less";
.news-title{
white-space: nowrap;
}
.actived, .label-wrap{
border-left: 6rpx solid #C52733;
color: #C52733;
font-weight: bold;
}
.news-wrap{
background: rgba(233,233,233,0.39);
width: 686rpx;
margin: 0 auto;
}
.pkg-product-list {
height: 100vh;
pkg_product/views/healthSanctum.vue
+152
View File
@@ -0,0 +1,152 @@
<template>
<view class="sanctum-wrap">
<view class="v12-justify-center">
<view class="v12-mr-3 v12-radius-100 v12-primary v12-white-text v12-px-5 v12-py-2 v12-font-28 v12-font-bold">养生圣地</view>
<view class="v12-radius-100 v12-grey v12-dark-text v12-px-5 v12-py-2 v12-font-28 v12-font-bold" @click="toFoods">养生食材</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">昆明市</view>
<view class="flex-1"><u-search :showAction="false"></u-search></view>
</view>
<view class="v12-justify-between swap">
<view v-for="(item, index) in traveItems" :key="index" class="trave-item-wrap v12-mr-3 v12-mt-3">
<view class="trave-item"></view>
<view class="trave-btn">旅居预约</view>
</view>
</view>
<view class="v12-justify-between v12-align-center v12-px-3 v12-mt-3">
<view
class="tab v12-font-bold v12-font-34 v12-dark-text "
v-for="(tab, index) in tabs"
@click="handleTab(index)"
:key="index">
<text>{{ tab.label }}</text>
<view :class="{'slider': index === actived}"></view>
</view>
</view>
<view class="v12-justify-between sanctup-items v12-mt-3">
<view v-for="(item, index) in items" :key="index" class="v12-pa-1">
<view class="img">
<view class="v12-white-text v12-font-weight-300 address">{{ item.adress }}</view>
</view>
<view class="v12-font-bold v12-font-28 more-t">{{ item.title }}</view>
<view class="v12-justify-start v12-align-center v12-my-2">
<view class="atr"></view>
<view class="v12-font-26 v12-ml-2 v12-dark-text one-t">{{ item.name }}</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tabs: [
{label: '泡温泉', value: 0},
{label: '养生茶馆', value: 1},
{label: '康养生活', value: 2},
{label: '养生食府', value: 3},
],
items: [
{img: '',adress: '昆明', title: '千年矿泉富含硅酸等等24种微量元素', atr: '', name: '末西梓言民宿'},
{img: '',adress: '昆明', title: '千年矿泉富含硅酸等等24种微量元素', atr: '', name: '末西梓言民宿'},
{img: '',adress: '昆明', title: '千年矿泉富含硅酸等等24种微量元素', atr: '', name: '末西梓言民宿'},
{img: '',adress: '昆明', title: '千年矿泉富含硅酸等等24种微量元素', atr: '', name: '末西梓言民宿'},
{img: '',adress: '昆明', title: '千年矿泉富含硅酸等等24种微量元素', atr: '', name: '末西梓言民宿'},
{img: '',adress: '昆明', title: '千年矿泉富含硅酸等等24种微量元素', atr: '', name: '末西梓言民宿'},
],
traveItems: [
{img: '', value: ''},
{img: '', value: ''},
{img: '', value: ''},
{img: '', value: ''},
{img: '', value: ''},
{img: '', value: ''},
{img: '', value: ''},
{img: '', value: ''},
],
actived: 0
}
},
methods: {
handleTab(index) {
this.actived = index
},
toFoods() {
uni.navigateTo({
url: '/pkg_product/views/healthFoods'
})
},
}
}
</script>
<style lang="less" scoped>
.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;
}
.address{
position: absolute;
left: 30rpx;
bottom: 30rpx;
}
.sanctup-items{
display: grid;
grid-template-columns: 50% 50%;
}
.atr{
width: 52rpx;
height: 52rpx;
background: #707070;
border-radius: 50%;
}
.img{
width: 320rpx;
height: 320rpx;
background: #707070;
border-radius: 16rpx;
position: relative;
}
.sanctum-wrap{
height: 100vh;
background-color: #fff;
padding: 20rpx ;
}
.tab{
position: relative;
}
.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;
}
</style>