【Vue3.0移动端项目--旅游网】-- 房东评价、热门评论、预定须知模块

多一些不为什么的坚持🤳

贤蛋 🥚大眼萌 ，一名很普通但不想普通的程序媛🙊

📝本文章收录于专栏：Vue3.0移动端项目-旅游网

第一篇：【Vue3.0移动端项目–旅游网】–项目初始化搭建

第二篇：【Vue3.0移动端项目–旅游网】–配置tabBar &首页搭建

第三篇：【Vue3.0移动端项目–旅游网】-- 城市页面搭建

第四篇：【Vue3.0移动端项目–旅游网】-- 首页日期和热门推荐处理

第五篇：【Vue3.0移动端项目–旅游网】-- 首页分类和热门精选展示

第六篇：【Vue3.0移动端项目–旅游网】-- Loading加载和导航栏bug调试

第七篇：【Vue3.0移动端项目–旅游网】-- 房屋详情页创建以及房屋详情图片展示

第八篇：【Vue3.0移动端项目–旅游网】-- 房屋信息和房屋设施

🧲 新建 detail 分支

通过 Git 管理项目，养成良好的开发习惯，可以创建分支。最后开发完可以合并分支。

1. 创建新分支并且跳转到改分支上

git checkout -b detail02
1

2. 查看分支

git branch
1

⚙️ 房东介绍模块

完整代码：

<template>
  <div class="landlord">
    <DetailSection
      title="房东介绍"
      more-text="查看房东主页"
    >
      <div class="header">
        <div class="left">
          <div class="avatar">
            <img :src="landlord.hotelLogo">
          </div>
          <div class="info">
            <div class="name">{{landlord.hotelName}}</div>
            <div class="tags">
              <template
                v-for="(item,index) in landlord.hotelTags"
                :key="index"
              >
                <div class="item">
                  <span>{{item.tagText.text}}</span>
                  <span
                    class="diliver"
                    v-if="index !==landlord.hotelTags.length -1"
                  >|</span>
                </div>
              </template>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="contact">
            联系房东
          </div>
        </div>
      </div>
      <div class="bootom">
        <template
          v-for="(item,index) in landlord.hotelSummary"
          :key="index"
        >
          <div class="item">
            <div class="title">{{item.title}}</div>
            <div class="score">{{ item.introduction }}</div>
            <div class="desc">{{ item.tip }}</div>
          </div>
        </template>
      </div>

    </DetailSection>
  </div>
</template>

<script setup>
import DetailSection from "@/components/detail-section/detail-section.vue";
const props = defineProps({
  landlord: {
    type: Object,
    default: () => ({})
  }
})
</script>
 
