Scenic Spot Details Module

Search page preliminary implementation and jump

Create search. vue in the views folder

<template> <! -- Search page --><div class="page-search">
      <! - the title -- -- >
      <van-nav-bar title="Search for attractions" />
      <! -- Search box -->
      <van-search
        v-model="value"
        show-action
        label="Attraction"
        placeholder="Please enter your search terms"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">search</div>
        </template>
      </van-search>
      <! List -- - >
      <div class="sight-list">
        <SightItem v-for="item in dataList"
          :key="item.id"
          :item="item"/>
      </div>
      <! - page - >
      <van-pagination v-model="currentPage" :total-items="totalItems" :items-per-page="perPage" />
      <! - the footer - >
      <TripFooter/>
  </div>
</template>
<script>
import SightItem from '@/components/common/ListSight'
import TripFooter from '@/components/common/Footer'
export default {
  data () {
    return {
      // Name of scenic spot
      sightName: ' '.// List of attractions
      dataList: [].// Total number of records
      totalItems: 0.// Current page number
      currentPage: 1.// The size of data per page
      perPage: 5}},components: {
    SightItem,
    TripFooter
  },
  methods: {
    onSearch () {
      console.log('onSearch')}}}</script>

Copy the code

Set the routing

The router under index. Js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '.. /views/Home.vue'
import Search from '.. /views/Search.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/'.name: 'Home'.component: Home
  },
  {
    path: '/search'.name: 'Search'.component: Search
  }
]

const router = new VueRouter({
  routes
})

export default router

Copy the code

Set the forward footer. vue of the route

<template> <! Bottom navigation --><div>
    <van-tabbar v-model="active" route>
      <van-tabbar-item name="home" icon="wap-home-o" :to="{name: 'Home'}">Home page</van-tabbar-item>
      <van-tabbar-item name="search" icon="search" :to="{name: 'Search'}">search</van-tabbar-item>
      <van-tabbar-item name="mine" icon="user-o">my</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data () {
    return {
      active: 'home'}}}</script>

Copy the code

Remove unnecessary content from app.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="less">
@import "./assets/style/common.less";
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983; }}}</style>

Copy the code

Effect:

Click the search button to jump to the search page

Attractions Details Page

Create the Sight folder under the Views folder

Create five new VUE files

List of sightList.vue

Sightdeatail.vue

Sightinfo.vue

The list of sightcomments.vue

Sightimage.vue picture under sightimage.sightimage.vue

Contents are for the time being

<template>
  <div class="page-sight-info"></div>
</template>
Copy the code

Add the routing

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '.. /views/Home.vue'
import Search from '.. /views/Search.vue'
import SightList from '.. /views/sight/SightList.vue'
import SightDeatail from '.. /views/sight/SightDeatail.vue'
import SightInfo from '.. /views/sight/SightInfo.vue'
import SightComment from '.. /views/sight/SightComment.vue'
import SightImage from '.. /views/sight/SightImage.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/'.name: 'Home'.component: Home
  },
  {
    path: '/search'.name: 'Search'.component: Search
  },
  // List of attractions
  {
    path: '/search/list'.name: 'SightList'.component: SightList
  },
  // Attractions details
  {
    path: '/sight/detail/:id'.name: 'SightDeatail'.component: SightDeatail
  },
  // Attractions introduction
  {
    path: '/sight/info/:id'.name: 'SightInfo'.component: SightInfo
  },
  // List of comments
  {
    path: '/sight/comment/:id'.name: 'SightComment'.component: SightComment
  },
  // The image below the scenic spot
  {
    path: '/sight/image/:id'.name: 'SightImage'.component: SightImage
  }
]

const router = new VueRouter({
  routes
})

export default router

Copy the code

Modify component jump

The A tag of ListSight. Vue in the common folder

