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