<style lang="less" scoped>
.landlord {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    .left {
      display: flex;
      .avatar {
        img {
          width: 54px;
          height: 54px;
        }
      }
      .info {
        margin: 0px 6px;
        .name {
          font-size: 16px;
          font-weight: 800;
        }
        .tags {
          display: flex;
          margin: 6px 0px;
          color: #9d9d9d;
          .item {
            .diliver {
              margin: 5px;
            }
          }
        }
      }
    }
    .right {
      height: 24px;
      line-height: 24px;
      border-radius: 5px;
      padding: 0 12px;
      font-size: 12px;
      color: #fff;
      background-image: linear-gradient(90deg, #38b0de, #97cbff);
    }
  }
  .bootom {
    display: flex;
    justify-content: space-between;
    margin: 20px 4px;
    .item {
      font-size: 14px;
      .title {
        color: #999;
      }
      .score {
        margin: 5px 0;
        font-size: 18px;
        font-weight: 700;
        color: #333;
      }
      .desc {
        color: #666;
      }
    }
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

效果：

🧨 热门评论模块

完整代码：

<template>
  <div class="comment">
    <DetailSection
      title="热门评论"
      :more-text="`查看全部${comment.totalCount}条评论`"
    >
      <div class="comment-inner">
        <div class="header">
          <div class="left">
            <div class="score">
              <span class="text">{{comment.overall}}</span>
              <div class="line"></div>
            </div>
          </div>
          <div class="info">
            <div class="title">{{comment.scoreTitle}}</div>
            <div class="count">{{comment.totalCount}}条评论</div>
            <div class="star">
              <van-rate
                v-model="comment.overall"
                color="#38B0DE"
                size="14"
                readonly
                allow-half
              />
            </div>
          </div>
          <div class="right">
            <template
              v-for="(item,index) in comment.subScores"
              :key="index"
            >
              <span class="item">{{item}}</span>
            </template>
          </div>
        </div>
        <div class="tags">
          <template
            v-for="(item,index) in comment.commentTagVo"
            :key="index"
          >
            <span
              class="item"
              :style="{ color: item.color, background: item.backgroundColor }"
            >{{item.text}}</span>
          </template>
        </div>
        <div class="content">
          <div class="user">
            <div class="avatar">
              <img :src="comment.comment.userAvatars" />
            </div>
            <div class="profile">
              <div class="name">{{comment.comment.userName}}</div>
              <div class="date">{{comment.comment.checkInDate}}</div>
            </div>
          </div>
          <div class="text">{{comment.comment.commentDetail}}</div>
        </div>
      </div>
    </DetailSection>
  </div>
</template>

<script setup>
import DetailSection from "@/components/detail-section/detail-section.vue";
const props = defineProps({
  comment: {
    type: Object,
    default: () => ({})
  }
})
</script>
 
<style lang="less" scoped>
.comment-inner {
  padding: 10px 0;
  .header {
    display: flex;
    .left {
      display: flex;
      align-items: center;
      .score {
        width: 65px;
        height: 100%;
        color: #333;
        position: relative;
        .text {
          font-size: 48px;
          font-weight: 600;
          position: relative;
          z-index: 9;
        }
        .line {
          width: 65px;
          height: 6px;
          border-radius: 10px;
          background-color: #38b0de;
          position: absolute;
          z-index: 5;
        }
      }
    }
    .info {
      margin: 5px 20px;
      align-items: center;
      color: #333;
      .count {
        margin: 5px 0;
        color: #999;
      }
    }
    .right {
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      justify-content: flex-end;
      .item {
        margin: 0 5px;
        font-size: 14px;
        color: #666;
      }
    }
  }
  .tags {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0;
    .item {
      padding: 3px 5px;
      margin-right: 8px;
      margin-top: 5px;
      border-radius: 8px;
      font-size: 14px;
    }
  }
  .content {
    border-radius: 8px;
    background-color: #fcfcfc;
    .user {
      display: flex;
      padding: 5px 0;
      .avatar {
        padding-top: 8px;
        padding-left: 8px;
        img {
          width: 44px;
          height: 44px;
          border-radius: 50%;
        }
      }
      .profile {
        padding-top: 8px;
        margin-left: 12px;
        .date {
          margin-top: 3px;
          color: #999;
        }
      }
    }
    .text {
      font-size: 14px;
      line-height: 18px;
      margin-top: 16px;
    }
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168

效果：

🎉 预定须知

完整代码：

<template>
  <div class="notice">
    <DetailSection title="预定须知">
      <div class="notice-inner">
        <template
          v-for="(item,index) in orderRules"
          :key="index"
        >
          <div class="item">
            <span class="title">{{item.title}}</span>
            <span class="intro">{{ item.introduction }}</span>
            <span
              class="tip"
              v-if="item.tips"
            >查看说明</span>
          </div>
        </template>
      </div>
    </DetailSection>
  </div>
</template>

<script setup>
import DetailSection from "@/components/detail-section/detail-section.vue";
const props = defineProps({
  orderRules: {
    type: Array,
    default: []
  }
})

</script>
 
<style lang="less" scoped>
.notice-inner {
  .item {
    display: flex;
    margin: 10px 0 20px 2px;
    font-size: 14px;
    .title {
      width: 64px;
      color: #333;
    }
    .intro {
      flex: 1;
      color: #333;
    }
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

效果：

🧬 Git 管理和代码托管（github）

1. 添加到暂存区

git add .
1

2. 添加到仓库

git commit -m "detail03分支"
1

3. 推送代码

git push -u origin detail03
1

4. 将本地的 detail03 分支 合并到主分支上master （注意要先切换在主分支上）

git checkout mater
1

5. 分支合并

git merge detail03
1

6. 更新远程仓库 detail03分支

git push
1

7. 删除 detail03 分支

git branch -d detail03
1

补充：

网络数据请求地址数据

项目github 地址：https://github.com/fdfd-0313/cz-trip.git