<template>
  <router-link class="sight-item"
    :to="{ name: 'SightDeatail', params: { id: item.id }}">
    <img :src="item.main_img" alt="">
    <div class="right">
        <h5>{{ item.name }}</h5>
        <van-rate v-model="item.score" readonly/>
        <div class="tips">Ment_count} {{item.com} people comment on | 100% satisfaction</div>
        <div class="tips light">{{ item.province }} - {{ item.city }}</div>
        <div class="line-price">￥{{item.min_price}</div>
    </div>
  </router-link>
</template>
<script>
export default {
  props: ['item']}</script>
<style lang="less">
.sight-item {
  display: flex;
  margin-top: 10px;
  border-bottom: 1px solid #f6f6f6;
  img {
    width: 100px;
    height: 100px;
  }
  h5 {
    color: # 212121;
    font-size: 14px;
    padding: 5px 0;
    margin: 0;
  }
  .right {
    text-align: left;
    flex-grow: 1;
    text-align: left;
    justify-content: left;
    padding-left: 5px;
    position: relative;
  }
  .line-price {
    position: absolute;
    right: 10px;
    top: 20px;
    display: inline-block;
    color: #f50;
    font-size: 16px;
    font-weight: bold;
  }
  .tips {
    font-size: 12px;
    color: # 666;
  &.light {
    color: # 999; }}}</style>

Copy the code

Hot.vue

<template>
    <div class="home-hot-box">
        <! Navigation -- - >
        <van-cell
          icon="/static/home/hot/fire.png"
          title="Top recommendations"
          title-style="text-align:left"
          value="The Whole list."
          is-link
          :to="{name: 'SightList', Query: {name:' SightList'}}" />
        <! List -- - >
        <div class="box-main">
          <router-link class="hot-item"
            v-for="item in dataList"
            :key="item.id"
            :to="{ name: 'SightDeatail', params: { id: item.id }}">
              <div class="img">
                  <span></span>
                  <img :src="item.main_img" alt="">
              </div>
              <h5 class="van-ellipsis">{{ item.name }}</h5>
              <div class="line-price">
                  <span class="price">${{item. Min_price}}</span>since</div>
          </router-link>
        </div>
    </div>
</template>
<script>
import { ajax } from '@/utils/ajax'
import { SightApis } from '@/utils/apis'
export default {
  data () {
    return {
      dataList: []}},methods: {
    getDataList () {
      ajax.get(SightApis.sightListUrl, {
        params: {
          is_hot: 1
        }
      }).then(({ data }) = > {
        this.dataList = data.objects
      })
    }
  },
  created () {
    // Query interface data
    this.getDataList()
  }
}
</script>
<style lang="less">
.home-hot-box {
  padding: 0 10px;
  .van-cell {
    padding: 10px 0;
  }
  .box-main {
    width: 100%;
    display: flex;
    padding-top: 10px;
    overflow-x: scroll;
  }
  .hot-item {
    display: flex;
    flex-direction: column;
    width: 100px;
    margin-right: 10px;
    padding-bottom: 10px;

    .img {
      position: relative;

      span {
        position: absolute;
        left: 0;
        top: 0;
        display: inline-block;
        width: 42px;
        height: 20px;
        z-index: 10;
      }

      img {
        width: 100px;
        height: 100px; }}h5 {
      color: # 212121;
      padding: 2px 0;
      font-size: 12px;
      margin: 0;
    }

    .line-price {
      color: # 212121;
      font-size: 12px;
      .price {
        color: #f50;
        font-size: 13px; }} &:nth-child(1) .img span {
      background: url(/static/home/hot/top1.png) no-repeat;
      background-size: 100% auto;
    }
    &:nth-child(2) .img span {
      background: url(/static/home/hot/top2.png) no-repeat;
      background-size: 100% auto;
    }
    &:nth-child(3) .img span {
      background: url(/static/home/hot/top3.png) no-repeat;
      background-size: 100%auto; }}}</style>

Copy the code

Fine.vue

<template> <! -- Selected scenic spots --><div class="home-fine-box">
      <! Navigation -- - >
        <van-cell
          icon="location-o"
          title="Selected Attractions"
          title-style="text-align:left"
          value="The Whole list."
          is-link
          :to="{name: 'SightList', Query: {name:' SightList'}}"/>
        <! List -- - >
        <div class="box-main">
          <SightItem v-for="item in dataList"
          :key="item.id"
          :item="item"/>
        </div>
    </div>
</template>
<script>
import { ajax } from '@/utils/ajax'
import { SightApis } from '@/utils/apis'
import SightItem from '@/components/common/ListSight'
export default {
  components: {
    SightItem
  },
  data () {
    return {
      dataList: []}},methods: {
    getDataList () {
      ajax.get(SightApis.sightListUrl, {
        params: {
          is_top: 1
        }
      }).then(({ data }) = > {
        this.dataList = data.objects
      })
    }
  },
  created () {
    this.getDataList()
  }
}
</script>
<style lang="less">
.home-fine-box {
  padding: 0 10px;
  .van-cell {
    padding: 10px 0;
  }
  .box-main {
    padding-bottom: 50px; }}</style>

Copy the code

Effect of jump

Click on popular recommendations or selected attractions

Write a comment list component

Under Components

Create a New Sight folder

New CommentItem. Vue

<template> <! -- Each item on the comment list --><div class="comment-item-box">
    <div class="cmt-header">
      <div class="rate">
        <van-rate v-model="value"
        allow-half
        readonly
        void-icon="star"
        void-color="#eee"/>
      </div>
      <div class="user">* * * * * 2020-02-02</div>
    </div>
    <div class="cmt-content">
      <p>Comment on the content</p>
    </div>
    <! -- Image list -->
    <div class="cmt-imgs" @click="show=true">
      <van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
    </div>
    <van-image-preview v-model="show" :images="images" @change="onChange">
      <template v-slot:index>Page {{index+1}}</template>
    </van-image-preview>
  </div>
</template>
<script>
export default {
  data () {
    return {
      show: false.index: 0.images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg'.'https://img.yzcdn.cn/vant/apple-2.jpg'].value: 4.5}},methods: {
    onChange (index) {
      this.index = index
    }
  }
}
</script>
<style lang="less">
.comment-item-box {
  padding: 5px 10px;
  border-bottom: 1px solid #f6f6f6;

  .cmt-header {
    display: flex;
    justify-content: space-between;

    .user {
      font-size: 12px; }}.cmt-content {
    color: # 616161;
    padding: 5px 0;
    text-align: left;
    font-size: 12px;
    line-height: 2.0;
  }
  .cmt-imgs {
    padding: 5px;
    text-align: left;
    margin-right: 5px; }}</style>

Copy the code

Compile site details page content

SightDeatail.vue

<template> <! -- Details of scenic spots --><div class="pafe-sight-detail">
    <! -- Page header -->
    <van-nav-bar
    left-text="Return"
    left-arrow
    fixed
    @click-left="goBack"
    />
    <! A larger -- - >
    <div class="sight-banner">
      <van-image src="/static/home/hot/h1_max.jpg" width="100%" height="100%"/>
      <div class="tips">
        <router-link class="pic-sts" :to="{name: 'SightImage', params: {id: 123}}">
          <van-icon name="video-o" />
          <span>10 images</span>
        </router-link>
        <div class="title">Attractions title</div>
      </div>
    </div>
    <! -- Rating, scenic spot introduction -->
    <div class="sight-info">
      <div class="left">
        <div class="info-title">
          <strong>5 points</strong>
          <small>great</small>
        </div>
        <div class="info-tips">50 comments</div>
        <van-icon name="arrow" />
      </div>
      <div class="right">
        <div class="info-title">
          <span>Scenic spots</span>
        </div>
        <div class="info-tips">Opening hours, tips</div>
        <van-icon name="arrow" />
      </div>
    </div>
    <! -- Address information -->
    <van-cell title=Panyu Dadao, Panyu District, Guangdong City, Guangdong Province, China icon="location-o"
      is-link
      :title-style="{'text-align': 'left'}">
      <template #right-icon>
        <van-icon name="arrow" />
      </template>
    </van-cell>
    <! -- Ticket list -->
    <div class="sight-ticket">
      <van-cell title="Tickets" icon="bookmark-o" title-style="text-align:left"/>
      <div class="ticket-item" v-for="i in 5" :key="i">
        <div class="left">
          <div class="title">adult</div>
          <div class="tips">
            <van-icon name="clock-o" />
            <span>Reservations can be made before 7 o 'clock</span>
          </div>
          <div class="tags">
            <van-tag mark type="primary">Label 1</van-tag>
          </div>
        </div>
        <div class="right">
          <div class="price">
            <span>RMB</span>
            <strong>65</strong>
          </div>
          <router-link to="#">
            <van-button type="warning" size="small">reservation</van-button>
          </router-link>
        </div>
      </div>
    </div>
    <! -- User comments -->
    <div class="sight-comment">
      <van-cell title="Hot comments" icon="comment-o" title-style="text-align:left"/>
      <CommentItem/>
      <router-link class="link-more" :to="{name: 'SightComment', params: {id}}">To view more</router-link>
    </div>
  </div>
</template>
<script>
// Comment item component
import CommentItem from '@/components/sight/CommentItem'
export default {
  data () {
    return {
      id: ' '}},components: {
    CommentItem
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    }
  },
  created () {
    this.id = this.$$route.params.id
  }
}
</script>
<style lang="less">
.pafe-sight-detail {
  .van-nav-bar {
    background-color: transparent; } // Large view of scenic spot.sight-banner{
    position: relative;
    .tips {
      position: absolute;
      left: 10px;
      bottom: 10px;
      font-size: 16px;
      color: #fff;

      .pic-sts {
        color: #fff;
        border-radius: 30px;
        font-size: 14px;
        background-color: rgba(0.0.0.0.4); }}} // Rating, scenic spot introduction.sight-info {
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #f6f6f6;

    & > div {
      flex: 1;
      position: relative;
    }
    .right {
      border-left: 1px solid #f6f6f6;
    }
    .info-title {
      text-align: left;
      padding: 5px 10px;
      strong {
        color: #ff8300; }}.info-tips {
      color: # 999;
      font-size: 12px;
      text-align: left;
      padding: 5px 10px;
    }
    .van-icon {
      position: absolute;
      right: 5px;
      top: 5px; }} // Ticket list.sight-ticket {
    margin-top: 10px;
    background-color: #fff;

    .ticket-item {
      display: flex;
      border-bottom: 1px solid #f6f6f6;
      padding-bottom: 10px;

      .left {
        flex: 1;
        text-align: left;
        padding: 5px 10px;

        .title {
          padding: 5px 0;
        }
        .tips {
          font-size: 12px; }}.right {
        width: 100px;
        .price {
          color: #ff9800;
          strong {
            font-size: 20px; }}}}} // List of comments.sight-comment {
    margin-top: 10px;
    background-color: #fff; } // See more.link-more {
    display: block;
    color: # 666;
    padding: 10px; }}</style>

Copy the code

Effect: