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-09 23:58:37 +08:00
parent b397ba232f
commit 8c2e785ea0
5 changed files with 161 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages.json
+2 -1
View File
@@ -540,7 +540,8 @@
{
"path": "views/healthList",
"style": {
"navigationBarTitleText": "选择城市"
"navigationBarTitleText": "选择城市",
"navigationBarBackgroundColor": "#FFFFFF"
}
},
{
pkg_product/views/expoDetails.vue
+16 -7
View File
@@ -4,7 +4,7 @@
<video id="ky-video" class="ky-video" @error="videoErrorCallback" :show-fullscreen-btn="false" :src="details.video" autoplay controls></video>
</view>
<view class="expo-item">
{{ details.theme }}
{{ details.name }}
</view>
<view class="details-wrap v12-mt-3">
<view class="v12-font-bold v12-dark-text v12-font-32 v12-mb-3">展会信息</view>
@@ -14,7 +14,7 @@
</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">{{ details.content||'' }}</view>
<rich-text class="v12-ml-3" :nodes="details.content"></rich-text>
</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>
@@ -28,7 +28,10 @@
<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 class="v12-font-24 v12-align-center" @click="toMore">
<text>查看更多</text>
<image :src="webUrl + '/orderIcon/arrow.png'" class="arrow-icon v12-ml-1"></image>
</view>
</view>
<view
v-for="(item, index) in moreList"
@@ -45,6 +48,7 @@ import {getWellnessExhibitionDetails, getWellnessExhibition} from '@/api/health'
export default{
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
keyword: '',
moreList: [],
id: '',
@@ -89,6 +93,10 @@ export default{
}
</script>
<style lang="less" scoped>
.arrow-icon{
width: 25rpx;
height: 25rpx;
}
.ky-video{
height: 400rpx;
width: 100%;
@@ -98,17 +106,18 @@ export default{
height: 30rpx;
}
.expo-details{
height: 100vh;
min-height: 100vh;
box-sizing: border-box;
background: #fff;
padding: 20rpx;
}
.expo-item{
background-color: #f2f2f2;
border-radius: 100rpx;
border-radius: 0 0 20rpx 20rpx;
font-size: 26rpx;
font-weight: bold;
margin-top: 20rpx;
padding: 20rpx;
margin-top: -20rpx;
padding: 30rpx 20rpx 20rpx;
}
.details-wrap, .more-wrap{
width: 100%;
pkg_product/views/healthFoods.vue
+60 -59
View File
@@ -5,63 +5,48 @@
<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 + '/home/icon-location.png'"
class="icon"
/> -->
<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" @search="search"></u-search>
<u-search
:showAction="false"
v-model="keyword"
bgColor="#fff"
searchIconColor="#C52733"
@search="search"></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(item.id)">
<view class="trave-item">
<image class="trave-item" mode="widthFix" :src="item.indexImage"></image>
<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>
<view class="trave-btn">{{ item.name }}</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">
<view class="title-img"></view>
<view class="rank-wrap v12-mt-3" v-if="rank.length > 0">
<view class="rank-items-wrap">
<view class="bee-rank">
<image :src="rank[0].backgroundImage" class="bg-img"></image>
<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">{{ rank[0].title }}</view>
<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 rank[0].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 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"
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 }">
@@ -82,6 +67,7 @@
</view>
</view>
</view>
</view>
<view class="recommend-wrap v12-mt-3">
<view class="recommend-title v12-px-3">
@@ -100,9 +86,17 @@
<text class="v12-font-32">￥</text>
<text class="v12-font-36 ">{{ item.price }}</text>
</view>
<view class="cart-img"></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>
@@ -114,11 +108,6 @@ export default{
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
foodItems: [],
rankItems: [
{label: '原始森林野生蜂蜜', intro: '自然野生云南蜂蜜气味香甜可口，口感...', rank: 1, img: ''},
{label: '原始森林野生蜂蜜', intro: '自然野生云南蜂蜜气味香甜可口，口感...', rank: 2, img: ''},
{label: '原始森林野生蜂蜜', intro: '自然野生云南蜂蜜气味香甜可口，口感...', rank: 3, img: ''},
],
recommendItems: [],
cityId: '',
cityName: '',
@@ -163,7 +152,6 @@ export default{
goodCityId: this.cityId
}
getRank(params).then(res => {
console.log(res);
this.rank = res.data
})
},
@@ -185,6 +173,14 @@ export default{
}
</script>
<style lang="less" scoped>
.arrow-icon{
width: 25rpx;
height: 25rpx;
}
.icon{
width: 30rpx;
height: 30rpx;
}
.rank2-bg{
background-color: #ECDAD6 !important;
}
@@ -192,7 +188,7 @@ export default{
background-color: #DAE3F3 !important;
}
.rank3-3-bg{
background-color: #DAE3F4 !important;
background-color: #C8C8C8 !important;
}
.rank2-2-bg{
background-color: #D3B9B2 !important;
@@ -241,7 +237,6 @@ export default{
width: 48rpx;
height: 48rpx;
border-radius: 50%;
background: #999;
}
.bg-img{
position: absolute;
@@ -284,6 +279,10 @@ export default{
border-radius: 6rpx;
bottom: 5rpx;
}
.rank-wrap{
background: #E2BC8D;
border-radius: 20rpx;
}
.rank-tag{
width: 50rpx; /* 宽度 */
height: 55rpx; /* 高度，根据正六边形的几何特性计算 */
@@ -326,8 +325,7 @@ export default{
z-index: 999;
}
.rank-items-wrap{
background: #E2BC8D;
border-radius: 20rpx;
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 20rpx;
@@ -344,13 +342,13 @@ export default{
position: relative;
}
.title-img{
height: 132rpx;
width: 100%;
width: 404rpx;
}
.health-foods{
min-height: 100vh;
background-color: #FAEED8;
padding: 20rpx ;
padding: 20rpx;
box-sizing: border-box ;
}
.flex-1{
flex: 1;
@@ -374,6 +372,9 @@ export default{
font-size: 28rpx;
font-weight: bold;
padding: 10rpx 20rpx;
display: flex;
align-items: center;
justify-content:center;
}
.trave-item{
width: 382rpx;
pkg_product/views/healthList.vue
+30 -6
View File
@@ -1,8 +1,8 @@
<template>
<view class="pkg-product-list">
<view class="first-half">
<view class="search-box flex v12-justify-start ai-center">
<image
<view class="v12-px-3 v12-mb-4">
<!-- <image
:src="webUrl+'/20220903142935869059.png'"
class="icon v12-mr-3"
mode="scaleToFill"
@@ -11,10 +11,16 @@
<input
v-model="keyword"
type="text"
placeholder="搜索城市"
placeholder-style="color:#949494"
@confirm="searchClick"
>
> -->
<u-search
:showAction="false"
v-model="keyword"
bgColor="#f2f2f2"
placeholder="搜索城市"
searchIconColor="#C52733"
@search="searchClick"></u-search>
</view>
<swiper
v-if="bannerList.length > 0"
@@ -215,8 +221,25 @@ export default {
this.searchReq()
},
searchClick() {
this.page = 1
this.searchReq()
// this.page = 1
// this.searchReq()
const searchMap = this.asideList.map((e, i) => {
return e.city.map(_e => {
return {
index: i,
..._e
}
})
}).flat()
// console.log(searchMap);
const filterMap = searchMap.filter(el => el.cityName.includes(this.keyword))
if(filterMap.length === 0) {
return
} else {
this.asideIndex = filterMap[0].index
this.searchReq()
}
},
searchReq() {
let param = {
@@ -229,6 +252,7 @@ export default {
// wellnessPlaceList(param).then(({data}) => {
// this.handleData(data)
// })
this.label = this.asideList[this.asideIndex].label
this.dataList = this.asideList[this.asideIndex].city
}
// else {
pkg_product/views/healthSanctum.vue
+53 -11
View File
@@ -5,20 +5,30 @@
<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">
<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" @search="search"></u-search>
<u-search searchIconColor="#C52733" :showAction="false" v-model="keyword" @search="search"></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">
<image class="trave-item" :src="item.cover" mode="widthFix" v-if="item.coverType === 1"></image>
<video class="trave-item" :src="item.cover" :show-fullscreen-btn="false" v-if="item.coverType === 2"></video>
<swiper v-if="traveItems.length > 0" class="v12-justify-between swap" autoplay circular next-margin="300rpx" duration="10000" interval="3000" >
<swiper-item v-for="(item, index) in traveItems" :key="index" >
<view class="trave-item v12-mr-3 v12-mt-3">
<view class="trave-item">
<image class="trave-item" :src="item.cover" v-if="item.coverType === 1"></image>
<video class="trave-item" :src="item.cover" :show-fullscreen-btn="false" v-if="item.coverType === 2"></video>
</view>
<view class="trave-btn" @click="toStore(item.hotelId)">
<text>旅居预约</text>
<image :src="webUrl + '/orderIcon/arrow.png'" class="arrow-icon v12-ml-1"></image>
</view>
</view>
<view class="trave-btn" @click="toStore(item.hotelId)">旅居预约</view>
</view>
</view>
</swiper-item>
</swiper>
<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 "
@@ -40,7 +50,13 @@
:show-fullscreen-btn="false"
v-if="item.coverType === 2">
</video>
<view class="v12-white-text v12-font-weight-300 address">{{ item.areaName }}</view>
<view class="v12-white-text address">
<image
class="map-icon v12-mr-1"
:src="webUrl + '/orderIcon/map_white.png'"
></image>
<text class="v12-font-28">{{ item.areaName }}</text>
</view>
</view>
<view class="v12-font-bold v12-font-28 v12-mt-1 more-t" style="min-height: 76rpx; " @click="toStore(item.hotelId)">{{ item.address }}</view>
<view class="v12-justify-start v12-align-center v12-my-1" @click="toStore(item.hotelId)">
@@ -51,6 +67,11 @@
</view>
</view>
</view>
<view v-if="items.length === 0" class="v12-justify-center v12-mt-6">
<view class="no-data-wrap">
<image :src="webUrl + '/orderIcon/微信图片_20241009220552.png'" mode="widthFix"></image>
</view>
</view>
</view>
</template>
<script>
@@ -58,6 +79,7 @@ import { getCategory,getWellnessPlace } from '@/api/health'
export default {
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
tabs: [],
items: [],
traveItems: [],
@@ -129,6 +151,19 @@ export default {
}
</script>
<style lang="less" scoped>
.map-icon{
width: 28rpx;
height: 28rpx;
}
.arrow-icon{
width: 25rpx;
height: 25rpx;
}
.icon{
width: 30rpx;
height: 30rpx;
}
.flex-1{
flex: 1;
}
@@ -150,6 +185,9 @@ export default {
border-radius: 60rpx;
font-size: 28rpx;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
padding: 10rpx 20rpx;
}
.trave-item{
@@ -157,11 +195,15 @@ export default {
height: 272rpx;
background: rgba(230,178,178,0.39);
border-radius: 20rpx;
position: relative;
}
.address{
position: absolute;
left: 30rpx;
bottom: 30rpx;
display: flex;
align-items: center;
justify-content: center;
}
.sanctup-items{
display: grid;
@@ -180,7 +222,7 @@ export default {
position: relative;
}
.sanctum-wrap{
height: 100vh;
min-height: 100vh;
background-color: #fff;
padding: 20rpx ;
}