Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
bdfa4f00 1 parent 25cbe201

新增服务功能模块

Inline Side-by-side
Showing 9 changed files with 276 additions and 5 deletions
......@@ -40,5 +40,6 @@ declare module '@vue/runtime-core' {
RoomCard: typeof import('./src/components/roomCard.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
ServerCard: typeof import('./src/components/serverCard.vue')['default']
}
}
......
/*
* @Date: 2023-12-14 17:45:15
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-21 15:52:17
* @LastEditTime: 2024-09-12 18:17:54
* @FilePath: /meihuaApp/src/app.config.js
* @Description: 文件描述
*/
......@@ -9,6 +9,7 @@ export default defineAppConfig({
pages: [
'pages/index/index',
'pages/book/index',
'pages/serverInfo/index',
'pages/my/index',
'pages/detail/index',
'pages/confirm/index',
......
<!--
* @Date: 2022-09-21 11:59:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-22 10:37:38
* @LastEditTime: 2024-09-13 10:52:42
* @FilePath: /meihuaApp/src/components/navBar.vue
* @Description: 底部导航栏
-->
......@@ -19,6 +19,12 @@
</view>
<view><text :style="bookStyle">订房</text></view>
</view>
<view @tap="goTo('serverInfo')" class="server">
<view style="height: 1.5rem;">
<IconFont :name="icon_server" size="1.5rem" color="" />
</view>
<view><text :style="serverStyle">服务</text></view>
</view>
<view @tap="goTo('my')" class="my">
<view style="height: 1.5rem;">
<IconFont :name="icon_my" size="1.5rem" color="" />
......@@ -37,6 +43,8 @@ import icon_my1 from '@/images/icon/icon_my1@2x.png'
import icon_my2 from '@/images/icon/icon_my2@2x.png'
import icon_book1 from '@/images/icon/icon_book1@2x.png'
import icon_book2 from '@/images/icon/icon_book2@2x.png'
import icon_server1 from '@/images/icon/icon_server1.png'
import icon_server2 from '@/images/icon/icon_server2.png'
// import { hostListAPI } from '@/api/Host/index'
import { IconFont } from '@nutui/icons-vue-taro';
......@@ -93,6 +101,7 @@ const props = defineProps({
const homeStyle = ref({})
const myStyle = ref({})
const bookStyle = ref({})
const serverStyle = ref({})
const icon_home = computed(() => {
if (props.activated === 'index') {
......@@ -115,6 +124,13 @@ const icon_book = computed(() => {
return icon_book2
}
})
const icon_server= computed(() => {
if (props.activated === 'serverInfo') {
return icon_server1
} else {
return icon_server2
}
})
if (props.activated === 'index') {
homeStyle.value = {
......@@ -129,6 +145,10 @@ if (props.activated === 'index') {
color: '#999999',
fontSize: '0.9rem'
}
serverStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
} else if (props.activated === 'my') {
homeStyle.value = {
color: '#999999',
......@@ -142,7 +162,11 @@ if (props.activated === 'index') {
color: '#999999',
fontSize: '0.9rem'
}
} else {
serverStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
} else if (props.activated === 'book') {
homeStyle.value = {
color: '#999999',
fontSize: '0.9rem'
......@@ -155,6 +179,27 @@ if (props.activated === 'index') {
color: '#6A4925',
fontSize: '0.9rem'
}
serverStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
} else if (props.activated === 'serverInfo') {
homeStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
myStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
bookStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
serverStyle.value = {
color: '#6A4925',
fontSize: '0.9rem'
}
}
</script>
......@@ -170,14 +215,21 @@ if (props.activated === 'index') {
.home {
position: absolute;
left: 15%;
left: 10%;
transform: translateX(-15%);
text-align: center;
}
.book {
position: absolute;
left: 50%;
left: 35%;
transform: translateX(-50%);
text-align: center;
}
.server {
position: absolute;
left: 60%;
transform: translateX(-50%);
text-align: center;
}
......
<!--
* @Date: 2023-12-13 13:42:23
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-13 15:48:27
* @FilePath: /meihuaApp/src/components/serverCard.vue
* @Description: 房间详情组件
-->
<template>
<view class="server-card-component">
<image class="server-cover" mode="scaleToFill" :src="cover" />
<view class="overlay">
<view class="text">{{ title }}</view>
<view class="more" @tap="getMore(id)">了解详情</view>
</view>
</view>
</template>
<script setup>
import { ref, defineProps, onMounted, watch } from 'vue'
import Taro from '@tarojs/taro'
const props = defineProps({
data: { // 详情
type: Object,
default: {},
},
});
const id = ref(''); // 房间id
const cover = ref(''); // 封面图
const title = ref(''); // 标题
onMounted(() => {
id.value = props.data.id;
cover.value = props.data.cover ? props.data.cover : 'https://cdn.ipadbiz.cn/meihua/img1@2x.png';
title.value = props.data.title;
});
watch(
() => props.data,
(val) => {
if (val) {
id.value = val.id;
cover.value = val.cover ? val.cover : 'https://cdn.ipadbiz.cn/meihua/img1@2x.png';
title.value = val.title;
}
},
{
deep: true,
immediate: true
}
);
const getMore = (id) => {
Taro.previewImage({
// 需要预览的图片链接列表
urls: ['https://cdn.ipadbiz.cn/meihua/temp/f600f0432b0b1cf075bdc1bcc24feb47.jpg'],
// 为当前显示图片的链接/索引值
current: 'https://cdn.ipadbiz.cn/meihua/temp/f600f0432b0b1cf075bdc1bcc24feb47.jpg',
// 图片指示器样式
indicator:'default',
// 是否可循环预览
loop:false,
// 长按图片显示操作菜单，如不填默认为保存相册
// longPressActions:{
// itemList:[this.l('发送给朋友'),this.l]
// },
success: res => {
console.warn('res', res);
},
fail: err => {
console.error('err', err);
}
})
}
</script>
<style lang="less">
:root,
page {
--nut-price-medium-size: 35rpx;
}
.server-card-component {
position: relative;
margin-bottom: 1rem;
background-color: white;
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
border: 1px solid #f9f9f9;
border-radius: 0.5rem;
overflow: hidden;
display: flex;
align-items: flex-end; /* 图片底部对齐 */
.server-cover {
width: 100%;
height: 13rem;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background-color: rgba(0, 0, 0, 0.4); /* 半透明的黑色背景 */
color: #fff;
.text {
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.more {
font-size: 0.85rem;
background: rgba(106,73,37,0.35);
border-radius: 34rpx 34rpx 34rpx 34rpx;
border: 2rpx solid #94795C;
padding: 0.5rem 1.5rem;
}
}
}
</style>
/*
* @Date: 2024-09-12 18:12:47
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-12 18:30:20
* @FilePath: /meihuaApp/src/pages/serverInfo/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '服务',
usingComponents: {
},
}
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-13 17:32:40
* @FilePath: /meihuaApp/src/pages/serverInfo/index.vue
* @Description: 文件描述
-->
<template>
<view class="serverInfo-page">
<view style="padding: 1rem;">
<view v-if="showContent" class="book-list">
<scroll-view ref="refScrollView" :style="scrollStyle" :scroll-y="true" :scroll-with-animation="true">
<view v-for="(item, index) in serverList" :key="index">
<server-card :key="index" :data="item"></server-card>
</view>
<view style="height: 2rem;"></view>
</scroll-view>
</view>
</view>
<nav-bar activated="serverInfo" />
</view>
</template>
<script setup>
import Taro from '@tarojs/taro'
import { ref } from "vue";
import navBar from '@/components/navBar.vue';
import serverCard from '@/components/serverCard.vue'
</script>
<script>
import "./index.less";
import { $ } from '@tarojs/extend'
import mixin from '@/utils/mixin';
import { getListAPI } from '@/api/index'
export default {
name: "serverPage",
mixins: [mixin.init],
async onShow () {
// TODO：获取活动信息
const { code, data } = await getListAPI({ page: this.page, limit: this.limit });
if (code) {
this.serverList = data;
}
},
onHide () { // 离开当前页面
},
computed: {
scrollStyle() {
return {
refScrollView: null,
height: this.indexCoverHeight + 'px',
};
},
},
mounted () {
// 设置首页封面高度
const windowHeight = wx.getSystemInfoSync().windowHeight;
// 处理切换显示白屏问题
setTimeout(() => {
this.showContent = true;
}, 100);
this.$nextTick(async () => {
const navHeight = await $('#navbar-page').height();
this.indexCoverHeight = windowHeight - navHeight;
});
},
data() {
return {
showContent: false,
indexCoverHeight: 0,
serverList: [],
page: 1,
limit: 100,
};
},
};
</script>