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' { ...@@ -40,5 +40,6 @@ declare module '@vue/runtime-core' {
40 RoomCard: typeof import('./src/components/roomCard.vue')['default'] 40 RoomCard: typeof import('./src/components/roomCard.vue')['default']
41 RouterLink: typeof import('vue-router')['RouterLink'] 41 RouterLink: typeof import('vue-router')['RouterLink']
42 RouterView: typeof import('vue-router')['RouterView'] 42 RouterView: typeof import('vue-router')['RouterView']
43 + ServerCard: typeof import('./src/components/serverCard.vue')['default']
43 } 44 }
44 } 45 }
......
1 /* 1 /*
2 * @Date: 2023-12-14 17:45:15 2 * @Date: 2023-12-14 17:45:15
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-21 15:52:17 4 + * @LastEditTime: 2024-09-12 18:17:54
5 * @FilePath: /meihuaApp/src/app.config.js 5 * @FilePath: /meihuaApp/src/app.config.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -9,6 +9,7 @@ export default defineAppConfig({ ...@@ -9,6 +9,7 @@ export default defineAppConfig({
9 pages: [ 9 pages: [
10 'pages/index/index', 10 'pages/index/index',
11 'pages/book/index', 11 'pages/book/index',
12 + 'pages/serverInfo/index',
12 'pages/my/index', 13 'pages/my/index',
13 'pages/detail/index', 14 'pages/detail/index',
14 'pages/confirm/index', 15 'pages/confirm/index',
......
1 <!-- 1 <!--
2 * @Date: 2022-09-21 11:59:20 2 * @Date: 2022-09-21 11:59:20
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-22 10:37:38 4 + * @LastEditTime: 2024-09-13 10:52:42
5 * @FilePath: /meihuaApp/src/components/navBar.vue 5 * @FilePath: /meihuaApp/src/components/navBar.vue
6 * @Description: 底部导航栏 6 * @Description: 底部导航栏
7 --> 7 -->
...@@ -19,6 +19,12 @@ ...@@ -19,6 +19,12 @@
19 </view> 19 </view>
20 <view><text :style="bookStyle">订房</text></view> 20 <view><text :style="bookStyle">订房</text></view>
21 </view> 21 </view>
22 + <view @tap="goTo('serverInfo')" class="server">
23 + <view style="height: 1.5rem;">
24 + <IconFont :name="icon_server" size="1.5rem" color="" />
25 + </view>
26 + <view><text :style="serverStyle">服务</text></view>
27 + </view>
22 <view @tap="goTo('my')" class="my"> 28 <view @tap="goTo('my')" class="my">
23 <view style="height: 1.5rem;"> 29 <view style="height: 1.5rem;">
24 <IconFont :name="icon_my" size="1.5rem" color="" /> 30 <IconFont :name="icon_my" size="1.5rem" color="" />
...@@ -37,6 +43,8 @@ import icon_my1 from '@/images/icon/icon_my1@2x.png' ...@@ -37,6 +43,8 @@ import icon_my1 from '@/images/icon/icon_my1@2x.png'
37 import icon_my2 from '@/images/icon/icon_my2@2x.png' 43 import icon_my2 from '@/images/icon/icon_my2@2x.png'
38 import icon_book1 from '@/images/icon/icon_book1@2x.png' 44 import icon_book1 from '@/images/icon/icon_book1@2x.png'
39 import icon_book2 from '@/images/icon/icon_book2@2x.png' 45 import icon_book2 from '@/images/icon/icon_book2@2x.png'
46 +import icon_server1 from '@/images/icon/icon_server1.png'
47 +import icon_server2 from '@/images/icon/icon_server2.png'
40 // import { hostListAPI } from '@/api/Host/index' 48 // import { hostListAPI } from '@/api/Host/index'
41 import { IconFont } from '@nutui/icons-vue-taro'; 49 import { IconFont } from '@nutui/icons-vue-taro';
42 50
...@@ -93,6 +101,7 @@ const props = defineProps({ ...@@ -93,6 +101,7 @@ const props = defineProps({
93 const homeStyle = ref({}) 101 const homeStyle = ref({})
94 const myStyle = ref({}) 102 const myStyle = ref({})
95 const bookStyle = ref({}) 103 const bookStyle = ref({})
104 +const serverStyle = ref({})
96 105
97 const icon_home = computed(() => { 106 const icon_home = computed(() => {
98 if (props.activated === 'index') { 107 if (props.activated === 'index') {
...@@ -115,6 +124,13 @@ const icon_book = computed(() => { ...@@ -115,6 +124,13 @@ const icon_book = computed(() => {
115 return icon_book2 124 return icon_book2
116 } 125 }
117 }) 126 })
127 +const icon_server= computed(() => {
128 + if (props.activated === 'serverInfo') {
129 + return icon_server1
130 + } else {
131 + return icon_server2
132 + }
133 +})
118 134
119 if (props.activated === 'index') { 135 if (props.activated === 'index') {
120 homeStyle.value = { 136 homeStyle.value = {
...@@ -129,6 +145,10 @@ if (props.activated === 'index') { ...@@ -129,6 +145,10 @@ if (props.activated === 'index') {
129 color: '#999999', 145 color: '#999999',
130 fontSize: '0.9rem' 146 fontSize: '0.9rem'
131 } 147 }
148 + serverStyle.value = {
149 + color: '#999999',
150 + fontSize: '0.9rem'
151 + }
132 } else if (props.activated === 'my') { 152 } else if (props.activated === 'my') {
133 homeStyle.value = { 153 homeStyle.value = {
134 color: '#999999', 154 color: '#999999',
...@@ -142,7 +162,11 @@ if (props.activated === 'index') { ...@@ -142,7 +162,11 @@ if (props.activated === 'index') {
142 color: '#999999', 162 color: '#999999',
143 fontSize: '0.9rem' 163 fontSize: '0.9rem'
144 } 164 }
145 -} else { 165 + serverStyle.value = {
166 + color: '#999999',
167 + fontSize: '0.9rem'
168 + }
169 +} else if (props.activated === 'book') {
146 homeStyle.value = { 170 homeStyle.value = {
147 color: '#999999', 171 color: '#999999',
148 fontSize: '0.9rem' 172 fontSize: '0.9rem'
...@@ -155,6 +179,27 @@ if (props.activated === 'index') { ...@@ -155,6 +179,27 @@ if (props.activated === 'index') {
155 color: '#6A4925', 179 color: '#6A4925',
156 fontSize: '0.9rem' 180 fontSize: '0.9rem'
157 } 181 }
182 + serverStyle.value = {
183 + color: '#999999',
184 + fontSize: '0.9rem'
185 + }
186 +} else if (props.activated === 'serverInfo') {
187 + homeStyle.value = {
188 + color: '#999999',
189 + fontSize: '0.9rem'
190 + }
191 + myStyle.value = {
192 + color: '#999999',
193 + fontSize: '0.9rem'
194 + }
195 + bookStyle.value = {
196 + color: '#999999',
197 + fontSize: '0.9rem'
198 + }
199 + serverStyle.value = {
200 + color: '#6A4925',
201 + fontSize: '0.9rem'
202 + }
158 } 203 }
159 204
160 </script> 205 </script>
...@@ -170,14 +215,21 @@ if (props.activated === 'index') { ...@@ -170,14 +215,21 @@ if (props.activated === 'index') {
170 215
171 .home { 216 .home {
172 position: absolute; 217 position: absolute;
173 - left: 15%; 218 + left: 10%;
174 transform: translateX(-15%); 219 transform: translateX(-15%);
175 text-align: center; 220 text-align: center;
176 } 221 }
177 222
178 .book { 223 .book {
179 position: absolute; 224 position: absolute;
180 - left: 50%; 225 + left: 35%;
226 + transform: translateX(-50%);
227 + text-align: center;
228 + }
229 +
230 + .server {
231 + position: absolute;
232 + left: 60%;
181 transform: translateX(-50%); 233 transform: translateX(-50%);
182 text-align: center; 234 text-align: center;
183 } 235 }
......
1 +<!--
2 + * @Date: 2023-12-13 13:42:23
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-09-13 15:48:27
5 + * @FilePath: /meihuaApp/src/components/serverCard.vue
6 + * @Description: 房间详情组件
7 +-->
8 +<template>
9 + <view class="server-card-component">
10 + <image class="server-cover" mode="scaleToFill" :src="cover" />
11 + <view class="overlay">
12 + <view class="text">{{ title }}</view>
13 + <view class="more" @tap="getMore(id)">了解详情</view>
14 + </view>
15 + </view>
16 +</template>
17 +
18 +<script setup>
19 +import { ref, defineProps, onMounted, watch } from 'vue'
20 +import Taro from '@tarojs/taro'
21 +
22 +const props = defineProps({
23 + data: { // 详情
24 + type: Object,
25 + default: {},
26 + },
27 +});
28 +
29 +const id = ref(''); // 房间id
30 +const cover = ref(''); // 封面图
31 +const title = ref(''); // 标题
32 +
33 +onMounted(() => {
34 + id.value = props.data.id;
35 + cover.value = props.data.cover ? props.data.cover : 'https://cdn.ipadbiz.cn/meihua/img1@2x.png';
36 + title.value = props.data.title;
37 +});
38 +
39 +watch(
40 + () => props.data,
41 + (val) => {
42 + if (val) {
43 + id.value = val.id;
44 + cover.value = val.cover ? val.cover : 'https://cdn.ipadbiz.cn/meihua/img1@2x.png';
45 + title.value = val.title;
46 + }
47 + },
48 + {
49 + deep: true,
50 + immediate: true
51 + }
52 +);
53 +
54 +const getMore = (id) => {
55 + Taro.previewImage({
56 + // 需要预览的图片链接列表
57 + urls: ['https://cdn.ipadbiz.cn/meihua/temp/f600f0432b0b1cf075bdc1bcc24feb47.jpg'],
58 + // 为当前显示图片的链接/索引值
59 + current: 'https://cdn.ipadbiz.cn/meihua/temp/f600f0432b0b1cf075bdc1bcc24feb47.jpg',
60 + // 图片指示器样式
61 + indicator:'default',
62 + // 是否可循环预览
63 + loop:false,
64 + // 长按图片显示操作菜单，如不填默认为保存相册
65 + // longPressActions:{
66 + // itemList:[this.l('发送给朋友'),this.l]
67 + // },
68 + success: res => {
69 + console.warn('res', res);
70 + },
71 + fail: err => {
72 + console.error('err', err);
73 + }
74 + })
75 +}
76 +</script>
77 +
78 +<style lang="less">
79 +:root,
80 +page {
81 + --nut-price-medium-size: 35rpx;
82 +}
83 +.server-card-component {
84 + position: relative;
85 + margin-bottom: 1rem;
86 + background-color: white;
87 + box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
88 + border: 1px solid #f9f9f9;
89 + border-radius: 0.5rem;
90 + overflow: hidden;
91 + display: flex;
92 + align-items: flex-end; /* 图片底部对齐 */
93 + .server-cover {
94 + width: 100%;
95 + height: 13rem;
96 + }
97 + .overlay {
98 + position: absolute;
99 + top: 0;
100 + left: 0;
101 + right: 0;
102 + bottom: 0;
103 + display: flex;
104 + flex-direction: column;
105 + justify-content: center;
106 + align-items: center;
107 + text-align: center;
108 + background-color: rgba(0, 0, 0, 0.4); /* 半透明的黑色背景 */
109 + color: #fff;
110 + .text {
111 + font-size: 1.5rem;
112 + margin-bottom: 1.5rem;
113 + }
114 + .more {
115 + font-size: 0.85rem;
116 + background: rgba(106,73,37,0.35);
117 + border-radius: 34rpx 34rpx 34rpx 34rpx;
118 + border: 2rpx solid #94795C;
119 + padding: 0.5rem 1.5rem;
120 + }
121 + }
122 +}
123 +</style>
1 +/*
2 + * @Date: 2024-09-12 18:12:47
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-09-12 18:30:20
5 + * @FilePath: /meihuaApp/src/pages/serverInfo/index.config.js
6 + * @Description: 文件描述
7 + */
8 +export default {
9 + navigationBarTitleText: '服务',
10 + usingComponents: {
11 + },
12 +}
1 +.serverInfo-page {
2 +
3 +}
1 +<!--
2 + * @Date: 2022-09-19 14:11:06
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-09-13 17:32:40
5 + * @FilePath: /meihuaApp/src/pages/serverInfo/index.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <view class="serverInfo-page">
10 + <view style="padding: 1rem;">
11 + <view v-if="showContent" class="book-list">
12 + <scroll-view ref="refScrollView" :style="scrollStyle" :scroll-y="true" :scroll-with-animation="true">
13 + <view v-for="(item, index) in serverList" :key="index">
14 + <server-card :key="index" :data="item"></server-card>
15 + </view>
16 + <view style="height: 2rem;"></view>
17 + </scroll-view>
18 + </view>
19 + </view>
20 + <nav-bar activated="serverInfo" />
21 + </view>
22 +</template>
23 +
24 +<script setup>
25 +import Taro from '@tarojs/taro'
26 +import { ref } from "vue";
27 +import navBar from '@/components/navBar.vue';
28 +import serverCard from '@/components/serverCard.vue'
29 +</script>
30 +
31 +<script>
32 +import "./index.less";
33 +import { $ } from '@tarojs/extend'
34 +import mixin from '@/utils/mixin';
35 +import { getListAPI } from '@/api/index'
36 +
37 +export default {
38 + name: "serverPage",
39 + mixins: [mixin.init],
40 + async onShow () {
41 + // TODO：获取活动信息
42 + const { code, data } = await getListAPI({ page: this.page, limit: this.limit });
43 + if (code) {
44 + this.serverList = data;
45 + }
46 + },
47 + onHide () { // 离开当前页面
48 + },
49 + computed: {
50 + scrollStyle() {
51 + return {
52 + refScrollView: null,
53 + height: this.indexCoverHeight + 'px',
54 + };
55 + },
56 + },
57 + mounted () {
58 + // 设置首页封面高度
59 + const windowHeight = wx.getSystemInfoSync().windowHeight;
60 + // 处理切换显示白屏问题
61 + setTimeout(() => {
62 + this.showContent = true;
63 + }, 100);
64 + this.$nextTick(async () => {
65 + const navHeight = await $('#navbar-page').height();
66 + this.indexCoverHeight = windowHeight - navHeight;
67 + });
68 + },
69 + data() {
70 + return {
71 + showContent: false,
72 + indexCoverHeight: 0,
73 + serverList: [],
74 + page: 1,
75 + limit: 100,
76 + };
77 + },
78 +};
79 +</script>