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:
LinCyJang
2026-01-31 13:34:59 +08:00
parent 0072ccb2d1
commit 3da6899db0
4 changed files with 143 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
api/health.js
+9 -1
View File
@@ -78,4 +78,12 @@ export function getRecipe(params) {
*/
export function getBanner() {
return request.get("/wellness/exhibition/banner")
}
}
/**
* 康养生活-康养旅居顶部配置
* @returns
*/
export function getWellnessTopImage() {
return request.get("/wellness/topImage")
}
pages.json
+1 -1
View File
@@ -532,7 +532,7 @@
"path": "views/healthFoods",
"style": {
"navigationBarTitleText": "康养旅居",
"navigationBarBackgroundColor": "#FAEED8"
"navigationBarBackgroundColor": "#FFFFFF"
}
},
{
pkg_product/views/healthFoods.vue
+74 -76
View File
@@ -1,62 +1,28 @@
<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">
<view
class="banner-wrap"
v-if="topImageConfig && topImageConfig.backgroundImage"
>
<image
:src="webUrl + '/orderIcon/map_dark.png'"
:src="topImageConfig.backgroundImage"
class="banner-img"
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 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>
<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" @click="toDetails(item.id)">
<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">
<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="hasRankData">
<image
class="title-img"
@@ -67,7 +33,12 @@
<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>
<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
@@ -143,14 +114,19 @@
>
<view>
<view class="recommend-img">
<image class="recommend-img" :src="item.image" mode="aspectFit"></image>
<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
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"
@@ -188,7 +164,7 @@
</view>
</template>
<script>
import { getRank, getFoods, getRecipe } from "@/api/health";
import { getRank, getFoods, getRecipe, getWellnessTopImage } from "@/api/health";
import ProductWindow from '@/components/ProductWindow'
import goCartMixin from '@/mixins/goCartMixins'
export default {
@@ -219,17 +195,24 @@ export default {
}
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,
foodItems: [],
recommendItems: [],
cityId: "",
cityName: "",
keyword: "",
rank: [],
topImageConfig: {}
};
},
onLoad(opts) {
@@ -237,7 +220,7 @@ export default {
this.cityName = decodeURIComponent(opts.cityName);
this.getRank();
this.getList();
this.getRecipeList();
this.getTopImage();
},
methods: {
toGoods(id) {
@@ -257,17 +240,6 @@ export default {
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,
@@ -279,7 +251,6 @@ export default {
getList() {
const params = {
goodCityId: this.cityId,
keyword: this.keyword,
page: 1,
limit: 9999,
};
@@ -290,10 +261,37 @@ export default {
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;
@@ -479,7 +477,7 @@ export default {
}
.health-foods {
min-height: 100vh;
background-color: #faeed8;
background-color: #fff;
padding: 20rpx;
box-sizing: border-box;
}
pkg_product/views/healthSanctum.vue
+59 -42
View File
@@ -1,42 +1,28 @@
<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="banner-wrap"
v-if="topImageConfig && topImageConfig.backgroundImage"
>
<image
:src="webUrl + '/orderIcon/map_dark.png'"
:src="topImageConfig.backgroundImage"
class="banner-img"
mode="widthFix"
class="icon"
/>
<view class="v12-font-28 v12-secondary-dark-text v12-mr-3">{{ cityName }}</view>
<view class="flex-1" @click="search">
<u-search searchIconColor="#C52733" :disabled="true" :showAction="false" v-model="keyword" ></u-search>
<view class="banner-tabs v12-justify-center">
<image
class="tab-btn v12-mr-3"
:src="travelButtonSrc"
mode="widthFix"
/>
<image
class="tab-btn"
:src="wellnessButtonSrc"
mode="widthFix"
@click="toFoods"
/>
</view>
</view>
<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" @click="toStore(item)">
<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"
:show-center-play-btn="false"
:show-play-btn="false"
:poster="item.cover + '?vframe/jpg/offset/1'"
v-if="item.coverType === 2"
></video>
</view>
<view class="trave-btn">
<text>旅居预约</text>
<image :src="webUrl + '/orderIcon/arrow.png'" class="arrow-icon v12-ml-1"></image>
</view>
</view>
</swiper-item>
</swiper>
<view class="v12-justify-between v12-align-center v12-px-3 v12-mt-3 tabs-wrap">
<view
class="tab v12-font-34 v12-dark-text v12-mr-5"
@@ -88,8 +74,9 @@
</view>
</template>
<script>
import { getCategory,getWellnessPlace } from '@/api/health'
import { getCategory } from '@/api/health'
import { getJiaLouList } from '@/api/qianxian'
import { getWellnessTopImage } from '@/api/health'
export default {
data() {
return {
@@ -101,12 +88,20 @@ export default {
cityId: '',
cityName: '',
categoryId: null,
keyword: ''
topImageConfig: {}
}
},
computed: {
travelButtonSrc() {
const config = this.topImageConfig || {}
return config.travelButtonImageFocus || config.travelButtonImage || ''
},
wellnessButtonSrc() {
const config = this.topImageConfig || {}
return config.wellnessButtonImage || config.wellnessButtonImageFocus || ''
}
},
onLoad(opts) {
console.log(opts);
this.cityId = opts.city
this.cityName = decodeURIComponent(decodeURIComponent(opts.cityName))
getCategory().then(res => {
@@ -115,11 +110,9 @@ export default {
this.getList()
})
this.getTop()
this.getTopImage()
},
onUnload() {
// uni.navigateBack({
// delta: 0
// })
},
methods: {
handleTab(index, tab) {
@@ -134,7 +127,6 @@ export default {
},
getList() {
const params = {
// countyId: this.cityId,
goodCityId: this.cityId,
wellnessPlaceCateId : this.categoryId,
shopType: 'wellnessCate',
@@ -142,7 +134,6 @@ export default {
limit: 9999
}
getJiaLouList(params).then(res => {
// console.log(res);
this.items = res.data.records
})
},
@@ -159,7 +150,6 @@ export default {
limit: 9999
}
getJiaLouList(params).then(res => {
// console.log(res);
this.traveItems = res.data.records
})
},
@@ -175,10 +165,37 @@ export default {
uni.navigateTo({ url: '/pkg_product/views/sojoumStore?id=' + item.id })
}
},
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;
}
.tabs-wrap{
white-space: nowrap;
overflow: scroll;